@innovastudio/contentbox 1.5.93 → 1.5.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.css +197 -25
  3. package/public/contentbox/contentbox.esm.js +633 -554
  4. package/public/contentbox/contentbox.min.js +12 -12
  5. package/readme.txt +1 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -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 = ''; // 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:40px;height:40px;" target="target-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);">
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); // Box Tool
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
- } // builderStuff.querySelector('.input-custom-value-central').value = this.builder.settings.customval;
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); //Trigger Change event
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); //Trigger Change event
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
- } // //simplified
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% - 40px)';
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 (!this.builder.iframe) {
20616
- top = emptyinfo.getBoundingClientRect().top;
20617
- left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
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
- let adjY = this.builder.iframe.getBoundingClientRect().top;
20620
- let adjX = this.builder.iframe.getBoundingClientRect().left;
20621
- top = emptyinfo.getBoundingClientRect().top + adjY;
20622
- left = emptyinfo.getBoundingClientRect().left + (emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11) + adjX;
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
- let top, left;
20795
- if (!this.builder.iframe) {
20796
- top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
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 (!this.builder.iframe) {
33652
- top = elm.getBoundingClientRect().top + window.pageYOffset;
33653
- left = elm.getBoundingClientRect().left + window.pageXOffset;
33598
+ if(!this.builder.iframe) {
33599
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
33600
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
33654
33601
  } else {
33655
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
33656
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
33657
- top = elm.getBoundingClientRect().top;
33658
- left = elm.getBoundingClientRect().left;
33659
- top = top + adjY;
33660
- left = left + adjX;
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 (!this.builder.iframe) {
64882
- top = activeImage.getBoundingClientRect().top + window.pageYOffset;
64883
- left = activeImage.getBoundingClientRect().left + window.pageXOffset;
64839
+ if(!this.builder.iframe) {
64840
+ top = activeImage.getBoundingClientRect().top + window.pageYOffset;
64841
+ left = activeImage.getBoundingClientRect().left + window.pageXOffset;
64884
64842
  } else {
64885
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
64886
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
64887
- top = activeImage.getBoundingClientRect().top + adjY;
64888
- left = activeImage.getBoundingClientRect().left + adjX;
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').style.display = 'none';
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 (!this.builder.iframe) {
65004
- top = img.getBoundingClientRect().top + window.pageYOffset;
65005
- left = img.getBoundingClientRect().left + window.pageXOffset;
64968
+ if(!this.builder.iframe) {
64969
+ top = img.getBoundingClientRect().top + window.pageYOffset;
64970
+ left = img.getBoundingClientRect().left + window.pageXOffset;
65006
64971
  } else {
65007
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
65008
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
65009
- top = img.getBoundingClientRect().top + adjY;
65010
- left = img.getBoundingClientRect().left + adjX;
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').style.display = 'none'; //needed by Safari (prevent z-index problem)
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').style.display = 'block'; //needed by Safari (prevent z-index problem)
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').style.display = 'none'; //needed by Safari (prevent z-index problem)
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').style.display = 'block'; //needed by Safari (prevent z-index problem)
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 (!this.builder.iframe) {
65600
- top = elm.getBoundingClientRect().top + window.pageYOffset;
65601
- left = elm.getBoundingClientRect().left + window.pageXOffset;
65575
+ if(!this.builder.iframe) {
65576
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
65577
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
65602
65578
  } else {
65603
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
65604
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
65605
- top = elm.getBoundingClientRect().top + adjY;
65606
- left = elm.getBoundingClientRect().left + adjX;
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').style.display = 'block';
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').style.display = 'none';
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 (!this.builder.iframe) {
65672
- top = elm.getBoundingClientRect().top + window.pageYOffset;
65673
- left = elm.getBoundingClientRect().left + window.pageXOffset;
65655
+ if(!this.builder.iframe) {
65656
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
65657
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
65674
65658
  } else {
65675
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
65676
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
65677
- top = elm.getBoundingClientRect().top + adjY;
65678
- left = elm.getBoundingClientRect().left + adjX;
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').style.display = 'block';
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 (!this.builder.iframe) {
65728
- top = elm.getBoundingClientRect().top + window.pageYOffset;
65729
- left = elm.getBoundingClientRect().left + window.pageXOffset;
65719
+ if(!this.builder.iframe) {
65720
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
65721
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
65730
65722
  } else {
65731
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
65732
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
65733
- top = elm.getBoundingClientRect().top + adjY;
65734
- left = elm.getBoundingClientRect().left + adjX;
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 (!this.builder.iframe) {
65754
- top = elm.getBoundingClientRect().top + window.pageYOffset;
65755
- left = elm.getBoundingClientRect().left + window.pageXOffset;
65750
+ if(!this.builder.iframe) {
65751
+ top = elm.getBoundingClientRect().top + window.pageYOffset;
65752
+ left = elm.getBoundingClientRect().left + window.pageXOffset;
65756
65753
  } else {
65757
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
65758
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
65759
- top = elm.getBoundingClientRect().top + adjY;
65760
- left = elm.getBoundingClientRect().left + adjX;
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').style.display = 'block';
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').style.display = 'none';
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').style.display = 'none';
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').style.display = 'none';
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').style.display = 'none';
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 (!this.builder.iframe) {
73188
- top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
73189
- left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
73202
+ if(!this.builder.iframe) {
73203
+ top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
73204
+ left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset;
73190
73205
  } else {
73191
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
73192
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
73193
- top = btnCellAdd.getBoundingClientRect().top + adjY + 10;
73194
- left = btnCellAdd.getBoundingClientRect().left + adjX + 5;
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 (!this.builder.iframe) {
73223
- top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
73224
- left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
73247
+ if(!this.builder.iframe) {
73248
+ top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
73249
+ left = btnCellMore.getBoundingClientRect().left + window.pageXOffset;
73225
73250
  } else {
73226
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
73227
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
73228
- top = btnCellMore.getBoundingClientRect().top + adjY;
73229
- left = btnCellMore.getBoundingClientRect().left + adjX;
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 = document.querySelector(this.builder.opts.container); // get one
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 (!this.builder.iframe) {
73328
- top = btnMore.getBoundingClientRect().top + window.pageYOffset;
73329
- left = btnMore.getBoundingClientRect().left + window.pageXOffset;
73357
+ if(!this.builder.iframe) {
73358
+ top = btnMore.getBoundingClientRect().top + window.pageYOffset;
73359
+ left = btnMore.getBoundingClientRect().left + window.pageXOffset;
73330
73360
  } else {
73331
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
73332
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
73333
- top = btnMore.getBoundingClientRect().top + adjY;
73334
- left = btnMore.getBoundingClientRect().left + adjX;
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 (!this.builder.iframe) {
73514
- top = btnRowAdd.getBoundingClientRect().top;
73515
- left = btnRowAdd.getBoundingClientRect().left;
73549
+ if(!this.builder.iframe) {
73550
+ top = btnRowAdd.getBoundingClientRect().top;
73551
+ left = btnRowAdd.getBoundingClientRect().left;
73516
73552
  } else {
73517
- let adjY = this.builder.iframe.getBoundingClientRect().top;
73518
- let adjX = this.builder.iframe.getBoundingClientRect().left;
73519
- top = btnRowAdd.getBoundingClientRect().top + adjY;
73520
- left = btnRowAdd.getBoundingClientRect().left + adjX;
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 (!this.builder.iframe) {
81365
- top = elmAdd.getBoundingClientRect().top;
81366
- left = elmAdd.getBoundingClientRect().left;
81406
+ if(!this.builder.iframe) {
81407
+ top = elmAdd.getBoundingClientRect().top;
81408
+ left = elmAdd.getBoundingClientRect().left;
81367
81409
  } else {
81368
- let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
81369
- let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
81370
-
81371
- top = elmAdd.getBoundingClientRect().top + adjY;
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 (!this.builder.iframe) {
81488
- top = btnMore.getBoundingClientRect().top;
81489
- left = btnMore.getBoundingClientRect().left;
81534
+ if(!this.builder.iframe) {
81535
+ top = btnMore.getBoundingClientRect().top;
81536
+ left = btnMore.getBoundingClientRect().left;
81490
81537
  } else {
81491
- let adjY = this.builder.iframe.getBoundingClientRect().top; // + window.pageYOffset;
81492
- let adjX = this.builder.iframe.getBoundingClientRect().left; // + window.pageXOffset;
81493
-
81494
- top = btnMore.getBoundingClientRect().top + adjY;
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 (!this.builder.iframe) {
81664
- top = elmMore.getBoundingClientRect().top;
81665
- left = elmMore.getBoundingClientRect().left;
81715
+ if(!this.builder.iframe) {
81716
+ top = elmMore.getBoundingClientRect().top;
81717
+ left = elmMore.getBoundingClientRect().left;
81666
81718
  } else {
81667
- let adjY = this.builder.iframe.getBoundingClientRect().top;
81668
- let adjX = this.builder.iframe.getBoundingClientRect().left;
81669
- top = elmMore.getBoundingClientRect().top;
81670
- left = elmMore.getBoundingClientRect().left;
81671
- top = top + adjY;
81672
- left = left + adjX;
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
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
88326
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
88327
- top = elm.getBoundingClientRect().top + adjY;
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
- this.resize = new Resize(col, this);
97520
- this.resize.enable();
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
- border-radius: 0px;
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: 40px !important;
99853
- height: 40px !important;
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
- if (!this.builder.iframe) {
115269
- top = btn.getBoundingClientRect().top + window.pageYOffset;
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
- let adjY = this.builder.iframe.getBoundingClientRect().top + window.pageYOffset;
115273
- let adjX = this.builder.iframe.getBoundingClientRect().left + window.pageXOffset;
115274
- top = btn.getBoundingClientRect().top + adjY;
115275
- left = btn.getBoundingClientRect().left + adjX;
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
- /* background: rgba(243, 243, 243, 0.9); */
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:28px;
118976
- height:28px;
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, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>');
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 btnSectionEdit = section.querySelector('.is-section-edit');
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('.is-section-remove');
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:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);background:rgb(78 170 57)">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<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>' + '<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>');
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
- const overlayBg = overlay.querySelector('.is-overlay-bg');
119917
- if (overlayBg) if (overlayBg.style.backgroundImage) {
119918
- if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
119919
- currentImageUrl = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
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 = '80px';
120824
- boxTool.style.left = 'calc(50% - 40px)';
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 = '40px';
120830
- boxTool.style.left = 'calc(50% - 20px)';
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 = '120px';
120836
- boxTool.style.left = 'calc(50% - 60px)';
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 = '160px';
120919
+ boxTool.style.width = '140px';
120841
120920
  box.querySelector('.is-select-image').style.display = 'inline-block';
120842
- boxTool.style.left = 'calc(50% - 80px)';
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 = '80px';
120850
- boxTool.style.left = 'calc(50% - 40px)';
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 = '80px';
120857
- boxTool.style.left = 'calc(50% - 40px)';
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 = '120px';
120940
+ boxTool.style.width = '105px';
120862
120941
  box.querySelector('.is-select-image').style.display = 'inline-block';
120863
- boxTool.style.left = 'calc(50% - 60px)';
120942
+ boxTool.style.left = 'calc(50% - 52.5px)';
120864
120943
  }
120865
120944
  }
120866
120945
  }