customizer-section-settings-controls.js (46830B)
1 (function (root, CP_Customizer, $) { 2 3 var sectionSettingsContainer = $('' + 4 '<li id="cp-section-setting-popup" class="customizer-right-section">' + 5 ' <span data-close-right-sidebar="true" title="' + root.CP_Customizer.translateCompanionString("Close Panel") +'" class="close-panel"></span>' + 6 ' <ul class="section-settings-container accordion-section-content no-border"></ul>' + 7 ' </li>'); 8 9 CP_Customizer.addModule(function (CP_Customizer) { 10 11 var control = wp.customize.panel('page_content_panel'); 12 control.container.find('.sections-list-reorder').append(sectionSettingsContainer); 13 14 CP_Customizer.hooks.addFilter('content_section_setting_float', function () { 15 return false; 16 }); 17 18 CP_Customizer.hooks.addFilter('content_section_setting', function () { 19 return "cp-section-setting"; 20 }); 21 22 23 CP_Customizer.createControl = function (options) { 24 25 options = _.extend({ 26 id: '', 27 type: '', 28 container: $('<div />'), 29 params: {}, 30 value: '', 31 updater: function (value) { 32 if (control.container.find('[data-cp-link]').is('[type=checkbox]')) { 33 control.container.find('[data-cp-link]').prop('checked', value); 34 return; 35 } 36 control.container.find('[data-cp-link]').val(value).trigger('change'); 37 } 38 }, options); 39 40 41 options.params.type = options.params.type || options.type; 42 43 var settingID = options.id || _.uniqueId('control-setting-'); 44 var setting = new CP_Customizer.wpApi.Setting(settingID, options.value, {}); 45 46 setting.previewer = CP_Customizer.wpApi.previewer; 47 48 setting.transport = 'postMessage'; 49 50 options.params.settings = [setting]; 51 options.params.value = options.value; 52 options.params.link = ' data-cp-link'; 53 54 var controllerClass = CP_Customizer.wpApi.controlConstructor[options.type] || CP_Customizer.wpApi.Control; 55 var control = new controllerClass( 56 settingID + '-control', 57 { 58 containerType: options.type, 59 params: options.params 60 } 61 ); 62 63 var container = $(options.container); 64 65 control.container = container; 66 control.setting = control.setting || setting; 67 68 control.section = function () { 69 return 'page_content'; 70 }; 71 72 var updaterCallback = options.updater; 73 74 var oldSet = setting.set; 75 76 setting.bind(function (value) { 77 control.params.value = value; 78 updaterCallback.call(this, value); 79 }); 80 81 setting.bind(function (value, oldValue) { 82 if (_.isFunction(setting.onChange)) { 83 setting.onChange(value, oldValue); 84 CP_Customizer.markSave(); 85 } 86 }); 87 88 setting.controlContainer = container; 89 setting.renderControl = function () { 90 control.renderContent(); 91 control.ready(); 92 93 return this; 94 }; 95 96 setting.attachWithSetter = function (currentValue, onChange) { 97 this.onChange = false; 98 this._value = undefined; 99 100 this.set(currentValue); 101 102 if (options.onAttach) { 103 options.onAttach.call(setting, currentValue); 104 } 105 106 var self = this; 107 _.delay(function () { 108 self.onChange = onChange; 109 }, 1); 110 }; 111 112 setting.renderControl(); 113 setting.control = control; 114 115 116 setting.hide = function () { 117 this.control.container.hide(); 118 }; 119 120 setting.show = function () { 121 this.control.container.show(); 122 }; 123 124 return setting; 125 }; 126 127 CP_Customizer.createControl.color = function (id, container, params) { 128 129 var $container = $('<li class="customize-control customize-control-kirki customize-control-kirki-color" />'); 130 131 if (container) { 132 $(container).append($container); 133 } 134 135 var options = { 136 id: id || '', 137 updater: function (value) { 138 var colorControl = this.control.container.find('input[data-cp-link]'); 139 if (colorControl.data('spectrum.id') === undefined) { 140 colorControl.iris('color', value); 141 } else { 142 colorControl.spectrum("set", value); 143 } 144 }, 145 type: 'kirki-color', 146 container: $container, 147 params: _.extend( 148 params, 149 { 150 choices: { 151 alpha: params.alpha || true 152 }, 153 value: params.value || "#FFFFFF" 154 } 155 ), 156 value: params.value || "#FFFFFF" 157 }; 158 159 return CP_Customizer.createControl(options); 160 }; 161 162 163 CP_Customizer.createControl.palette = function (id, container, params) { 164 165 var $container = $('<li class="customize-control customize-control-kirki customize-control-kirki-color" />'); 166 167 if (container) { 168 $(container).append($container); 169 } 170 171 var options = { 172 id: id || '', 173 updater: function (value) { 174 var colorControl = this.control.container.find('input[data-cp-link]'); 175 if (colorControl.data('spectrum.id') === undefined) { 176 colorControl.iris('color', value); 177 } else { 178 var cb = colorControl.spectrum("option", "move"); 179 colorControl.spectrum("destroy"); 180 colorControl.spectrum({ 181 showPaletteOnly: true, 182 showPalette: true, 183 color: value, 184 palette: [params.palette], 185 move: cb, 186 change: cb 187 }); 188 colorControl.spectrum("set", value); 189 190 } 191 }, 192 type: 'kirki-color', 193 container: $container, 194 params: _.extend( 195 params, 196 { 197 choices: { 198 alpha: params.alpha || true 199 }, 200 value: params.value || "#FFFFFF" 201 } 202 ), 203 value: params.value || "#FFFFFF" 204 }; 205 206 var result = CP_Customizer.createControl(options); 207 208 result.setPallete = function (palette) { 209 var colorControl = this.control.container.find('input[data-cp-link]'); 210 colorControl.spectrum('option', 'palette', palette); 211 }; 212 213 return result; 214 }; 215 216 217 CP_Customizer.createControl.select = function (id, container, params) { 218 var type = 'kirki-select', 219 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 220 221 if (container) { 222 $(container).append($container); 223 } 224 225 var options = { 226 id: id || '', 227 updater: function (value) { 228 if (this.controlContainer.find('[data-cp-link]').data().selectize) { 229 this.controlContainer.find('[data-cp-link]').data().selectize.setValue(value); 230 } 231 }, 232 type: type, 233 container: $container, 234 params: _.extend( 235 params, 236 { 237 choices: params.choices || [], 238 value: params.value || "", 239 multiple: params.multiple || [] 240 } 241 ), 242 value: params.value || "" 243 }; 244 245 return CP_Customizer.createControl(options); 246 }; 247 248 CP_Customizer.createControl.text = function (id, container, params) { 249 var type = 'kirki-number', 250 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'), 251 params = params || {}; 252 253 if (container) { 254 $(container).append($container); 255 } 256 257 var options = { 258 id: id || '', 259 260 type: type, 261 onAttach: function (value) { 262 var thisInput = this.controlContainer.find('input'); 263 thisInput.val(value); 264 }, 265 container: $container, 266 params: _.extend( 267 params, 268 { 269 value: params.value || "" 270 } 271 ), 272 value: params.value || "" 273 }; 274 275 var setting = CP_Customizer.createControl(options); 276 setting.control.container.find('input').spinner('destroy'); 277 278 return setting; 279 }; 280 281 CP_Customizer.createControl.number = function (id, container, params) { 282 var type = 'kirki-number', 283 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 284 285 if (container) { 286 $(container).append($container); 287 } 288 289 var options = { 290 id: id || '', 291 updater: function (value) { 292 if (this.controlContainer.find('[data-cp-link]').data().selectize) { 293 this.controlContainer.find('[data-cp-link]').data().selectize.setValue(value); 294 } 295 }, 296 type: type, 297 onAttach: function (value) { 298 var thisInput = this.controlContainer.find('input'); 299 thisInput.spinner("value", value); 300 }, 301 container: $container, 302 params: _.extend( 303 params, 304 { 305 choices: { 306 min: params.min, 307 max: params.max, 308 step: params.step 309 }, 310 value: params.value || "" 311 } 312 ), 313 value: params.value || "" 314 }; 315 316 return CP_Customizer.createControl(options); 317 }; 318 319 CP_Customizer.createControl.image = function (id, container, params) { 320 var type = 'image', 321 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 322 323 if (container) { 324 $(container).append($container); 325 } 326 327 var options = { 328 id: id || '', 329 type: type, 330 container: $container, 331 updater: function (value) { 332 if (value && "none" !== value && "/none" !== value.split('/none').pop()) { 333 this.control.params.attachment = { 334 id: Date.now(), 335 type: type, 336 sizes: { 337 full: { 338 url: value 339 } 340 } 341 } 342 } else { 343 this.control.params.attachment = undefined; 344 } 345 this.control.renderContent(); 346 }, 347 params: _.extend( 348 params, 349 { 350 canUpload: true, 351 button_labels: { 352 remove: window.CP_Customizer.translateCompanionString("Remove"), 353 change: window.CP_Customizer.translateCompanionString("Change"), 354 select: window.CP_Customizer.translateCompanionString("Select"), 355 placeholder: "No file selected", 356 }, 357 attachment: { 358 type: type, 359 sizes: { 360 full: { 361 url: params.url 362 } 363 } 364 } 365 } 366 ), 367 value: params.value || "" 368 }; 369 370 return CP_Customizer.createControl(options); 371 }; 372 373 CP_Customizer.createControl.video = function (id, container, params) { 374 var type = 'media', 375 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 376 377 if (container) { 378 $(container).append($container); 379 } 380 381 var options = { 382 id: id || '', 383 type: type, 384 container: $container, 385 updater: function (value) { 386 if (value) { 387 this.control.params.attachment = value; 388 } else { 389 this.control.params.value = ''; 390 } 391 this.control.renderContent(); 392 }, 393 params: _.extend( 394 params, 395 { 396 canUpload: true, 397 button_labels: { 398 remove: "Remove", 399 change: "Change", 400 select: "Select", 401 placeholder: "No file selected", 402 }, 403 attachment: { 404 id: params.value 405 } 406 } 407 ), 408 value: params.value || '' 409 }; 410 411 var result = CP_Customizer.createControl(options); 412 413 result.onSelect = function(){}; 414 415 result.attachWithSetter = function (currentValue, onChange) { 416 this.onChange = false; 417 this._value = undefined; 418 419 this.set(currentValue); 420 421 if (options.onAttach) { 422 options.onAttach.call(setting, currentValue); 423 } 424 425 var self = this; 426 _.delay(function () { 427 self.onSelect = onChange; 428 }, 1); 429 }; 430 431 result.control.select = function() { 432 // Get the attachment from the modal frame. 433 var node, 434 attachment = result.control.frame.state().get( 'selection' ).first().toJSON(), 435 mejsSettings = window._wpmejsSettings || {}; 436 437 result.control.params.attachment = attachment; 438 439 // Set the Customizer setting; the callback takes care of rendering. 440 result.control.setting( attachment.id ); 441 result.onSelect({ 442 id: attachment.id, 443 url: attachment.url, 444 icon: attachment.icon, 445 type: attachment.type 446 }) 447 node = result.control.container.find( 'audio, video' ).get(0); 448 449 // Initialize audio/video previews. 450 if ( node ) { 451 result.control.player = new MediaElementPlayer( node, mejsSettings ); 452 } else { 453 result.control.cleanupPlayer(); 454 } 455 }; 456 457 return result; 458 }; 459 460 CP_Customizer.createControl.gradient = function (id, container, params) { 461 var type = 'web-gradients', 462 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 463 464 if (container) { 465 $(container).append($container); 466 } 467 468 var options = { 469 id: id || '', 470 type: type, 471 updater: function (value) { 472 this.control.params.value = value; 473 this.control.renderContent(); 474 }, 475 container: $container, 476 params: _.extend( 477 params, 478 { 479 value: params.value || "", 480 button_label: window.CP_Customizer.translateCompanionString("Choose Gradient") 481 } 482 ), 483 value: params.value || "" 484 }; 485 486 return CP_Customizer.createControl(options); 487 }; 488 489 CP_Customizer.createControl.gradientPro = function (id, container, params) { 490 var type = 'gradient-control-pro', 491 selector = 'customize-control-' + id + '-control', 492 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" id="' + selector + '" />'); 493 494 if (container) { 495 $(container).append($container); 496 } 497 498 var options = { 499 id: id || '', 500 type: type, 501 updater: function (value) { 502 this.control.setValue(value, true); 503 }, 504 container: $container, 505 params: _.extend( 506 params, 507 { 508 value: params.value || "", 509 button_label: "Select Gradient", 510 id: id || '', 511 settings: { 512 default: id || '' 513 } 514 } 515 ), 516 value: params.value || "", 517 selector: selector 518 }; 519 520 return CP_Customizer.createControl(options); 521 }; 522 523 CP_Customizer.createControl.typography = function (id, container, params) { 524 var type = 'kirki-typography', 525 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" id="customize-control-' + id +'-control" />'); 526 527 if (container) { 528 $(container).append($container); 529 } 530 531 var options = { 532 id: id || '', 533 type: type, 534 updater: function (value) { 535 }, 536 container: $container, 537 params: _.extend( 538 params, 539 { 540 kirkiConfig: "global", 541 l10n: kirki.l10n.global, 542 default: params.value, 543 id: id || '', 544 } 545 ), 546 value: params.value || "" 547 }; 548 549 return CP_Customizer.createControl(options); 550 }; 551 552 CP_Customizer.createControl.sectionSeparator = function (id, container, label) { 553 var type = 'sectionseparator', 554 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 555 556 if (container) { 557 $(container).append($container); 558 } 559 560 var options = { 561 id: id || '', 562 type: type, 563 container: $container, 564 params: { 565 label: label 566 } 567 }; 568 569 return CP_Customizer.createControl(options); 570 }; 571 572 CP_Customizer.createControl.textarea = function (id, container, params) { 573 var type = 'kirki-generic', 574 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 575 576 if (container) { 577 $(container).append($container); 578 } 579 580 var options = { 581 id: id || '', 582 type: type, 583 container: $container, 584 params: _.extend( 585 params, 586 { 587 value: params.value || "", 588 choices: { 589 element: 'textarea', 590 rows: '5' 591 } 592 } 593 ), 594 value: params.value || "" 595 }; 596 597 return CP_Customizer.createControl(options); 598 }; 599 600 CP_Customizer.createControl.controlsGroup = function (id, container, label) { 601 var type = 'sectionseparator', 602 $container = $('<li class="customize-control customize-control-kirki customize-controls-container customize-control-' + type + '" ></li>'); 603 604 if (container) { 605 $(container).append($container); 606 } 607 608 var options = { 609 id: id || '', 610 type: type, 611 container: $container, 612 params: { 613 label: label || "" 614 } 615 }; 616 617 var result = CP_Customizer.createControl(options); 618 619 620 return (function (result, $el, parent) { 621 622 if (!label) { 623 result.control.container.find('.materialis-separator').remove() 624 } 625 626 627 result.parent = container; 628 629 result.free = function () { 630 $el.remove(); 631 }; 632 633 result.attach = function () { 634 parent.append($el); 635 }; 636 637 result.el = function () { 638 if (this.control.container.find('ul.holder').length === 0) { 639 this.control.container.append('<ul class="holder"></ul>'); 640 } 641 return this.control.container.find('ul.holder'); 642 }; 643 644 return result; 645 })(result, $container, container); 646 }; 647 648 649 CP_Customizer.createControl.controlHolder = function (id, container) { 650 var type = 'sectionsetting', 651 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 652 653 if (container) { 654 $(container).append($container); 655 } 656 657 var options = { 658 id: id || '', 659 type: type, 660 container: $container 661 }; 662 663 return CP_Customizer.createControl(options); 664 }; 665 666 667 CP_Customizer.createControl.checkbox = function (id, container, label) { 668 var type = 'kirki-checkbox', 669 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 670 671 if (container) { 672 $(container).append($container); 673 } 674 675 var options = { 676 id: id || '', 677 type: type, 678 container: $container, 679 params: { 680 label: label 681 } 682 }; 683 684 return CP_Customizer.createControl(options); 685 }; 686 687 688 CP_Customizer.createControl.generic = function (id, container, params) { 689 var type = 'kirki-generic', 690 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 691 692 if (container) { 693 $(container).append($container); 694 } 695 696 var options = { 697 id: id || '', 698 type: type, 699 container: $container, 700 params: { 701 label: params.label, 702 choices: { 703 element: 'input', 704 type: 'text' 705 } 706 }, 707 value: params.value 708 }; 709 710 return CP_Customizer.createControl(options); 711 712 713 return result; 714 }; 715 716 CP_Customizer.createControl.repeater = function (id, container, params) { 717 var type = 'repeater', 718 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 719 720 var repeaterContent = ''; 721 repeaterContent+= '<label>'; 722 repeaterContent+= '<span class="customize-control-title">' + params.label + '</span>'; 723 repeaterContent+= '<input type="hidden" ' + params + ' value="" />'; 724 repeaterContent+= '</label>'; 725 repeaterContent+= '<ul class="repeater-fields"></ul>'; 726 // repeaterContent+= '<p class="limit">' + params.choices.limit + '</p>'; 727 // repeaterContent+= '<button class="button-secondary repeater-add">Add</button>'; 728 repeaterContent+= jQuery('.customize-control-repeater-content').first().prop('outerHTML'); 729 $container.html(repeaterContent); 730 731 if (container) { 732 $(container).append($container); 733 } 734 735 var options = { 736 id: id || '', 737 type: type, 738 container: $container, 739 params: _.extend( 740 params, 741 { 742 kirkiConfig: "global", 743 l10n: kirki.l10n.global, 744 label: params.label, 745 default: params.value, 746 } 747 ), 748 value: params.value 749 }; 750 751 return CP_Customizer.createControl(options); 752 753 754 return result; 755 }; 756 757 758 CP_Customizer.createControl.button = function (id, container, label, callback, buttonOptions) { 759 var type = 'kirki-checkbox', 760 $container = $('<li class="customize-control customize-control-kirki customize-control-ope-button" />'); 761 762 if (container) { 763 $(container).append($container); 764 } 765 766 buttonOptions = _.extend( 767 { 768 class: "button full-width" 769 }, 770 buttonOptions 771 ); 772 773 var options = { 774 id: id || '', 775 type: type, 776 container: $container, 777 params: { 778 label: label 779 } 780 }; 781 782 var result = CP_Customizer.createControl(options); 783 784 result.control.container.empty(); 785 786 var $button = $('<button class="' + buttonOptions.class + '" />'); 787 $button.text(label); 788 $button.off('click').on('click', function (event) { 789 event.stopPropagation(); 790 event.preventDefault(); 791 callback.call(this, event); 792 }); 793 794 result.control.container.append($button); 795 796 return result; 797 }; 798 799 CP_Customizer.createControl.buttonGroup = function (id, container, params, callback, buttonOptions) { 800 var type = 'sidebar-button-group', 801 $container = $('<li class="customize-control customize-control-kirki customize-control-ope-button" />'); 802 803 if (container) { 804 $(container).append($container); 805 } 806 807 buttonOptions = _.extend( 808 { 809 class: "button full-width" 810 }, 811 buttonOptions 812 ); 813 814 var options = { 815 id: id || '', 816 type: type, 817 container: $container, 818 params: _.extend( 819 params, 820 { 821 popup: id 822 } 823 ), 824 }; 825 826 var result = CP_Customizer.createControl(options); 827 828 return result; 829 }; 830 831 832 CP_Customizer.createControl.info = function (id, container, content) { 833 var type = 'kirki-checkbox', 834 $container = $('<li class="customize-control customize-control-kirki customize-control-ope-info" />'); 835 836 if (container) { 837 $(container).append($container); 838 } 839 840 var options = { 841 id: id || '', 842 type: type, 843 container: $container, 844 params: { 845 label: "" 846 } 847 }; 848 849 var result = CP_Customizer.createControl(options); 850 851 result.control.container.empty(); 852 853 result.control.container.append($('<p/>').append(content)); 854 855 856 return result; 857 }; 858 859 CP_Customizer.createControl.infoPRO = function (id, container, content) { 860 861 if (CP_Customizer.IS_PRO) { 862 return; 863 } 864 865 var type = 'kirki-checkbox', 866 $container = $('<li class="customize-control customize-control-kirki customize-control-ope-info-pro" />'); 867 868 if (container) { 869 $(container).append($container); 870 } 871 872 var options = { 873 id: id || '', 874 type: type, 875 container: $container, 876 params: { 877 label: "" 878 } 879 }; 880 881 var result = CP_Customizer.createControl(options); 882 883 result.control.container.empty(); 884 885 result.control.container.append($('<p/>').append(content)); 886 887 888 return result; 889 }; 890 891 892 CP_Customizer.createControl.sortable = function (id, container, itemTemplate, label) { 893 var type = 'sectionsetting', 894 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + '" />'); 895 896 if (container) { 897 $(container).append($container); 898 } 899 900 var options = { 901 id: id || '', 902 type: type, 903 container: $container, 904 params: { 905 itemTemplate: itemTemplate, 906 label: label 907 } 908 }; 909 910 var result = CP_Customizer.createControl(options); 911 912 result.control.attachControls = function () { 913 }; 914 result.control.free = function () { 915 this.container.find('.setting-control-container').empty(); 916 try { 917 this.container.sortable('destroy'); 918 } catch (e) { 919 920 } 921 }; 922 923 result.control.onStop = function () { 924 }; 925 926 result.control.setItems = function (items, afterCreation) { 927 var control = this; 928 var itemContainer = this.container.find('.setting-control-container'); 929 930 931 for (var i = 0; i < items.length; i++) { 932 var item = items[i]; 933 var html = control.params.itemTemplate(item); 934 935 if (afterCreation) { 936 html = $(html); 937 afterCreation(html, item); 938 } 939 940 itemContainer.append(html); 941 } 942 943 itemContainer.sortable({ 944 axis: "y", 945 handle: ".handle", 946 stop: function (event, ui) { 947 result.control.onStop(event, ui); 948 } 949 }); 950 951 }; 952 953 954 return result; 955 } 956 957 CP_Customizer.createControl.number = function (id, container, options) { 958 959 options = options || {}; 960 961 options.choices = _.extend({ 962 min: 0, 963 max: 100, 964 step: 1 965 }, options.choices || {}); 966 967 var type = 'kirki-number', 968 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + ' cp-control" />'); 969 970 if (container) { 971 $(container).append($container); 972 } 973 974 975 var controlOptions = { 976 id: id || '', 977 updater: function (value) { 978 var thisInput = this.controlContainer.find('input'); 979 thisInput.val(value); 980 thisInput.change(); 981 }, 982 type: type, 983 container: $container, 984 params: { 985 label: options.label, 986 default: options.default, 987 choices: options.choices 988 }, 989 value: options.default 990 }; 991 992 return CP_Customizer.createControl(controlOptions); 993 } 994 995 CP_Customizer.createControl.spacing = function (id, container, options) { 996 if (!options.sides) { 997 options.sides = ['top', 'bottom']; 998 } 999 1000 var type = 'kirki-spacing', 1001 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + ' cp-control" />'); 1002 1003 if (container) { 1004 $(container).append($container); 1005 } 1006 1007 var sides = {}; 1008 var controls = {}; 1009 1010 for (var i = 0; i < options.sides.length; i++) { 1011 sides[options.sides[i]] = "0px"; 1012 controls[options.sides[i]] = true; 1013 } 1014 1015 var controlOptions = { 1016 id: id || '', 1017 updater: function (value) { 1018 1019 for (var key in value) { 1020 var $input = this.controlContainer.find('.' + key + '.input-wrapper > input'); 1021 $input.val(value[key]); 1022 } 1023 1024 }, 1025 type: type, 1026 container: $container, 1027 params: { 1028 kirkiConfig: "global", 1029 l10n: kirki.l10n.global, 1030 label: options.label, 1031 default: sides, 1032 choices: { 1033 controls: controls 1034 } 1035 }, 1036 value: sides 1037 }; 1038 1039 kirkiNotifications(id, type, 'global'); 1040 1041 return CP_Customizer.createControl(controlOptions); 1042 }; 1043 1044 CP_Customizer.createControl.dimension = function (id, container, options) { 1045 1046 options = options || {}; 1047 1048 var type = 'kirki-dimension', 1049 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + ' cp-control" />'); 1050 1051 if (container) { 1052 $(container).append($container); 1053 } 1054 1055 1056 var controlOptions = { 1057 id: id || '', 1058 updater: function (value) { 1059 var $input = this.controlContainer.find('.input-wrapper > input'); 1060 $input.val(value); 1061 1062 }, 1063 type: type, 1064 container: $container, 1065 params: { 1066 kirkiConfig: "global", 1067 l10n: kirki.l10n.global, 1068 label: options.label, 1069 default: options.default || "0px" 1070 }, 1071 value: options.default || "0px" 1072 }; 1073 1074 kirkiNotifications(id, type, 'global'); 1075 1076 return CP_Customizer.createControl(controlOptions); 1077 } 1078 1079 CP_Customizer.createControl.slider = function (id, container, options) { 1080 1081 options = options || {}; 1082 1083 options.choices = _.extend({ 1084 min: 0, 1085 max: 100, 1086 step: 1, 1087 default: 0 1088 }, options.choices || {}); 1089 1090 var type = 'kirki-slider', 1091 $container = $('<li class="customize-control customize-control-kirki customize-control-' + type + ' cp-control" />'); 1092 1093 if (container) { 1094 $(container).append($container); 1095 } 1096 1097 1098 var controlOptions = { 1099 id: id || '', 1100 updater: function (value) { 1101 var thisInput = this.controlContainer.find('input'); 1102 thisInput.val(value); 1103 thisInput.change(); 1104 thisInput.siblings('.kirki_range_value').find('.value').text(value); 1105 1106 }, 1107 onAttach: function (value) { 1108 var thisInput = this.controlContainer.find('input'); 1109 thisInput.attr('data-reset_value', value); 1110 thisInput.data('reset_value', value); 1111 }, 1112 type: type, 1113 container: $container, 1114 params: { 1115 kirkiConfig: "global", 1116 l10n: kirki.l10n.global, 1117 label: options.label, 1118 default: options.default, 1119 choices: options.choices 1120 }, 1121 value: options.default 1122 }; 1123 1124 kirkiNotifications(id, type, 'global'); 1125 1126 return CP_Customizer.createControl(controlOptions); 1127 } 1128 }); 1129 1130 })(window, CP_Customizer, jQuery); 1131 1132 1133 (function (root, CP_Customizer, $) { 1134 CP_Customizer.addModule(function (CP_Customizer) { 1135 var $sectionSettingsContainer = $("#cp-section-setting-popup .section-settings-container"); 1136 1137 CP_Customizer.hooks.doAction('section_panel_before_dimensions', $sectionSettingsContainer); // ##### 1138 1139 CP_Customizer.hooks.addAction('right_sidebar_opened', function (sidebarId, data) { 1140 if (sidebarId !== 'cp-section-setting') { 1141 return; 1142 } 1143 1144 CP_Customizer.panels.sectionPanel.init(data); 1145 CP_Customizer.panels.sectionPanel.update(data); 1146 CP_Customizer.hooks.doAction('section_sidebar_opened', data); 1147 }); 1148 1149 1150 var baseArea = { 1151 1152 __controls: {}, 1153 1154 priority: 100, 1155 1156 extend: function (options) { 1157 return _.extend(this, options); 1158 }, 1159 1160 init: function () { 1161 }, 1162 update: function () { 1163 }, 1164 1165 disable: function () { 1166 for (var item in this.__controls) { 1167 this.__controls[item].hide(); 1168 } 1169 this.enabled = false; 1170 }, 1171 enable: function () { 1172 for (var item in this.__controls) { 1173 this.__controls[item].show(); 1174 } 1175 this.enabled = true; 1176 }, 1177 1178 1179 _exclude: false, 1180 1181 exclude: function () { 1182 this._exclude = true; 1183 }, 1184 1185 include: function () { 1186 this._exclude = false; 1187 }, 1188 1189 canInclude: function () { 1190 return !this._exclude; 1191 }, 1192 1193 getPrefixed: function (data) { 1194 return this.name + '-' + data; 1195 }, 1196 1197 areaTitle: false, 1198 1199 1200 initAreaTitle: function ($container) { 1201 if (this.areaTitle) { 1202 var separator = CP_Customizer.createControl.sectionSeparator( 1203 this.getPrefixed('area-title'), 1204 $container, 1205 this.areaTitle 1206 ); 1207 this.addToControlsList(separator); 1208 } 1209 }, 1210 1211 hideAll:function(){ 1212 for(var control in this.__controls){ 1213 this.__controls[control].hide(); 1214 } 1215 }, 1216 1217 showAll:function(){ 1218 for(var control in this.__controls){ 1219 this.__controls[control].show(); 1220 } 1221 }, 1222 1223 addToControlsList: function (control) { 1224 this.__controls[control.id] = control; 1225 }, 1226 1227 getControl: function (id) { 1228 if (this.__controls[id]) { 1229 return this.__controls[id]; 1230 } 1231 1232 if (this.__controls[this.getPrefixed(id)]) { 1233 return this.__controls[this.getPrefixed(id)]; 1234 } 1235 1236 return null; 1237 }, 1238 1239 wrapOriginal: function (originalName, newFunction) { 1240 if (_.isFunction(this[originalName])) { 1241 this[originalName] = _.wrap(this[originalName], newFunction); 1242 } 1243 } 1244 }; 1245 1246 1247 var panelBase = { 1248 _areas: {}, 1249 _initialized: false, 1250 1251 extend: function (options) { 1252 return _.extend(this, options); 1253 }, 1254 1255 registerArea: function (name, options, forceOverride) { 1256 1257 var settings = _.extend( 1258 CP_Customizer.utils.deepClone(baseArea), 1259 options 1260 ); 1261 1262 if (!this._areas[name] || forceOverride === true) { 1263 this._areas[name] = _.extend({ 1264 enabled: true, 1265 name: name 1266 }, settings); 1267 1268 1269 } 1270 1271 return this._areas[name]; 1272 }, 1273 1274 hasArea: function (name) { 1275 return !_.isUndefined(this._areas[name]); 1276 }, 1277 1278 getArea: function (name) { 1279 return this._areas[name]; 1280 }, 1281 1282 init: function (data) { 1283 if (this._initialized) { 1284 return; 1285 } 1286 1287 this._initialized = true; 1288 1289 1290 var self = this; 1291 1292 // sort asc by priority 1293 var areas = Object.getOwnPropertyNames(this._areas).sort(function (a, b) { 1294 return self._areas[a].priority - self._areas[b].priority; 1295 }); 1296 1297 areas = CP_Customizer.hooks.applyFilters('section_sidebar_sort_areas', areas); 1298 1299 areas.forEach(function (area) { 1300 if (self._areas[area] && self._areas[area].canInclude()) { 1301 CP_Customizer.hooks.doAction('before_section_sidebar_area_' + name, $sectionSettingsContainer); 1302 1303 self._processExtendAreaQueue(self._areas[area]); 1304 1305 self._areas[area].initAreaTitle($sectionSettingsContainer); 1306 self._areas[area].init($sectionSettingsContainer); 1307 1308 CP_Customizer.hooks.doAction('after_section_sidebar_area_' + name, $sectionSettingsContainer); 1309 } 1310 }); 1311 1312 this.update(data); 1313 }, 1314 1315 update: function (data) { 1316 1317 data.sectionExports = CP_Customizer.getSectionExports(data.section); 1318 1319 for (var area in this._areas) { 1320 1321 if (this._areas[area].canInclude()) { 1322 1323 CP_Customizer.hooks.doAction('update_before_section_sidebar_area_' + name, data); 1324 this._areas[area].update(data); 1325 CP_Customizer.hooks.doAction('update_after_section_sidebar_area_' + name, data); 1326 1327 } 1328 } 1329 }, 1330 disableArea: function (name) { 1331 if (this._areas[name] && this._areas[name].enabled) { 1332 this._areas[name].enabled = false; 1333 this._areas[name].disable(); 1334 } 1335 }, 1336 enableArea: function (name) { 1337 if (this._areas[name] && !this._areas[name].enabled) { 1338 this._areas[name].enabled = false; 1339 this._areas[name].enable(); 1340 } 1341 }, 1342 1343 excludeArea: function (name) { 1344 if (this._areas[name]) { 1345 this._areas[name].exclude(); 1346 } 1347 }, 1348 1349 _areasToExtend: {}, 1350 1351 _processExtendAreaQueue: function (area) { 1352 var extendCallback = this._areasToExtend[area.name]; 1353 1354 if (extendCallback) { 1355 extendCallback(area) 1356 } 1357 }, 1358 1359 extendArea: function (name, callback) { 1360 if (this._areas[name]) { 1361 callback(this._areas[name]); 1362 } else { 1363 if (!this._areasToExtend[name]) { 1364 this._areasToExtend[name] = callback; 1365 } 1366 } 1367 } 1368 }; 1369 1370 CP_Customizer.panels = CP_Customizer.panel || {}; 1371 CP_Customizer.panels.panelBase = panelBase; 1372 CP_Customizer.panels.panelArea = baseArea; 1373 1374 CP_Customizer.panels.instantiate = function (config) { 1375 return _.extend(CP_Customizer.utils.deepClone(panelBase), config || {}); 1376 }; 1377 1378 CP_Customizer.panels.sectionPanel = _.extend(CP_Customizer.panels.sectionPanel || {}, panelBase); 1379 1380 }); 1381 1382 })(window, CP_Customizer, jQuery);