@innovastudio/contentbox 1.5.92 → 1.5.94
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +2 -2
- package/public/contentbox/contentbox.css +136 -25
- package/public/contentbox/contentbox.esm.js +615 -554
- package/public/contentbox/contentbox.min.js +12 -12
- package/readme.txt +1 -1
|
@@ -483,6 +483,20 @@ const prepareSvgIcons$1 = builder => {
|
|
|
483
483
|
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
484
484
|
<path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
485
485
|
</symbol>
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
<symbol id="icon-arrow-down2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
489
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
490
|
+
<path d="M12 5l0 14"></path>
|
|
491
|
+
<path d="M18 13l-6 6"></path>
|
|
492
|
+
<path d="M6 13l6 6"></path>
|
|
493
|
+
</symbol>
|
|
494
|
+
<symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
495
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
496
|
+
<path d="M18 6l-12 12"></path>
|
|
497
|
+
<path d="M6 6l12 12"></path>
|
|
498
|
+
</symbol>
|
|
499
|
+
|
|
486
500
|
</defs>
|
|
487
501
|
</svg>`;
|
|
488
502
|
const builderStuff = builder.builderStuff;
|
|
@@ -11089,22 +11103,9 @@ class EditBox {
|
|
|
11089
11103
|
this.builder = builder;
|
|
11090
11104
|
this.builderStuff = this.builder.builderStuff;
|
|
11091
11105
|
const builderStuff = this.builderStuff;
|
|
11092
|
-
let html = '';
|
|
11093
|
-
// '<div id="divBoxTool">' +
|
|
11094
|
-
// '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' +
|
|
11095
|
-
// '<div style="width:40px;height:40px;overflow:hidden;">' +
|
|
11096
|
-
// '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' +
|
|
11097
|
-
// '<input type="file" tabindex="-1" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' +
|
|
11098
|
-
// '</div>' +
|
|
11099
|
-
// '<input id="hidcustomval" tabindex="-1" name="hidcustomval" type="hidden" value="" />' +
|
|
11100
|
-
// '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' +
|
|
11101
|
-
// '</form>' +
|
|
11102
|
-
// '<button id="btnEditBox" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' +
|
|
11103
|
-
// '<button id="btnEditModule" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' +
|
|
11104
|
-
// '</div>';
|
|
11105
|
-
|
|
11106
|
+
let html = '';
|
|
11106
11107
|
html += `
|
|
11107
|
-
<form class="is-cover-upload-central" data-tooltip-top title="${out('Change Background')}" data-title="${out('Change Background')}" style="opacity:1;position:absolute;width:
|
|
11108
|
+
<form class="is-cover-upload-central" data-tooltip-top title="${out('Change Background')}" data-title="${out('Change Background')}" style="opacity:1;position:absolute;width:35px;height:35px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:35px;height:35px;display:inline-block;float:left;background: rgb(90, 156, 38);">
|
|
11108
11109
|
<input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
11109
11110
|
<input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
|
|
11110
11111
|
</form>
|
|
@@ -11134,76 +11135,10 @@ class EditBox {
|
|
|
11134
11135
|
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<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>' + '<div style="display:none;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' + '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' + '<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom:0;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Top') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button>' + '<button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-topspacing" data-value="80" style="width:40px">80</button>' +
|
|
11135
11136
|
'<button title="' + out('Not Set') + '" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Bottom') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-bottomspacing" data-value="80" style="width:40px">80</button>' +
|
|
11136
11137
|
'<button title="' + out('Not Set') + '" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>';
|
|
11137
|
-
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' +
|
|
11138
|
-
/*
|
|
11139
|
-
'<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
11140
|
-
'<input type="radio" id="rdoKenBurns" name="boxbganim" value="1" style="margin: 0 10px 0 5px;">' +
|
|
11141
|
-
'<span style="line-height:1">Ken Burns Effect</span>' +
|
|
11142
|
-
'</label>' +
|
|
11143
|
-
'<label for="rdoParallaxScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
11144
|
-
'<input type="radio" id="rdoParallaxScale" name="boxbganim" value="2" style="margin: 0 10px 0 5px;">' +
|
|
11145
|
-
'<span style="line-height:1">Parallax & Scale</span>' +
|
|
11146
|
-
'</label>' +
|
|
11147
|
-
'<label for="rdoParallax" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
11148
|
-
'<input type="radio" id="rdoParallax" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
|
|
11149
|
-
'<span style="line-height:1">Parallax (visible on preview)</span>' +
|
|
11150
|
-
'</label>' +
|
|
11151
|
-
'<label for="rdoScale" style="display:flex;align-items:center;margin-bottom:10px;">' +
|
|
11152
|
-
'<input type="radio" id="rdoScale" name="boxbganim" value="3" style="margin: 0 10px 0 5px;">' +
|
|
11153
|
-
'<span style="line-height:1">Scale</span>' +
|
|
11154
|
-
'</label>' +
|
|
11155
|
-
*/
|
|
11156
|
-
'<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>';
|
|
11138
|
+
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<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: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>';
|
|
11157
11139
|
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>';
|
|
11158
11140
|
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>' + '';
|
|
11159
|
-
dom$m.appendHtml(builderStuff, html); //
|
|
11160
|
-
|
|
11161
|
-
/*
|
|
11162
|
-
this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
|
|
11163
|
-
|
|
11164
|
-
builderStuff.querySelector('#hidcustomval').value = this.builder.settings.customval;
|
|
11165
|
-
const btnEditBox = builderStuff.querySelector('#btnEditBox');
|
|
11166
|
-
btnEditBox.addEventListener('click', ()=>{
|
|
11167
|
-
this.edit();
|
|
11168
|
-
});
|
|
11169
|
-
const btnEditModule = builderStuff.querySelector('#btnEditModule');
|
|
11170
|
-
btnEditModule.addEventListener('click', ()=>{
|
|
11171
|
-
this.editModule();
|
|
11172
|
-
});
|
|
11173
|
-
const fileCover = builderStuff.querySelector('#fileCover');
|
|
11174
|
-
fileCover.addEventListener('click', ()=>{
|
|
11175
|
-
// prevent lost of activeBox during uploading cover (save to targetBox)
|
|
11176
|
-
this.targetBox = this.builder.activeBox;
|
|
11177
|
-
});
|
|
11178
|
-
fileCover.addEventListener('change', (e)=>{
|
|
11179
|
-
if (fileCover.value === '') return;
|
|
11180
|
-
|
|
11181
|
-
this.builder.editor.saveForUndo();
|
|
11182
|
-
// Show Waiting Indicator
|
|
11183
|
-
const builderStuff = this.builderStuff;
|
|
11184
|
-
dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
11185
|
-
<div class="waiting-indicator">
|
|
11186
|
-
<div>${out('Uploading..')}</div>
|
|
11187
|
-
</div>
|
|
11188
|
-
`);
|
|
11189
|
-
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
11190
|
-
let targetBox = this.targetBox;
|
|
11191
|
-
const top = (targetBox.getBoundingClientRect().top + window.pageYOffset);
|
|
11192
|
-
const left = (targetBox.getBoundingClientRect().left + window.pageXOffset);
|
|
11193
|
-
indicator.style.top = top + 'px';
|
|
11194
|
-
indicator.style.left = left + 'px';
|
|
11195
|
-
if(this.builder.settings.onUploadCoverImage) {
|
|
11196
|
-
this.builder.settings.onUploadCoverImage(e);
|
|
11197
|
-
} else {
|
|
11198
|
-
builderStuff.querySelector('#form-upload-cover').submit();
|
|
11199
|
-
}
|
|
11200
|
-
|
|
11201
|
-
fileCover.value = ''; // Clear Input
|
|
11202
|
-
e.preventDefault();
|
|
11203
|
-
e.stopImmediatePropagation();
|
|
11204
|
-
});
|
|
11205
|
-
*/
|
|
11206
|
-
//Box Modal
|
|
11141
|
+
dom$m.appendHtml(builderStuff, html); //Box Modal
|
|
11207
11142
|
|
|
11208
11143
|
const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
|
|
11209
11144
|
this.modalEditBox = modalEditBox;
|
|
@@ -11260,16 +11195,9 @@ class EditBox {
|
|
|
11260
11195
|
indicator.style.top = top + 'px';
|
|
11261
11196
|
indicator.style.left = left + 'px';
|
|
11262
11197
|
} else {
|
|
11263
|
-
// let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
11264
|
-
// let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
11265
|
-
// top = targetBox.getBoundingClientRect().top + adjY;
|
|
11266
|
-
// left = targetBox.getBoundingClientRect().left + adjX;
|
|
11267
|
-
// indicator.style.top = top + 'px';
|
|
11268
|
-
// indicator.style.left = left + 'px';
|
|
11269
11198
|
indicator.style.top = '0';
|
|
11270
11199
|
indicator.style.left = 'calc(50% - 68px)';
|
|
11271
|
-
}
|
|
11272
|
-
|
|
11200
|
+
}
|
|
11273
11201
|
|
|
11274
11202
|
if (this.builder.settings.onUploadCoverImage) {
|
|
11275
11203
|
this.builder.settings.onUploadCoverImage(e);
|
|
@@ -11364,7 +11292,9 @@ class EditBox {
|
|
|
11364
11292
|
}
|
|
11365
11293
|
|
|
11366
11294
|
if (currPrev) {
|
|
11367
|
-
activeBox.parentNode.insertBefore(activeBox, currPrev);
|
|
11295
|
+
activeBox.parentNode.insertBefore(activeBox, currPrev);
|
|
11296
|
+
const section = activeBox.closest('.is-section');
|
|
11297
|
+
this.builder.defineLastBox(section); //Trigger Change event
|
|
11368
11298
|
|
|
11369
11299
|
this.builder.settings.onChange();
|
|
11370
11300
|
}
|
|
@@ -11383,7 +11313,9 @@ class EditBox {
|
|
|
11383
11313
|
}
|
|
11384
11314
|
|
|
11385
11315
|
if (currNext) {
|
|
11386
|
-
activeBox.parentNode.insertBefore(currNext, activeBox);
|
|
11316
|
+
activeBox.parentNode.insertBefore(currNext, activeBox);
|
|
11317
|
+
const section = activeBox.closest('.is-section');
|
|
11318
|
+
this.builder.defineLastBox(section); //Trigger Change event
|
|
11387
11319
|
|
|
11388
11320
|
this.builder.settings.onChange();
|
|
11389
11321
|
}
|
|
@@ -12267,52 +12199,7 @@ class EditBox {
|
|
|
12267
12199
|
dom$m.removeClass(boxCentered, 'edge-y-6');
|
|
12268
12200
|
dom$m.removeClass(boxCentered, 'edge-y-7');
|
|
12269
12201
|
dom$m.removeClass(boxCentered, 'edge-y-8');
|
|
12270
|
-
} //
|
|
12271
|
-
// if (s === '-') {
|
|
12272
|
-
// if (dom.hasClass(activeBox, 'edge-y--5')) { return false; }
|
|
12273
|
-
// else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--5'); }
|
|
12274
|
-
// else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--4'); }
|
|
12275
|
-
// else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--3'); }
|
|
12276
|
-
// else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y--2'); }
|
|
12277
|
-
// else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y--1'); }
|
|
12278
|
-
// else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-0'); }
|
|
12279
|
-
// else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-1'); }
|
|
12280
|
-
// else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-2'); }
|
|
12281
|
-
// else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-3'); }
|
|
12282
|
-
// else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-4'); }
|
|
12283
|
-
// else if (dom.hasClass(activeBox, 'edge-y-6')) { dom.removeClass(activeBox, 'edge-y-6'); dom.addClass(activeBox, 'edge-y-5'); }
|
|
12284
|
-
// else { dom.addClass(activeBox, 'edge-y-0'); }
|
|
12285
|
-
// }
|
|
12286
|
-
// if (s == '+') {
|
|
12287
|
-
// if (dom.hasClass(activeBox, 'edge-y--5')) { dom.removeClass(activeBox, 'edge-y--5'); dom.addClass(activeBox, 'edge-y--4'); }
|
|
12288
|
-
// else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--3'); }
|
|
12289
|
-
// else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--2'); }
|
|
12290
|
-
// else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--1'); }
|
|
12291
|
-
// else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y-0'); }
|
|
12292
|
-
// else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y-1'); }
|
|
12293
|
-
// else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-2'); }
|
|
12294
|
-
// else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-3'); }
|
|
12295
|
-
// else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-4'); }
|
|
12296
|
-
// else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-5'); }
|
|
12297
|
-
// else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-6'); }
|
|
12298
|
-
// else if (dom.hasClass(activeBox, 'edge-y-6')) { return false; }
|
|
12299
|
-
// else { dom.addClass(activeBox, 'edge-y-0'); }
|
|
12300
|
-
// }
|
|
12301
|
-
// if (s == '') {
|
|
12302
|
-
// dom.removeClass(activeBox, 'edge-y--5');
|
|
12303
|
-
// dom.removeClass(activeBox, 'edge-y--4');
|
|
12304
|
-
// dom.removeClass(activeBox, 'edge-y--3');
|
|
12305
|
-
// dom.removeClass(activeBox, 'edge-y--2');
|
|
12306
|
-
// dom.removeClass(activeBox, 'edge-y--1');
|
|
12307
|
-
// dom.removeClass(activeBox, 'edge-y-0');
|
|
12308
|
-
// dom.removeClass(activeBox, 'edge-y-1');
|
|
12309
|
-
// dom.removeClass(activeBox, 'edge-y-2');
|
|
12310
|
-
// dom.removeClass(activeBox, 'edge-y-3');
|
|
12311
|
-
// dom.removeClass(activeBox, 'edge-y-4');
|
|
12312
|
-
// dom.removeClass(activeBox, 'edge-y-5');
|
|
12313
|
-
// dom.removeClass(boxCentered, 'edge-y-6');
|
|
12314
|
-
// }
|
|
12315
|
-
//Trigger Change event
|
|
12202
|
+
} //Trigger Change event
|
|
12316
12203
|
|
|
12317
12204
|
|
|
12318
12205
|
this.builder.settings.onChange();
|
|
@@ -12706,7 +12593,7 @@ class EditBox {
|
|
|
12706
12593
|
activeBox.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
12707
12594
|
activeBox.querySelector('.is-module-edit').style.display = 'none';
|
|
12708
12595
|
boxTool.style.width = '80px';
|
|
12709
|
-
boxTool.style.left = 'calc(50% -
|
|
12596
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
12710
12597
|
}
|
|
12711
12598
|
}
|
|
12712
12599
|
});
|
|
@@ -15116,6 +15003,28 @@ class EditBox {
|
|
|
15116
15003
|
|
|
15117
15004
|
}
|
|
15118
15005
|
|
|
15006
|
+
// import {out} from './out.js';
|
|
15007
|
+
class ControlPanel {
|
|
15008
|
+
constructor(builder) {
|
|
15009
|
+
this.builder = builder;
|
|
15010
|
+
this.builderStuff = this.builder.builderStuff;
|
|
15011
|
+
const builderStuff = this.builderStuff;
|
|
15012
|
+
let html = `
|
|
15013
|
+
<style>
|
|
15014
|
+
|
|
15015
|
+
|
|
15016
|
+
</style>
|
|
15017
|
+
<div class="is-controlpanel">
|
|
15018
|
+
|
|
15019
|
+
</div>
|
|
15020
|
+
`; // const doc = this.builder.doc;
|
|
15021
|
+
// document.body.classList.add('controlpanel');
|
|
15022
|
+
|
|
15023
|
+
builderStuff.insertAdjacentHTML('beforeend', html);
|
|
15024
|
+
}
|
|
15025
|
+
|
|
15026
|
+
}
|
|
15027
|
+
|
|
15119
15028
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
15120
15029
|
|
|
15121
15030
|
var rangyCore = {exports: {}};
|
|
@@ -20611,16 +20520,25 @@ class Util$1 {
|
|
|
20611
20520
|
// let top = emptyinfo.getBoundingClientRect().top;
|
|
20612
20521
|
// const left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
|
|
20613
20522
|
|
|
20523
|
+
/*
|
|
20614
20524
|
let top, left;
|
|
20615
|
-
if
|
|
20616
|
-
|
|
20617
|
-
|
|
20525
|
+
if(!this.builder.iframe) {
|
|
20526
|
+
top = emptyinfo.getBoundingClientRect().top;
|
|
20527
|
+
left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
|
|
20618
20528
|
} else {
|
|
20619
|
-
|
|
20620
|
-
|
|
20621
|
-
|
|
20622
|
-
|
|
20529
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
20530
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
20531
|
+
top = emptyinfo.getBoundingClientRect().top + adjY;
|
|
20532
|
+
left = emptyinfo.getBoundingClientRect().left + ((emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11) + adjX;
|
|
20623
20533
|
}
|
|
20534
|
+
*/
|
|
20535
|
+
const newPos = this.getElementPosition(emptyinfo);
|
|
20536
|
+
let top = newPos.top;
|
|
20537
|
+
let left = newPos.left;
|
|
20538
|
+
let scaleX = newPos.scaleX;
|
|
20539
|
+
let scaleY = newPos.scaleY;
|
|
20540
|
+
left = left + (emptyinfo.offsetWidth * (scaleX * this.builder.opts.zoom) / 2 - 11);
|
|
20541
|
+
top = top - (emptyinfo.offsetHeight - emptyinfo.offsetHeight * scaleY);
|
|
20624
20542
|
quickadd.style.display = 'flex';
|
|
20625
20543
|
this.showPop(quickadd, false, emptyinfo);
|
|
20626
20544
|
const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
@@ -20791,16 +20709,9 @@ class Util$1 {
|
|
|
20791
20709
|
const btnCellMore = this.colTool.querySelector('.cell-more');
|
|
20792
20710
|
columnMore.classList.add('transition1');
|
|
20793
20711
|
setTimeout(() => {
|
|
20794
|
-
|
|
20795
|
-
|
|
20796
|
-
|
|
20797
|
-
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
20798
|
-
} else {
|
|
20799
|
-
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
20800
|
-
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
20801
|
-
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
20802
|
-
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
20803
|
-
}
|
|
20712
|
+
const newPos = this.getElementPosition(btnCellMore);
|
|
20713
|
+
let top = newPos.top;
|
|
20714
|
+
let left = newPos.left;
|
|
20804
20715
|
columnMore.style.top = top + 35 + 'px';
|
|
20805
20716
|
columnMore.style.left = left - 7 + 'px';
|
|
20806
20717
|
setTimeout(() => {
|
|
@@ -22376,6 +22287,39 @@ class Util$1 {
|
|
|
22376
22287
|
}
|
|
22377
22288
|
return pageTemplate;
|
|
22378
22289
|
}
|
|
22290
|
+
getElementPosition(element) {
|
|
22291
|
+
const iframe = this.builder.iframe;
|
|
22292
|
+
let top, left;
|
|
22293
|
+
let scaleX, scaleY;
|
|
22294
|
+
if (this.builder.iframe) {
|
|
22295
|
+
let divContentView = document.querySelector('.is-content-view');
|
|
22296
|
+
if (!divContentView) divContentView = iframe.parentNode;
|
|
22297
|
+
const divContentViewStyles = window.getComputedStyle(divContentView);
|
|
22298
|
+
const transform = divContentViewStyles.transform;
|
|
22299
|
+
if (transform !== 'none') {
|
|
22300
|
+
const matrixValues = transform.match(/matrix\(([0-9., -]+)\)/)[1].split(',');
|
|
22301
|
+
scaleX = parseFloat(matrixValues[0]);
|
|
22302
|
+
scaleY = parseFloat(matrixValues[3]);
|
|
22303
|
+
} else {
|
|
22304
|
+
scaleX = 1;
|
|
22305
|
+
scaleY = 1;
|
|
22306
|
+
}
|
|
22307
|
+
const iframeRect = iframe.getBoundingClientRect();
|
|
22308
|
+
top = element.getBoundingClientRect().top * scaleY + iframeRect.top;
|
|
22309
|
+
left = element.getBoundingClientRect().left * scaleX + iframeRect.left;
|
|
22310
|
+
} else {
|
|
22311
|
+
top = element.getBoundingClientRect().top;
|
|
22312
|
+
left = element.getBoundingClientRect().left;
|
|
22313
|
+
scaleX = 1;
|
|
22314
|
+
scaleY = 1;
|
|
22315
|
+
}
|
|
22316
|
+
return {
|
|
22317
|
+
top,
|
|
22318
|
+
left,
|
|
22319
|
+
scaleX,
|
|
22320
|
+
scaleY
|
|
22321
|
+
};
|
|
22322
|
+
}
|
|
22379
22323
|
}
|
|
22380
22324
|
class Dom {
|
|
22381
22325
|
constructor(builder) {
|
|
@@ -33647,18 +33591,24 @@ class RowTool$1 {
|
|
|
33647
33591
|
let rowMore = builderStuff.querySelector('.rowmore');
|
|
33648
33592
|
dom.addClass(rowMore, 'transition1');
|
|
33649
33593
|
const elm = rowTool.querySelector('.row-more');
|
|
33594
|
+
|
|
33595
|
+
/*
|
|
33650
33596
|
let top, left;
|
|
33651
|
-
if
|
|
33652
|
-
|
|
33653
|
-
|
|
33597
|
+
if(!this.builder.iframe) {
|
|
33598
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
33599
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
33654
33600
|
} else {
|
|
33655
|
-
|
|
33656
|
-
|
|
33657
|
-
|
|
33658
|
-
|
|
33659
|
-
|
|
33660
|
-
|
|
33601
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
33602
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
33603
|
+
top = elm.getBoundingClientRect().top;
|
|
33604
|
+
left = elm.getBoundingClientRect().left;
|
|
33605
|
+
top = top + adjY;
|
|
33606
|
+
left = left + adjX;
|
|
33661
33607
|
}
|
|
33608
|
+
*/
|
|
33609
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
33610
|
+
let top = newPos.top;
|
|
33611
|
+
let left = newPos.left;
|
|
33662
33612
|
|
|
33663
33613
|
// const w = rowMore.offsetWidth;
|
|
33664
33614
|
rowMore.style.top = top - 8 + 'px';
|
|
@@ -64849,6 +64799,13 @@ class Image$1 {
|
|
|
64849
64799
|
|
|
64850
64800
|
// get active image
|
|
64851
64801
|
let activeImage = this.builder.activeImage;
|
|
64802
|
+
let newPos = this.builder.util.getElementPosition(activeImage);
|
|
64803
|
+
if (this.builder.iframe) {
|
|
64804
|
+
let scaleX = newPos.scaleX;
|
|
64805
|
+
let scaleY = newPos.scaleY;
|
|
64806
|
+
width = width / scaleX;
|
|
64807
|
+
height = height / scaleY;
|
|
64808
|
+
}
|
|
64852
64809
|
let bCircular = false;
|
|
64853
64810
|
if (dom.hasClass(activeImage.parentNode, 'img-circular')) {
|
|
64854
64811
|
activeImage = activeImage.parentNode;
|
|
@@ -64876,17 +64833,21 @@ class Image$1 {
|
|
|
64876
64833
|
}
|
|
64877
64834
|
|
|
64878
64835
|
// sync (target = imageResizer)
|
|
64879
|
-
|
|
64836
|
+
/*
|
|
64880
64837
|
let top, left;
|
|
64881
|
-
if
|
|
64882
|
-
|
|
64883
|
-
|
|
64838
|
+
if(!this.builder.iframe) {
|
|
64839
|
+
top = activeImage.getBoundingClientRect().top + window.pageYOffset;
|
|
64840
|
+
left = activeImage.getBoundingClientRect().left + window.pageXOffset;
|
|
64884
64841
|
} else {
|
|
64885
|
-
|
|
64886
|
-
|
|
64887
|
-
|
|
64888
|
-
|
|
64842
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
64843
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
64844
|
+
top = activeImage.getBoundingClientRect().top + adjY;
|
|
64845
|
+
left = activeImage.getBoundingClientRect().left+ adjX;
|
|
64889
64846
|
}
|
|
64847
|
+
*/
|
|
64848
|
+
newPos = this.builder.util.getElementPosition(activeImage);
|
|
64849
|
+
let top = newPos.top;
|
|
64850
|
+
let left = newPos.left;
|
|
64890
64851
|
target.style.top = top + 'px';
|
|
64891
64852
|
target.style.left = left + 'px';
|
|
64892
64853
|
target.style.width = activeImage.offsetWidth + 'px';
|
|
@@ -64959,7 +64920,8 @@ class Image$1 {
|
|
|
64959
64920
|
//Trigger Change event
|
|
64960
64921
|
this.builder.opts.onChange();
|
|
64961
64922
|
});
|
|
64962
|
-
document.querySelector('.moveable-control-box')
|
|
64923
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
64924
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
64963
64925
|
imageResizer.addEventListener('click', () => {
|
|
64964
64926
|
if (!this.builder.activeImage) return;
|
|
64965
64927
|
this.builder.activeImage.click();
|
|
@@ -64999,16 +64961,22 @@ class Image$1 {
|
|
|
64999
64961
|
imageProgress.style.display = 'table';
|
|
65000
64962
|
imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65001
64963
|
imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
|
|
64964
|
+
|
|
64965
|
+
/*
|
|
65002
64966
|
let top, left;
|
|
65003
|
-
if
|
|
65004
|
-
|
|
65005
|
-
|
|
64967
|
+
if(!this.builder.iframe) {
|
|
64968
|
+
top = img.getBoundingClientRect().top + window.pageYOffset;
|
|
64969
|
+
left = img.getBoundingClientRect().left + window.pageXOffset;
|
|
65006
64970
|
} else {
|
|
65007
|
-
|
|
65008
|
-
|
|
65009
|
-
|
|
65010
|
-
|
|
64971
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
64972
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
64973
|
+
top = img.getBoundingClientRect().top + adjY;
|
|
64974
|
+
left = img.getBoundingClientRect().left+ adjX;
|
|
65011
64975
|
}
|
|
64976
|
+
*/
|
|
64977
|
+
const newPos = this.builder.util.getElementPosition(img);
|
|
64978
|
+
let top = newPos.top + window.pageYOffset;
|
|
64979
|
+
let left = newPos.left + window.pageXOffset;
|
|
65012
64980
|
imageProgress.style.top = top + 'px';
|
|
65013
64981
|
imageProgress.style.left = left + 'px';
|
|
65014
64982
|
|
|
@@ -65091,7 +65059,8 @@ class Image$1 {
|
|
|
65091
65059
|
dom.addEventListener(btnImageLink, 'click', () => {
|
|
65092
65060
|
//imageTool.style.display = 'none';
|
|
65093
65061
|
|
|
65094
|
-
document.querySelector('.moveable-control-box')
|
|
65062
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65063
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65095
65064
|
|
|
65096
65065
|
if (this.builder.opts.onImageSettingClick) {
|
|
65097
65066
|
this.builder.opts.onImageSettingClick();
|
|
@@ -65150,7 +65119,8 @@ class Image$1 {
|
|
|
65150
65119
|
elm = modalImageLink.querySelector('.input-cancel');
|
|
65151
65120
|
dom.addEventListener(elm, 'click', () => {
|
|
65152
65121
|
util.hideModal(modalImageLink);
|
|
65153
|
-
document.querySelector('.moveable-control-box')
|
|
65122
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65123
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65154
65124
|
});
|
|
65155
65125
|
|
|
65156
65126
|
// Apply link to image
|
|
@@ -65465,7 +65435,8 @@ class Image$1 {
|
|
|
65465
65435
|
zoomable: false
|
|
65466
65436
|
});
|
|
65467
65437
|
}
|
|
65468
|
-
document.querySelector('.moveable-control-box')
|
|
65438
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65439
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65469
65440
|
});
|
|
65470
65441
|
|
|
65471
65442
|
// Set crop proportion
|
|
@@ -65482,7 +65453,8 @@ class Image$1 {
|
|
|
65482
65453
|
let btnCancel = modalImageEdit.querySelector('.input-cancel');
|
|
65483
65454
|
dom.addEventListener(btnCancel, 'click', () => {
|
|
65484
65455
|
util.hideModal(modalImageEdit);
|
|
65485
|
-
document.querySelector('.moveable-control-box')
|
|
65456
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65457
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block'; //needed by Safari (prevent z-index problem)
|
|
65486
65458
|
});
|
|
65487
65459
|
|
|
65488
65460
|
// Apply (crop) image
|
|
@@ -65588,23 +65560,29 @@ class Image$1 {
|
|
|
65588
65560
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65589
65561
|
elm = elm.parentNode;
|
|
65590
65562
|
}
|
|
65563
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65564
|
+
let scaleX = newPos.scaleX;
|
|
65591
65565
|
imageTool.style.display = 'flex';
|
|
65592
65566
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65593
65567
|
|
|
65594
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65568
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65595
65569
|
// let top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65596
65570
|
// let left = elm.getBoundingClientRect().left+ window.pageXOffset;
|
|
65597
65571
|
|
|
65572
|
+
/*
|
|
65598
65573
|
let top, left;
|
|
65599
|
-
if
|
|
65600
|
-
|
|
65601
|
-
|
|
65574
|
+
if(!this.builder.iframe) {
|
|
65575
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65576
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65602
65577
|
} else {
|
|
65603
|
-
|
|
65604
|
-
|
|
65605
|
-
|
|
65606
|
-
|
|
65578
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65579
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65580
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65581
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65607
65582
|
}
|
|
65583
|
+
*/
|
|
65584
|
+
let top = newPos.top + window.pageYOffset;
|
|
65585
|
+
let left = newPos.left + window.pageXOffset;
|
|
65608
65586
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65609
65587
|
|
|
65610
65588
|
//Adjust left in case an element is outside the screen
|
|
@@ -65622,12 +65600,13 @@ class Image$1 {
|
|
|
65622
65600
|
imageResizer.style.left = left + 'px';
|
|
65623
65601
|
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65624
65602
|
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
|
|
65625
|
-
imageResizer.style.display = 'block';
|
|
65603
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65626
65604
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65627
65605
|
|
|
65628
65606
|
// moveable
|
|
65629
|
-
this.builder.moveable.updateRect();
|
|
65630
|
-
document.querySelector('.moveable-control-box')
|
|
65607
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65608
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65609
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65631
65610
|
if (elm.offsetWidth === 0) {
|
|
65632
65611
|
// when there is image link applied
|
|
65633
65612
|
|
|
@@ -65643,8 +65622,9 @@ class Image$1 {
|
|
|
65643
65622
|
imageResizer.style.left = '-10px';
|
|
65644
65623
|
imageResizer.style.width = '1px';
|
|
65645
65624
|
imageResizer.style.height = '1px';
|
|
65646
|
-
this.builder.moveable.updateRect();
|
|
65647
|
-
document.querySelector('.moveable-control-box')
|
|
65625
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65626
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65627
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65648
65628
|
}
|
|
65649
65629
|
this.util.repositionColumnTool();
|
|
65650
65630
|
}, 0); // refesh() is called after img onload, so no need to have a delay.
|
|
@@ -65660,23 +65640,29 @@ class Image$1 {
|
|
|
65660
65640
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65661
65641
|
elm = elm.parentNode;
|
|
65662
65642
|
}
|
|
65643
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65644
|
+
let scaleX = newPos.scaleX;
|
|
65663
65645
|
imageTool.style.display = 'flex';
|
|
65664
65646
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65665
65647
|
|
|
65666
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65648
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65667
65649
|
// let top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65668
65650
|
// let left = elm.getBoundingClientRect().left+ window.pageXOffset;
|
|
65669
65651
|
|
|
65652
|
+
/*
|
|
65670
65653
|
let top, left;
|
|
65671
|
-
if
|
|
65672
|
-
|
|
65673
|
-
|
|
65654
|
+
if(!this.builder.iframe) {
|
|
65655
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65656
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65674
65657
|
} else {
|
|
65675
|
-
|
|
65676
|
-
|
|
65677
|
-
|
|
65678
|
-
|
|
65658
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65659
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65660
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65661
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65679
65662
|
}
|
|
65663
|
+
*/
|
|
65664
|
+
let top = newPos.top + window.pageYOffset;
|
|
65665
|
+
let left = newPos.left + window.pageXOffset;
|
|
65680
65666
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65681
65667
|
|
|
65682
65668
|
//Adjust left in case an element is outside the screen
|
|
@@ -65694,12 +65680,13 @@ class Image$1 {
|
|
|
65694
65680
|
imageResizer.style.left = left + 'px';
|
|
65695
65681
|
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65696
65682
|
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
|
|
65697
|
-
imageResizer.style.display = 'block';
|
|
65683
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65698
65684
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65699
65685
|
|
|
65700
65686
|
// moveable
|
|
65701
|
-
this.builder.moveable.updateRect();
|
|
65702
|
-
document.querySelector('.moveable-control-box')
|
|
65687
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65688
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65689
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65703
65690
|
}
|
|
65704
65691
|
}
|
|
65705
65692
|
click(e) {
|
|
@@ -65718,21 +65705,28 @@ class Image$1 {
|
|
|
65718
65705
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65719
65706
|
elm = elm.parentNode;
|
|
65720
65707
|
}
|
|
65708
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65709
|
+
let scaleX = newPos.scaleX;
|
|
65721
65710
|
let imageTool = this.imageTool;
|
|
65722
65711
|
imageTool.style.display = 'flex';
|
|
65723
65712
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65724
65713
|
|
|
65725
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65714
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65715
|
+
|
|
65716
|
+
/*
|
|
65726
65717
|
let top, left;
|
|
65727
|
-
if
|
|
65728
|
-
|
|
65729
|
-
|
|
65718
|
+
if(!this.builder.iframe) {
|
|
65719
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65720
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65730
65721
|
} else {
|
|
65731
|
-
|
|
65732
|
-
|
|
65733
|
-
|
|
65734
|
-
|
|
65722
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65723
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65724
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65725
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65735
65726
|
}
|
|
65727
|
+
*/
|
|
65728
|
+
let top = newPos.top + window.pageYOffset;
|
|
65729
|
+
let left = newPos.left + window.pageXOffset;
|
|
65736
65730
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65737
65731
|
|
|
65738
65732
|
//Adjust left in case an element is outside the screen
|
|
@@ -65749,21 +65743,29 @@ class Image$1 {
|
|
|
65749
65743
|
// Image Resizer
|
|
65750
65744
|
if (!elm.hasAttribute('data-noresize')) {
|
|
65751
65745
|
let imageResizer = this.imageResizer;
|
|
65746
|
+
|
|
65747
|
+
/*
|
|
65752
65748
|
let top, left;
|
|
65753
|
-
if
|
|
65754
|
-
|
|
65755
|
-
|
|
65749
|
+
if(!this.builder.iframe) {
|
|
65750
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65751
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65756
65752
|
} else {
|
|
65757
|
-
|
|
65758
|
-
|
|
65759
|
-
|
|
65760
|
-
|
|
65753
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65754
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65755
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65756
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65761
65757
|
}
|
|
65758
|
+
*/
|
|
65759
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65760
|
+
let top = newPos.top + window.pageYOffset;
|
|
65761
|
+
let left = newPos.left + window.pageXOffset;
|
|
65762
|
+
let scaleX = newPos.scaleX;
|
|
65763
|
+
let scaleY = newPos.scaleY;
|
|
65762
65764
|
imageResizer.style.top = top + 'px';
|
|
65763
65765
|
imageResizer.style.left = left + 'px';
|
|
65764
|
-
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65765
|
-
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
|
|
65766
|
-
imageResizer.style.display = 'block';
|
|
65766
|
+
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom * scaleX + 'px';
|
|
65767
|
+
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom * scaleY + 'px';
|
|
65768
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65767
65769
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65768
65770
|
|
|
65769
65771
|
//Get & save original image width
|
|
@@ -65778,8 +65780,9 @@ class Image$1 {
|
|
|
65778
65780
|
imageResizer.setAttribute('data-width', Math.round(imgwidthpx));
|
|
65779
65781
|
|
|
65780
65782
|
// moveable
|
|
65781
|
-
this.builder.moveable.updateRect();
|
|
65782
|
-
document.querySelector('.moveable-control-box')
|
|
65783
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65784
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65785
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65783
65786
|
|
|
65784
65787
|
/*
|
|
65785
65788
|
if(elm.getAttribute('data-mov')!=='1'){
|
|
@@ -65891,8 +65894,9 @@ class Image$1 {
|
|
|
65891
65894
|
imageResizer.style.left = '-10px';
|
|
65892
65895
|
imageResizer.style.width = '1px';
|
|
65893
65896
|
imageResizer.style.height = '1px';
|
|
65894
|
-
this.builder.moveable.updateRect();
|
|
65895
|
-
document.querySelector('.moveable-control-box')
|
|
65897
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65898
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65899
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65896
65900
|
}
|
|
65897
65901
|
let prog = false;
|
|
65898
65902
|
if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
|
|
@@ -65909,8 +65913,9 @@ class Image$1 {
|
|
|
65909
65913
|
imageResizer.style.left = '-10px';
|
|
65910
65914
|
imageResizer.style.width = '1px';
|
|
65911
65915
|
imageResizer.style.height = '1px';
|
|
65912
|
-
this.builder.moveable.updateRect();
|
|
65913
|
-
document.querySelector('.moveable-control-box')
|
|
65916
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65917
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65918
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65914
65919
|
}
|
|
65915
65920
|
|
|
65916
65921
|
// NOTE:
|
|
@@ -65935,8 +65940,9 @@ class Image$1 {
|
|
|
65935
65940
|
imageResizer.style.left = '-10px';
|
|
65936
65941
|
imageResizer.style.width = '1px';
|
|
65937
65942
|
imageResizer.style.height = '1px';
|
|
65938
|
-
this.builder.moveable.updateRect();
|
|
65939
|
-
document.querySelector('.moveable-control-box')
|
|
65943
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65944
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65945
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65940
65946
|
}
|
|
65941
65947
|
} else {
|
|
65942
65948
|
let imageTool = this.imageTool;
|
|
@@ -65950,8 +65956,9 @@ class Image$1 {
|
|
|
65950
65956
|
imageResizer.style.left = '-10px';
|
|
65951
65957
|
imageResizer.style.width = '1px';
|
|
65952
65958
|
imageResizer.style.height = '1px';
|
|
65953
|
-
this.builder.moveable.updateRect();
|
|
65954
|
-
document.querySelector('.moveable-control-box')
|
|
65959
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65960
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65961
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65955
65962
|
}
|
|
65956
65963
|
}
|
|
65957
65964
|
|
|
@@ -65979,6 +65986,11 @@ class Image$1 {
|
|
|
65979
65986
|
let imageResizer = document.querySelector('#divImageResizer');
|
|
65980
65987
|
imageResizer.style.width = width * this.builder.opts.zoom + 'px';
|
|
65981
65988
|
imageResizer.style.height = height * this.builder.opts.zoom + 'px';
|
|
65989
|
+
const newPos = this.builder.util.getElementPosition(imageResizer);
|
|
65990
|
+
let scaleX = newPos.scaleX;
|
|
65991
|
+
let scaleY = newPos.scaleY;
|
|
65992
|
+
imageResizer.style.width = width * this.builder.opts.zoom * scaleX + 'px';
|
|
65993
|
+
imageResizer.style.height = height * this.builder.opts.zoom * scaleY + 'px';
|
|
65982
65994
|
}
|
|
65983
65995
|
processImage(file, targetImg, processImageDone) {
|
|
65984
65996
|
//file can also be an URL (from the same host), ex. file = "/assets/image.jpg";
|
|
@@ -73183,15 +73195,25 @@ class RowTool {
|
|
|
73183
73195
|
let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
|
|
73184
73196
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
73185
73197
|
tabs.style.display = 'flex';
|
|
73198
|
+
|
|
73199
|
+
/*
|
|
73186
73200
|
let top, left;
|
|
73187
|
-
if
|
|
73188
|
-
|
|
73189
|
-
|
|
73201
|
+
if(!this.builder.iframe) {
|
|
73202
|
+
top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
|
|
73203
|
+
left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
|
|
73190
73204
|
} else {
|
|
73191
|
-
|
|
73192
|
-
|
|
73193
|
-
|
|
73194
|
-
|
|
73205
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73206
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73207
|
+
top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
|
|
73208
|
+
left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
|
|
73209
|
+
}
|
|
73210
|
+
*/
|
|
73211
|
+
const newPos = this.util.getElementPosition(btnCellAdd);
|
|
73212
|
+
let top = newPos.top + window.pageYOffset;
|
|
73213
|
+
let left = newPos.left + window.pageXOffset;
|
|
73214
|
+
if (this.builder.iframe) {
|
|
73215
|
+
// top = top;
|
|
73216
|
+
left = left + 3;
|
|
73195
73217
|
}
|
|
73196
73218
|
|
|
73197
73219
|
// quickadd.style.display = 'flex';
|
|
@@ -73218,16 +73240,22 @@ class RowTool {
|
|
|
73218
73240
|
if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
|
|
73219
73241
|
let cell = util.cellSelected();
|
|
73220
73242
|
if (!cell) return;
|
|
73243
|
+
|
|
73244
|
+
/*
|
|
73221
73245
|
let top, left;
|
|
73222
|
-
if
|
|
73223
|
-
|
|
73224
|
-
|
|
73246
|
+
if(!this.builder.iframe) {
|
|
73247
|
+
top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73248
|
+
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73225
73249
|
} else {
|
|
73226
|
-
|
|
73227
|
-
|
|
73228
|
-
|
|
73229
|
-
|
|
73250
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73251
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73252
|
+
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
73253
|
+
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
73230
73254
|
}
|
|
73255
|
+
*/
|
|
73256
|
+
const newPos = this.util.getElementPosition(btnCellMore);
|
|
73257
|
+
let top = newPos.top + window.pageYOffset;
|
|
73258
|
+
let left = newPos.left + window.pageXOffset;
|
|
73231
73259
|
const columnMore = builderStuff.querySelector('.columnmore');
|
|
73232
73260
|
|
|
73233
73261
|
// columnMore.style.display = 'flex';
|
|
@@ -73283,7 +73311,7 @@ class RowTool {
|
|
|
73283
73311
|
// Grid Editor Status
|
|
73284
73312
|
// On/off outline button
|
|
73285
73313
|
const btnGridOutline = grideditor.querySelector('.grid-outline');
|
|
73286
|
-
const container =
|
|
73314
|
+
const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
|
|
73287
73315
|
if (container.hasAttribute('gridoutline')) {
|
|
73288
73316
|
dom.addClass(btnGridOutline, 'on');
|
|
73289
73317
|
} else {
|
|
@@ -73323,16 +73351,21 @@ class RowTool {
|
|
|
73323
73351
|
// const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73324
73352
|
// const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73325
73353
|
|
|
73354
|
+
/*
|
|
73326
73355
|
let top, left;
|
|
73327
|
-
if
|
|
73328
|
-
|
|
73329
|
-
|
|
73356
|
+
if(!this.builder.iframe) {
|
|
73357
|
+
top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73358
|
+
left = btnMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73330
73359
|
} else {
|
|
73331
|
-
|
|
73332
|
-
|
|
73333
|
-
|
|
73334
|
-
|
|
73360
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73361
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73362
|
+
top = btnMore.getBoundingClientRect().top + adjY;
|
|
73363
|
+
left = btnMore.getBoundingClientRect().left + adjX;
|
|
73335
73364
|
}
|
|
73365
|
+
*/
|
|
73366
|
+
const newPos = this.util.getElementPosition(btnMore);
|
|
73367
|
+
let top = newPos.top + window.pageYOffset;
|
|
73368
|
+
let left = newPos.left + window.pageXOffset;
|
|
73336
73369
|
|
|
73337
73370
|
// rowMore.style.display = 'flex';
|
|
73338
73371
|
util.showPop(rowMore, false, btnMore);
|
|
@@ -73509,16 +73542,22 @@ class RowAddTool {
|
|
|
73509
73542
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
73510
73543
|
tabs.style.display = 'none';
|
|
73511
73544
|
const viewportHeight = window.innerHeight;
|
|
73545
|
+
|
|
73546
|
+
/*
|
|
73512
73547
|
let top, left;
|
|
73513
|
-
if
|
|
73514
|
-
|
|
73515
|
-
|
|
73548
|
+
if(!this.builder.iframe) {
|
|
73549
|
+
top = btnRowAdd.getBoundingClientRect().top;
|
|
73550
|
+
left = btnRowAdd.getBoundingClientRect().left;
|
|
73516
73551
|
} else {
|
|
73517
|
-
|
|
73518
|
-
|
|
73519
|
-
|
|
73520
|
-
|
|
73552
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
73553
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
73554
|
+
top = btnRowAdd.getBoundingClientRect().top + adjY;
|
|
73555
|
+
left = btnRowAdd.getBoundingClientRect().left + adjX;
|
|
73521
73556
|
}
|
|
73557
|
+
*/
|
|
73558
|
+
const newPos = util.getElementPosition(btnRowAdd);
|
|
73559
|
+
let top = newPos.top;
|
|
73560
|
+
let left = newPos.left;
|
|
73522
73561
|
|
|
73523
73562
|
// quickadd.style.display = 'flex';
|
|
73524
73563
|
util.showPop(quickadd, false, btnRowAdd);
|
|
@@ -81360,17 +81399,22 @@ class ElementTool {
|
|
|
81360
81399
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
81361
81400
|
tabs.style.display = 'none';
|
|
81362
81401
|
const viewportHeight = window.innerHeight;
|
|
81402
|
+
|
|
81403
|
+
/*
|
|
81363
81404
|
let top, left;
|
|
81364
|
-
if
|
|
81365
|
-
|
|
81366
|
-
|
|
81405
|
+
if(!this.builder.iframe) {
|
|
81406
|
+
top = elmAdd.getBoundingClientRect().top;
|
|
81407
|
+
left = elmAdd.getBoundingClientRect().left;
|
|
81367
81408
|
} else {
|
|
81368
|
-
|
|
81369
|
-
|
|
81370
|
-
|
|
81371
|
-
|
|
81372
|
-
left = elmAdd.getBoundingClientRect().left + adjX;
|
|
81409
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
|
|
81410
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
|
|
81411
|
+
top = elmAdd.getBoundingClientRect().top + adjY ;
|
|
81412
|
+
left = elmAdd.getBoundingClientRect().left + adjX;
|
|
81373
81413
|
}
|
|
81414
|
+
*/
|
|
81415
|
+
const newPos = this.builder.util.getElementPosition(elmAdd);
|
|
81416
|
+
let top = newPos.top;
|
|
81417
|
+
let left = newPos.left;
|
|
81374
81418
|
|
|
81375
81419
|
// quickadd.style.display = 'flex';
|
|
81376
81420
|
util.showPop(quickadd, false, elmAdd);
|
|
@@ -81483,17 +81527,22 @@ class ElementTool {
|
|
|
81483
81527
|
const btnMore = elementTool.querySelector('.elm-more');
|
|
81484
81528
|
dom.addEventListener(btnMore, 'click', () => {
|
|
81485
81529
|
const viewportHeight = window.innerHeight;
|
|
81530
|
+
|
|
81531
|
+
/*
|
|
81486
81532
|
let top, left;
|
|
81487
|
-
if
|
|
81488
|
-
|
|
81489
|
-
|
|
81533
|
+
if(!this.builder.iframe) {
|
|
81534
|
+
top = btnMore.getBoundingClientRect().top;
|
|
81535
|
+
left = btnMore.getBoundingClientRect().left;
|
|
81490
81536
|
} else {
|
|
81491
|
-
|
|
81492
|
-
|
|
81493
|
-
|
|
81494
|
-
|
|
81495
|
-
left = btnMore.getBoundingClientRect().left + adjX;
|
|
81537
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
|
|
81538
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
|
|
81539
|
+
top = btnMore.getBoundingClientRect().top + adjY;
|
|
81540
|
+
left = btnMore.getBoundingClientRect().left + adjX;
|
|
81496
81541
|
}
|
|
81542
|
+
*/
|
|
81543
|
+
const newPos = this.builder.util.getElementPosition(btnMore);
|
|
81544
|
+
let top = newPos.top;
|
|
81545
|
+
let left = newPos.left;
|
|
81497
81546
|
|
|
81498
81547
|
// elementMore.style.display = 'flex';
|
|
81499
81548
|
util.showPop(elementMore, false, btnMore);
|
|
@@ -81659,18 +81708,24 @@ class ElementTool {
|
|
|
81659
81708
|
dom.addClass(elementMore, 'transition1');
|
|
81660
81709
|
let elmMore = elementTool.querySelector('.elm-more');
|
|
81661
81710
|
const viewportHeight = window.innerHeight;
|
|
81711
|
+
|
|
81712
|
+
/*
|
|
81662
81713
|
let top, left;
|
|
81663
|
-
if
|
|
81664
|
-
|
|
81665
|
-
|
|
81714
|
+
if(!this.builder.iframe) {
|
|
81715
|
+
top = elmMore.getBoundingClientRect().top;
|
|
81716
|
+
left = elmMore.getBoundingClientRect().left;
|
|
81666
81717
|
} else {
|
|
81667
|
-
|
|
81668
|
-
|
|
81669
|
-
|
|
81670
|
-
|
|
81671
|
-
|
|
81672
|
-
|
|
81718
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
81719
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
81720
|
+
top = elmMore.getBoundingClientRect().top;
|
|
81721
|
+
left = elmMore.getBoundingClientRect().left;
|
|
81722
|
+
top = top + adjY;
|
|
81723
|
+
left = left + adjX;
|
|
81673
81724
|
}
|
|
81725
|
+
*/
|
|
81726
|
+
const newPos = this.builder.util.getElementPosition(elmMore);
|
|
81727
|
+
let top = newPos.top;
|
|
81728
|
+
let left = newPos.left;
|
|
81674
81729
|
|
|
81675
81730
|
// elementMore.style.display = 'flex';
|
|
81676
81731
|
const btnMore = elementTool.querySelector('.elm-more');
|
|
@@ -88321,11 +88376,20 @@ class Tooltip {
|
|
|
88321
88376
|
let top, left;
|
|
88322
88377
|
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
88323
88378
|
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
88379
|
+
|
|
88380
|
+
/*
|
|
88381
|
+
if(iframe) {
|
|
88382
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
88383
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
88384
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
88385
|
+
left = elm.getBoundingClientRect().left + adjX;
|
|
88386
|
+
}
|
|
88387
|
+
*/
|
|
88388
|
+
|
|
88324
88389
|
if (iframe) {
|
|
88325
|
-
|
|
88326
|
-
|
|
88327
|
-
|
|
88328
|
-
left = elm.getBoundingClientRect().left + adjX;
|
|
88390
|
+
const newPos = this.util.getElementPosition(elm);
|
|
88391
|
+
top = newPos.top;
|
|
88392
|
+
left = newPos.left;
|
|
88329
88393
|
}
|
|
88330
88394
|
|
|
88331
88395
|
//console.log(top + ' - ' + left);
|
|
@@ -90445,6 +90509,8 @@ class ContentStuff$1 {
|
|
|
90445
90509
|
|
|
90446
90510
|
.is-tool.is-element-tool {
|
|
90447
90511
|
background: rgba(243, 243, 243, 0.9);
|
|
90512
|
+
border-radius: 3px;
|
|
90513
|
+
overflow: hidden;
|
|
90448
90514
|
}
|
|
90449
90515
|
.is-tool.is-element-tool button {
|
|
90450
90516
|
width: 25px;
|
|
@@ -90492,6 +90558,8 @@ class ContentStuff$1 {
|
|
|
90492
90558
|
width: auto;
|
|
90493
90559
|
left: auto;
|
|
90494
90560
|
right: -30px;
|
|
90561
|
+
border-radius: 2px;
|
|
90562
|
+
overflow: hidden;
|
|
90495
90563
|
}
|
|
90496
90564
|
|
|
90497
90565
|
.is-tool.is-row-tool button {
|
|
@@ -90626,6 +90694,9 @@ class ContentStuff$1 {
|
|
|
90626
90694
|
flex-direction: row;
|
|
90627
90695
|
margin-top: 0px;
|
|
90628
90696
|
margin-left: -1px;
|
|
90697
|
+
box-shadow: none;
|
|
90698
|
+
border-radius: 2px;
|
|
90699
|
+
overflow: hidden;
|
|
90629
90700
|
}
|
|
90630
90701
|
.is-tool.is-col-tool button {
|
|
90631
90702
|
width: 25px;
|
|
@@ -94087,6 +94158,9 @@ class ContentBuilder {
|
|
|
94087
94158
|
toolbar: 'top',
|
|
94088
94159
|
toolbarDisplay: 'auto',
|
|
94089
94160
|
shortenHTML: true,
|
|
94161
|
+
simpleEditingBreakpoint: '970px',
|
|
94162
|
+
// iframe only
|
|
94163
|
+
|
|
94090
94164
|
resizeHeight: false,
|
|
94091
94165
|
snippetsSidebarDisplay: 'auto',
|
|
94092
94166
|
// snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
|
|
@@ -94967,6 +95041,12 @@ class ContentBuilder {
|
|
|
94967
95041
|
this.win = win;
|
|
94968
95042
|
this.doc = doc;
|
|
94969
95043
|
this.doc.body.classList.add('data-editor');
|
|
95044
|
+
|
|
95045
|
+
// Disable on mobile
|
|
95046
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
95047
|
+
if (viewportWidth <= 768) {
|
|
95048
|
+
this.hideImageResizer = true;
|
|
95049
|
+
}
|
|
94970
95050
|
const dom = new Dom(this);
|
|
94971
95051
|
this.dom = dom;
|
|
94972
95052
|
const util = new Util$1(this); // General utilities
|
|
@@ -95124,6 +95204,12 @@ class ContentBuilder {
|
|
|
95124
95204
|
this.win.addEventListener('resize', this.doWindowResize = () => {
|
|
95125
95205
|
this.util.clearActiveCell();
|
|
95126
95206
|
this.util.clearControls();
|
|
95207
|
+
|
|
95208
|
+
// Disable on mobile
|
|
95209
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
95210
|
+
if (viewportWidth <= 768) {
|
|
95211
|
+
this.hideImageResizer = true;
|
|
95212
|
+
}
|
|
95127
95213
|
});
|
|
95128
95214
|
}
|
|
95129
95215
|
|
|
@@ -97516,8 +97602,12 @@ class ContentBuilder {
|
|
|
97516
97602
|
|
|
97517
97603
|
// Enable resizable on click
|
|
97518
97604
|
if (!col.classList.contains('noresize')) {
|
|
97519
|
-
|
|
97520
|
-
this.
|
|
97605
|
+
// Disable on mobile
|
|
97606
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
97607
|
+
if (viewportWidth > 768) {
|
|
97608
|
+
this.resize = new Resize(col, this);
|
|
97609
|
+
this.resize.enable();
|
|
97610
|
+
}
|
|
97521
97611
|
}
|
|
97522
97612
|
}
|
|
97523
97613
|
if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
|
|
@@ -99825,6 +99915,19 @@ class ContentStuff {
|
|
|
99825
99915
|
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
99826
99916
|
<path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
99827
99917
|
</symbol>
|
|
99918
|
+
|
|
99919
|
+
<symbol id="icon-arrow-down2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
99920
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
99921
|
+
<path d="M12 5l0 14"></path>
|
|
99922
|
+
<path d="M18 13l-6 6"></path>
|
|
99923
|
+
<path d="M6 13l6 6"></path>
|
|
99924
|
+
</symbol>
|
|
99925
|
+
<symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
99926
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
99927
|
+
<path d="M18 6l-12 12"></path>
|
|
99928
|
+
<path d="M6 6l12 12"></path>
|
|
99929
|
+
</symbol>
|
|
99930
|
+
|
|
99828
99931
|
</defs>
|
|
99829
99932
|
</svg>
|
|
99830
99933
|
|
|
@@ -99845,12 +99948,15 @@ class ContentStuff {
|
|
|
99845
99948
|
outline: none;
|
|
99846
99949
|
text-align: center;
|
|
99847
99950
|
cursor: pointer;
|
|
99848
|
-
|
|
99951
|
+
|
|
99952
|
+
border-radius: 0;
|
|
99953
|
+
border-top-left-radius: 3px;
|
|
99954
|
+
border-top-right-radius: 3px;
|
|
99849
99955
|
overflow: hidden;
|
|
99850
99956
|
}
|
|
99851
99957
|
.is-box-tool button {
|
|
99852
|
-
width:
|
|
99853
|
-
height:
|
|
99958
|
+
width: 35px !important;
|
|
99959
|
+
height: 35px !important;
|
|
99854
99960
|
cursor: pointer;
|
|
99855
99961
|
}
|
|
99856
99962
|
.is-box-tool button svg {
|
|
@@ -99863,37 +99969,6 @@ class ContentStuff {
|
|
|
99863
99969
|
background: #FF9800;
|
|
99864
99970
|
}
|
|
99865
99971
|
|
|
99866
|
-
.is-section-tool {
|
|
99867
|
-
display: none;
|
|
99868
|
-
z-index: 1;
|
|
99869
|
-
position: absolute;
|
|
99870
|
-
top: 15%;
|
|
99871
|
-
right: 0px;
|
|
99872
|
-
left: auto;
|
|
99873
|
-
width: 40px;
|
|
99874
|
-
height: 80px;
|
|
99875
|
-
}
|
|
99876
|
-
.is-section-tool > button {
|
|
99877
|
-
width: 40px;
|
|
99878
|
-
height: 40px;
|
|
99879
|
-
border-radius: 0;
|
|
99880
|
-
line-height: 40px;
|
|
99881
|
-
padding: 0px;
|
|
99882
|
-
font-size: 13px;
|
|
99883
|
-
cursor: pointer;
|
|
99884
|
-
border: none;
|
|
99885
|
-
}
|
|
99886
|
-
.is-section-tool .is-section-edit {
|
|
99887
|
-
background: rgb(0, 172, 214);
|
|
99888
|
-
}
|
|
99889
|
-
.is-section-tool .is-section-edit svg {
|
|
99890
|
-
fill: #fff !important;
|
|
99891
|
-
}
|
|
99892
|
-
.is-section-tool .is-section-remove {
|
|
99893
|
-
background: rgb(247, 99, 46);
|
|
99894
|
-
color: #fff !important;
|
|
99895
|
-
}
|
|
99896
|
-
|
|
99897
99972
|
.is-wrapper {
|
|
99898
99973
|
opacity: 0.01;
|
|
99899
99974
|
/* setting display=none makes initial script may not work properly */
|
|
@@ -99933,193 +100008,6 @@ class ContentStuff {
|
|
|
99933
100008
|
overflow-y: unset !important;
|
|
99934
100009
|
}
|
|
99935
100010
|
|
|
99936
|
-
${this.builder.iframe ? '' : `
|
|
99937
|
-
.is-wrapper.is-edit {
|
|
99938
|
-
padding-left: 61px;
|
|
99939
|
-
}
|
|
99940
|
-
.is-wrapper.is-edit .is-section.is-section-navbar,
|
|
99941
|
-
.is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
|
|
99942
|
-
left: 0;
|
|
99943
|
-
margin-left: 60px;
|
|
99944
|
-
width: calc(100% - 60px);
|
|
99945
|
-
}
|
|
99946
|
-
.is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
|
|
99947
|
-
width: 100%;
|
|
99948
|
-
margin-left: unset;
|
|
99949
|
-
}
|
|
99950
|
-
`}
|
|
99951
|
-
|
|
99952
|
-
/* protected section */
|
|
99953
|
-
.is-section.protected .is-box-tool {
|
|
99954
|
-
display: none !important;
|
|
99955
|
-
}
|
|
99956
|
-
.is-section.protected .is-box-info {
|
|
99957
|
-
display: none !important;
|
|
99958
|
-
}
|
|
99959
|
-
|
|
99960
|
-
/* manual selection during animation edit */
|
|
99961
|
-
.hard-select .is-box-tool {
|
|
99962
|
-
display: none !important;
|
|
99963
|
-
}
|
|
99964
|
-
.hard-select .is-box-info {
|
|
99965
|
-
display: none !important;
|
|
99966
|
-
}
|
|
99967
|
-
.hard-select .is-section-tool {
|
|
99968
|
-
display: none !important;
|
|
99969
|
-
}
|
|
99970
|
-
.hard-select .box-select {
|
|
99971
|
-
outline: #00da89 1px solid;
|
|
99972
|
-
outline-offset: -1px;
|
|
99973
|
-
z-index: 1;
|
|
99974
|
-
}
|
|
99975
|
-
.hard-select .box-select .is-box-tool {
|
|
99976
|
-
display: flex !important;
|
|
99977
|
-
}
|
|
99978
|
-
.hard-select .box-select .is-box-info {
|
|
99979
|
-
display: flex !important;
|
|
99980
|
-
}
|
|
99981
|
-
.hard-select .box-select .is-overlay {
|
|
99982
|
-
z-index: -1;
|
|
99983
|
-
}
|
|
99984
|
-
.hard-select .section-select .is-section-tool {
|
|
99985
|
-
display: block !important;
|
|
99986
|
-
}
|
|
99987
|
-
|
|
99988
|
-
/* drop block as section */
|
|
99989
|
-
.is-wrapper > .sortable-ghost {
|
|
99990
|
-
height: 40px !important;
|
|
99991
|
-
min-height: unset !important;
|
|
99992
|
-
background: rgba(204, 204, 204, 0.15) !important;
|
|
99993
|
-
}
|
|
99994
|
-
.is-wrapper > .sortable-ghost * {
|
|
99995
|
-
opacity: 0 !important;
|
|
99996
|
-
}
|
|
99997
|
-
|
|
99998
|
-
/* toggle tool */
|
|
99999
|
-
.is-wrapper.is-clean-edit.hard-select .box-select .is-box-tool,
|
|
100000
|
-
.is-wrapper.is-clean-edit .box-select .is-box-tool {
|
|
100001
|
-
display: none !important;
|
|
100002
|
-
}
|
|
100003
|
-
.is-wrapper.is-clean-edit.hard-select .box-select .is-box-info,
|
|
100004
|
-
.is-wrapper.is-clean-edit .box-select .is-box-tool {
|
|
100005
|
-
display: none !important;
|
|
100006
|
-
}
|
|
100007
|
-
.is-wrapper.is-clean-edit.hard-select .section-select .is-section-tool,
|
|
100008
|
-
.is-wrapper.is-clean-edit .section-select .is-section-tool {
|
|
100009
|
-
display: none !important;
|
|
100010
|
-
}
|
|
100011
|
-
.is-wrapper.is-clean-edit.hard-select .box-select,
|
|
100012
|
-
.is-wrapper.is-clean-edit .box-select {
|
|
100013
|
-
outline: none !important;
|
|
100014
|
-
}
|
|
100015
|
-
|
|
100016
|
-
/* clean UI for selection only */
|
|
100017
|
-
/*
|
|
100018
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .box-select .is-box-tool,
|
|
100019
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper .box-select .is-box-tool {
|
|
100020
|
-
display: none !important;
|
|
100021
|
-
}
|
|
100022
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .box-select .is-box-info,
|
|
100023
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper .box-select .is-box-info {
|
|
100024
|
-
display: none !important;
|
|
100025
|
-
}
|
|
100026
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper.hard-select .section-select .is-section-tool,
|
|
100027
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper .section-select .is-section-tool {
|
|
100028
|
-
display: none !important;
|
|
100029
|
-
}
|
|
100030
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper .is-rowadd-tool {
|
|
100031
|
-
display: none !important;
|
|
100032
|
-
}
|
|
100033
|
-
.selection-only:not([data-skrollrr-off]) .is-wrapper .is-tool {
|
|
100034
|
-
display: none !important;
|
|
100035
|
-
}
|
|
100036
|
-
.selection-only:not([data-skrollrr-off]) .is-tool {
|
|
100037
|
-
z-index: -10000 !important;
|
|
100038
|
-
}
|
|
100039
|
-
*/
|
|
100040
|
-
|
|
100041
|
-
/* box info */
|
|
100042
|
-
.is-wrapper .is-box-info {
|
|
100043
|
-
position: absolute;
|
|
100044
|
-
z-index: 1;
|
|
100045
|
-
top: 15px;
|
|
100046
|
-
right: 15px;
|
|
100047
|
-
left: auto;
|
|
100048
|
-
width: auto;
|
|
100049
|
-
display: none;
|
|
100050
|
-
border-radius: 50px;
|
|
100051
|
-
overflow:hidden;
|
|
100052
|
-
background: rgba(243, 243, 243, 0.9);
|
|
100053
|
-
width: 92px;
|
|
100054
|
-
justify-content: center;
|
|
100055
|
-
}
|
|
100056
|
-
.is-wrapper .is-box-info button {
|
|
100057
|
-
width:28px;
|
|
100058
|
-
height:28px;
|
|
100059
|
-
cursor:pointer;
|
|
100060
|
-
}
|
|
100061
|
-
.is-wrapper .box-select .is-box-info {
|
|
100062
|
-
display: flex;
|
|
100063
|
-
}
|
|
100064
|
-
.is-wrapper .is-section-navbar .is-box-info {
|
|
100065
|
-
display: none !important;
|
|
100066
|
-
}
|
|
100067
|
-
div.is-section-navbar + div .is-box-info {
|
|
100068
|
-
top: 90px;
|
|
100069
|
-
}
|
|
100070
|
-
|
|
100071
|
-
/* section info */
|
|
100072
|
-
.is-wrapper .is-section-info {
|
|
100073
|
-
position: absolute;
|
|
100074
|
-
z-index: 1;
|
|
100075
|
-
top: 3px;
|
|
100076
|
-
left: 3px;
|
|
100077
|
-
display: none;
|
|
100078
|
-
}
|
|
100079
|
-
.is-wrapper .is-section-info > div {
|
|
100080
|
-
width: auto;
|
|
100081
|
-
height: auto;
|
|
100082
|
-
padding: 5px 20px;
|
|
100083
|
-
background-color: rgb(255, 239, 100);
|
|
100084
|
-
color: #111;
|
|
100085
|
-
font-family: sans-serif;
|
|
100086
|
-
letter-spacing: 2px;
|
|
100087
|
-
font-size: 17px;
|
|
100088
|
-
}
|
|
100089
|
-
.is-wrapper .section-select .is-section-info {
|
|
100090
|
-
display: block;
|
|
100091
|
-
}
|
|
100092
|
-
|
|
100093
|
-
/* To make editing possible on wide content */
|
|
100094
|
-
.is-wrapper.is-edit .section-wide-250 .is-box-centered { /*old structure*/
|
|
100095
|
-
overflow-x: auto;
|
|
100096
|
-
overflow-y: hidden;
|
|
100097
|
-
}
|
|
100098
|
-
|
|
100099
|
-
.is-wrapper.is-container-edit > div.section-wide-250.section-select,
|
|
100100
|
-
.is-wrapper.is-clean-edit > div.section-wide-250.section-select,
|
|
100101
|
-
.is-wrapper.is-edit .section-wide-250 {
|
|
100102
|
-
overflow-x: auto !important;
|
|
100103
|
-
overflow-y: hidden !important;
|
|
100104
|
-
}
|
|
100105
|
-
|
|
100106
|
-
.is-wrapper.is-edit .section-wide-250 .is-container > div > div { /* To make col tool visible */
|
|
100107
|
-
max-height: 90vh;
|
|
100108
|
-
}
|
|
100109
|
-
|
|
100110
|
-
/* Hide on Zoom */
|
|
100111
|
-
.hard-select .section-select .is-section-tool[data-section-active],
|
|
100112
|
-
.is-section-tool[data-section-active] {
|
|
100113
|
-
display: none !important;
|
|
100114
|
-
}
|
|
100115
|
-
.hard-select .box-select .is-box-tool[data-box-active],
|
|
100116
|
-
.is-box-tool[data-box-active] {
|
|
100117
|
-
display: none !important;
|
|
100118
|
-
}
|
|
100119
|
-
.hard-select .box-select .is-box-info[data-boxinfo-active],
|
|
100120
|
-
.is-box-info[data-boxinfo-active] {
|
|
100121
|
-
display: none !important;
|
|
100122
|
-
}
|
|
100123
100011
|
`; // .is-wrapper.is-edit > div {
|
|
100124
100012
|
// overflow-x: unset;
|
|
100125
100013
|
// overflow-y: unset;
|
|
@@ -115263,18 +115151,22 @@ ${currentHtml}
|
|
|
115263
115151
|
const pop = this.popAIMore;
|
|
115264
115152
|
let btn = this.builder.activeBox.querySelector('.input-box-more');
|
|
115265
115153
|
this.builder.editor.util.showPop(pop, false, btn);
|
|
115154
|
+
/*
|
|
115266
115155
|
let top, left;
|
|
115267
|
-
|
|
115268
|
-
|
|
115269
|
-
|
|
115270
|
-
left = btn.getBoundingClientRect().left + window.pageXOffset;
|
|
115156
|
+
if(!this.builder.iframe) {
|
|
115157
|
+
top = btn.getBoundingClientRect().top + window.pageYOffset;
|
|
115158
|
+
left = btn.getBoundingClientRect().left + window.pageXOffset;
|
|
115271
115159
|
} else {
|
|
115272
|
-
|
|
115273
|
-
|
|
115274
|
-
|
|
115275
|
-
|
|
115160
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
115161
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
115162
|
+
top = btn.getBoundingClientRect().top + adjY;
|
|
115163
|
+
left = btn.getBoundingClientRect().left + adjX;
|
|
115276
115164
|
}
|
|
115165
|
+
*/
|
|
115277
115166
|
|
|
115167
|
+
let newPos = this.builder.editor.util.getElementPosition(btn);
|
|
115168
|
+
let top = newPos.top + window.pageYOffset;
|
|
115169
|
+
let left = newPos.left + window.pageXOffset;
|
|
115278
115170
|
const w = pop.offsetWidth;
|
|
115279
115171
|
top = top + btn.offsetHeight * this.builder.editor.opts.zoom;
|
|
115280
115172
|
left = left + btn.offsetWidth * this.builder.editor.opts.zoom;
|
|
@@ -115327,6 +115219,8 @@ class ContentBox {
|
|
|
115327
115219
|
disableStaticSection: false,
|
|
115328
115220
|
framework: '',
|
|
115329
115221
|
imageRenameOnEdit: true,
|
|
115222
|
+
simpleEditingBreakpoint: '970px',
|
|
115223
|
+
// iframe only
|
|
115330
115224
|
// Old Template System:
|
|
115331
115225
|
designUrl1: 'assets/designs/basic.js',
|
|
115332
115226
|
designUrl2: 'assets/designs/examples.js',
|
|
@@ -118414,6 +118308,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118414
118308
|
this.animateScroll = new AnimateScroll(this);
|
|
118415
118309
|
this.timeline = new Timeline(this);
|
|
118416
118310
|
this.util = new Util(this);
|
|
118311
|
+
this.controlpanel = new ControlPanel(this);
|
|
118417
118312
|
|
|
118418
118313
|
if (!this.pageTemplate) {
|
|
118419
118314
|
this.pageTemplate = this.util.getPageTemplate(this.framework);
|
|
@@ -118517,6 +118412,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118517
118412
|
livePreviewAlwaysReload: this.settings.livePreviewAlwaysReload,
|
|
118518
118413
|
livePreviewReloadEvery: this.settings.livePreviewReloadEvery,
|
|
118519
118414
|
iframe: this.settings.iframe,
|
|
118415
|
+
simpleEditingBreakpoint: this.settings.simpleEditingBreakpoint,
|
|
118520
118416
|
imageAdjust: 1,
|
|
118521
118417
|
// ContentBuilder
|
|
118522
118418
|
scriptPath: this.settings.scriptPath,
|
|
@@ -118866,7 +118762,6 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118866
118762
|
}
|
|
118867
118763
|
`}
|
|
118868
118764
|
|
|
118869
|
-
|
|
118870
118765
|
/* protected section */
|
|
118871
118766
|
.is-section.protected .is-box-tool {
|
|
118872
118767
|
display: none !important;
|
|
@@ -118967,15 +118862,18 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118967
118862
|
display: none;
|
|
118968
118863
|
border-radius: 50px;
|
|
118969
118864
|
overflow:hidden;
|
|
118970
|
-
|
|
118865
|
+
background: rgba(243, 243, 243, 0.9);
|
|
118971
118866
|
width: 92px;
|
|
118972
118867
|
justify-content: center;
|
|
118973
118868
|
}
|
|
118974
118869
|
.is-wrapper .is-box-info button {
|
|
118975
|
-
width:
|
|
118976
|
-
height:
|
|
118870
|
+
width:32px;
|
|
118871
|
+
height:32px;
|
|
118977
118872
|
cursor:pointer;
|
|
118978
118873
|
}
|
|
118874
|
+
.is-wrapper .is-box-info * {
|
|
118875
|
+
color: #000;
|
|
118876
|
+
}
|
|
118979
118877
|
.is-wrapper .box-select .is-box-info {
|
|
118980
118878
|
display: flex;
|
|
118981
118879
|
}
|
|
@@ -119039,6 +118937,94 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119039
118937
|
display: none !important;
|
|
119040
118938
|
}
|
|
119041
118939
|
|
|
118940
|
+
/* New Section Tool */
|
|
118941
|
+
.is-section-tool {
|
|
118942
|
+
display: none;
|
|
118943
|
+
z-index: 1;
|
|
118944
|
+
position: absolute;
|
|
118945
|
+
margin-top: 40px;
|
|
118946
|
+
top: 12%;
|
|
118947
|
+
right: 0px;
|
|
118948
|
+
left: auto;
|
|
118949
|
+
width: 35px;
|
|
118950
|
+
height: auto;
|
|
118951
|
+
flex-direction: column;
|
|
118952
|
+
border-top-left-radius: 3px;
|
|
118953
|
+
border-bottom-left-radius: 3px;
|
|
118954
|
+
overflow: hidden;
|
|
118955
|
+
}
|
|
118956
|
+
.is-section-tool > button {
|
|
118957
|
+
width: 35px;
|
|
118958
|
+
height: 35px;
|
|
118959
|
+
border-radius: 0;
|
|
118960
|
+
line-height: 35px;
|
|
118961
|
+
padding: 0px;
|
|
118962
|
+
font-size: 13px;
|
|
118963
|
+
cursor: pointer;
|
|
118964
|
+
border: none;
|
|
118965
|
+
background: transparent;
|
|
118966
|
+
}
|
|
118967
|
+
.is-section-tool > button.btn-move-section-up, .is-section-tool > button.btn-move-section-down {
|
|
118968
|
+
background: #E3E3E3;
|
|
118969
|
+
}
|
|
118970
|
+
.is-section-tool > button.btn-section-edit {
|
|
118971
|
+
background: #03ACD6;
|
|
118972
|
+
}
|
|
118973
|
+
.is-section-tool > button.btn-section-remove {
|
|
118974
|
+
background: rgb(247, 99, 46);
|
|
118975
|
+
}
|
|
118976
|
+
.is-section-tool > button svg {
|
|
118977
|
+
width: 16px;
|
|
118978
|
+
height: 16px;
|
|
118979
|
+
flex: none;
|
|
118980
|
+
}
|
|
118981
|
+
.is-section-tool > button.btn-move-section-up *, .is-section-tool > button.btn-move-section-down * {
|
|
118982
|
+
color: #000;
|
|
118983
|
+
fill: #000;
|
|
118984
|
+
}
|
|
118985
|
+
.is-section-tool > button.btn-section-edit *, .is-section-tool > button.btn-section-remove * {
|
|
118986
|
+
color: #fff;
|
|
118987
|
+
fill: #fff;
|
|
118988
|
+
}
|
|
118989
|
+
|
|
118990
|
+
${this.simpleEditingBreakpoint ? `
|
|
118991
|
+
|
|
118992
|
+
@media all and (max-width: ${this.simpleEditingBreakpoint}) {
|
|
118993
|
+
.is-tool:not(#divSpacerTool) {
|
|
118994
|
+
display: none !important;
|
|
118995
|
+
}
|
|
118996
|
+
.hard-select .box-select .is-box-info.is-tool {
|
|
118997
|
+
display: none !important;
|
|
118998
|
+
}
|
|
118999
|
+
|
|
119000
|
+
.is-section-tool,
|
|
119001
|
+
.hard-select .is-section.section-select .is-section-tool {
|
|
119002
|
+
display: none !important;
|
|
119003
|
+
}
|
|
119004
|
+
|
|
119005
|
+
.is-box-tool > *:not(.is-select-image),
|
|
119006
|
+
.hard-select .is-box.box-select .is-box-tool > *:not(.is-select-image) {
|
|
119007
|
+
display: none !important;
|
|
119008
|
+
}
|
|
119009
|
+
|
|
119010
|
+
.is-box .is-box-tool {
|
|
119011
|
+
left: -200px !important;
|
|
119012
|
+
}
|
|
119013
|
+
.is-box:has(.is-overlay-bg) .is-box-tool {
|
|
119014
|
+
width: 40px !important;
|
|
119015
|
+
left: calc(50% - 20px) !important;
|
|
119016
|
+
}
|
|
119017
|
+
|
|
119018
|
+
.is-builder .row-active:not([data-protected]).row-outline {
|
|
119019
|
+
outline: none !important;
|
|
119020
|
+
}
|
|
119021
|
+
.hard-select .is-box.box-select {
|
|
119022
|
+
// outline: none !important;
|
|
119023
|
+
}
|
|
119024
|
+
}
|
|
119025
|
+
|
|
119026
|
+
` : ''}
|
|
119027
|
+
|
|
119042
119028
|
</style>`);
|
|
119043
119029
|
dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
|
|
119044
119030
|
|
|
@@ -119492,7 +119478,36 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119492
119478
|
if (this.iframe) {
|
|
119493
119479
|
document.addEventListener('click', this.doDocumentClick = e => {
|
|
119494
119480
|
e = e || window.event;
|
|
119495
|
-
var target = e.target || e.srcElement;
|
|
119481
|
+
var target = e.target || e.srcElement; //--- New UX ---
|
|
119482
|
+
|
|
119483
|
+
if (!target.closest('#_cbhtml') && !target.closest('.is-box-tool') && !target.closest('.is-box-info') && !target.closest('.is-section-tool') && !target.closest('.is-side') && !target.closest('.is-modal') && !target.closest('.is-sidebar')) {
|
|
119484
|
+
// Outside Wrapper
|
|
119485
|
+
if (document.activeElement) if (document.activeElement.tagName.toLowerCase() === 'input') return;
|
|
119486
|
+
this.wrapperEl.classList.remove('is-container-edit');
|
|
119487
|
+
this.wrapperEl.classList.remove('is-clean-edit');
|
|
119488
|
+
const modalEditBox = this.builderStuff.querySelector('.editbox');
|
|
119489
|
+
modalEditBox.style.display = '';
|
|
119490
|
+
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
119491
|
+
modalEditSection.style.display = '';
|
|
119492
|
+
|
|
119493
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
119494
|
+
this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
|
|
119495
|
+
|
|
119496
|
+
const prevBox = this.doc.querySelectorAll('.box-select');
|
|
119497
|
+
prevBox.forEach(elm => {
|
|
119498
|
+
elm.classList.remove('box-select');
|
|
119499
|
+
});
|
|
119500
|
+
const prevSection = this.doc.querySelectorAll('.section-select');
|
|
119501
|
+
prevSection.forEach(elm => {
|
|
119502
|
+
elm.classList.remove('section-select');
|
|
119503
|
+
});
|
|
119504
|
+
}
|
|
119505
|
+
|
|
119506
|
+
if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
|
|
119507
|
+
document.body.classList.remove('box-modal-open'); // Remove added 'box-modal-open' by Box Settings open
|
|
119508
|
+
} //---
|
|
119509
|
+
|
|
119510
|
+
|
|
119496
119511
|
let a = false,
|
|
119497
119512
|
b = false,
|
|
119498
119513
|
f = false,
|
|
@@ -119741,10 +119756,38 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119741
119756
|
}, delay);
|
|
119742
119757
|
}
|
|
119743
119758
|
|
|
119759
|
+
defineLastBox(section) {
|
|
119760
|
+
const boxes = section.querySelectorAll('.is-box');
|
|
119761
|
+
boxes.forEach(box => {
|
|
119762
|
+
box.classList.remove('last-box');
|
|
119763
|
+
});
|
|
119764
|
+
|
|
119765
|
+
if (boxes.length === 0) {
|
|
119766
|
+
section.classList.add('last-box');
|
|
119767
|
+
} else {
|
|
119768
|
+
const lastBox = boxes[boxes.length - 1];
|
|
119769
|
+
if (lastBox) lastBox.classList.add('last-box');
|
|
119770
|
+
}
|
|
119771
|
+
}
|
|
119772
|
+
|
|
119744
119773
|
sectionSetup(section) {
|
|
119745
119774
|
let tool = section.querySelector('.is-section-tool');
|
|
119746
119775
|
if (tool) tool.parentNode.removeChild(tool);
|
|
119747
|
-
dom.appendHtml(section,
|
|
119776
|
+
dom.appendHtml(section, `<div class="is-section-tool">
|
|
119777
|
+
<button type="button" class="btn-move-section-up" tabindex="-1" data-title="${out('Move Up')}" title="${out('Move Up')}">
|
|
119778
|
+
<svg class="is-icon-flex" style="transform:rotate(180deg)"><use xlink:href="#icon-arrow-down2"></use></svg>
|
|
119779
|
+
</button>
|
|
119780
|
+
<button type="button" class="btn-move-section-down" tabindex="-1" data-title="${out('Move Down')}" title="${out('Move Down')}">
|
|
119781
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-arrow-down2"></use></svg>
|
|
119782
|
+
</button>
|
|
119783
|
+
<button type="button" class="btn-section-edit" tabindex="-1" data-title="${out('Section Settings')}" title="${out('Section Settings')}">
|
|
119784
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg>
|
|
119785
|
+
</button>
|
|
119786
|
+
<button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
|
|
119787
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-close"></use></svg>
|
|
119788
|
+
</button>
|
|
119789
|
+
</div>`);
|
|
119790
|
+
this.defineLastBox(section);
|
|
119748
119791
|
let info = section.querySelector('.is-section-info');
|
|
119749
119792
|
if (info) info.parentNode.removeChild(info);
|
|
119750
119793
|
const sectionId = section.getAttribute('id');
|
|
@@ -119761,12 +119804,26 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119761
119804
|
this.editor.tooltip.set(elm, 5, 3, true);
|
|
119762
119805
|
}
|
|
119763
119806
|
});
|
|
119764
|
-
const
|
|
119807
|
+
const btnSectionUp = section.querySelector('.btn-move-section-up');
|
|
119808
|
+
btnSectionUp.addEventListener('click', () => {
|
|
119809
|
+
this.editor.saveForUndo();
|
|
119810
|
+
this.editsection.sectionUp();
|
|
119811
|
+
this.sectionStack();
|
|
119812
|
+
this.onChange();
|
|
119813
|
+
});
|
|
119814
|
+
const btnSectionDown = section.querySelector('.btn-move-section-down');
|
|
119815
|
+
btnSectionDown.addEventListener('click', () => {
|
|
119816
|
+
this.editor.saveForUndo();
|
|
119817
|
+
this.editsection.sectionDown();
|
|
119818
|
+
this.sectionStack();
|
|
119819
|
+
this.onChange();
|
|
119820
|
+
});
|
|
119821
|
+
const btnSectionEdit = section.querySelector('.btn-section-edit');
|
|
119765
119822
|
btnSectionEdit.addEventListener('click', () => {
|
|
119766
119823
|
this.editbox.close();
|
|
119767
119824
|
this.editsection.edit();
|
|
119768
119825
|
});
|
|
119769
|
-
const btnSectionRemove = section.querySelector('.
|
|
119826
|
+
const btnSectionRemove = section.querySelector('.btn-section-remove');
|
|
119770
119827
|
btnSectionRemove.addEventListener('click', () => {
|
|
119771
119828
|
const modal = document.querySelector('.is-modal.delsectionconfirm');
|
|
119772
119829
|
|
|
@@ -119807,7 +119864,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119807
119864
|
boxSetup(box) {
|
|
119808
119865
|
let tool = box.querySelector('.is-box-tool');
|
|
119809
119866
|
if (tool) tool.parentNode.removeChild(tool);
|
|
119810
|
-
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Change Background') + '" data-title="' + out('Change Background') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:
|
|
119867
|
+
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Change Background') + '" data-title="' + out('Change Background') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:35px;height:35px;display:inline-block;float:left;background: rgb(90, 156, 38);background:rgb(78 170 57)">' + '<div style="width:35px;height:35px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select') + '" title="' + out('Select') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
|
|
119811
119868
|
let info = box.querySelector('.is-box-info');
|
|
119812
119869
|
if (info) info.parentNode.removeChild(info);
|
|
119813
119870
|
|
|
@@ -119913,12 +119970,16 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119913
119970
|
let currentImageUrl;
|
|
119914
119971
|
const activeBox = this.activeBox;
|
|
119915
119972
|
let overlay = activeBox.querySelector('.is-overlay');
|
|
119916
|
-
|
|
119917
|
-
if (
|
|
119918
|
-
|
|
119919
|
-
|
|
119973
|
+
|
|
119974
|
+
if (overlay) {
|
|
119975
|
+
const overlayBg = overlay.querySelector('.is-overlay-bg');
|
|
119976
|
+
if (overlayBg) if (overlayBg.style.backgroundImage) {
|
|
119977
|
+
if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
|
|
119978
|
+
currentImageUrl = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
119979
|
+
}
|
|
119920
119980
|
}
|
|
119921
119981
|
}
|
|
119982
|
+
|
|
119922
119983
|
this.editor.openImageSelect(src => {
|
|
119923
119984
|
this.editor.saveForUndo();
|
|
119924
119985
|
this.boxImage(src); //Trigger Change event
|
|
@@ -120820,47 +120881,47 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
120820
120881
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120821
120882
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120822
120883
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120823
|
-
boxTool.style.width = '
|
|
120824
|
-
boxTool.style.left = 'calc(50% -
|
|
120884
|
+
boxTool.style.width = '70px';
|
|
120885
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120825
120886
|
} else if (sectionNavbar) {
|
|
120826
120887
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120827
120888
|
box.querySelector('.is-box-edit').style.display = 'none';
|
|
120828
120889
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120829
|
-
boxTool.style.width = '
|
|
120830
|
-
boxTool.style.left = 'calc(50% -
|
|
120890
|
+
boxTool.style.width = '35px';
|
|
120891
|
+
boxTool.style.left = 'calc(50% - 17.5px)';
|
|
120831
120892
|
} else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
|
|
120832
120893
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
120833
120894
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120834
120895
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120835
|
-
boxTool.style.width = '
|
|
120836
|
-
boxTool.style.left = 'calc(50% -
|
|
120896
|
+
boxTool.style.width = '105px';
|
|
120897
|
+
boxTool.style.left = 'calc(50% - 52.5px)';
|
|
120837
120898
|
|
|
120838
120899
|
if (this.onImageSelectClick || this.imageselect) {
|
|
120839
120900
|
if (this.showSelectCover) {
|
|
120840
|
-
boxTool.style.width = '
|
|
120901
|
+
boxTool.style.width = '140px';
|
|
120841
120902
|
box.querySelector('.is-select-image').style.display = 'inline-block';
|
|
120842
|
-
boxTool.style.left = 'calc(50% -
|
|
120903
|
+
boxTool.style.left = 'calc(50% - 70px)';
|
|
120843
120904
|
}
|
|
120844
120905
|
}
|
|
120845
120906
|
|
|
120846
120907
|
if (box.querySelector('.is-overlay-content[data-module]').getAttribute('data-module') === 'video-bg') {
|
|
120847
120908
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120848
120909
|
box.querySelector('.is-select-image').style.display = 'none';
|
|
120849
|
-
boxTool.style.width = '
|
|
120850
|
-
boxTool.style.left = 'calc(50% -
|
|
120910
|
+
boxTool.style.width = '70px';
|
|
120911
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120851
120912
|
}
|
|
120852
120913
|
} else {
|
|
120853
120914
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
120854
120915
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120855
120916
|
box.querySelector('.is-module-edit').style.display = 'none';
|
|
120856
|
-
boxTool.style.width = '
|
|
120857
|
-
boxTool.style.left = 'calc(50% -
|
|
120917
|
+
boxTool.style.width = '70px';
|
|
120918
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120858
120919
|
|
|
120859
120920
|
if (this.onImageSelectClick || this.imageselect) {
|
|
120860
120921
|
if (this.showSelectCover) {
|
|
120861
|
-
boxTool.style.width = '
|
|
120922
|
+
boxTool.style.width = '105px';
|
|
120862
120923
|
box.querySelector('.is-select-image').style.display = 'inline-block';
|
|
120863
|
-
boxTool.style.left = 'calc(50% -
|
|
120924
|
+
boxTool.style.left = 'calc(50% - 52.5px)';
|
|
120864
120925
|
}
|
|
120865
120926
|
}
|
|
120866
120927
|
}
|