@innovastudio/contentbox 1.4.29 → 1.4.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -312,6 +312,110 @@ const prepareSvgIcons$1 = builder => {
|
|
|
312
312
|
<line x1="4" y1="20" x2="20" y2="20" />
|
|
313
313
|
</symbol>
|
|
314
314
|
|
|
315
|
+
<symbol id="icon-arrow-right" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
316
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
317
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
318
|
+
<line x1="15" y1="16" x2="19" y2="12"></line>
|
|
319
|
+
<line x1="15" y1="8" x2="19" y2="12"></line>
|
|
320
|
+
</symbol>
|
|
321
|
+
|
|
322
|
+
<symbol id="icon-arrow-left" viewBox="0 0 24 24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
323
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
324
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
325
|
+
<line x1="5" y1="12" x2="9" y2="16"></line>
|
|
326
|
+
<line x1="5" y1="12" x2="9" y2="8"></line>
|
|
327
|
+
</symbol>
|
|
328
|
+
|
|
329
|
+
<symbol id="icon-arrow-up" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
330
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
331
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
332
|
+
<line x1="16" y1="9" x2="12" y2="5"></line>
|
|
333
|
+
<line x1="8" y1="9" x2="12" y2="5"></line>
|
|
334
|
+
</symbol>
|
|
335
|
+
|
|
336
|
+
<symbol id="icon-arrow-down" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
337
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
338
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
339
|
+
<line x1="16" y1="15" x2="12" y2="19"></line>
|
|
340
|
+
<line x1="8" y1="15" x2="12" y2="19"></line>
|
|
341
|
+
</symbol>
|
|
342
|
+
|
|
343
|
+
<symbol id="icon-rotate-clockwise" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
344
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
345
|
+
<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5"></path>
|
|
346
|
+
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17"></line>
|
|
347
|
+
<line x1="4.06" y1="11" x2="4.06" y2="11.01"></line>
|
|
348
|
+
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11"></line>
|
|
349
|
+
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38"></line>
|
|
350
|
+
<line x1="11" y1="19.94" x2="11" y2="19.95"></line>
|
|
351
|
+
</symbol>
|
|
352
|
+
|
|
353
|
+
<symbol id="icon-rotate-2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
354
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
355
|
+
<path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
|
|
356
|
+
<line x1="18.37" y1="7.16" x2="18.37" y2="7.17"></line>
|
|
357
|
+
<line x1="13" y1="19.94" x2="13" y2="19.95"></line>
|
|
358
|
+
<line x1="16.84" y1="18.37" x2="16.84" y2="18.38"></line>
|
|
359
|
+
<line x1="19.37" y1="15.1" x2="19.37" y2="15.11"></line>
|
|
360
|
+
<line x1="19.94" y1="11" x2="19.94" y2="11.01"></line>
|
|
361
|
+
</symbol>
|
|
362
|
+
|
|
363
|
+
<symbol viewBox="0 0 24 24" id="icon-arrows-diagonal" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
364
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
365
|
+
<polyline points="16 4 20 4 20 8"></polyline>
|
|
366
|
+
<line x1="14" y1="10" x2="20" y2="4"></line>
|
|
367
|
+
<polyline points="8 20 4 20 4 16"></polyline>
|
|
368
|
+
<line x1="4" y1="20" x2="10" y2="14"></line>
|
|
369
|
+
</symbol>
|
|
370
|
+
|
|
371
|
+
<symbol viewBox="0 0 24 24" id="icon-arrows-diagonal-minimize" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
372
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
373
|
+
<path d="M18 10h-4v-4"></path>
|
|
374
|
+
<path d="M20 4l-6 6"></path>
|
|
375
|
+
<path d="M6 14h4v4"></path>
|
|
376
|
+
<path d="M10 14l-6 6"></path>
|
|
377
|
+
</symbol>
|
|
378
|
+
|
|
379
|
+
<symbol id="icon-circle-half" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
380
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
381
|
+
<circle cx="12" cy="12" r="9"></circle>
|
|
382
|
+
<path d="M12 3v18"></path>
|
|
383
|
+
<path d="M12 14l7 -7"></path>
|
|
384
|
+
<path d="M12 19l8.5 -8.5"></path>
|
|
385
|
+
<path d="M12 9l4.5 -4.5"></path>
|
|
386
|
+
</symbol>
|
|
387
|
+
|
|
388
|
+
<symbol id="icon-box-multiple" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
389
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
390
|
+
<rect x="7" y="3" width="14" height="14" rx="2"></rect>
|
|
391
|
+
<path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
|
|
392
|
+
</symbol>
|
|
393
|
+
|
|
394
|
+
<symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
395
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
396
|
+
<line x1="4" y1="20" x2="7" y2="20"></line>
|
|
397
|
+
<line x1="14" y1="20" x2="21" y2="20"></line>
|
|
398
|
+
<line x1="6.9" y1="15" x2="13.8" y2="15"></line>
|
|
399
|
+
<line x1="10.2" y1="6.3" x2="16" y2="20"></line>
|
|
400
|
+
<polyline points="5 20 11 4 13 4 20 20"></polyline>
|
|
401
|
+
</symbol>
|
|
402
|
+
|
|
403
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
404
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
405
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
406
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
407
|
+
</symbol>
|
|
408
|
+
|
|
409
|
+
<symbol id="icon-hand-move" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
410
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
411
|
+
<path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path>
|
|
412
|
+
<path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5"></path>
|
|
413
|
+
<path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5"></path>
|
|
414
|
+
<path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"></path>
|
|
415
|
+
<path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427"></path>
|
|
416
|
+
<path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
|
|
417
|
+
</symbol>
|
|
418
|
+
|
|
315
419
|
</defs>
|
|
316
420
|
</svg>`;
|
|
317
421
|
const builderStuff = builder.builderStuff;
|
|
@@ -450,12 +554,15 @@ class SideBar {
|
|
|
450
554
|
var sideIndex = 0;
|
|
451
555
|
this.builder.sidebarData.buttons.map(button => {
|
|
452
556
|
if (button.name == 'section') {
|
|
453
|
-
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' +
|
|
557
|
+
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#ion-android-add"></use></svg>' +
|
|
558
|
+
'<svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg>' + '</button>';
|
|
454
559
|
} else if (button.name == 'snippet') {
|
|
455
|
-
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
|
|
560
|
+
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + button.title + '" title="' + button.title + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
|
|
561
|
+
'<svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg>' + '</button>';
|
|
456
562
|
} else if (button.name == 'typography') {
|
|
457
563
|
if (this.builder.enableContentStyle) {
|
|
458
|
-
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + button.title + '" title="' + button.title + '">' + '<span style="">a</span>' +
|
|
564
|
+
html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + button.title + '" title="' + button.title + '">' + // '<span style="">a</span>' +
|
|
565
|
+
'<svg class="svg-icon"><use xlink:href="#icon-typography"></use></svg>' + '</button>';
|
|
459
566
|
}
|
|
460
567
|
} else if (button.name == 'code') {
|
|
461
568
|
if (this.builder.htmlSyntaxHighlighting) {
|
|
@@ -10081,7 +10188,7 @@ class EditBox {
|
|
|
10081
10188
|
html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
|
|
10082
10189
|
html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
|
|
10083
10190
|
html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': <span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
10084
|
-
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('
|
|
10191
|
+
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
|
|
10085
10192
|
html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
10086
10193
|
html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>';
|
|
10087
10194
|
html += '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:27px;">' + out('Default Text Formatting') + ':</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">' + out('Alignment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div id="divContainerParagraphSize" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div>' + '<div style="display:flex">' + '<button title="' + out('16') + '" class="cmd-box-parasize" data-value="16" style="width:40px">16</button>' + '<button title="' + out('17') + '" class="cmd-box-parasize" data-value="17" style="width:40px">17</button>' + '<button title="' + out('18') + '" class="cmd-box-parasize" data-value="18" style="width:40px">18</button>' + '<button title="' + out('19') + '" class="cmd-box-parasize" data-value="19" style="width:40px">19</button>' + '<button title="' + out('20') + '" class="cmd-box-parasize" data-value="20" style="width:40px">20</button>' + '<button title="' + out('21') + '" class="cmd-box-parasize" data-value="21" style="width:40px">21</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-parasize" data-value="" style="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Auto adjust text size on large screen.') + '</label>' + '</div>' + '<div id="divContainerLineHeight" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div>' + '<div style="display:flex;flex-flow: wrap;width: 290px;">' + '<button title="' + out('1') + '" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button>' + '<button title="' + out('1.1') + '" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button>' + '<button title="' + out('1.2') + '" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button>' + '<button title="' + out('1.3') + '" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button>' + '<button title="' + out('1.4') + '" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button>' + '<button title="' + out('1.5') + '" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button>' + '<button title="' + out('1.6') + '" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button>' + '<button title="' + out('1.7') + '" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button>' + '<button title="' + out('1.8') + '" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button>' + '<button title="' + out('1.9') + '" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button>' + '<button title="' + out('2') + '" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-lineheight" data-value="" style="">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
@@ -10089,7 +10196,26 @@ class EditBox {
|
|
|
10089
10196
|
'<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
|
|
10090
10197
|
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
10091
10198
|
html += '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:13px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '</div>';
|
|
10092
|
-
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
|
|
10199
|
+
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
|
|
10200
|
+
/*
|
|
10201
|
+
'<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
10202
|
+
'<input type="radio" id="rdoKenBurns" name="boxbganim" value="1" style="margin: 0 10px 0 5px;">' +
|
|
10203
|
+
'<span style="line-height:1">Ken Burns Effect</span>' +
|
|
10204
|
+
'</label>' +
|
|
10205
|
+
'<label for="rdoParallaxScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
10206
|
+
'<input type="radio" id="rdoParallaxScale" name="boxbganim" value="2" style="margin: 0 10px 0 5px;">' +
|
|
10207
|
+
'<span style="line-height:1">Parallax & Scale</span>' +
|
|
10208
|
+
'</label>' +
|
|
10209
|
+
'<label for="rdoParallax" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
10210
|
+
'<input type="radio" id="rdoParallax" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
|
|
10211
|
+
'<span style="line-height:1">Parallax (visible on preview)</span>' +
|
|
10212
|
+
'</label>' +
|
|
10213
|
+
'<label for="rdoScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
10214
|
+
'<input type="radio" id="rdoScale" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
|
|
10215
|
+
'<span style="line-height:1">Scale</span>' +
|
|
10216
|
+
'</label>' +
|
|
10217
|
+
*/
|
|
10218
|
+
'<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> ' + out('Zoom on Hover') + '</label>' + '</div>';
|
|
10093
10219
|
html += '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>';
|
|
10094
10220
|
html += '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
10095
10221
|
dom$j.appendHtml(builderStuff, html); // Box Tool
|
|
@@ -11418,6 +11544,55 @@ class EditBox {
|
|
|
11418
11544
|
|
|
11419
11545
|
this.builder.onChange();
|
|
11420
11546
|
});
|
|
11547
|
+
const chkBoxAddCode = modalEditBox.querySelector('.cmd-box-addcode');
|
|
11548
|
+
chkBoxAddCode.addEventListener('click', () => {
|
|
11549
|
+
const activeBox = this.builder.activeBox;
|
|
11550
|
+
const overlay = activeBox.querySelector('.is-overlay');
|
|
11551
|
+
overlay.insertAdjacentHTML('beforebegin', `
|
|
11552
|
+
<div class="is-overlay-content" data-module="code" data-module-desc="Custom HTML or Javascript " data-html="${encodeURIComponent(`
|
|
11553
|
+
<style>
|
|
11554
|
+
|
|
11555
|
+
</style>
|
|
11556
|
+
|
|
11557
|
+
<script id="script-{id}">
|
|
11558
|
+
var docReady = function(fn) {
|
|
11559
|
+
var stateCheck = setInterval(function() {
|
|
11560
|
+
if (document.readyState !== "complete") return;
|
|
11561
|
+
// if (typeof skrollrr === 'undefined') return; // To check if needed library is loaded (you can change it to other library)
|
|
11562
|
+
// if (typeof skrollrr.lax === 'undefined') return; // To check if certain object is ready (in case needed)
|
|
11563
|
+
clearInterval(stateCheck);
|
|
11564
|
+
try {
|
|
11565
|
+
fn()
|
|
11566
|
+
} catch (e) {}
|
|
11567
|
+
}, 1);
|
|
11568
|
+
};
|
|
11569
|
+
docReady(function() {
|
|
11570
|
+
|
|
11571
|
+
// Your code here
|
|
11572
|
+
let section = document.querySelector('#script-{id}').closest('.is-section'); // Get the current section
|
|
11573
|
+
let box = document.querySelector('#script-{id}').closest('.is-box'); // Get the current box
|
|
11574
|
+
let container = box.querySelector('.is-container'); // Get the current container
|
|
11575
|
+
// console.log(section);
|
|
11576
|
+
|
|
11577
|
+
});
|
|
11578
|
+
</script>
|
|
11579
|
+
`)}" style="z-index: 1;">
|
|
11580
|
+
|
|
11581
|
+
</div>`); //Trigger Change event
|
|
11582
|
+
|
|
11583
|
+
this.builder.onChange();
|
|
11584
|
+
this.edit(); // Update controls
|
|
11585
|
+
|
|
11586
|
+
let boxTool = activeBox.querySelector('.is-box-tool');
|
|
11587
|
+
|
|
11588
|
+
if (boxTool) {
|
|
11589
|
+
activeBox.querySelector('.is-cover-upload').style.display = 'block';
|
|
11590
|
+
activeBox.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
11591
|
+
activeBox.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
11592
|
+
boxTool.style.width = '120px';
|
|
11593
|
+
boxTool.style.left = 'calc(50% - 60px)';
|
|
11594
|
+
}
|
|
11595
|
+
});
|
|
11421
11596
|
const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
|
|
11422
11597
|
chkBoxAddText.addEventListener('click', () => {
|
|
11423
11598
|
const activeBox = this.builder.activeBox;
|
|
@@ -11475,6 +11650,27 @@ class EditBox {
|
|
|
11475
11650
|
}
|
|
11476
11651
|
});
|
|
11477
11652
|
});
|
|
11653
|
+
const chkBoxRemoveCode = modalEditBox.querySelector('.cmd-box-removecode');
|
|
11654
|
+
chkBoxRemoveCode.addEventListener('click', () => {
|
|
11655
|
+
this.builder.editor.util.confirm(out('Are you sure you want to remove custom code in this box?'), ok => {
|
|
11656
|
+
if (ok) {
|
|
11657
|
+
const activeBox = this.builder.activeBox;
|
|
11658
|
+
const overlayCode = activeBox.querySelector('.is-overlay-content[data-module]');
|
|
11659
|
+
overlayCode.parentNode.removeChild(overlayCode);
|
|
11660
|
+
this.edit(); // Update controls
|
|
11661
|
+
|
|
11662
|
+
let boxTool = activeBox.querySelector('.is-box-tool');
|
|
11663
|
+
|
|
11664
|
+
if (boxTool) {
|
|
11665
|
+
activeBox.querySelector('.is-cover-upload').style.display = 'block';
|
|
11666
|
+
activeBox.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
11667
|
+
activeBox.querySelector('.is-module-edit').style.display = 'none';
|
|
11668
|
+
boxTool.style.width = '80px';
|
|
11669
|
+
boxTool.style.left = 'calc(50% - 40px)';
|
|
11670
|
+
}
|
|
11671
|
+
}
|
|
11672
|
+
});
|
|
11673
|
+
});
|
|
11478
11674
|
const btnBoxBgImageRemove = modalEditBox.querySelector('.input-box-bgremove');
|
|
11479
11675
|
if (btnBoxBgImageRemove) btnBoxBgImageRemove.addEventListener('click', () => {
|
|
11480
11676
|
this.boxImage('');
|
|
@@ -11700,11 +11896,13 @@ class EditBox {
|
|
|
11700
11896
|
const inpModuleCustomCode = builderStuff.querySelector('#txtBoxCustomCode');
|
|
11701
11897
|
hidModuleCustomCode.value = inpModuleCustomCode.value; //Save Html (original)
|
|
11702
11898
|
|
|
11703
|
-
activeModule.setAttribute('data-html', encodeURIComponent(hidModuleCustomCode.value));
|
|
11899
|
+
activeModule.setAttribute('data-html', encodeURIComponent(hidModuleCustomCode.value));
|
|
11900
|
+
let html = hidModuleCustomCode.value;
|
|
11901
|
+
html = html.replace(/{id}/g, dom$j.uniqueId()); //Render (programmatically)
|
|
11704
11902
|
|
|
11705
11903
|
let range = document.createRange();
|
|
11706
11904
|
activeModule.innerHTML = '';
|
|
11707
|
-
activeModule.appendChild(range.createContextualFragment(
|
|
11905
|
+
activeModule.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
11708
11906
|
//Trigger Render event
|
|
11709
11907
|
|
|
11710
11908
|
this.builder.settings.onRender(); //Trigger Change event
|
|
@@ -12051,6 +12249,26 @@ class EditBox {
|
|
|
12051
12249
|
dom$j.removeClass(activeBox, 'box-active');
|
|
12052
12250
|
this.builder.showTools();
|
|
12053
12251
|
});
|
|
12252
|
+
/*
|
|
12253
|
+
// Experimental
|
|
12254
|
+
modalEditBox.style.display = 'flex';
|
|
12255
|
+
document.body.classList.add('side-open');
|
|
12256
|
+
let panel = modalEditBox.querySelector('.is-modal-content');
|
|
12257
|
+
setTimeout(()=>{
|
|
12258
|
+
this.builder.showModal(modalEditBox, false, ()=>{
|
|
12259
|
+
dom.removeClass(activeBox, 'box-active');
|
|
12260
|
+
|
|
12261
|
+
this.builder.showTools();
|
|
12262
|
+
document.body.classList.remove('side-open');
|
|
12263
|
+
this.builder.wrapperEl.style.transition = 'none';
|
|
12264
|
+
setTimeout(()=>{
|
|
12265
|
+
modalEditBox.style.display = '';
|
|
12266
|
+
this.builder.wrapperEl.style.transition = '';
|
|
12267
|
+
}, 200);
|
|
12268
|
+
});
|
|
12269
|
+
}, 10);
|
|
12270
|
+
*/
|
|
12271
|
+
|
|
12054
12272
|
modalEditBox.focus();
|
|
12055
12273
|
|
|
12056
12274
|
if (container) {
|
|
@@ -12274,6 +12492,17 @@ class EditBox {
|
|
|
12274
12492
|
} else {
|
|
12275
12493
|
chkBoxAddText.style.display = 'flex';
|
|
12276
12494
|
chkBoxRemoveText.style.display = 'none';
|
|
12495
|
+
}
|
|
12496
|
+
|
|
12497
|
+
const chkBoxAddCode = modalEditBox.querySelector('.cmd-box-addcode');
|
|
12498
|
+
const chkBoxRemoveCode = modalEditBox.querySelector('.cmd-box-removecode');
|
|
12499
|
+
|
|
12500
|
+
if (activeBox.querySelector('.is-overlay-content[data-module]')) {
|
|
12501
|
+
chkBoxAddCode.style.display = 'none';
|
|
12502
|
+
chkBoxRemoveCode.style.display = 'flex';
|
|
12503
|
+
} else {
|
|
12504
|
+
chkBoxAddCode.style.display = 'flex';
|
|
12505
|
+
chkBoxRemoveCode.style.display = 'none';
|
|
12277
12506
|
} // noedit (not used yet)
|
|
12278
12507
|
|
|
12279
12508
|
|
|
@@ -17663,7 +17892,7 @@ class Util {
|
|
|
17663
17892
|
|
|
17664
17893
|
const cellCount = row.childElementCount - num;
|
|
17665
17894
|
const rowClass = this.builder.opts.row;
|
|
17666
|
-
|
|
17895
|
+
let colClass = this.builder.opts.cols;
|
|
17667
17896
|
const colEqual = this.builder.opts.colequal;
|
|
17668
17897
|
|
|
17669
17898
|
if (colEqual.length > 0) {
|
|
@@ -17704,7 +17933,21 @@ class Util {
|
|
|
17704
17933
|
let n = 0;
|
|
17705
17934
|
const cols = dom.elementChildren(row);
|
|
17706
17935
|
cols.forEach(col => {
|
|
17707
|
-
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
|
|
17936
|
+
if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return; // Bootstrap stuff
|
|
17937
|
+
|
|
17938
|
+
col.classList.forEach(item => {
|
|
17939
|
+
if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
|
|
17940
|
+
colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
|
|
17941
|
+
} else if (item.indexOf('col-xs-') !== -1) {
|
|
17942
|
+
colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
|
|
17943
|
+
} else if (item.indexOf('col-lg-') !== -1) {
|
|
17944
|
+
colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
|
|
17945
|
+
} else if (item.indexOf('col-xl-') !== -1) {
|
|
17946
|
+
colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
|
|
17947
|
+
} else if (item.indexOf('col-xxl-') !== -1) {
|
|
17948
|
+
colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
|
|
17949
|
+
}
|
|
17950
|
+
});
|
|
17708
17951
|
n++;
|
|
17709
17952
|
|
|
17710
17953
|
for (var i = 0; i <= colClass.length - 1; i++) {
|
|
@@ -17714,7 +17957,10 @@ class Util {
|
|
|
17714
17957
|
if (cellCount === 1) dom.addClass(col, colClass[11]);
|
|
17715
17958
|
if (cellCount === 2) dom.addClass(col, colClass[5]);
|
|
17716
17959
|
if (cellCount === 3) dom.addClass(col, colClass[3]);
|
|
17717
|
-
|
|
17960
|
+
|
|
17961
|
+
if (cellCount === 4) {
|
|
17962
|
+
dom.addClass(col, colClass[2]);
|
|
17963
|
+
}
|
|
17718
17964
|
|
|
17719
17965
|
if (cellCount === 5) {
|
|
17720
17966
|
// 2, 2, 2, 2, 4
|
|
@@ -28070,59 +28316,7 @@ class HtmlUtil {
|
|
|
28070
28316
|
});
|
|
28071
28317
|
}
|
|
28072
28318
|
|
|
28073
|
-
if (this.builder.cleanHtmlFormatting)
|
|
28074
|
-
// this cleanHtmlFormatting flag only use for output, not during editing
|
|
28075
|
-
if (this.builder.useCssClasses) {
|
|
28076
|
-
// Clean all uneeded normal classes
|
|
28077
|
-
let elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontWeight.defaultNormal}`); // Array.prototype.forEach.call(elmNormals, (elm) => {
|
|
28078
|
-
// let decor = false;
|
|
28079
|
-
// if(elm.closest(`.${this.builder.cssClasses.fontWeight.defaultBold}`)) {
|
|
28080
|
-
// decor = true;
|
|
28081
|
-
// }
|
|
28082
|
-
// if(!decor) {
|
|
28083
|
-
// dom.removeClass(elm, this.builder.cssClasses.fontWeight.defaultNormal);
|
|
28084
|
-
// }
|
|
28085
|
-
// });
|
|
28086
|
-
// elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontStyle.normal}`);
|
|
28087
|
-
// Array.prototype.forEach.call(elmNormals, (elm) => {
|
|
28088
|
-
// let decor = false;
|
|
28089
|
-
// if(elm.closest(`.${this.builder.cssClasses.fontStyle.italic}`)) {
|
|
28090
|
-
// decor = true;
|
|
28091
|
-
// }
|
|
28092
|
-
// if(!decor) {
|
|
28093
|
-
// dom.removeClass(elm, this.builder.cssClasses.fontStyle.normal);
|
|
28094
|
-
// }
|
|
28095
|
-
// });
|
|
28096
|
-
// elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
|
|
28097
|
-
// Array.prototype.forEach.call(elmNormals, (elm) => {
|
|
28098
|
-
// let decor = false;
|
|
28099
|
-
// if(elm.closest('a')) return;
|
|
28100
|
-
// if(elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
|
|
28101
|
-
// decor = true;
|
|
28102
|
-
// }
|
|
28103
|
-
// if(!decor) {
|
|
28104
|
-
// dom.removeClass(elm, this.builder.cssClasses.textDecoration.normal);
|
|
28105
|
-
// }
|
|
28106
|
-
// });
|
|
28107
|
-
// elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textTransform.normal}`);
|
|
28108
|
-
// Array.prototype.forEach.call(elmNormals, (elm) => {
|
|
28109
|
-
// let decor = false;
|
|
28110
|
-
// if(elm.closest(`.${this.builder.cssClasses.textTransform.uppercase},.${this.builder.cssClasses.textTransform.lowercase},.${this.builder.cssClasses.textTransform.capitalize}`)) {
|
|
28111
|
-
// decor = true;
|
|
28112
|
-
// }
|
|
28113
|
-
// if(!decor) {
|
|
28114
|
-
// dom.removeClass(elm, this.builder.cssClasses.textTransform.normal);
|
|
28115
|
-
// }
|
|
28116
|
-
// });
|
|
28117
|
-
|
|
28118
|
-
elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
|
|
28119
|
-
Array.prototype.forEach.call(elmNormals, elm => {
|
|
28120
|
-
dom$h.removeClass(elm, this.builder.cssClasses.extend.unset);
|
|
28121
|
-
});
|
|
28122
|
-
} // Clean unused spans
|
|
28123
|
-
// dom.cleanUnusedSpan(content); // REVIEW
|
|
28124
|
-
|
|
28125
|
-
}
|
|
28319
|
+
if (this.builder.cleanHtmlFormatting) ;
|
|
28126
28320
|
|
|
28127
28321
|
const util = this.builder.util;
|
|
28128
28322
|
const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
|
|
@@ -28378,10 +28572,6 @@ class HtmlUtil {
|
|
|
28378
28572
|
Array.prototype.forEach.call(emptyclasses, emptyclass => {
|
|
28379
28573
|
emptyclass.removeAttribute('class');
|
|
28380
28574
|
});
|
|
28381
|
-
let emptystyles = tmp.querySelectorAll('[style=""]');
|
|
28382
|
-
Array.prototype.forEach.call(emptystyles, emptystyle => {
|
|
28383
|
-
emptystyle.removeAttribute('style');
|
|
28384
|
-
});
|
|
28385
28575
|
dom$h.removeEmptyStyle(tmp);
|
|
28386
28576
|
elms = tmp.querySelectorAll('[data-keep]');
|
|
28387
28577
|
dom$h.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
|
|
@@ -28401,6 +28591,20 @@ class HtmlUtil {
|
|
|
28401
28591
|
// Remove dummy DIV after last section
|
|
28402
28592
|
let elms = tmp.querySelectorAll('.is-dummy');
|
|
28403
28593
|
dom$h.removeElements(elms);
|
|
28594
|
+
elms = tmp.querySelectorAll('[data-scroll]');
|
|
28595
|
+
dom$h.removeAttributes(elms, 'data-scroll');
|
|
28596
|
+
elms = tmp.querySelectorAll('[data-scroll-once]');
|
|
28597
|
+
dom$h.removeAttributes(elms, 'data-scroll-once');
|
|
28598
|
+
elms = tmp.querySelectorAll(`[data-top-bottom],[data-top],[data-50-top],[data-100-top],
|
|
28599
|
+
[data-center-bottom],[data-center],[data-center-top],[data--400-bottom],[data--300-bottom],
|
|
28600
|
+
[data--200-bottom],[data--150-bottom],[data--100-bottom],[data--50-bottom],
|
|
28601
|
+
[data-bottom],[data-50-bottom],[data-100-bottom],[data-150-bottom],[data-200-bottom],
|
|
28602
|
+
[data-300-bottom],[data-400-bottom],[data-bottom-top]`);
|
|
28603
|
+
Array.prototype.forEach.call(elms, elm => {
|
|
28604
|
+
elm.style.transition = '';
|
|
28605
|
+
elm.style.transform = '';
|
|
28606
|
+
elm.style.opacity = '';
|
|
28607
|
+
});
|
|
28404
28608
|
elms = tmp.querySelectorAll('.is-animated');
|
|
28405
28609
|
Array.prototype.forEach.call(elms, elm => {
|
|
28406
28610
|
dom$h.removeClass(elm, 'animated');
|
|
@@ -28421,6 +28625,11 @@ class HtmlUtil {
|
|
|
28421
28625
|
dom$h.removeClass(elm, 'slideInRight');
|
|
28422
28626
|
dom$h.removeClass(elm, 'zoomIn');
|
|
28423
28627
|
elm.style.animationDelay = '';
|
|
28628
|
+
elm.style.transitionDelay = '';
|
|
28629
|
+
});
|
|
28630
|
+
let emptystyles = tmp.querySelectorAll('[style=""]');
|
|
28631
|
+
Array.prototype.forEach.call(emptystyles, emptystyle => {
|
|
28632
|
+
emptystyle.removeAttribute('style');
|
|
28424
28633
|
}); //Cleanup utils
|
|
28425
28634
|
|
|
28426
28635
|
elms = tmp.querySelectorAll('.is-appeared');
|
|
@@ -28482,6 +28691,10 @@ class HtmlUtil {
|
|
|
28482
28691
|
html = html_content + html_footer + html_others;
|
|
28483
28692
|
}
|
|
28484
28693
|
} else {
|
|
28694
|
+
let emptystyles = tmp.querySelectorAll('[style=""]');
|
|
28695
|
+
Array.prototype.forEach.call(emptystyles, emptystyle => {
|
|
28696
|
+
emptystyle.removeAttribute('style');
|
|
28697
|
+
});
|
|
28485
28698
|
html = tmp.innerHTML.trim();
|
|
28486
28699
|
html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
|
|
28487
28700
|
}
|
|
@@ -28492,7 +28705,11 @@ class HtmlUtil {
|
|
|
28492
28705
|
if (elm) builderStuff.removeChild(elm); // return html;
|
|
28493
28706
|
|
|
28494
28707
|
let beautify = JsBeautify.html;
|
|
28495
|
-
|
|
28708
|
+
html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
|
|
28709
|
+
// html = html.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){3,}/g, '$1\n')
|
|
28710
|
+
|
|
28711
|
+
html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
|
|
28712
|
+
return html;
|
|
28496
28713
|
}
|
|
28497
28714
|
|
|
28498
28715
|
}
|
|
@@ -30357,7 +30574,7 @@ const renderQuickAdd = builder => {
|
|
|
30357
30574
|
elm = quickadd.querySelector('.add-button');
|
|
30358
30575
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
30359
30576
|
const mode = quickadd.getAttribute('data-mode');
|
|
30360
|
-
let html = `<div>
|
|
30577
|
+
let html = `<div style="white-space: nowrap;">
|
|
30361
30578
|
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
|
|
30362
30579
|
</div>`;
|
|
30363
30580
|
|
|
@@ -30370,7 +30587,7 @@ const renderQuickAdd = builder => {
|
|
|
30370
30587
|
elm = quickadd.querySelector('.add-twobutton');
|
|
30371
30588
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
30372
30589
|
const mode = quickadd.getAttribute('data-mode');
|
|
30373
|
-
let html = `<div>
|
|
30590
|
+
let html = `<div style="white-space: nowrap;">
|
|
30374
30591
|
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 mt-2 mb-2 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-50 uppercase py-2 size-14 px-6 font-semibold text-gray-600 leading-relaxed">Read More</a>
|
|
30375
30592
|
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 mt-2 mb-2 rounded tracking-50 uppercase py-2 size-14 px-6 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500 leading-relaxed">Get Started</a>
|
|
30376
30593
|
</div>`;
|
|
@@ -30840,7 +31057,7 @@ class Grid {
|
|
|
30840
31057
|
}
|
|
30841
31058
|
|
|
30842
31059
|
const rowClass = builder.opts.row;
|
|
30843
|
-
|
|
31060
|
+
let colClass = builder.opts.cols;
|
|
30844
31061
|
const colSizes = builder.opts.colsizes;
|
|
30845
31062
|
|
|
30846
31063
|
if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
|
|
@@ -30893,6 +31110,21 @@ class Grid {
|
|
|
30893
31110
|
|
|
30894
31111
|
|
|
30895
31112
|
if (rowClass !== '' && colClass.length > 0) {
|
|
31113
|
+
// Bootstrap stuff
|
|
31114
|
+
cell.classList.forEach(item => {
|
|
31115
|
+
if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
|
|
31116
|
+
colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
|
|
31117
|
+
} else if (item.indexOf('col-xs-') !== -1) {
|
|
31118
|
+
colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
|
|
31119
|
+
} else if (item.indexOf('col-lg-') !== -1) {
|
|
31120
|
+
colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
|
|
31121
|
+
} else if (item.indexOf('col-xl-') !== -1) {
|
|
31122
|
+
colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
|
|
31123
|
+
} else if (item.indexOf('col-xxl-') !== -1) {
|
|
31124
|
+
colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
|
|
31125
|
+
}
|
|
31126
|
+
});
|
|
31127
|
+
|
|
30896
31128
|
if (!dom.hasClass(cell, colClass[11])) {
|
|
30897
31129
|
//if not column full
|
|
30898
31130
|
if (dom.hasClass(cell, colClass[11])) {
|
|
@@ -30999,7 +31231,7 @@ class Grid {
|
|
|
30999
31231
|
}
|
|
31000
31232
|
|
|
31001
31233
|
const rowClass = builder.opts.row;
|
|
31002
|
-
|
|
31234
|
+
let colClass = builder.opts.cols;
|
|
31003
31235
|
const colSizes = builder.opts.colsizes;
|
|
31004
31236
|
|
|
31005
31237
|
if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
|
|
@@ -31054,6 +31286,21 @@ class Grid {
|
|
|
31054
31286
|
|
|
31055
31287
|
|
|
31056
31288
|
if (rowClass !== '' && colClass.length > 0) {
|
|
31289
|
+
// Bootstrap stuff
|
|
31290
|
+
cell.classList.forEach(item => {
|
|
31291
|
+
if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
|
|
31292
|
+
colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
|
|
31293
|
+
} else if (item.indexOf('col-xs-') !== -1) {
|
|
31294
|
+
colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
|
|
31295
|
+
} else if (item.indexOf('col-lg-') !== -1) {
|
|
31296
|
+
colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
|
|
31297
|
+
} else if (item.indexOf('col-xl-') !== -1) {
|
|
31298
|
+
colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
|
|
31299
|
+
} else if (item.indexOf('col-xxl-') !== -1) {
|
|
31300
|
+
colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
|
|
31301
|
+
}
|
|
31302
|
+
});
|
|
31303
|
+
|
|
31057
31304
|
if (!dom.hasClass(cell, colClass[11])) {
|
|
31058
31305
|
//if not column full
|
|
31059
31306
|
if (dom.hasClass(cell, colClass[0])) {
|
|
@@ -77958,6 +78205,7 @@ class ElementTool {
|
|
|
77958
78205
|
pos() {
|
|
77959
78206
|
let elementTool = this.elementTool;
|
|
77960
78207
|
let elm = this.builder.activeElement;
|
|
78208
|
+
if (elm.closest('.is-dock')) return;
|
|
77961
78209
|
let top, left;
|
|
77962
78210
|
|
|
77963
78211
|
if (!this.builder.iframe) {
|
|
@@ -84223,7 +84471,7 @@ class SaveImages {
|
|
|
84223
84471
|
|
|
84224
84472
|
}
|
|
84225
84473
|
|
|
84226
|
-
const dom$1 = new Dom();
|
|
84474
|
+
const dom$1$1 = new Dom();
|
|
84227
84475
|
|
|
84228
84476
|
class Tooltip {
|
|
84229
84477
|
constructor(builder) {
|
|
@@ -84236,7 +84484,7 @@ class Tooltip {
|
|
|
84236
84484
|
|
|
84237
84485
|
if (!tooltip) {
|
|
84238
84486
|
let html = '<div class="is-tooltip"></div>';
|
|
84239
|
-
dom$1.appendHtml(builderStuff, html);
|
|
84487
|
+
dom$1$1.appendHtml(builderStuff, html);
|
|
84240
84488
|
tooltip = builderStuff.querySelector('.is-tooltip');
|
|
84241
84489
|
}
|
|
84242
84490
|
|
|
@@ -92345,6 +92593,2205 @@ class ContentStuff {
|
|
|
92345
92593
|
|
|
92346
92594
|
}
|
|
92347
92595
|
|
|
92596
|
+
// Experimental
|
|
92597
|
+
const dom$1 = new Dom$1();
|
|
92598
|
+
|
|
92599
|
+
class AnimateScroll {
|
|
92600
|
+
constructor(builder) {
|
|
92601
|
+
this.builder = builder;
|
|
92602
|
+
const builderStuff = this.builder.builderStuff;
|
|
92603
|
+
this.builderStuff = builderStuff;
|
|
92604
|
+
let html = `
|
|
92605
|
+
<style>
|
|
92606
|
+
.animatescroll.active {
|
|
92607
|
+
right: 0;
|
|
92608
|
+
}
|
|
92609
|
+
.animatescroll .side-title {
|
|
92610
|
+
font-weight: 400;
|
|
92611
|
+
font-size: 15px;
|
|
92612
|
+
opacity: 0.8;
|
|
92613
|
+
padding: 10px 0 0 18px !important;
|
|
92614
|
+
}
|
|
92615
|
+
.animatescroll .is-tabs a.active {
|
|
92616
|
+
background: none !important;
|
|
92617
|
+
}
|
|
92618
|
+
.animatescroll .is-tabs a {
|
|
92619
|
+
text-transform: none!important;
|
|
92620
|
+
font-size: 13px!important;
|
|
92621
|
+
margin-right: 30px!important;
|
|
92622
|
+
margin-left: 3px!important;
|
|
92623
|
+
}
|
|
92624
|
+
.anim-controls {
|
|
92625
|
+
padding: 0 !important;
|
|
92626
|
+
z-index: 1;
|
|
92627
|
+
width: 100%;
|
|
92628
|
+
height: 100%;
|
|
92629
|
+
position: absolute;
|
|
92630
|
+
top: 0;
|
|
92631
|
+
box-sizing: border-box;
|
|
92632
|
+
border-top: transparent 200px solid !important;
|
|
92633
|
+
}
|
|
92634
|
+
#divEnterAnim, #divLeaveAnim, #divAnimSettings {
|
|
92635
|
+
border-top: transparent 70px solid !important;
|
|
92636
|
+
padding: 0 10px 20px 18px !important;
|
|
92637
|
+
width: 100%;
|
|
92638
|
+
height: 100%;
|
|
92639
|
+
box-sizing: border-box;
|
|
92640
|
+
overflow-y: auto;
|
|
92641
|
+
overflow-x: hidden;
|
|
92642
|
+
position: absolute;
|
|
92643
|
+
top: 0; left: 0;
|
|
92644
|
+
}
|
|
92645
|
+
.anim-label {
|
|
92646
|
+
padding: 15px 0 5px;
|
|
92647
|
+
width: 100%;
|
|
92648
|
+
flex:none;
|
|
92649
|
+
display: flex;
|
|
92650
|
+
justify-content: space-between;
|
|
92651
|
+
align-items: center;
|
|
92652
|
+
}
|
|
92653
|
+
.anim-label span {
|
|
92654
|
+
display: flex;
|
|
92655
|
+
align-items: center;
|
|
92656
|
+
}
|
|
92657
|
+
.anim-label button {
|
|
92658
|
+
width: 40px !important;
|
|
92659
|
+
margin-left: 2px !important;
|
|
92660
|
+
box-shadow: none !important;
|
|
92661
|
+
}
|
|
92662
|
+
.bold {
|
|
92663
|
+
font-weight: 600;
|
|
92664
|
+
}
|
|
92665
|
+
.anim-controls button,
|
|
92666
|
+
.anim-list button {
|
|
92667
|
+
height: 35px !important;
|
|
92668
|
+
outline-offset: -2px !important;
|
|
92669
|
+
}
|
|
92670
|
+
|
|
92671
|
+
.anim-controls input[type=text],
|
|
92672
|
+
.anim-list input[type=text] {
|
|
92673
|
+
font-size: 13px !important;
|
|
92674
|
+
font-family: sans-serif !important;
|
|
92675
|
+
font-weight: 300 !important;
|
|
92676
|
+
padding: 0 !important;
|
|
92677
|
+
}
|
|
92678
|
+
.flex-wrap {
|
|
92679
|
+
display: flex;
|
|
92680
|
+
flex-flow: wrap;
|
|
92681
|
+
align-items: center;
|
|
92682
|
+
}
|
|
92683
|
+
.flex-nowrap {
|
|
92684
|
+
display: flex;
|
|
92685
|
+
align-items: center;
|
|
92686
|
+
}
|
|
92687
|
+
.inp-slide-left,
|
|
92688
|
+
.inp-slide-right,
|
|
92689
|
+
.inp-slide-up,
|
|
92690
|
+
.inp-slide-down,
|
|
92691
|
+
.inp-scale,
|
|
92692
|
+
.inp-rotate-clockwise,
|
|
92693
|
+
.inp-rotate-counter {
|
|
92694
|
+
width:65px !important;
|
|
92695
|
+
height:35px !important;
|
|
92696
|
+
text-align:center !important;
|
|
92697
|
+
margin-left:10px !important;
|
|
92698
|
+
font-size: 13px !important;
|
|
92699
|
+
font-family: sans-serif !important;
|
|
92700
|
+
font-weight: 300 !important;
|
|
92701
|
+
padding: 0 !important;
|
|
92702
|
+
}
|
|
92703
|
+
|
|
92704
|
+
</style>
|
|
92705
|
+
<div class="is-side animatescroll" style="display: block;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
92706
|
+
|
|
92707
|
+
<div class="side-title">${out('Animation')}</div>
|
|
92708
|
+
|
|
92709
|
+
<button tabindex="-1" title="Close" class="is-side-close" style="z-index:2;background:transparent;width:25px;height:25px;position:absolute;top:10px;right:13px;box-sizing:border-box;padding:0;line-height:25px;font-size: 12px;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:25px;height:25px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
92710
|
+
|
|
92711
|
+
<div style="padding:10px 10px 25px 18px;z-index:2;position:relative;">
|
|
92712
|
+
<div class="anim-label" style="margin-bottom:5px">${out('Apply To')}:</div>
|
|
92713
|
+
<div class="flex-wrap">
|
|
92714
|
+
<button title="${out('Element')}" class="cmd-target on" data-command="target" data-value="element" style="width:80px">${out('Element')}</button>
|
|
92715
|
+
<button title="${out('Column')}" class="cmd-target" data-command="target" data-value="column" style="width:80px">${out('Column')}</button>
|
|
92716
|
+
<button title="${out('Row')}" class="cmd-target" data-command="target" data-value="row" style="width:80px">${out('Row')}</button>
|
|
92717
|
+
<button title="${out('Container')}" class="cmd-target" data-command="target" data-value="container" style="width:80px">${out('Container')}</button>
|
|
92718
|
+
</div>
|
|
92719
|
+
</div>
|
|
92720
|
+
|
|
92721
|
+
<div>
|
|
92722
|
+
<div class="is-tabs" style="position:relative;z-index:2;" data-group="animtype">
|
|
92723
|
+
<a href="" data-content="divAnimScroll" class="active">${out('On Scroll')}</a>
|
|
92724
|
+
<a href="" data-content="divAnimDefault">${out('On View')}</a>
|
|
92725
|
+
</div>
|
|
92726
|
+
</div>
|
|
92727
|
+
|
|
92728
|
+
<div id="divAnimDefault" class="is-tab-content active" data-group="animtype" style="padding-top:0">
|
|
92729
|
+
|
|
92730
|
+
<div class="anim-controls">
|
|
92731
|
+
|
|
92732
|
+
<div style="padding:20px 0 0 18px;">
|
|
92733
|
+
<div class="anim-label">
|
|
92734
|
+
<span>
|
|
92735
|
+
<span class="bold">${out('Fade')}</span>:
|
|
92736
|
+
</span>
|
|
92737
|
+
</div>
|
|
92738
|
+
<div class="flex-wrap">
|
|
92739
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-fadeIn" style="width:60px">${out('In')}</button>
|
|
92740
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-fadeInLeft" style="width:60px">${out('Left')}</button>
|
|
92741
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-fadeInRight" style="width:60px">${out('Right')}</button>
|
|
92742
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-fadeInUp" style="width:60px">${out('Up')}</button>
|
|
92743
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-fadeInDown" style="width:60px">${out('Down')}</button>
|
|
92744
|
+
</div>
|
|
92745
|
+
|
|
92746
|
+
<div class="anim-label">
|
|
92747
|
+
<span>
|
|
92748
|
+
<span class="bold">${out('Slide')}</span>:
|
|
92749
|
+
</span>
|
|
92750
|
+
</div>
|
|
92751
|
+
<div class="flex-wrap">
|
|
92752
|
+
<button title="${out('Left')}" class="cmd-basic-anim" data-value="is-slideInLeft" style="width:60px">${out('Left')}</button>
|
|
92753
|
+
<button title="${out('Right')}" class="cmd-basic-anim" data-value="is-slideInRight" style="width:60px">${out('Right')}</button>
|
|
92754
|
+
<button title="${out('Up')}" class="cmd-basic-anim" data-value="is-slideInUp" style="width:60px">${out('Up')}</button>
|
|
92755
|
+
<button title="${out('Down')}" class="cmd-basic-anim" data-value="is-slideInDown" style="width:60px">${out('Down')}</button>
|
|
92756
|
+
</div>
|
|
92757
|
+
|
|
92758
|
+
<div class="anim-label">
|
|
92759
|
+
<span>
|
|
92760
|
+
<span class="bold">${out('Flip')}</span>:
|
|
92761
|
+
</span>
|
|
92762
|
+
</div>
|
|
92763
|
+
<div class="flex-wrap">
|
|
92764
|
+
<button title="${out('Vertical')}" class="cmd-basic-anim" data-value="is-flipInY" style="width:90px">${out('Vertical')}</button>
|
|
92765
|
+
<button title="${out('Horizontal')}" class="cmd-basic-anim" data-value="is-flipInX" style="width:90px">${out('Horizontal')}</button>
|
|
92766
|
+
</div>
|
|
92767
|
+
|
|
92768
|
+
<div class="anim-label">
|
|
92769
|
+
<span>
|
|
92770
|
+
<span class="bold">${out('Zoom')}</span>:
|
|
92771
|
+
</span>
|
|
92772
|
+
</div>
|
|
92773
|
+
<div class="flex-wrap">
|
|
92774
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-zoomIn" style="width:90px">${out('In')}</button>
|
|
92775
|
+
<button title="${out('Out')}" class="cmd-basic-anim" data-value="is-zoomOut" style="width:90px">${out('Out')}</button>
|
|
92776
|
+
</div>
|
|
92777
|
+
|
|
92778
|
+
<div class="anim-label">
|
|
92779
|
+
<span>
|
|
92780
|
+
<span class="bold">${out('Pulse')}</span>:
|
|
92781
|
+
</span>
|
|
92782
|
+
</div>
|
|
92783
|
+
<div class="flex-wrap">
|
|
92784
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-pulse" style="width:90px">${out('Pulse')}</button>
|
|
92785
|
+
</div>
|
|
92786
|
+
|
|
92787
|
+
<div class="anim-label">
|
|
92788
|
+
<span>
|
|
92789
|
+
<span class="bold">${out('Bounce')}</span>:
|
|
92790
|
+
</span>
|
|
92791
|
+
</div>
|
|
92792
|
+
<div class="flex-wrap">
|
|
92793
|
+
<button title="${out('In')}" class="cmd-basic-anim" data-value="is-bounceIn" style="width:90px">${out('Bounce')}</button>
|
|
92794
|
+
</div>
|
|
92795
|
+
|
|
92796
|
+
<div class="anim-label">
|
|
92797
|
+
<span>
|
|
92798
|
+
<span class="bold">${out('Animation Delay')}</span>:
|
|
92799
|
+
</span>
|
|
92800
|
+
</div>
|
|
92801
|
+
<div class="flex-wrap">
|
|
92802
|
+
<button title="0s" class="cmd-basic-delay" data-value="delay-0ms" style="width:60px">0s</button>
|
|
92803
|
+
<button title="0.1s" class="cmd-basic-delay" data-value="delay-100ms" style="width:60px">0.1s</button>
|
|
92804
|
+
<button title="0.2s" class="cmd-basic-delay" data-value="delay-200ms" style="width:60px">0.2s</button>
|
|
92805
|
+
<button title="0.3s" class="cmd-basic-delay" data-value="delay-300ms" style="width:60px">0.3s</button>
|
|
92806
|
+
<button title="0.4s" class="cmd-basic-delay" data-value="delay-400ms" style="width:60px">0.4s</button>
|
|
92807
|
+
<button title="0.5s" class="cmd-basic-delay" data-value="delay-500ms" style="width:60px">0.5s</button>
|
|
92808
|
+
<button title="0.6s" class="cmd-basic-delay" data-value="delay-600ms" style="width:60px">0.6s</button>
|
|
92809
|
+
<button title="0.7s" class="cmd-basic-delay" data-value="delay-700ms" style="width:60px">0.7s</button>
|
|
92810
|
+
<button title="0.8s" class="cmd-basic-delay" data-value="delay-800ms" style="width:60px">0.8s</button>
|
|
92811
|
+
<button title="0.9s" class="cmd-basic-delay" data-value="delay-900ms" style="width:60px">0.9s</button>
|
|
92812
|
+
<button title="1s" class="cmd-basic-delay" data-value="delay-1000ms" style="width:60px">1s</button>
|
|
92813
|
+
<button title="1.1s" class="cmd-basic-delay" data-value="delay-1100ms" style="width:60px">1.1s</button>
|
|
92814
|
+
<button title="1.2s" class="cmd-basic-delay" data-value="delay-1200ms" style="width:60px">1.2s</button>
|
|
92815
|
+
<button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:60px">1.3s</button>
|
|
92816
|
+
<button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:60px">1.4s</button>
|
|
92817
|
+
<button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
|
|
92818
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92819
|
+
</button>
|
|
92820
|
+
</div>
|
|
92821
|
+
|
|
92822
|
+
<br>
|
|
92823
|
+
<button title="${out('Animate Once')}" class="cmd-basic-once" style="width:165px;">
|
|
92824
|
+
${out('Animate Once')}
|
|
92825
|
+
</button>
|
|
92826
|
+
|
|
92827
|
+
<br>
|
|
92828
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-basicanim" style="width:195px">
|
|
92829
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92830
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
92831
|
+
</div>
|
|
92832
|
+
|
|
92833
|
+
</div>
|
|
92834
|
+
|
|
92835
|
+
</div>
|
|
92836
|
+
|
|
92837
|
+
<div id="divAnimScroll" class="is-tab-content" data-group="animtype" style="display:flex;padding-top:0">
|
|
92838
|
+
|
|
92839
|
+
<div class="anim-controls">
|
|
92840
|
+
|
|
92841
|
+
<div class="is-tabs clearfix" style="padding-top:28px;position:relative;z-index:1;background:none;" data-group="skrollanim">
|
|
92842
|
+
<a href="" data-content="divEnterAnim" class="active">${out('On Enter')}</a>
|
|
92843
|
+
<a href="" data-content="divLeaveAnim">${out('On Leave')}</a>
|
|
92844
|
+
<a href="" data-content="divAnimSettings">${out('Settings')}</a>
|
|
92845
|
+
</div>
|
|
92846
|
+
|
|
92847
|
+
<div id="divEnterAnim" class="is-tab-content active" data-group="skrollanim" style="display:flex;padding-top:0">
|
|
92848
|
+
|
|
92849
|
+
<div class="anim-label">
|
|
92850
|
+
<span>
|
|
92851
|
+
<span class="bold">${out('Slide Left')}</span>:
|
|
92852
|
+
<input class="inp-slide-left" type="text" />
|
|
92853
|
+
</span>
|
|
92854
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
92855
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92856
|
+
</button>
|
|
92857
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-left"></use></svg>-->
|
|
92858
|
+
</div>
|
|
92859
|
+
<div class="flex-wrap">
|
|
92860
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
92861
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
92862
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
92863
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
92864
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
92865
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92866
|
+
</div>
|
|
92867
|
+
<div class="anim-label">
|
|
92868
|
+
<span>
|
|
92869
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
92870
|
+
<input class="inp-slide-right" type="text" />
|
|
92871
|
+
</span>
|
|
92872
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
92873
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92874
|
+
</button>
|
|
92875
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-right"></use></svg>-->
|
|
92876
|
+
</div>
|
|
92877
|
+
<div class="flex-wrap">
|
|
92878
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
92879
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
92880
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
92881
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
92882
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
92883
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92884
|
+
</div>
|
|
92885
|
+
|
|
92886
|
+
<div class="anim-label">
|
|
92887
|
+
<span>
|
|
92888
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
92889
|
+
<input class="inp-slide-up" type="text" />
|
|
92890
|
+
</span>
|
|
92891
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
92892
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92893
|
+
</button>
|
|
92894
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-up"></use></svg>-->
|
|
92895
|
+
</div>
|
|
92896
|
+
<div class="flex-wrap">
|
|
92897
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
92898
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
92899
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
92900
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
92901
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
92902
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92903
|
+
</div>
|
|
92904
|
+
<div class="anim-label">
|
|
92905
|
+
<span>
|
|
92906
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
92907
|
+
<input class="inp-slide-down" type="text" />
|
|
92908
|
+
</span>
|
|
92909
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
92910
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92911
|
+
</button>
|
|
92912
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrow-down"></use></svg>-->
|
|
92913
|
+
</div>
|
|
92914
|
+
<div class="flex-wrap">
|
|
92915
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
92916
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
92917
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
92918
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
92919
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
92920
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
92921
|
+
</div>
|
|
92922
|
+
|
|
92923
|
+
<div class="anim-label">
|
|
92924
|
+
<span>
|
|
92925
|
+
<span class="bold">${out('Scale')}</span>:
|
|
92926
|
+
<input class="inp-scale" type="text" />
|
|
92927
|
+
</span>
|
|
92928
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
92929
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92930
|
+
</button>
|
|
92931
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
|
|
92932
|
+
</div>
|
|
92933
|
+
<div class="flex-nowrap">
|
|
92934
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
92935
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
92936
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
92937
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
92938
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
92939
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
92940
|
+
</div>
|
|
92941
|
+
|
|
92942
|
+
<div class="anim-label">
|
|
92943
|
+
<span>
|
|
92944
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
92945
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
92946
|
+
</span>
|
|
92947
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
92948
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92949
|
+
</button>
|
|
92950
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
92951
|
+
</div>
|
|
92952
|
+
<div class="flex-wrap">
|
|
92953
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
92954
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
92955
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
92956
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
92957
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
92958
|
+
</div>
|
|
92959
|
+
<div class="anim-label">
|
|
92960
|
+
<span>
|
|
92961
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
92962
|
+
<input class="inp-rotate-counter" type="text" />
|
|
92963
|
+
</span>
|
|
92964
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
92965
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92966
|
+
</button>
|
|
92967
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
92968
|
+
</div>
|
|
92969
|
+
<div class="flex-wrap">
|
|
92970
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
92971
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
92972
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
92973
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
92974
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
92975
|
+
</div>
|
|
92976
|
+
|
|
92977
|
+
<div class="anim-label">
|
|
92978
|
+
<span class="bold">${out('Fade')}</span>:
|
|
92979
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-circle-half"></use></svg>-->
|
|
92980
|
+
</div>
|
|
92981
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade In')}</button>
|
|
92982
|
+
|
|
92983
|
+
<br>
|
|
92984
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
92985
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92986
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
92987
|
+
</div>
|
|
92988
|
+
|
|
92989
|
+
<div id="divLeaveAnim" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
92990
|
+
|
|
92991
|
+
<div class="anim-label">
|
|
92992
|
+
<span>
|
|
92993
|
+
<span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
|
|
92994
|
+
</span>
|
|
92995
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
|
|
92996
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
92997
|
+
</button>
|
|
92998
|
+
</div>
|
|
92999
|
+
<div class="flex-wrap">
|
|
93000
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="-75px" style="width:60px">75</button>
|
|
93001
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="-100px" style="width:60px">100</button>
|
|
93002
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="-125px" style="width:60px">125</button>
|
|
93003
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="-150px" style="width:60px">150</button>
|
|
93004
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="-200px" style="width:60px">200</button>
|
|
93005
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93006
|
+
</div>
|
|
93007
|
+
<div class="anim-label">
|
|
93008
|
+
<span>
|
|
93009
|
+
<span class="bold">${out('Slide Right')}</span>:
|
|
93010
|
+
<input class="inp-slide-right" type="text" />
|
|
93011
|
+
</span>
|
|
93012
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
|
|
93013
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93014
|
+
</button>
|
|
93015
|
+
</div>
|
|
93016
|
+
<div class="flex-wrap">
|
|
93017
|
+
<button title="75" class="cmd-slidex" data-command="slidex" data-value="75px" style="width:60px">75</button>
|
|
93018
|
+
<button title="100" class="cmd-slidex" data-command="slidex" data-value="100px" style="width:60px">100</button>
|
|
93019
|
+
<button title="125" class="cmd-slidex" data-command="slidex" data-value="125px" style="width:60px">125</button>
|
|
93020
|
+
<button title="150" class="cmd-slidex" data-command="slidex" data-value="150px" style="width:60px">150</button>
|
|
93021
|
+
<button title="200" class="cmd-slidex" data-command="slidex" data-value="200px" style="width:60px">200</button>
|
|
93022
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93023
|
+
</div>
|
|
93024
|
+
|
|
93025
|
+
<div class="anim-label">
|
|
93026
|
+
<span>
|
|
93027
|
+
<span class="bold">${out('Slide Up')}</span>:
|
|
93028
|
+
<input class="inp-slide-up" type="text" />
|
|
93029
|
+
</span>
|
|
93030
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
|
|
93031
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93032
|
+
</button>
|
|
93033
|
+
</div>
|
|
93034
|
+
<div class="flex-wrap">
|
|
93035
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="-75px" style="width:60px">75</button>
|
|
93036
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="-100px" style="width:60px">100</button>
|
|
93037
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="-125px" style="width:60px">125</button>
|
|
93038
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="-150px" style="width:60px">150</button>
|
|
93039
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="-200px" style="width:60px">200</button>
|
|
93040
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93041
|
+
</div>
|
|
93042
|
+
<div class="anim-label">
|
|
93043
|
+
<span>
|
|
93044
|
+
<span class="bold">${out('Slide Down')}</span>:
|
|
93045
|
+
<input class="inp-slide-down" type="text" />
|
|
93046
|
+
</span>
|
|
93047
|
+
<button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
|
|
93048
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93049
|
+
</button>
|
|
93050
|
+
</div>
|
|
93051
|
+
<div class="flex-wrap">
|
|
93052
|
+
<button title="75" class="cmd-slidey" data-command="slidey" data-value="75px" style="width:60px">75</button>
|
|
93053
|
+
<button title="100" class="cmd-slidey" data-command="slidey" data-value="100px" style="width:60px">100</button>
|
|
93054
|
+
<button title="125" class="cmd-slidey" data-command="slidey" data-value="125px" style="width:60px">125</button>
|
|
93055
|
+
<button title="150" class="cmd-slidey" data-command="slidey" data-value="150px" style="width:60px">150</button>
|
|
93056
|
+
<button title="200" class="cmd-slidey" data-command="slidey" data-value="200px" style="width:60px">200</button>
|
|
93057
|
+
<span style="font-size: 11px;margin-left: 9px;margin-bottom: 2px;">px</span>
|
|
93058
|
+
</div>
|
|
93059
|
+
|
|
93060
|
+
<div class="anim-label">
|
|
93061
|
+
<span>
|
|
93062
|
+
<span class="bold">${out('Scale')}</span>:
|
|
93063
|
+
<input class="inp-scale" type="text" />
|
|
93064
|
+
</span>
|
|
93065
|
+
<button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
|
|
93066
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93067
|
+
</button>
|
|
93068
|
+
</div>
|
|
93069
|
+
<div class="flex-nowrap">
|
|
93070
|
+
<button title="0.5" class="cmd-scale" data-command="scale" data-value="0.5" style="width:55px">0.5</button>
|
|
93071
|
+
<button title="0.8" class="cmd-scale" data-command="scale" data-value="0.8" style="width:55px">0.8</button>
|
|
93072
|
+
<button title="0.9" class="cmd-scale" data-command="scale" data-value="0.9" style="width:55px">0.9</button>
|
|
93073
|
+
<button title="1.1" class="cmd-scale" data-command="scale" data-value="1.1" style="width:55px">1.1</button>
|
|
93074
|
+
<button title="1.2" class="cmd-scale" data-command="scale" data-value="1.2" style="width:55px">1.2</button>
|
|
93075
|
+
<button title="2" class="cmd-scale" data-command="scale" data-value="2" style="width:55px">2</button>
|
|
93076
|
+
</div>
|
|
93077
|
+
|
|
93078
|
+
<div class="anim-label">
|
|
93079
|
+
<span>
|
|
93080
|
+
<span class="bold">${out('Rotate Clockwise')}</span>:
|
|
93081
|
+
<input class="inp-rotate-clockwise" type="text" />
|
|
93082
|
+
</span>
|
|
93083
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
|
|
93084
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93085
|
+
</button>
|
|
93086
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
|
|
93087
|
+
</div>
|
|
93088
|
+
<div class="flex-wrap">
|
|
93089
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="10" style="width:60px">10°</button>
|
|
93090
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="20" style="width:60px">20°</button>
|
|
93091
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="30" style="width:60px">30°</button>
|
|
93092
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="60" style="width:60px">60°</button>
|
|
93093
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="90" style="width:60px">90°</button>
|
|
93094
|
+
</div>
|
|
93095
|
+
<div class="anim-label">
|
|
93096
|
+
<span>
|
|
93097
|
+
<span class="bold">${out('Rotate Counterclockwise')}</span>:
|
|
93098
|
+
<input class="inp-rotate-counter" type="text" />
|
|
93099
|
+
</span>
|
|
93100
|
+
<button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
|
|
93101
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93102
|
+
</button>
|
|
93103
|
+
<!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
|
|
93104
|
+
</div>
|
|
93105
|
+
<div class="flex-wrap">
|
|
93106
|
+
<button title="10" class="cmd-rotate" data-command="rotate" data-value="-10" style="width:60px">10°</button>
|
|
93107
|
+
<button title="20" class="cmd-rotate" data-command="rotate" data-value="-20" style="width:60px">20°</button>
|
|
93108
|
+
<button title="30" class="cmd-rotate" data-command="rotate" data-value="-30" style="width:60px">30°</button>
|
|
93109
|
+
<button title="60" class="cmd-rotate" data-command="rotate" data-value="-60" style="width:60px">60°</button>
|
|
93110
|
+
<button title="90" class="cmd-rotate" data-command="rotate" data-value="-90" style="width:60px">90°</button>
|
|
93111
|
+
</div>
|
|
93112
|
+
|
|
93113
|
+
<div class="anim-label">
|
|
93114
|
+
<span class="bold">${out('Fade')}</span>:
|
|
93115
|
+
</div>
|
|
93116
|
+
<button title="${out('Fade In')}" class="cmd-fade" style="width:125px">${out('Fade Out')}</button>
|
|
93117
|
+
|
|
93118
|
+
<br>
|
|
93119
|
+
<button title="${out('Clear Animation')}" class="cmd-clear-scrollanim" style="width:195px">
|
|
93120
|
+
<svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
|
|
93121
|
+
<span style="margin-left:7px">${out('Clear Animation')}</span></button>
|
|
93122
|
+
</div>
|
|
93123
|
+
|
|
93124
|
+
<div id="divAnimSettings" class="is-tab-content" data-group="skrollanim" style="padding-top:0">
|
|
93125
|
+
|
|
93126
|
+
<div class="anim-label bold" style="margin-top:5px">${out('Enter')}:</div>
|
|
93127
|
+
|
|
93128
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93129
|
+
<div class="flex-wrap">
|
|
93130
|
+
<button title="${out('Normal')}" class="cmd-start on" data-value="data-bottom-top" style="width:80px">${out('Normal')}</button>
|
|
93131
|
+
<button title="${out('Delayed')}" class="cmd-start" data-value="data-400-bottom" style="width:80px">${out('Delayed')}</button>
|
|
93132
|
+
<button title="${out('Late')}" class="cmd-start" data-value="data-200-bottom" style="width:80px">${out('Late')}</button>
|
|
93133
|
+
<button title="${out('Very Late')}" class="cmd-start" data-value="data--50-bottom" style="width:95px">${out('Very Late')}</button>
|
|
93134
|
+
</div>
|
|
93135
|
+
|
|
93136
|
+
<div class="anim-label">${out('End')}:</div>
|
|
93137
|
+
<div class="flex-wrap">
|
|
93138
|
+
<button title="${out('Very Soon')}" class="cmd-end" data-value="data-bottom" style="width:95px">${out('Very Soon')}</button>
|
|
93139
|
+
<button title="${out('Soon')}" class="cmd-end" data-value="data-center-top" style="width:80px">${out('Soon')}</button>
|
|
93140
|
+
<button title="${out('Normal')}" class="cmd-end on" data-value="data-center" style="width:80px">${out('Normal')}</button>
|
|
93141
|
+
</div>
|
|
93142
|
+
|
|
93143
|
+
<div class="anim-label bold" style="margin-top:20px">${out('Leave')}:</div>
|
|
93144
|
+
|
|
93145
|
+
<div class="anim-label" style="padding-top:10px">${out('Start')}:</div>
|
|
93146
|
+
<div class="flex-wrap">
|
|
93147
|
+
<button title="${out('Normal')}" class="cmd-leave-start on" data-value="data-center-bottom" style="width:80px">${out('Normal')}</button>
|
|
93148
|
+
<button title="${out('Delayed')}" class="cmd-leave-start" data-value="data-100-top" style="width:80px">${out('Delayed')}</button>
|
|
93149
|
+
<button title="${out('Late')}" class="cmd-leave-start" data-value="data-50-top" style="width:80px">${out('Late')}</button>
|
|
93150
|
+
<button title="${out('Very Late')}" class="cmd-leave-start" data-value="data-top" style="width:95px">${out('Very Late')}</button>
|
|
93151
|
+
</div>
|
|
93152
|
+
</div>
|
|
93153
|
+
|
|
93154
|
+
|
|
93155
|
+
</div>
|
|
93156
|
+
|
|
93157
|
+
</div>
|
|
93158
|
+
|
|
93159
|
+
<div class="dummy-elm"></div>
|
|
93160
|
+
|
|
93161
|
+
</div>
|
|
93162
|
+
`;
|
|
93163
|
+
dom$1.appendHtml(builderStuff, html);
|
|
93164
|
+
const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
|
|
93165
|
+
this.modalAnimateScroll = modalAnimateScroll;
|
|
93166
|
+
const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
|
|
93167
|
+
this.divEnterAnim = divEnterAnim;
|
|
93168
|
+
const divLeaveAnim = modalAnimateScroll.querySelector('#divLeaveAnim');
|
|
93169
|
+
this.divLeaveAnim = divLeaveAnim;
|
|
93170
|
+
const btnClose = modalAnimateScroll.querySelector('.is-side-close');
|
|
93171
|
+
btnClose.addEventListener('click', () => {
|
|
93172
|
+
this.close();
|
|
93173
|
+
}); // Target
|
|
93174
|
+
|
|
93175
|
+
let btns = modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
93176
|
+
btns.forEach(btn => {
|
|
93177
|
+
btn.addEventListener('click', () => {
|
|
93178
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
93179
|
+
elms.forEach(elm => {
|
|
93180
|
+
elm.classList.remove('on');
|
|
93181
|
+
});
|
|
93182
|
+
btn.classList.add('on');
|
|
93183
|
+
this.read();
|
|
93184
|
+
});
|
|
93185
|
+
}); // Default
|
|
93186
|
+
|
|
93187
|
+
const btnAnimateOnce = modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
93188
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
93189
|
+
btns.forEach(btn => {
|
|
93190
|
+
btn.addEventListener('click', () => {
|
|
93191
|
+
if (btn.classList.contains('on')) {
|
|
93192
|
+
btn.classList.remove('on');
|
|
93193
|
+
btnAnimateOnce.classList.remove('on');
|
|
93194
|
+
this.applyBasic();
|
|
93195
|
+
return;
|
|
93196
|
+
}
|
|
93197
|
+
|
|
93198
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
93199
|
+
elms.forEach(elm => {
|
|
93200
|
+
elm.classList.remove('on');
|
|
93201
|
+
});
|
|
93202
|
+
btn.classList.add('on');
|
|
93203
|
+
this.applyBasic();
|
|
93204
|
+
});
|
|
93205
|
+
});
|
|
93206
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93207
|
+
btns.forEach(btn => {
|
|
93208
|
+
btn.addEventListener('click', () => {
|
|
93209
|
+
if (btn.classList.contains('on')) {
|
|
93210
|
+
btn.classList.remove('on');
|
|
93211
|
+
this.applyDelay();
|
|
93212
|
+
return;
|
|
93213
|
+
}
|
|
93214
|
+
|
|
93215
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93216
|
+
elms.forEach(elm => {
|
|
93217
|
+
elm.classList.remove('on');
|
|
93218
|
+
});
|
|
93219
|
+
btn.classList.add('on');
|
|
93220
|
+
this.applyDelay();
|
|
93221
|
+
});
|
|
93222
|
+
});
|
|
93223
|
+
let btnClearDelay = modalAnimateScroll.querySelector('.cmd-clear-delay');
|
|
93224
|
+
btnClearDelay.addEventListener('click', () => {
|
|
93225
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93226
|
+
elms.forEach(elm => {
|
|
93227
|
+
elm.classList.remove('on');
|
|
93228
|
+
});
|
|
93229
|
+
this.applyDelay();
|
|
93230
|
+
});
|
|
93231
|
+
btnAnimateOnce.addEventListener('click', () => {
|
|
93232
|
+
if (btnAnimateOnce.classList.contains('on')) {
|
|
93233
|
+
btnAnimateOnce.classList.remove('on');
|
|
93234
|
+
} else {
|
|
93235
|
+
btnAnimateOnce.classList.add('on');
|
|
93236
|
+
}
|
|
93237
|
+
|
|
93238
|
+
this.applyBasic();
|
|
93239
|
+
});
|
|
93240
|
+
let btnClearBasicAnim = modalAnimateScroll.querySelector('.cmd-clear-basicanim');
|
|
93241
|
+
btnClearBasicAnim.addEventListener('click', () => {
|
|
93242
|
+
let activeElement;
|
|
93243
|
+
let target = this.getTarget();
|
|
93244
|
+
activeElement = target.element;
|
|
93245
|
+
if (!activeElement) return;
|
|
93246
|
+
this.builder.editor.saveForUndo();
|
|
93247
|
+
this.cleanupBasic(activeElement);
|
|
93248
|
+
this.cleanupDelay(activeElement);
|
|
93249
|
+
activeElement.classList.remove('is-inview');
|
|
93250
|
+
activeElement.removeAttribute('data-scroll');
|
|
93251
|
+
this.read(); //Trigger Change event
|
|
93252
|
+
|
|
93253
|
+
this.builder.settings.onChange();
|
|
93254
|
+
}); // Start
|
|
93255
|
+
|
|
93256
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
93257
|
+
btns.forEach(btn => {
|
|
93258
|
+
btn.addEventListener('click', () => {
|
|
93259
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
93260
|
+
elms.forEach(elm => {
|
|
93261
|
+
elm.classList.remove('on');
|
|
93262
|
+
});
|
|
93263
|
+
btn.classList.add('on');
|
|
93264
|
+
this.apply();
|
|
93265
|
+
});
|
|
93266
|
+
}); // End
|
|
93267
|
+
|
|
93268
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-end');
|
|
93269
|
+
btns.forEach(btn => {
|
|
93270
|
+
btn.addEventListener('click', () => {
|
|
93271
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-end');
|
|
93272
|
+
elms.forEach(elm => {
|
|
93273
|
+
elm.classList.remove('on');
|
|
93274
|
+
});
|
|
93275
|
+
btn.classList.add('on');
|
|
93276
|
+
this.apply();
|
|
93277
|
+
});
|
|
93278
|
+
}); // Leave Start
|
|
93279
|
+
|
|
93280
|
+
btns = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
93281
|
+
btns.forEach(btn => {
|
|
93282
|
+
btn.addEventListener('click', () => {
|
|
93283
|
+
let elms = modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
93284
|
+
elms.forEach(elm => {
|
|
93285
|
+
elm.classList.remove('on');
|
|
93286
|
+
});
|
|
93287
|
+
btn.classList.add('on');
|
|
93288
|
+
this.apply();
|
|
93289
|
+
});
|
|
93290
|
+
}); // Slide X
|
|
93291
|
+
|
|
93292
|
+
btns = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93293
|
+
btns.forEach(btn => {
|
|
93294
|
+
btn.addEventListener('click', () => {
|
|
93295
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
|
|
93296
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
|
|
93297
|
+
|
|
93298
|
+
if (btn.classList.contains('on')) {
|
|
93299
|
+
btn.classList.remove('on');
|
|
93300
|
+
inpSlideLeft.value = '';
|
|
93301
|
+
inpSlideRight.value = '';
|
|
93302
|
+
this.apply();
|
|
93303
|
+
return;
|
|
93304
|
+
}
|
|
93305
|
+
|
|
93306
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93307
|
+
elms.forEach(elm => {
|
|
93308
|
+
elm.classList.remove('on');
|
|
93309
|
+
});
|
|
93310
|
+
btn.classList.add('on');
|
|
93311
|
+
|
|
93312
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93313
|
+
inpSlideLeft.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93314
|
+
inpSlideRight.value = '';
|
|
93315
|
+
} else {
|
|
93316
|
+
inpSlideRight.value = btn.getAttribute('data-value').replace('px', '');
|
|
93317
|
+
inpSlideLeft.value = '';
|
|
93318
|
+
}
|
|
93319
|
+
|
|
93320
|
+
this.apply();
|
|
93321
|
+
});
|
|
93322
|
+
});
|
|
93323
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-right');
|
|
93324
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-left');
|
|
93325
|
+
inpSlideLeft.addEventListener('change', () => {
|
|
93326
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93327
|
+
elms.forEach(elm => {
|
|
93328
|
+
elm.classList.remove('on');
|
|
93329
|
+
});
|
|
93330
|
+
inpSlideRight.value = '';
|
|
93331
|
+
this.apply();
|
|
93332
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft.value}px"]`);
|
|
93333
|
+
if (btn) btn.classList.add('on');
|
|
93334
|
+
});
|
|
93335
|
+
inpSlideRight.addEventListener('change', () => {
|
|
93336
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93337
|
+
elms.forEach(elm => {
|
|
93338
|
+
elm.classList.remove('on');
|
|
93339
|
+
});
|
|
93340
|
+
inpSlideLeft.value = '';
|
|
93341
|
+
this.apply();
|
|
93342
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight.value}px"]`);
|
|
93343
|
+
if (btn) btn.classList.add('on');
|
|
93344
|
+
}); // Slide Y
|
|
93345
|
+
|
|
93346
|
+
btns = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93347
|
+
btns.forEach(btn => {
|
|
93348
|
+
btn.addEventListener('click', () => {
|
|
93349
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93350
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
93351
|
+
|
|
93352
|
+
if (btn.classList.contains('on')) {
|
|
93353
|
+
btn.classList.remove('on');
|
|
93354
|
+
inpSlideUp.value = '';
|
|
93355
|
+
inpSlideDown.value = '';
|
|
93356
|
+
this.apply();
|
|
93357
|
+
return;
|
|
93358
|
+
}
|
|
93359
|
+
|
|
93360
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93361
|
+
elms.forEach(elm => {
|
|
93362
|
+
elm.classList.remove('on');
|
|
93363
|
+
});
|
|
93364
|
+
btn.classList.add('on');
|
|
93365
|
+
|
|
93366
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93367
|
+
inpSlideDown.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93368
|
+
inpSlideUp.value = '';
|
|
93369
|
+
} else {
|
|
93370
|
+
inpSlideUp.value = btn.getAttribute('data-value').replace('px', '');
|
|
93371
|
+
inpSlideDown.value = '';
|
|
93372
|
+
}
|
|
93373
|
+
|
|
93374
|
+
this.apply();
|
|
93375
|
+
});
|
|
93376
|
+
});
|
|
93377
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93378
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
93379
|
+
inpSlideDown.addEventListener('change', () => {
|
|
93380
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93381
|
+
elms.forEach(elm => {
|
|
93382
|
+
elm.classList.remove('on');
|
|
93383
|
+
});
|
|
93384
|
+
inpSlideUp.value = '';
|
|
93385
|
+
this.apply();
|
|
93386
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideDown.value}px"]`);
|
|
93387
|
+
if (btn) btn.classList.add('on');
|
|
93388
|
+
});
|
|
93389
|
+
inpSlideUp.addEventListener('change', () => {
|
|
93390
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93391
|
+
elms.forEach(elm => {
|
|
93392
|
+
elm.classList.remove('on');
|
|
93393
|
+
});
|
|
93394
|
+
inpSlideDown.value = '';
|
|
93395
|
+
this.apply();
|
|
93396
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${inpSlideUp.value}px"]`);
|
|
93397
|
+
if (btn) btn.classList.add('on');
|
|
93398
|
+
}); // Scale
|
|
93399
|
+
|
|
93400
|
+
btns = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93401
|
+
btns.forEach(btn => {
|
|
93402
|
+
btn.addEventListener('click', () => {
|
|
93403
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
93404
|
+
|
|
93405
|
+
if (btn.classList.contains('on')) {
|
|
93406
|
+
btn.classList.remove('on');
|
|
93407
|
+
inpScale.value = '';
|
|
93408
|
+
this.apply();
|
|
93409
|
+
return;
|
|
93410
|
+
}
|
|
93411
|
+
|
|
93412
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93413
|
+
elms.forEach(elm => {
|
|
93414
|
+
elm.classList.remove('on');
|
|
93415
|
+
});
|
|
93416
|
+
btn.classList.add('on');
|
|
93417
|
+
inpScale.value = btn.getAttribute('data-value');
|
|
93418
|
+
this.apply();
|
|
93419
|
+
});
|
|
93420
|
+
});
|
|
93421
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
93422
|
+
inpScale.addEventListener('change', () => {
|
|
93423
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93424
|
+
elms.forEach(elm => {
|
|
93425
|
+
elm.classList.remove('on');
|
|
93426
|
+
});
|
|
93427
|
+
this.apply();
|
|
93428
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${inpScale.value}"]`);
|
|
93429
|
+
if (btn) btn.classList.add('on');
|
|
93430
|
+
}); // Rotate
|
|
93431
|
+
|
|
93432
|
+
btns = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93433
|
+
btns.forEach(btn => {
|
|
93434
|
+
btn.addEventListener('click', () => {
|
|
93435
|
+
const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93436
|
+
const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93437
|
+
|
|
93438
|
+
if (btn.classList.contains('on')) {
|
|
93439
|
+
btn.classList.remove('on');
|
|
93440
|
+
inpRotateClockwise.value = '';
|
|
93441
|
+
inpRotateCounter.value = '';
|
|
93442
|
+
this.apply();
|
|
93443
|
+
return;
|
|
93444
|
+
}
|
|
93445
|
+
|
|
93446
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93447
|
+
elms.forEach(elm => {
|
|
93448
|
+
elm.classList.remove('on');
|
|
93449
|
+
});
|
|
93450
|
+
btn.classList.add('on');
|
|
93451
|
+
|
|
93452
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93453
|
+
inpRotateClockwise.value = btn.getAttribute('data-value').replace('-', '');
|
|
93454
|
+
inpRotateCounter.value = '';
|
|
93455
|
+
} else {
|
|
93456
|
+
inpRotateCounter.value = btn.getAttribute('data-value');
|
|
93457
|
+
inpRotateClockwise.value = '';
|
|
93458
|
+
}
|
|
93459
|
+
|
|
93460
|
+
this.apply();
|
|
93461
|
+
});
|
|
93462
|
+
});
|
|
93463
|
+
const inpRotateClockwise = divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93464
|
+
const inpRotateCounter = divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93465
|
+
inpRotateClockwise.addEventListener('change', () => {
|
|
93466
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93467
|
+
elms.forEach(elm => {
|
|
93468
|
+
elm.classList.remove('on');
|
|
93469
|
+
});
|
|
93470
|
+
inpRotateCounter.value = '';
|
|
93471
|
+
this.apply();
|
|
93472
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateClockwise.value}"]`);
|
|
93473
|
+
if (btn) btn.classList.add('on');
|
|
93474
|
+
});
|
|
93475
|
+
inpRotateCounter.addEventListener('change', () => {
|
|
93476
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93477
|
+
elms.forEach(elm => {
|
|
93478
|
+
elm.classList.remove('on');
|
|
93479
|
+
});
|
|
93480
|
+
inpRotateClockwise.value = '';
|
|
93481
|
+
this.apply();
|
|
93482
|
+
let btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${inpRotateCounter.value}"]`);
|
|
93483
|
+
if (btn) btn.classList.add('on');
|
|
93484
|
+
}); // Fade
|
|
93485
|
+
|
|
93486
|
+
let btnFade = divEnterAnim.querySelector('.cmd-fade');
|
|
93487
|
+
btnFade.addEventListener('click', () => {
|
|
93488
|
+
if (btnFade.classList.contains('on')) {
|
|
93489
|
+
btnFade.classList.remove('on');
|
|
93490
|
+
} else {
|
|
93491
|
+
btnFade.classList.add('on');
|
|
93492
|
+
}
|
|
93493
|
+
|
|
93494
|
+
this.apply();
|
|
93495
|
+
}); // Clear
|
|
93496
|
+
|
|
93497
|
+
let btnClearSlideLeft = divEnterAnim.querySelector('.cmd-clear-slide-left');
|
|
93498
|
+
btnClearSlideLeft.addEventListener('click', () => {
|
|
93499
|
+
const inpSlideLeft = divEnterAnim.querySelector('.inp-slide-left');
|
|
93500
|
+
if (inpSlideLeft.value === '') return;
|
|
93501
|
+
this.builder.editor.saveForUndo();
|
|
93502
|
+
inpSlideLeft.value = '';
|
|
93503
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93504
|
+
elms.forEach(elm => {
|
|
93505
|
+
elm.classList.remove('on');
|
|
93506
|
+
});
|
|
93507
|
+
this.apply(); //Trigger Change event
|
|
93508
|
+
|
|
93509
|
+
this.builder.settings.onChange();
|
|
93510
|
+
});
|
|
93511
|
+
let btnClearSlideRight = divEnterAnim.querySelector('.cmd-clear-slide-right');
|
|
93512
|
+
btnClearSlideRight.addEventListener('click', () => {
|
|
93513
|
+
const inpSlideRight = divEnterAnim.querySelector('.inp-slide-right');
|
|
93514
|
+
if (inpSlideRight.value === '') return;
|
|
93515
|
+
this.builder.editor.saveForUndo();
|
|
93516
|
+
inpSlideRight.value = '';
|
|
93517
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
93518
|
+
elms.forEach(elm => {
|
|
93519
|
+
elm.classList.remove('on');
|
|
93520
|
+
});
|
|
93521
|
+
this.apply(); //Trigger Change event
|
|
93522
|
+
|
|
93523
|
+
this.builder.settings.onChange();
|
|
93524
|
+
});
|
|
93525
|
+
let btnClearSlideUp = divEnterAnim.querySelector('.cmd-clear-slide-up');
|
|
93526
|
+
btnClearSlideUp.addEventListener('click', () => {
|
|
93527
|
+
const inpSlideUp = divEnterAnim.querySelector('.inp-slide-up');
|
|
93528
|
+
if (inpSlideUp.value === '') return;
|
|
93529
|
+
this.builder.editor.saveForUndo();
|
|
93530
|
+
inpSlideUp.value = '';
|
|
93531
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93532
|
+
elms.forEach(elm => {
|
|
93533
|
+
elm.classList.remove('on');
|
|
93534
|
+
});
|
|
93535
|
+
this.apply(); //Trigger Change event
|
|
93536
|
+
|
|
93537
|
+
this.builder.settings.onChange();
|
|
93538
|
+
});
|
|
93539
|
+
let btnClearSlideDown = divEnterAnim.querySelector('.cmd-clear-slide-down');
|
|
93540
|
+
btnClearSlideDown.addEventListener('click', () => {
|
|
93541
|
+
const inpSlideDown = divEnterAnim.querySelector('.inp-slide-down');
|
|
93542
|
+
if (inpSlideDown.value === '') return;
|
|
93543
|
+
this.builder.editor.saveForUndo();
|
|
93544
|
+
inpSlideDown.value = '';
|
|
93545
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
93546
|
+
elms.forEach(elm => {
|
|
93547
|
+
elm.classList.remove('on');
|
|
93548
|
+
});
|
|
93549
|
+
this.apply(); //Trigger Change event
|
|
93550
|
+
|
|
93551
|
+
this.builder.settings.onChange();
|
|
93552
|
+
});
|
|
93553
|
+
let btnClearScale = divEnterAnim.querySelector('.cmd-clear-scale');
|
|
93554
|
+
btnClearScale.addEventListener('click', () => {
|
|
93555
|
+
this.builder.editor.saveForUndo();
|
|
93556
|
+
const inpScale = divEnterAnim.querySelector('.inp-scale');
|
|
93557
|
+
inpScale.value = '';
|
|
93558
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-scale');
|
|
93559
|
+
elms.forEach(elm => {
|
|
93560
|
+
elm.classList.remove('on');
|
|
93561
|
+
});
|
|
93562
|
+
this.apply(); //Trigger Change event
|
|
93563
|
+
|
|
93564
|
+
this.builder.settings.onChange();
|
|
93565
|
+
});
|
|
93566
|
+
let btnClearRotateClockwise = divEnterAnim.querySelector('.cmd-clear-rotate-clockwise');
|
|
93567
|
+
btnClearRotateClockwise.addEventListener('click', () => {
|
|
93568
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
93569
|
+
if (inpRotateCounter.value === '') return;
|
|
93570
|
+
this.builder.editor.saveForUndo();
|
|
93571
|
+
inpRotateCounter.value = '';
|
|
93572
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93573
|
+
elms.forEach(elm => {
|
|
93574
|
+
elm.classList.remove('on');
|
|
93575
|
+
});
|
|
93576
|
+
this.apply(); //Trigger Change event
|
|
93577
|
+
|
|
93578
|
+
this.builder.settings.onChange();
|
|
93579
|
+
});
|
|
93580
|
+
let btnClearRotateCounter = divEnterAnim.querySelector('.cmd-clear-rotate-counter');
|
|
93581
|
+
btnClearRotateCounter.addEventListener('click', () => {
|
|
93582
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
93583
|
+
if (inpRotateClockwise.value === '') return;
|
|
93584
|
+
this.builder.editor.saveForUndo();
|
|
93585
|
+
inpRotateClockwise.value = '';
|
|
93586
|
+
let elms = divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
93587
|
+
elms.forEach(elm => {
|
|
93588
|
+
elm.classList.remove('on');
|
|
93589
|
+
});
|
|
93590
|
+
this.apply(); //Trigger Change event
|
|
93591
|
+
|
|
93592
|
+
this.builder.settings.onChange();
|
|
93593
|
+
});
|
|
93594
|
+
let btnClear = divEnterAnim.querySelector('.cmd-clear-scrollanim');
|
|
93595
|
+
btnClear.addEventListener('click', () => {
|
|
93596
|
+
let activeElement;
|
|
93597
|
+
let target = this.getTarget();
|
|
93598
|
+
activeElement = target.element;
|
|
93599
|
+
if (!activeElement) return;
|
|
93600
|
+
this.builder.editor.saveForUndo();
|
|
93601
|
+
this.cleanup(activeElement);
|
|
93602
|
+
this.read();
|
|
93603
|
+
activeElement.style.transform = '';
|
|
93604
|
+
activeElement.style.transition = '';
|
|
93605
|
+
activeElement.style.opacity = '';
|
|
93606
|
+
|
|
93607
|
+
if (this.builder.win.skrollrr) {
|
|
93608
|
+
this.builder.win.skrollrr.refresh();
|
|
93609
|
+
} //Trigger Change event
|
|
93610
|
+
|
|
93611
|
+
|
|
93612
|
+
this.builder.settings.onChange();
|
|
93613
|
+
}); // ------------- LEAVE --------------
|
|
93614
|
+
// Slide X
|
|
93615
|
+
|
|
93616
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93617
|
+
btns.forEach(btn => {
|
|
93618
|
+
btn.addEventListener('click', () => {
|
|
93619
|
+
const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93620
|
+
const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93621
|
+
|
|
93622
|
+
if (btn.classList.contains('on')) {
|
|
93623
|
+
btn.classList.remove('on');
|
|
93624
|
+
inpSlideLeft_leave.value = '';
|
|
93625
|
+
inpSlideRight_leave.value = '';
|
|
93626
|
+
this.apply();
|
|
93627
|
+
return;
|
|
93628
|
+
}
|
|
93629
|
+
|
|
93630
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93631
|
+
elms.forEach(elm => {
|
|
93632
|
+
elm.classList.remove('on');
|
|
93633
|
+
});
|
|
93634
|
+
btn.classList.add('on');
|
|
93635
|
+
|
|
93636
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93637
|
+
inpSlideLeft_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93638
|
+
inpSlideRight_leave.value = '';
|
|
93639
|
+
} else {
|
|
93640
|
+
inpSlideRight_leave.value = btn.getAttribute('data-value').replace('px', '');
|
|
93641
|
+
inpSlideLeft_leave.value = '';
|
|
93642
|
+
}
|
|
93643
|
+
|
|
93644
|
+
this.apply();
|
|
93645
|
+
});
|
|
93646
|
+
});
|
|
93647
|
+
const inpSlideLeft_leave = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93648
|
+
const inpSlideRight_leave = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93649
|
+
inpSlideLeft_leave.addEventListener('change', () => {
|
|
93650
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93651
|
+
elms.forEach(elm => {
|
|
93652
|
+
elm.classList.remove('on');
|
|
93653
|
+
});
|
|
93654
|
+
inpSlideRight_leave.value = '';
|
|
93655
|
+
this.apply();
|
|
93656
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="-${inpSlideLeft_leave.value}px"]`);
|
|
93657
|
+
if (btn) btn.classList.add('on');
|
|
93658
|
+
});
|
|
93659
|
+
inpSlideRight_leave.addEventListener('change', () => {
|
|
93660
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93661
|
+
elms.forEach(elm => {
|
|
93662
|
+
elm.classList.remove('on');
|
|
93663
|
+
});
|
|
93664
|
+
inpSlideLeft_leave.value = '';
|
|
93665
|
+
this.apply();
|
|
93666
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${inpSlideRight_leave.value}px"]`);
|
|
93667
|
+
if (btn) btn.classList.add('on');
|
|
93668
|
+
}); // Slide Y
|
|
93669
|
+
|
|
93670
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93671
|
+
btns.forEach(btn => {
|
|
93672
|
+
btn.addEventListener('click', () => {
|
|
93673
|
+
const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93674
|
+
const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93675
|
+
|
|
93676
|
+
if (btn.classList.contains('on')) {
|
|
93677
|
+
btn.classList.remove('on');
|
|
93678
|
+
inpSlideUp_leave.value = '';
|
|
93679
|
+
inpSlideDown_leave.value = '';
|
|
93680
|
+
this.apply();
|
|
93681
|
+
return;
|
|
93682
|
+
}
|
|
93683
|
+
|
|
93684
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93685
|
+
elms.forEach(elm => {
|
|
93686
|
+
elm.classList.remove('on');
|
|
93687
|
+
});
|
|
93688
|
+
btn.classList.add('on');
|
|
93689
|
+
|
|
93690
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93691
|
+
inpSlideUp_leave.value = btn.getAttribute('data-value').replace('-', '').replace('px', '');
|
|
93692
|
+
inpSlideDown_leave.value = '';
|
|
93693
|
+
} else {
|
|
93694
|
+
inpSlideDown_leave.value = btn.getAttribute('data-value').replace('px', '');
|
|
93695
|
+
inpSlideUp_leave.value = '';
|
|
93696
|
+
}
|
|
93697
|
+
|
|
93698
|
+
this.apply();
|
|
93699
|
+
});
|
|
93700
|
+
});
|
|
93701
|
+
const inpSlideUp_leave = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93702
|
+
const inpSlideDown_leave = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93703
|
+
inpSlideDown_leave.addEventListener('change', () => {
|
|
93704
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93705
|
+
elms.forEach(elm => {
|
|
93706
|
+
elm.classList.remove('on');
|
|
93707
|
+
});
|
|
93708
|
+
inpSlideUp_leave.value = '';
|
|
93709
|
+
this.apply();
|
|
93710
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${inpSlideDown_leave.value}px"]`);
|
|
93711
|
+
if (btn) btn.classList.add('on');
|
|
93712
|
+
});
|
|
93713
|
+
inpSlideUp_leave.addEventListener('change', () => {
|
|
93714
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93715
|
+
elms.forEach(elm => {
|
|
93716
|
+
elm.classList.remove('on');
|
|
93717
|
+
});
|
|
93718
|
+
inpSlideDown_leave.value = '';
|
|
93719
|
+
this.apply();
|
|
93720
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="-${inpSlideUp_leave.value}px"]`);
|
|
93721
|
+
if (btn) btn.classList.add('on');
|
|
93722
|
+
}); // Scale
|
|
93723
|
+
|
|
93724
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93725
|
+
btns.forEach(btn => {
|
|
93726
|
+
btn.addEventListener('click', () => {
|
|
93727
|
+
const inpScale = divLeaveAnim.querySelector('.inp-scale');
|
|
93728
|
+
|
|
93729
|
+
if (btn.classList.contains('on')) {
|
|
93730
|
+
btn.classList.remove('on');
|
|
93731
|
+
inpScale.value = '';
|
|
93732
|
+
this.apply();
|
|
93733
|
+
return;
|
|
93734
|
+
}
|
|
93735
|
+
|
|
93736
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93737
|
+
elms.forEach(elm => {
|
|
93738
|
+
elm.classList.remove('on');
|
|
93739
|
+
});
|
|
93740
|
+
btn.classList.add('on');
|
|
93741
|
+
inpScale.value = btn.getAttribute('data-value');
|
|
93742
|
+
this.apply();
|
|
93743
|
+
});
|
|
93744
|
+
});
|
|
93745
|
+
const inpScale_leave = divLeaveAnim.querySelector('.inp-scale');
|
|
93746
|
+
inpScale_leave.addEventListener('change', () => {
|
|
93747
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93748
|
+
elms.forEach(elm => {
|
|
93749
|
+
elm.classList.remove('on');
|
|
93750
|
+
});
|
|
93751
|
+
this.apply();
|
|
93752
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${inpScale_leave.value}"]`);
|
|
93753
|
+
if (btn) btn.classList.add('on');
|
|
93754
|
+
}); // Rotate
|
|
93755
|
+
|
|
93756
|
+
btns = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93757
|
+
btns.forEach(btn => {
|
|
93758
|
+
btn.addEventListener('click', () => {
|
|
93759
|
+
const inpRotateClockwise = divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93760
|
+
const inpRotateCounter = divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
93761
|
+
|
|
93762
|
+
if (btn.classList.contains('on')) {
|
|
93763
|
+
btn.classList.remove('on');
|
|
93764
|
+
inpRotateClockwise.value = '';
|
|
93765
|
+
inpRotateCounter.value = '';
|
|
93766
|
+
this.apply();
|
|
93767
|
+
return;
|
|
93768
|
+
}
|
|
93769
|
+
|
|
93770
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93771
|
+
elms.forEach(elm => {
|
|
93772
|
+
elm.classList.remove('on');
|
|
93773
|
+
});
|
|
93774
|
+
btn.classList.add('on');
|
|
93775
|
+
|
|
93776
|
+
if (btn.getAttribute('data-value').indexOf('-') !== -1) {
|
|
93777
|
+
inpRotateCounter.value = btn.getAttribute('data-value').replace('-', '');
|
|
93778
|
+
inpRotateClockwise.value = '';
|
|
93779
|
+
} else {
|
|
93780
|
+
inpRotateClockwise.value = btn.getAttribute('data-value');
|
|
93781
|
+
inpRotateCounter.value = '';
|
|
93782
|
+
}
|
|
93783
|
+
|
|
93784
|
+
this.apply();
|
|
93785
|
+
});
|
|
93786
|
+
});
|
|
93787
|
+
const inpRotateClockwise_leave = divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93788
|
+
const inpRotateCounter_leave = divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
93789
|
+
inpRotateClockwise_leave.addEventListener('change', () => {
|
|
93790
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93791
|
+
elms.forEach(elm => {
|
|
93792
|
+
elm.classList.remove('on');
|
|
93793
|
+
});
|
|
93794
|
+
inpRotateCounter_leave.value = '';
|
|
93795
|
+
this.apply();
|
|
93796
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${inpRotateClockwise_leave.value}"]`);
|
|
93797
|
+
if (btn) btn.classList.add('on');
|
|
93798
|
+
});
|
|
93799
|
+
inpRotateCounter_leave.addEventListener('change', () => {
|
|
93800
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93801
|
+
elms.forEach(elm => {
|
|
93802
|
+
elm.classList.remove('on');
|
|
93803
|
+
});
|
|
93804
|
+
inpRotateClockwise_leave.value = '';
|
|
93805
|
+
this.apply();
|
|
93806
|
+
let btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="-${inpRotateCounter_leave.value}"]`);
|
|
93807
|
+
if (btn) btn.classList.add('on');
|
|
93808
|
+
}); // Fade
|
|
93809
|
+
|
|
93810
|
+
let btnFade_leave = divLeaveAnim.querySelector('.cmd-fade');
|
|
93811
|
+
btnFade_leave.addEventListener('click', () => {
|
|
93812
|
+
if (btnFade_leave.classList.contains('on')) {
|
|
93813
|
+
btnFade_leave.classList.remove('on');
|
|
93814
|
+
} else {
|
|
93815
|
+
btnFade_leave.classList.add('on');
|
|
93816
|
+
}
|
|
93817
|
+
|
|
93818
|
+
this.apply();
|
|
93819
|
+
}); // Clear
|
|
93820
|
+
|
|
93821
|
+
let btnClearSlideLeft_leave = divLeaveAnim.querySelector('.cmd-clear-slide-left');
|
|
93822
|
+
btnClearSlideLeft_leave.addEventListener('click', () => {
|
|
93823
|
+
const inpSlideLeft = divLeaveAnim.querySelector('.inp-slide-left');
|
|
93824
|
+
if (inpSlideLeft.value === '') return;
|
|
93825
|
+
this.builder.editor.saveForUndo();
|
|
93826
|
+
inpSlideLeft.value = '';
|
|
93827
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93828
|
+
elms.forEach(elm => {
|
|
93829
|
+
elm.classList.remove('on');
|
|
93830
|
+
});
|
|
93831
|
+
this.apply(); //Trigger Change event
|
|
93832
|
+
|
|
93833
|
+
this.builder.settings.onChange();
|
|
93834
|
+
});
|
|
93835
|
+
let btnClearSlideRight_leave = divLeaveAnim.querySelector('.cmd-clear-slide-right');
|
|
93836
|
+
btnClearSlideRight_leave.addEventListener('click', () => {
|
|
93837
|
+
const inpSlideRight = divLeaveAnim.querySelector('.inp-slide-right');
|
|
93838
|
+
if (inpSlideRight.value === '') return;
|
|
93839
|
+
this.builder.editor.saveForUndo();
|
|
93840
|
+
inpSlideRight.value = '';
|
|
93841
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
93842
|
+
elms.forEach(elm => {
|
|
93843
|
+
elm.classList.remove('on');
|
|
93844
|
+
});
|
|
93845
|
+
this.apply(); //Trigger Change event
|
|
93846
|
+
|
|
93847
|
+
this.builder.settings.onChange();
|
|
93848
|
+
});
|
|
93849
|
+
let btnClearSlideUp_leave = divLeaveAnim.querySelector('.cmd-clear-slide-up');
|
|
93850
|
+
btnClearSlideUp_leave.addEventListener('click', () => {
|
|
93851
|
+
const inpSlideUp = divLeaveAnim.querySelector('.inp-slide-up');
|
|
93852
|
+
if (inpSlideUp.value === '') return;
|
|
93853
|
+
this.builder.editor.saveForUndo();
|
|
93854
|
+
inpSlideUp.value = '';
|
|
93855
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93856
|
+
elms.forEach(elm => {
|
|
93857
|
+
elm.classList.remove('on');
|
|
93858
|
+
});
|
|
93859
|
+
this.apply(); //Trigger Change event
|
|
93860
|
+
|
|
93861
|
+
this.builder.settings.onChange();
|
|
93862
|
+
});
|
|
93863
|
+
let btnClearSlideDown_leave = divLeaveAnim.querySelector('.cmd-clear-slide-down');
|
|
93864
|
+
btnClearSlideDown_leave.addEventListener('click', () => {
|
|
93865
|
+
const inpSlideDown = divLeaveAnim.querySelector('.inp-slide-down');
|
|
93866
|
+
if (inpSlideDown.value === '') return;
|
|
93867
|
+
this.builder.editor.saveForUndo();
|
|
93868
|
+
inpSlideDown.value = '';
|
|
93869
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
93870
|
+
elms.forEach(elm => {
|
|
93871
|
+
elm.classList.remove('on');
|
|
93872
|
+
});
|
|
93873
|
+
this.apply(); //Trigger Change event
|
|
93874
|
+
|
|
93875
|
+
this.builder.settings.onChange();
|
|
93876
|
+
});
|
|
93877
|
+
let btnClearScale_leave = divLeaveAnim.querySelector('.cmd-clear-scale');
|
|
93878
|
+
btnClearScale_leave.addEventListener('click', () => {
|
|
93879
|
+
this.builder.editor.saveForUndo();
|
|
93880
|
+
const inpScale = divLeaveAnim.querySelector('.inp-scale');
|
|
93881
|
+
inpScale.value = '';
|
|
93882
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
93883
|
+
elms.forEach(elm => {
|
|
93884
|
+
elm.classList.remove('on');
|
|
93885
|
+
});
|
|
93886
|
+
this.apply(); //Trigger Change event
|
|
93887
|
+
|
|
93888
|
+
this.builder.settings.onChange();
|
|
93889
|
+
});
|
|
93890
|
+
let btnClearRotateClockwise_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-clockwise');
|
|
93891
|
+
btnClearRotateClockwise_leave.addEventListener('click', () => {
|
|
93892
|
+
const inpRotateCounter = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
93893
|
+
if (inpRotateCounter.value === '') return;
|
|
93894
|
+
this.builder.editor.saveForUndo();
|
|
93895
|
+
inpRotateCounter.value = '';
|
|
93896
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93897
|
+
elms.forEach(elm => {
|
|
93898
|
+
elm.classList.remove('on');
|
|
93899
|
+
});
|
|
93900
|
+
this.apply(); //Trigger Change event
|
|
93901
|
+
|
|
93902
|
+
this.builder.settings.onChange();
|
|
93903
|
+
});
|
|
93904
|
+
let btnClearRotateCounter_leave = divLeaveAnim.querySelector('.cmd-clear-rotate-counter');
|
|
93905
|
+
btnClearRotateCounter_leave.addEventListener('click', () => {
|
|
93906
|
+
const inpRotateClockwise = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
93907
|
+
if (inpRotateClockwise.value === '') return;
|
|
93908
|
+
this.builder.editor.saveForUndo();
|
|
93909
|
+
inpRotateClockwise.value = '';
|
|
93910
|
+
let elms = divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
93911
|
+
elms.forEach(elm => {
|
|
93912
|
+
elm.classList.remove('on');
|
|
93913
|
+
});
|
|
93914
|
+
this.apply(); //Trigger Change event
|
|
93915
|
+
|
|
93916
|
+
this.builder.settings.onChange();
|
|
93917
|
+
});
|
|
93918
|
+
let btnClear_leave = divLeaveAnim.querySelector('.cmd-clear-scrollanim');
|
|
93919
|
+
btnClear_leave.addEventListener('click', () => {
|
|
93920
|
+
let activeElement;
|
|
93921
|
+
let target = this.getTarget();
|
|
93922
|
+
activeElement = target.element;
|
|
93923
|
+
if (!activeElement) return;
|
|
93924
|
+
this.builder.editor.saveForUndo();
|
|
93925
|
+
this.cleanup_leave(activeElement);
|
|
93926
|
+
this.read();
|
|
93927
|
+
activeElement.style.transform = '';
|
|
93928
|
+
activeElement.style.transition = '';
|
|
93929
|
+
activeElement.style.opacity = '';
|
|
93930
|
+
|
|
93931
|
+
if (this.builder.win.skrollrr) {
|
|
93932
|
+
this.builder.win.skrollrr.refresh();
|
|
93933
|
+
} //Trigger Change event
|
|
93934
|
+
|
|
93935
|
+
|
|
93936
|
+
this.builder.settings.onChange();
|
|
93937
|
+
}); // ---
|
|
93938
|
+
//Extend onContentClick
|
|
93939
|
+
|
|
93940
|
+
let old = this.builder.settings.onContentClick;
|
|
93941
|
+
|
|
93942
|
+
this.builder.settings.onContentClick = () => {
|
|
93943
|
+
if (old) old.call(this); // call user's defined onRender
|
|
93944
|
+
|
|
93945
|
+
if (!this.modalAnimateScroll.classList.contains('active')) return;
|
|
93946
|
+
setTimeout(() => {
|
|
93947
|
+
this.clickContent();
|
|
93948
|
+
}, 30);
|
|
93949
|
+
};
|
|
93950
|
+
}
|
|
93951
|
+
|
|
93952
|
+
clickContent() {
|
|
93953
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
93954
|
+
elms.forEach(elm => {
|
|
93955
|
+
elm.classList.remove('on');
|
|
93956
|
+
}); // Dynamically choose target based on selected element
|
|
93957
|
+
|
|
93958
|
+
let currentTarget = this.readTarget();
|
|
93959
|
+
|
|
93960
|
+
if (currentTarget) {
|
|
93961
|
+
if (currentTarget.name === 'element' || currentTarget.name === 'inspectedElement') {
|
|
93962
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
|
|
93963
|
+
btn.classList.add('on');
|
|
93964
|
+
} else if (currentTarget.name === 'column') {
|
|
93965
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=column]');
|
|
93966
|
+
btn.classList.add('on');
|
|
93967
|
+
} else if (currentTarget.name === 'row') {
|
|
93968
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=row]');
|
|
93969
|
+
btn.classList.add('on');
|
|
93970
|
+
} else if (currentTarget.name === 'container') {
|
|
93971
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=container]');
|
|
93972
|
+
btn.classList.add('on');
|
|
93973
|
+
}
|
|
93974
|
+
} else {
|
|
93975
|
+
// no animation on the selected element
|
|
93976
|
+
const btn = this.modalAnimateScroll.querySelector('.cmd-target[data-value=element]');
|
|
93977
|
+
btn.classList.add('on');
|
|
93978
|
+
}
|
|
93979
|
+
|
|
93980
|
+
this.read();
|
|
93981
|
+
}
|
|
93982
|
+
|
|
93983
|
+
clearSettings() {
|
|
93984
|
+
let elms;
|
|
93985
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
93986
|
+
elms.forEach(elm => {
|
|
93987
|
+
elm.classList.remove('on');
|
|
93988
|
+
});
|
|
93989
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
93990
|
+
elms.forEach(elm => {
|
|
93991
|
+
elm.classList.remove('on');
|
|
93992
|
+
});
|
|
93993
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
93994
|
+
elms.forEach(elm => {
|
|
93995
|
+
elm.classList.remove('on');
|
|
93996
|
+
});
|
|
93997
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-end');
|
|
93998
|
+
elms.forEach(elm => {
|
|
93999
|
+
elm.classList.remove('on');
|
|
94000
|
+
});
|
|
94001
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
94002
|
+
elms.forEach(elm => {
|
|
94003
|
+
elm.classList.remove('on');
|
|
94004
|
+
}); // ---
|
|
94005
|
+
|
|
94006
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
94007
|
+
elms.forEach(elm => {
|
|
94008
|
+
elm.classList.remove('on');
|
|
94009
|
+
});
|
|
94010
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
94011
|
+
elms.forEach(elm => {
|
|
94012
|
+
elm.classList.remove('on');
|
|
94013
|
+
});
|
|
94014
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
|
|
94015
|
+
elms.forEach(elm => {
|
|
94016
|
+
elm.classList.remove('on');
|
|
94017
|
+
});
|
|
94018
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
94019
|
+
elms.forEach(elm => {
|
|
94020
|
+
elm.classList.remove('on');
|
|
94021
|
+
});
|
|
94022
|
+
let btn = this.divEnterAnim.querySelector('.cmd-fade');
|
|
94023
|
+
btn.classList.remove('on'); // --- LEAVE ---
|
|
94024
|
+
|
|
94025
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
94026
|
+
elms.forEach(elm => {
|
|
94027
|
+
elm.classList.remove('on');
|
|
94028
|
+
});
|
|
94029
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
94030
|
+
elms.forEach(elm => {
|
|
94031
|
+
elm.classList.remove('on');
|
|
94032
|
+
});
|
|
94033
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
94034
|
+
elms.forEach(elm => {
|
|
94035
|
+
elm.classList.remove('on');
|
|
94036
|
+
});
|
|
94037
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
94038
|
+
elms.forEach(elm => {
|
|
94039
|
+
elm.classList.remove('on');
|
|
94040
|
+
});
|
|
94041
|
+
btn = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94042
|
+
btn.classList.remove('on'); // ---
|
|
94043
|
+
|
|
94044
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94045
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
94046
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94047
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
94048
|
+
inpSlideLeft.value = '';
|
|
94049
|
+
inpSlideRight.value = '';
|
|
94050
|
+
inpSlideUp.value = '';
|
|
94051
|
+
inpSlideDown.value = '';
|
|
94052
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
94053
|
+
inpScale.value = '';
|
|
94054
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
94055
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
94056
|
+
inpRotateCounter.value = '';
|
|
94057
|
+
inpRotateClockwise.value = '';
|
|
94058
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94059
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94060
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94061
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94062
|
+
inpSlideLeft_leave.value = '';
|
|
94063
|
+
inpSlideRight_leave.value = '';
|
|
94064
|
+
inpSlideUp_leave.value = '';
|
|
94065
|
+
inpSlideDown_leave.value = '';
|
|
94066
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94067
|
+
inpScale_leave.value = '';
|
|
94068
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94069
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94070
|
+
inpRotateCounter_leave.value = '';
|
|
94071
|
+
inpRotateClockwise_leave.value = '';
|
|
94072
|
+
}
|
|
94073
|
+
|
|
94074
|
+
read() {
|
|
94075
|
+
// clear
|
|
94076
|
+
this.clearSettings();
|
|
94077
|
+
let activeElement;
|
|
94078
|
+
let target = this.getTarget();
|
|
94079
|
+
activeElement = target.element;
|
|
94080
|
+
if (!activeElement) return; // Default
|
|
94081
|
+
|
|
94082
|
+
let btnBasic;
|
|
94083
|
+
if (activeElement.classList.contains('is-fadeIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeIn"]');
|
|
94084
|
+
if (activeElement.classList.contains('is-fadeInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInUp"]');
|
|
94085
|
+
if (activeElement.classList.contains('is-fadeInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInDown"]');
|
|
94086
|
+
if (activeElement.classList.contains('is-fadeInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInLeft"]');
|
|
94087
|
+
if (activeElement.classList.contains('is-fadeInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-fadeInRight"]');
|
|
94088
|
+
if (activeElement.classList.contains('is-zoomIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomIn"]');
|
|
94089
|
+
if (activeElement.classList.contains('is-zoomOut')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-zoomOut"]');
|
|
94090
|
+
if (activeElement.classList.contains('is-slideInUp')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInUp"]');
|
|
94091
|
+
if (activeElement.classList.contains('is-slideInDown')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInDown"]');
|
|
94092
|
+
if (activeElement.classList.contains('is-slideInLeft')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInLeft"]');
|
|
94093
|
+
if (activeElement.classList.contains('is-slideInRight')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-slideInRight"]');
|
|
94094
|
+
if (activeElement.classList.contains('is-flipInX')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInX"]');
|
|
94095
|
+
if (activeElement.classList.contains('is-flipInY')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-flipInY"]');
|
|
94096
|
+
if (activeElement.classList.contains('is-pulse')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-pulse"]');
|
|
94097
|
+
if (activeElement.classList.contains('is-bounceIn')) btnBasic = this.modalAnimateScroll.querySelector('.cmd-basic-anim[data-value="is-bounceIn"]');
|
|
94098
|
+
if (btnBasic) btnBasic.classList.add('on');
|
|
94099
|
+
let btnDelay;
|
|
94100
|
+
if (activeElement.classList.contains('delay-0ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-0ms"]');
|
|
94101
|
+
if (activeElement.classList.contains('delay-100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-100ms"]');
|
|
94102
|
+
if (activeElement.classList.contains('delay-200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-200ms"]');
|
|
94103
|
+
if (activeElement.classList.contains('delay-300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-300ms"]');
|
|
94104
|
+
if (activeElement.classList.contains('delay-400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-400ms"]');
|
|
94105
|
+
if (activeElement.classList.contains('delay-500ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-500ms"]');
|
|
94106
|
+
if (activeElement.classList.contains('delay-600ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-600ms"]');
|
|
94107
|
+
if (activeElement.classList.contains('delay-700ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-700ms"]');
|
|
94108
|
+
if (activeElement.classList.contains('delay-800ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-800ms"]');
|
|
94109
|
+
if (activeElement.classList.contains('delay-900ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-900ms"]');
|
|
94110
|
+
if (activeElement.classList.contains('delay-1000ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1000ms"]');
|
|
94111
|
+
if (activeElement.classList.contains('delay-1100ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1100ms"]');
|
|
94112
|
+
if (activeElement.classList.contains('delay-1200ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1200ms"]');
|
|
94113
|
+
if (activeElement.classList.contains('delay-1300ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1300ms"]');
|
|
94114
|
+
if (activeElement.classList.contains('delay-1400ms')) btnDelay = this.modalAnimateScroll.querySelector('.cmd-basic-delay[data-value="delay-1400ms"]');
|
|
94115
|
+
if (btnDelay) btnDelay.classList.add('on');
|
|
94116
|
+
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94117
|
+
if (activeElement.classList.contains('once')) btnAnimateOnce.classList.add('on');else btnAnimateOnce.classList.remove('on'); // enter start
|
|
94118
|
+
|
|
94119
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94120
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
94121
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
94122
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94123
|
+
|
|
94124
|
+
let css2 = activeElement.getAttribute('data-top-bottom');
|
|
94125
|
+
let btn;
|
|
94126
|
+
|
|
94127
|
+
if (activeElement.hasAttribute('data-bottom-top')) {
|
|
94128
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
94129
|
+
if (btn) btn.classList.add('on');
|
|
94130
|
+
}
|
|
94131
|
+
|
|
94132
|
+
if (activeElement.hasAttribute('data-400-bottom')) {
|
|
94133
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-400-bottom"]');
|
|
94134
|
+
if (btn) btn.classList.add('on');
|
|
94135
|
+
}
|
|
94136
|
+
|
|
94137
|
+
if (activeElement.hasAttribute('data-200-bottom')) {
|
|
94138
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-200-bottom"]');
|
|
94139
|
+
if (btn) btn.classList.add('on');
|
|
94140
|
+
}
|
|
94141
|
+
|
|
94142
|
+
if (activeElement.hasAttribute('data--50-bottom')) {
|
|
94143
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data--50-bottom"]');
|
|
94144
|
+
if (btn) btn.classList.add('on');
|
|
94145
|
+
}
|
|
94146
|
+
|
|
94147
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-start.on')) {
|
|
94148
|
+
// default
|
|
94149
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-start[data-value="data-bottom-top"]');
|
|
94150
|
+
if (btn) btn.classList.add('on');
|
|
94151
|
+
}
|
|
94152
|
+
|
|
94153
|
+
if (activeElement.hasAttribute('data-bottom')) {
|
|
94154
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-bottom"]');
|
|
94155
|
+
if (btn) btn.classList.add('on');
|
|
94156
|
+
}
|
|
94157
|
+
|
|
94158
|
+
if (activeElement.hasAttribute('data-center-top')) {
|
|
94159
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center-top"]');
|
|
94160
|
+
if (btn) btn.classList.add('on');
|
|
94161
|
+
}
|
|
94162
|
+
|
|
94163
|
+
if (activeElement.hasAttribute('data-center')) {
|
|
94164
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
94165
|
+
if (btn) btn.classList.add('on');
|
|
94166
|
+
}
|
|
94167
|
+
|
|
94168
|
+
if (activeElement.hasAttribute('data-top-bottom')) {
|
|
94169
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-top-bottom"]');
|
|
94170
|
+
if (btn) btn.classList.add('on');
|
|
94171
|
+
}
|
|
94172
|
+
|
|
94173
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-end.on')) {
|
|
94174
|
+
// default
|
|
94175
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-end[data-value="data-center"]');
|
|
94176
|
+
if (btn) btn.classList.add('on');
|
|
94177
|
+
}
|
|
94178
|
+
|
|
94179
|
+
let dummyElm = document.querySelector('.dummy-elm');
|
|
94180
|
+
dummyElm.style.cssText = css1;
|
|
94181
|
+
let transform = this.getTransform(dummyElm, css1); // console.log(transform);
|
|
94182
|
+
|
|
94183
|
+
btn = this.divEnterAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
|
|
94184
|
+
if (btn) btn.classList.add('on');
|
|
94185
|
+
btn = this.divEnterAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
|
|
94186
|
+
if (btn) btn.classList.add('on');
|
|
94187
|
+
btn = this.divEnterAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
|
|
94188
|
+
if (btn) btn.classList.add('on');
|
|
94189
|
+
|
|
94190
|
+
if (transform.rotate) {
|
|
94191
|
+
btn = this.divEnterAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
|
|
94192
|
+
if (btn) btn.classList.add('on');
|
|
94193
|
+
}
|
|
94194
|
+
|
|
94195
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94196
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
94197
|
+
|
|
94198
|
+
if (transform.translateX) {
|
|
94199
|
+
if (transform.translateX.indexOf('-') !== -1) {
|
|
94200
|
+
inpSlideRight.value = transform.translateX.replace('-', '').replace('px', '');
|
|
94201
|
+
} else {
|
|
94202
|
+
inpSlideLeft.value = transform.translateX.replace('px', '');
|
|
94203
|
+
}
|
|
94204
|
+
}
|
|
94205
|
+
|
|
94206
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94207
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
94208
|
+
|
|
94209
|
+
if (transform.translateY) {
|
|
94210
|
+
if (transform.translateY.indexOf('-') !== -1) {
|
|
94211
|
+
inpSlideDown.value = transform.translateY.replace('-', '').replace('px', '');
|
|
94212
|
+
} else {
|
|
94213
|
+
inpSlideUp.value = transform.translateY.replace('px', '');
|
|
94214
|
+
}
|
|
94215
|
+
}
|
|
94216
|
+
|
|
94217
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
94218
|
+
|
|
94219
|
+
if (transform.scale) {
|
|
94220
|
+
inpScale.value = transform.scale;
|
|
94221
|
+
}
|
|
94222
|
+
|
|
94223
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
94224
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
94225
|
+
|
|
94226
|
+
if (transform.rotate) {
|
|
94227
|
+
if (transform.rotate.indexOf('-') !== -1) {
|
|
94228
|
+
inpRotateClockwise.value = transform.rotate.replace('-', '');
|
|
94229
|
+
} else {
|
|
94230
|
+
inpRotateCounter.value = transform.rotate;
|
|
94231
|
+
}
|
|
94232
|
+
}
|
|
94233
|
+
|
|
94234
|
+
if (transform.opacity) {
|
|
94235
|
+
btn = this.divEnterAnim.querySelector('.cmd-fade');
|
|
94236
|
+
if (btn) btn.classList.add('on');
|
|
94237
|
+
} // --- LEAVE ---
|
|
94238
|
+
|
|
94239
|
+
|
|
94240
|
+
if (activeElement.hasAttribute('data-center-bottom')) {
|
|
94241
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
94242
|
+
if (btn) btn.classList.add('on');
|
|
94243
|
+
}
|
|
94244
|
+
|
|
94245
|
+
if (activeElement.hasAttribute('data-100-top')) {
|
|
94246
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-100-top"]');
|
|
94247
|
+
if (btn) btn.classList.add('on');
|
|
94248
|
+
}
|
|
94249
|
+
|
|
94250
|
+
if (activeElement.hasAttribute('data-50-top')) {
|
|
94251
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-50-top"]');
|
|
94252
|
+
if (btn) btn.classList.add('on');
|
|
94253
|
+
}
|
|
94254
|
+
|
|
94255
|
+
if (activeElement.hasAttribute('data-top')) {
|
|
94256
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-top"]');
|
|
94257
|
+
if (btn) btn.classList.add('on');
|
|
94258
|
+
}
|
|
94259
|
+
|
|
94260
|
+
if (!this.modalAnimateScroll.querySelector('.cmd-leave-start.on')) {
|
|
94261
|
+
// default
|
|
94262
|
+
btn = this.modalAnimateScroll.querySelector('.cmd-leave-start[data-value="data-center-bottom"]');
|
|
94263
|
+
if (btn) btn.classList.add('on');
|
|
94264
|
+
}
|
|
94265
|
+
|
|
94266
|
+
dummyElm.style.cssText = css2;
|
|
94267
|
+
transform = this.getTransform(dummyElm, css2); // console.log(transform);
|
|
94268
|
+
|
|
94269
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-slidex[data-value="${transform.translateX}"]`);
|
|
94270
|
+
if (btn) btn.classList.add('on');
|
|
94271
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-slidey[data-value="${transform.translateY}"]`);
|
|
94272
|
+
if (btn) btn.classList.add('on');
|
|
94273
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-scale[data-value="${transform.scale}"]`);
|
|
94274
|
+
if (btn) btn.classList.add('on');
|
|
94275
|
+
|
|
94276
|
+
if (transform.rotate) {
|
|
94277
|
+
btn = this.divLeaveAnim.querySelector(`.cmd-rotate[data-value="${transform.rotate}"]`);
|
|
94278
|
+
if (btn) btn.classList.add('on');
|
|
94279
|
+
}
|
|
94280
|
+
|
|
94281
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94282
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94283
|
+
|
|
94284
|
+
if (transform.translateX) {
|
|
94285
|
+
if (transform.translateX.indexOf('-') !== -1) {
|
|
94286
|
+
inpSlideLeft_leave.value = transform.translateX.replace('-', '').replace('px', '');
|
|
94287
|
+
} else {
|
|
94288
|
+
inpSlideRight_leave.value = transform.translateX.replace('px', '');
|
|
94289
|
+
}
|
|
94290
|
+
}
|
|
94291
|
+
|
|
94292
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94293
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94294
|
+
|
|
94295
|
+
if (transform.translateY) {
|
|
94296
|
+
if (transform.translateY.indexOf('-') !== -1) {
|
|
94297
|
+
inpSlideUp_leave.value = transform.translateY.replace('-', '').replace('px', '');
|
|
94298
|
+
} else {
|
|
94299
|
+
inpSlideDown_leave.value = transform.translateY.replace('px', '');
|
|
94300
|
+
}
|
|
94301
|
+
}
|
|
94302
|
+
|
|
94303
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94304
|
+
|
|
94305
|
+
if (transform.scale) {
|
|
94306
|
+
inpScale_leave.value = transform.scale;
|
|
94307
|
+
}
|
|
94308
|
+
|
|
94309
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94310
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94311
|
+
|
|
94312
|
+
if (transform.rotate) {
|
|
94313
|
+
if (transform.rotate.indexOf('-') !== -1) {
|
|
94314
|
+
inpRotateCounter_leave.value = transform.rotate.replace('-', '');
|
|
94315
|
+
} else {
|
|
94316
|
+
inpRotateClockwise_leave.value = transform.rotate;
|
|
94317
|
+
}
|
|
94318
|
+
}
|
|
94319
|
+
|
|
94320
|
+
if (transform.opacity) {
|
|
94321
|
+
btn = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94322
|
+
if (btn) btn.classList.add('on');
|
|
94323
|
+
}
|
|
94324
|
+
|
|
94325
|
+
return true;
|
|
94326
|
+
}
|
|
94327
|
+
|
|
94328
|
+
cleanupBasic(activeElement) {
|
|
94329
|
+
activeElement.classList.remove('is-animated');
|
|
94330
|
+
activeElement.classList.remove('once');
|
|
94331
|
+
activeElement.classList.remove('is-fadeIn');
|
|
94332
|
+
activeElement.classList.remove('is-fadeInUp');
|
|
94333
|
+
activeElement.classList.remove('is-fadeInDown');
|
|
94334
|
+
activeElement.classList.remove('is-fadeInLeft');
|
|
94335
|
+
activeElement.classList.remove('is-fadeInRight');
|
|
94336
|
+
activeElement.classList.remove('is-zoomIn');
|
|
94337
|
+
activeElement.classList.remove('is-zoomOut');
|
|
94338
|
+
activeElement.classList.remove('is-slideInUp');
|
|
94339
|
+
activeElement.classList.remove('is-slideInDown');
|
|
94340
|
+
activeElement.classList.remove('is-slideInLeft');
|
|
94341
|
+
activeElement.classList.remove('is-slideInRight');
|
|
94342
|
+
activeElement.classList.remove('is-flipInX');
|
|
94343
|
+
activeElement.classList.remove('is-flipInY');
|
|
94344
|
+
activeElement.classList.remove('is-pulse');
|
|
94345
|
+
activeElement.classList.remove('is-bounceIn');
|
|
94346
|
+
}
|
|
94347
|
+
|
|
94348
|
+
cleanupDelay(activeElement) {
|
|
94349
|
+
activeElement.classList.remove('delay-0ms');
|
|
94350
|
+
activeElement.classList.remove('delay-100ms');
|
|
94351
|
+
activeElement.classList.remove('delay-200ms');
|
|
94352
|
+
activeElement.classList.remove('delay-300ms');
|
|
94353
|
+
activeElement.classList.remove('delay-400ms');
|
|
94354
|
+
activeElement.classList.remove('delay-500ms');
|
|
94355
|
+
activeElement.classList.remove('delay-600ms');
|
|
94356
|
+
activeElement.classList.remove('delay-700ms');
|
|
94357
|
+
activeElement.classList.remove('delay-800ms');
|
|
94358
|
+
activeElement.classList.remove('delay-900ms');
|
|
94359
|
+
activeElement.classList.remove('delay-1000ms');
|
|
94360
|
+
activeElement.classList.remove('delay-1100ms');
|
|
94361
|
+
activeElement.classList.remove('delay-1200ms');
|
|
94362
|
+
activeElement.classList.remove('delay-1300ms');
|
|
94363
|
+
activeElement.classList.remove('delay-1400ms');
|
|
94364
|
+
activeElement.classList.remove('delay-1500ms');
|
|
94365
|
+
activeElement.classList.remove('delay-1600ms');
|
|
94366
|
+
activeElement.classList.remove('delay-1700ms');
|
|
94367
|
+
activeElement.classList.remove('delay-1800ms');
|
|
94368
|
+
activeElement.classList.remove('delay-1900ms');
|
|
94369
|
+
activeElement.classList.remove('delay-2000ms');
|
|
94370
|
+
activeElement.classList.remove('delay-2100ms');
|
|
94371
|
+
activeElement.classList.remove('delay-2200ms');
|
|
94372
|
+
activeElement.classList.remove('delay-2300ms');
|
|
94373
|
+
activeElement.classList.remove('delay-2400ms');
|
|
94374
|
+
activeElement.classList.remove('delay-2500ms');
|
|
94375
|
+
activeElement.classList.remove('delay-2600ms');
|
|
94376
|
+
activeElement.classList.remove('delay-2700ms');
|
|
94377
|
+
activeElement.classList.remove('delay-2800ms');
|
|
94378
|
+
activeElement.classList.remove('delay-2900ms');
|
|
94379
|
+
activeElement.classList.remove('delay-3000ms');
|
|
94380
|
+
activeElement.style.transitionDelay = '';
|
|
94381
|
+
activeElement.style.animationDelay = '';
|
|
94382
|
+
}
|
|
94383
|
+
|
|
94384
|
+
applyDelay() {
|
|
94385
|
+
let activeElement;
|
|
94386
|
+
let target = this.getTarget();
|
|
94387
|
+
activeElement = target.element;
|
|
94388
|
+
if (!activeElement) return;
|
|
94389
|
+
let valDelay;
|
|
94390
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-delay');
|
|
94391
|
+
elms.forEach(elm => {
|
|
94392
|
+
if (elm.classList.contains('on')) {
|
|
94393
|
+
valDelay = elm.getAttribute('data-value');
|
|
94394
|
+
}
|
|
94395
|
+
});
|
|
94396
|
+
this.builder.editor.saveForUndo();
|
|
94397
|
+
this.cleanupDelay(activeElement);
|
|
94398
|
+
activeElement.classList.remove('is-inview');
|
|
94399
|
+
setTimeout(() => {
|
|
94400
|
+
if (valDelay) activeElement.classList.add(valDelay);
|
|
94401
|
+
setTimeout(() => {
|
|
94402
|
+
activeElement.classList.add('is-inview');
|
|
94403
|
+
}, 10);
|
|
94404
|
+
}, 10); //Trigger Change event
|
|
94405
|
+
|
|
94406
|
+
this.builder.settings.onChange();
|
|
94407
|
+
}
|
|
94408
|
+
|
|
94409
|
+
applyBasic() {
|
|
94410
|
+
let activeElement;
|
|
94411
|
+
let target = this.getTarget();
|
|
94412
|
+
activeElement = target.element;
|
|
94413
|
+
if (!activeElement) return;
|
|
94414
|
+
let val;
|
|
94415
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-basic-anim');
|
|
94416
|
+
elms.forEach(elm => {
|
|
94417
|
+
if (elm.classList.contains('on')) {
|
|
94418
|
+
val = elm.getAttribute('data-value');
|
|
94419
|
+
}
|
|
94420
|
+
});
|
|
94421
|
+
let once = false;
|
|
94422
|
+
const btnAnimateOnce = this.modalAnimateScroll.querySelector('.cmd-basic-once');
|
|
94423
|
+
if (btnAnimateOnce.classList.contains('on')) once = true;
|
|
94424
|
+
this.builder.editor.saveForUndo();
|
|
94425
|
+
this.cleanupBasic(activeElement);
|
|
94426
|
+
|
|
94427
|
+
if (val) {
|
|
94428
|
+
activeElement.classList.remove('is-inview');
|
|
94429
|
+
activeElement.classList.remove('once');
|
|
94430
|
+
setTimeout(() => {
|
|
94431
|
+
activeElement.classList.add(val);
|
|
94432
|
+
if (once) activeElement.classList.add('once');
|
|
94433
|
+
activeElement.classList.add('is-animated'); // activeElement.classList.add('is-inview');
|
|
94434
|
+
|
|
94435
|
+
setTimeout(() => {
|
|
94436
|
+
activeElement.classList.add('is-inview');
|
|
94437
|
+
}, 10);
|
|
94438
|
+
}, 10);
|
|
94439
|
+
} //Trigger Change event
|
|
94440
|
+
|
|
94441
|
+
|
|
94442
|
+
this.builder.settings.onChange();
|
|
94443
|
+
}
|
|
94444
|
+
|
|
94445
|
+
apply() {
|
|
94446
|
+
let activeElement;
|
|
94447
|
+
let target = this.getTarget();
|
|
94448
|
+
activeElement = target.element;
|
|
94449
|
+
if (!activeElement) return;
|
|
94450
|
+
let valX;
|
|
94451
|
+
let elms = this.divEnterAnim.querySelectorAll('.cmd-slidex');
|
|
94452
|
+
elms.forEach(elm => {
|
|
94453
|
+
if (elm.classList.contains('on')) {
|
|
94454
|
+
valX = elm.getAttribute('data-value');
|
|
94455
|
+
}
|
|
94456
|
+
});
|
|
94457
|
+
let valY;
|
|
94458
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-slidey');
|
|
94459
|
+
elms.forEach(elm => {
|
|
94460
|
+
if (elm.classList.contains('on')) {
|
|
94461
|
+
valY = elm.getAttribute('data-value');
|
|
94462
|
+
}
|
|
94463
|
+
});
|
|
94464
|
+
let scale;
|
|
94465
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-scale');
|
|
94466
|
+
elms.forEach(elm => {
|
|
94467
|
+
if (elm.classList.contains('on')) {
|
|
94468
|
+
scale = elm.getAttribute('data-value');
|
|
94469
|
+
}
|
|
94470
|
+
});
|
|
94471
|
+
let rotate;
|
|
94472
|
+
elms = this.divEnterAnim.querySelectorAll('.cmd-rotate');
|
|
94473
|
+
elms.forEach(elm => {
|
|
94474
|
+
if (elm.classList.contains('on')) {
|
|
94475
|
+
rotate = elm.getAttribute('data-value');
|
|
94476
|
+
}
|
|
94477
|
+
});
|
|
94478
|
+
let fade = false;
|
|
94479
|
+
let elm = this.divEnterAnim.querySelector('.cmd-fade');
|
|
94480
|
+
|
|
94481
|
+
if (elm.classList.contains('on')) {
|
|
94482
|
+
fade = true;
|
|
94483
|
+
}
|
|
94484
|
+
|
|
94485
|
+
const inpSlideLeft = this.divEnterAnim.querySelector('.inp-slide-right');
|
|
94486
|
+
if (inpSlideLeft.value !== '') valX = '-' + inpSlideLeft.value + (inpSlideLeft.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94487
|
+
const inpSlideRight = this.divEnterAnim.querySelector('.inp-slide-left');
|
|
94488
|
+
if (inpSlideRight.value !== '') valX = inpSlideRight.value + (inpSlideRight.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94489
|
+
const inpSlideDown = this.divEnterAnim.querySelector('.inp-slide-down');
|
|
94490
|
+
if (inpSlideDown.value !== '') valY = '-' + inpSlideDown.value + (inpSlideDown.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94491
|
+
const inpSlideUp = this.divEnterAnim.querySelector('.inp-slide-up');
|
|
94492
|
+
if (inpSlideUp.value !== '') valY = inpSlideUp.value + (inpSlideUp.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94493
|
+
const inpScale = this.divEnterAnim.querySelector('.inp-scale');
|
|
94494
|
+
if (inpScale.value !== '') scale = inpScale.value;
|
|
94495
|
+
const inpRotateClockwise = this.divEnterAnim.querySelector('.inp-rotate-clockwise');
|
|
94496
|
+
if (inpRotateClockwise.value !== '') rotate = '-' + inpRotateClockwise.value;
|
|
94497
|
+
const inpRotateCounter = this.divEnterAnim.querySelector('.inp-rotate-counter');
|
|
94498
|
+
if (inpRotateCounter.value !== '') rotate = inpRotateCounter.value;
|
|
94499
|
+
let animStart = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (rotate ? ` rotate(${rotate}deg)` : '') + (scale ? ` scale(${scale})` : '');
|
|
94500
|
+
animStart = animStart.trim();
|
|
94501
|
+
let animEnd = (valX ? ' translateX(0px)' : '') + (valY ? ' translateY(0px)' : '') + (rotate ? ' rotate(0deg)' : '') + (scale ? ' scale(1)' : '');
|
|
94502
|
+
animEnd = animEnd.trim();
|
|
94503
|
+
let sStart = (animStart ? 'transform: ' + animStart + ';' : '') + (fade ? 'opacity: 0;' : '');
|
|
94504
|
+
let sEnd = (animEnd ? 'transform: ' + animEnd + ';' : '') + (fade ? 'opacity: 1;' : '');
|
|
94505
|
+
this.builder.editor.saveForUndo();
|
|
94506
|
+
this.cleanup(activeElement);
|
|
94507
|
+
let dataStart;
|
|
94508
|
+
let dataEnd;
|
|
94509
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-start');
|
|
94510
|
+
elms.forEach(elm => {
|
|
94511
|
+
if (elm.classList.contains('on')) {
|
|
94512
|
+
dataStart = elm.getAttribute('data-value');
|
|
94513
|
+
}
|
|
94514
|
+
});
|
|
94515
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-end');
|
|
94516
|
+
elms.forEach(elm => {
|
|
94517
|
+
if (elm.classList.contains('on')) {
|
|
94518
|
+
dataEnd = elm.getAttribute('data-value');
|
|
94519
|
+
}
|
|
94520
|
+
});
|
|
94521
|
+
sStart = sStart.trim();
|
|
94522
|
+
sEnd = sEnd.trim();
|
|
94523
|
+
if (sStart !== '') activeElement.setAttribute(dataStart, sStart);
|
|
94524
|
+
if (sEnd !== '') activeElement.setAttribute(dataEnd, sEnd); // --- LEAVE ---
|
|
94525
|
+
|
|
94526
|
+
let valX_leave;
|
|
94527
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidex');
|
|
94528
|
+
elms.forEach(elm => {
|
|
94529
|
+
if (elm.classList.contains('on')) {
|
|
94530
|
+
valX_leave = elm.getAttribute('data-value');
|
|
94531
|
+
}
|
|
94532
|
+
});
|
|
94533
|
+
let valY_leave;
|
|
94534
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-slidey');
|
|
94535
|
+
elms.forEach(elm => {
|
|
94536
|
+
if (elm.classList.contains('on')) {
|
|
94537
|
+
valY_leave = elm.getAttribute('data-value');
|
|
94538
|
+
}
|
|
94539
|
+
});
|
|
94540
|
+
let scale_leave;
|
|
94541
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-scale');
|
|
94542
|
+
elms.forEach(elm => {
|
|
94543
|
+
if (elm.classList.contains('on')) {
|
|
94544
|
+
scale_leave = elm.getAttribute('data-value');
|
|
94545
|
+
}
|
|
94546
|
+
});
|
|
94547
|
+
let rotate_leave;
|
|
94548
|
+
elms = this.divLeaveAnim.querySelectorAll('.cmd-rotate');
|
|
94549
|
+
elms.forEach(elm => {
|
|
94550
|
+
if (elm.classList.contains('on')) {
|
|
94551
|
+
rotate_leave = elm.getAttribute('data-value');
|
|
94552
|
+
}
|
|
94553
|
+
});
|
|
94554
|
+
let fade_leave = false;
|
|
94555
|
+
elm = this.divLeaveAnim.querySelector('.cmd-fade');
|
|
94556
|
+
|
|
94557
|
+
if (elm.classList.contains('on')) {
|
|
94558
|
+
fade_leave = true;
|
|
94559
|
+
}
|
|
94560
|
+
|
|
94561
|
+
const inpSlideLeft_leave = this.divLeaveAnim.querySelector('.inp-slide-left');
|
|
94562
|
+
if (inpSlideLeft_leave.value !== '') valX_leave = '-' + inpSlideLeft_leave.value + (inpSlideLeft_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94563
|
+
const inpSlideRight_leave = this.divLeaveAnim.querySelector('.inp-slide-right');
|
|
94564
|
+
if (inpSlideRight_leave.value !== '') valX_leave = inpSlideRight_leave.value + (inpSlideRight_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94565
|
+
const inpSlideDown_leave = this.divLeaveAnim.querySelector('.inp-slide-down');
|
|
94566
|
+
if (inpSlideDown_leave.value !== '') valY_leave = inpSlideDown_leave.value + (inpSlideDown_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94567
|
+
const inpSlideUp_leave = this.divLeaveAnim.querySelector('.inp-slide-up');
|
|
94568
|
+
if (inpSlideUp_leave.value !== '') valY_leave = '-' + inpSlideUp_leave.value + (inpSlideUp_leave.value.indexOf('%') !== -1 ? '' : 'px');
|
|
94569
|
+
const inpScale_leave = this.divLeaveAnim.querySelector('.inp-scale');
|
|
94570
|
+
if (inpScale_leave.value !== '') scale = inpScale_leave.value;
|
|
94571
|
+
const inpRotateClockwise_leave = this.divLeaveAnim.querySelector('.inp-rotate-clockwise');
|
|
94572
|
+
if (inpRotateClockwise_leave.value !== '') rotate_leave = inpRotateClockwise_leave.value;
|
|
94573
|
+
const inpRotateCounter_leave = this.divLeaveAnim.querySelector('.inp-rotate-counter');
|
|
94574
|
+
if (inpRotateCounter_leave.value !== '') rotate_leave = '-' + inpRotateCounter_leave.value;
|
|
94575
|
+
let animLeaveStart = (valX_leave ? ' translateX(0px)' : '') + (valY_leave ? ' translateY(0px)' : '') + (rotate_leave ? ' rotate(0deg)' : '') + (scale_leave ? ' scale(1)' : '');
|
|
94576
|
+
animLeaveStart = animLeaveStart.trim();
|
|
94577
|
+
let animLeaveEnd = (valX_leave ? ` translateX(${valX_leave})` : '') + (valY_leave ? ` translateY(${valY_leave})` : '') + (rotate_leave ? ` rotate(${rotate_leave}deg)` : '') + (scale_leave ? ` scale(${scale_leave})` : '');
|
|
94578
|
+
animLeaveEnd = animLeaveEnd.trim();
|
|
94579
|
+
let sLeaveStart = (animLeaveStart ? 'transform: ' + animLeaveStart + ';' : '') + (fade_leave ? 'opacity: 1;' : '');
|
|
94580
|
+
let sLeaveEnd = (animLeaveEnd ? 'transform: ' + animLeaveEnd + ';' : '') + (fade_leave ? 'opacity: 0;' : '');
|
|
94581
|
+
this.cleanup_leave(activeElement);
|
|
94582
|
+
let dataLeaveStart;
|
|
94583
|
+
let dataLeaveEnd;
|
|
94584
|
+
elms = this.modalAnimateScroll.querySelectorAll('.cmd-leave-start');
|
|
94585
|
+
elms.forEach(elm => {
|
|
94586
|
+
if (elm.classList.contains('on')) {
|
|
94587
|
+
dataLeaveStart = elm.getAttribute('data-value');
|
|
94588
|
+
}
|
|
94589
|
+
});
|
|
94590
|
+
dataLeaveEnd = 'data-top-bottom';
|
|
94591
|
+
sLeaveStart = sLeaveStart.trim();
|
|
94592
|
+
sLeaveEnd = sLeaveEnd.trim();
|
|
94593
|
+
if (sLeaveStart !== '') activeElement.setAttribute(dataLeaveStart, sLeaveStart);
|
|
94594
|
+
if (sLeaveEnd !== '') activeElement.setAttribute(dataLeaveEnd, sLeaveEnd); // ----
|
|
94595
|
+
|
|
94596
|
+
if (sStart === '' && sEnd === '' && sLeaveStart === '' && sLeaveEnd === '') {
|
|
94597
|
+
activeElement.style.transform = '';
|
|
94598
|
+
activeElement.style.transition = '';
|
|
94599
|
+
activeElement.style.opacity = '';
|
|
94600
|
+
}
|
|
94601
|
+
|
|
94602
|
+
if (fade || fade_leave) {
|
|
94603
|
+
activeElement.style.opacity = '';
|
|
94604
|
+
}
|
|
94605
|
+
|
|
94606
|
+
if (this.builder.win.skrollrr) {
|
|
94607
|
+
this.builder.win.skrollrr.refresh();
|
|
94608
|
+
} //Trigger Change event
|
|
94609
|
+
|
|
94610
|
+
|
|
94611
|
+
this.builder.settings.onChange();
|
|
94612
|
+
}
|
|
94613
|
+
|
|
94614
|
+
getTarget() {
|
|
94615
|
+
let target;
|
|
94616
|
+
let elms = this.modalAnimateScroll.querySelectorAll('.cmd-target');
|
|
94617
|
+
elms.forEach(elm => {
|
|
94618
|
+
if (elm.classList.contains('on')) {
|
|
94619
|
+
target = elm.getAttribute('data-value');
|
|
94620
|
+
}
|
|
94621
|
+
});
|
|
94622
|
+
let activeElement;
|
|
94623
|
+
|
|
94624
|
+
if (target === 'element') {
|
|
94625
|
+
let reCheck = this.readTarget();
|
|
94626
|
+
|
|
94627
|
+
if (reCheck) {
|
|
94628
|
+
if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
|
|
94629
|
+
if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;
|
|
94630
|
+
} else {
|
|
94631
|
+
activeElement = this.builder.editor.activeElement;
|
|
94632
|
+
}
|
|
94633
|
+
}
|
|
94634
|
+
|
|
94635
|
+
if (target === 'column') {
|
|
94636
|
+
activeElement = this.builder.editor.activeCol;
|
|
94637
|
+
}
|
|
94638
|
+
|
|
94639
|
+
if (target === 'row') {
|
|
94640
|
+
let activeCol = this.builder.editor.activeCol;
|
|
94641
|
+
if (activeCol) activeElement = activeCol.parentNode;
|
|
94642
|
+
}
|
|
94643
|
+
|
|
94644
|
+
if (target === 'container') {
|
|
94645
|
+
let activeCol = this.builder.editor.activeCol;
|
|
94646
|
+
if (activeCol) activeElement = activeCol.parentNode.parentNode;
|
|
94647
|
+
}
|
|
94648
|
+
|
|
94649
|
+
return {
|
|
94650
|
+
'element': activeElement ? activeElement : false,
|
|
94651
|
+
'name': target ? target : false
|
|
94652
|
+
};
|
|
94653
|
+
}
|
|
94654
|
+
|
|
94655
|
+
readTarget(s) {
|
|
94656
|
+
if (!s) {
|
|
94657
|
+
// element
|
|
94658
|
+
let activeElement = this.builder.editor.inspectedElement;
|
|
94659
|
+
if (!activeElement) return false; // enter start
|
|
94660
|
+
|
|
94661
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94662
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
94663
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
94664
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94665
|
+
|
|
94666
|
+
let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
|
|
94667
|
+
|
|
94668
|
+
let hasBasicAnim = false;
|
|
94669
|
+
|
|
94670
|
+
if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
|
|
94671
|
+
hasBasicAnim = true;
|
|
94672
|
+
}
|
|
94673
|
+
|
|
94674
|
+
if (css1 || css2 || hasBasicAnim) {
|
|
94675
|
+
return {
|
|
94676
|
+
'element': activeElement,
|
|
94677
|
+
'name': 'inspectedElement'
|
|
94678
|
+
};
|
|
94679
|
+
} else {
|
|
94680
|
+
return this.readTarget('element');
|
|
94681
|
+
}
|
|
94682
|
+
} else {
|
|
94683
|
+
let activeElement;
|
|
94684
|
+
|
|
94685
|
+
if (s === 'element') {
|
|
94686
|
+
activeElement = this.builder.editor.activeElement;
|
|
94687
|
+
}
|
|
94688
|
+
|
|
94689
|
+
if (s === 'column') {
|
|
94690
|
+
activeElement = this.builder.editor.activeCol;
|
|
94691
|
+
}
|
|
94692
|
+
|
|
94693
|
+
if (s === 'row') {
|
|
94694
|
+
activeElement = this.builder.editor.activeCol.parentNode;
|
|
94695
|
+
}
|
|
94696
|
+
|
|
94697
|
+
if (s === 'container') {
|
|
94698
|
+
activeElement = this.builder.editor.activeCol.parentNode.parentNode;
|
|
94699
|
+
}
|
|
94700
|
+
|
|
94701
|
+
if (!activeElement) return false; // enter start
|
|
94702
|
+
|
|
94703
|
+
let css1 = activeElement.getAttribute('data-bottom-top');
|
|
94704
|
+
if (!css1) css1 = activeElement.getAttribute('data-400-bottom');
|
|
94705
|
+
if (!css1) css1 = activeElement.getAttribute('data-200-bottom');
|
|
94706
|
+
if (!css1) css1 = activeElement.getAttribute('data--50-bottom'); // leave start
|
|
94707
|
+
|
|
94708
|
+
let css2 = activeElement.getAttribute('data-top-bottom'); // basic anim
|
|
94709
|
+
|
|
94710
|
+
let hasBasicAnim = false;
|
|
94711
|
+
|
|
94712
|
+
if (activeElement.classList.contains('is-fadeIn') || activeElement.classList.contains('is-fadeInUp') || activeElement.classList.contains('is-fadeInDown') || activeElement.classList.contains('is-fadeInLeft') || activeElement.classList.contains('is-fadeInRight') || activeElement.classList.contains('is-zoomIn') || activeElement.classList.contains('is-zoomOut') || activeElement.classList.contains('is-slideInUp') || activeElement.classList.contains('is-slideInDown') || activeElement.classList.contains('is-slideInLeft') || activeElement.classList.contains('is-slideInRight') || activeElement.classList.contains('is-flipInX') || activeElement.classList.contains('is-flipInY') || activeElement.classList.contains('is-pulse') || activeElement.classList.contains('is-bounceIn')) {
|
|
94713
|
+
hasBasicAnim = true;
|
|
94714
|
+
}
|
|
94715
|
+
|
|
94716
|
+
if (css1 || css2 || hasBasicAnim) {
|
|
94717
|
+
return {
|
|
94718
|
+
'element': activeElement,
|
|
94719
|
+
'name': s
|
|
94720
|
+
};
|
|
94721
|
+
} else {
|
|
94722
|
+
if (s === 'column') return this.readTarget('row');
|
|
94723
|
+
if (s === 'row') return this.readTarget('container');
|
|
94724
|
+
if (s === 'container') return false;
|
|
94725
|
+
}
|
|
94726
|
+
}
|
|
94727
|
+
}
|
|
94728
|
+
|
|
94729
|
+
getTransform(element, css) {
|
|
94730
|
+
let tX, tY, sc, rt;
|
|
94731
|
+
let arrTransform = this.parseComplexStyleProperty(css);
|
|
94732
|
+
if (arrTransform.translateX) tX = arrTransform.translateX[0];
|
|
94733
|
+
if (arrTransform.translateY) tY = arrTransform.translateY[0];
|
|
94734
|
+
if (arrTransform.scale) sc = arrTransform.scale[0];
|
|
94735
|
+
if (arrTransform.rotate) rt = arrTransform.rotate[0];
|
|
94736
|
+
let opacity = element.style.opacity;
|
|
94737
|
+
return {
|
|
94738
|
+
translateX: tX ? tX : false,
|
|
94739
|
+
translateY: tY ? tY : false,
|
|
94740
|
+
scale: sc ? sc : false,
|
|
94741
|
+
rotate: rt ? rt.replace('deg', '') : false,
|
|
94742
|
+
opacity: opacity ? opacity : false
|
|
94743
|
+
};
|
|
94744
|
+
}
|
|
94745
|
+
|
|
94746
|
+
parseComplexStyleProperty(str) {
|
|
94747
|
+
var regex = /(\w+)\((.+?)\)/g,
|
|
94748
|
+
transform = {},
|
|
94749
|
+
match;
|
|
94750
|
+
|
|
94751
|
+
while (match = regex.exec(str)) // eslint-disable-line
|
|
94752
|
+
transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
|
|
94753
|
+
|
|
94754
|
+
return transform;
|
|
94755
|
+
}
|
|
94756
|
+
|
|
94757
|
+
cleanup(elm) {
|
|
94758
|
+
elm.removeAttribute('data-center');
|
|
94759
|
+
elm.removeAttribute('data-center-top');
|
|
94760
|
+
elm.removeAttribute('data--50-bottom');
|
|
94761
|
+
elm.removeAttribute('data--100-bottom');
|
|
94762
|
+
elm.removeAttribute('data--150-bottom');
|
|
94763
|
+
elm.removeAttribute('data--200-bottom');
|
|
94764
|
+
elm.removeAttribute('data--300-bottom');
|
|
94765
|
+
elm.removeAttribute('data--400-bottom');
|
|
94766
|
+
elm.removeAttribute('data-bottom-top');
|
|
94767
|
+
elm.removeAttribute('data-400-bottom');
|
|
94768
|
+
elm.removeAttribute('data-300-bottom');
|
|
94769
|
+
elm.removeAttribute('data-200-bottom');
|
|
94770
|
+
elm.removeAttribute('data-150-bottom');
|
|
94771
|
+
elm.removeAttribute('data-100-bottom');
|
|
94772
|
+
elm.removeAttribute('data-50-bottom');
|
|
94773
|
+
elm.removeAttribute('data-bottom');
|
|
94774
|
+
}
|
|
94775
|
+
|
|
94776
|
+
cleanup_leave(elm) {
|
|
94777
|
+
elm.removeAttribute('data-center-bottom');
|
|
94778
|
+
elm.removeAttribute('data-100-top');
|
|
94779
|
+
elm.removeAttribute('data-50-top');
|
|
94780
|
+
elm.removeAttribute('data-top');
|
|
94781
|
+
elm.removeAttribute('data-top-bottom');
|
|
94782
|
+
}
|
|
94783
|
+
|
|
94784
|
+
edit() {
|
|
94785
|
+
this.modalAnimateScroll.classList.add('active');
|
|
94786
|
+
this.clickContent();
|
|
94787
|
+
}
|
|
94788
|
+
|
|
94789
|
+
close() {
|
|
94790
|
+
this.modalAnimateScroll.classList.remove('active');
|
|
94791
|
+
}
|
|
94792
|
+
|
|
94793
|
+
}
|
|
94794
|
+
|
|
92348
94795
|
const dom = new Dom$1();
|
|
92349
94796
|
|
|
92350
94797
|
class ContentBox {
|
|
@@ -92496,7 +94943,8 @@ class ContentBox {
|
|
|
92496
94943
|
name: 'symbols',
|
|
92497
94944
|
showInMainToolbar: true,
|
|
92498
94945
|
showInElementToolbar: false
|
|
92499
|
-
}
|
|
94946
|
+
} // { name: 'animation', showInMainToolbar: true, showInElementToolbar: true },
|
|
94947
|
+
],
|
|
92500
94948
|
disableConfig: false,
|
|
92501
94949
|
useLightbox: true,
|
|
92502
94950
|
lightboxArrow: true,
|
|
@@ -94977,10 +97425,16 @@ class ContentBox {
|
|
|
94977
97425
|
builderStuff = document.querySelector('#_cbhtml');
|
|
94978
97426
|
}
|
|
94979
97427
|
|
|
94980
|
-
this.builderStuff = builderStuff;
|
|
97428
|
+
this.builderStuff = builderStuff; // a hack to prevent html/body page get sliding
|
|
97429
|
+
|
|
97430
|
+
builderStuff.style.position = 'fixed';
|
|
97431
|
+
setTimeout(() => {
|
|
97432
|
+
builderStuff.style.position = '';
|
|
97433
|
+
}, 1200);
|
|
94981
97434
|
prepareSvgIcons$1(this); // Prepare icons (embed svg definitions for icons)
|
|
94982
97435
|
|
|
94983
97436
|
this.sidebar = new SideBar(this);
|
|
97437
|
+
this.animateScroll = new AnimateScroll(this);
|
|
94984
97438
|
|
|
94985
97439
|
if (!window.data_basic) {
|
|
94986
97440
|
dom.addExternalScripts([this.snippetUrl], () => {
|
|
@@ -95655,7 +98109,7 @@ class ContentBox {
|
|
|
95655
98109
|
this.editbox.editModule();
|
|
95656
98110
|
});
|
|
95657
98111
|
let btnCover = box.querySelector('.is-cover-upload');
|
|
95658
|
-
if (btnCover) btnCover.addEventListener('mouseenter', () => {
|
|
98112
|
+
if (btnCover) if (btnCover.style.display !== 'none') btnCover.addEventListener('mouseenter', () => {
|
|
95659
98113
|
let btnCoverCentral;
|
|
95660
98114
|
|
|
95661
98115
|
if (!this.iframe) {
|
|
@@ -96252,11 +98706,11 @@ class ContentBox {
|
|
|
96252
98706
|
boxTool.style.width = '40px';
|
|
96253
98707
|
boxTool.style.left = 'calc(50% - 20px)';
|
|
96254
98708
|
} else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
|
|
96255
|
-
box.querySelector('.is-cover-upload').style.display = '
|
|
98709
|
+
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
96256
98710
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
96257
98711
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
96258
|
-
boxTool.style.width = '
|
|
96259
|
-
boxTool.style.left = 'calc(50% -
|
|
98712
|
+
boxTool.style.width = '120px';
|
|
98713
|
+
boxTool.style.left = 'calc(50% - 60px)';
|
|
96260
98714
|
} else {
|
|
96261
98715
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
96262
98716
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
@@ -96445,7 +98899,30 @@ class ContentBox {
|
|
|
96445
98899
|
let range = document.createRange();
|
|
96446
98900
|
wrapper.innerHTML = '';
|
|
96447
98901
|
wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
98902
|
+
// Load fonts
|
|
96448
98903
|
|
|
98904
|
+
let contentStylePath = this.settings.contentStylePath;
|
|
98905
|
+
const sections = wrapper.querySelectorAll('.is-section');
|
|
98906
|
+
sections.forEach(section => {
|
|
98907
|
+
section.classList.forEach(item => {
|
|
98908
|
+
if (item.indexOf('type-') !== -1) {
|
|
98909
|
+
const contentClass = item;
|
|
98910
|
+
const contentCss = item + '.css'; //Add css
|
|
98911
|
+
|
|
98912
|
+
let exist = false;
|
|
98913
|
+
let links = this.doc.getElementsByTagName('link');
|
|
98914
|
+
|
|
98915
|
+
for (let i = 0; i < links.length; i++) {
|
|
98916
|
+
let src = links[i].href.toLowerCase();
|
|
98917
|
+
if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
|
|
98918
|
+
}
|
|
98919
|
+
|
|
98920
|
+
if (!exist) {
|
|
98921
|
+
this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
|
|
98922
|
+
}
|
|
98923
|
+
}
|
|
98924
|
+
});
|
|
98925
|
+
});
|
|
96449
98926
|
this.pageSetup();
|
|
96450
98927
|
this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
|
|
96451
98928
|
// Re-apply
|
|
@@ -96543,6 +99020,10 @@ class ContentBox {
|
|
|
96543
99020
|
this.editor.viewZoom();
|
|
96544
99021
|
}
|
|
96545
99022
|
|
|
99023
|
+
openAnimationPanel() {
|
|
99024
|
+
this.animateScroll.edit();
|
|
99025
|
+
}
|
|
99026
|
+
|
|
96546
99027
|
destroy() {
|
|
96547
99028
|
this.doc.removeEventListener('click', this.doDocumentClick, false);
|
|
96548
99029
|
if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);
|