@innovastudio/contentbox 1.5.93 → 1.5.95
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 +197 -25
- package/public/contentbox/contentbox.esm.js +633 -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,29 @@ class EditBox {
|
|
|
15116
15003
|
|
|
15117
15004
|
}
|
|
15118
15005
|
|
|
15006
|
+
// Experimental
|
|
15007
|
+
// import {out} from './out.js';
|
|
15008
|
+
class ControlPanel {
|
|
15009
|
+
constructor(builder) {
|
|
15010
|
+
this.builder = builder;
|
|
15011
|
+
this.builderStuff = this.builder.builderStuff;
|
|
15012
|
+
const builderStuff = this.builderStuff;
|
|
15013
|
+
let html = `
|
|
15014
|
+
<style>
|
|
15015
|
+
|
|
15016
|
+
|
|
15017
|
+
</style>
|
|
15018
|
+
<div class="is-controlpanel">
|
|
15019
|
+
|
|
15020
|
+
</div>
|
|
15021
|
+
`; // const doc = this.builder.doc;
|
|
15022
|
+
// document.body.classList.add('controlpanel');
|
|
15023
|
+
|
|
15024
|
+
builderStuff.insertAdjacentHTML('beforeend', html);
|
|
15025
|
+
}
|
|
15026
|
+
|
|
15027
|
+
}
|
|
15028
|
+
|
|
15119
15029
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
15120
15030
|
|
|
15121
15031
|
var rangyCore = {exports: {}};
|
|
@@ -20611,16 +20521,25 @@ class Util$1 {
|
|
|
20611
20521
|
// let top = emptyinfo.getBoundingClientRect().top;
|
|
20612
20522
|
// const left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
|
|
20613
20523
|
|
|
20524
|
+
/*
|
|
20614
20525
|
let top, left;
|
|
20615
|
-
if
|
|
20616
|
-
|
|
20617
|
-
|
|
20526
|
+
if(!this.builder.iframe) {
|
|
20527
|
+
top = emptyinfo.getBoundingClientRect().top;
|
|
20528
|
+
left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11;
|
|
20618
20529
|
} else {
|
|
20619
|
-
|
|
20620
|
-
|
|
20621
|
-
|
|
20622
|
-
|
|
20530
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
20531
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
20532
|
+
top = emptyinfo.getBoundingClientRect().top + adjY;
|
|
20533
|
+
left = emptyinfo.getBoundingClientRect().left + ((emptyinfo.offsetWidth * this.builder.opts.zoom)/2 - 11) + adjX;
|
|
20623
20534
|
}
|
|
20535
|
+
*/
|
|
20536
|
+
const newPos = this.getElementPosition(emptyinfo);
|
|
20537
|
+
let top = newPos.top;
|
|
20538
|
+
let left = newPos.left;
|
|
20539
|
+
let scaleX = newPos.scaleX;
|
|
20540
|
+
let scaleY = newPos.scaleY;
|
|
20541
|
+
left = left + (emptyinfo.offsetWidth * (scaleX * this.builder.opts.zoom) / 2 - 11);
|
|
20542
|
+
top = top - (emptyinfo.offsetHeight - emptyinfo.offsetHeight * scaleY);
|
|
20624
20543
|
quickadd.style.display = 'flex';
|
|
20625
20544
|
this.showPop(quickadd, false, emptyinfo);
|
|
20626
20545
|
const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
@@ -20791,16 +20710,9 @@ class Util$1 {
|
|
|
20791
20710
|
const btnCellMore = this.colTool.querySelector('.cell-more');
|
|
20792
20711
|
columnMore.classList.add('transition1');
|
|
20793
20712
|
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
|
-
}
|
|
20713
|
+
const newPos = this.getElementPosition(btnCellMore);
|
|
20714
|
+
let top = newPos.top;
|
|
20715
|
+
let left = newPos.left;
|
|
20804
20716
|
columnMore.style.top = top + 35 + 'px';
|
|
20805
20717
|
columnMore.style.left = left - 7 + 'px';
|
|
20806
20718
|
setTimeout(() => {
|
|
@@ -22376,6 +22288,39 @@ class Util$1 {
|
|
|
22376
22288
|
}
|
|
22377
22289
|
return pageTemplate;
|
|
22378
22290
|
}
|
|
22291
|
+
getElementPosition(element) {
|
|
22292
|
+
const iframe = this.builder.iframe;
|
|
22293
|
+
let top, left;
|
|
22294
|
+
let scaleX, scaleY;
|
|
22295
|
+
if (this.builder.iframe) {
|
|
22296
|
+
let divContentView = document.querySelector('.is-content-view');
|
|
22297
|
+
if (!divContentView) divContentView = iframe.parentNode;
|
|
22298
|
+
const divContentViewStyles = window.getComputedStyle(divContentView);
|
|
22299
|
+
const transform = divContentViewStyles.transform;
|
|
22300
|
+
if (transform !== 'none') {
|
|
22301
|
+
const matrixValues = transform.match(/matrix\(([0-9., -]+)\)/)[1].split(',');
|
|
22302
|
+
scaleX = parseFloat(matrixValues[0]);
|
|
22303
|
+
scaleY = parseFloat(matrixValues[3]);
|
|
22304
|
+
} else {
|
|
22305
|
+
scaleX = 1;
|
|
22306
|
+
scaleY = 1;
|
|
22307
|
+
}
|
|
22308
|
+
const iframeRect = iframe.getBoundingClientRect();
|
|
22309
|
+
top = element.getBoundingClientRect().top * scaleY + iframeRect.top;
|
|
22310
|
+
left = element.getBoundingClientRect().left * scaleX + iframeRect.left;
|
|
22311
|
+
} else {
|
|
22312
|
+
top = element.getBoundingClientRect().top;
|
|
22313
|
+
left = element.getBoundingClientRect().left;
|
|
22314
|
+
scaleX = 1;
|
|
22315
|
+
scaleY = 1;
|
|
22316
|
+
}
|
|
22317
|
+
return {
|
|
22318
|
+
top,
|
|
22319
|
+
left,
|
|
22320
|
+
scaleX,
|
|
22321
|
+
scaleY
|
|
22322
|
+
};
|
|
22323
|
+
}
|
|
22379
22324
|
}
|
|
22380
22325
|
class Dom {
|
|
22381
22326
|
constructor(builder) {
|
|
@@ -33647,18 +33592,24 @@ class RowTool$1 {
|
|
|
33647
33592
|
let rowMore = builderStuff.querySelector('.rowmore');
|
|
33648
33593
|
dom.addClass(rowMore, 'transition1');
|
|
33649
33594
|
const elm = rowTool.querySelector('.row-more');
|
|
33595
|
+
|
|
33596
|
+
/*
|
|
33650
33597
|
let top, left;
|
|
33651
|
-
if
|
|
33652
|
-
|
|
33653
|
-
|
|
33598
|
+
if(!this.builder.iframe) {
|
|
33599
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
33600
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
33654
33601
|
} else {
|
|
33655
|
-
|
|
33656
|
-
|
|
33657
|
-
|
|
33658
|
-
|
|
33659
|
-
|
|
33660
|
-
|
|
33602
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
33603
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
33604
|
+
top = elm.getBoundingClientRect().top;
|
|
33605
|
+
left = elm.getBoundingClientRect().left;
|
|
33606
|
+
top = top + adjY;
|
|
33607
|
+
left = left + adjX;
|
|
33661
33608
|
}
|
|
33609
|
+
*/
|
|
33610
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
33611
|
+
let top = newPos.top;
|
|
33612
|
+
let left = newPos.left;
|
|
33662
33613
|
|
|
33663
33614
|
// const w = rowMore.offsetWidth;
|
|
33664
33615
|
rowMore.style.top = top - 8 + 'px';
|
|
@@ -64849,6 +64800,13 @@ class Image$1 {
|
|
|
64849
64800
|
|
|
64850
64801
|
// get active image
|
|
64851
64802
|
let activeImage = this.builder.activeImage;
|
|
64803
|
+
let newPos = this.builder.util.getElementPosition(activeImage);
|
|
64804
|
+
if (this.builder.iframe) {
|
|
64805
|
+
let scaleX = newPos.scaleX;
|
|
64806
|
+
let scaleY = newPos.scaleY;
|
|
64807
|
+
width = width / scaleX;
|
|
64808
|
+
height = height / scaleY;
|
|
64809
|
+
}
|
|
64852
64810
|
let bCircular = false;
|
|
64853
64811
|
if (dom.hasClass(activeImage.parentNode, 'img-circular')) {
|
|
64854
64812
|
activeImage = activeImage.parentNode;
|
|
@@ -64876,17 +64834,21 @@ class Image$1 {
|
|
|
64876
64834
|
}
|
|
64877
64835
|
|
|
64878
64836
|
// sync (target = imageResizer)
|
|
64879
|
-
|
|
64837
|
+
/*
|
|
64880
64838
|
let top, left;
|
|
64881
|
-
if
|
|
64882
|
-
|
|
64883
|
-
|
|
64839
|
+
if(!this.builder.iframe) {
|
|
64840
|
+
top = activeImage.getBoundingClientRect().top + window.pageYOffset;
|
|
64841
|
+
left = activeImage.getBoundingClientRect().left + window.pageXOffset;
|
|
64884
64842
|
} else {
|
|
64885
|
-
|
|
64886
|
-
|
|
64887
|
-
|
|
64888
|
-
|
|
64843
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
64844
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
64845
|
+
top = activeImage.getBoundingClientRect().top + adjY;
|
|
64846
|
+
left = activeImage.getBoundingClientRect().left+ adjX;
|
|
64889
64847
|
}
|
|
64848
|
+
*/
|
|
64849
|
+
newPos = this.builder.util.getElementPosition(activeImage);
|
|
64850
|
+
let top = newPos.top;
|
|
64851
|
+
let left = newPos.left;
|
|
64890
64852
|
target.style.top = top + 'px';
|
|
64891
64853
|
target.style.left = left + 'px';
|
|
64892
64854
|
target.style.width = activeImage.offsetWidth + 'px';
|
|
@@ -64959,7 +64921,8 @@ class Image$1 {
|
|
|
64959
64921
|
//Trigger Change event
|
|
64960
64922
|
this.builder.opts.onChange();
|
|
64961
64923
|
});
|
|
64962
|
-
document.querySelector('.moveable-control-box')
|
|
64924
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
64925
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
64963
64926
|
imageResizer.addEventListener('click', () => {
|
|
64964
64927
|
if (!this.builder.activeImage) return;
|
|
64965
64928
|
this.builder.activeImage.click();
|
|
@@ -64999,16 +64962,22 @@ class Image$1 {
|
|
|
64999
64962
|
imageProgress.style.display = 'table';
|
|
65000
64963
|
imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65001
64964
|
imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
|
|
64965
|
+
|
|
64966
|
+
/*
|
|
65002
64967
|
let top, left;
|
|
65003
|
-
if
|
|
65004
|
-
|
|
65005
|
-
|
|
64968
|
+
if(!this.builder.iframe) {
|
|
64969
|
+
top = img.getBoundingClientRect().top + window.pageYOffset;
|
|
64970
|
+
left = img.getBoundingClientRect().left + window.pageXOffset;
|
|
65006
64971
|
} else {
|
|
65007
|
-
|
|
65008
|
-
|
|
65009
|
-
|
|
65010
|
-
|
|
64972
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
64973
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
64974
|
+
top = img.getBoundingClientRect().top + adjY;
|
|
64975
|
+
left = img.getBoundingClientRect().left+ adjX;
|
|
65011
64976
|
}
|
|
64977
|
+
*/
|
|
64978
|
+
const newPos = this.builder.util.getElementPosition(img);
|
|
64979
|
+
let top = newPos.top + window.pageYOffset;
|
|
64980
|
+
let left = newPos.left + window.pageXOffset;
|
|
65012
64981
|
imageProgress.style.top = top + 'px';
|
|
65013
64982
|
imageProgress.style.left = left + 'px';
|
|
65014
64983
|
|
|
@@ -65091,7 +65060,8 @@ class Image$1 {
|
|
|
65091
65060
|
dom.addEventListener(btnImageLink, 'click', () => {
|
|
65092
65061
|
//imageTool.style.display = 'none';
|
|
65093
65062
|
|
|
65094
|
-
document.querySelector('.moveable-control-box')
|
|
65063
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65064
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65095
65065
|
|
|
65096
65066
|
if (this.builder.opts.onImageSettingClick) {
|
|
65097
65067
|
this.builder.opts.onImageSettingClick();
|
|
@@ -65150,7 +65120,8 @@ class Image$1 {
|
|
|
65150
65120
|
elm = modalImageLink.querySelector('.input-cancel');
|
|
65151
65121
|
dom.addEventListener(elm, 'click', () => {
|
|
65152
65122
|
util.hideModal(modalImageLink);
|
|
65153
|
-
document.querySelector('.moveable-control-box')
|
|
65123
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65124
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65154
65125
|
});
|
|
65155
65126
|
|
|
65156
65127
|
// Apply link to image
|
|
@@ -65465,7 +65436,8 @@ class Image$1 {
|
|
|
65465
65436
|
zoomable: false
|
|
65466
65437
|
});
|
|
65467
65438
|
}
|
|
65468
|
-
document.querySelector('.moveable-control-box')
|
|
65439
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65440
|
+
if (movControlBox) movControlBox.style.display = 'none'; //needed by Safari (prevent z-index problem)
|
|
65469
65441
|
});
|
|
65470
65442
|
|
|
65471
65443
|
// Set crop proportion
|
|
@@ -65482,7 +65454,8 @@ class Image$1 {
|
|
|
65482
65454
|
let btnCancel = modalImageEdit.querySelector('.input-cancel');
|
|
65483
65455
|
dom.addEventListener(btnCancel, 'click', () => {
|
|
65484
65456
|
util.hideModal(modalImageEdit);
|
|
65485
|
-
document.querySelector('.moveable-control-box')
|
|
65457
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65458
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block'; //needed by Safari (prevent z-index problem)
|
|
65486
65459
|
});
|
|
65487
65460
|
|
|
65488
65461
|
// Apply (crop) image
|
|
@@ -65588,23 +65561,29 @@ class Image$1 {
|
|
|
65588
65561
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65589
65562
|
elm = elm.parentNode;
|
|
65590
65563
|
}
|
|
65564
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65565
|
+
let scaleX = newPos.scaleX;
|
|
65591
65566
|
imageTool.style.display = 'flex';
|
|
65592
65567
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65593
65568
|
|
|
65594
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65569
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65595
65570
|
// let top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65596
65571
|
// let left = elm.getBoundingClientRect().left+ window.pageXOffset;
|
|
65597
65572
|
|
|
65573
|
+
/*
|
|
65598
65574
|
let top, left;
|
|
65599
|
-
if
|
|
65600
|
-
|
|
65601
|
-
|
|
65575
|
+
if(!this.builder.iframe) {
|
|
65576
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65577
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65602
65578
|
} else {
|
|
65603
|
-
|
|
65604
|
-
|
|
65605
|
-
|
|
65606
|
-
|
|
65579
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65580
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65581
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65582
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65607
65583
|
}
|
|
65584
|
+
*/
|
|
65585
|
+
let top = newPos.top + window.pageYOffset;
|
|
65586
|
+
let left = newPos.left + window.pageXOffset;
|
|
65608
65587
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65609
65588
|
|
|
65610
65589
|
//Adjust left in case an element is outside the screen
|
|
@@ -65622,12 +65601,13 @@ class Image$1 {
|
|
|
65622
65601
|
imageResizer.style.left = left + 'px';
|
|
65623
65602
|
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65624
65603
|
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
|
|
65625
|
-
imageResizer.style.display = 'block';
|
|
65604
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65626
65605
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65627
65606
|
|
|
65628
65607
|
// moveable
|
|
65629
|
-
this.builder.moveable.updateRect();
|
|
65630
|
-
document.querySelector('.moveable-control-box')
|
|
65608
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65609
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65610
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65631
65611
|
if (elm.offsetWidth === 0) {
|
|
65632
65612
|
// when there is image link applied
|
|
65633
65613
|
|
|
@@ -65643,8 +65623,9 @@ class Image$1 {
|
|
|
65643
65623
|
imageResizer.style.left = '-10px';
|
|
65644
65624
|
imageResizer.style.width = '1px';
|
|
65645
65625
|
imageResizer.style.height = '1px';
|
|
65646
|
-
this.builder.moveable.updateRect();
|
|
65647
|
-
document.querySelector('.moveable-control-box')
|
|
65626
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65627
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65628
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65648
65629
|
}
|
|
65649
65630
|
this.util.repositionColumnTool();
|
|
65650
65631
|
}, 0); // refesh() is called after img onload, so no need to have a delay.
|
|
@@ -65660,23 +65641,29 @@ class Image$1 {
|
|
|
65660
65641
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65661
65642
|
elm = elm.parentNode;
|
|
65662
65643
|
}
|
|
65644
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65645
|
+
let scaleX = newPos.scaleX;
|
|
65663
65646
|
imageTool.style.display = 'flex';
|
|
65664
65647
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65665
65648
|
|
|
65666
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65649
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65667
65650
|
// let top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65668
65651
|
// let left = elm.getBoundingClientRect().left+ window.pageXOffset;
|
|
65669
65652
|
|
|
65653
|
+
/*
|
|
65670
65654
|
let top, left;
|
|
65671
|
-
if
|
|
65672
|
-
|
|
65673
|
-
|
|
65655
|
+
if(!this.builder.iframe) {
|
|
65656
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65657
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65674
65658
|
} else {
|
|
65675
|
-
|
|
65676
|
-
|
|
65677
|
-
|
|
65678
|
-
|
|
65659
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65660
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65661
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65662
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65679
65663
|
}
|
|
65664
|
+
*/
|
|
65665
|
+
let top = newPos.top + window.pageYOffset;
|
|
65666
|
+
let left = newPos.left + window.pageXOffset;
|
|
65680
65667
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65681
65668
|
|
|
65682
65669
|
//Adjust left in case an element is outside the screen
|
|
@@ -65694,12 +65681,13 @@ class Image$1 {
|
|
|
65694
65681
|
imageResizer.style.left = left + 'px';
|
|
65695
65682
|
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
|
|
65696
65683
|
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
|
|
65697
|
-
imageResizer.style.display = 'block';
|
|
65684
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65698
65685
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65699
65686
|
|
|
65700
65687
|
// moveable
|
|
65701
|
-
this.builder.moveable.updateRect();
|
|
65702
|
-
document.querySelector('.moveable-control-box')
|
|
65688
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65689
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65690
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65703
65691
|
}
|
|
65704
65692
|
}
|
|
65705
65693
|
click(e) {
|
|
@@ -65718,21 +65706,28 @@ class Image$1 {
|
|
|
65718
65706
|
if (dom.hasClass(elm.parentNode, 'img-circular')) {
|
|
65719
65707
|
elm = elm.parentNode;
|
|
65720
65708
|
}
|
|
65709
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65710
|
+
let scaleX = newPos.scaleX;
|
|
65721
65711
|
let imageTool = this.imageTool;
|
|
65722
65712
|
imageTool.style.display = 'flex';
|
|
65723
65713
|
let _toolwidth = imageTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
65724
65714
|
|
|
65725
|
-
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
65715
|
+
let w = elm.offsetWidth * scaleX * this.builder.opts.zoom;
|
|
65716
|
+
|
|
65717
|
+
/*
|
|
65726
65718
|
let top, left;
|
|
65727
|
-
if
|
|
65728
|
-
|
|
65729
|
-
|
|
65719
|
+
if(!this.builder.iframe) {
|
|
65720
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65721
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65730
65722
|
} else {
|
|
65731
|
-
|
|
65732
|
-
|
|
65733
|
-
|
|
65734
|
-
|
|
65723
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65724
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65725
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65726
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65735
65727
|
}
|
|
65728
|
+
*/
|
|
65729
|
+
let top = newPos.top + window.pageYOffset;
|
|
65730
|
+
let left = newPos.left + window.pageXOffset;
|
|
65736
65731
|
let toolLeft = left + (w / 2 - _toolwidth / 2);
|
|
65737
65732
|
|
|
65738
65733
|
//Adjust left in case an element is outside the screen
|
|
@@ -65749,21 +65744,29 @@ class Image$1 {
|
|
|
65749
65744
|
// Image Resizer
|
|
65750
65745
|
if (!elm.hasAttribute('data-noresize')) {
|
|
65751
65746
|
let imageResizer = this.imageResizer;
|
|
65747
|
+
|
|
65748
|
+
/*
|
|
65752
65749
|
let top, left;
|
|
65753
|
-
if
|
|
65754
|
-
|
|
65755
|
-
|
|
65750
|
+
if(!this.builder.iframe) {
|
|
65751
|
+
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
65752
|
+
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
65756
65753
|
} else {
|
|
65757
|
-
|
|
65758
|
-
|
|
65759
|
-
|
|
65760
|
-
|
|
65754
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
65755
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
65756
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
65757
|
+
left = elm.getBoundingClientRect().left+ adjX;
|
|
65761
65758
|
}
|
|
65759
|
+
*/
|
|
65760
|
+
const newPos = this.builder.util.getElementPosition(elm);
|
|
65761
|
+
let top = newPos.top + window.pageYOffset;
|
|
65762
|
+
let left = newPos.left + window.pageXOffset;
|
|
65763
|
+
let scaleX = newPos.scaleX;
|
|
65764
|
+
let scaleY = newPos.scaleY;
|
|
65762
65765
|
imageResizer.style.top = top + 'px';
|
|
65763
65766
|
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';
|
|
65767
|
+
imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom * scaleX + 'px';
|
|
65768
|
+
imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom * scaleY + 'px';
|
|
65769
|
+
if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
|
|
65767
65770
|
this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
|
|
65768
65771
|
|
|
65769
65772
|
//Get & save original image width
|
|
@@ -65778,8 +65781,9 @@ class Image$1 {
|
|
|
65778
65781
|
imageResizer.setAttribute('data-width', Math.round(imgwidthpx));
|
|
65779
65782
|
|
|
65780
65783
|
// moveable
|
|
65781
|
-
this.builder.moveable.updateRect();
|
|
65782
|
-
document.querySelector('.moveable-control-box')
|
|
65784
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65785
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65786
|
+
if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
|
|
65783
65787
|
|
|
65784
65788
|
/*
|
|
65785
65789
|
if(elm.getAttribute('data-mov')!=='1'){
|
|
@@ -65891,8 +65895,9 @@ class Image$1 {
|
|
|
65891
65895
|
imageResizer.style.left = '-10px';
|
|
65892
65896
|
imageResizer.style.width = '1px';
|
|
65893
65897
|
imageResizer.style.height = '1px';
|
|
65894
|
-
this.builder.moveable.updateRect();
|
|
65895
|
-
document.querySelector('.moveable-control-box')
|
|
65898
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65899
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65900
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65896
65901
|
}
|
|
65897
65902
|
let prog = false;
|
|
65898
65903
|
if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
|
|
@@ -65909,8 +65914,9 @@ class Image$1 {
|
|
|
65909
65914
|
imageResizer.style.left = '-10px';
|
|
65910
65915
|
imageResizer.style.width = '1px';
|
|
65911
65916
|
imageResizer.style.height = '1px';
|
|
65912
|
-
this.builder.moveable.updateRect();
|
|
65913
|
-
document.querySelector('.moveable-control-box')
|
|
65917
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65918
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65919
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65914
65920
|
}
|
|
65915
65921
|
|
|
65916
65922
|
// NOTE:
|
|
@@ -65935,8 +65941,9 @@ class Image$1 {
|
|
|
65935
65941
|
imageResizer.style.left = '-10px';
|
|
65936
65942
|
imageResizer.style.width = '1px';
|
|
65937
65943
|
imageResizer.style.height = '1px';
|
|
65938
|
-
this.builder.moveable.updateRect();
|
|
65939
|
-
document.querySelector('.moveable-control-box')
|
|
65944
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65945
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65946
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65940
65947
|
}
|
|
65941
65948
|
} else {
|
|
65942
65949
|
let imageTool = this.imageTool;
|
|
@@ -65950,8 +65957,9 @@ class Image$1 {
|
|
|
65950
65957
|
imageResizer.style.left = '-10px';
|
|
65951
65958
|
imageResizer.style.width = '1px';
|
|
65952
65959
|
imageResizer.style.height = '1px';
|
|
65953
|
-
this.builder.moveable.updateRect();
|
|
65954
|
-
document.querySelector('.moveable-control-box')
|
|
65960
|
+
if (this.builder.moveable) this.builder.moveable.updateRect();
|
|
65961
|
+
const movControlBox = document.querySelector('.moveable-control-box');
|
|
65962
|
+
if (movControlBox) movControlBox.style.display = 'none';
|
|
65955
65963
|
}
|
|
65956
65964
|
}
|
|
65957
65965
|
|
|
@@ -65979,6 +65987,11 @@ class Image$1 {
|
|
|
65979
65987
|
let imageResizer = document.querySelector('#divImageResizer');
|
|
65980
65988
|
imageResizer.style.width = width * this.builder.opts.zoom + 'px';
|
|
65981
65989
|
imageResizer.style.height = height * this.builder.opts.zoom + 'px';
|
|
65990
|
+
const newPos = this.builder.util.getElementPosition(imageResizer);
|
|
65991
|
+
let scaleX = newPos.scaleX;
|
|
65992
|
+
let scaleY = newPos.scaleY;
|
|
65993
|
+
imageResizer.style.width = width * this.builder.opts.zoom * scaleX + 'px';
|
|
65994
|
+
imageResizer.style.height = height * this.builder.opts.zoom * scaleY + 'px';
|
|
65982
65995
|
}
|
|
65983
65996
|
processImage(file, targetImg, processImageDone) {
|
|
65984
65997
|
//file can also be an URL (from the same host), ex. file = "/assets/image.jpg";
|
|
@@ -73183,15 +73196,25 @@ class RowTool {
|
|
|
73183
73196
|
let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
|
|
73184
73197
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
73185
73198
|
tabs.style.display = 'flex';
|
|
73199
|
+
|
|
73200
|
+
/*
|
|
73186
73201
|
let top, left;
|
|
73187
|
-
if
|
|
73188
|
-
|
|
73189
|
-
|
|
73202
|
+
if(!this.builder.iframe) {
|
|
73203
|
+
top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
|
|
73204
|
+
left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
|
|
73190
73205
|
} else {
|
|
73191
|
-
|
|
73192
|
-
|
|
73193
|
-
|
|
73194
|
-
|
|
73206
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73207
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73208
|
+
top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
|
|
73209
|
+
left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
|
|
73210
|
+
}
|
|
73211
|
+
*/
|
|
73212
|
+
const newPos = this.util.getElementPosition(btnCellAdd);
|
|
73213
|
+
let top = newPos.top + window.pageYOffset;
|
|
73214
|
+
let left = newPos.left + window.pageXOffset;
|
|
73215
|
+
if (this.builder.iframe) {
|
|
73216
|
+
// top = top;
|
|
73217
|
+
left = left + 3;
|
|
73195
73218
|
}
|
|
73196
73219
|
|
|
73197
73220
|
// quickadd.style.display = 'flex';
|
|
@@ -73218,16 +73241,22 @@ class RowTool {
|
|
|
73218
73241
|
if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
|
|
73219
73242
|
let cell = util.cellSelected();
|
|
73220
73243
|
if (!cell) return;
|
|
73244
|
+
|
|
73245
|
+
/*
|
|
73221
73246
|
let top, left;
|
|
73222
|
-
if
|
|
73223
|
-
|
|
73224
|
-
|
|
73247
|
+
if(!this.builder.iframe) {
|
|
73248
|
+
top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73249
|
+
left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73225
73250
|
} else {
|
|
73226
|
-
|
|
73227
|
-
|
|
73228
|
-
|
|
73229
|
-
|
|
73251
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73252
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73253
|
+
top = btnCellMore.getBoundingClientRect().top + adjY;
|
|
73254
|
+
left = btnCellMore.getBoundingClientRect().left + adjX;
|
|
73230
73255
|
}
|
|
73256
|
+
*/
|
|
73257
|
+
const newPos = this.util.getElementPosition(btnCellMore);
|
|
73258
|
+
let top = newPos.top + window.pageYOffset;
|
|
73259
|
+
let left = newPos.left + window.pageXOffset;
|
|
73231
73260
|
const columnMore = builderStuff.querySelector('.columnmore');
|
|
73232
73261
|
|
|
73233
73262
|
// columnMore.style.display = 'flex';
|
|
@@ -73283,7 +73312,7 @@ class RowTool {
|
|
|
73283
73312
|
// Grid Editor Status
|
|
73284
73313
|
// On/off outline button
|
|
73285
73314
|
const btnGridOutline = grideditor.querySelector('.grid-outline');
|
|
73286
|
-
const container =
|
|
73315
|
+
const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
|
|
73287
73316
|
if (container.hasAttribute('gridoutline')) {
|
|
73288
73317
|
dom.addClass(btnGridOutline, 'on');
|
|
73289
73318
|
} else {
|
|
@@ -73323,16 +73352,21 @@ class RowTool {
|
|
|
73323
73352
|
// const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73324
73353
|
// const left = btnMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73325
73354
|
|
|
73355
|
+
/*
|
|
73326
73356
|
let top, left;
|
|
73327
|
-
if
|
|
73328
|
-
|
|
73329
|
-
|
|
73357
|
+
if(!this.builder.iframe) {
|
|
73358
|
+
top = btnMore.getBoundingClientRect().top + window.pageYOffset;
|
|
73359
|
+
left = btnMore.getBoundingClientRect().left + window.pageXOffset;
|
|
73330
73360
|
} else {
|
|
73331
|
-
|
|
73332
|
-
|
|
73333
|
-
|
|
73334
|
-
|
|
73361
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
73362
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
73363
|
+
top = btnMore.getBoundingClientRect().top + adjY;
|
|
73364
|
+
left = btnMore.getBoundingClientRect().left + adjX;
|
|
73335
73365
|
}
|
|
73366
|
+
*/
|
|
73367
|
+
const newPos = this.util.getElementPosition(btnMore);
|
|
73368
|
+
let top = newPos.top + window.pageYOffset;
|
|
73369
|
+
let left = newPos.left + window.pageXOffset;
|
|
73336
73370
|
|
|
73337
73371
|
// rowMore.style.display = 'flex';
|
|
73338
73372
|
util.showPop(rowMore, false, btnMore);
|
|
@@ -73509,16 +73543,22 @@ class RowAddTool {
|
|
|
73509
73543
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
73510
73544
|
tabs.style.display = 'none';
|
|
73511
73545
|
const viewportHeight = window.innerHeight;
|
|
73546
|
+
|
|
73547
|
+
/*
|
|
73512
73548
|
let top, left;
|
|
73513
|
-
if
|
|
73514
|
-
|
|
73515
|
-
|
|
73549
|
+
if(!this.builder.iframe) {
|
|
73550
|
+
top = btnRowAdd.getBoundingClientRect().top;
|
|
73551
|
+
left = btnRowAdd.getBoundingClientRect().left;
|
|
73516
73552
|
} else {
|
|
73517
|
-
|
|
73518
|
-
|
|
73519
|
-
|
|
73520
|
-
|
|
73553
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
73554
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
73555
|
+
top = btnRowAdd.getBoundingClientRect().top + adjY;
|
|
73556
|
+
left = btnRowAdd.getBoundingClientRect().left + adjX;
|
|
73521
73557
|
}
|
|
73558
|
+
*/
|
|
73559
|
+
const newPos = util.getElementPosition(btnRowAdd);
|
|
73560
|
+
let top = newPos.top;
|
|
73561
|
+
let left = newPos.left;
|
|
73522
73562
|
|
|
73523
73563
|
// quickadd.style.display = 'flex';
|
|
73524
73564
|
util.showPop(quickadd, false, btnRowAdd);
|
|
@@ -81360,17 +81400,22 @@ class ElementTool {
|
|
|
81360
81400
|
let tabs = quickadd.querySelector('.is-pop-tabs');
|
|
81361
81401
|
tabs.style.display = 'none';
|
|
81362
81402
|
const viewportHeight = window.innerHeight;
|
|
81403
|
+
|
|
81404
|
+
/*
|
|
81363
81405
|
let top, left;
|
|
81364
|
-
if
|
|
81365
|
-
|
|
81366
|
-
|
|
81406
|
+
if(!this.builder.iframe) {
|
|
81407
|
+
top = elmAdd.getBoundingClientRect().top;
|
|
81408
|
+
left = elmAdd.getBoundingClientRect().left;
|
|
81367
81409
|
} else {
|
|
81368
|
-
|
|
81369
|
-
|
|
81370
|
-
|
|
81371
|
-
|
|
81372
|
-
left = elmAdd.getBoundingClientRect().left + adjX;
|
|
81410
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
|
|
81411
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
|
|
81412
|
+
top = elmAdd.getBoundingClientRect().top + adjY ;
|
|
81413
|
+
left = elmAdd.getBoundingClientRect().left + adjX;
|
|
81373
81414
|
}
|
|
81415
|
+
*/
|
|
81416
|
+
const newPos = this.builder.util.getElementPosition(elmAdd);
|
|
81417
|
+
let top = newPos.top;
|
|
81418
|
+
let left = newPos.left;
|
|
81374
81419
|
|
|
81375
81420
|
// quickadd.style.display = 'flex';
|
|
81376
81421
|
util.showPop(quickadd, false, elmAdd);
|
|
@@ -81483,17 +81528,22 @@ class ElementTool {
|
|
|
81483
81528
|
const btnMore = elementTool.querySelector('.elm-more');
|
|
81484
81529
|
dom.addEventListener(btnMore, 'click', () => {
|
|
81485
81530
|
const viewportHeight = window.innerHeight;
|
|
81531
|
+
|
|
81532
|
+
/*
|
|
81486
81533
|
let top, left;
|
|
81487
|
-
if
|
|
81488
|
-
|
|
81489
|
-
|
|
81534
|
+
if(!this.builder.iframe) {
|
|
81535
|
+
top = btnMore.getBoundingClientRect().top;
|
|
81536
|
+
left = btnMore.getBoundingClientRect().left;
|
|
81490
81537
|
} else {
|
|
81491
|
-
|
|
81492
|
-
|
|
81493
|
-
|
|
81494
|
-
|
|
81495
|
-
left = btnMore.getBoundingClientRect().left + adjX;
|
|
81538
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;// + window.pageYOffset;
|
|
81539
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;// + window.pageXOffset;
|
|
81540
|
+
top = btnMore.getBoundingClientRect().top + adjY;
|
|
81541
|
+
left = btnMore.getBoundingClientRect().left + adjX;
|
|
81496
81542
|
}
|
|
81543
|
+
*/
|
|
81544
|
+
const newPos = this.builder.util.getElementPosition(btnMore);
|
|
81545
|
+
let top = newPos.top;
|
|
81546
|
+
let left = newPos.left;
|
|
81497
81547
|
|
|
81498
81548
|
// elementMore.style.display = 'flex';
|
|
81499
81549
|
util.showPop(elementMore, false, btnMore);
|
|
@@ -81659,18 +81709,24 @@ class ElementTool {
|
|
|
81659
81709
|
dom.addClass(elementMore, 'transition1');
|
|
81660
81710
|
let elmMore = elementTool.querySelector('.elm-more');
|
|
81661
81711
|
const viewportHeight = window.innerHeight;
|
|
81712
|
+
|
|
81713
|
+
/*
|
|
81662
81714
|
let top, left;
|
|
81663
|
-
if
|
|
81664
|
-
|
|
81665
|
-
|
|
81715
|
+
if(!this.builder.iframe) {
|
|
81716
|
+
top = elmMore.getBoundingClientRect().top;
|
|
81717
|
+
left = elmMore.getBoundingClientRect().left;
|
|
81666
81718
|
} else {
|
|
81667
|
-
|
|
81668
|
-
|
|
81669
|
-
|
|
81670
|
-
|
|
81671
|
-
|
|
81672
|
-
|
|
81719
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
81720
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
81721
|
+
top = elmMore.getBoundingClientRect().top;
|
|
81722
|
+
left = elmMore.getBoundingClientRect().left;
|
|
81723
|
+
top = top + adjY;
|
|
81724
|
+
left = left + adjX;
|
|
81673
81725
|
}
|
|
81726
|
+
*/
|
|
81727
|
+
const newPos = this.builder.util.getElementPosition(elmMore);
|
|
81728
|
+
let top = newPos.top;
|
|
81729
|
+
let left = newPos.left;
|
|
81674
81730
|
|
|
81675
81731
|
// elementMore.style.display = 'flex';
|
|
81676
81732
|
const btnMore = elementTool.querySelector('.elm-more');
|
|
@@ -88321,11 +88377,20 @@ class Tooltip {
|
|
|
88321
88377
|
let top, left;
|
|
88322
88378
|
top = elm.getBoundingClientRect().top + window.pageYOffset;
|
|
88323
88379
|
left = elm.getBoundingClientRect().left + window.pageXOffset;
|
|
88380
|
+
|
|
88381
|
+
/*
|
|
88382
|
+
if(iframe) {
|
|
88383
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
88384
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
88385
|
+
top = elm.getBoundingClientRect().top + adjY;
|
|
88386
|
+
left = elm.getBoundingClientRect().left + adjX;
|
|
88387
|
+
}
|
|
88388
|
+
*/
|
|
88389
|
+
|
|
88324
88390
|
if (iframe) {
|
|
88325
|
-
|
|
88326
|
-
|
|
88327
|
-
|
|
88328
|
-
left = elm.getBoundingClientRect().left + adjX;
|
|
88391
|
+
const newPos = this.util.getElementPosition(elm);
|
|
88392
|
+
top = newPos.top;
|
|
88393
|
+
left = newPos.left;
|
|
88329
88394
|
}
|
|
88330
88395
|
|
|
88331
88396
|
//console.log(top + ' - ' + left);
|
|
@@ -90445,6 +90510,8 @@ class ContentStuff$1 {
|
|
|
90445
90510
|
|
|
90446
90511
|
.is-tool.is-element-tool {
|
|
90447
90512
|
background: rgba(243, 243, 243, 0.9);
|
|
90513
|
+
border-radius: 3px;
|
|
90514
|
+
overflow: hidden;
|
|
90448
90515
|
}
|
|
90449
90516
|
.is-tool.is-element-tool button {
|
|
90450
90517
|
width: 25px;
|
|
@@ -90492,6 +90559,8 @@ class ContentStuff$1 {
|
|
|
90492
90559
|
width: auto;
|
|
90493
90560
|
left: auto;
|
|
90494
90561
|
right: -30px;
|
|
90562
|
+
border-radius: 2px;
|
|
90563
|
+
overflow: hidden;
|
|
90495
90564
|
}
|
|
90496
90565
|
|
|
90497
90566
|
.is-tool.is-row-tool button {
|
|
@@ -90626,6 +90695,9 @@ class ContentStuff$1 {
|
|
|
90626
90695
|
flex-direction: row;
|
|
90627
90696
|
margin-top: 0px;
|
|
90628
90697
|
margin-left: -1px;
|
|
90698
|
+
box-shadow: none;
|
|
90699
|
+
border-radius: 2px;
|
|
90700
|
+
overflow: hidden;
|
|
90629
90701
|
}
|
|
90630
90702
|
.is-tool.is-col-tool button {
|
|
90631
90703
|
width: 25px;
|
|
@@ -90982,6 +91054,23 @@ class ContentStuff$1 {
|
|
|
90982
91054
|
.padding-0[data-module="text-builder"] {
|
|
90983
91055
|
padding: 0 2px 4px !important;
|
|
90984
91056
|
}
|
|
91057
|
+
|
|
91058
|
+
|
|
91059
|
+
${this.builder.simpleEditingBreakpoint ? `
|
|
91060
|
+
|
|
91061
|
+
@media all and (max-width: ${this.builder.simpleEditingBreakpoint}) {
|
|
91062
|
+
.is-tool:not(#divSpacerTool) {
|
|
91063
|
+
display: none !important;
|
|
91064
|
+
}
|
|
91065
|
+
|
|
91066
|
+
.is-builder .row-active:not([data-protected]).row-outline {
|
|
91067
|
+
outline: none !important;
|
|
91068
|
+
}
|
|
91069
|
+
}
|
|
91070
|
+
|
|
91071
|
+
` : ''}
|
|
91072
|
+
|
|
91073
|
+
|
|
90985
91074
|
`;
|
|
90986
91075
|
builder.contentStuff.insertAdjacentHTML('afterbegin', `
|
|
90987
91076
|
<style>
|
|
@@ -94087,6 +94176,9 @@ class ContentBuilder {
|
|
|
94087
94176
|
toolbar: 'top',
|
|
94088
94177
|
toolbarDisplay: 'auto',
|
|
94089
94178
|
shortenHTML: true,
|
|
94179
|
+
simpleEditingBreakpoint: '970px',
|
|
94180
|
+
// iframe only
|
|
94181
|
+
|
|
94090
94182
|
resizeHeight: false,
|
|
94091
94183
|
snippetsSidebarDisplay: 'auto',
|
|
94092
94184
|
// snippetDisplay: 'auto', // values: auto, visible (a new alternative). If used, will set the snippetsSidebarDisplay
|
|
@@ -94967,6 +95059,12 @@ class ContentBuilder {
|
|
|
94967
95059
|
this.win = win;
|
|
94968
95060
|
this.doc = doc;
|
|
94969
95061
|
this.doc.body.classList.add('data-editor');
|
|
95062
|
+
|
|
95063
|
+
// Disable on mobile
|
|
95064
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
95065
|
+
if (viewportWidth <= 768) {
|
|
95066
|
+
this.hideImageResizer = true;
|
|
95067
|
+
}
|
|
94970
95068
|
const dom = new Dom(this);
|
|
94971
95069
|
this.dom = dom;
|
|
94972
95070
|
const util = new Util$1(this); // General utilities
|
|
@@ -95124,6 +95222,12 @@ class ContentBuilder {
|
|
|
95124
95222
|
this.win.addEventListener('resize', this.doWindowResize = () => {
|
|
95125
95223
|
this.util.clearActiveCell();
|
|
95126
95224
|
this.util.clearControls();
|
|
95225
|
+
|
|
95226
|
+
// Disable on mobile
|
|
95227
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
95228
|
+
if (viewportWidth <= 768) {
|
|
95229
|
+
this.hideImageResizer = true;
|
|
95230
|
+
}
|
|
95127
95231
|
});
|
|
95128
95232
|
}
|
|
95129
95233
|
|
|
@@ -97516,8 +97620,12 @@ class ContentBuilder {
|
|
|
97516
97620
|
|
|
97517
97621
|
// Enable resizable on click
|
|
97518
97622
|
if (!col.classList.contains('noresize')) {
|
|
97519
|
-
|
|
97520
|
-
this.
|
|
97623
|
+
// Disable on mobile
|
|
97624
|
+
const viewportWidth = this.doc.body.clientWidth;
|
|
97625
|
+
if (viewportWidth > 768) {
|
|
97626
|
+
this.resize = new Resize(col, this);
|
|
97627
|
+
this.resize.enable();
|
|
97628
|
+
}
|
|
97521
97629
|
}
|
|
97522
97630
|
}
|
|
97523
97631
|
if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
|
|
@@ -99825,6 +99933,19 @@ class ContentStuff {
|
|
|
99825
99933
|
<path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
99826
99934
|
<path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
|
|
99827
99935
|
</symbol>
|
|
99936
|
+
|
|
99937
|
+
<symbol id="icon-arrow-down2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
99938
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
99939
|
+
<path d="M12 5l0 14"></path>
|
|
99940
|
+
<path d="M18 13l-6 6"></path>
|
|
99941
|
+
<path d="M6 13l6 6"></path>
|
|
99942
|
+
</symbol>
|
|
99943
|
+
<symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
99944
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
99945
|
+
<path d="M18 6l-12 12"></path>
|
|
99946
|
+
<path d="M6 6l12 12"></path>
|
|
99947
|
+
</symbol>
|
|
99948
|
+
|
|
99828
99949
|
</defs>
|
|
99829
99950
|
</svg>
|
|
99830
99951
|
|
|
@@ -99845,12 +99966,15 @@ class ContentStuff {
|
|
|
99845
99966
|
outline: none;
|
|
99846
99967
|
text-align: center;
|
|
99847
99968
|
cursor: pointer;
|
|
99848
|
-
|
|
99969
|
+
|
|
99970
|
+
border-radius: 0;
|
|
99971
|
+
border-top-left-radius: 3px;
|
|
99972
|
+
border-top-right-radius: 3px;
|
|
99849
99973
|
overflow: hidden;
|
|
99850
99974
|
}
|
|
99851
99975
|
.is-box-tool button {
|
|
99852
|
-
width:
|
|
99853
|
-
height:
|
|
99976
|
+
width: 35px !important;
|
|
99977
|
+
height: 35px !important;
|
|
99854
99978
|
cursor: pointer;
|
|
99855
99979
|
}
|
|
99856
99980
|
.is-box-tool button svg {
|
|
@@ -99863,37 +99987,6 @@ class ContentStuff {
|
|
|
99863
99987
|
background: #FF9800;
|
|
99864
99988
|
}
|
|
99865
99989
|
|
|
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
99990
|
.is-wrapper {
|
|
99898
99991
|
opacity: 0.01;
|
|
99899
99992
|
/* setting display=none makes initial script may not work properly */
|
|
@@ -99933,193 +100026,6 @@ class ContentStuff {
|
|
|
99933
100026
|
overflow-y: unset !important;
|
|
99934
100027
|
}
|
|
99935
100028
|
|
|
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
100029
|
`; // .is-wrapper.is-edit > div {
|
|
100124
100030
|
// overflow-x: unset;
|
|
100125
100031
|
// overflow-y: unset;
|
|
@@ -115263,18 +115169,22 @@ ${currentHtml}
|
|
|
115263
115169
|
const pop = this.popAIMore;
|
|
115264
115170
|
let btn = this.builder.activeBox.querySelector('.input-box-more');
|
|
115265
115171
|
this.builder.editor.util.showPop(pop, false, btn);
|
|
115172
|
+
/*
|
|
115266
115173
|
let top, left;
|
|
115267
|
-
|
|
115268
|
-
|
|
115269
|
-
|
|
115270
|
-
left = btn.getBoundingClientRect().left + window.pageXOffset;
|
|
115174
|
+
if(!this.builder.iframe) {
|
|
115175
|
+
top = btn.getBoundingClientRect().top + window.pageYOffset;
|
|
115176
|
+
left = btn.getBoundingClientRect().left + window.pageXOffset;
|
|
115271
115177
|
} else {
|
|
115272
|
-
|
|
115273
|
-
|
|
115274
|
-
|
|
115275
|
-
|
|
115178
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
115179
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
115180
|
+
top = btn.getBoundingClientRect().top + adjY;
|
|
115181
|
+
left = btn.getBoundingClientRect().left + adjX;
|
|
115276
115182
|
}
|
|
115183
|
+
*/
|
|
115277
115184
|
|
|
115185
|
+
let newPos = this.builder.editor.util.getElementPosition(btn);
|
|
115186
|
+
let top = newPos.top + window.pageYOffset;
|
|
115187
|
+
let left = newPos.left + window.pageXOffset;
|
|
115278
115188
|
const w = pop.offsetWidth;
|
|
115279
115189
|
top = top + btn.offsetHeight * this.builder.editor.opts.zoom;
|
|
115280
115190
|
left = left + btn.offsetWidth * this.builder.editor.opts.zoom;
|
|
@@ -115327,6 +115237,8 @@ class ContentBox {
|
|
|
115327
115237
|
disableStaticSection: false,
|
|
115328
115238
|
framework: '',
|
|
115329
115239
|
imageRenameOnEdit: true,
|
|
115240
|
+
simpleEditingBreakpoint: '970px',
|
|
115241
|
+
// iframe only
|
|
115330
115242
|
// Old Template System:
|
|
115331
115243
|
designUrl1: 'assets/designs/basic.js',
|
|
115332
115244
|
designUrl2: 'assets/designs/examples.js',
|
|
@@ -118414,6 +118326,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118414
118326
|
this.animateScroll = new AnimateScroll(this);
|
|
118415
118327
|
this.timeline = new Timeline(this);
|
|
118416
118328
|
this.util = new Util(this);
|
|
118329
|
+
this.controlpanel = new ControlPanel(this);
|
|
118417
118330
|
|
|
118418
118331
|
if (!this.pageTemplate) {
|
|
118419
118332
|
this.pageTemplate = this.util.getPageTemplate(this.framework);
|
|
@@ -118517,6 +118430,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118517
118430
|
livePreviewAlwaysReload: this.settings.livePreviewAlwaysReload,
|
|
118518
118431
|
livePreviewReloadEvery: this.settings.livePreviewReloadEvery,
|
|
118519
118432
|
iframe: this.settings.iframe,
|
|
118433
|
+
simpleEditingBreakpoint: this.settings.simpleEditingBreakpoint,
|
|
118520
118434
|
imageAdjust: 1,
|
|
118521
118435
|
// ContentBuilder
|
|
118522
118436
|
scriptPath: this.settings.scriptPath,
|
|
@@ -118866,7 +118780,6 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118866
118780
|
}
|
|
118867
118781
|
`}
|
|
118868
118782
|
|
|
118869
|
-
|
|
118870
118783
|
/* protected section */
|
|
118871
118784
|
.is-section.protected .is-box-tool {
|
|
118872
118785
|
display: none !important;
|
|
@@ -118967,15 +118880,18 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
118967
118880
|
display: none;
|
|
118968
118881
|
border-radius: 50px;
|
|
118969
118882
|
overflow:hidden;
|
|
118970
|
-
|
|
118883
|
+
background: rgba(243, 243, 243, 0.9);
|
|
118971
118884
|
width: 92px;
|
|
118972
118885
|
justify-content: center;
|
|
118973
118886
|
}
|
|
118974
118887
|
.is-wrapper .is-box-info button {
|
|
118975
|
-
width:
|
|
118976
|
-
height:
|
|
118888
|
+
width:32px;
|
|
118889
|
+
height:32px;
|
|
118977
118890
|
cursor:pointer;
|
|
118978
118891
|
}
|
|
118892
|
+
.is-wrapper .is-box-info * {
|
|
118893
|
+
color: #000;
|
|
118894
|
+
}
|
|
118979
118895
|
.is-wrapper .box-select .is-box-info {
|
|
118980
118896
|
display: flex;
|
|
118981
118897
|
}
|
|
@@ -119039,6 +118955,94 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119039
118955
|
display: none !important;
|
|
119040
118956
|
}
|
|
119041
118957
|
|
|
118958
|
+
/* New Section Tool */
|
|
118959
|
+
.is-section-tool {
|
|
118960
|
+
display: none;
|
|
118961
|
+
z-index: 1;
|
|
118962
|
+
position: absolute;
|
|
118963
|
+
margin-top: 40px;
|
|
118964
|
+
top: 12%;
|
|
118965
|
+
right: 0px;
|
|
118966
|
+
left: auto;
|
|
118967
|
+
width: 35px;
|
|
118968
|
+
height: auto;
|
|
118969
|
+
flex-direction: column;
|
|
118970
|
+
border-top-left-radius: 3px;
|
|
118971
|
+
border-bottom-left-radius: 3px;
|
|
118972
|
+
overflow: hidden;
|
|
118973
|
+
}
|
|
118974
|
+
.is-section-tool > button {
|
|
118975
|
+
width: 35px;
|
|
118976
|
+
height: 35px;
|
|
118977
|
+
border-radius: 0;
|
|
118978
|
+
line-height: 35px;
|
|
118979
|
+
padding: 0px;
|
|
118980
|
+
font-size: 13px;
|
|
118981
|
+
cursor: pointer;
|
|
118982
|
+
border: none;
|
|
118983
|
+
background: transparent;
|
|
118984
|
+
}
|
|
118985
|
+
.is-section-tool > button.btn-move-section-up, .is-section-tool > button.btn-move-section-down {
|
|
118986
|
+
background: #E3E3E3;
|
|
118987
|
+
}
|
|
118988
|
+
.is-section-tool > button.btn-section-edit {
|
|
118989
|
+
background: #03ACD6;
|
|
118990
|
+
}
|
|
118991
|
+
.is-section-tool > button.btn-section-remove {
|
|
118992
|
+
background: rgb(247, 99, 46);
|
|
118993
|
+
}
|
|
118994
|
+
.is-section-tool > button svg {
|
|
118995
|
+
width: 16px;
|
|
118996
|
+
height: 16px;
|
|
118997
|
+
flex: none;
|
|
118998
|
+
}
|
|
118999
|
+
.is-section-tool > button.btn-move-section-up *, .is-section-tool > button.btn-move-section-down * {
|
|
119000
|
+
color: #000;
|
|
119001
|
+
fill: #000;
|
|
119002
|
+
}
|
|
119003
|
+
.is-section-tool > button.btn-section-edit *, .is-section-tool > button.btn-section-remove * {
|
|
119004
|
+
color: #fff;
|
|
119005
|
+
fill: #fff;
|
|
119006
|
+
}
|
|
119007
|
+
|
|
119008
|
+
${this.simpleEditingBreakpoint ? `
|
|
119009
|
+
|
|
119010
|
+
@media all and (max-width: ${this.simpleEditingBreakpoint}) {
|
|
119011
|
+
.is-tool:not(#divSpacerTool) {
|
|
119012
|
+
display: none !important;
|
|
119013
|
+
}
|
|
119014
|
+
.hard-select .box-select .is-box-info.is-tool {
|
|
119015
|
+
display: none !important;
|
|
119016
|
+
}
|
|
119017
|
+
|
|
119018
|
+
.is-section-tool,
|
|
119019
|
+
.hard-select .is-section.section-select .is-section-tool {
|
|
119020
|
+
display: none !important;
|
|
119021
|
+
}
|
|
119022
|
+
|
|
119023
|
+
.is-box-tool > *:not(.is-select-image),
|
|
119024
|
+
.hard-select .is-box.box-select .is-box-tool > *:not(.is-select-image) {
|
|
119025
|
+
display: none !important;
|
|
119026
|
+
}
|
|
119027
|
+
|
|
119028
|
+
.is-box .is-box-tool {
|
|
119029
|
+
left: -200px !important;
|
|
119030
|
+
}
|
|
119031
|
+
.is-box:has(.is-overlay-bg) .is-box-tool {
|
|
119032
|
+
width: 40px !important;
|
|
119033
|
+
left: calc(50% - 20px) !important;
|
|
119034
|
+
}
|
|
119035
|
+
|
|
119036
|
+
.is-builder .row-active:not([data-protected]).row-outline {
|
|
119037
|
+
outline: none !important;
|
|
119038
|
+
}
|
|
119039
|
+
.hard-select .is-box.box-select {
|
|
119040
|
+
// outline: none !important;
|
|
119041
|
+
}
|
|
119042
|
+
}
|
|
119043
|
+
|
|
119044
|
+
` : ''}
|
|
119045
|
+
|
|
119042
119046
|
</style>`);
|
|
119043
119047
|
dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
|
|
119044
119048
|
|
|
@@ -119492,7 +119496,36 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119492
119496
|
if (this.iframe) {
|
|
119493
119497
|
document.addEventListener('click', this.doDocumentClick = e => {
|
|
119494
119498
|
e = e || window.event;
|
|
119495
|
-
var target = e.target || e.srcElement;
|
|
119499
|
+
var target = e.target || e.srcElement; //--- New UX ---
|
|
119500
|
+
|
|
119501
|
+
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')) {
|
|
119502
|
+
// Outside Wrapper
|
|
119503
|
+
if (document.activeElement) if (document.activeElement.tagName.toLowerCase() === 'input') return;
|
|
119504
|
+
this.wrapperEl.classList.remove('is-container-edit');
|
|
119505
|
+
this.wrapperEl.classList.remove('is-clean-edit');
|
|
119506
|
+
const modalEditBox = this.builderStuff.querySelector('.editbox');
|
|
119507
|
+
modalEditBox.style.display = '';
|
|
119508
|
+
const modalEditSection = this.builderStuff.querySelector('.editsection');
|
|
119509
|
+
modalEditSection.style.display = '';
|
|
119510
|
+
|
|
119511
|
+
if (modalEditBox.style.display !== 'flex' && modalEditSection.style.display !== 'flex' && !this.timeline.modalTimeline.classList.contains('active') && !this.animateScroll.modalAnimateScroll.classList.contains('active')) {
|
|
119512
|
+
this.wrapperEl.classList.remove('hard-select'); // Remove previous box-select & section-select
|
|
119513
|
+
|
|
119514
|
+
const prevBox = this.doc.querySelectorAll('.box-select');
|
|
119515
|
+
prevBox.forEach(elm => {
|
|
119516
|
+
elm.classList.remove('box-select');
|
|
119517
|
+
});
|
|
119518
|
+
const prevSection = this.doc.querySelectorAll('.section-select');
|
|
119519
|
+
prevSection.forEach(elm => {
|
|
119520
|
+
elm.classList.remove('section-select');
|
|
119521
|
+
});
|
|
119522
|
+
}
|
|
119523
|
+
|
|
119524
|
+
if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
|
|
119525
|
+
document.body.classList.remove('box-modal-open'); // Remove added 'box-modal-open' by Box Settings open
|
|
119526
|
+
} //---
|
|
119527
|
+
|
|
119528
|
+
|
|
119496
119529
|
let a = false,
|
|
119497
119530
|
b = false,
|
|
119498
119531
|
f = false,
|
|
@@ -119741,10 +119774,38 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119741
119774
|
}, delay);
|
|
119742
119775
|
}
|
|
119743
119776
|
|
|
119777
|
+
defineLastBox(section) {
|
|
119778
|
+
const boxes = section.querySelectorAll('.is-box');
|
|
119779
|
+
boxes.forEach(box => {
|
|
119780
|
+
box.classList.remove('last-box');
|
|
119781
|
+
});
|
|
119782
|
+
|
|
119783
|
+
if (boxes.length === 0) {
|
|
119784
|
+
section.classList.add('last-box');
|
|
119785
|
+
} else {
|
|
119786
|
+
const lastBox = boxes[boxes.length - 1];
|
|
119787
|
+
if (lastBox) lastBox.classList.add('last-box');
|
|
119788
|
+
}
|
|
119789
|
+
}
|
|
119790
|
+
|
|
119744
119791
|
sectionSetup(section) {
|
|
119745
119792
|
let tool = section.querySelector('.is-section-tool');
|
|
119746
119793
|
if (tool) tool.parentNode.removeChild(tool);
|
|
119747
|
-
dom.appendHtml(section,
|
|
119794
|
+
dom.appendHtml(section, `<div class="is-section-tool">
|
|
119795
|
+
<button type="button" class="btn-move-section-up" tabindex="-1" data-title="${out('Move Up')}" title="${out('Move Up')}">
|
|
119796
|
+
<svg class="is-icon-flex" style="transform:rotate(180deg)"><use xlink:href="#icon-arrow-down2"></use></svg>
|
|
119797
|
+
</button>
|
|
119798
|
+
<button type="button" class="btn-move-section-down" tabindex="-1" data-title="${out('Move Down')}" title="${out('Move Down')}">
|
|
119799
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-arrow-down2"></use></svg>
|
|
119800
|
+
</button>
|
|
119801
|
+
<button type="button" class="btn-section-edit" tabindex="-1" data-title="${out('Section Settings')}" title="${out('Section Settings')}">
|
|
119802
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg>
|
|
119803
|
+
</button>
|
|
119804
|
+
<button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
|
|
119805
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-close"></use></svg>
|
|
119806
|
+
</button>
|
|
119807
|
+
</div>`);
|
|
119808
|
+
this.defineLastBox(section);
|
|
119748
119809
|
let info = section.querySelector('.is-section-info');
|
|
119749
119810
|
if (info) info.parentNode.removeChild(info);
|
|
119750
119811
|
const sectionId = section.getAttribute('id');
|
|
@@ -119761,12 +119822,26 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119761
119822
|
this.editor.tooltip.set(elm, 5, 3, true);
|
|
119762
119823
|
}
|
|
119763
119824
|
});
|
|
119764
|
-
const
|
|
119825
|
+
const btnSectionUp = section.querySelector('.btn-move-section-up');
|
|
119826
|
+
btnSectionUp.addEventListener('click', () => {
|
|
119827
|
+
this.editor.saveForUndo();
|
|
119828
|
+
this.editsection.sectionUp();
|
|
119829
|
+
this.sectionStack();
|
|
119830
|
+
this.onChange();
|
|
119831
|
+
});
|
|
119832
|
+
const btnSectionDown = section.querySelector('.btn-move-section-down');
|
|
119833
|
+
btnSectionDown.addEventListener('click', () => {
|
|
119834
|
+
this.editor.saveForUndo();
|
|
119835
|
+
this.editsection.sectionDown();
|
|
119836
|
+
this.sectionStack();
|
|
119837
|
+
this.onChange();
|
|
119838
|
+
});
|
|
119839
|
+
const btnSectionEdit = section.querySelector('.btn-section-edit');
|
|
119765
119840
|
btnSectionEdit.addEventListener('click', () => {
|
|
119766
119841
|
this.editbox.close();
|
|
119767
119842
|
this.editsection.edit();
|
|
119768
119843
|
});
|
|
119769
|
-
const btnSectionRemove = section.querySelector('.
|
|
119844
|
+
const btnSectionRemove = section.querySelector('.btn-section-remove');
|
|
119770
119845
|
btnSectionRemove.addEventListener('click', () => {
|
|
119771
119846
|
const modal = document.querySelector('.is-modal.delsectionconfirm');
|
|
119772
119847
|
|
|
@@ -119807,7 +119882,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119807
119882
|
boxSetup(box) {
|
|
119808
119883
|
let tool = box.querySelector('.is-box-tool');
|
|
119809
119884
|
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:
|
|
119885
|
+
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
119886
|
let info = box.querySelector('.is-box-info');
|
|
119812
119887
|
if (info) info.parentNode.removeChild(info);
|
|
119813
119888
|
|
|
@@ -119913,12 +119988,16 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
119913
119988
|
let currentImageUrl;
|
|
119914
119989
|
const activeBox = this.activeBox;
|
|
119915
119990
|
let overlay = activeBox.querySelector('.is-overlay');
|
|
119916
|
-
|
|
119917
|
-
if (
|
|
119918
|
-
|
|
119919
|
-
|
|
119991
|
+
|
|
119992
|
+
if (overlay) {
|
|
119993
|
+
const overlayBg = overlay.querySelector('.is-overlay-bg');
|
|
119994
|
+
if (overlayBg) if (overlayBg.style.backgroundImage) {
|
|
119995
|
+
if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
|
|
119996
|
+
currentImageUrl = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
119997
|
+
}
|
|
119920
119998
|
}
|
|
119921
119999
|
}
|
|
120000
|
+
|
|
119922
120001
|
this.editor.openImageSelect(src => {
|
|
119923
120002
|
this.editor.saveForUndo();
|
|
119924
120003
|
this.boxImage(src); //Trigger Change event
|
|
@@ -120820,47 +120899,47 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
|
|
|
120820
120899
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120821
120900
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120822
120901
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120823
|
-
boxTool.style.width = '
|
|
120824
|
-
boxTool.style.left = 'calc(50% -
|
|
120902
|
+
boxTool.style.width = '70px';
|
|
120903
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120825
120904
|
} else if (sectionNavbar) {
|
|
120826
120905
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120827
120906
|
box.querySelector('.is-box-edit').style.display = 'none';
|
|
120828
120907
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120829
|
-
boxTool.style.width = '
|
|
120830
|
-
boxTool.style.left = 'calc(50% -
|
|
120908
|
+
boxTool.style.width = '35px';
|
|
120909
|
+
boxTool.style.left = 'calc(50% - 17.5px)';
|
|
120831
120910
|
} else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
|
|
120832
120911
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
120833
120912
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120834
120913
|
box.querySelector('.is-module-edit').style.display = 'inline-block';
|
|
120835
|
-
boxTool.style.width = '
|
|
120836
|
-
boxTool.style.left = 'calc(50% -
|
|
120914
|
+
boxTool.style.width = '105px';
|
|
120915
|
+
boxTool.style.left = 'calc(50% - 52.5px)';
|
|
120837
120916
|
|
|
120838
120917
|
if (this.onImageSelectClick || this.imageselect) {
|
|
120839
120918
|
if (this.showSelectCover) {
|
|
120840
|
-
boxTool.style.width = '
|
|
120919
|
+
boxTool.style.width = '140px';
|
|
120841
120920
|
box.querySelector('.is-select-image').style.display = 'inline-block';
|
|
120842
|
-
boxTool.style.left = 'calc(50% -
|
|
120921
|
+
boxTool.style.left = 'calc(50% - 70px)';
|
|
120843
120922
|
}
|
|
120844
120923
|
}
|
|
120845
120924
|
|
|
120846
120925
|
if (box.querySelector('.is-overlay-content[data-module]').getAttribute('data-module') === 'video-bg') {
|
|
120847
120926
|
box.querySelector('.is-cover-upload').style.display = 'none';
|
|
120848
120927
|
box.querySelector('.is-select-image').style.display = 'none';
|
|
120849
|
-
boxTool.style.width = '
|
|
120850
|
-
boxTool.style.left = 'calc(50% -
|
|
120928
|
+
boxTool.style.width = '70px';
|
|
120929
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120851
120930
|
}
|
|
120852
120931
|
} else {
|
|
120853
120932
|
box.querySelector('.is-cover-upload').style.display = 'block';
|
|
120854
120933
|
box.querySelector('.is-box-edit').style.display = 'inline-block';
|
|
120855
120934
|
box.querySelector('.is-module-edit').style.display = 'none';
|
|
120856
|
-
boxTool.style.width = '
|
|
120857
|
-
boxTool.style.left = 'calc(50% -
|
|
120935
|
+
boxTool.style.width = '70px';
|
|
120936
|
+
boxTool.style.left = 'calc(50% - 35px)';
|
|
120858
120937
|
|
|
120859
120938
|
if (this.onImageSelectClick || this.imageselect) {
|
|
120860
120939
|
if (this.showSelectCover) {
|
|
120861
|
-
boxTool.style.width = '
|
|
120940
|
+
boxTool.style.width = '105px';
|
|
120862
120941
|
box.querySelector('.is-select-image').style.display = 'inline-block';
|
|
120863
|
-
boxTool.style.left = 'calc(50% -
|
|
120942
|
+
boxTool.style.left = 'calc(50% - 52.5px)';
|
|
120864
120943
|
}
|
|
120865
120944
|
}
|
|
120866
120945
|
}
|