ru-se.com

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

customizer-content-handles.js (15396B)

      1 (function () {
      2     window.CP_Customizer.addModule(function (CP_Customizer) {
      3 
      4         var iconStyles = [
      5             {
      6                 value: 'normal',
      7                 label: window.CP_Customizer.translateCompanionString('Normal'),
      8                 classes: 'normal-shape'
      9             },
     10             {
     11                 value: 'round-bg',
     12                 label: window.CP_Customizer.translateCompanionString('Rounded background'),
     13                 classes: 'reverse round'
     14             },
     15             {
     16                 value: 'bordered',
     17                 label: window.CP_Customizer.translateCompanionString('Bordered'),
     18                 classes: 'bordered round'
     19             }
     20         ];
     21 
     22 
     23         var iconSizes = [
     24             {
     25                 value: 'small',
     26                 label: window.CP_Customizer.translateCompanionString('Small'),
     27                 classes: 'small'
     28             },
     29             {
     30                 value: 'normal',
     31                 label: window.CP_Customizer.translateCompanionString('Normal'),
     32                 classes: 'normal-size'
     33             },
     34             {
     35                 value: 'big',
     36                 label: window.CP_Customizer.translateCompanionString('Large'),
     37                 classes: 'big'
     38             },
     39             {
     40                 value: 'large',
     41                 label: window.CP_Customizer.translateCompanionString('Extra Large'),
     42                 classes: 'large'
     43             }
     44         ];
     45 
     46         function setIconStyle(style, $icon) {
     47             var toRemove = iconStyles.map(function (style) {
     48                 return style.classes;
     49             });
     50 
     51             var toAdd = "";
     52 
     53             iconStyles.forEach(function (iconStyle) {
     54                 if (iconStyle.value === style) {
     55                     toAdd = iconStyle.classes
     56                 }
     57             });
     58 
     59             $icon.removeClass(toRemove.join(' ')).addClass(toAdd);
     60 
     61         }
     62 
     63         function getIconStyle($icon) {
     64             var result = 'normal';
     65 
     66             iconStyles.forEach(function (style) {
     67                 if (style.classes.trim()) {
     68                     var selector = CP_Customizer.utils.normalizeClassAttr(style.classes, true);
     69                     if ($icon.is(selector)) {
     70                         result = style.value;
     71                     }
     72                 }
     73             });
     74             return result;
     75         }
     76 
     77 
     78         function setIconSize(size, $icon) {
     79             var toRemove = iconSizes.map(function (size) {
     80                 return size.classes;
     81             });
     82 
     83             var toAdd = "";
     84 
     85             iconSizes.forEach(function (iconSize) {
     86                 if (iconSize.value === size) {
     87                     toAdd = iconSize.classes
     88                 }
     89             });
     90 
     91             $icon.removeClass(toRemove.join(' ')).addClass(toAdd);
     92 
     93         }
     94 
     95         function getIconSize($icon) {
     96             var result = 'normal';
     97 
     98             iconSizes.forEach(function (size) {
     99                 if (size.classes.trim()) {
    100                     var selector = CP_Customizer.utils.normalizeClassAttr(size.classes, true);
    101                     if ($icon.is(selector)) {
    102                         result = size.value;
    103                     }
    104                 }
    105             });
    106             return result;
    107         }
    108 
    109 
    110         // normal texts panel
    111         CP_Customizer.addContainerDataHandler(CP_Customizer.TEXT_ELEMENTS, function ($el) {
    112             var label =  window.CP_Customizer.translateCompanionString($el.attr('data-popup-label') || "");
    113             var result = [
    114 
    115                 {
    116                     label: label || window.CP_Customizer.translateCompanionString("Text"),
    117                     type: "text",
    118                     value: $el.text().trim()
    119                 }
    120             ];
    121 
    122             if ($el.parent().is('a') || $el.is('.mdi')) {
    123                 return [];
    124             }
    125 
    126             return result;
    127 
    128         }, function ($el, value, type, field) {
    129             switch (type) {
    130                 case "text":
    131                     var html = CP_Customizer.utils.htmlDecode($el.html()).replace(field.value, value);
    132                     $el.html(html);
    133                     break;
    134             }
    135         });
    136 
    137         // containers selector
    138         CP_Customizer.preview.addDataContainerSelector('[data-hover-fx]');
    139 
    140         // link panel;
    141         CP_Customizer.addContainerDataHandler('a', function ($el) {
    142             var linkIsShortcode = $el.is('[data-attr-shortcode^="href:"]');
    143 
    144             var hasClass = ($el.attr('class') || "").trim().length > 0;
    145 
    146             var result = [
    147 
    148                 {
    149                     label: (hasClass ? window.CP_Customizer.translateCompanionString("Button") : window.CP_Customizer.translateCompanionString("Link"))
    150                     + " " + window.CP_Customizer.translateCompanionString("Text"),
    151                     type: "text",
    152                     value: $el.text().trim()
    153                 }
    154             ];
    155 
    156             if (!linkIsShortcode) {
    157                 result.push({
    158                     label: window.CP_Customizer.translateCompanionString("Link"),
    159                     type: "link",
    160                     value: {
    161                         link: CP_Customizer.preview.cleanURL($el.attr('href') || ""),
    162                         target: $el.attr('target') || "_self"
    163                     }
    164                 });
    165             }
    166 
    167             return result;
    168 
    169         }, function ($el, value, type, field) {
    170             switch (type) {
    171                 case "link":
    172                     $el.attr('href', value.link);
    173                     $el.attr('target', value.target);
    174 
    175                     $el.attr('data-cp-link', 1);
    176 
    177                     break;
    178                 case "text":
    179                     if (!field.name) {
    180                         var html = CP_Customizer.utils.htmlDecode($el.html()).replace(field.value, value);
    181                         $el.html(html);
    182                     }
    183                     break;
    184             }
    185         });
    186 
    187 
    188         // list panel;
    189         CP_Customizer.addContainerDataHandler('ul', function ($el) {
    190             var items = $el.children('li');
    191 
    192             items = items.map(function (index, item) {
    193                 return {
    194                     "label": window.CP_Customizer.translateCompanionString("Item") + " " + index,
    195                     "value": jQuery(item).html(),
    196                     "id": "item_" + index
    197                 }
    198             })
    199 
    200             var result = {
    201                 label: window.CP_Customizer.translateCompanionString("List items"),
    202                 type: "list",
    203                 value: items,
    204                 getValue: function ($control) {
    205                     var items = [];
    206                     $control.children().each(function () {
    207                         items.push(jQuery(this).find('.item-editor').val());
    208                     })
    209                     return items;
    210                 }
    211             }
    212 
    213             return result;
    214 
    215         }, function ($el, items, type) {
    216 
    217             var orig = $el.children().eq(0).clone();
    218             $el.empty();
    219 
    220             for (var i = 0; i < items.length; i++) {
    221                 var $item = orig.clone();
    222                 $item.html(items[i]);
    223                 $el.append($item);
    224             }
    225         });
    226 
    227         // image link panel
    228         CP_Customizer.addContainerDataFilter(function ($el) {
    229             return !($el.is('a') && $el.children().is('img'));
    230         });
    231 
    232         CP_Customizer.addContainerDataHandler('img', function ($el) {
    233 
    234             var mediaType = "image",
    235                 mediaData = false;
    236 
    237             if ($el.attr('data-size')) {
    238                 mediaType = "cropable";
    239                 var size = $el.attr('data-size').split('x');
    240 
    241                 var section = CP_Customizer.preview.getNodeSection($el);
    242                 var sectionExports = CP_Customizer.getSectionExports(section);
    243 
    244                 var flexible = _.isUndefined(sectionExports.maintainCropPropotion) ? true : sectionExports.maintainCropPropotion;
    245 
    246                 if ($el.is('[data-size-flexible=false]')) {
    247                     flexible = false;
    248                 }
    249 
    250                 mediaData = {
    251                     width: size[0],
    252                     height: size[1],
    253                     flexible: flexible
    254                 };
    255             }
    256 
    257 
    258             var image = [{
    259                 label: window.CP_Customizer.translateCompanionString("Image"),
    260                 mediaType: mediaType,
    261                 mediaData: mediaData,
    262                 type: "image",
    263                 value: ($el[0].currentSrc || $el.attr('src'))
    264             }];
    265 
    266             if ($el.parent().is('a')) {
    267                 image.push({
    268                     label: window.CP_Customizer.translateCompanionString("Link"),
    269                     type: "link",
    270                     value: {
    271                         link: CP_Customizer.preview.cleanURL($el.parent().attr('href') || ""),
    272                         target: $el.parent().attr('target') || "_self"
    273                     }
    274                 });
    275             }
    276             return image;
    277 
    278         }, function ($el, value, type) {
    279             switch (type) {
    280                 case 'image':
    281                     $el.attr("src", value);
    282                     $el.removeAttr('srcset');
    283                     $el.removeAttr('src-orig');
    284                     $el.removeAttr('width');
    285                     $el.removeAttr('height');
    286                     break;
    287                 case 'link':
    288                     $el.parent().attr('href', value.link);
    289                     $el.parent().attr('target', value.target);
    290                     break;
    291             }
    292         });
    293 
    294         // data-bg=[image]
    295 
    296         function getLinkFromBgImageValue(value) {
    297             value = value.replace(/url\((.*)\)/, "$1");
    298             return CP_Customizer.utils.phpTrim(value, "\"'");
    299         }
    300 
    301         CP_Customizer.addContainerDataHandler('[data-bg=image]', function ($el) {
    302 
    303             var mediaType = "image",
    304                 mediaData = false;
    305 
    306             if ($el.attr('data-size')) {
    307                 mediaType = "cropable";
    308                 var size = $el.attr('data-size').split('x');
    309                 mediaData = {
    310                     width: size[0],
    311                     height: size[1]
    312                 };
    313             }
    314 
    315 
    316             return [{
    317                 label: window.CP_Customizer.translateCompanionString("Background Image"),
    318                 mediaType: mediaType,
    319                 mediaData: mediaData,
    320                 type: "image",
    321                 value: getLinkFromBgImageValue($el.css('background-image'))
    322             }];
    323 
    324         }, function ($el, value, type) {
    325             switch (type) {
    326                 case 'image':
    327                     $el.css("background-image", 'url("' + value + '")');
    328                     break;
    329             }
    330         });
    331 
    332 
    333         // material icons icon with link
    334 
    335         CP_Customizer.addContainerDataFilter(function ($el) {
    336             return !($el.children().is('i.mdi') && $el.is('a'));
    337         });
    338 
    339         var mdiIconRegexp = /mdi\-[a-z\-]+/ig;
    340 
    341         CP_Customizer.addContainerDataHandler('a i.mdi', function ($el) {
    342 
    343             var mediaType = "icon",
    344                 mediaData = false;
    345 
    346             var result = [{
    347                 label: window.CP_Customizer.translateCompanionString("Material Icon"),
    348                 mediaType: mediaType,
    349                 mediaData: mediaData,
    350                 canHide: true,
    351                 type: "linked-icon",
    352                 value: {
    353                     icon: $el.attr('class').match(mdiIconRegexp).pop(),
    354                     link: CP_Customizer.preview.cleanURL($el.parent().attr('href') || ""),
    355                     target: $el.parent().attr('target') || "_self",
    356                     visible: CP_Customizer.preview.isNodeVisible($el.parent())
    357                 }
    358             }];
    359 
    360             if ($el.parent().is('.read-more')) {
    361                 result = [{
    362                     label: window.CP_Customizer.translateCompanionString("Text"),
    363                     type: "text",
    364                     value: $el.parent().text().trim()
    365                 }, {
    366                     label: window.CP_Customizer.translateCompanionString("Link"),
    367                     type: "link",
    368                     value: {
    369                         link: CP_Customizer.preview.cleanURL($el.parent().attr('href') || ""),
    370                         target: $el.parent().attr('target') || "_self"
    371                     }
    372                 }]
    373 
    374             }
    375 
    376             return result;
    377 
    378 
    379         }, function ($el, value, type, field) {
    380 
    381             if (type === "linked-icon") {
    382                 var classValue = $el.attr('class');
    383                 classValue = classValue.replace(/mdi\-[a-z\-]+/ig, "") + " " + value.icon;
    384                 $el.attr('class', classValue);
    385 
    386                 $el.parent().attr('href', value.link);
    387                 $el.parent().attr('target', value.target);
    388 
    389                 value.visible = _.isUndefined(value.visible) ? true : value.visible;
    390 
    391                 if (value.visible) {
    392                     CP_Customizer.preview.showNode($el.parent());
    393                 } else {
    394                     CP_Customizer.preview.hideNode($el.parent());
    395                 }
    396             }
    397 
    398             if (type === "link") {
    399                 $el.parent().attr('href', value.link);
    400                 $el.parent().attr('target', value.target);
    401                 $el.parent().attr('data-cp-link', 1);
    402             }
    403             if (type === "text") {
    404                 $el.parent().html(value).append($el);
    405             }
    406         });
    407 
    408 
    409         CP_Customizer.addContainerDataHandler('i.mdi', function ($el) {
    410 
    411             var mediaType = "icon",
    412                 mediaData = false;
    413 
    414             return [{
    415                 label: window.CP_Customizer.translateCompanionString("Material Icon"),
    416                 mediaType: mediaType,
    417                 mediaData: mediaData,
    418                 canHide: $el.closest('[data-type=group]').length > 0,
    419                 type: "icon",
    420                 styles: iconStyles,
    421                 sizes: iconSizes,
    422                 value: {
    423                     icon: $el.attr('class').match(mdiIconRegexp).pop(),
    424                     style: getIconStyle($el),
    425                     size: getIconSize($el),
    426                     visible: CP_Customizer.preview.isNodeVisible($el)
    427                 }
    428             }];
    429 
    430 
    431         }, function ($el, value, type, prop) {
    432             if (type === "icon") {
    433                 var classValue = $el.attr('class');
    434                 classValue = classValue.replace(/mdi\-[a-z\-]+/ig, "") + " " + value.icon;
    435                 $el.attr('class', classValue);
    436 
    437                 value.visible = _.isUndefined(value.visible) ? true : value.visible;
    438 
    439                 if (value.visible) {
    440                     // $el.removeAttr('data-reiki-hidden');
    441                     CP_Customizer.preview.showNode($el);
    442                 } else {
    443                     CP_Customizer.preview.hideNode($el);
    444                 }
    445 
    446                 setIconStyle(value.style, $el);
    447                 setIconSize(value.size, $el);
    448             }
    449 
    450         });
    451 
    452 
    453     });
    454 })();