customize.js (17040B)
1 (function (root, $) { 2 3 // used for lazy loading images ( show make the customizer available faster ) 4 $(function () { 5 $('img[data-src]').each(function () { 6 var img = this; 7 setTimeout(function () { 8 img.setAttribute('src', img.getAttribute('data-src')); 9 }, 5) 10 }); 11 }); 12 13 function updateLinkedSettings(newValue) { 14 15 var toUpdate = {}; 16 17 for (var i = 0; i < this.update.length; i++) { 18 var update = this.update[i]; 19 20 if (update.value === newValue) { 21 _.extend(toUpdate, update.fields); 22 } 23 24 } 25 26 var refreshAfterSet = (this.__initialTransport === 'refresh'); 27 for (var settingID in toUpdate) { 28 var setting = wp.customize(settingID); 29 30 if (setting) { 31 var oldTransport = setting.transport; 32 33 setting.transport = 'postMessage'; 34 kirkiSetSettingValue(settingID, toUpdate[settingID]); 35 setting.transport = oldTransport; 36 37 if (oldTransport === 'refresh') { 38 refreshAfterSet = true; 39 } 40 } 41 } 42 43 if (refreshAfterSet) { 44 wp.customize.previewer.refresh(); 45 } 46 47 } 48 49 if (!root.Materialis) { 50 root.Materialis = { 51 52 Utils: { 53 getGradientString: function (colors, angle) { 54 var gradient = angle + "deg, " + colors[0].color + " 0%, " + colors[1].color + " 100%"; 55 gradient = 'linear-gradient(' + gradient + ')'; 56 return gradient; 57 }, 58 59 getValue: function (component) { 60 var value = undefined; 61 62 if (component instanceof wp.customize.Control) { 63 value = component.setting.get(); 64 } 65 66 if (component instanceof wp.customize.Setting) { 67 value = component.get(); 68 } 69 70 if (_.isString(component)) { 71 value = wp.customize(component).get(); 72 } 73 74 if (_.isString(value)) { 75 76 try { 77 value = decodeURI(value); 78 79 } catch (e) { 80 81 } 82 83 try { 84 value = JSON.parse(value); 85 } catch (e) { 86 87 } 88 89 } 90 91 return value; 92 } 93 }, 94 95 hooks: { 96 addAction: function () {}, 97 addFilter: function () {}, 98 doAction: function () { 99 100 }, 101 applyFilters: function () { 102 103 } 104 }, 105 106 wpApi: root.wp.customize, 107 108 closePopUps: function () { 109 root.tb_remove(); 110 root.jQuery('#TB_overlay').css({ 111 'z-index': '-1' 112 }); 113 }, 114 115 options: function (optionName) { 116 return root.materialis_customize_settings[optionName]; 117 }, 118 119 popUp: function (title, elementID, data) { 120 var selector = "#TB_inline?inlineId=" + elementID; 121 var query = []; 122 123 124 $.each(data || {}, function (key, value) { 125 query.push(key + "=" + value); 126 }); 127 128 selector = query.length ? selector + "&" : selector + ""; 129 selector += query.join("&"); 130 131 root.tb_show(title, selector); 132 133 root.jQuery('#TB_window').css({ 134 'z-index': '5000001', 135 'transform': 'opacity .4s', 136 'opacity': 0 137 }); 138 139 root.jQuery('#TB_overlay').css({ 140 'z-index': '5000000' 141 }); 142 143 144 setTimeout(function () { 145 root.jQuery('#TB_window').css({ 146 'margin-top': -1 * ((root.jQuery('#TB_window').outerHeight() + 50) / 2), 147 'opacity': 1 148 }); 149 root.jQuery('#TB_window').find('#cp-item-ok').focus(); 150 }, 0); 151 152 if (data && data.class) { 153 root.jQuery('#TB_window').addClass(data.class); 154 } 155 156 return root.jQuery('#TB_window'); 157 }, 158 159 addModule: function (callback) { 160 var self = this; 161 162 jQuery(document).ready(function () { 163 // this.__modules.push(callback); 164 callback(self); 165 }); 166 167 }, 168 getCustomizerRootEl: function () { 169 return root.jQuery(root.document.body).find('form#customize-controls'); 170 }, 171 openRightSidebar: function (elementId, options) { 172 options = options || {}; 173 this.hideRightSidebar(); 174 var $form = this.getCustomizerRootEl(); 175 var self = this; 176 var $container = $form.find('#' + elementId + '-popup'); 177 if ($container.length) { 178 $container.addClass('active'); 179 180 if (options.floating && !_(options.y).isUndefined()) { 181 $container.css({ 182 top: options.y 183 }); 184 } 185 } else { 186 $container = $('<li id="' + elementId + '-popup" class="customizer-right-section active"> <span data-close-right-sidebar="true" title="' + materialis_customize_settings.l10n.closePanelLabel + '" class="close-panel"></span> </li>'); 187 188 if (options.floating) { 189 $container.addClass('floating'); 190 } 191 192 $toAppend = $form.find('li#accordion-section-' + elementId + ' > ul'); 193 194 if ($toAppend.length === 0) { 195 $toAppend = $form.find('#sub-accordion-section-' + elementId); 196 } 197 198 199 if ($toAppend.length === 0) { 200 $toAppend = $('<div class="control-wrapper" />'); 201 $toAppend.append($form.find('#customize-control-' + elementId).children()); 202 } 203 204 $form.append($container); 205 $container.append($toAppend); 206 207 if (options.floating && !_(options.y).isUndefined()) { 208 $container.css({ 209 top: options.y 210 }); 211 } 212 213 214 $container.find('span.close-panel').click(self.hideRightSidebar); 215 216 } 217 218 if (options.focus) { 219 $container.find(options.focus)[0].scrollIntoViewIfNeeded(); 220 } 221 222 $container.css('left', jQuery('#customize-header-actions')[0].offsetWidth + 1); 223 224 self.hooks.doAction('right_sidebar_opened', elementId, options, $container); 225 226 $container.on('focus', function (event) { 227 event.preventDefault(); 228 event.stopPropagation(); 229 return false; 230 }); 231 232 $form.find('span[data-close-right-sidebar="true"]').click(function (event) { 233 event.preventDefault(); 234 event.stopPropagation(); 235 self.hideRightSidebar(); 236 }); 237 238 $form.find('li.accordion-section').unbind('click.right-section').bind('click.right-section', function (event) { 239 if ($(event.target).is('li') || $(event.target).is('.accordion-section-title')) { 240 if ($(event.target).closest('.customizer-right-section').length === 0) { 241 self.hideRightSidebar(); 242 } 243 } 244 }); 245 246 }, 247 248 hideRightSidebar: function () { 249 var $form = root.jQuery(root.document.body).find('#customize-controls'); 250 var $visibleSection = $form.find('.customizer-right-section.active'); 251 if ($visibleSection.length) { 252 $visibleSection.removeClass('active'); 253 } 254 }, 255 256 linkMod: function (settingID, linkWith) { 257 var setting = wp.customize(settingID); 258 // debugger; 259 if (setting) { 260 var options = setting.findControls().length ? jQuery.extend(true, {}, setting.findControls()) : {}; 261 options.__initialTransport = setting.transport; 262 options.update = linkWith; 263 264 var updater = _.bind(updateLinkedSettings, options); 265 setting.transport = 'postMessage'; 266 setting.bind(updater); 267 } 268 }, 269 270 createMod: function (name, transport) { 271 if (wp.customize(name)) { 272 return wp.customize(name); 273 } 274 275 name = "CP_AUTO_SETTING[" + name + "]"; 276 if (wp.customize(name)) { 277 return wp.customize(name); 278 } 279 280 wp.customize.create(name, name, {}, { 281 type: 'theme_mod', 282 transport: transport || 'postMessage', 283 previewer: wp.customize.previewer 284 }); 285 286 return wp.customize(name); 287 }, 288 289 _canUpdatedLinkedOptions: true, 290 291 canUpdatedLinkedOptions: function () { 292 return this._canUpdatedLinkedOptions; 293 }, 294 295 disableLinkedOptionsUpdater: function () { 296 this._canUpdatedLinkedOptions = false; 297 }, 298 299 enableLinkedOptionsUpdater: function () { 300 this._canUpdatedLinkedOptions = true; 301 } 302 303 }; 304 } 305 306 function openMediaBrowser(type, callback, data) { 307 var cb; 308 if (callback instanceof jQuery) { 309 cb = function (response) { 310 311 if (!response) { 312 return; 313 } 314 315 var value = response[0].url; 316 if (data !== "multiple") { 317 if (type == "icon") { 318 value = response[0].mdi 319 } 320 callback.val(value).trigger('change'); 321 } 322 } 323 } else { 324 cb = callback; 325 } 326 327 switch (type) { 328 case "image": 329 openMultiImageManager(materialis_customize_settings.l10n.changeImageLabel, cb, data); 330 break; 331 } 332 } 333 334 function openMediaCustomFrame(extender, mode, title, single, callback) { 335 var interestWindow = window.parent; 336 337 var frame = extender(interestWindow.wp.media.view.MediaFrame.Select); 338 339 var custom_uploader = new frame({ 340 title: title, 341 button: { 342 text: title 343 }, 344 multiple: !single 345 }); 346 347 348 //When a file is selected, grab the URL and set it as the text field's value 349 custom_uploader.on('select', function () { 350 attachment = custom_uploader.state().get('selection').toJSON(); 351 custom_uploader.content.mode('browse'); 352 callback(attachment); 353 }); 354 355 356 custom_uploader.on('close', function () { 357 custom_uploader.content.mode('browse'); 358 callback(false); 359 }); 360 361 //Open the uploader dialog 362 custom_uploader.open(); 363 custom_uploader.content.mode(mode); 364 // Show Dialog over layouts frame 365 interestWindow.jQuery(custom_uploader.views.selector).parent().css({ 366 'z-index': '16000000' 367 }); 368 369 } 370 371 function openMultiImageManager(title, callback, single) { 372 var node = false; 373 var interestWindow = window.parent; 374 var custom_uploader = interestWindow.wp.media.frames.file_frame = interestWindow.wp.media({ 375 title: title, 376 button: { 377 text: materialis_customize_settings.l10n.chooseImagesLabel 378 }, 379 multiple: !single 380 }); 381 //When a file is selected, grab the URL and set it as the text field's value 382 custom_uploader.on('select', function () { 383 attachment = custom_uploader.state().get('selection').toJSON(); 384 callback(attachment); 385 }); 386 custom_uploader.off('close.cp').on('close.cp', function () { 387 callback(false); 388 }); 389 //Open the uploader dialog 390 custom_uploader.open(); 391 392 custom_uploader.content.mode('browse'); 393 // Show Dialog over layouts frame 394 interestWindow.jQuery(interestWindow.wp.media.frame.views.selector).parent().css({ 395 'z-index': '16000000' 396 }); 397 } 398 399 root.Materialis.openMediaBrowser = openMediaBrowser; 400 root.Materialis.openMediaCustomFrame = openMediaCustomFrame; 401 402 if (window.wp && window.wp.customize) { 403 wp.customize.controlConstructor['radio-html'] = wp.customize.Control.extend({ 404 405 ready: function () { 406 407 'use strict'; 408 409 var control = this; 410 411 // Change the value 412 this.container.on('click', 'input', function () { 413 control.setting.set(jQuery(this).val()); 414 }); 415 416 } 417 418 }); 419 } 420 421 var linkedSettingsBindAdded = false; 422 423 wp.customize.bind('pane-contents-reflowed', function () { 424 425 if (linkedSettingsBindAdded) { 426 return; 427 } 428 429 linkedSettingsBindAdded = true; 430 431 jQuery.each(wp.customize.settings.controls, function (control, options) { 432 433 if (options.update && Materialis.canUpdatedLinkedOptions()) { 434 var setting = wp.customize(options.settings.default); 435 // debugger; 436 options.__initialTransport = setting.transport; 437 438 var updater = _.bind(updateLinkedSettings, options); 439 setting.transport = 'postMessage'; 440 setting.bind(updater); 441 } 442 }); 443 444 var overlappableSetting = Materialis.createMod('header_overlappable_section'); 445 446 overlappableSetting.bind(function (value) { 447 if (CP_Customizer && value) { 448 449 if (!CP_Customizer.wpApi('header_overlap').get()) { 450 return; 451 } 452 453 var sectionData = CP_Customizer.options('data:sections').filter(function (data) { 454 return data.id === value 455 }).pop(); 456 457 if (sectionData && CP_Customizer.preview.jQuery('[data-id^="' + value + '"]').length === 0) { 458 459 CP_Customizer.one(CP_Customizer.events.PREVIEW_LOADED, function () { 460 CP_Customizer.preview.insertSectionFromData(sectionData); 461 }); 462 463 } 464 } 465 overlappableSetting.set(''); 466 }); 467 468 }); 469 470 })(window, jQuery); 471 472 // fix selectize opening 473 (function ($) { 474 475 $(document).on('mouseup', '.selectize-input', function () { 476 if ($(this).parent().height() + $(this).parent().offset().top > window.innerHeight) { 477 $('.wp-full-overlay-sidebar-content').scrollTop($(this).parent().height() + $(this).parent().offset().top) 478 } 479 }); 480 481 $(document).on('change', '.customize-control-kirki-select select', function () { 482 $(this).focusout(); 483 }); 484 485 })(jQuery); 486 487 488 (function (root, $, api) { 489 var binded = false; 490 wp.customize.bind('pane-contents-reflowed', function () { 491 if (binded) { 492 return; 493 } 494 495 binded = true; 496 497 api.previewer.bind('focus-control-for-setting', function (settingId) { 498 var matchedControls = []; 499 api.control.each(function (control) { 500 var settingIds = _.pluck(control.settings, 'id'); 501 if (-1 !== _.indexOf(settingIds, settingId)) { 502 matchedControls.push(control); 503 } 504 }); 505 506 if (matchedControls.length) { 507 var control = matchedControls[0]; 508 var sidebar = control.container.closest('.customizer-right-section'); 509 if (sidebar.length) { 510 var buttonSelectorValue = sidebar.attr('id').replace('-popup', ''), 511 buttonSelector = '[data-sidebar-container="' + buttonSelectorValue + '"]'; 512 513 if ($(buttonSelector).length) { 514 $(buttonSelector)[0].scrollIntoView(); 515 $(buttonSelector).click(); 516 } 517 518 control.focus(); 519 } 520 } 521 522 }) 523 }) 524 })(window, jQuery, wp.customize);