ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

customize.bundle.js (33238B)


      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);
    525 (function ($) {
    526     var wp = window.wp.media ? window.wp : parent.wp;
    527     var fetchedIcons = false;
    528 
    529 
    530     var fuzzy_match = (function () {
    531         var cache = _.memoize(function (str) {
    532             return new RegExp("^" + str.replace(/./g, function (x) {
    533                 return /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/.test(x) ? "\\" + x + "?" : x + "?";
    534             }) + "$");
    535         })
    536         return function (str, pattern) {
    537             return cache(str).test(pattern)
    538         }
    539     })()
    540 
    541     var cpWebGradientsOptions = {};
    542 
    543     var cpWebGratientsIconModel = Backbone.Model.extend({
    544         defaults: {
    545             buttons: {
    546                 check: !0
    547             },
    548             can: {
    549                 save: !1,
    550                 remove: !1
    551             },
    552             id: null,
    553             title: null,
    554             date: null,
    555             modified: null,
    556             mime: "web-gradient/class",
    557             dateFormatted: null,
    558             height: null,
    559             width: null,
    560             orientation: null,
    561             filesizeInBytes: null,
    562             filesizeHumanReadable: null,
    563             size: {
    564                 url: null
    565             },
    566             type: "web-gradient",
    567             icon: null,
    568             parsed: false
    569         }
    570     });
    571 
    572 
    573     var cpWebGratientsIcons = Backbone.Collection.extend({
    574         model: cpWebGratientsIconModel,
    575         initialize: function (data) {
    576             this.url = parent.ajaxurl + "?action=materialis_webgradients_list"
    577         },
    578         parse: function (data) {
    579             return data;
    580         }
    581     });
    582 
    583     var iconTemplate = _.template(''+
    584             '<div class="attachment-preview js--select-attachment type-image subtype-jpeg landscape">'+
    585                 '<div class="thumbnail">'+
    586                         '<div class="webgradient <%= webgradient %>" aria-hidden="true"></i>'+
    587                         '<div class="label"><%= title %></div>'+
    588                 '</div>'+
    589                 '<button type="button" class="button-link check" tabindex="0"><span class="media-modal-icon"></span><span class="screen-reader-text">' + materialis_customize_settings.l10n.deselect + '</span></button>'+
    590             '</div>');
    591 
    592 
    593     var cpWebGratientsIconView = wp.media.view.Attachment.extend({
    594         tagName: "li",
    595         className: "attachment webgradients-image",
    596         template: iconTemplate,
    597         controller: this.controller,
    598         initialize: function () {
    599             this.render()
    600         },
    601 
    602         attributes: function () {
    603             return {
    604                 'data-search': this.model.get('gradient').trim(),
    605                 'aria-label': this.model.get('title'),
    606                 'title': this.model.get('title'),
    607                 'tabIndex': 0,
    608             }
    609         },
    610         events: {
    611             "click .js--select-attachment": "toggleSelectionHandler"
    612         },
    613         render: function () {
    614             var icon = this.model.get('gradient');
    615             var title = this.model.get('title');
    616             this.$el.html(this.template({
    617                 'webgradient': icon,
    618                 'title': title
    619             }))
    620         },
    621 
    622         toggleSelectionHandler: function (event) {
    623             var method = 'toggle';
    624 
    625             // Catch arrow events
    626             if (37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode) {
    627                 this.controller.trigger('attachment:keydown:arrow', event);
    628                 return;
    629             }
    630 
    631             // Catch enter and space events
    632             if ('keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode) {
    633                 return;
    634             }
    635 
    636             event.preventDefault();
    637 
    638 
    639             if (event.shiftKey) {
    640                 method = 'between';
    641             } else if (event.ctrlKey || event.metaKey) {
    642                 method = 'toggle';
    643             }
    644 
    645             this.toggleSelection({
    646                 method: 'add'
    647             });
    648 
    649             $('.media-selection.one .attachment-preview.type-mdi-icon .thumbnail').html('<div class="webgradient ' + this.model.get('gredient') + '"></div>')
    650 
    651             this.controller.trigger('selection:toggle');
    652         }
    653     });
    654 
    655 
    656     var cpWebGratientsIconsView = wp.media.View.extend({
    657         tagName: "ul",
    658         className: "attachments cp-mdi-images",
    659         attributes: {
    660             tabIndex: 0
    661         },
    662         initialize: function () {
    663 
    664             _.defaults(this.options, {
    665                 refreshSensitivity: wp.media.isTouchDevice ? 300 : 200,
    666                 refreshThreshold: 3,
    667                 AttachmentView: wp.media.view.Attachment,
    668                 sortable: false,
    669                 resize: false,
    670                 idealColumnWidth: 150
    671             });
    672 
    673             this._viewsByCid = {};
    674             this.$window = $(window);
    675             this.options.scrollElement = this.options.scrollElement || this.el;
    676             $(this.options.scrollElement).on("scroll", this.scroll);
    677 
    678             var iconsView = this;
    679             iconsView.collection.each(function (icon) {
    680                 var iconView = new cpWebGratientsIconView({
    681                     controller: iconsView.controller,
    682                     selection: iconsView.options.selection,
    683                     model: icon
    684                 });
    685                 iconsView.views.add(iconView)
    686             })
    687         },
    688 
    689         scroll: function () {
    690 
    691         }
    692     });
    693 
    694     var cpMaterialIconsSearch = wp.media.View.extend({
    695         tagName: "input",
    696         className: "search",
    697         id: "media-search-input cp-mdi-search",
    698         attributes: {
    699             type: "search",
    700             placeholder: wp.media.view.l10n.search
    701         },
    702         events: {
    703             input: "search",
    704             keyup: "search",
    705             change: "search",
    706             search: "search"
    707         },
    708         render: function () {
    709             return this;
    710         },
    711 
    712         search: _.debounce(function (event) {
    713             var value = event.target.value;
    714             var items = this.options.browserView.view.$el.find('li');
    715 
    716             function toggleSearchVisibility(index, el) {
    717                 var $el = $(el);
    718                 if (fuzzy_match($el.data('search'), value)) {
    719                     $el.show();
    720                 } else {
    721                     $el.hide();
    722                 }
    723             }
    724             items.each(toggleSearchVisibility);
    725         }, 50)
    726     });
    727 
    728     var cpMaterialIconsBrowser = wp.media.View.extend({
    729         tagName: "div",
    730         className: "cp-mdi-media attachments-browser",
    731 
    732         initialize: function () {
    733 
    734             var browserVIew = this;
    735             _.defaults(this.options, {
    736                 filters: !1,
    737                 search: true,
    738                 date: false,
    739                 display: !1,
    740                 sidebar: false,
    741                 toolbar: true,
    742                 AttachmentView: wp.media.view.Attachment.Library
    743             });
    744 
    745             var icons = new cpWebGratientsIcons();
    746             var filter = this.options.options ? this.options.options.filter : false;
    747 
    748             function displayIcons(icons) {
    749                 if (filter) {
    750                     icons = new cpWebGratientsIcons(icons.filter(filter));
    751                 }
    752 
    753                 var state = browserVIew.controller.state(),
    754                     selection = state.get('selection');
    755                 state.set('multiple', false);
    756                 selection.multiple = false;
    757                 var iconsView = new cpWebGratientsIconsView({
    758                     controller: browserVIew.controller,
    759                     selection: selection,
    760                     collection: icons
    761                 });
    762                 browserVIew.views.add(iconsView)
    763             }
    764 
    765 
    766             if (!fetchedIcons) {
    767                 icons.fetch({
    768                     success: function (icons) {
    769                         fetchedIcons = icons;
    770                         displayIcons(icons);
    771                     }
    772                 });
    773             } else {
    774                 displayIcons(fetchedIcons);
    775             }
    776 
    777             this.createToolbar();
    778         },
    779 
    780         settings: function (view) {
    781             if (this._settings) {
    782                 this._settings.remove();
    783             }
    784             this._settings = view;
    785             this.views.add(view);
    786         },
    787         createToolbar: function () {
    788             this.toolbar = new wp.media.view.Toolbar({
    789                 controller: this.controller
    790             })
    791             this.views.add(this.toolbar);
    792             this.toolbar.set("search", new cpMaterialIconsSearch({
    793                 controller: this.controller,
    794                 browserView: this.views
    795             }));
    796         }
    797     });
    798 
    799 
    800     function extendFrameWithcpWebGratients(frame) {
    801         var wpMediaFrame = frame;
    802         var cpWebGratientsFrameExtension = {
    803             browseRouter: function (routerView) {
    804                 var routes = {
    805                     "cp_web_gradients": {
    806                         text: materialis_customize_settings.l10n.chooseGradientLabel,
    807                         priority: 50
    808                     }
    809                 };
    810                 controller = routerView.controller;
    811                 routerView.set(routes);
    812             },
    813 
    814             bindHandlers: function () {
    815                 wpMediaFrame.prototype.bindHandlers.apply(this, arguments);
    816                 this.on('content:create:cp_web_gradients', this.cpBrowseMaterialIcons, this);
    817             },
    818 
    819             createStates: function () {
    820                 wpMediaFrame.prototype.createStates.apply(this, arguments);
    821             },
    822 
    823 
    824             cpBrowseMaterialIcons: function (contentRegion) {
    825 
    826                 var state = this.state();
    827 
    828                 this.$el.removeClass('hide-toolbar');
    829 
    830                 contentRegion.view = new cpMaterialIconsBrowser({
    831                     controller: this,
    832                     options : cpWebGradientsOptions
    833                 });
    834             }
    835 
    836         }
    837 
    838         return wpMediaFrame.extend(cpWebGratientsFrameExtension);
    839     }
    840 
    841     wp.media.cp = wp.media.cp || {};
    842     if (!wp.media.cp.extendFrameWithWebGradients) {
    843         wp.media.cp.extendFrameWithWebGradients = function(options) {
    844             cpWebGradientsOptions = options;
    845             return extendFrameWithcpWebGratients
    846         };
    847     }
    848 })(jQuery);
    849 
    850 wp.customize.controlConstructor['web-gradients'] = wp.customize.Control.extend({
    851 
    852     ready: function () {
    853 
    854         'use strict';
    855 
    856         var control = this;
    857 
    858         // Change the value
    859         this.container.on('click', 'button, .webgradient-icon-preview .webgradient', function () {
    860 
    861             Materialis.openMediaCustomFrame(
    862                 wp.media.cp.extendFrameWithWebGradients(),
    863                 "cp_web_gradients",
    864                 materialis_customize_settings.l10n.selectGradient,
    865                 true,
    866                 function (attachement) {
    867 
    868                     if (attachement && attachement[0]) {
    869                         control.setting.set(attachement[0].gradient);
    870                         control.container.find('.webgradient-icon-preview > div.webgradient').attr('class', 'webgradient ' + attachement[0].gradient);
    871                         control.container.find('.webgradient-icon-preview > div.webgradient + .label').text(attachement[0].gradient.replace(/_/ig, ' '));
    872                     }
    873                 }
    874             )
    875         });
    876 
    877     }
    878 
    879 });
    880 
    881 (function (root, $) {
    882     wp.customize.controlConstructor['gradient-control'] = wp.customize.Control.extend({
    883 
    884         ready: function () {
    885 
    886             'use strict';
    887 
    888             var control = this;
    889 
    890 
    891             var val = this.getValue();
    892 
    893             this.container.on('click', 'button, .webgradient-icon-preview .webgradient', function () {
    894                 Materialis.openMediaCustomFrame(
    895                     wp.media.cp.extendFrameWithWebGradients({
    896                         filter : function (icon) {
    897                             return icon.get("parsed") !== false;
    898                         }
    899                     }),
    900                     "cp_web_gradients",
    901                     materialis_customize_settings.l10n.selectGradient,
    902                     true,
    903                     function (attachement) {
    904                         if (attachement && attachement[0]) {
    905                             var toSet = attachement[0].parsed;
    906                             if (control.params.choices && control.params.choices['opacity']) {
    907                                 toSet.colors = toSet.colors.map(function (colorData) {
    908                                     var _color = tinycolor(colorData.color);
    909                                     _color.setAlpha(control.params.choices['opacity']);
    910                                     colorData.color = _color.toRgbString();
    911                                     return colorData;
    912                                 });
    913                             }
    914                             control.setValue(toSet);
    915                         }
    916                     }
    917                 )
    918             });
    919 
    920         },
    921 
    922         getValue: function () {
    923             'use strict';
    924 
    925             // The setting is saved in JSON
    926 
    927             var value = [];
    928 
    929             if (_.isString(this.setting.get())) {
    930                 value = JSON.parse(this.setting.get());
    931             } else {
    932                 value = this.setting.get();
    933             }
    934 
    935             return value;
    936         },
    937 
    938         setValue: function (value, silent) {
    939             this.setting.set(JSON.stringify(value));
    940             this.update(value);
    941         },
    942 
    943         update: function(value) {
    944             this.container.find('.webgradient-icon-preview > div.webgradient').attr('style', "background:" + Materialis.Utils.getGradientString(value.colors, value.angle));
    945         }
    946 
    947     });
    948 
    949 })(window, jQuery);
    950 
    951 wp.customize.controlConstructor['sidebar-button-group'] = wp.customize.Control.extend({
    952     ready: function () {
    953         var control = this;
    954         var components = this.params.choices;
    955         var popupId = this.params.popup;
    956         var in_row_with = this.params.in_row_with || [];
    957 
    958         control.container.find('#group_customize-button-' + popupId).click(function () {
    959 
    960             if (window.CP_Customizer) {
    961                 CP_Customizer.openRightSidebar(popupId);
    962             } else {
    963                 Materialis.openRightSidebar(popupId);
    964             }
    965         });
    966 
    967         control.container.find('#' + popupId + '-popup > ul').on('focus', function (event) {
    968             return false;
    969         });
    970 
    971         wp.customize.bind('pane-contents-reflowed', function () {
    972 
    973             var holder = control.container.find('#' + popupId + '-popup > ul');
    974 
    975 
    976             var controls = [];
    977 
    978 
    979             _.each(components, function (c) {
    980                 var _c = wp.customize.control(c);
    981                 if (_c) {
    982                     controls.push(_c);
    983                 }
    984             });
    985 
    986             /*
    987             controls = _.sortBy(controls, function(c) {
    988                 return c.priority();
    989             });
    990            */
    991 
    992 
    993             _.each(controls, function (c) {
    994                 holder.append(c.container);
    995             });
    996 
    997 
    998             if (in_row_with && in_row_with.length) {
    999                 _.each(in_row_with, function (c) {
   1000                     control.container.css({
   1001                         "width": "calc(35% - 6px)",
   1002                         "clear": "right",
   1003                         "float": "right",
   1004                     });
   1005 
   1006                     var ct = wp.customize.control(c);
   1007                     if (ct) {
   1008                         ct.container.css({
   1009                             "width": "auto",
   1010                             "max-width": "calc(65% - 6px)"
   1011                         })
   1012                     }
   1013                 })
   1014             }
   1015 
   1016             var hasActiveItems = control.params.choices.map(function (setting) {
   1017                 return wp.customize.control(setting) ? wp.customize.control(setting).active() : false;
   1018             }).reduce(function (a, b) {
   1019                 return a || b
   1020             });
   1021 
   1022             if (control.params.always_active) {
   1023                 return;
   1024             }
   1025 
   1026             if (control.active()) {
   1027                 if (hasActiveItems) {
   1028                     control.activate();
   1029                 } else {
   1030                     control.deactivate();
   1031                 }
   1032             }
   1033         });
   1034     }
   1035 });