customizer-content-sections-overlays.js (24777B)
1 /* global top */ 2 3 (function (root, CP_Customizer, $) { 4 5 function newColumnContent() { 6 /* 7 <div data-cpid="new" class="column_28" reveal-fx="RevealFX115" data-scrollreveal="RevealFX115"> 8 <img width="184" height="174" src="@@ROOT@@/wp-content/themes/reiki-dragdrop/images/icon1.png" data-content-code-editable="true" data-content-editable="true" contenteditable="true"> 9 <h4 data-content-code-editable="true" data-content-editable="true" contenteditable="true">ON CANVAS TEXT EDITING</h4> 10 <p class="small_text1" data-content-code-editable="true" data-content-editable="true" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 11 </div> 12 */ 13 } 14 15 var unwrapComment = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//; 16 17 function getFunctionCommentTemplate(fn) { 18 //return typeof fn === 'function' ? unwrapComment.exec(fn.toString())[1] : fn; 19 if (typeof fn === 'function') 20 { 21 var exec = unwrapComment.exec(fn.toString()); 22 if (exec) return exec[1]; 23 } 24 return fn; 25 } 26 27 CP_Customizer.addModule(function (CP_Customizer) { 28 var $ = jQuery; // use global jquery until preview is ready 29 30 CP_Customizer.bind(CP_Customizer.events.PREVIEW_LOADED, function () { 31 // add preview jquery spectrum plugin 32 // use preview jQuery as the $ for the next elements 33 $ = CP_Customizer.preview.jQuery(); 34 $.fn.spectrum = root.jQuery.fn.spectrum; 35 }); 36 37 function getColorComponent() { 38 if ($('#cp-spectrum-keeper').length) { 39 return $('#cp-spectrum-keeper'); 40 } 41 42 var $template = $( 43 ' <div id="cp-spectrum-picker" class="picker">' + 44 ' <div class="bg-picker">' + 45 ' <h5 class="legend">' + window.CP_Customizer.translateCompanionString('Background Color') + '</h5>' + 46 ' <input name="color" type="text" />' + 47 ' </div>'); 48 49 var colorPalette = root.CP_Customizer.data().bgColorPalette; 50 $template.find('[name=color]').spectrum({ 51 flat: true, 52 preferredFormat: "hex", 53 showPaletteOnly: true, 54 color: '#ffffff', 55 palette: [colorPalette], 56 move: function (color) { 57 if (!color) { 58 return; 59 } 60 var node = $(this).closest('.node-overlay').data().node; 61 $(this).find('[name=color]').spectrum("set", color.toString()); 62 $(node).css('background-color', color.toString()); 63 $(this).closest('.cog.active').removeClass('active'); 64 CP_Customizer.markSave(); 65 }, 66 change: function (color) { 67 if (!color || !$(this).closest('.node-overlay').data()) { 68 return; 69 } 70 $(this).find('[name=color]').spectrum("set", color.toString()); 71 var node = $(this).closest('.node-overlay').data().node; 72 $(node).css('background-color', color.toString()); 73 $(this).closest('.cog.active').removeClass('active'); 74 CP_Customizer.markSave(); 75 } 76 }); 77 78 $template.find('[name="addImage"]').click(function (event) { 79 var node = $(this).closest('.node-overlay').data().node; 80 CP_Customizer.openImageManager(function (image) { 81 $(node).css('background-image', "url(" + image + ")"); 82 CP_Customizer.markSave(); 83 }); 84 }); 85 86 87 $template.find('[name="removeImage"]').click(function (event) { 88 var node = $(this).closest('.node-overlay').data().node; 89 $(node).css('background-image', "none"); 90 CP_Customizer.markSave(); 91 }); 92 93 94 $template.find('[name="coverImage"]').click(function (event) { 95 var node = $(this).closest('.node-overlay').data().node; 96 97 if ($(this).hasClass('active')) { 98 $(node).css('background-size', "auto"); 99 $(node).css('background-repeat', "repeat"); 100 } else { 101 $(node).css('background-size', "cover"); 102 $(node).css('background-repeat', "no-repeat"); 103 } 104 CP_Customizer.markSave(); 105 $(this).toggleClass('active'); 106 }); 107 108 function update() { 109 110 var node = $(this).closest('.node-overlay').data().node; 111 112 var backgroundColor = "#" + tinycolor($(node).css('background-color')).toHex(); 113 114 if (colorPalette.indexOf(backgroundColor) !== -1) { 115 $(this).closest('.cog-subitems').removeClass('disabled'); 116 $(this).find('[name=color]').spectrum("set", $(node).css('background-color')); 117 118 } else { 119 $(this).closest('.cog-subitems').addClass('disabled'); 120 var $reason = $(this).closest('.cog-subitems').children('p.disable-reason'); 121 122 if ($reason.length === 0) { 123 $reason = $("<p class='disable-reason'> " + window.CP_Customizer.translateCompanionString('This section has a custom background color') + 124 "<br/>" + window.CP_Customizer.translateCompanionString('Background can be changed in PRO') + "</p>"); 125 $(this).closest('.cog-subitems').prepend($reason); 126 } 127 128 } 129 130 // if ($(node).css('background-size') && $(node).css('background-size') === "cover") { 131 // $template.find('[name="coverImage"]').addClass('active'); 132 // } else { 133 // $template.find('[name="coverImage"]').removeClass('active'); 134 // } 135 136 137 } 138 139 $template.data('update', update.bind($template)); 140 return $template; 141 } 142 143 144 CP_Customizer.overlays.registerFixedOverlayOptions({ 145 'section': { 146 'title': function (node) { 147 var label = $(node).attr('data-label') ? $(node).attr('data-label') + " [" + 148 window.CP_Customizer.translateCompanionString('Section') + "]" : window.CP_Customizer.translateCompanionString('SECTION'); 149 return label; 150 }, 151 'toolbarTitle': function (node) { 152 var label = $(node).attr('data-label') ? $(node).attr('data-label') + " [" + window.CP_Customizer.translateCompanionString('Section') + "]" : 153 window.CP_Customizer.translateCompanionString('SECTION'); 154 return label; 155 }, 156 toolbar_binds: { 157 hover: [ 158 function (event, overlay) { 159 160 // layout toggle 161 var $changerItem = overlay.find('[data-name="section_layout_width_changer"]'); 162 163 if (!$(this).closest(CP_Customizer.preview.getPageContainerSelector()).length) { 164 $changerItem.hide(); 165 } else { 166 $changerItem.show(); 167 } 168 169 if ($(this).children().is('.gridContainer')) { 170 $changerItem.text( window.CP_Customizer.translateCompanionString('Make full width')); 171 $changerItem.data('toMake', 'full'); 172 } else { 173 $changerItem.text( window.CP_Customizer.translateCompanionString('Make Centered')); 174 $changerItem.data('toMake', 'centered'); 175 } 176 177 var $bgChanger = overlay.find('[data-name="page_background_image"]'); 178 var $isTransparent = tinycolor(getComputedStyle($(this)[0]).backgroundColor).getAlpha() === 0; 179 180 if ($isTransparent) { 181 $bgChanger.show(); 182 } else { 183 $bgChanger.hide(); 184 } 185 }, 186 function () { 187 } 188 ] 189 }, 190 'items': [{ 191 'name': 'section_layout_width_changer', 192 'title': window.CP_Customizer.translateCompanionString('Make full width'), 193 'on_click': function (node) { 194 var toMake = $(this).data().toMake; 195 switch (toMake) { 196 case 'centered': 197 $(node).children().not('[class*="section-separator"]').addClass('gridContainer'); 198 break; 199 case 'full': 200 $(node).children().not('[class*="section-separator"]').removeClass('gridContainer'); 201 break; 202 } 203 $(this).trigger('reiki.update_overlays'); 204 CP_Customizer.hooks.doAction('section_layout_changed', node, toMake); 205 $(this).closest('.overlay-toolbar').trigger('mouseover'); 206 207 CP_Customizer.markSave(); 208 } 209 }, { 210 'name': 'section_color_changer', 211 'title': window.CP_Customizer.translateCompanionString('Change background'), 212 'classes': 'subitems-arrow', 213 'on_hover': [function () { 214 var $subitemsContainer = $(this).children('.cog-subitems').length ? $(this).children('.cog-subitems') : $("<div class='cog-subitems' />"); 215 $brush = getColorComponent(); 216 217 $subitemsContainer.empty(); 218 $subitemsContainer.appendTo($(this)); 219 220 $subitemsContainer.append($brush); 221 $brush.data('update')(); 222 }, function () { 223 //console.log('hover out'); 224 }] 225 226 }, { 227 'name': 'page_background_image', 228 'title': window.CP_Customizer.translateCompanionString('Change background Image'), 229 'on_click': function (event) { 230 root.CP_Customizer.wpApi.control('background_image').focus(); 231 } 232 }] 233 }, 234 'list': { 235 'nodeOverrider': function (node) { 236 return $(node).is('[data-type="row"]') ? $(node) : $(node).find('[data-type="row"]').eq(0); 237 }, 238 'title': function (node) { 239 var label = $(node).closest('[data-label]').length ? $(node).closest('[data-label]').attr('data-label') + 240 " [" + window.CP_Customizer.translateCompanionString("List") + "]" : window.CP_Customizer.translateCompanionString("List"); 241 return label; 242 }, 243 'toolbarTitle': function (node) { 244 var label = $(node).closest('[data-label]').length ? $(node).closest('[data-label]').attr('data-label') + " [" + 245 window.CP_Customizer.translateCompanionString("List") + "]" : window.CP_Customizer.translateCompanionString("List"); 246 return label; 247 }, 248 toolbar_binds: { 249 hover: [ 250 function (event, overlay) { 251 if ($(this).find('[data-type="row"]').length || $(this).is('[data-type="row"]')) { 252 overlay.find('[data-category="list"]').show(); 253 254 if ($(overlay.data('node')).find('[data-type="row"]').is('[data-content-shortcode]')) { 255 overlay.find('[data-name="row_add_item"]').hide(); 256 overlay.find('[data-name="columns_reorder"]').hide(); 257 } else { 258 overlay.find('[data-name="row_add_item"]').show(); 259 overlay.find('[data-name="columns_reorder"]').show(); 260 261 } 262 } else { 263 overlay.find('[data-category="list"]').hide(); 264 } 265 }, 266 function (event, overlay) { 267 } 268 ] 269 }, 270 'items': [{ 271 'name': 'row_add_item', 272 'title': window.CP_Customizer.translateCompanionString('Add item'), 273 'on_click': function (node) { 274 var content = getFunctionCommentTemplate(newColumnContent); 275 var $content; 276 if (!$(node).children().length) { 277 content = content.split("@@ROOT@@").join(getWPLocation()); 278 $content = $(content); 279 } else { 280 $content = $(node).children('div').first().clone(false, false); 281 } 282 283 284 $content = root.CP_Customizer.preview.cleanNode($content); 285 root.CP_Customizer.preview.insertNode($content, $(node)); 286 root.CP_Customizer.hooks.doAction('section_list_item_refresh'); 287 } 288 }, { 289 'name': 'columns_per_row', 290 'title': window.CP_Customizer.translateCompanionString('Columns per row'), 291 'classes': 'subitems-arrow', 292 'on_hover': [function (node) { 293 var $subitemsContainer = $(this).children('.cog-subitems').length ? $(this).children('.cog-subitems') : $("<div class='cog-subitems' />"); 294 $subitemsContainer.empty(); 295 296 var cols = [1, 2, 3, 4, 6]; 297 298 if(node.is('[data-max-items]')) { 299 var newCols = []; 300 var maxCols = parseInt(node.attr('data-max-items')); 301 for (var kc = 0; kc < cols.length; kc++) { 302 if(cols[kc]<=maxCols) { 303 newCols.push(cols[kc]); 304 } 305 } 306 cols = newCols; 307 } 308 309 for (var i = 0; i < cols.length; i++) { 310 var colNr = cols[i]; 311 var itemData = { 312 'title': colNr + (colNr > 1 ? " " + 313 window.CP_Customizer.translateCompanionString("columns") : " " + 314 window.CP_Customizer.translateCompanionString("column")), 315 'name': colNr + "_columns", 316 'on_click': function (node) { 317 318 var columns = this.data('name').replace('_columns', ''); 319 var value = parseInt(columns); 320 columns = parseInt(columns); 321 columns = parseInt(12 / columns); 322 323 324 if (node.is('[data-dynamic-columns]')) { 325 var setting = node.attr('data-dynamic-columns'); 326 if (setting !== "handled") { 327 328 root.CP_Customizer.setMod(setting, columns, "refresh"); 329 330 } else { 331 332 CP_Customizer.hooks.doAction('dynamic_columns_handle', columns, node, value); 333 334 } 335 return; 336 } 337 338 root.CP_Customizer.markSave(); 339 var _class = 'col-md-' + columns, 340 colsRegexp = /((cp[0-9]+cols)(\s|$))|((col\-md\-[0-9]+)(\s|$))/ig, 341 currentDevice = root.CP_Customizer.preview.currentDevice(); 342 343 switch (currentDevice) { 344 case "tablet": 345 colsRegexp = /((cp[0-9]+cols\-tablet)(\s|$))|((col\-sm\-[0-9]+)(\s|$))/ig; 346 _class = 'col-sm-' + columns; 347 break; 348 349 case "mobile": 350 colsRegexp = /((cp[0-9]+cols\-mobile)(\s|$))|((col\-xs\-[0-9]+)(\s|$))/; 351 _class = 'col-xs-' + columns; 352 break; 353 } 354 355 $(node).children().each(function (index, el) { 356 var $col = $(el), 357 _classAttr = $col.attr('class'); 358 359 // remove existing cols: 360 _classAttr = _classAttr.replace(colsRegexp, ""); 361 362 // add new class 363 _classAttr += " " + _class + " "; 364 365 366 //remove not needed spaces in class attribute 367 _classAttr = _classAttr.replace(/\s\s+/, " "); 368 $col.attr('class', _classAttr); 369 370 371 }); 372 373 if (!$(node).hasClass('row')) { 374 $(node).attr('class', 'row'); 375 } 376 377 378 // wait for animations 379 _.delay(root.CP_Customizer.overlays.updateAllOverlays, 600); 380 } 381 }; 382 383 var $button = root.CP_Customizer.overlays.getOverlayOptionButton(itemData, node); 384 $subitemsContainer.append($button); 385 } 386 387 $subitemsContainer.appendTo($(this)); 388 }, function () { 389 }] 390 }, { 391 'name': 'columns_reorder', 392 'title': window.CP_Customizer.translateCompanionString('Reorder Items'), 393 'classes': 'subitems-arrow', 394 'on_hover': [function (node) { 395 396 var $ = root.CP_Customizer.preview.jQuery(); 397 var $subitemsContainer = $(this).children('.cog-subitems').length ? $(this).children('.cog-subitems') : $("<div class='cog-subitems' />"); 398 $subitemsContainer.empty(); 399 400 var itemsNo = $(node).children().length; 401 for (var i = 0; i < itemsNo; i++) { 402 var item = node.children().eq(i); 403 var title = item.text().replace(/\s\s+/g, " ").trim(); 404 405 406 title = title.trim().length ? title : ""; 407 408 if (!title && item.find('img').length) { 409 title = CP_Customizer.utils.getFileInfo(item.find('img').eq(0).attr('src')).filename; 410 } 411 412 if (!title) { 413 title = '[ ITEM ]'; 414 } 415 416 title = title.replace(/(^.{1,10})(.*)$/, function (matches, firstMatch, secondMatch) { 417 var result = (firstMatch || "").trim() + (secondMatch && secondMatch.length ? "[...]" : ""); 418 return result; 419 }); 420 421 var itemData = { 422 'title': (i + 1) + ') ' + title, 423 'name': 'reorder_item_' + i, 424 'classes': 'sortable-item' 425 }; 426 427 var $button = root.CP_Customizer.overlays.getOverlayOptionButton(itemData, item); 428 $button.data('item', item); 429 $subitemsContainer.append($button); 430 } 431 432 $subitemsContainer.appendTo($(this)); 433 $subitemsContainer.sortable({ 434 'axis': 'y', 435 'start': function (event, ui) { 436 ui.helper.css({ 437 'position': 'fixed', 438 'transition': 'none', 439 'background-color': '#ffffff', 440 'left': ui.helper.offset().left + 'px' 441 }); 442 443 ui.item.parent().addClass('big-heat-area'); 444 }, 445 sort: function (event, ui) { 446 ui.helper.css('top', event.clientY); 447 }, 448 'stop': function (event, ui) { 449 var index = ui.item.index(); 450 var node = jQuery(ui.item).data().item; 451 root.CP_Customizer.preview.insertNode(node, node.parent(), index); 452 ui.item.parent().removeClass('big-heat-area'); 453 } 454 }); 455 }, function () { 456 }] 457 }] 458 }, 459 'column': { 460 'title': window.CP_Customizer.translateCompanionString('List item'), 461 'toolbarTitle': 'List item', 462 'node_binds': { 463 'hover': [function () { 464 $(this).data().overlay.removeClass('hide'); 465 }, function () { 466 $(this).data().overlay.addClass('hide'); 467 }] 468 }, 469 'items': [{ 470 'name': 'row_remove_item', 471 'title': window.CP_Customizer.translateCompanionString('Remove Item'), 472 'on_click': function (node) { 473 var $overlay = $($(node).data('overlay')); 474 if ($overlay.data('node-observer')) { 475 $overlay.data('node-observer').disconnect(); 476 } 477 478 $overlay.remove(); 479 $(node).remove(); 480 $(this).trigger('reiki.update_overlays'); 481 root.CP_Customizer.markSave(); 482 } 483 }] 484 485 } 486 }); 487 }); 488 489 function addSectionOverlay($nodes) { 490 491 $nodes.addFixedOverlay({ 492 types: ["section", "list"], 493 "classes": ['section-overlay'] 494 }); 495 496 } 497 498 499 CP_Customizer.bind(CP_Customizer.events.ADD_FIXED_OVERLAYS, function (event, $startNode) { 500 addSectionOverlay($startNode.find('[data-label]')); 501 502 if ($startNode.is('[data-label]')) { 503 _.delay(function () { 504 addSectionOverlay($startNode); 505 }, 0); 506 } 507 508 }); 509 })(window, CP_Customizer, jQuery);