customizer-section-settings-panel.js (31101B)
1 (function (root, CP_Customizer, $) { 2 CP_Customizer.addModule(function (CP_Customizer) { 3 CP_Customizer.hooks.addFilter('section_fixed_overlay_options', function (options, type) { 4 5 var item = { 6 7 name: "section_more_settings_button", 8 title: window.CP_Customizer.translateCompanionString("Section Settings"), 9 10 on_click: function (node) { 11 var section = node; 12 13 if (!section.parent().is(CP_Customizer.preview.getRootNode())) { 14 section = node.parentsUntil(top.CP_Customizer.preview.getRootNode()).last(); 15 } 16 17 section = CP_Customizer.hooks.applyFilters('filter_cog_item_section_element', section, node); 18 19 CP_Customizer.wpApi.panel('page_content_panel').focus() 20 CP_Customizer.openRightSidebar("cp-section-setting", { 21 section: section 22 }); 23 } 24 25 }; 26 27 if (type === "section" && options && !itemExists(options, item.name)) { 28 options.items.push(item); 29 } 30 31 return options; 32 }); 33 34 35 CP_Customizer.hooks.addFilter('section_fixed_overlay', function (options, key) { 36 37 var tempOptions = _.clone(options); 38 39 if (key === "items") { 40 if (_.isArray(tempOptions)) { 41 tempOptions.forEach(function (item, index, optionsList) { 42 if (item.name === "section_color_changer" || item.name === "columns_reorder") { 43 if (item.on_hover) { 44 delete item.on_hover; 45 } 46 47 item.classes = ""; 48 49 item.on_click = function (node) { 50 var section = node; 51 52 if (!section.parent().is(CP_Customizer.preview.getRootNode())) { 53 section = node.parentsUntil(top.CP_Customizer.preview.getRootNode()).last(); 54 } 55 56 section = CP_Customizer.hooks.applyFilters('filter_cog_item_section_element', section, node); 57 58 CP_Customizer.wpApi.panel('page_content_panel').focus() 59 CP_Customizer.openRightSidebar("cp-section-setting", { 60 section: section 61 }); 62 } 63 } 64 65 if (item.name === "page_background_image") { 66 delete optionsList[index]; 67 } 68 }); 69 } 70 71 // do return empty array slots 72 var result = tempOptions.filter(function (item) { 73 return item; 74 }); 75 } else { 76 result = options; 77 } 78 79 80 return result; 81 }); 82 83 function itemExists(options, name) { 84 85 if (options && options.items) { 86 for (var i = 0; i < options.items.length; i++) { 87 var item = options.items[i]; 88 89 if (item.name === name) { 90 return true; 91 } 92 } 93 } 94 95 return false; 96 } 97 98 99 CP_Customizer.hooks.addFilter('section_fixed_overlay_options', function (options, type) { 100 101 var item = { 102 103 name: "section_more_settings_button", 104 title: window.CP_Customizer.translateCompanionString("Section Settings"), 105 106 on_click: function (node) { 107 var section = node; 108 109 if (!section.parent().is(CP_Customizer.preview.getRootNode())) { 110 section = node.parentsUntil(top.CP_Customizer.preview.getRootNode()).last(); 111 } 112 113 section = CP_Customizer.hooks.applyFilters('filter_cog_item_section_element', section, node); 114 115 CP_Customizer.wpApi.panel('page_content_panel').focus() 116 CP_Customizer.openRightSidebar("cp-section-setting", { 117 section: section 118 }); 119 } 120 121 }; 122 123 if (type === "section" && options && !itemExists(options, item.name)) { 124 options.items.push(item); 125 } 126 127 return options; 128 }); 129 }); 130 131 })(window, CP_Customizer, jQuery); 132 133 134 (function (root, CP_Customizer, $) { 135 CP_Customizer.addModule(function (CP_Customizer) { 136 var sectionPanel = CP_Customizer.panels.sectionPanel; 137 sectionPanel.registerArea('background_color', { 138 init: function ($container) { 139 140 var separator = CP_Customizer.createControl.sectionSeparator( 141 this.getPrefixed('separator'), 142 $container, 143 window.CP_Customizer.translateCompanionString('Background Color') 144 ); 145 146 this.addToControlsList(separator); 147 148 var palette = CP_Customizer.createControl.palette( 149 this.getPrefixed('background-color'), 150 $container, 151 { 152 value: '#ffffff', 153 label: window.CP_Customizer.translateCompanionString('Background Color'), 154 palette: ['#ffffff', '#F5FAFD'] 155 }); 156 157 this.addToControlsList(palette); 158 159 CP_Customizer.createControl.infoPRO( 160 this.getPrefixed('section-bg-pro-info'), 161 $container, 162 '<span>' + window.CP_Customizer.translateCompanionString("More section design options available in PRO") + '</span><br/> ' + 163 '<a href="https://extendthemes.com/go/materialis-upgrade" class="button button-small button-orange upgrade-to-pro" target="_blank">' + 164 '' + window.CP_Customizer.translateCompanionString("Check all PRO features") + '</a>' 165 ) 166 }, 167 update: function (data) { 168 var image = CP_Customizer.utils.normalizeBackgroundImageValue((getComputedStyle(data.section[0]).backgroundImage || "")) || false; 169 image = (image && image !== "none" && !image.endsWith('/none')) ? image : false; 170 var color = getComputedStyle(data.section[0]).backgroundColor; 171 172 if (image) { 173 174 this.disable(); 175 return; 176 } 177 178 this.enable(); 179 180 var palette = this.getControl('background-color'); 181 182 palette.attachWithSetter(color, function (value) { 183 184 data.section.css({ 185 'background-image': 'none', 186 'background-color': value 187 }); 188 189 CP_Customizer.updateState(); 190 }); 191 } 192 }); 193 194 sectionPanel.registerArea('background_image', { 195 init: function ($container) { 196 197 var separator = CP_Customizer.createControl.sectionSeparator( 198 this.getPrefixed('separator'), 199 $container, 200 window.CP_Customizer.translateCompanionString('Background Image') 201 ); 202 203 this.addToControlsList(separator); 204 205 var bgImage = CP_Customizer.createControl.image( 206 this.getPrefixed('image'), 207 $container, 208 { 209 value: '', 210 label: window.CP_Customizer.translateCompanionString('Background Image') 211 }); 212 213 this.addToControlsList(bgImage); 214 }, 215 216 update: function (data) { 217 var image = CP_Customizer.utils.normalizeBackgroundImageValue((getComputedStyle(data.section[0]).backgroundImage || "")) || false; 218 image = (image && image !== "none" && !image.endsWith('/none')) ? image : false; 219 220 221 var bgImage = this.getControl('image'); 222 223 if (!image) { 224 this.disable(); 225 return; 226 } 227 228 this.enable(); 229 230 bgImage.attachWithSetter(image, function (value) { 231 232 if (value) { 233 value = 'url("' + value + '")'; 234 } else { 235 value = ""; 236 } 237 data.section.css({ 238 'background-color': 'none', 239 'background-image': value, 240 'background-size': 'cover', 241 'background-position': 'center top' 242 }); 243 244 245 CP_Customizer.updateState(); 246 }); 247 } 248 }); 249 250 251 sectionPanel.registerArea('content_align', { 252 init: function ($container) { 253 254 var separator = CP_Customizer.createControl.sectionSeparator( 255 this.getPrefixed('separator'), 256 $container, 257 window.CP_Customizer.translateCompanionString('Content Align') 258 ); 259 260 this.addToControlsList(separator); 261 262 var textAlign = CP_Customizer.createControl.select( 263 this.getPrefixed('text_align'), 264 $container, 265 { 266 value: '', 267 label: window.CP_Customizer.translateCompanionString('Content align'), 268 choices: { 269 'content-align-default': window.CP_Customizer.translateCompanionString('Default'), 270 'content-left-sm': window.CP_Customizer.translateCompanionString('Left'), 271 'content-center-sm': window.CP_Customizer.translateCompanionString('Center'), 272 'content-right-sm': window.CP_Customizer.translateCompanionString('Right') 273 } 274 }); 275 276 this.addToControlsList(textAlign); 277 }, 278 279 update: function (data) { 280 var section = data.section; 281 var sectionExports = CP_Customizer.getSectionExports(section); 282 283 if (!sectionExports.contentAligns) { 284 this.disable(); 285 return; 286 } 287 288 this.enable(); 289 290 var selector = sectionExports.contentAligns.join(' , '), 291 $alignHolders = section.find(selector); 292 293 if (section.is(selector)) { 294 $alignHolders = $alignHolders.add(section); 295 } 296 297 var textAlign = this.getControl('text_align'); 298 var textAlignClasses = ['content-left-sm', 'content-center-sm', 'content-right-sm']; 299 var currentTextAlign = CP_Customizer.utils.nodeMatchingClasses($alignHolders, textAlignClasses, true); 300 301 textAlign.attachWithSetter( 302 currentTextAlign || 'content-align-default', 303 function (value, oldValue) { 304 if (oldValue.trim()) { 305 $alignHolders.each(function () { 306 $(this).removeClass(oldValue); 307 }) 308 } 309 if (value.trim() && value !== 'content-align-default') { 310 $alignHolders.each(function () { 311 $(this).addClass(value); 312 }) 313 } 314 } 315 ); 316 } 317 }); 318 319 320 // frame box 321 sectionPanel.registerArea('frame', { 322 init: function ($container) { 323 var frameSeparator = CP_Customizer.createControl.sectionSeparator(this.getPrefixed('separator'), 324 $container, window.CP_Customizer.translateCompanionString('Frame Settings')); 325 this.addToControlsList(frameSeparator); 326 $groupEl = $container; 327 var frameType = CP_Customizer.createControl.select(this.getPrefixed('type'), $groupEl, { 328 value: '', 329 label: window.CP_Customizer.translateCompanionString('Type'), 330 choices: { 331 "background": window.CP_Customizer.translateCompanionString("background"), 332 "border": window.CP_Customizer.translateCompanionString("border") 333 } 334 }); 335 this.addToControlsList(frameType); 336 var frameColor = CP_Customizer.createControl.color(this.getPrefixed('color'), $groupEl, { 337 value: '#ffffff', 338 label: window.CP_Customizer.translateCompanionString('Color') 339 }); 340 341 this.addToControlsList(frameColor); 342 343 var frameOffsetX = CP_Customizer.createControl.slider(this.getPrefixed('offs-x'), $groupEl, { 344 label: window.CP_Customizer.translateCompanionString('Offset X'), 345 choices: { 346 min: -100, 347 max: 100, 348 step: 1 349 } 350 }); 351 352 this.addToControlsList(frameOffsetX); 353 var frameOffsetY = CP_Customizer.createControl.slider(this.getPrefixed('offs-y'), $groupEl, { 354 label: window.CP_Customizer.translateCompanionString('Offset Y'), 355 choices: { 356 min: -100, 357 max: 100, 358 step: 1 359 } 360 }); 361 362 this.addToControlsList(frameOffsetY); 363 var frameWidth = CP_Customizer.createControl.slider(this.getPrefixed('width'), $groupEl, { 364 label: window.CP_Customizer.translateCompanionString('Width'), 365 choices: { 366 min: 1, 367 max: 200, 368 step: 1 369 } 370 }); 371 372 this.addToControlsList(frameWidth); 373 var frameHeight = CP_Customizer.createControl.slider(this.getPrefixed('height'), $groupEl, { 374 label: window.CP_Customizer.translateCompanionString('Height'), 375 choices: { 376 min: 1, 377 max: 200, 378 step: 1 379 } 380 }); 381 this.addToControlsList(frameHeight); 382 383 var frameHideOnMobile = CP_Customizer.createControl.checkbox( 384 this.getPrefixed('hide-on-mobile'), 385 $groupEl, 386 window.CP_Customizer.translateCompanionString('Hide on mobile') 387 ); 388 389 this.addToControlsList(frameHideOnMobile); 390 391 392 }, 393 update: function (data) { 394 var section = data.section; 395 var hasFrame = section.find('.overlay-box').length > 0; 396 if (!hasFrame) { 397 this.disable(); 398 return; 399 } 400 this.enable(); 401 if (hasFrame) { 402 var frameType = this.getControl('type'); 403 var frameWidth = this.getControl('width'); 404 var frameHeight = this.getControl('height'); 405 var frameOffsetX = this.getControl('offs-x'); 406 var frameOffsetY = this.getControl('offs-y'); 407 var frameColor = this.getControl('color'); 408 var frameHideOnMobile = this.getControl('hide-on-mobile'); 409 410 var nodeSel = ".overlay-box .overlay-box-offset"; 411 412 413 var selector = '[data-id="' + section.attr('data-id') + '"] ' + nodeSel; 414 var node = section.find(nodeSel); 415 416 frameHideOnMobile.attachWithSetter(node.hasClass("hide-xs"), function (value) { 417 if (value === true) { 418 node.addClass("hide-xs"); 419 } else { 420 node.removeClass("hide-xs"); 421 } 422 }); 423 424 function getProp(name) { 425 return (CP_Customizer.contentStyle.getNodeProp(node, selector, null, name)); 426 } 427 428 function setProp(name, value) { 429 CP_Customizer.contentStyle.setProp(selector, null, name, value); 430 } 431 432 function getFrameType() { 433 var type = "background"; 434 if (node.hasClass("offset-border")) { 435 type = "border"; 436 } 437 return type; 438 } 439 440 frameType.attachWithSetter(getFrameType(), function (value) { 441 if (value == "border") { 442 node.removeClass("offset-background"); 443 node.addClass("offset-border"); 444 setProp(value + '-color', getProp('background-color')); 445 setProp('background-color', 'transparent'); 446 } 447 if (value == "background") { 448 node.addClass("offset-background"); 449 node.removeClass("offset-border"); 450 setProp(value + '-color', getProp('border-color')); 451 setProp('border-color', 'transparent'); 452 } 453 }); 454 455 frameColor.attachWithSetter(getProp(getFrameType() + '-color'), function (value) { 456 setProp(getFrameType() + '-color', value); 457 }); 458 459 frameHeight.attachWithSetter(parseInt(getProp('height')), function (value) { 460 setProp('height', value + "%"); 461 }); 462 463 frameWidth.attachWithSetter(parseInt(getProp('width')), function (value) { 464 setProp('width', value + "%"); 465 }); 466 467 function getTranslate() { 468 var transform = getProp('transform'); 469 var translate = transform.match(/translate\(([^,]+),([^,]+)\)/) || []; 470 var translateX = translate.length ? translate[1] : 0; 471 var translateY = translate.length ? translate[2] : 0; 472 return { 473 'x': parseInt(translateX), 474 'y': parseInt(translateY), 475 } 476 } 477 478 function setTranslate(x, y) { 479 var translate = getTranslate(); 480 if (!_.isUndefined(x)) { 481 translate.x = x; 482 } 483 if (!_.isUndefined(y)) { 484 translate.y = y; 485 } 486 setProp('transform', 'translate(' + translate.x + '%,' + translate.y + '%)'); 487 } 488 489 var translate = getTranslate(); 490 frameOffsetX.attachWithSetter(parseInt(translate.x), function (value) { 491 setTranslate(value, undefined); 492 }); 493 494 frameOffsetY.attachWithSetter(parseInt(translate.y), function (value) { 495 setTranslate(undefined, value); 496 }); 497 } 498 } 499 }); // ##### 500 sectionPanel.registerArea('list_items', { 501 502 itemsListControlTemplate: '' + 503 '<div class="section-list-item">' + 504 ' <div class="handle reorder-handler"></div>' + 505 ' <div class="text">' + 506 ' <span title="color item" class="featured-item color"></span>' + 507 ' <span><%= text %></span>' + 508 ' </div>' + 509 '</div>' + 510 '', 511 512 init: function ($container) { 513 this.controls = []; 514 515 var itemOptionsControl = CP_Customizer.createControl.sectionSeparator( 516 this.getPrefixed('title_separator'), 517 $container, 518 window.CP_Customizer.translateCompanionString('Items Options') 519 ); 520 521 this.addToControlsList(itemOptionsControl); 522 523 var itemsAlign = CP_Customizer.createControl.select( 524 this.getPrefixed('items_align'), 525 $container, 526 { 527 value: '', 528 label: window.CP_Customizer.translateCompanionString('Items align'), 529 choices: { 530 'items-align-default': window.CP_Customizer.translateCompanionString('Default'), 531 'start-sm': window.CP_Customizer.translateCompanionString('Left'), 532 'center-sm': window.CP_Customizer.translateCompanionString('Center'), 533 'end-sm': window.CP_Customizer.translateCompanionString('Right') 534 } 535 }); 536 this.addToControlsList(itemsAlign); 537 538 var textAlign = CP_Customizer.createControl.select( 539 this.getPrefixed('text_align'), 540 $container, 541 { 542 value: '', 543 label: window.CP_Customizer.translateCompanionString('Item content align'), 544 choices: { 545 'content-align-default': window.CP_Customizer.translateCompanionString('Default'), 546 'content-left-sm': window.CP_Customizer.translateCompanionString('Left'), 547 'content-center-sm': window.CP_Customizer.translateCompanionString('Center'), 548 'content-right-sm': window.CP_Customizer.translateCompanionString('Right') 549 } 550 }); 551 552 this.addToControlsList(textAlign); 553 554 listItemsOrder = CP_Customizer.createControl.sortable( 555 this.getPrefixed('order'), 556 $container, 557 _.template(this.itemsListControlTemplate), 558 window.CP_Customizer.translateCompanionString('Items position') 559 ); 560 561 listItemsOrder.control.container.append('<a class="add-item button-primary">' + window.CP_Customizer.translateCompanionString("Add Item") + '</a>'); 562 563 this.addToControlsList(listItemsOrder); 564 }, 565 566 update: function (data) { 567 var section = data.section; 568 var row = section.find('[data-type="row"]'); 569 570 if (!row.length || row.is('[data-content-shortcode]')) { 571 this.disable(); 572 return; 573 } 574 575 this.enable(); 576 577 578 var textAlign = this.getControl('text_align'), 579 textAlignClasses = ['content-left-sm', 'content-center-sm', 'content-right-sm'], 580 currentTextAlign = CP_Customizer.utils.nodeMatchingClasses(row, textAlignClasses, true), 581 582 itemsAlign = this.getControl('items_align'), 583 itemsAlignClasses = ['start-sm', 'center-sm', 'end-sm'], 584 currentItemsAlign = CP_Customizer.utils.nodeMatchingClasses(row, itemsAlignClasses, true); 585 586 var sectionExports = CP_Customizer.getSectionExports(section); 587 var canAlignItems = _.isUndefined(sectionExports.canAlignRowItemsContent) || sectionExports.canAlignRowItemsContent; 588 589 if (canAlignItems) { 590 textAlign.show(); 591 itemsAlign.show(); 592 } else { 593 textAlign.hide(); 594 itemsAlign.hide(); 595 } 596 597 textAlign.attachWithSetter( 598 currentTextAlign || 'content-align-default', 599 function (value, oldValue) { 600 if (oldValue.trim()) { 601 row.removeClass(oldValue); 602 } 603 if (value.trim() && value !== 'content-align-default') { 604 row.addClass(value); 605 } 606 } 607 ); 608 609 itemsAlign.attachWithSetter( 610 currentItemsAlign || 'items-align-default', 611 function (value, oldValue) { 612 if (oldValue.trim()) { 613 row.removeClass(oldValue); 614 } 615 if (value.trim() && value !== 'items-align-default') { 616 row.addClass(value); 617 } 618 } 619 ); 620 621 622 this.setItems(section, row); 623 624 var listItemsOrder = this.getControl('order'); 625 626 listItemsOrder.control.onStop = function (event, ui) { 627 var index = ui.item.index(); 628 var node = jQuery(ui.item).data().original; 629 root.CP_Customizer.preview.insertNode(node, node.parent(), index); 630 }; 631 632 var self = this; 633 listItemsOrder.control.container.find('.add-item').unbind('click').click(function () { 634 var $content = row.children('div').first().clone(false, false); 635 636 $content = root.CP_Customizer.preview.cleanNode($content); 637 root.CP_Customizer.preview.insertNode($content, row); 638 639 self.setItems(section, row); 640 }); 641 642 643 root.CP_Customizer.hooks.removeAction('section_list_item_refresh', function () { 644 self.setItems(section, row); 645 }); 646 647 root.CP_Customizer.hooks.addAction('section_list_item_refresh', function () { 648 self.setItems(section, row); 649 }); 650 }, 651 652 653 getItemOptions: function (section, item) { 654 655 return {}; 656 }, 657 658 afterItemCreation: function (sortableItem, data) { 659 sortableItem.data('original', data.original); 660 }, 661 662 setItems: function (section, row) { 663 var listItemsOrder = this.getControl('order'); 664 listItemsOrder.control.free(); 665 666 var items = row.children(); 667 var self = this; 668 669 items = items.map(function () { 670 var item = $(this); 671 var title = $(this).text().replace(/\s\s+/g, " ").trim(); 672 673 var headingText = $(this).find('h1,h2,h3,h4,h4,h6').eq(0); 674 675 if (headingText.length) { 676 title = headingText.text().replace(/\s\s+/g, " ").trim(); 677 } 678 679 title = title.trim().length ? title : ""; 680 681 if (!title && item.find('img').length) { 682 title = CP_Customizer.utils.getFileInfo(item.find('img').eq(0).attr('src')).filename; 683 } 684 685 if (!title) { 686 title = '[ ITEM ]'; 687 } 688 689 title = title.replace(/(^.{1,15})(.*)$/, function (matches, firstMatch, secondMatch) { 690 return (firstMatch || "").trim() + (secondMatch && secondMatch.length ? "[...]" : ""); 691 }); 692 693 return { 694 text: title, 695 original: $(this), 696 options: self.getItemOptions(section, item) 697 }; 698 699 }).toArray(); 700 701 listItemsOrder.control.setItems(items, function () { 702 self.afterItemCreation.apply(self, arguments); 703 }); 704 705 } 706 }); 707 708 sectionPanel.registerArea('contact_form_options', { 709 init: function ($container) { 710 var separator = CP_Customizer.createControl.sectionSeparator( 711 this.getPrefixed('separator'), 712 $container, 713 window.CP_Customizer.translateCompanionString('Contact Form 7 Options') 714 ); 715 716 this.addToControlsList(separator); 717 718 var showInfosInOneColumn = CP_Customizer.createControl.checkbox( 719 this.getPrefixed('show-inline-info'), 720 $container, 721 window.CP_Customizer.translateCompanionString('Show form controls on one column') 722 ); 723 724 this.addToControlsList(showInfosInOneColumn); 725 726 }, 727 728 update: function (data) { 729 var section = data.section; 730 731 if (section.attr('data-export-id').match(/contact/) && section.find('[data-content-shortcode*="contact-form-7"]').length > 0) { 732 this.enable(); 733 } else { 734 this.disable(); 735 return; 736 } 737 738 var showInfosInOneColumn = this.getControl('show-inline-info'); 739 var contactFormWrapper = section.find('.contact-form-wrapper'); 740 var hasInlineInfo = contactFormWrapper.is('.inline-info'); 741 742 showInfosInOneColumn.attachWithSetter(!hasInlineInfo, function (value) { 743 if (value) { 744 contactFormWrapper.removeClass('inline-info'); 745 } else { 746 contactFormWrapper.addClass('inline-info'); 747 } 748 CP_Customizer.updateState(); 749 }) 750 751 } 752 }) 753 754 }); 755 756 })(window, CP_Customizer, jQuery);