widget-options
/
includes
/
widgets
/
gutenberg
/
src
/
attributes
/
components
/
option-tabs
/
settings.js
widget-options
/
includes
/
widgets
/
gutenberg
/
src
/
attributes
/
components
/
option-tabs
Last commit date
alignment.js
1 year ago
animation.js
1 year ago
behavior.js
1 year ago
columns.js
1 year ago
days-dates.js
1 year ago
devices.js
1 year ago
roles.js
1 year ago
settings.js
1 year ago
styling.js
1 year ago
visibility.js
1 year ago
settings.js
589 lines
| 1 | import { __ } from "@wordpress/i18n"; |
| 2 | import { TabPanel } from "@wordpress/components"; |
| 3 | import React from "react"; |
| 4 | |
| 5 | const { PanelBody } = wp.components; |
| 6 | |
| 7 | const onSelect = (tabName) => {}; |
| 8 | |
| 9 | const SettingsTabPanel = (props) => { |
| 10 | const validLicense = true; |
| 11 | let validLicenseClass = props.validLicense ? "" : "disabled-section"; |
| 12 | let widget_options = { ...props.widgetopts_get_settings }; |
| 13 | let selected = ""; |
| 14 | let options_values = ""; |
| 15 | let desktop_clear = ""; |
| 16 | let tablet_clear = ""; |
| 17 | let types = []; |
| 18 | let options_role = ""; |
| 19 | let roles = []; |
| 20 | let miscs = []; |
| 21 | let key = ""; |
| 22 | let value = ""; |
| 23 | let misc_values = []; |
| 24 | let taxonomies = []; |
| 25 | let terms_values = []; |
| 26 | let taxLoop = []; |
| 27 | let tax_values = []; |
| 28 | let args = []; |
| 29 | let authors = []; |
| 30 | let options_author_pages = 0; |
| 31 | let fields = props.widgetopts_acf_get_field_groups |
| 32 | ? props.widgetopts_acf_get_field_groups |
| 33 | : []; |
| 34 | let acf_values = ""; |
| 35 | let pages_values; |
| 36 | const liMisc = React.useRef(null); |
| 37 | const liClass = React.useRef(null); |
| 38 | const liAnimation = React.useRef(null); |
| 39 | const liLogic = React.useRef(null); |
| 40 | let check = ""; |
| 41 | let fixed = ""; |
| 42 | let link = ""; |
| 43 | let target = ""; |
| 44 | let nofollow = ""; |
| 45 | let is_url = ""; |
| 46 | let urls = ""; |
| 47 | let id = ""; |
| 48 | let classes_data = ""; |
| 49 | let predefined = []; |
| 50 | let animation = ""; |
| 51 | let event = ""; |
| 52 | let speed = ""; |
| 53 | let offset = ""; |
| 54 | let hidden = ""; |
| 55 | let link_title = ""; |
| 56 | let http = ""; |
| 57 | let nocache = ""; |
| 58 | let logic = ""; |
| 59 | |
| 60 | let _animation_array = { |
| 61 | "Attention Seekers": [ |
| 62 | "bounce", |
| 63 | "flash", |
| 64 | "pulse", |
| 65 | "rubberBand", |
| 66 | "shake", |
| 67 | "swing", |
| 68 | "tada", |
| 69 | "wobble", |
| 70 | "jello", |
| 71 | ], |
| 72 | "Bouncing Entrances": [ |
| 73 | "bounceIn", |
| 74 | "bounceInDown", |
| 75 | "bounceInLeft", |
| 76 | "bounceInRight", |
| 77 | "bounceInUp", |
| 78 | ], |
| 79 | |
| 80 | "Fading Entrances": [ |
| 81 | "fadeIn", |
| 82 | "fadeInDown", |
| 83 | "fadeInDownBig", |
| 84 | "fadeInLeft", |
| 85 | "fadeInLeftBig", |
| 86 | "fadeInRight", |
| 87 | "fadeInRightBig", |
| 88 | "fadeInUp", |
| 89 | "fadeInUpBig", |
| 90 | ], |
| 91 | Flippers: ["flip", "flipInX", "flipInY", "flipOutX", "flipOutY"], |
| 92 | Lightspeed: ["lightSpeedIn", "lightSpeedOut"], |
| 93 | |
| 94 | "Rotating Entrances": [ |
| 95 | "rotateIn", |
| 96 | "rotateInDownLeft", |
| 97 | "rotateInDownRight", |
| 98 | "rotateInUpLeft", |
| 99 | "rotateInUpRight", |
| 100 | ], |
| 101 | "Sliding Entrances": [ |
| 102 | "slideInUp", |
| 103 | "slideInDown", |
| 104 | "slideInLeft", |
| 105 | "slideInRight", |
| 106 | ], |
| 107 | "Zoom Entrances": [ |
| 108 | "zoomIn", |
| 109 | "zoomInDown", |
| 110 | "zoomInLeft", |
| 111 | "zoomInRight", |
| 112 | "zoomInUp", |
| 113 | ], |
| 114 | Specials: ["hinge", "rollIn"], |
| 115 | }; |
| 116 | |
| 117 | let animation_array = [...Object.entries(_animation_array)]; |
| 118 | |
| 119 | const handleInputChange = (event, key1, key2) => { |
| 120 | let _attribute = { ...props.extended_widget_opts }; |
| 121 | if ( |
| 122 | _attribute[key1] == undefined || |
| 123 | (_attribute[key1] != undefined && _attribute[key1].length == 0) |
| 124 | ) { |
| 125 | _attribute[key1] = {}; |
| 126 | } |
| 127 | |
| 128 | _attribute[key1][key2] = event.target.value; |
| 129 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 130 | }; |
| 131 | |
| 132 | const handleInputChangeVisibilityACFVisbility = (event) => { |
| 133 | let _attribute = { ...props.extended_widget_opts }; |
| 134 | if ( |
| 135 | _attribute["visibility"] == undefined || |
| 136 | (_attribute["visibility"] != undefined && |
| 137 | _attribute["visibility"].length == 0) |
| 138 | ) { |
| 139 | _attribute["visibility"] = {}; |
| 140 | } |
| 141 | |
| 142 | if ( |
| 143 | _attribute["visibility"]["acf"] == undefined || |
| 144 | (_attribute["visibility"]["acf"] != undefined && |
| 145 | _attribute["visibility"]["acf"].length == 0) |
| 146 | ) { |
| 147 | _attribute["visibility"]["acf"] = {}; |
| 148 | } |
| 149 | |
| 150 | _attribute["visibility"]["acf"]["visibility"] = event.target.value; |
| 151 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 152 | }; |
| 153 | |
| 154 | const handleInputChangeVisibilityACFField = (event) => { |
| 155 | let _attribute = { ...props.extended_widget_opts }; |
| 156 | if ( |
| 157 | _attribute["visibility"] == undefined || |
| 158 | (_attribute["visibility"] != undefined && |
| 159 | _attribute["visibility"].length == 0) |
| 160 | ) { |
| 161 | _attribute["visibility"] = {}; |
| 162 | } |
| 163 | |
| 164 | if ( |
| 165 | _attribute["visibility"]["acf"] == undefined || |
| 166 | (_attribute["visibility"]["acf"] != undefined && |
| 167 | _attribute["visibility"]["acf"].length == 0) |
| 168 | ) { |
| 169 | _attribute["visibility"]["acf"] = {}; |
| 170 | } |
| 171 | |
| 172 | _attribute["visibility"]["acf"]["field"] = event.target.value; |
| 173 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 174 | }; |
| 175 | |
| 176 | const handleInputChangeVisibilityACFCondition = (event) => { |
| 177 | let _attribute = { ...props.extended_widget_opts }; |
| 178 | if ( |
| 179 | _attribute["visibility"] == undefined || |
| 180 | (_attribute["visibility"] != undefined && |
| 181 | _attribute["visibility"].length == 0) |
| 182 | ) { |
| 183 | _attribute["visibility"] = {}; |
| 184 | } |
| 185 | |
| 186 | if ( |
| 187 | _attribute["visibility"]["acf"] == undefined || |
| 188 | (_attribute["visibility"]["acf"] != undefined && |
| 189 | _attribute["visibility"]["acf"].length == 0) |
| 190 | ) { |
| 191 | _attribute["visibility"]["acf"] = {}; |
| 192 | } |
| 193 | |
| 194 | _attribute["visibility"]["acf"]["condition"] = event.target.value; |
| 195 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 196 | }; |
| 197 | |
| 198 | const handleInputChangeVisibilityACFConditionalValue = (event) => { |
| 199 | let _attribute = { ...props.extended_widget_opts }; |
| 200 | if ( |
| 201 | _attribute["visibility"] == undefined || |
| 202 | (_attribute["visibility"] != undefined && |
| 203 | _attribute["visibility"].length == 0) |
| 204 | ) { |
| 205 | _attribute["visibility"] = {}; |
| 206 | } |
| 207 | |
| 208 | if ( |
| 209 | _attribute["visibility"]["acf"] == undefined || |
| 210 | (_attribute["visibility"]["acf"] != undefined && |
| 211 | _attribute["visibility"]["acf"].length == 0) |
| 212 | ) { |
| 213 | _attribute["visibility"]["acf"] = {}; |
| 214 | } |
| 215 | |
| 216 | _attribute["visibility"]["acf"]["value"] = event.target.value; |
| 217 | props.onUpdateDynamicAttribute(_attribute, props.widgetId); |
| 218 | }; |
| 219 | |
| 220 | const checkLicense = (isLicenseValid) => { |
| 221 | if (isLicenseValid) { |
| 222 | return ""; |
| 223 | } else { |
| 224 | return ( |
| 225 | <div className="extended-widget-opts-demo-warning"> |
| 226 | <p className="widgetopts-unlock-features"> |
| 227 | <span className="dashicons dashicons-lock"></span> |
| 228 | <br /> |
| 229 | Unlock all Features |
| 230 | <br /> |
| 231 | <a |
| 232 | href="https://widget-options.com/?utm_source=wordpressadmin&utm_medium=widgettabs&utm_campaign=widgetoptsprotab" |
| 233 | className="button-primary" |
| 234 | target="_blank" |
| 235 | > |
| 236 | Learn More |
| 237 | </a> |
| 238 | </p> |
| 239 | </div> |
| 240 | ); |
| 241 | } |
| 242 | }; |
| 243 | |
| 244 | const checkSelectedRoles = (rolesSelected, role, roleName, roleInfo) => { |
| 245 | if ( |
| 246 | (rolesSelected != undefined && |
| 247 | rolesSelected != null && |
| 248 | rolesSelected != "") || |
| 249 | (role[roleName] != undefined && |
| 250 | role[roleName] != "" && |
| 251 | role[roleName] != null) |
| 252 | ) { |
| 253 | return ( |
| 254 | <option value={roleName} selected="selected"> |
| 255 | {roleInfo["name"]} |
| 256 | </option> |
| 257 | ); |
| 258 | } else { |
| 259 | return ""; |
| 260 | } |
| 261 | }; |
| 262 | |
| 263 | const clickTabs = (el, tabName) => { |
| 264 | Array.from( |
| 265 | document.querySelectorAll(".extended-widget-opts-settings-tab-settings") |
| 266 | ).forEach((ele) => ele.classList.remove("ui-tabs-active")); |
| 267 | |
| 268 | Array.from( |
| 269 | document.querySelectorAll( |
| 270 | ".extended-widget-opts-inside-tabs .extended-widget-opts-settings-tabcontent-2" |
| 271 | ) |
| 272 | ).forEach((ele) => (ele.style.display = "none")); |
| 273 | |
| 274 | document.getElementById( |
| 275 | "extended-widget-opts-settings-tab-" + props.widgetId + "-" + tabName |
| 276 | ).style.display = "block"; |
| 277 | |
| 278 | el.current.classList.add("ui-tabs-active"); |
| 279 | }; |
| 280 | |
| 281 | return ( |
| 282 | <div |
| 283 | id={"extended-widget-opts-tab-" + props.widgetId + "-class"} |
| 284 | className="extended-widget-opts-tabcontent extended-widget-opts-tabcontent-class" |
| 285 | style={{ width: "100%" }} |
| 286 | > |
| 287 | <div className="extended-widget-opts-settings-tabs extended-widget-opts-inside-tabs"> |
| 288 | <input |
| 289 | type="hidden" |
| 290 | id="extended-widget-opts-styling-selectedtab" |
| 291 | value={selected} |
| 292 | name={"extended_widget_opts[class][selected]"} |
| 293 | /> |
| 294 | |
| 295 | {/* <ul |
| 296 | id={"settings-tabs-" + props.widgetId} |
| 297 | className="extended-widget-opts-settings-tabnav-ul ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header" |
| 298 | > |
| 299 | {widget_options["logic"] == "activate" ? ( |
| 300 | <li |
| 301 | ref={liLogic} |
| 302 | className="extended-widget-opts-settings-tab-settings ui-tabs-active" |
| 303 | onClick={() => clickTabs(liLogic, "logic")} |
| 304 | > |
| 305 | <a |
| 306 | href={ |
| 307 | "#extended-widget-opts-settings-tab-" + |
| 308 | props.widgetId + |
| 309 | "-logic" |
| 310 | } |
| 311 | title={__("Display Logic")} |
| 312 | > |
| 313 | {__("Logic")} |
| 314 | </a> |
| 315 | </li> |
| 316 | ) : ( |
| 317 | "" |
| 318 | )} |
| 319 | |
| 320 | {widget_options["acf"] == "activate" && props.editor == "widget" ? ( |
| 321 | <li |
| 322 | ref={liAnimation} |
| 323 | className="extended-widget-opts-settings-tab-settings" |
| 324 | onClick={() => clickTabs(liAnimation, "acf")} |
| 325 | > |
| 326 | <a |
| 327 | href={ |
| 328 | "#extended-widget-opts-settings-tab-" + |
| 329 | props.widgetId + |
| 330 | "-acf" |
| 331 | } |
| 332 | title={__("ACF")} |
| 333 | > |
| 334 | {__("ACF")} |
| 335 | </a> |
| 336 | </li> |
| 337 | ) : ( |
| 338 | "" |
| 339 | )} |
| 340 | <div className="extended-widget-opts-clearfix"></div> |
| 341 | </ul> */} |
| 342 | <div className="extended-widget-opts-clearfix"></div> |
| 343 | |
| 344 | {"activate" == widget_options["logic"] ? ( |
| 345 | <PanelBody |
| 346 | title={__("Logic")} |
| 347 | className="margin-x-minus-16" |
| 348 | initialOpen={true} |
| 349 | > |
| 350 | <div |
| 351 | id={ |
| 352 | "extended-widget-opts-settings-tab-" + props.widgetId + "-logic" |
| 353 | } |
| 354 | class="extended-widget-opts-settings-tabcontent-2 extended-widget-opts-settings-tabcontent extended-widget-opts-inner-tabcontent" |
| 355 | > |
| 356 | <div class="widget-opts-logic"> |
| 357 | <p style={{ "margin-top": "10px", "margin-bottom": "0px" }}> |
| 358 | <small> |
| 359 | Control where you want the widgets to appear using{" "} |
| 360 | <a |
| 361 | href="http://codex.wordpress.org/Conditional_Tags" |
| 362 | target="_blank" |
| 363 | > |
| 364 | WP Conditional Tags |
| 365 | </a> |
| 366 | , or any general PHP code. |
| 367 | </small> |
| 368 | </p> |
| 369 | <textarea |
| 370 | class="widefat" |
| 371 | name={"extended_widget_opts[class][logic]"} |
| 372 | onChange={(event) => |
| 373 | handleInputChange(event, "class", "logic") |
| 374 | } |
| 375 | value={ |
| 376 | props.extended_widget_opts["class"] != undefined && |
| 377 | props.extended_widget_opts["class"]["logic"] != undefined |
| 378 | ? props.extended_widget_opts["class"]["logic"].replace( |
| 379 | new RegExp("\\\\", "g"), |
| 380 | "" |
| 381 | ) |
| 382 | : "" |
| 383 | } |
| 384 | ></textarea> |
| 385 | |
| 386 | {widget_options["settings"]["logic"] != undefined || |
| 387 | (widget_options["settings"]["logic"] != undefined && |
| 388 | (widget_options["settings"]["logic"]["notice"] == undefined || |
| 389 | widget_options["settings"]["logic"]["notice"] == "" || |
| 390 | widget_options["settings"]["logic"]["notice"] == null)) ? ( |
| 391 | <div> |
| 392 | <p> |
| 393 | <a href="#" class="widget-opts-toggler-note"> |
| 394 | {__("Click to Toggle Note")} |
| 395 | </a> |
| 396 | </p> |
| 397 | <p class="widget-opts-toggle-note"> |
| 398 | <small> |
| 399 | {__( |
| 400 | 'PLEASE NOTE that the display logic you introduce is EVAL\'d directly. Anyone who has access to edit widget appearance will have the right to add any code, including malicious and possibly destructive functions. There is an optional filter <em>"extended_widget_options_logic_override"</em> which you can use to bypass the EVAL with your own code if needed.' |
| 401 | )} |
| 402 | </small> |
| 403 | </p> |
| 404 | </div> |
| 405 | ) : ( |
| 406 | "" |
| 407 | )} |
| 408 | </div> |
| 409 | </div> |
| 410 | </PanelBody> |
| 411 | ) : ( |
| 412 | "" |
| 413 | )} |
| 414 | |
| 415 | {widget_options["acf"] != undefined && |
| 416 | "activate" == widget_options["acf"] && |
| 417 | props.editor == "widget" ? ( |
| 418 | <PanelBody |
| 419 | title={__("ACF")} |
| 420 | className="margin-x-minus-16" |
| 421 | initialOpen={false} |
| 422 | > |
| 423 | <div |
| 424 | id={ |
| 425 | "extended-widget-opts-settings-tab-" + props.widgetId + "-acf" |
| 426 | } |
| 427 | class="extended-widget-opts-settings-tabcontent-2 extended-widget-opts-settings-tabcontent extended-widget-opts-inner-tabcontent extended-widget-opts-tabcontent-acf" |
| 428 | > |
| 429 | {widget_options["acf"] != undefined && |
| 430 | "activate" == widget_options["acf"] ? ( |
| 431 | <div |
| 432 | id={ |
| 433 | "extended-widget-opts-visibility-tab-" + |
| 434 | props.widgetId + |
| 435 | "-acf" |
| 436 | } |
| 437 | className="extended-widget-opts-visibility-tabcontent extended-widget-opts-inside-tabcontent extended-widget-opts-inner-tabcontent" |
| 438 | > |
| 439 | <p style={{ "margin-top": "10px" }}> |
| 440 | <strong>{__("Hide/Show")}</strong> |
| 441 | <select |
| 442 | class="widefat" |
| 443 | name={"extended_widget_opts[visibility][acf][visibility]"} |
| 444 | onChange={handleInputChangeVisibilityACFVisbility} |
| 445 | value={ |
| 446 | props.extended_widget_opts["visibility"] != undefined && |
| 447 | props.extended_widget_opts["visibility"]["acf"] != |
| 448 | undefined && |
| 449 | props.extended_widget_opts["visibility"]["acf"][ |
| 450 | "visibility" |
| 451 | ] != undefined |
| 452 | ? props.extended_widget_opts["visibility"]["acf"][ |
| 453 | "visibility" |
| 454 | ] |
| 455 | : "" |
| 456 | } |
| 457 | > |
| 458 | <option value="hide"> |
| 459 | {__("Hide when Condition's met")} |
| 460 | </option> |
| 461 | <option value="show"> |
| 462 | {__("Show when Condition's met")} |
| 463 | </option> |
| 464 | </select> |
| 465 | </p> |
| 466 | |
| 467 | <p> |
| 468 | <strong>{__("Choose ACF Field")}</strong> |
| 469 | <select |
| 470 | class="widefat" |
| 471 | name={"extended_widget_opts[visibility][acf][field]"} |
| 472 | onChange={handleInputChangeVisibilityACFField} |
| 473 | value={ |
| 474 | props.extended_widget_opts["visibility"] != undefined && |
| 475 | props.extended_widget_opts["visibility"]["acf"] != |
| 476 | undefined && |
| 477 | props.extended_widget_opts["visibility"]["acf"][ |
| 478 | "field" |
| 479 | ] != undefined |
| 480 | ? props.extended_widget_opts["visibility"]["acf"][ |
| 481 | "field" |
| 482 | ] |
| 483 | : "" |
| 484 | } |
| 485 | > |
| 486 | <option value=""> |
| 487 | {__("Select Field", "widget-options")} |
| 488 | </option> |
| 489 | |
| 490 | {(function () { |
| 491 | let keys = Object.keys(fields); |
| 492 | return keys.map(function (field, i) { |
| 493 | return ( |
| 494 | <optgroup label={fields[field]["title"]}> |
| 495 | {fields[field]["fields"].map(function (f) { |
| 496 | return ( |
| 497 | <option value={f["key"]}>{f["label"]}</option> |
| 498 | ); |
| 499 | })} |
| 500 | </optgroup> |
| 501 | ); |
| 502 | }); |
| 503 | })()} |
| 504 | </select> |
| 505 | </p> |
| 506 | <p> |
| 507 | <strong>{__("Condition")}</strong> |
| 508 | <select |
| 509 | class="widefat" |
| 510 | name={"extended_widget_opts[visibility][acf][condition]"} |
| 511 | onChange={handleInputChangeVisibilityACFCondition} |
| 512 | value={ |
| 513 | props.extended_widget_opts["visibility"] != undefined && |
| 514 | props.extended_widget_opts["visibility"]["acf"] != |
| 515 | undefined && |
| 516 | props.extended_widget_opts["visibility"]["acf"][ |
| 517 | "condition" |
| 518 | ] != undefined |
| 519 | ? props.extended_widget_opts["visibility"]["acf"][ |
| 520 | "condition" |
| 521 | ] |
| 522 | : "" |
| 523 | } |
| 524 | > |
| 525 | <option value="">{__("Select Condition")}</option> |
| 526 | <optgroup label={__("Conditional")}> |
| 527 | <option value="equal">{__("Is Equal to")}</option> |
| 528 | <option value="not_equal"> |
| 529 | {__("Is Not Equal to")} |
| 530 | </option> |
| 531 | <option value="contains">{__("Contains")}</option> |
| 532 | <option value="not_contains"> |
| 533 | {__("Does Not Contain")} |
| 534 | </option> |
| 535 | </optgroup> |
| 536 | <optgroup label={__("Value Based")}> |
| 537 | <option value="empty">{__("Is Empty")}</option> |
| 538 | <option value="not_empty">{__("Is Not Empty")}</option> |
| 539 | </optgroup> |
| 540 | </select> |
| 541 | </p> |
| 542 | <p> |
| 543 | <strong>{__("Conditional Value")}</strong> |
| 544 | <textarea |
| 545 | name={"extended_widget_opts[visibility][acf][value]"} |
| 546 | id={props.widgetId + "-opts-acf-value"} |
| 547 | className="widefat widgetopts-acf-conditional" |
| 548 | onChange={handleInputChangeVisibilityACFConditionalValue} |
| 549 | value={ |
| 550 | props.extended_widget_opts["visibility"] != undefined && |
| 551 | props.extended_widget_opts["visibility"]["acf"] != |
| 552 | undefined && |
| 553 | props.extended_widget_opts["visibility"]["acf"][ |
| 554 | "value" |
| 555 | ] != undefined |
| 556 | ? props.extended_widget_opts["visibility"]["acf"][ |
| 557 | "value" |
| 558 | ] |
| 559 | : "" |
| 560 | } |
| 561 | ></textarea> |
| 562 | </p> |
| 563 | </div> |
| 564 | ) : ( |
| 565 | "" |
| 566 | )} |
| 567 | </div> |
| 568 | </PanelBody> |
| 569 | ) : ( |
| 570 | "" |
| 571 | )} |
| 572 | </div> |
| 573 | |
| 574 | <style> |
| 575 | {` |
| 576 | .extended-widget-opts-inside-tabs .ui-tabs-nav li.extended-widget-opts-settings-tab-settings a { |
| 577 | padding: 6px 4px !important; |
| 578 | } |
| 579 | .extended-widget-opts-tabs .ui-tabs-nav li.extended-widget-opts-settings-tab-settings.ui-tabs-active a { |
| 580 | padding-bottom: 9px !important; |
| 581 | } |
| 582 | `} |
| 583 | </style> |
| 584 | </div> |
| 585 | ); |
| 586 | }; |
| 587 | |
| 588 | export default SettingsTabPanel; |
| 589 |