@innovastudio/contentbox 1.3.27 → 1.4.2

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 +78 -9
  3. package/public/contentbox/contentbox.esm.js +1553 -547
  4. package/public/contentbox/contentbox.min.js +10 -10
  5. package/readme.txt +1 -1
package/public/contentbox/contentbox.esm.js CHANGED
@@ -57,13 +57,21 @@ class Dom$1 {
57
57
  SVGAnimatedString = window.SVGAnimatedString;
58
58
  }
59
59
 
60
- const newClasses = this.convertToArray(classname);
60
+ let convertToArray = value => {
61
+ if (typeof value === 'string') {
62
+ value = value.split(' ');
63
+ }
64
+
65
+ return value;
66
+ };
67
+
68
+ const newClasses = convertToArray(classname);
61
69
  let classList;
62
70
 
63
71
  if (element.className instanceof SVGAnimatedString) {
64
- classList = this.convertToArray(element.className.baseVal);
72
+ classList = convertToArray(element.className.baseVal);
65
73
  } else {
66
- classList = this.convertToArray(element.className);
74
+ classList = convertToArray(element.className);
67
75
  }
68
76
 
69
77
  newClasses.forEach(newClass => {
@@ -103,13 +111,21 @@ class Dom$1 {
103
111
  SVGAnimatedString = window.SVGAnimatedString;
104
112
  }
105
113
 
106
- const newClasses = this.convertToArray(classname);
114
+ let convertToArray = value => {
115
+ if (typeof value === 'string') {
116
+ value = value.split(' ');
117
+ }
118
+
119
+ return value;
120
+ };
121
+
122
+ const newClasses = convertToArray(classname);
107
123
  let classList;
108
124
 
109
125
  if (element.className instanceof SVGAnimatedString) {
110
- classList = this.convertToArray(element.className.baseVal);
126
+ classList = convertToArray(element.className.baseVal);
111
127
  } else {
112
- classList = this.convertToArray(element.className);
128
+ classList = convertToArray(element.className);
113
129
  }
114
130
 
115
131
  newClasses.forEach(newClass => {
@@ -688,7 +704,7 @@ class SideBar {
688
704
  });
689
705
  //Add new page css
690
706
  if (this.pageCss != '') {
691
- dom.appendHtml(document.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
707
+ dom.appendHtml(this.builder.doc.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
692
708
  }
693
709
  // this.builder.hideModal($modal);
694
710
  this.builder.hideModal(modalTypography);
@@ -723,6 +739,9 @@ class SideBar {
723
739
  builderStuff.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
724
740
  dom$l.removeClass(elm, 'active');
725
741
  });
742
+ builderStuff.querySelectorAll('.is-sidebar > div').forEach(elm => {
743
+ dom$l.removeClass(elm, 'active');
744
+ });
726
745
  builderStuff.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
727
746
  dom$l.removeClass(elm, 'active');
728
747
  elm.setAttribute('aria-hidden', true);
@@ -892,6 +911,7 @@ class SideBar {
892
911
  if (applyto !== 'box') {
893
912
  if (mode === 'section') {
894
913
  let activeSection = this.builder.activeSection;
914
+ if (!activeSection) return;
895
915
  let classList = activeSection.getAttribute('class').split(/\s+/);
896
916
  classList.forEach(item => {
897
917
  if (item.indexOf('type-') != -1) {
@@ -925,7 +945,7 @@ class SideBar {
925
945
  if (this.builder.settings.cssInBody) {
926
946
  this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
927
947
  } else {
928
- dom$l.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
948
+ dom$l.appendHtml(this.builder.doc.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
929
949
  }
930
950
  }
931
951
  } //Cleanup unused
@@ -989,7 +1009,7 @@ class SideBar {
989
1009
  if (this.builder.settings.cssInBody) {
990
1010
  this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
991
1011
  } else {
992
- dom$l.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
1012
+ dom$l.appendHtml(this.builder.doc.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
993
1013
  }
994
1014
  }
995
1015
  } else if (mode === 'container') {
@@ -1019,7 +1039,7 @@ class SideBar {
1019
1039
  if (this.builder.settings.cssInBody) {
1020
1040
  this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1021
1041
  } else {
1022
- dom$l.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1042
+ dom$l.appendHtml(this.builder.doc.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1023
1043
  }
1024
1044
  }
1025
1045
  } //Cleanup unused
@@ -1071,7 +1091,7 @@ class SideBar {
1071
1091
  if (this.builder.settings.cssInBody) {
1072
1092
  this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1073
1093
  } else {
1074
- dom$l.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1094
+ dom$l.appendHtml(this.builder.doc.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
1075
1095
  }
1076
1096
  }
1077
1097
  } //Cleanup unused
@@ -2016,7 +2036,9 @@ class SideBar {
2016
2036
 
2017
2037
  function addDesign(designid) {
2018
2038
 
2019
- var wrapper = parent.document.querySelector('.is-wrapper');
2039
+ // var wrapper = parent.document.querySelector('.is-wrapper');
2040
+ var wrapper = parent._cb.doc.querySelector('.is-wrapper');
2041
+
2020
2042
  var framework = '${this.builder.framework}';
2021
2043
  var snippetPathReplace = [];
2022
2044
  ${this.builder.designPathReplace.length > 0 ? `
@@ -2650,13 +2672,13 @@ class EditSection {
2650
2672
  this.builder.settings.onRender();
2651
2673
  this.builder.editor.util.hideModal(modalDelConfirm); //Trigger Change event
2652
2674
 
2653
- this.builder.settings.onChange(); //Hide box tool
2675
+ this.builder.settings.onChange(); // //Hide box tool
2676
+ // let boxTool = document.querySelector('#divBoxTool');
2677
+ // boxTool.style.display = 'none';
2678
+ // setTimeout(()=>{
2679
+ // boxTool.style.display = 'none';
2680
+ // }, 300);
2654
2681
 
2655
- let boxTool = document.querySelector('#divBoxTool');
2656
- boxTool.style.display = 'none';
2657
- setTimeout(() => {
2658
- boxTool.style.display = 'none';
2659
- }, 300);
2660
2682
  this.builder.activeSection = null;
2661
2683
  });
2662
2684
  const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
@@ -2844,9 +2866,74 @@ class EditSection {
2844
2866
  edit() {
2845
2867
  this.builder.sidebar.closeSidebar();
2846
2868
  const activeSection = this.builder.activeSection;
2847
- const modalEditSection = this.modalEditSection;
2848
- this.builder.showModal(modalEditSection);
2849
- modalEditSection.focus();
2869
+ const modalEditSection = this.modalEditSection; // const elms = this.builder.doc.querySelectorAll('.section-active');
2870
+ // elms.forEach(elm=>{
2871
+ // dom.removeClass(elm, 'section-active');
2872
+ // });
2873
+
2874
+ dom$k.addClass(activeSection, 'section-active');
2875
+ this.builder.showModal(modalEditSection, false, () => {
2876
+ dom$k.removeClass(activeSection, 'section-active');
2877
+ });
2878
+ modalEditSection.focus(); // Clean old unused is-bg-light/dark
2879
+
2880
+ let elms = this.builder.activeSection.querySelectorAll('.is-bg-light');
2881
+ elms.forEach(elm => {
2882
+ dom$k.removeClass(elm, 'is-bg-light');
2883
+
2884
+ if (dom$k.hasClass(elm, 'is-box')) {
2885
+ let overlay = elm.querySelector('.is-overlay');
2886
+
2887
+ if (overlay) {
2888
+ if (!overlay.style.backgroundColor) {
2889
+ overlay.style.backgroundColor = 'rgb(255, 255, 255)';
2890
+ }
2891
+ } else {
2892
+ // FIX OLD VERSION
2893
+ elm.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
2894
+ overlay = elm.querySelector('.is-overlay');
2895
+ overlay.style.backgroundColor = 'rgb(255, 255, 255)';
2896
+ }
2897
+ }
2898
+ });
2899
+ elms = this.builder.activeSection.querySelectorAll('.is-bg-dark');
2900
+ elms.forEach(elm => {
2901
+ dom$k.removeClass(elm, 'is-bg-dark');
2902
+
2903
+ if (dom$k.hasClass(elm, 'is-box')) {
2904
+ let overlay = elm.querySelector('.is-overlay');
2905
+
2906
+ if (overlay) {
2907
+ if (!overlay.style.backgroundColor) {
2908
+ overlay.style.backgroundColor = 'rgb(17, 17, 17)';
2909
+ }
2910
+ } else {
2911
+ // FIX OLD VERSION
2912
+ elm.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
2913
+ overlay = elm.querySelector('.is-overlay');
2914
+ overlay.style.backgroundColor = 'rgb(17, 17, 17)';
2915
+ }
2916
+ }
2917
+ });
2918
+ elms = this.builder.activeSection.querySelectorAll('.is-bg-grey');
2919
+ elms.forEach(elm => {
2920
+ dom$k.removeClass(elm, 'is-bg-grey');
2921
+
2922
+ if (dom$k.hasClass(elm, 'is-box')) {
2923
+ let overlay = elm.querySelector('.is-overlay');
2924
+
2925
+ if (overlay) {
2926
+ if (!overlay.style.backgroundColor) {
2927
+ overlay.style.backgroundColor = 'rgb(238, 239, 240)';
2928
+ }
2929
+ } else {
2930
+ // FIX OLD VERSION
2931
+ elm.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
2932
+ overlay = elm.querySelector('.is-overlay');
2933
+ overlay.style.backgroundColor = 'rgb(238, 239, 240)';
2934
+ }
2935
+ }
2936
+ });
2850
2937
  const chkScrollIcon = modalEditSection.querySelector('#chkScrollIcon');
2851
2938
 
2852
2939
  if (activeSection.querySelector('.is-arrow-down')) {
@@ -3005,8 +3092,9 @@ class EditSection {
3005
3092
  copiedSection.setAttribute('data-section-copied', '1');
3006
3093
  let parent = activeSection.parentNode;
3007
3094
  parent.insertBefore(copiedSection, activeSection.nextElementSibling);
3008
- let section = document.querySelector('[data-section-copied]');
3009
- section.removeAttribute('data-section-copied'); // Code Blocks Handling
3095
+ let section = this.builder.doc.querySelector('[data-section-copied]');
3096
+ section.removeAttribute('data-section-copied');
3097
+ dom$k.removeClass(section, 'section-active'); // Code Blocks Handling
3010
3098
 
3011
3099
  let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
3012
3100
  codeBlocks.forEach(element => {
@@ -8788,7 +8876,21 @@ class EditBox {
8788
8876
  this.builder = builder;
8789
8877
  this.builderStuff = this.builder.builderStuff;
8790
8878
  const builderStuff = this.builderStuff;
8791
- let html = '' + '<div id="divBoxTool">' + '<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);">' + '<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" 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;"/>' + '</div>' + '<input id="hidcustomval" tabindex="-1" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<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>' + '<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>' + '</div>';
8879
+ let html = ''; // let html = '' +
8880
+ // '<div id="divBoxTool">' +
8881
+ // '<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);">' +
8882
+ // '<div style="width:40px;height:40px;overflow:hidden;">' +
8883
+ // '<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>' +
8884
+ // '<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;"/>' +
8885
+ // '</div>' +
8886
+ // '<input id="hidcustomval" tabindex="-1" name="hidcustomval" type="hidden" value="" />' +
8887
+ // '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' +
8888
+ // '</form>' +
8889
+ // '<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>' +
8890
+ // '<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>' +
8891
+ // '</div>';
8892
+
8893
+ html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
8792
8894
  html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
8793
8895
  html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
8794
8896
  html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
@@ -8803,59 +8905,52 @@ class EditBox {
8803
8905
  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>' + '';
8804
8906
  dom$j.appendHtml(builderStuff, html); // Box Tool
8805
8907
 
8806
- this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
8908
+ /*
8909
+ this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
8910
+
8807
8911
  builderStuff.querySelector('#hidcustomval').value = this.builder.settings.customval;
8808
- const btnEditBox = builderStuff.querySelector('#btnEditBox');
8809
- btnEditBox.addEventListener('click', () => {
8810
- this.edit();
8811
- });
8812
- const btnEditModule = builderStuff.querySelector('#btnEditModule');
8813
- btnEditModule.addEventListener('click', () => {
8814
- this.editModule();
8815
- });
8816
- const fileCover = builderStuff.querySelector('#fileCover');
8817
- fileCover.addEventListener('click', () => {
8818
- /*
8819
- // Remove Waiting Indicator
8820
- const builderStuff = this.builderStuff;
8821
- const indicator = builderStuff.querySelector('.waiting-indicator');
8822
- if(indicator) {
8823
- alert('Please wait until another upload process completed.')
8824
- e.preventDefault();
8825
- return;
8826
- }
8827
- */
8828
- // prevent lost of activeBox during uploading cover (save to targetBox)
8829
- this.targetBox = this.builder.activeBox;
8912
+ const btnEditBox = builderStuff.querySelector('#btnEditBox');
8913
+ btnEditBox.addEventListener('click', ()=>{
8914
+ this.edit();
8915
+ });
8916
+ const btnEditModule = builderStuff.querySelector('#btnEditModule');
8917
+ btnEditModule.addEventListener('click', ()=>{
8918
+ this.editModule();
8919
+ });
8920
+ const fileCover = builderStuff.querySelector('#fileCover');
8921
+ fileCover.addEventListener('click', ()=>{
8922
+ // prevent lost of activeBox during uploading cover (save to targetBox)
8923
+ this.targetBox = this.builder.activeBox;
8924
+ });
8925
+ fileCover.addEventListener('change', (e)=>{
8926
+ if (fileCover.value === '') return;
8927
+
8928
+ this.builder.editor.saveForUndo();
8929
+ // Show Waiting Indicator
8930
+ const builderStuff = this.builderStuff;
8931
+ dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
8932
+ <div class="waiting-indicator">
8933
+ <div>${out('Uploading..')}</div>
8934
+ </div>
8935
+ `);
8936
+ const indicator = builderStuff.querySelector('.waiting-indicator');
8937
+ let targetBox = this.targetBox;
8938
+ const top = (targetBox.getBoundingClientRect().top + window.pageYOffset);
8939
+ const left = (targetBox.getBoundingClientRect().left + window.pageXOffset);
8940
+ indicator.style.top = top + 'px';
8941
+ indicator.style.left = left + 'px';
8942
+ if(this.builder.settings.onUploadCoverImage) {
8943
+ this.builder.settings.onUploadCoverImage(e);
8944
+ } else {
8945
+ builderStuff.querySelector('#form-upload-cover').submit();
8946
+ }
8947
+
8948
+ fileCover.value = ''; // Clear Input
8949
+ e.preventDefault();
8950
+ e.stopImmediatePropagation();
8830
8951
  });
8831
- fileCover.addEventListener('change', e => {
8832
- if (fileCover.value === '') return;
8833
- this.builder.editor.saveForUndo(); // Show Waiting Indicator
8834
-
8835
- const builderStuff = this.builderStuff;
8836
- dom$j.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
8837
- <div class="waiting-indicator">
8838
- <div>${out('Uploading..')}</div>
8839
- </div>
8840
- `);
8841
- const indicator = builderStuff.querySelector('.waiting-indicator');
8842
- let targetBox = this.targetBox;
8843
- const top = targetBox.getBoundingClientRect().top + window.pageYOffset;
8844
- const left = targetBox.getBoundingClientRect().left + window.pageXOffset;
8845
- indicator.style.top = top + 'px';
8846
- indicator.style.left = left + 'px';
8847
-
8848
- if (this.builder.settings.onUploadCoverImage) {
8849
- this.builder.settings.onUploadCoverImage(e);
8850
- } else {
8851
- builderStuff.querySelector('#form-upload-cover').submit();
8852
- }
8853
-
8854
- fileCover.value = ''; // Clear Input
8855
-
8856
- e.preventDefault();
8857
- e.stopImmediatePropagation();
8858
- }); //Box Modal
8952
+ */
8953
+ //Box Modal
8859
8954
 
8860
8955
  const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
8861
8956
  this.modalEditBox = modalEditBox;
@@ -9837,7 +9932,8 @@ class EditBox {
9837
9932
  this.boxImage(url);
9838
9933
  const activeBox = this.builder.activeBox;
9839
9934
  const overlay = activeBox.querySelector('.is-overlay');
9840
- const overlayBg = activeBox.querySelector('.is-overlay-bg');
9935
+ const overlayBg = activeBox.querySelector('.is-overlay-bg'); // Reset position & filter (grayscale)
9936
+
9841
9937
  overlayBg.style.filter = '';
9842
9938
  overlay.style.filter = '';
9843
9939
  const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
@@ -9851,7 +9947,7 @@ class EditBox {
9851
9947
  overlayBg.style.left = '';
9852
9948
  overlayBg.style.right = '';
9853
9949
  overlayBg.style.width = '';
9854
- overlayBg.style.height = '';
9950
+ overlayBg.style.height = ''; // /Reset
9855
9951
  }, btnBoxBgImage);
9856
9952
  }); // Box Background Image Adjust
9857
9953
 
@@ -10116,7 +10212,7 @@ class EditBox {
10116
10212
  btnModuleOk.addEventListener('click', () => {
10117
10213
  // let activeBox = this.builder.activeBox;
10118
10214
  // let activeModule = activeBox.querySelector('.is-overlay-content[data-module]');
10119
- let activeModule = document.querySelector('[data-module-active="1"]');
10215
+ let activeModule = this.builder.doc.querySelector('[data-module-active="1"]');
10120
10216
  this.builder.editor.saveForUndo();
10121
10217
  let modalIframe = modalEditModule.querySelector('iframe');
10122
10218
  if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
@@ -10331,10 +10427,16 @@ class EditBox {
10331
10427
 
10332
10428
  if (dom$j.hasClass(activeBox, 'box-autofit')) {
10333
10429
  modalEditBox.querySelector('#chkAutofitContent').checked = true;
10334
- }
10430
+ } // const elms = this.builder.doc.querySelectorAll('.box-active');
10431
+ // elms.forEach(elm=>{
10432
+ // dom.removeClass(elm, 'box-active');
10433
+ // });
10434
+
10335
10435
 
10336
10436
  dom$j.addClass(activeBox, 'box-active');
10337
- this.builder.showModal(modalEditBox);
10437
+ this.builder.showModal(modalEditBox, false, () => {
10438
+ dom$j.removeClass(activeBox, 'box-active');
10439
+ });
10338
10440
  modalEditBox.focus();
10339
10441
 
10340
10442
  if (container) {
@@ -10479,6 +10581,31 @@ class EditBox {
10479
10581
  if (overlay) ; else {
10480
10582
  activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
10481
10583
  overlay = activeBox.querySelector('.is-overlay');
10584
+ } // Clean old unused is-bg-light/dark
10585
+
10586
+
10587
+ if (dom$j.hasClass(activeBox, 'is-bg-light')) {
10588
+ dom$j.removeClass(activeBox, 'is-bg-light');
10589
+
10590
+ if (!overlay.style.backgroundColor) {
10591
+ overlay.style.backgroundColor = 'rgb(255, 255, 255)';
10592
+ }
10593
+ }
10594
+
10595
+ if (dom$j.hasClass(activeBox, 'is-bg-dark')) {
10596
+ dom$j.removeClass(activeBox, 'is-bg-dark');
10597
+
10598
+ if (!overlay.style.backgroundColor) {
10599
+ overlay.style.backgroundColor = 'rgb(17, 17, 17)';
10600
+ }
10601
+ }
10602
+
10603
+ if (dom$j.hasClass(activeBox, 'is-bg-grey')) {
10604
+ dom$j.removeClass(activeBox, 'is-bg-grey');
10605
+
10606
+ if (!overlay.style.backgroundColor) {
10607
+ overlay.style.backgroundColor = 'rgb(238, 239, 240)';
10608
+ }
10482
10609
  } // Gradient Color
10483
10610
 
10484
10611
  /*
@@ -10584,7 +10711,7 @@ class EditBox {
10584
10711
 
10585
10712
  if (moduleName === 'code') {
10586
10713
  if (this.builder.settings.htmlSyntaxHighlighting) {
10587
- // dom.addClass(activeBox, 'box-active'); //REVIEW
10714
+ // dom.addClass(activeBox, 'box-active');
10588
10715
  let html = decodeURIComponent(activeModule.getAttribute('data-html'));
10589
10716
  let beautify = JsBeautify$1.html;
10590
10717
  html = beautify(html);
@@ -10608,7 +10735,7 @@ class EditBox {
10608
10735
 
10609
10736
  this.builder.editor.viewHtmlNormal();
10610
10737
  } else {
10611
- // dom.addClass(activeBox, 'box-active'); //REVIEW
10738
+ // dom.addClass(activeBox, 'box-active');
10612
10739
  const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
10613
10740
  this.builder.showModal(modalEditCode);
10614
10741
  let html = decodeURIComponent(activeModule.getAttribute('data-html'));
@@ -10619,7 +10746,7 @@ class EditBox {
10619
10746
  textarea.focus();
10620
10747
  }
10621
10748
  } else {
10622
- // dom.addClass(activeBox, 'box-active'); //REVIEW
10749
+ // dom.addClass(activeBox, 'box-active');
10623
10750
  const modalEditModule = document.querySelector('.is-modal.editmodule');
10624
10751
  const iframe = modalEditModule.querySelector('iframe');
10625
10752
  iframe.style.opacity = 0;
@@ -10671,7 +10798,7 @@ class EditBox {
10671
10798
  const builderStuff = this.builderStuff; // let activeBox = this.builder.activeBox;
10672
10799
  // let activeModule = activeBox.querySelector('.is-overlay-content[data-module]');
10673
10800
 
10674
- let activeModule = document.querySelector('[data-module-active="1"]');
10801
+ let activeModule = this.builder.doc.querySelector('[data-module-active="1"]');
10675
10802
  let modalIframe = modalEditModule.querySelector('iframe');
10676
10803
  if (modalIframe.contentWindow.construct) modalIframe.contentWindow.construct();
10677
10804
  const hidModuleCode = builderStuff.querySelector('#hidModuleCode');
@@ -10808,11 +10935,20 @@ class EditBox {
10808
10935
  let activeBox = this.builder.activeBox;
10809
10936
  let elm = activeBox.querySelector('.center');
10810
10937
  dom$j.removeClass(elm, 'center');
10811
- let elms = activeBox.querySelectorAll('.is-builder > div > div > *');
10938
+ let elms = activeBox.querySelectorAll('.is-builder > div > div, .is-builder > div > div > *');
10812
10939
  elms.forEach(elm => {
10813
10940
  elm.style.textAlign = '';
10941
+ dom$j.removeClass(elm, this.builder.cssClasses.textAlign.left);
10942
+ dom$j.removeClass(elm, this.builder.cssClasses.textAlign.center);
10943
+ dom$j.removeClass(elm, this.builder.cssClasses.textAlign.right);
10944
+ dom$j.removeClass(elm, this.builder.cssClasses.textAlign.justify);
10814
10945
  this.builder.editor.dom.doFunction(elm, theEl => {
10946
+ if (theEl.closest('.is-section-tool') || theEl.closest('.is-box-tool') || theEl.closest('.is-tool') || theEl.closest('.is-rowadd-tool')) return;
10815
10947
  theEl.style.textAlign = '';
10948
+ dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.left);
10949
+ dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.center);
10950
+ dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.right);
10951
+ dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.justify);
10816
10952
  }, true);
10817
10953
  });
10818
10954
 
@@ -11277,14 +11413,28 @@ class EditBox {
11277
11413
  preview.innerHTML = `<img src="${url}">`;
11278
11414
  btnImageAdjust.style.display = 'flex';
11279
11415
  btnImageRemove.style.display = 'flex';
11280
- btnImageGrayscale.style.display = 'flex';
11281
- const chkImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
11282
- chkImageGrayscale.checked = false;
11283
-
11284
- if (overlayBg.style.filter) {
11285
- overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
11286
- } //Show image tab
11287
-
11416
+ btnImageGrayscale.style.display = 'flex'; // const chkImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
11417
+ // chkImageGrayscale.checked = false;
11418
+ // if(overlayBg.style.filter) {
11419
+ // overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)','');
11420
+ // }
11421
+ // Reset position & filter (grayscale)
11422
+
11423
+ overlayBg.style.filter = '';
11424
+ overlay.style.filter = '';
11425
+ const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
11426
+ chkBoxBgImageGrayscale.checked = false;
11427
+ overlayBg.style.backgroundPosition = '50% 60%';
11428
+ overlayBg.removeAttribute('data-scale');
11429
+ overlayBg.removeAttribute('data-x');
11430
+ overlayBg.removeAttribute('data-y');
11431
+ overlayBg.style.top = '';
11432
+ overlayBg.style.bottom = '';
11433
+ overlayBg.style.left = '';
11434
+ overlayBg.style.right = '';
11435
+ overlayBg.style.width = '';
11436
+ overlayBg.style.height = ''; // /Reset
11437
+ //Show image tab
11288
11438
 
11289
11439
  modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
11290
11440
  } else {
@@ -15821,20 +15971,42 @@ class Util {
15821
15971
  // }
15822
15972
 
15823
15973
 
15824
- fixLayout(row) {
15825
- const dom = this.dom;
15974
+ refreshModuleLayout(col) {
15975
+ let html = decodeURIComponent(col.getAttribute('data-html'));
15976
+ html = html.replace(/{id}/g, this.builder.util.makeId());
15977
+ col.innerHTML = '';
15978
+ let range = document.createRange();
15979
+ range.setStart(col, 0);
15980
+ col.appendChild(range.createContextualFragment(html));
15981
+ let subblocks = col.querySelectorAll('[data-subblock]');
15982
+ var i = 1;
15983
+ Array.prototype.forEach.call(subblocks, subblock => {
15984
+ if (col.getAttribute('data-html-' + i)) {
15985
+ subblock.innerHTML = decodeURIComponent(col.getAttribute('data-html-' + i));
15986
+ }
15826
15987
 
15827
- if (this.builder.opts.enableDragResize) {
15828
- Array.from(row.children).map(item => {
15829
- if (item.classList.contains('is-row-tool')) return;
15830
- if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
15988
+ i++;
15989
+ });
15990
+ }
15831
15991
 
15832
- item.style.width = '100%';
15833
- item.style.flex = '';
15834
- });
15835
- return;
15836
- }
15992
+ fixLayout(row) {
15993
+ const dom = this.dom; // if(this.builder.opts.enableDragResize) {
15994
+ // Array.from(row.children).map((item) => {
15995
+ // if(item.classList.contains('is-row-tool')) return;
15996
+ // if(item.classList.contains('is-rowadd-tool')) return;
15997
+ // // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
15998
+ // item.style.width = '100%';
15999
+ // item.style.flex = '';
16000
+ // });
16001
+ // return;
16002
+ // }
15837
16003
 
16004
+ Array.from(row.children).map(item => {
16005
+ if (item.classList.contains('is-row-tool')) return;
16006
+ if (item.classList.contains('is-rowadd-tool')) return;
16007
+ item.style.width = '';
16008
+ item.style.flex = '';
16009
+ });
15838
16010
  let num = 2; //is-row-tool & is-rowadd-tool
15839
16011
 
15840
16012
  if (row.querySelector('.is-row-overlay')) {
@@ -15866,6 +16038,15 @@ class Util {
15866
16038
  if (cellCount === 1) {
15867
16039
  dom.addClass(col, colClass[colClass.length - 1]);
15868
16040
  }
16041
+ }); // Refresh Module
16042
+
16043
+ Array.from(row.children).map(item => {
16044
+ if (item.classList.contains('is-row-tool')) return;
16045
+ if (item.classList.contains('is-rowadd-tool')) return;
16046
+
16047
+ if (item.getAttribute('data-module')) {
16048
+ this.refreshModuleLayout(item);
16049
+ }
15869
16050
  });
15870
16051
  return;
15871
16052
  } //others (12 columns grid)
@@ -15921,7 +16102,17 @@ class Util {
15921
16102
 
15922
16103
  if (cellCount === 12) dom.addClass(col, colClass[0]); // 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
15923
16104
  });
15924
- }
16105
+ } // Refresh Module
16106
+
16107
+
16108
+ Array.from(row.children).map(item => {
16109
+ if (item.classList.contains('is-row-tool')) return;
16110
+ if (item.classList.contains('is-rowadd-tool')) return;
16111
+
16112
+ if (item.getAttribute('data-module')) {
16113
+ this.refreshModuleLayout(item);
16114
+ }
16115
+ });
15925
16116
  }
15926
16117
 
15927
16118
  addContent(html, mode, attr) {
@@ -15991,6 +16182,10 @@ class Util {
15991
16182
 
15992
16183
  cellElement.removeAttribute('data-noedit');
15993
16184
  dom.removeClass(cellElement, 'cell-active');
16185
+ dom.removeClass(cellElement, 'is-light-text');
16186
+ dom.removeClass(cellElement, 'is-dark-text');
16187
+ dom.removeClass(cellElement, 'padding-0');
16188
+ dom.removeClass(cellElement, 'p-0');
15994
16189
  cellElement.removeAttribute('data-click');
15995
16190
  cellElement.removeAttribute('style');
15996
16191
 
@@ -16077,18 +16272,20 @@ class Util {
16077
16272
  let newelement = element.nextElementSibling;
16078
16273
 
16079
16274
  if (newelement.tagName.toLowerCase() === 'img') {
16080
- var timeoutId;
16081
- clearTimeout(timeoutId);
16082
- timeoutId = setTimeout(() => {
16275
+ let checkLoad = setInterval(() => {
16083
16276
  if (newelement.complete) {
16084
16277
  newelement.click();
16278
+ clearInterval(checkLoad);
16085
16279
  }
16086
- }, 200);
16280
+ }, 30);
16087
16281
  } else {
16088
16282
  newelement.click();
16089
- } // LATER: auto scroll
16090
- // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool.
16283
+ }
16091
16284
 
16285
+ const builderStuff = this.builder.builderStuff;
16286
+ let quickadd = builderStuff.querySelector('.quickadd');
16287
+ this.hidePop(quickadd); // LATER: auto scroll
16288
+ // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool.
16092
16289
  }
16093
16290
 
16094
16291
  if (this.builder.useCssClasses) {
@@ -16385,6 +16582,7 @@ class Util {
16385
16582
 
16386
16583
 
16387
16584
  this.builder.activeCol = null;
16585
+ this.builder.dom.removeClass(this.builder.doc.body, 'content-edit');
16388
16586
  }
16389
16587
 
16390
16588
  clearAfterUndoRedo() {
@@ -17021,7 +17219,7 @@ class Util {
17021
17219
  let col = this.builder.activeCol;
17022
17220
 
17023
17221
  if (transition) {
17024
- columnTool.style.transition = 'all ease 100ms';
17222
+ columnTool.style.transition = 'all 100ms ease';
17025
17223
  setTimeout(() => {
17026
17224
  columnTool.style.top = col.getBoundingClientRect().top - 29 + this.builder.win.pageYOffset + 'px';
17027
17225
  columnTool.style.left = col.getBoundingClientRect().left - 1 + 'px';
@@ -26417,6 +26615,8 @@ class HtmlUtil {
26417
26615
  });
26418
26616
  elms = tmp.querySelectorAll('.is-section-tool');
26419
26617
  dom$h.removeElements(elms);
26618
+ elms = tmp.querySelectorAll('.is-box-tool');
26619
+ dom$h.removeElements(elms);
26420
26620
  var html_content = '';
26421
26621
  var html_footer = '';
26422
26622
  var html_others = ''; // Apply behavior on each row
@@ -26574,7 +26774,7 @@ class UndoRedo {
26574
26774
 
26575
26775
  writeHtml(html) {
26576
26776
  if (this.builder.opts.page !== '' && !this.builder.opts.undoContainerOnly) {
26577
- let wrapper = document.querySelector(this.builder.opts.page); // wrapper.innerHTML = html;
26777
+ let wrapper = this.builder.doc.querySelector(this.builder.opts.page); // wrapper.innerHTML = html;
26578
26778
  // Use createContextualFragment() to make embedded script executable
26579
26779
  // https://ghinda.net/article/script-tags/
26580
26780
 
@@ -26740,7 +26940,7 @@ class UndoRedo {
26740
26940
  const util = new Util(this.builder);
26741
26941
  util.clearActiveCell();
26742
26942
  util.clearAfterUndoRedo();
26743
- let elm = document.querySelector('[data-saveforundo]');
26943
+ let elm = this.builder.doc.querySelector('[data-saveforundo]');
26744
26944
 
26745
26945
  if (elm) {
26746
26946
  let panel = document.querySelector('.is-side.elementstyles');
@@ -27834,27 +28034,38 @@ class Snippets {
27834
28034
  snippets = snippets.filter(predicate);
27835
28035
  }
27836
28036
 
28037
+ // for (let i = 0; i < snippets.length; i++) {
28038
+ // console.log(snippets[i].type)
28039
+ // }
28040
+
27837
28041
  } else {
27838
- //backward compatible
28042
+ // Backward compatible OR if slider param not set
27839
28043
 
27840
28044
  // Hide slider snippet if slick is not included
27841
28045
  var bHideSliderSnippet = true;
27842
- if(parent.jQuery) {
27843
- if(parent.jQuery.fn.slick) {
28046
+ if(parent._cb.win.jQuery) {
28047
+ if(parent._cb.win.jQuery.fn.slick) {
27844
28048
  bHideSliderSnippet = false;
27845
28049
  }
27846
28050
  }
27847
-
27848
28051
  if(bHideSliderSnippet){
27849
- for (let i = 0; i < snippets.length; i++) {
27850
- if (snippets[i].thumbnail.indexOf('element-slider.png') != -1||
27851
- snippets[i].type === 'slick'||
27852
- snippets[i].type === 'glide') {
27853
- snippets.splice(i, 1);
27854
- break;
27855
- }
27856
- }
28052
+ const result = snippets.filter((item)=>{
28053
+ return item.type !== 'slick';
28054
+ });
28055
+ snippets = [...result];
27857
28056
  }
28057
+
28058
+ if(!(parent._cb.win.Glide)){
28059
+ const result = snippets.filter((item)=>{
28060
+ return !(item.glide || item.type === 'glide');
28061
+ });
28062
+ snippets = [...result];
28063
+ }
28064
+
28065
+ // for (let i = 0; i < snippets.length; i++) {
28066
+ // console.log(snippets[i].type)
28067
+ // }
28068
+
27858
28069
  }
27859
28070
 
27860
28071
 
@@ -28041,7 +28252,7 @@ class Snippets {
28041
28252
  }
28042
28253
 
28043
28254
  var bSnippet;
28044
- if (html.indexOf('row clearfix') === -1) {
28255
+ if (html.indexOf('"row') === -1) {
28045
28256
  bSnippet = true; // Just snippet (without row/column grid)
28046
28257
  } else {
28047
28258
  bSnippet = false; // Snippet is wrapped in row/colum
@@ -28053,7 +28264,7 @@ class Snippets {
28053
28264
  var mode = quickadd.getAttribute('data-mode');
28054
28265
  if(!mode) {
28055
28266
  // in case of using viewSnippets() to open the dialog (mode=null) => change to non snippet.
28056
- html = '<div class="row clearfix">' +
28267
+ html = '<div class="row">' +
28057
28268
  '<div class="column full">' +
28058
28269
  html +
28059
28270
  '</div>' +
@@ -28066,7 +28277,11 @@ class Snippets {
28066
28277
  var rowClass = parent._cb.opts.row; //row
28067
28278
  var colClass = parent._cb.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
28068
28279
  if(rowClass!=='' && colClass.length===12){
28069
- html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
28280
+
28281
+ //html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
28282
+ html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
28283
+ html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
28284
+
28070
28285
  html = html.replace(new RegExp('column full', 'g'), colClass[11]);
28071
28286
  html = html.replace(new RegExp('column half', 'g'), colClass[5]);
28072
28287
  html = html.replace(new RegExp('column third', 'g'), colClass[3]);
@@ -28080,7 +28295,7 @@ class Snippets {
28080
28295
  }
28081
28296
 
28082
28297
  html = html.replace(/{id}/g, makeid()); // Replace {id} with auto generated id (for custom code snippet)
28083
-
28298
+
28084
28299
  if(parent._cb.opts.onAdd){
28085
28300
  html = parent._cb.opts.onAdd(html);
28086
28301
  }
@@ -28363,7 +28578,7 @@ const renderQuickAdd = builder => {
28363
28578
  elm = quickadd.querySelector('.add-code');
28364
28579
  dom.addEventListener(elm, 'click', () => {
28365
28580
  // const mode = quickadd.getAttribute('data-mode');
28366
- let html = '<div class="row clearfix">' + '<div class="column full" data-noedit data-html="' + encodeURIComponent('<h1 id="{id}">Lorem ipsum</h1>' + '<p>This is a code block. You can edit this block using the source dialog.</p>' + '<scr' + 'ipt>' + 'var docReady = function (fn) {' + 'var stateCheck = setInterval(function () {' + 'if (document.readyState !== "complete") return;' + 'clearInterval(stateCheck);' + 'try{fn()}catch(e){}' + '}, 1);' + '};' + 'docReady(function() {' + 'document.querySelector(\'#{id}\').innerHTML =\'<b>Hello World..!</b>\';' + '});' + '</scr' + 'ipt>') + '">' + '</div>' + '</div>';
28581
+ let html = '<div class="row">' + '<div class="column full" data-noedit data-html="' + encodeURIComponent('<h1 id="{id}">Lorem ipsum</h1>' + '<p>This is a code block. You can edit this block using the source dialog.</p>' + '<scr' + 'ipt>' + 'var docReady = function (fn) {' + 'var stateCheck = setInterval(function () {' + 'if (document.readyState !== "complete") return;' + 'clearInterval(stateCheck);' + 'try{fn()}catch(e){}' + '}, 1);' + '};' + 'docReady(function() {' + 'document.querySelector(\'#{id}\').innerHTML =\'<b>Hello World..!</b>\';' + '});' + '</scr' + 'ipt>') + '">' + '</div>' + '</div>';
28367
28582
  let noedit = true;
28368
28583
  let bSnippet = false;
28369
28584
  let snippetPathReplace = builder.opts.snippetPathReplace; // Convert snippet into your defined 12 columns grid
@@ -28373,7 +28588,10 @@ const renderQuickAdd = builder => {
28373
28588
  let colClass = builder.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
28374
28589
 
28375
28590
  if (rowClass !== '' && colClass.length === 12) {
28376
- html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
28591
+ // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
28592
+ html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
28593
+
28594
+ html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
28377
28595
  html = html.replace(new RegExp('column full', 'g'), colClass[11]);
28378
28596
  html = html.replace(new RegExp('column half', 'g'), colClass[5]);
28379
28597
  html = html.replace(new RegExp('column third', 'g'), colClass[3]);
@@ -28407,13 +28625,13 @@ const renderQuickAdd = builder => {
28407
28625
  const html = `<table class="default" style="border-collapse:collapse;width:100%;">
28408
28626
  <thead>
28409
28627
  <tr>
28410
- <td><br></td>
28411
- <td><br></td>
28628
+ <td style="vertical-align:top;"><br></td>
28629
+ <td style="vertical-align:top;"><br></td>
28412
28630
  </tr>
28413
28631
  </thead>
28414
28632
  <tr>
28415
- <td><br></td>
28416
- <td><br></td>
28633
+ <td style="vertical-align:top;"><br></td>
28634
+ <td style="vertical-align:top;"><br></td>
28417
28635
  </tr>
28418
28636
  </table>`;
28419
28637
  util.addContent(html, mode);
@@ -28629,8 +28847,8 @@ class Grid {
28629
28847
 
28630
28848
  row = cell.parentNode; //update active row
28631
28849
 
28632
- util.fixLayout(row, builder);
28633
- if (row.nextElementSibling) util.fixLayout(row.nextElementSibling, builder);
28850
+ util.fixLayout(row);
28851
+ if (row.nextElementSibling) util.fixLayout(row.nextElementSibling);
28634
28852
  }
28635
28853
 
28636
28854
  moveColumnDown() {
@@ -28709,8 +28927,8 @@ class Grid {
28709
28927
 
28710
28928
  row = cell.parentNode; //update active row
28711
28929
 
28712
- util.fixLayout(row, builder);
28713
- if (row.previousElementSibling) util.fixLayout(row.previousElementSibling, builder);
28930
+ util.fixLayout(row);
28931
+ if (row.previousElementSibling) util.fixLayout(row.previousElementSibling);
28714
28932
  }
28715
28933
 
28716
28934
  duplicateColumn() {
@@ -28724,6 +28942,12 @@ class Grid {
28724
28942
  var cellElement = cell.cloneNode(true);
28725
28943
  dom.removeClass(cellElement, 'cell-active');
28726
28944
  cellElement.removeAttribute('data-click');
28945
+
28946
+ if (this.builder.opts.enableDragResize) {
28947
+ cell.style.width = '';
28948
+ cell.style.flex = '';
28949
+ }
28950
+
28727
28951
  let row = cell.parentNode;
28728
28952
  let num = 2; //is-row-tool & is-rowadd-tool
28729
28953
 
@@ -28744,7 +28968,7 @@ class Grid {
28744
28968
  }
28745
28969
 
28746
28970
  row.insertBefore(cellElement, cell);
28747
- util.fixLayout(row, builder); //re-add tool
28971
+ util.fixLayout(row); //re-add tool
28748
28972
 
28749
28973
  let builderActive = this.builder.doc.querySelector('.builder-active');
28750
28974
  builder.applyBehaviorOn(builderActive);
@@ -28756,7 +28980,6 @@ class Grid {
28756
28980
  }
28757
28981
 
28758
28982
  removeColumn() {
28759
- let builder = this.builder;
28760
28983
  let columnTool = this.columnTool;
28761
28984
  let util = this.util;
28762
28985
  const cell = util.cellSelected();
@@ -28780,7 +29003,7 @@ class Grid {
28780
29003
  util.checkEmpty();
28781
29004
  } else {
28782
29005
  row.removeChild(cell);
28783
- util.fixLayout(row, builder);
29006
+ util.fixLayout(row);
28784
29007
  }
28785
29008
 
28786
29009
  util.clearActiveCell();
@@ -33088,26 +33311,39 @@ const renderSnippetPanel = builder => {
33088
33311
  const predicate = item => item.type !== 'glide' && item.type !== 'slick';
33089
33312
 
33090
33313
  builder.opts.snippetJSON.snippets = snippets.filter(predicate);
33091
- }
33314
+ } // for (let i = 0; i < builder.opts.snippetJSON.snippets.length; i++) {
33315
+ // console.log(builder.opts.snippetJSON.snippets[i].type)
33316
+ // }
33317
+
33092
33318
  } else {
33093
- //backward compatible
33319
+ // Backward compatible OR if slider param not set
33094
33320
  // Hide slider snippet if slick is not included
33095
33321
  var bHideSliderSnippet = true;
33096
33322
 
33097
- if (window.jQuery) {
33098
- if (window.jQuery.fn.slick) {
33323
+ if (builder.win.jQuery) {
33324
+ if (builder.win.jQuery.fn.slick) {
33099
33325
  bHideSliderSnippet = false;
33100
33326
  }
33101
33327
  }
33102
33328
 
33103
33329
  if (bHideSliderSnippet) {
33104
- for (let i = 0; i < snippets.length; i++) {
33105
- if (snippets[i].thumbnail.indexOf('element-slider.png') != -1 || snippets[i].type === 'slick' || snippets[i].type === 'glide') {
33106
- snippets.splice(i, 1);
33107
- break;
33108
- }
33109
- }
33330
+ const result = snippets.filter(item => {
33331
+ return item.type !== 'slick';
33332
+ });
33333
+ snippets = [...result];
33110
33334
  }
33335
+
33336
+ if (!builder.win.Glide) {
33337
+ const result = snippets.filter(item => {
33338
+ return !(item.glide || item.type === 'glide');
33339
+ });
33340
+ snippets = [...result];
33341
+ } // for (let i = 0; i < snippets.length; i++) {
33342
+ // console.log(snippets[i].type)
33343
+ // }
33344
+
33345
+
33346
+ builder.opts.snippetJSON.snippets = [...snippets];
33111
33347
  }
33112
33348
 
33113
33349
  let index = 1;
@@ -60555,7 +60791,7 @@ class Image$1 {
60555
60791
  <div class="image-larger2" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
60556
60792
  <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
60557
60793
  <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
60558
- <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
60794
+ <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
60559
60795
  <input title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
60560
60796
  </form>
60561
60797
  </div>
@@ -61021,7 +61257,7 @@ class Image$1 {
61021
61257
  iframe.src = this.builder.opts.imageselect;
61022
61258
  }
61023
61259
 
61024
- util.showModal(modalImageSelect, true, () => {
61260
+ util.showModal(modalImageSelect, false, () => {
61025
61261
  btnImageSelect.removeAttribute('data-focus');
61026
61262
  btnImageSelect.focus();
61027
61263
  });
@@ -61035,11 +61271,70 @@ class Image$1 {
61035
61271
  });
61036
61272
  const btnImageSelect2 = modalImageLink.querySelector('.input-select2');
61037
61273
  if (btnImageSelect2) dom.addEventListener(btnImageSelect2, 'click', () => {
61038
- if (this.builder.opts.onImageSelectClick) {
61274
+ /*
61275
+ if(this.builder.opts.onImageSelectClick) {
61276
+ this.builder.opts.onImageSelectClick({targetInput: modalImageLink.querySelector('.input-link'), theTrigger: btnImageSelect2});
61277
+ } else {
61278
+ let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
61279
+ let iframe = modalImageSelect.querySelector('iframe');
61280
+ if(this.builder.opts.assetRefresh) {
61281
+ iframe.src = this.builder.opts.imageselect;
61282
+ this.builder.opts.assetRefresh = false;
61283
+ }
61284
+ if(iframe.src === 'about:blank'){
61285
+ iframe.src = this.builder.opts.imageselect;
61286
+ }
61287
+ util.showModal(modalImageSelect, false, ()=>{
61288
+
61289
+ btnImageSelect2.removeAttribute('data-focus');
61290
+ btnImageSelect2.focus();
61291
+ });
61292
+ btnImageSelect2.setAttribute('data-focus', true);
61293
+ }
61294
+ this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61295
+ this.builder.targetCallback = null;
61296
+ this.builder.targetAssetType = 'media';
61297
+ */
61298
+ if (this.builder.opts.onFileSelectClick) {
61299
+ this.builder.opts.onFileSelectClick({
61300
+ targetInput: modalImageLink.querySelector('.input-link'),
61301
+ theTrigger: btnImageSelect2
61302
+ });
61303
+ this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61304
+
61305
+ this.builder.targetCallback = null;
61306
+ this.builder.targetAssetType = 'all';
61307
+ } else if (this.builder.opts.fileselect !== '') {
61308
+ let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
61309
+ let iframe = modalFileSelect.querySelector('iframe');
61310
+
61311
+ if (this.builder.opts.assetRefresh) {
61312
+ iframe.src = this.builder.opts.fileselect;
61313
+ this.builder.opts.assetRefresh = false;
61314
+ }
61315
+
61316
+ if (iframe.src === 'about:blank') {
61317
+ iframe.src = this.builder.opts.fileselect;
61318
+ }
61319
+
61320
+ util.showModal(modalFileSelect, false, () => {
61321
+ btnImageSelect2.removeAttribute('data-focus');
61322
+ btnImageSelect2.focus();
61323
+ }, true);
61324
+ btnImageSelect2.setAttribute('data-focus', true);
61325
+ this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61326
+
61327
+ this.builder.targetCallback = null;
61328
+ this.builder.targetAssetType = 'all';
61329
+ } else if (this.builder.opts.onImageSelectClick) {
61039
61330
  this.builder.opts.onImageSelectClick({
61040
61331
  targetInput: modalImageLink.querySelector('.input-link'),
61041
61332
  theTrigger: btnImageSelect2
61042
61333
  });
61334
+ this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61335
+
61336
+ this.builder.targetCallback = null;
61337
+ this.builder.targetAssetType = 'media';
61043
61338
  } else {
61044
61339
  let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
61045
61340
  let iframe = modalImageSelect.querySelector('iframe');
@@ -61053,17 +61348,16 @@ class Image$1 {
61053
61348
  iframe.src = this.builder.opts.imageselect;
61054
61349
  }
61055
61350
 
61056
- util.showModal(modalImageSelect, true, () => {
61351
+ util.showModal(modalImageSelect, false, () => {
61057
61352
  btnImageSelect2.removeAttribute('data-focus');
61058
61353
  btnImageSelect2.focus();
61059
61354
  });
61060
61355
  btnImageSelect2.setAttribute('data-focus', true);
61061
- }
61356
+ this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61062
61357
 
61063
- this.builder.targetInput = modalImageLink.querySelector('.input-link'); // used by selectAsset() (see contentbuilder.js)
61064
-
61065
- this.builder.targetCallback = null;
61066
- this.builder.targetAssetType = 'media';
61358
+ this.builder.targetCallback = null;
61359
+ this.builder.targetAssetType = 'media';
61360
+ }
61067
61361
  });
61068
61362
  } else {
61069
61363
  dom.removeClass(divImageSrc, 'image-select');
@@ -61768,7 +62062,7 @@ class ButtonEditor {
61768
62062
  <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
61769
62063
  </div>
61770
62064
  <div style="padding:0">
61771
- <div class="is-tabs clearfix" data-group="button" style="position:relative;z-index:1">
62065
+ <div class="is-tabs" data-group="button" style="position:relative;z-index:1">
61772
62066
  <a title="${util.out('General')}" href="" data-content="divButtonGeneral" class="active">${util.out('General')}</a>
61773
62067
  <a title="${util.out('Hover')}" href="" data-content="divButtonHover">${util.out('Hover')}</a>
61774
62068
  <a title="${util.out('Text')}" href="" data-content="divButtonText">${util.out('Text')}</a>
@@ -64520,7 +64814,13 @@ class Iframe {
64520
64814
 
64521
64815
  this.builder.opts.onChange();
64522
64816
  } else {
64523
- var embedcode = iframeModal.querySelector('.input-embedcode').value;
64817
+ const inpEmbedCode = iframeModal.querySelector('.input-embedcode');
64818
+ const embedcode = inpEmbedCode.value;
64819
+
64820
+ if (embedcode.toLowerCase().indexOf('<iframe') === -1) {
64821
+ if (!alert(util.out('Please enter <iframe> element.'))) inpEmbedCode.focus();
64822
+ return;
64823
+ }
64524
64824
 
64525
64825
  if (embedcode !== '') {
64526
64826
  iframe.outerHTML = embedcode;
@@ -64604,7 +64904,7 @@ class Table {
64604
64904
  <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
64605
64905
  </div>
64606
64906
  <div style="padding:0">
64607
- <div class="is-tabs clearfix" data-group="table">
64907
+ <div class="is-tabs" data-group="table">
64608
64908
  <a title="${util.out('Style')}" id="tabTableGeneral" href="" data-content="divTableGeneral" class="active">${util.out('Style')}</a>
64609
64909
  <a title="${util.out('Layout')}" id="tabTableLayout" href="" data-content="divTableLayout">${util.out('Layout')}</a>
64610
64910
  </div>
@@ -64742,6 +65042,9 @@ class Table {
64742
65042
  }
64743
65043
 
64744
65044
  elm.style.backgroundColor = color; // preview
65045
+ //Trigger Change event
65046
+
65047
+ this.builder.opts.onChange();
64745
65048
  }, btnBgColor.style.backgroundColor, () => {
64746
65049
  btnBgColor.removeAttribute('data-focus');
64747
65050
  btnBgColor.focus();
@@ -64777,6 +65080,9 @@ class Table {
64777
65080
  }
64778
65081
 
64779
65082
  elm.style.backgroundColor = color; // preview
65083
+ //Trigger Change event
65084
+
65085
+ this.builder.opts.onChange();
64780
65086
  }, btnTextColor.style.backgroundColor, () => {
64781
65087
  btnTextColor.removeAttribute('data-focus');
64782
65088
  btnTextColor.focus();
@@ -64823,6 +65129,9 @@ class Table {
64823
65129
  }
64824
65130
 
64825
65131
  elm.style.backgroundColor = color; // preview
65132
+ //Trigger Change event
65133
+
65134
+ this.builder.opts.onChange();
64826
65135
  }, btnBorderColor.style.backgroundColor, () => {
64827
65136
  btnBorderColor.removeAttribute('data-focus');
64828
65137
  btnBorderColor.focus();
@@ -64895,8 +65204,9 @@ class Table {
64895
65204
 
64896
65205
  for (var i = 0; i < oRow.cells.length; i++) {
64897
65206
  var oNewCell = oNewRow.insertCell(oNewRow.cells.length);
64898
- oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style'));
64899
- oNewCell.setAttribute('valign', 'top');
65207
+ if (this.builder.activeTd.getAttribute('style')) oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style')); // oNewCell.setAttribute('valign', 'top');
65208
+
65209
+ oNewCell.style.verticalAlign = 'top';
64900
65210
  oNewCell.innerHTML = '<br>';
64901
65211
  } //Trigger Change event
64902
65212
 
@@ -64914,8 +65224,9 @@ class Table {
64914
65224
 
64915
65225
  for (var i = 0; i < oRow.cells.length; i++) {
64916
65226
  var oNewCell = oNewRow.insertCell(oNewRow.cells.length);
64917
- oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style'));
64918
- oNewCell.setAttribute('valign', 'top');
65227
+ if (this.builder.activeTd.getAttribute('style')) oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style')); // oNewCell.setAttribute('valign', 'top');
65228
+
65229
+ oNewCell.style.verticalAlign = 'top';
64919
65230
  oNewCell.innerHTML = '<br>';
64920
65231
  } //Trigger Change event
64921
65232
 
@@ -64934,8 +65245,9 @@ class Table {
64934
65245
  for (var i = 0; i < oTable.rows.length; i++) {
64935
65246
  var oRowTmp = oTable.rows[i];
64936
65247
  var oNewCell = oRowTmp.insertCell(nCellIndex);
64937
- oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style'));
64938
- oNewCell.setAttribute('valign', 'top');
65248
+ if (this.builder.activeTd.getAttribute('style')) oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style')); // oNewCell.setAttribute('valign', 'top');
65249
+
65250
+ oNewCell.style.verticalAlign = 'top';
64939
65251
  oNewCell.innerHTML = '<br>';
64940
65252
  } //Trigger Change event
64941
65253
 
@@ -64954,8 +65266,9 @@ class Table {
64954
65266
  for (var i = 0; i < oTable.rows.length; i++) {
64955
65267
  var oRowTmp = oTable.rows[i];
64956
65268
  var oNewCell = oRowTmp.insertCell(nCellIndex + 1);
64957
- oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style'));
64958
- oNewCell.setAttribute('valign', 'top');
65269
+ if (this.builder.activeTd.getAttribute('style')) oNewCell.setAttribute('style', this.builder.activeTd.getAttribute('style')); // oNewCell.setAttribute('valign', 'top');
65270
+
65271
+ oNewCell.style.verticalAlign = 'top';
64959
65272
  oNewCell.innerHTML = '<br>';
64960
65273
  } //Trigger Change event
64961
65274
 
@@ -65250,7 +65563,7 @@ class Video {
65250
65563
  iframe.src = this.builder.opts.videoSelect;
65251
65564
  }
65252
65565
 
65253
- util.showModal(modalVideoSelect, true, () => {
65566
+ util.showModal(modalVideoSelect, false, () => {
65254
65567
  inpSelectVideo.removeAttribute('data-focus');
65255
65568
  inpSelectVideo.focus();
65256
65569
  });
@@ -65456,7 +65769,7 @@ class Audio {
65456
65769
  iframe.src = this.builder.opts.audioSelect;
65457
65770
  }
65458
65771
 
65459
- util.showModal(modalAudioSelect, true, () => {
65772
+ util.showModal(modalAudioSelect, false, () => {
65460
65773
  inpSelectAudio.removeAttribute('data-focus');
65461
65774
  inpSelectAudio.focus();
65462
65775
  });
@@ -65949,24 +66262,22 @@ class RowTool {
65949
66262
  });
65950
66263
  }
65951
66264
 
65952
- this.rowMore = rowMore; // Click anywhere will hide Column tool
65953
-
65954
- document.addEventListener('mousedown', e => {
65955
- e = e || window.event;
65956
- var target = e.target || e.srcElement;
65957
-
65958
- if (rowMore.style.display === 'flex') {
65959
- let a = dom.parentsHasClass(target, 'rowmore');
65960
- let b = dom.parentsHasClass(target, 'row-more');
65961
-
65962
- if (a || b) {
65963
- return;
65964
- } else {
65965
- // rowMore.style.display = '';
65966
- util.hidePop(rowMore);
65967
- }
65968
- }
65969
- });
66265
+ this.rowMore = rowMore; // // Click anywhere will hide Column tool
66266
+ // document.addEventListener('mousedown', (e) => {
66267
+ // e = e || window.event;
66268
+ // var target = e.target || e.srcElement;
66269
+ // if(rowMore.style.display === 'flex'){
66270
+ // let a = dom.parentsHasClass(target, 'rowmore');
66271
+ // let b = dom.parentsHasClass(target, 'row-more');
66272
+ // if(a||b) {
66273
+ // return;
66274
+ // }
66275
+ // else {
66276
+ // // rowMore.style.display = '';
66277
+ // util.hidePop(rowMore);
66278
+ // }
66279
+ // }
66280
+ // });
65970
66281
  }
65971
66282
 
65972
66283
  render(row) {
@@ -66403,7 +66714,7 @@ class ColorPicker {
66403
66714
  let html_colors = '';
66404
66715
 
66405
66716
  if (this.opts.colors.length > 0) {
66406
- html_colors += '<div class="color-default clearfix">';
66717
+ html_colors += '<div class="color-default">';
66407
66718
 
66408
66719
  for (var i = 0; i < this.opts.colors.length; i++) {
66409
66720
  if (this.opts.colors[i] === '#ffffff') {
@@ -66438,7 +66749,7 @@ class ColorPicker {
66438
66749
 
66439
66750
  let html = `<div class="pickcolor" style="width:269px;padding:12px;box-sizing:border-box;">
66440
66751
  ${html_colors}
66441
- <div class="color-gradient clearfix"></div>
66752
+ <div class="color-gradient"></div>
66442
66753
 
66443
66754
  <div class="div-color-opacity" style="height: 10px; margin: 12px 0px 17px;position:relative;">
66444
66755
  <div style="position:absolute;top:0;left:0;width:100%;height:21px;display:flex;flex-direction:column;flex-flow:wrap">
@@ -66446,7 +66757,7 @@ class ColorPicker {
66446
66757
  </div>
66447
66758
  <input type="range" min="0" max="100" value="100" class="color-opacity is-rangeslider" style="position:relative;background: transparent;margin: 0 !important;">
66448
66759
  </div>
66449
- <div class="clearfix" style="display:flex;margin:25px 0 3px;">
66760
+ <div style="display:flex;margin:25px 0 3px;">
66450
66761
  <button title="${this.out('B')}" data-color="#000000" style="background:#111;color:#f3f3f3;border:transparent 1px solid;width:35px;height:35px;line-height:35px;font-size:10px;border-right:none;">${this.out('B')}</button>
66451
66762
  <button title="${this.out('W')}" data-color="#ffffff" style="border: rgb(0 0 0 / 6%) 1px solid;background:#fff;color:#111;width:35px;height:35px;line-height:35px;font-size:10px;">${this.out('W')}</button>
66452
66763
  <button title="${this.out('Clear')}" data-color="" class="clear" style="width:140px;height:35px;line-height:35px;border-right:none;">${this.out('Clear')}</button>
@@ -66469,7 +66780,7 @@ class ColorPicker {
66469
66780
  <div>
66470
66781
 
66471
66782
  ${html_colors}
66472
- <div class="color-gradient clearfix"></div>
66783
+ <div class="color-gradient"></div>
66473
66784
 
66474
66785
  <div class="div-color-opacity" style="height: 10px; margin: 12px 0px 17px;position:relative;">
66475
66786
  <div style="position:absolute;top:0;left:0;width:100%;height:21px;display:flex;flex-direction:column;flex-flow:wrap">
@@ -66477,7 +66788,7 @@ class ColorPicker {
66477
66788
  </div>
66478
66789
  <input type="range" min="0" max="100" value="100" class="color-opacity is-rangeslider" style="position:relative;background: transparent;margin: 0 !important;">
66479
66790
  </div>
66480
- <div class="clearfix" style="display:flex;margin:25px 0 3px;">
66791
+ <div style="display:flex;margin:25px 0 3px;">
66481
66792
  <button title="${this.out('B')}" data-color="#000000" style="background:#111;color:#f3f3f3;border:transparent 1px solid;width:35px;height:35px;line-height:35px;font-size:10px;border-right:none;">${this.out('B')}</button>
66482
66793
  <button title="${this.out('W')}" data-color="#ffffff" style="background:#fff;color:#111;width:35px;height:35px;line-height:35px;font-size:10px;">${this.out('W')}</button>
66483
66794
  <button title="${this.out('Clear')}" data-color="" class="clear" style="width:140px;height:35px;line-height:35px;border-right:none;">${this.out('Clear')}</button>
@@ -66502,7 +66813,7 @@ class ColorPicker {
66502
66813
  <div class="is-modal-bar is-draggable"></div>
66503
66814
  <div>
66504
66815
 
66505
- <div class="color-swatch clearfix"></div>
66816
+ <div class="color-swatch"></div>
66506
66817
 
66507
66818
  <div class="div-color-hue" style="height: 23px;margin: 10px 0 0;position:relative">
66508
66819
  <input type="range" min="0" max="360" value="0" class="color-hue is-rangeslider" style="position:relative;background:transparent;margin:0 !important;z-index:1">
@@ -67411,14 +67722,14 @@ class GradientPicker {
67411
67722
  </div>
67412
67723
  <div class="is-settings" style="margin-bottom:0">
67413
67724
  <div class="is-label" style="margin-top:0">${this.out('Custom')}:</div>
67414
- <div class="div-custom-gradients clearfix" style="height:auto;display: flex;flex-flow: wrap;"></div>
67725
+ <div class="div-custom-gradients" style="height:auto;display: flex;flex-flow: wrap;"></div>
67415
67726
  <div>
67416
67727
  <button title="${this.out('Select Color')}" class="input-gradient-color1 is-btn-color" data-value="dark" style="border-right:none"></button>
67417
67728
  <button title="${this.out('Select Color')}" class="input-gradient-color2 is-btn-color" data-value="dark"></button>
67418
67729
  <input type="text" class="input-gradient-deg" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
67419
67730
  </div>
67420
67731
  </div>
67421
- <div class="is-settings clearfix" style="margin-bottom:0">
67732
+ <div class="is-settings" style="margin-bottom:0">
67422
67733
  <button title="${this.out('Add')}" class="input-gradient-save classic" style="width:100%;border:none;"> ${this.out('Add')} </button>
67423
67734
  </div>
67424
67735
  </div>
@@ -67998,8 +68309,8 @@ class ColumnTool {
67998
68309
  let resizebutton = `
67999
68310
  <button type="button" title="${util.out('Increase')}" class="cell-increase"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>
68000
68311
  <button type="button" title="${util.out('Decrease')}" class="cell-decrease"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>
68001
- `;
68002
- if (builder.opts.enableDragResize) resizebutton = '';
68312
+ `; // if(builder.opts.enableDragResize) resizebutton='';
68313
+
68003
68314
  let htmlbutton = '';
68004
68315
  if (builder.opts.columnHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="cell-html">
68005
68316
  <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
@@ -68046,7 +68357,7 @@ class ColumnTool {
68046
68357
 
68047
68358
  <div style="padding:0;margin-top:35px;">
68048
68359
 
68049
- <div class="is-tabs clearfix" data-group="cellsettings">
68360
+ <div class="is-tabs" data-group="cellsettings">
68050
68361
  <a title="${util.out('General')}" id="tabCellGeneral" href="#" data-content="divCellGeneral" class="active">${util.out('General')}</a>
68051
68362
  <a title="${util.out('Content')}" id="tabCellContent" href="#" data-content="divCellContent">${util.out('Content')}</a>
68052
68363
  ${this.builder.useLightbox ? `
@@ -68451,12 +68762,76 @@ class ColumnTool {
68451
68762
 
68452
68763
  elm = columnMore.querySelector('.cell-increase');
68453
68764
  dom.addEventListener(elm, 'click', () => {
68454
- this.grid.increaseColumn(); // util.clearControls();
68765
+ const cell = util.cellSelected();
68766
+ if (!cell) return;
68767
+ const row = cell.parentNode; // Check if reset needed (reset will remove inline width, etc)
68768
+
68769
+ let needed = false;
68770
+ Array.from(row.children).map(item => {
68771
+ if (item.classList.contains('is-row-tool')) return;
68772
+ if (item.classList.contains('is-rowadd-tool')) return;
68773
+ if (item.style.width) needed = true;
68774
+ });
68775
+
68776
+ if (needed) {
68777
+ Array.from(row.children).map(item => {
68778
+ if (item.classList.contains('is-row-tool')) return;
68779
+ if (item.classList.contains('is-rowadd-tool')) return;
68780
+ item.style.width = '';
68781
+ item.style.flex = '';
68782
+ item.style.height = '';
68783
+ item.style.minHeight = '';
68784
+ });
68785
+ util.fixLayout(row);
68786
+ }
68787
+
68788
+ this.grid.increaseColumn(); // Refresh Module
68789
+
68790
+ Array.from(cell.parentNode.children).map(item => {
68791
+ if (item.classList.contains('is-row-tool')) return;
68792
+ if (item.classList.contains('is-rowadd-tool')) return;
68793
+
68794
+ if (item.getAttribute('data-module')) {
68795
+ util.refreshModuleLayout(item);
68796
+ }
68797
+ }); // util.clearControls();
68455
68798
  }); // Decrease
68456
68799
 
68457
68800
  elm = columnMore.querySelector('.cell-decrease');
68458
68801
  dom.addEventListener(elm, 'click', () => {
68459
- this.grid.decreaseColumn(); // util.clearControls();
68802
+ const cell = util.cellSelected();
68803
+ if (!cell) return;
68804
+ const row = cell.parentNode; // Check if reset needed (reset will remove inline width, etc)
68805
+
68806
+ let needed = false;
68807
+ Array.from(row.children).map(item => {
68808
+ if (item.classList.contains('is-row-tool')) return;
68809
+ if (item.classList.contains('is-rowadd-tool')) return;
68810
+ if (item.style.width) needed = true;
68811
+ });
68812
+
68813
+ if (needed) {
68814
+ Array.from(row.children).map(item => {
68815
+ if (item.classList.contains('is-row-tool')) return;
68816
+ if (item.classList.contains('is-rowadd-tool')) return;
68817
+ item.style.width = '';
68818
+ item.style.flex = '';
68819
+ item.style.height = '';
68820
+ item.style.minHeight = '';
68821
+ });
68822
+ util.fixLayout(row);
68823
+ }
68824
+
68825
+ this.grid.decreaseColumn(); // Refresh Module
68826
+
68827
+ Array.from(cell.parentNode.children).map(item => {
68828
+ if (item.classList.contains('is-row-tool')) return;
68829
+ if (item.classList.contains('is-rowadd-tool')) return;
68830
+
68831
+ if (item.getAttribute('data-module')) {
68832
+ util.refreshModuleLayout(item);
68833
+ }
68834
+ }); // util.clearControls();
68460
68835
  }); // Duplicate
68461
68836
 
68462
68837
  elm = columnMore.querySelector('.cell-duplicate');
@@ -70324,13 +70699,13 @@ class ELementStyleEditor {
70324
70699
  <div class="is-modal-close" role="button" tabindex="0" title="${util.out('Close')}">&#10005;</div>
70325
70700
  </div>
70326
70701
  <div style="padding:12px">
70327
- <div class="is-settings clearfix" style="display:inline-block;width:100%;margin-bottom:0;">
70702
+ <div class="is-settings" style="display:inline-block;width:100%;margin-bottom:0;">
70328
70703
  <div>${util.out('Style')}:</div>
70329
70704
  <div>
70330
70705
  <textarea id="inpElmInlineStyle" style="width:100%;height:256px;margin:0px;border:none;font-size: 14px;line-height: 1.5;letter-spacing: 0;"></textarea>
70331
70706
  </div>
70332
70707
  </div>
70333
- <div class="is-settings clearfix" style="display:inline-block;width:100%;margin-bottom:0;">
70708
+ <div class="is-settings" style="display:inline-block;width:100%;margin-bottom:0;">
70334
70709
  <div>${util.out('Class')}:</div>
70335
70710
  <div>
70336
70711
  <input type="text" id="inpElmClassName" value="" style="width:100%;padding-left: 16px;font-family: courier, monospace;font-size: 14px;line-height: 2;letter-spacing: 1px;border:none;"/>
@@ -70439,7 +70814,7 @@ class ElementBoxStyles {
70439
70814
  let panelStuff = builderStuff.querySelector('#divElementBox');
70440
70815
  this.panelStuff = panelStuff;
70441
70816
  const html = `
70442
- <div class="is-settings clearfix">
70817
+ <div class="is-settings">
70443
70818
  <div class="is-label">${util.out('Background Color')}:</div>
70444
70819
  <div>
70445
70820
  <button title="${util.out('Background Color')}" class="input-elm-bgcolor is-btn-color" style="margin-right:15px"></button>
@@ -70449,7 +70824,7 @@ class ElementBoxStyles {
70449
70824
 
70450
70825
  <div style="margin-top: 25px;font-weight:bold;width:100%;">${util.out('Dimension')}</div>
70451
70826
 
70452
- <div class="is-settings clearfix" style="width:110px">
70827
+ <div class="is-settings" style="width:110px">
70453
70828
  <div><label for="inpElmWidth">${util.out('Width')}:</label></div>
70454
70829
  <div style="display:flex">
70455
70830
  <input type="text" id="inpElmWidth" value="" style="width:45px"/>
@@ -70462,7 +70837,7 @@ class ElementBoxStyles {
70462
70837
  </select>
70463
70838
  </div>
70464
70839
  </div>
70465
- <div class="is-settings clearfix" style="width:110px;">
70840
+ <div class="is-settings" style="width:110px;">
70466
70841
  <div><label for="inpElmHeight">${util.out('Height')}:</label></div>
70467
70842
  <div style="display:flex">
70468
70843
  <input type="text" id="inpElmHeight" value="" style="width:45px"/>
@@ -70475,7 +70850,7 @@ class ElementBoxStyles {
70475
70850
  </select>
70476
70851
  </div>
70477
70852
  </div>
70478
- <div class="is-settings clearfix" style="width:110px;">
70853
+ <div class="is-settings" style="width:110px;">
70479
70854
  <div><label for="inpElmMaxWidth">${util.out('Max Width')}:</label></div>
70480
70855
  <div style="display:flex">
70481
70856
  <input type="text" id="inpElmMaxWidth" value="" style="width:45px"/>
@@ -70488,7 +70863,7 @@ class ElementBoxStyles {
70488
70863
  </select>
70489
70864
  </div>
70490
70865
  </div>
70491
- <div class="is-settings clearfix" style="width:110px;">
70866
+ <div class="is-settings" style="width:110px;">
70492
70867
  <div><label for="inpElmMaxHeight">${util.out('Max Height')}:</label></div>
70493
70868
  <div style="display:flex">
70494
70869
  <input type="text" id="inpElmMaxHeight" value="" style="width:45px"/>
@@ -70501,7 +70876,7 @@ class ElementBoxStyles {
70501
70876
  </select>
70502
70877
  </div>
70503
70878
  </div>
70504
- <div class="is-settings clearfix" style="width:110px;">
70879
+ <div class="is-settings" style="width:110px;">
70505
70880
  <div><label for="inpElmMinWidth">${util.out('Min Width')}:</label></div>
70506
70881
  <div style="display:flex">
70507
70882
  <input type="text" id="inpElmMinWidth" value="" style="width:45px"/>
@@ -70514,7 +70889,7 @@ class ElementBoxStyles {
70514
70889
  </select>
70515
70890
  </div>
70516
70891
  </div>
70517
- <div class="is-settings clearfix" style="width:110px;">
70892
+ <div class="is-settings" style="width:110px;">
70518
70893
  <div><label for="inpElmMinHeight">${util.out('Min Height')}:</label></div>
70519
70894
  <div style="display:flex">
70520
70895
  <input type="text" id="inpElmMinHeight" value="" style="width:45px"/>
@@ -70528,7 +70903,7 @@ class ElementBoxStyles {
70528
70903
  </div>
70529
70904
  </div>
70530
70905
 
70531
- <div class="is-settings clearfix" style="width:110px;">
70906
+ <div class="is-settings" style="width:110px;">
70532
70907
  <div>${util.out('Overflow x')}:</div>
70533
70908
  <div>
70534
70909
  <select id="inpElmOverflowX"">
@@ -70538,7 +70913,7 @@ class ElementBoxStyles {
70538
70913
  </select>
70539
70914
  </div>
70540
70915
  </div>
70541
- <div class="is-settings clearfix" style="width:110px;">
70916
+ <div class="is-settings" style="width:110px;">
70542
70917
  <div>${util.out('Overflow y')}:</div>
70543
70918
  <div>
70544
70919
  <select id="inpElmOverflowY"">
@@ -70967,7 +71342,7 @@ class ElementSpacingStyles {
70967
71342
  const html = `
70968
71343
  <div style="margin-top: 13px;font-weight: bold;width:100%">${util.out('Padding')}</div>
70969
71344
 
70970
- <div class="is-settings clearfix" style="width:110px;">
71345
+ <div class="is-settings" style="width:110px;">
70971
71346
  <div>${util.out('Top')}:</div>
70972
71347
  <div style="display:flex;">
70973
71348
  <input type="text" id="inpElmPaddingTop" value="" style="width:45px"/>
@@ -70980,7 +71355,7 @@ class ElementSpacingStyles {
70980
71355
  </select>
70981
71356
  </div>
70982
71357
  </div>
70983
- <div class="is-settings clearfix" style="width:110px;">
71358
+ <div class="is-settings" style="width:110px;">
70984
71359
  <div>${util.out('Bottom')}:</div>
70985
71360
  <div style="display:flex;">
70986
71361
  <input type="text" id="inpElmPaddingBottom" value="" style="width:45px"/>
@@ -70993,7 +71368,7 @@ class ElementSpacingStyles {
70993
71368
  </select>
70994
71369
  </div>
70995
71370
  </div>
70996
- <div class="is-settings clearfix" style="width:110px;">
71371
+ <div class="is-settings" style="width:110px;">
70997
71372
  <div>${util.out('Left')}:</div>
70998
71373
  <div style="display:flex;">
70999
71374
  <input type="text" id="inpElmPaddingLeft" value="" style="width:45px"/>
@@ -71006,7 +71381,7 @@ class ElementSpacingStyles {
71006
71381
  </select>
71007
71382
  </div>
71008
71383
  </div>
71009
- <div class="is-settings clearfix" style="width:110px;">
71384
+ <div class="is-settings" style="width:110px;">
71010
71385
  <div>${util.out('Right')}:</div>
71011
71386
  <div style="display:flex;">
71012
71387
  <input type="text" id="inpElmPaddingRight" value="" style="width:45px"/>
@@ -71022,7 +71397,7 @@ class ElementSpacingStyles {
71022
71397
 
71023
71398
  <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Margin')}</div>
71024
71399
 
71025
- <div class="is-settings clearfix" style="width:110px;">
71400
+ <div class="is-settings" style="width:110px;">
71026
71401
  <div>${util.out('Top')}:</div>
71027
71402
  <div style="display:flex;">
71028
71403
  <input type="text" id="inpElmMarginTop" value="" style="width:45px"/>
@@ -71036,7 +71411,7 @@ class ElementSpacingStyles {
71036
71411
  </select>
71037
71412
  </div>
71038
71413
  </div>
71039
- <div class="is-settings clearfix" style="width:110px;">
71414
+ <div class="is-settings" style="width:110px;">
71040
71415
  <div>${util.out('Bottom')}:</div>
71041
71416
  <div style="display:flex;">
71042
71417
  <input type="text" id="inpElmMarginBottom" value="" style="width:45px"/>
@@ -71050,7 +71425,7 @@ class ElementSpacingStyles {
71050
71425
  </select>
71051
71426
  </div>
71052
71427
  </div>
71053
- <div class="is-settings clearfix" style="width:110px;">
71428
+ <div class="is-settings" style="width:110px;">
71054
71429
  <div>${util.out('Left')}:</div>
71055
71430
  <div style="display:flex;">
71056
71431
  <input type="text" id="inpElmMarginLeft" value="" style="width:45px"/>
@@ -71064,7 +71439,7 @@ class ElementSpacingStyles {
71064
71439
  </select>
71065
71440
  </div>
71066
71441
  </div>
71067
- <div class="is-settings clearfix" style="width:110px;">
71442
+ <div class="is-settings" style="width:110px;">
71068
71443
  <div>${util.out('Right')}:</div>
71069
71444
  <div style="display:flex;">
71070
71445
  <input type="text" id="inpElmMarginRight" value="" style="width:45px"/>
@@ -71081,12 +71456,12 @@ class ElementSpacingStyles {
71081
71456
 
71082
71457
  <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
71083
71458
 
71084
- <div class="is-settings clearfix" style="width:100%;">
71459
+ <div class="is-settings" style="width:100%;">
71085
71460
  <div>
71086
71461
  <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
71087
71462
  </div>
71088
71463
  </div>
71089
- <div class="is-settings clearfix" style="margin-top:0;width:100%;">
71464
+ <div class="is-settings" style="margin-top:0;width:100%;">
71090
71465
  <div>
71091
71466
  <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
71092
71467
  </div>
@@ -71620,7 +71995,7 @@ class ElementBorderStyles {
71620
71995
  const html = `
71621
71996
  <div style="margin-top: 13px;font-weight: bold;line-height: 1.7;">${util.out('Border')}</div>
71622
71997
 
71623
- <div class="is-settings clearfix">
71998
+ <div class="is-settings">
71624
71999
  <div style="display:flex;">
71625
72000
  <input type="text" id="inpElmBorderWidth" value="" style="width:45px"/>
71626
72001
  <select id="inpElmBorderWidthUnit" style="margin-right:15px;">
@@ -71642,7 +72017,7 @@ class ElementBorderStyles {
71642
72017
 
71643
72018
  <div style="margin-top: 25px;font-weight: bold;line-height: 1.7;">${util.out('Individual Sides')}</div>
71644
72019
 
71645
- <div class="is-settings clearfix">
72020
+ <div class="is-settings">
71646
72021
  <div>${util.out('Border Top')}:</div>
71647
72022
  <div style="display:flex;">
71648
72023
  <input type="text" id="inpElmBorderTopWidth" value="" style="width:45px"/>
@@ -71663,7 +72038,7 @@ class ElementBorderStyles {
71663
72038
  </div>
71664
72039
  </div>
71665
72040
 
71666
- <div class="is-settings clearfix">
72041
+ <div class="is-settings">
71667
72042
  <div>${util.out('Border Bottom')}:</div>
71668
72043
  <div style="display:flex;">
71669
72044
  <input type="text" id="inpElmBorderBottomWidth" value="" style="width:45px"/>
@@ -71684,7 +72059,7 @@ class ElementBorderStyles {
71684
72059
  </div>
71685
72060
  </div>
71686
72061
 
71687
- <div class="is-settings clearfix">
72062
+ <div class="is-settings">
71688
72063
  <div>${util.out('Border Left')}:</div>
71689
72064
  <div style="display:flex;">
71690
72065
  <input type="text" id="inpElmBorderLeftWidth" value="" style="width:45px"/>
@@ -71705,7 +72080,7 @@ class ElementBorderStyles {
71705
72080
  </div>
71706
72081
  </div>
71707
72082
 
71708
- <div class="is-settings clearfix">
72083
+ <div class="is-settings">
71709
72084
  <div>${util.out('Border Right')}:</div>
71710
72085
  <div style="display:flex;">
71711
72086
  <input type="text" id="inpElmBorderRightWidth" value="" style="width:45px"/>
@@ -72360,14 +72735,14 @@ class ElementTextStyles {
72360
72735
  let panelStuff = builderStuff.querySelector('#divElementText');
72361
72736
  this.panelStuff = panelStuff;
72362
72737
  const html = `
72363
- <div class="is-settings clearfix" style="width:115px;">
72738
+ <div class="is-settings" style="width:115px;">
72364
72739
  <div>Text Color:</div>
72365
72740
  <div>
72366
72741
  <button title="${util.out('Text Color')}" class="input-elm-color is-btn-color"></button>
72367
72742
  </div>
72368
72743
  </div>
72369
72744
 
72370
- <div class="is-settings clearfix" style="width:115px;">
72745
+ <div class="is-settings" style="width:115px;">
72371
72746
  <div>${util.out('Font Size')}:</div>
72372
72747
  <div style="display:flex">
72373
72748
  <input type="text" id="inpElmFontSize" value="" style="width:45px"/>
@@ -72385,7 +72760,7 @@ class ElementTextStyles {
72385
72760
  </div>
72386
72761
  </div>
72387
72762
 
72388
- <div class="is-settings clearfix" style="width:115px;">
72763
+ <div class="is-settings" style="width:115px;">
72389
72764
  <div>${util.out('Text Align')}:</div>
72390
72765
  <div>
72391
72766
  <select id="inpElmTextAlign">
@@ -72398,7 +72773,7 @@ class ElementTextStyles {
72398
72773
  </div>
72399
72774
  </div>
72400
72775
 
72401
- <div class="is-settings clearfix" style="width:115px;">
72776
+ <div class="is-settings" style="width:115px;">
72402
72777
  <div>${util.out('Line Height')}:</div>
72403
72778
  <div style="display:flex">
72404
72779
  <input type="text" id="inpElmLineHeight" value="" style="width:45px"/>
@@ -72410,7 +72785,7 @@ class ElementTextStyles {
72410
72785
  </div>
72411
72786
  </div>
72412
72787
 
72413
- <div class="is-settings clearfix" style="width:115px;">
72788
+ <div class="is-settings" style="width:115px;">
72414
72789
  <div>${util.out('Font Weight')}:</div>
72415
72790
  <div>
72416
72791
  <select id="inpElmFontWeight">
@@ -72430,7 +72805,7 @@ class ElementTextStyles {
72430
72805
  </div>
72431
72806
  </div>
72432
72807
 
72433
- <div class="is-settings clearfix" style="width:115px;">
72808
+ <div class="is-settings" style="width:115px;">
72434
72809
  <div>${util.out('Font Style')}:</div>
72435
72810
  <div>
72436
72811
  <select id="inpElmFontStyle">
@@ -72441,7 +72816,7 @@ class ElementTextStyles {
72441
72816
  </div>
72442
72817
  </div>
72443
72818
 
72444
- <div class="is-settings clearfix" style="width:115px;">
72819
+ <div class="is-settings" style="width:115px;">
72445
72820
  <div>${util.out('Text Transform')}:</div>
72446
72821
  <div>
72447
72822
  <select id="inpElmTextTransform">
@@ -72454,7 +72829,7 @@ class ElementTextStyles {
72454
72829
  </div>
72455
72830
  </div>
72456
72831
 
72457
- <div class="is-settings clearfix" style="width:115px;">
72832
+ <div class="is-settings" style="width:115px;">
72458
72833
  <div>${util.out('Text Decoration')}:</div>
72459
72834
  <div>
72460
72835
  <select id="inpElmTextDecoration">
@@ -72467,21 +72842,21 @@ class ElementTextStyles {
72467
72842
  </div>
72468
72843
  </div>
72469
72844
 
72470
- <div class="is-settings clearfix" style="width:115px;">
72845
+ <div class="is-settings" style="width:115px;">
72471
72846
  <div>${util.out('Letter Spacing')}:</div>
72472
72847
  <div>
72473
72848
  <input type="text" id="inpElmLetterSpacing" value="" style="width:45px"/> &nbsp;px
72474
72849
  </div>
72475
72850
  </div>
72476
72851
 
72477
- <div class="is-settings clearfix" style="width:115px;">
72852
+ <div class="is-settings" style="width:115px;">
72478
72853
  <div>${util.out('Word Spacing')}:</div>
72479
72854
  <div>
72480
72855
  <input type="text" id="inpElmWordSpacing" value="" style="width:45px"/> &nbsp;px
72481
72856
  </div>
72482
72857
  </div>
72483
72858
 
72484
- <div class="is-settings clearfix" style="width:100%;">
72859
+ <div class="is-settings" style="width:100%;">
72485
72860
  <div>${util.out('Font Family')}:</div>
72486
72861
  <div style="display:flex">
72487
72862
  <input type="text" id="inpElmFontFamily" value="" style="width:100%"/>
@@ -72494,7 +72869,7 @@ class ElementTextStyles {
72494
72869
  <div class="is-modal pickfontfamily" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
72495
72870
  <div class="is-modal-content">
72496
72871
  <div class="is-modal-bar is-draggable"> ${util.out('Font')} </div>
72497
- <div class="clearfix" style="margin-top:28px;padding:0px;height:300px;position:relative;">
72872
+ <div style="margin-top:35px;padding:0px;height:300px;position:relative;">
72498
72873
  <iframe tabindex="0" src="about:blank" style="width:100%;height:100%;position:absolute;top:0;left:0;border: none;"></iframe>
72499
72874
  </div>
72500
72875
  </div>
@@ -72911,7 +73286,7 @@ class ElementCornerStyles {
72911
73286
  const html = `
72912
73287
  <div style="margin-top: 13px;font-weight: bold;width:100%;">${util.out('Corners')}</div>
72913
73288
 
72914
- <div class="is-settings clearfix" style="width:100%;margin-bottom:9px;">
73289
+ <div class="is-settings" style="width:100%;margin-bottom:9px;">
72915
73290
  <div>${util.out('Border Radius')}:</div>
72916
73291
  <div>
72917
73292
  <input type="text" id="inpElmBorderRadius" value="" style="width:45px"/> &nbsp;px
@@ -72920,28 +73295,28 @@ class ElementCornerStyles {
72920
73295
 
72921
73296
  <div style="margin-top: 25px;font-weight: bold;width:100%;">${util.out('Individual Corners')}</div>
72922
73297
 
72923
- <div class="is-settings clearfix" style="width:110px;">
73298
+ <div class="is-settings" style="width:110px;">
72924
73299
  <div>${util.out('Top Left')}:</div>
72925
73300
  <div>
72926
73301
  <input type="text" id="inpElmBorderTopLeftRadius" value="" style="width:45px"/> &nbsp;px
72927
73302
  </div>
72928
73303
  </div>
72929
73304
 
72930
- <div class="is-settings clearfix" style="width:110px;">
73305
+ <div class="is-settings" style="width:110px;">
72931
73306
  <div>${util.out('Top Right')}:</div>
72932
73307
  <div>
72933
73308
  <input type="text" id="inpElmBorderTopRightRadius" value="" style="width:45px"/> &nbsp;px
72934
73309
  </div>
72935
73310
  </div>
72936
73311
 
72937
- <div class="is-settings clearfix" style="width:110px;">
73312
+ <div class="is-settings" style="width:110px;">
72938
73313
  <div>${util.out('Bottom Left')}:</div>
72939
73314
  <div>
72940
73315
  <input type="text" id="inpElmBorderBottomLeftRadius" value="" style="width:45px"/> &nbsp;px
72941
73316
  </div>
72942
73317
  </div>
72943
73318
 
72944
- <div class="is-settings clearfix" style="width:110px;">
73319
+ <div class="is-settings" style="width:110px;">
72945
73320
  <div>${util.out('Bottom Right')}:</div>
72946
73321
  <div>
72947
73322
  <input type="text" id="inpElmBorderBottomRightRadius" value="" style="width:45px"/> &nbsp;px
@@ -73106,7 +73481,7 @@ class ElementShadowStyles {
73106
73481
  const html = `
73107
73482
  <div style="margin-top:13px;font-weight:bold;width:100%;">${util.out('Shadow')}</div>
73108
73483
 
73109
- <div class="is-settings clearfix" style="width:110px;">
73484
+ <div class="is-settings" style="width:110px;">
73110
73485
  <div>${util.out('x Offset')}:</div>
73111
73486
  <div style="display:flex">
73112
73487
  <input type="text" id="inpElmBoxShadowX" value="" style="width:45px"/>
@@ -73117,7 +73492,7 @@ class ElementShadowStyles {
73117
73492
  </div>
73118
73493
  </div>
73119
73494
 
73120
- <div class="is-settings clearfix" style="width:110px;">
73495
+ <div class="is-settings" style="width:110px;">
73121
73496
  <div>${util.out('y Offset')}:</div>
73122
73497
  <div style="display:flex">
73123
73498
  <input type="text" id="inpElmBoxShadowY" value="" style="width:45px"/>
@@ -73128,7 +73503,7 @@ class ElementShadowStyles {
73128
73503
  </div>
73129
73504
  </div>
73130
73505
 
73131
- <div class="is-settings clearfix" style="width:110px;">
73506
+ <div class="is-settings" style="width:110px;">
73132
73507
  <div>${util.out('Blur')}:</div>
73133
73508
  <div style="display:flex">
73134
73509
  <input type="text" id="inpElmBoxShadowBlur" value="" style="width:45px"/>
@@ -73139,7 +73514,7 @@ class ElementShadowStyles {
73139
73514
  </div>
73140
73515
  </div>
73141
73516
 
73142
- <div class="is-settings clearfix" style="width:110px;">
73517
+ <div class="is-settings" style="width:110px;">
73143
73518
  <div>${util.out('Spread')}:</div>
73144
73519
  <div style="display:flex">
73145
73520
  <input type="text" id="inpElmBoxShadowSpread" value="" style="width:45px"/>
@@ -73150,14 +73525,14 @@ class ElementShadowStyles {
73150
73525
  </div>
73151
73526
  </div>
73152
73527
 
73153
- <div class="is-settings clearfix" style="width:100%;">
73528
+ <div class="is-settings" style="width:100%;">
73154
73529
  <div>${util.out('Shadow Color')}:</div>
73155
73530
  <div>
73156
73531
  <button title="${util.out('Shadow Color')}" class="input-elm-shadowcolor is-btn-color"></button>
73157
73532
  </div>
73158
73533
  </div>
73159
73534
 
73160
- <div class="is-settings clearfix" style="width:100%;">
73535
+ <div class="is-settings" style="width:100%;">
73161
73536
  <div>${util.out('Outer/Inner Shadow')}:</div>
73162
73537
  <div>
73163
73538
  <select id="inpElmBoxShadowInset">
@@ -73373,7 +73748,7 @@ class ElementDisplayStyles {
73373
73748
  const html = `
73374
73749
  <div style="margin-top:13px;font-weight:bold;">${util.out('Display')}</div>
73375
73750
 
73376
- <div class="is-settings clearfix" style="width:100%;">
73751
+ <div class="is-settings" style="width:100%;">
73377
73752
  <div style="display:flex">
73378
73753
  <select id="inpElmDisplay" style="width:110px;">
73379
73754
  <option value=""></option>
@@ -73388,7 +73763,7 @@ class ElementDisplayStyles {
73388
73763
 
73389
73764
  <div style="margin-top:25px;font-weight:bold;width:100%;">${util.out('Flex')}</div>
73390
73765
 
73391
- <div class="is-settings clearfix" style="width:120px;">
73766
+ <div class="is-settings" style="width:120px;">
73392
73767
  <div>${util.out('Direction')}:</div>
73393
73768
  <div style="display:flex">
73394
73769
  <select id="inpElmFlexDirection" style="width:110px;">
@@ -73401,7 +73776,7 @@ class ElementDisplayStyles {
73401
73776
  </div>
73402
73777
  </div>
73403
73778
 
73404
- <div class="is-settings clearfix" style="width:120px;">
73779
+ <div class="is-settings" style="width:120px;">
73405
73780
  <div>${util.out('Wrap')}:</div>
73406
73781
  <div style="display:flex">
73407
73782
  <select id="inpElmFlexWrap" style="width:110px;">
@@ -73413,7 +73788,7 @@ class ElementDisplayStyles {
73413
73788
  </div>
73414
73789
  </div>
73415
73790
 
73416
- <div class="is-settings clearfix" style="width:100%;">
73791
+ <div class="is-settings" style="width:100%;">
73417
73792
  <div>${util.out('Justify Content')}:</div>
73418
73793
  <div style="display:flex">
73419
73794
  <select id="inpElmJustifyContent" style="width:110px;">
@@ -73427,7 +73802,7 @@ class ElementDisplayStyles {
73427
73802
  </div>
73428
73803
  </div>
73429
73804
 
73430
- <div class="is-settings clearfix" style="width:120px;">
73805
+ <div class="is-settings" style="width:120px;">
73431
73806
  <div>${util.out('Align Items')}:</div>
73432
73807
  <div style="display:flex">
73433
73808
  <select id="inpElmAlignItems" style="width:110px;">
@@ -73441,7 +73816,7 @@ class ElementDisplayStyles {
73441
73816
  </div>
73442
73817
  </div>
73443
73818
 
73444
- <div class="is-settings clearfix" style="width:120px;">
73819
+ <div class="is-settings" style="width:120px;">
73445
73820
  <div>${util.out('Align Content')}:</div>
73446
73821
  <div style="display:flex">
73447
73822
  <select id="inpElmAlignContent" style="width:110px;">
@@ -73564,7 +73939,7 @@ class ElementPositionStyles {
73564
73939
  const html = `
73565
73940
  <div style="margin-top:13px;font-weight:bold;width:100%;">${util.out('Position')}</div>
73566
73941
 
73567
- <div class="is-settings clearfix" style="width:100%;">
73942
+ <div class="is-settings" style="width:100%;">
73568
73943
  <div style="display:flex">
73569
73944
  <select id="inpElmPosition">
73570
73945
  <option value=""></option>
@@ -73575,7 +73950,7 @@ class ElementPositionStyles {
73575
73950
  </div>
73576
73951
  </div>
73577
73952
 
73578
- <div class="is-settings clearfix" style="width:120px;">
73953
+ <div class="is-settings" style="width:120px;">
73579
73954
  <div>${util.out('Top')}:</div>
73580
73955
  <div style="display:flex">
73581
73956
  <input type="text" id="inpElmTop" value="" style="width:45px"/>
@@ -73589,7 +73964,7 @@ class ElementPositionStyles {
73589
73964
  </div>
73590
73965
  </div>
73591
73966
 
73592
- <div class="is-settings clearfix" style="width:120px;">
73967
+ <div class="is-settings" style="width:120px;">
73593
73968
  <div>${util.out('Left')}:</div>
73594
73969
  <div style="display:flex">
73595
73970
  <input type="text" id="inpElmLeft" value="" style="width:45px"/>
@@ -73603,7 +73978,7 @@ class ElementPositionStyles {
73603
73978
  </div>
73604
73979
  </div>
73605
73980
 
73606
- <div class="is-settings clearfix" style="width:120px;">
73981
+ <div class="is-settings" style="width:120px;">
73607
73982
  <div>${util.out('Bottom')}:</div>
73608
73983
  <div style="display:flex">
73609
73984
  <input type="text" id="inpElmBottom" value="" style="width:45px"/>
@@ -73617,7 +73992,7 @@ class ElementPositionStyles {
73617
73992
  </div>
73618
73993
  </div>
73619
73994
 
73620
- <div class="is-settings clearfix" style="width:120px;">
73995
+ <div class="is-settings" style="width:120px;">
73621
73996
  <div>${util.out('Right')}:</div>
73622
73997
  <div style="display:flex">
73623
73998
  <input type="text" id="inpElmRight" value="" style="width:45px"/>
@@ -73633,7 +74008,7 @@ class ElementPositionStyles {
73633
74008
 
73634
74009
  <div style="margin-top: 25px;font-weight: bold;width:100%;">${util.out('Float')}</div>
73635
74010
 
73636
- <div class="is-settings clearfix" style="width:100%;">
74011
+ <div class="is-settings" style="width:100%;">
73637
74012
  <div style="display:flex">
73638
74013
  <select id="inpElmFloat">
73639
74014
  <option value=""></option>
@@ -73903,7 +74278,7 @@ class ElementEffectStyles {
73903
74278
  const html = `
73904
74279
  <div style="margin-top:13px;font-weight:bold;">${util.out('Effects')}</div>
73905
74280
 
73906
- <div class="is-settings clearfix" style="width:100%;">
74281
+ <div class="is-settings" style="width:100%;">
73907
74282
  <div>${util.out('Opacity')}:</div>
73908
74283
  <div style="display:flex">
73909
74284
  <input type="text" id="inpElmOpacity" value="" style="width:45px"/>
@@ -73912,56 +74287,56 @@ class ElementEffectStyles {
73912
74287
 
73913
74288
  <div style="margin-top:25px;font-weight:bold;width:100%;">${util.out('Filters')}</div>
73914
74289
 
73915
- <div class="is-settings clearfix" style="width:110px;">
74290
+ <div class="is-settings" style="width:110px;">
73916
74291
  <div>${util.out('Blur')}:</div>
73917
74292
  <div>
73918
74293
  <input type="text" id="inpElmBlur" value="" style="width:45px"/> &nbsp;px
73919
74294
  </div>
73920
74295
  </div>
73921
74296
 
73922
- <div class="is-settings clearfix" style="width:110px;">
74297
+ <div class="is-settings" style="width:110px;">
73923
74298
  <div>${util.out('Brightness')}:</div>
73924
74299
  <div>
73925
74300
  <input type="text" id="inpElmBrightness" value="" style="width:45px"/>
73926
74301
  </div>
73927
74302
  </div>
73928
74303
 
73929
- <div class="is-settings clearfix" style="width:110px;">
74304
+ <div class="is-settings" style="width:110px;">
73930
74305
  <div>${util.out('Contrast')}:</div>
73931
74306
  <div>
73932
74307
  <input type="text" id="inpElmContrast" value="" style="width:45px"/> &nbsp;%
73933
74308
  </div>
73934
74309
  </div>
73935
74310
 
73936
- <div class="is-settings clearfix" style="width:110px;">
74311
+ <div class="is-settings" style="width:110px;">
73937
74312
  <div>${util.out('Grayscale')}:</div>
73938
74313
  <div>
73939
74314
  <input type="text" id="inpElmGrayscale" value="" style="width:45px"/> &nbsp;%
73940
74315
  </div>
73941
74316
  </div>
73942
74317
 
73943
- <div class="is-settings clearfix" style="width:110px;">
74318
+ <div class="is-settings" style="width:110px;">
73944
74319
  <div>${util.out('Hue Rotate')}:</div>
73945
74320
  <div>
73946
74321
  <input type="text" id="inpElmHueRotate" value="" style="width:45px"/> &nbsp;<span style="font-size:12px">deg</span>
73947
74322
  </div>
73948
74323
  </div>
73949
74324
 
73950
- <div class="is-settings clearfix" style="width:110px;">
74325
+ <div class="is-settings" style="width:110px;">
73951
74326
  <div>${util.out('Invert')}:</div>
73952
74327
  <div>
73953
74328
  <input type="text" id="inpElmInvert" value="" style="width:45px"/> &nbsp;%
73954
74329
  </div>
73955
74330
  </div>
73956
74331
 
73957
- <div class="is-settings clearfix" style="width:110px;">
74332
+ <div class="is-settings" style="width:110px;">
73958
74333
  <div>${util.out('Saturate')}:</div>
73959
74334
  <div>
73960
74335
  <input type="text" id="inpElmSaturate" value="" style="width:45px"/>
73961
74336
  </div>
73962
74337
  </div>
73963
74338
 
73964
- <div class="is-settings clearfix" style="width:110px;">
74339
+ <div class="is-settings" style="width:110px;">
73965
74340
  <div>${util.out('Sepia')}:</div>
73966
74341
  <div>
73967
74342
  <input type="text" id="inpElmSepia" value="" style="width:45px"/> &nbsp;%
@@ -74457,63 +74832,63 @@ class ElementAttributeStyles {
74457
74832
  const html = `
74458
74833
  <div style="margin-top:13px;font-weight:bold;width:100%;">${util.out('Attributes')}</div>
74459
74834
 
74460
- <div class="is-settings clearfix" style="width:120px;">
74835
+ <div class="is-settings" style="width:120px;">
74461
74836
  <div style="width:100%">${util.out('Names')}:</div>
74462
74837
  <div style="display:flex">
74463
74838
  <input type="text" id="inpElmAttr1" value="" style="width:90%"/>
74464
74839
  </div>
74465
74840
  </div>
74466
74841
 
74467
- <div class="is-settings clearfix" style="width:120px;">
74842
+ <div class="is-settings" style="width:120px;">
74468
74843
  <div style="width:100%">${util.out('Values')}:</div>
74469
74844
  <div style="display:flex">
74470
74845
  <input type="text" id="inpElmAttrVal1" value="" style="width:90%"/>
74471
74846
  </div>
74472
74847
  </div>
74473
74848
 
74474
- <div class="is-settings clearfix" style="width:120px;">
74849
+ <div class="is-settings" style="width:120px;">
74475
74850
  <div style="display:flex">
74476
74851
  <input type="text" id="inpElmAttr2" value="" style="width:90%"/>
74477
74852
  </div>
74478
74853
  </div>
74479
74854
 
74480
- <div class="is-settings clearfix" style="width:120px;">
74855
+ <div class="is-settings" style="width:120px;">
74481
74856
  <div style="display:flex">
74482
74857
  <input type="text" id="inpElmAttrVal2" value="" style="width:90%"/>
74483
74858
  </div>
74484
74859
  </div>
74485
74860
 
74486
- <div class="is-settings clearfix" style="width:120px;">
74861
+ <div class="is-settings" style="width:120px;">
74487
74862
  <div style="display:flex">
74488
74863
  <input type="text" id="inpElmAttr3" value="" style="width:90%"/>
74489
74864
  </div>
74490
74865
  </div>
74491
74866
 
74492
- <div class="is-settings clearfix" style="width:120px;">
74867
+ <div class="is-settings" style="width:120px;">
74493
74868
  <div style="display:flex">
74494
74869
  <input type="text" id="inpElmAttrVal3" value="" style="width:90%"/>
74495
74870
  </div>
74496
74871
  </div>
74497
74872
 
74498
- <div class="is-settings clearfix" style="width:120px;">
74873
+ <div class="is-settings" style="width:120px;">
74499
74874
  <div style="display:flex">
74500
74875
  <input type="text" id="inpElmAttr4" value="" style="width:90%"/>
74501
74876
  </div>
74502
74877
  </div>
74503
74878
 
74504
- <div class="is-settings clearfix" style="width:120px;">
74879
+ <div class="is-settings" style="width:120px;">
74505
74880
  <div style="display:flex">
74506
74881
  <input type="text" id="inpElmAttrVal4" value="" style="width:90%"/>
74507
74882
  </div>
74508
74883
  </div>
74509
74884
 
74510
- <div class="is-settings clearfix" style="width:120px;">
74885
+ <div class="is-settings" style="width:120px;">
74511
74886
  <div style="display:flex">
74512
74887
  <input type="text" id="inpElmAttr5" value="" style="width:90%"/>
74513
74888
  </div>
74514
74889
  </div>
74515
74890
 
74516
- <div class="is-settings clearfix" style="width:120px;float:left;">
74891
+ <div class="is-settings" style="width:120px;float:left;">
74517
74892
  <div style="display:flex">
74518
74893
  <input type="text" id="inpElmAttrVal5" value="" style="width:90%"/>
74519
74894
  </div>
@@ -74601,7 +74976,7 @@ class ElementAnimationStyles {
74601
74976
  const html = `
74602
74977
  <div style="margin-top:13px;font-weight:bold;">${util.out('Animate')}</div>
74603
74978
 
74604
- <div class="is-settings clearfix" style="width:100%;">
74979
+ <div class="is-settings" style="width:100%;">
74605
74980
  <div style="display:flex">
74606
74981
  <select id="selElmAnim">
74607
74982
  <option value=""></option>
@@ -74636,7 +75011,7 @@ class ElementAnimationStyles {
74636
75011
  </div>
74637
75012
  </div>
74638
75013
 
74639
- <div class="is-settings clearfix" style="width:110px;">
75014
+ <div class="is-settings" style="width:110px;">
74640
75015
  <div> ${util.out('Delay')}:</div>
74641
75016
  <div>
74642
75017
  <select id="selElmAnimDelay">
@@ -74676,7 +75051,7 @@ class ElementAnimationStyles {
74676
75051
  </div>
74677
75052
  </div>
74678
75053
 
74679
- <div class="is-settings clearfix" style="width:110px;">
75054
+ <div class="is-settings" style="width:110px;">
74680
75055
  <div> ${util.out('Duration')}:</div>
74681
75056
  <div>
74682
75057
  <select id="selElmAnimDuration">
@@ -74716,13 +75091,13 @@ class ElementAnimationStyles {
74716
75091
  </div>
74717
75092
  </div>
74718
75093
 
74719
- <div class="is-settings clearfix" style="width:100%;">
75094
+ <div class="is-settings" style="width:100%;">
74720
75095
  <div style="margin-top:15px">
74721
75096
  <label for="chkAnimateOnce"><input type="checkbox" id="chkAnimateOnce" value=""> ${util.out('Animate Once')} </label>
74722
75097
  </div>
74723
75098
  </div>
74724
75099
 
74725
- <div class="is-settings clearfix" style="width:100%;">
75100
+ <div class="is-settings" style="width:100%;">
74726
75101
  <div style="display:flex">
74727
75102
  <button title="${util.out('Test')}" id="btnPreviewAnim" class="classic" value=""> ${util.out('TEST')} </button>
74728
75103
  </div>
@@ -74862,7 +75237,7 @@ class ElementPanel {
74862
75237
 
74863
75238
  <div style="width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:absolute;top:0px;left:0px;box-sizing:border-box;border-top:100px solid transparent;padding:0px;">
74864
75239
 
74865
- <div class="is-tabs clearfix" data-group="element" style="padding-right:0;padding-bottom:0;">
75240
+ <div class="is-tabs" data-group="element" style="padding-right:0;padding-bottom:0;">
74866
75241
  <a title="${util.out('Box')}" id="tabElementBox" href="" data-content="divElementBox" class="active">${util.out('Box')}</a>
74867
75242
  <a title="${util.out('Spacing')}" id="tabElementSpacing" href="" data-content="divElementSpacing">${util.out('Spacing')}</a>
74868
75243
  <a title="${util.out('Border')}" id="tabElementBorder" href="" data-content="divElementBorder">${util.out('Border')}</a>
@@ -74973,12 +75348,12 @@ class ElementPanel {
74973
75348
  this.elementAttributeStyles.readElementStyles(elm);
74974
75349
  this.elementAnimationStyles.readElementStyles(elm);
74975
75350
  let panel = this.panel;
74976
- let elms = document.querySelectorAll('[data-saveforundo]');
75351
+ let elms = this.builder.doc.querySelectorAll('[data-saveforundo]');
74977
75352
  Array.prototype.forEach.call(elms, elm => {
74978
75353
  elm.removeAttribute('data-saveforundo');
74979
75354
  });
74980
75355
  elm.setAttribute('data-saveforundo', '');
74981
- elms = document.querySelectorAll('.elm-inspected');
75356
+ elms = this.builder.doc.querySelectorAll('.elm-inspected');
74982
75357
  Array.prototype.forEach.call(elms, elm => {
74983
75358
  dom$3.removeClass(elm, 'elm-inspected');
74984
75359
  });
@@ -75027,7 +75402,7 @@ class ElementPanel {
75027
75402
  this.builder.inspectedElement = arrElms[index];
75028
75403
  this.inspect(arrElms[index]);
75029
75404
 
75030
- if (!document.querySelector('.elm-inspected.elm-active')) {
75405
+ if (!this.builder.doc.querySelector('.elm-inspected.elm-active')) {
75031
75406
  // hide element tool if inspected element is not active element
75032
75407
  this.builderStuff.querySelector('.is-element-tool').style.display = 'none';
75033
75408
  }
@@ -75070,11 +75445,11 @@ class ElementPanel {
75070
75445
  hidePanel() {
75071
75446
  var panel = this.builderStuff.querySelector('.is-side.elementstyles');
75072
75447
  dom$3.removeClass(panel, 'active');
75073
- let elms = document.querySelectorAll('[data-saveforundo]');
75448
+ let elms = this.builder.doc.querySelectorAll('[data-saveforundo]');
75074
75449
  Array.prototype.forEach.call(elms, elm => {
75075
75450
  elm.removeAttribute('data-saveforundo');
75076
75451
  });
75077
- elms = document.querySelectorAll('.elm-inspected');
75452
+ elms = this.builder.doc.querySelectorAll('.elm-inspected');
75078
75453
  Array.prototype.forEach.call(elms, elm => {
75079
75454
  dom$3.removeClass(elm, 'elm-inspected');
75080
75455
  });
@@ -75188,31 +75563,32 @@ class ElementTool {
75188
75563
  if (ok) {
75189
75564
  this.builder.uo.saveForUndo();
75190
75565
  let elm = this.builder.activeElement;
75191
-
75192
- if (dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
75193
- // Level 1
75194
- elm.parentNode.removeChild(elm);
75195
- } else {
75196
- // Deeper
75197
- if (elm.parentNode.childElementCount > 1) {
75566
+ /*
75567
+ if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
75568
+ // Level 1
75198
75569
  elm.parentNode.removeChild(elm);
75199
- } else {
75200
- let element = elm;
75201
-
75202
- if (!dom.parentsHasAttribute(element, 'data-subblock')) {
75203
- while (!dom.hasClass(element.parentNode, 'cell-active') && elm.parentNode.childElementCount === 1) {
75204
- element = element.parentNode;
75205
- }
75570
+ } else {
75571
+ // Deeper
75572
+ if(elm.parentNode.childElementCount > 1) {
75573
+ elm.parentNode.removeChild(elm);
75206
75574
  } else {
75207
- while (!element.parentNode.hasAttribute('data-subblock') && elm.parentNode.childElementCount === 1) {
75208
- element = element.parentNode;
75209
- }
75575
+ let element = elm;
75576
+ if(!dom.parentsHasAttribute(element, 'data-subblock')) {
75577
+
75578
+ while(!dom.hasClass(element.parentNode, 'cell-active') && elm.parentNode.childElementCount === 1) {
75579
+ element = element.parentNode;
75580
+ }
75581
+ } else {
75582
+ while(!element.parentNode.hasAttribute('data-subblock') && elm.parentNode.childElementCount === 1) {
75583
+ element = element.parentNode;
75584
+ }
75585
+ }
75586
+ element.parentNode.removeChild(element);
75210
75587
  }
75211
-
75212
- element.parentNode.removeChild(element);
75213
- }
75214
75588
  }
75589
+ */
75215
75590
 
75591
+ elm.parentNode.removeChild(elm);
75216
75592
  this.elementTool.style.display = 'none';
75217
75593
  let cell = this.builder.activeCol;
75218
75594
 
@@ -75227,7 +75603,7 @@ class ElementTool {
75227
75603
  util.checkEmpty();
75228
75604
  } else if (cell.childElementCount === 0) {
75229
75605
  row.removeChild(cell);
75230
- util.fixLayout(row, builder);
75606
+ util.fixLayout(row);
75231
75607
  let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
75232
75608
 
75233
75609
  dom.removeClass(columnTool, 'active');
@@ -75235,7 +75611,7 @@ class ElementTool {
75235
75611
  } // Add spacer to empty subblock
75236
75612
 
75237
75613
 
75238
- const subblocks = document.querySelectorAll('.is-subblock');
75614
+ const subblocks = this.builder.doc.querySelectorAll('.is-subblock');
75239
75615
  Array.prototype.forEach.call(subblocks, subblock => {
75240
75616
  const rows = dom.elementChildren(subblock);
75241
75617
  let empty = true;
@@ -75302,9 +75678,12 @@ class ElementTool {
75302
75678
 
75303
75679
  if (elm.previousElementSibling) {
75304
75680
  this.builder.uo.saveForUndo();
75305
- elm.parentNode.insertBefore(elm, elm.previousElementSibling);
75306
- elm.click();
75307
- this.position(elm); //Trigger Change event
75681
+ elm.parentNode.insertBefore(elm, elm.previousElementSibling); // elm.click();
75682
+ // this.position(elm);
75683
+
75684
+ setTimeout(() => {
75685
+ this.position();
75686
+ }, 30); //Trigger Change event
75308
75687
 
75309
75688
  this.builder.opts.onChange();
75310
75689
  } else {
@@ -75317,9 +75696,12 @@ class ElementTool {
75317
75696
 
75318
75697
  if (element.previousElementSibling && element !== elm) {
75319
75698
  this.builder.uo.saveForUndo();
75320
- element.parentNode.insertBefore(element, element.previousElementSibling);
75321
- elm.click();
75322
- this.position(elm); //Trigger Change event
75699
+ element.parentNode.insertBefore(element, element.previousElementSibling); // elm.click();
75700
+ // this.position(elm);
75701
+
75702
+ setTimeout(() => {
75703
+ this.position();
75704
+ }, 30); //Trigger Change event
75323
75705
 
75324
75706
  this.builder.opts.onChange();
75325
75707
  }
@@ -75333,9 +75715,12 @@ class ElementTool {
75333
75715
 
75334
75716
  if (elm.nextElementSibling) {
75335
75717
  this.builder.uo.saveForUndo();
75336
- elm.parentNode.insertBefore(elm.nextElementSibling, elm);
75337
- elm.click();
75338
- this.position(elm); //Trigger Change event
75718
+ elm.parentNode.insertBefore(elm.nextElementSibling, elm); // elm.click();
75719
+ // this.position(elm);
75720
+
75721
+ setTimeout(() => {
75722
+ this.position();
75723
+ }, 30); //Trigger Change event
75339
75724
 
75340
75725
  this.builder.opts.onChange();
75341
75726
  } else {
@@ -75348,9 +75733,12 @@ class ElementTool {
75348
75733
 
75349
75734
  if (element.nextElementSibling && element !== elm) {
75350
75735
  this.builder.uo.saveForUndo();
75351
- element.parentNode.insertBefore(element.nextElementSibling, element);
75352
- elm.click();
75353
- this.position(elm); //Trigger Change event
75736
+ element.parentNode.insertBefore(element.nextElementSibling, element); // elm.click();
75737
+ // this.position(elm);
75738
+
75739
+ setTimeout(() => {
75740
+ this.position();
75741
+ }, 30); //Trigger Change event
75354
75742
 
75355
75743
  this.builder.opts.onChange();
75356
75744
  }
@@ -75383,29 +75771,27 @@ class ElementTool {
75383
75771
  // elementMore.style.display = '';
75384
75772
  util.hidePop(elementMore);
75385
75773
  this.elementPanel.showPanel();
75386
- });
75387
- document.addEventListener('mousedown', e => {
75388
- e = e || window.event;
75389
- var target = e.target || e.srcElement;
75390
-
75391
- if (elementMore.style.display === 'flex') {
75392
- let a = dom.parentsHasClass(target, 'elmmore');
75393
- let b = dom.parentsHasClass(target, 'elm-more');
75394
-
75395
- if (a || b) {
75396
- return;
75397
- } else {
75398
- // elementMore.style.display = '';
75399
- util.hidePop(elementMore);
75400
- }
75401
- }
75402
- });
75774
+ }); // document.addEventListener('mousedown', (e) => {
75775
+ // e = e || window.event;
75776
+ // var target = e.target || e.srcElement;
75777
+ // if(elementMore.style.display === 'flex') {
75778
+ // let a = dom.parentsHasClass(target, 'elmmore');
75779
+ // let b = dom.parentsHasClass(target, 'elm-more');
75780
+ // if(a||b) {
75781
+ // return;
75782
+ // }
75783
+ // else {
75784
+ // // elementMore.style.display = '';
75785
+ // util.hidePop(elementMore);
75786
+ // }
75787
+ // }
75788
+ // });
75403
75789
  }
75404
75790
 
75405
75791
  hide() {
75406
75792
  const dom = this.dom;
75407
75793
  this.elementTool.style.display = '';
75408
- let elms = document.querySelectorAll('.elm-active');
75794
+ let elms = this.builder.doc.querySelectorAll('.elm-active');
75409
75795
  Array.prototype.forEach.call(elms, elm => {
75410
75796
  dom.removeClass(elm, 'elm-active');
75411
75797
  });
@@ -75469,7 +75855,7 @@ class ElementTool {
75469
75855
  const elm = e.target;
75470
75856
  let elementTool = this.elementTool;
75471
75857
  elementTool.style.display = 'none';
75472
- let elms = document.querySelectorAll('.elm-active');
75858
+ let elms = this.builder.doc.querySelectorAll('.elm-active');
75473
75859
  Array.prototype.forEach.call(elms, elm => {
75474
75860
  dom.removeClass(elm, 'elm-active');
75475
75861
  });
@@ -77019,7 +77405,7 @@ class Rte {
77019
77405
  </div>
77020
77406
  </div>
77021
77407
  <label for="inpInsertImageSrc" style="margin:10px 0 5px;display:block;">${util.out('Or Specify Image Source')}:</label>
77022
- ${(this.builder.opts.onImageSelectClick + '').replace(/\s/g, '') !== 'function(){}' || this.builder.opts.imageselect !== '' ? `<div class="image-src clearfix" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"><button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button></div>` : `<div class="image-src clearfix" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"></div>`}
77408
+ ${(this.builder.opts.onImageSelectClick + '').replace(/\s/g, '') !== 'function(){}' || this.builder.opts.imageselect !== '' ? `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"><button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button></div>` : `<div class="image-src" style="margin-bottom: 12px;"><input id="inpInsertImageSrc" class="input-src" type="text" placeholder="${util.out('Source')}"></div>`}
77023
77409
  <div style="text-align:right">
77024
77410
  <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
77025
77411
  <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -77151,7 +77537,8 @@ class Rte {
77151
77537
  } else if (this.builder.opts.toolbar === 'right') {
77152
77538
  pop.style.top = top - h / 2 + 20 + 'px';
77153
77539
  pop.style.left = 'auto';
77154
- const viewportWidth = window.innerWidth;
77540
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77541
+
77155
77542
  pop.style.right = viewportWidth - left + 9 + 'px';
77156
77543
  } else {
77157
77544
  pop.style.top = top + 54 - 6 + 'px';
@@ -77187,7 +77574,8 @@ class Rte {
77187
77574
  } else if (this.builder.opts.toolbar === 'right') {
77188
77575
  pop.style.top = top - h / 2 + 20 + 'px';
77189
77576
  pop.style.left = 'auto';
77190
- const viewportWidth = window.innerWidth;
77577
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77578
+
77191
77579
  pop.style.right = viewportWidth - left + 9 + 'px';
77192
77580
  } else {
77193
77581
  pop.style.top = top + 54 - 6 + 'px';
@@ -77222,7 +77610,8 @@ class Rte {
77222
77610
  } else if (this.builder.opts.toolbar === 'right') {
77223
77611
  pop.style.top = top - h / 2 + 20 + 'px';
77224
77612
  pop.style.left = 'auto';
77225
- const viewportWidth = window.innerWidth;
77613
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77614
+
77226
77615
  pop.style.right = viewportWidth - left + 9 + 'px';
77227
77616
  } else {
77228
77617
  pop.style.top = top + 54 - 6 + 'px';
@@ -77307,7 +77696,8 @@ class Rte {
77307
77696
  } else if (this.builder.opts.toolbar === 'right') {
77308
77697
  pop.style.top = top - h / 2 + 20 + 'px';
77309
77698
  pop.style.left = 'auto';
77310
- const viewportWidth = window.innerWidth;
77699
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77700
+
77311
77701
  pop.style.right = viewportWidth - left + 9 + 'px';
77312
77702
  } else {
77313
77703
  pop.style.top = top + 54 - 6 + 'px';
@@ -77324,7 +77714,8 @@ class Rte {
77324
77714
  } else if (this.builder.opts.toolbar === 'right') {
77325
77715
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
77326
77716
  pop.style.left = 'auto';
77327
- const viewportWidth = window.innerWidth;
77717
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77718
+
77328
77719
  pop.style.right = viewportWidth - left + 9 + 'px';
77329
77720
  } else {
77330
77721
  pop.style.top = top + 54 - 6 + 'px';
@@ -77433,7 +77824,8 @@ class Rte {
77433
77824
  } else if (this.builder.opts.toolbar === 'right') {
77434
77825
  pop.style.top = top - h / 2 + 20 + 'px';
77435
77826
  pop.style.left = 'auto';
77436
- const viewportWidth = window.innerWidth;
77827
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77828
+
77437
77829
  pop.style.right = viewportWidth - left + 9 + 'px';
77438
77830
  } else {
77439
77831
  pop.style.top = top + 54 - 6 + 'px';
@@ -77450,7 +77842,8 @@ class Rte {
77450
77842
  } else if (this.builder.opts.toolbar === 'right') {
77451
77843
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
77452
77844
  pop.style.left = 'auto';
77453
- const viewportWidth = window.innerWidth;
77845
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77846
+
77454
77847
  pop.style.right = viewportWidth - left + 9 + 'px';
77455
77848
  } else {
77456
77849
  pop.style.top = top + 54 - 6 + 'px';
@@ -77509,7 +77902,8 @@ class Rte {
77509
77902
  } else if (this.builder.opts.toolbar === 'right') {
77510
77903
  pop.style.top = top - h / 2 + 20 + 'px';
77511
77904
  pop.style.left = 'auto';
77512
- const viewportWidth = window.innerWidth;
77905
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77906
+
77513
77907
  pop.style.right = viewportWidth - left + 9 + 'px';
77514
77908
  } else {
77515
77909
  pop.style.top = top + 54 - 6 + 'px';
@@ -77526,7 +77920,8 @@ class Rte {
77526
77920
  } else if (this.builder.opts.toolbar === 'right') {
77527
77921
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
77528
77922
  pop.style.left = 'auto';
77529
- const viewportWidth = window.innerWidth;
77923
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77924
+
77530
77925
  pop.style.right = viewportWidth - left + 9 + 'px';
77531
77926
  } else {
77532
77927
  pop.style.top = top + 54 - 6 + 'px';
@@ -77588,7 +77983,8 @@ class Rte {
77588
77983
  pop.style.top = this.rteTool.style.top; //(top - (h/2) + 20) + 'px';
77589
77984
 
77590
77985
  pop.style.left = 'auto';
77591
- const viewportWidth = window.innerWidth;
77986
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
77987
+
77592
77988
  pop.style.right = viewportWidth - left + 9 + 'px';
77593
77989
  } else {
77594
77990
  pop.style.top = top + 54 - 6 + 'px';
@@ -77816,7 +78212,8 @@ class Rte {
77816
78212
  } else if (this.builder.opts.toolbar === 'right') {
77817
78213
  pop.style.top = top - h / 2 + 20 + 'px';
77818
78214
  pop.style.left = 'auto';
77819
- const viewportWidth = window.innerWidth;
78215
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78216
+
77820
78217
  pop.style.right = viewportWidth - left + 9 + 'px';
77821
78218
  } else {
77822
78219
  pop.style.top = top + 54 - 6 + 'px';
@@ -77842,7 +78239,8 @@ class Rte {
77842
78239
  } else if (this.builder.opts.toolbar === 'right') {
77843
78240
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
77844
78241
  pop.style.left = 'auto';
77845
- const viewportWidth = window.innerWidth;
78242
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78243
+
77846
78244
  pop.style.right = viewportWidth - left + 9 + 'px';
77847
78245
  } else {
77848
78246
  pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px';
@@ -77859,7 +78257,8 @@ class Rte {
77859
78257
  } else if (this.builder.opts.toolbar === 'right') {
77860
78258
  pop.style.top = top - h / 2 + 20 + 'px';
77861
78259
  pop.style.left = 'auto';
77862
- const viewportWidth = window.innerWidth;
78260
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78261
+
77863
78262
  pop.style.right = viewportWidth - left + 9 + 'px';
77864
78263
  } else {
77865
78264
  pop.style.top = top + 54 - 6 + 'px';
@@ -77884,7 +78283,8 @@ class Rte {
77884
78283
  } else if (this.builder.opts.toolbar === 'right') {
77885
78284
  pop.style.top = parseInt(this.elementRteMoreOptions.style.top) + this.elementRteMoreOptions.offsetHeight - h + 'px';
77886
78285
  pop.style.left = 'auto';
77887
- const viewportWidth = window.innerWidth;
78286
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78287
+
77888
78288
  pop.style.right = viewportWidth - left + 9 + 'px';
77889
78289
  } else {
77890
78290
  pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px';
@@ -78081,6 +78481,82 @@ class Rte {
78081
78481
  const h = pop.offsetHeight;
78082
78482
 
78083
78483
  if (!dom.hasClass(pop, 'active')) {
78484
+ // Get realtime status
78485
+ const elm = this.builder.activeElement;
78486
+ let btns = pop.querySelectorAll('.rte-fontsize-options button');
78487
+ Array.prototype.forEach.call(btns, btn => {
78488
+ btn.classList.remove('on'); // clear selection
78489
+ });
78490
+ const arrSizes = this.builder.opts.fontSizeClassValues;
78491
+
78492
+ for (var i = 0; i <= arrSizes.length - 1; i++) {
78493
+ if (dom.hasClass(elm, 'size-' + arrSizes[i])) {
78494
+ // Get current class
78495
+ const btns = pop.querySelectorAll('.rte-fontsize-options button');
78496
+ Array.prototype.forEach.call(btns, btn => {
78497
+ let num = btn.getAttribute('data-value');
78498
+
78499
+ if (parseInt(num) === arrSizes[i]) {
78500
+ btn.classList.add('on');
78501
+ }
78502
+ });
78503
+ }
78504
+ }
78505
+
78506
+ btns = pop.querySelectorAll('.rte-lineheight-options button');
78507
+ Array.prototype.forEach.call(btns, btn => {
78508
+ btn.classList.remove('on'); // clear selection
78509
+ });
78510
+ let classes = this.builder.cssClasses.leading;
78511
+
78512
+ for (let i = 0; i < Object.keys(classes).length; i++) {
78513
+ let className = Object.values(classes)[i];
78514
+
78515
+ if (dom.hasClass(elm, className)) {
78516
+ const btns = pop.querySelectorAll('.rte-lineheight-options button');
78517
+ Array.prototype.forEach.call(btns, btn => {
78518
+ let num = btn.getAttribute('data-value');
78519
+ let val;
78520
+ if (className === classes.leading_10) val = '1';
78521
+ if (className === classes.leading_12) val = '1.2';
78522
+ if (className === classes.leading_14) val = '1.4';
78523
+ if (className === classes.leading_16) val = '1.6';
78524
+ if (className === classes.leading_18) val = '1.8';
78525
+ if (className === classes.leading_20) val = '2';
78526
+ if (className === classes.leading_22) val = '2.2';
78527
+
78528
+ if (num === val) {
78529
+ btn.classList.add('on');
78530
+ }
78531
+ });
78532
+ }
78533
+ }
78534
+
78535
+ btns = pop.querySelectorAll('.rte-letterspacing-options button');
78536
+ Array.prototype.forEach.call(btns, btn => {
78537
+ btn.classList.remove('on'); // clear selection
78538
+ });
78539
+ classes = this.builder.cssClasses.tracking;
78540
+
78541
+ for (let i = 0; i < Object.keys(classes).length; i++) {
78542
+ let className = Object.values(classes)[i];
78543
+
78544
+ if (dom.hasClass(elm, className)) {
78545
+ const btns = pop.querySelectorAll('.rte-letterspacing-options button');
78546
+ Array.prototype.forEach.call(btns, btn => {
78547
+ let num = btn.getAttribute('data-value');
78548
+ let val;
78549
+ if (className === classes.tracking_025) val = '1';
78550
+ if (className === classes.tracking_050) val = '2';
78551
+
78552
+ if (num === val) {
78553
+ btn.classList.add('on');
78554
+ }
78555
+ });
78556
+ }
78557
+ } // /Get realtime status
78558
+
78559
+
78084
78560
  this.util.showRtePop(pop, () => {
78085
78561
  if (this.builder.opts.toolbar === 'left') {
78086
78562
  pop.style.top = top - h / 2 + 20 + 'px';
@@ -78089,7 +78565,8 @@ class Rte {
78089
78565
  } else if (this.builder.opts.toolbar === 'right') {
78090
78566
  pop.style.top = top - h / 2 + 20 + 'px';
78091
78567
  pop.style.left = 'auto';
78092
- const viewportWidth = window.innerWidth;
78568
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78569
+
78093
78570
  pop.style.right = viewportWidth - left + 9 + 'px';
78094
78571
  } else {
78095
78572
  pop.style.top = top + 54 - 6 + 'px';
@@ -78106,7 +78583,8 @@ class Rte {
78106
78583
  } else if (this.builder.opts.toolbar === 'right') {
78107
78584
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
78108
78585
  pop.style.left = 'auto';
78109
- const viewportWidth = window.innerWidth;
78586
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
78587
+
78110
78588
  pop.style.right = viewportWidth - left + 9 + 'px';
78111
78589
  } else {
78112
78590
  pop.style.top = top + 54 - 6 + 'px';
@@ -78847,6 +79325,10 @@ class Rte {
78847
79325
  currentFontSize = Number(window.getComputedStyle(container).getPropertyValue('font-size').match(/\d+/)[0]);
78848
79326
  }
78849
79327
 
79328
+ const btns = rteTextSettingOptions.querySelectorAll('.rte-fontsize-options button');
79329
+ Array.prototype.forEach.call(btns, btn => {
79330
+ btn.classList.remove('on'); // clear selection
79331
+ });
78850
79332
  dom.execCommand('font-size', currentFontSize + 1 + 'px', (ok, container) => {
78851
79333
  // 1px is dummy so that it won't be cleaned in util.js (checkStyleIfSameAsParent) because of same size
78852
79334
  if (!ok) {
@@ -78892,6 +79374,10 @@ class Rte {
78892
79374
  util.restoreSelection(); //a must
78893
79375
 
78894
79376
  this.builder.uo.saveForUndo();
79377
+ const btns = rteTextSettingOptions.querySelectorAll('.rte-lineheight-options button');
79378
+ Array.prototype.forEach.call(btns, btn => {
79379
+ btn.classList.remove('on'); // clear selection
79380
+ });
78895
79381
 
78896
79382
  if (this.builder.useCssClasses) {
78897
79383
  const selection = dom.getSelection();
@@ -79073,6 +79559,10 @@ class Rte {
79073
79559
  util.restoreSelection(); //a must
79074
79560
 
79075
79561
  this.builder.uo.saveForUndo();
79562
+ const btns = rteTextSettingOptions.querySelectorAll('.rte-letterspacing-options button');
79563
+ Array.prototype.forEach.call(btns, btn => {
79564
+ btn.classList.remove('on'); // clear selection
79565
+ });
79076
79566
 
79077
79567
  if (this.builder.useCssClasses) {
79078
79568
  const selection = dom.getSelection();
@@ -79303,7 +79793,7 @@ class Rte {
79303
79793
  // } else if(this.builder.opts.toolbar === 'right') {
79304
79794
  // pop.style.top = (parseInt(this.rteTool.style.top) + this.rteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
79305
79795
  // pop.style.left = 'auto';
79306
- // const viewportWidth = window.innerWidth;
79796
+ // const viewportWidth = document.body.clientWidth;//window.innerWidth;
79307
79797
  // pop.style.right = (viewportWidth - left + 9) + 'px';
79308
79798
  // } else {
79309
79799
  // pop.style.top = (top + 54 - 6) + 'px';
@@ -79339,7 +79829,8 @@ class Rte {
79339
79829
  } else if (this.builder.opts.toolbar === 'right') {
79340
79830
  pop.style.top = top - h / 2 + 20 + 'px';
79341
79831
  pop.style.left = 'auto';
79342
- const viewportWidth = window.innerWidth;
79832
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
79833
+
79343
79834
  pop.style.right = viewportWidth - left + 9 + 'px';
79344
79835
  } else {
79345
79836
  pop.style.top = top + 54 - 6 + 'px';
@@ -79365,7 +79856,8 @@ class Rte {
79365
79856
  } else if (this.builder.opts.toolbar === 'right') {
79366
79857
  pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
79367
79858
  pop.style.left = 'auto';
79368
- const viewportWidth = window.innerWidth;
79859
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
79860
+
79369
79861
  pop.style.right = viewportWidth - left + 9 + 'px';
79370
79862
  } else {
79371
79863
  pop.style.top = top + 54 - 6 + 'px';
@@ -79430,7 +79922,8 @@ class Rte {
79430
79922
  pop.style.top = parseFloat(this.rteTool.style.top) + this.rteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
79431
79923
 
79432
79924
  pop.style.left = 'auto';
79433
- const viewportWidth = window.innerWidth;
79925
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
79926
+
79434
79927
  pop.style.right = viewportWidth - left + 9 + 'px';
79435
79928
  } else {
79436
79929
  const adj = 0;
@@ -79455,7 +79948,7 @@ class Rte {
79455
79948
  // } else if(this.builder.opts.toolbar === 'right') {
79456
79949
  // pop.style.top = (parseInt(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
79457
79950
  // pop.style.left = 'auto';
79458
- // const viewportWidth = window.innerWidth;
79951
+ // const viewportWidth = document.body.clientWidth;//window.innerWidth;
79459
79952
  // pop.style.right = (viewportWidth - left + 9) + 'px';
79460
79953
  // } else {
79461
79954
  // pop.style.top = (top + 54 - 6) + 'px';
@@ -79504,7 +79997,8 @@ class Rte {
79504
79997
  pop.style.top = parseFloat(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
79505
79998
 
79506
79999
  pop.style.left = 'auto';
79507
- const viewportWidth = window.innerWidth;
80000
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
80001
+
79508
80002
  pop.style.right = viewportWidth - left + 9 + 'px';
79509
80003
  } else {
79510
80004
  const adj = 0;
@@ -81335,7 +81829,8 @@ class Rte {
81335
81829
  }
81336
81830
 
81337
81831
  positionToolbar() {
81338
- const viewportWidth = window.innerWidth;
81832
+ const viewportWidth = document.body.clientWidth; //window.innerWidth;
81833
+
81339
81834
  const viewportHeight = window.innerHeight;
81340
81835
 
81341
81836
  if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
@@ -81777,7 +82272,7 @@ class Lightbox {
81777
82272
 
81778
82273
  this.id = this.makeid();
81779
82274
  let html = `
81780
- <div class="is-lightbox lightbox-externalvideo" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82275
+ <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81781
82276
  <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
81782
82277
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81783
82278
  </button>
@@ -81787,13 +82282,13 @@ class Lightbox {
81787
82282
  </div>
81788
82283
  </div>
81789
82284
  </div>
81790
- <div class="is-lightbox lightbox-video light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82285
+ <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81791
82286
  <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
81792
82287
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81793
82288
  </button>
81794
82289
  <div class="lightbox-content" style="width:100%;"></div>
81795
82290
  </div>
81796
- <div class="is-lightbox lightbox-image light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82291
+ <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81797
82292
  <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
81798
82293
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81799
82294
  </button>
@@ -81822,6 +82317,8 @@ class Lightbox {
81822
82317
  iframe.setAttribute('src', 'about:blank');
81823
82318
  }
81824
82319
 
82320
+ const div = lightbox.querySelector('.lightbox-content');
82321
+ if (lightbox.querySelector('video')) div.innerHTML = '';
81825
82322
  lightbox.style.display = '';
81826
82323
  this.builder.preserveSelection = false;
81827
82324
  if (this.elmFocus) this.elmFocus.focus();
@@ -81830,6 +82327,7 @@ class Lightbox {
81830
82327
 
81831
82328
  const handleItemKeyDown = e => {
81832
82329
  e.preventDefault();
82330
+ e.stopImmediatePropagation();
81833
82331
 
81834
82332
  if (e.keyCode === 27) {
81835
82333
  // escape key
@@ -81842,18 +82340,23 @@ class Lightbox {
81842
82340
  }
81843
82341
  };
81844
82342
 
81845
- const lightboxes = this.builderStuff.querySelectorAll('div.is-lightbox');
82343
+ const lightboxes = this.builderStuff.querySelectorAll('.lightbox-externalvideo-edit,.lightbox-video-edit,.lightbox-image-edit');
81846
82344
  lightboxes.forEach(lightbox => {
81847
82345
  lightbox.addEventListener('keydown', handleItemKeyDown);
81848
82346
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81849
- btnClose.addEventListener('click', () => {
82347
+ btnClose.addEventListener('click', e => {
81850
82348
  close();
82349
+ e.preventDefault();
82350
+ e.stopImmediatePropagation();
81851
82351
  });
81852
82352
  btnClose.addEventListener('keydown', e => {
81853
82353
  if (e.keyCode === 13 || e.keyCode === 32) {
81854
82354
  // enter or spacebar key
81855
82355
  close();
81856
82356
  }
82357
+
82358
+ e.preventDefault();
82359
+ e.stopImmediatePropagation();
81857
82360
  });
81858
82361
  }); // this.init();
81859
82362
  } //constructor
@@ -81914,17 +82417,17 @@ class Lightbox {
81914
82417
  const dom = this.dom;
81915
82418
  if (document.activeElement) this.elmFocus = document.activeElement;
81916
82419
  this.builder.preserveSelection = true;
81917
- let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image'); // in case opened in an iframe (ex. preview)
82420
+ let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image-edit'); // in case opened in an iframe (ex. preview)
81918
82421
 
81919
82422
  if (window.frameElement && !lightbox) {
81920
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-image');
82423
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-image-edit');
81921
82424
  }
81922
82425
 
81923
82426
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81924
82427
  btnClose.style.opacity = 0;
81925
82428
  if (color) lightbox.style.backgroundColor = color;
81926
82429
  const div = lightbox.querySelector('.lightbox-content');
81927
- div.innerHTML = '<img src=' + url + '>';
82430
+ div.innerHTML = `<img src="${url}">`;
81928
82431
 
81929
82432
  if (theme === 'light') {
81930
82433
  dom.addClass(lightbox, 'light');
@@ -81951,17 +82454,19 @@ class Lightbox {
81951
82454
  const dom = this.dom;
81952
82455
  if (document.activeElement) this.elmFocus = document.activeElement;
81953
82456
  this.builder.preserveSelection = true;
81954
- let lightbox = document.querySelector('.is-lightbox.lightbox-video'); // in case opened in an iframe (ex. preview)
82457
+ let lightbox = document.querySelector('.is-lightbox.lightbox-video-edit'); // in case opened in an iframe (ex. preview)
81955
82458
 
81956
82459
  if (window.frameElement && !lightbox) {
81957
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-video');
82460
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-video-edit');
81958
82461
  }
81959
82462
 
81960
82463
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81961
82464
  btnClose.style.opacity = 0;
81962
82465
  if (color) lightbox.style.backgroundColor = color;
81963
82466
  const div = lightbox.querySelector('.lightbox-content');
81964
- div.innerHTML = '<video class="is-video-bg" playsinline controls autoplay width="100%">' + '<source src="' + url + '" type="video/mp4">' + '</video>';
82467
+ div.innerHTML = `<video class="is-video-bg" playsinline controls autoplay width="100%">
82468
+ <source src="${url}" type="video/mp4">
82469
+ </video>`;
81965
82470
 
81966
82471
  if (theme === 'light') {
81967
82472
  dom.addClass(lightbox, 'light');
@@ -81988,10 +82493,10 @@ class Lightbox {
81988
82493
  const dom = this.dom;
81989
82494
  if (document.activeElement) this.elmFocus = document.activeElement;
81990
82495
  this.builder.preserveSelection = true;
81991
- let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo'); // in case opened in an iframe (ex. preview)
82496
+ let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo-edit'); // in case opened in an iframe (ex. preview)
81992
82497
 
81993
82498
  if (window.frameElement && !lightbox) {
81994
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo');
82499
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo-edit');
81995
82500
  }
81996
82501
 
81997
82502
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
@@ -82668,11 +83173,12 @@ class Resizeable {
82668
83173
  }
82669
83174
 
82670
83175
  class Resize {
82671
- constructor(element, opts = {}) {
83176
+ constructor(element, builder, opts = {}) {
82672
83177
  let defaults = {
82673
83178
  filterSiblingClass: 'is-row-tool'
82674
83179
  };
82675
83180
  this.opts = Object.assign(this, defaults, opts);
83181
+ this.builder = builder;
82676
83182
  this.element = element;
82677
83183
  }
82678
83184
 
@@ -82682,6 +83188,8 @@ class Resize {
82682
83188
  this.resize = new Resizeable({
82683
83189
  pane: col,
82684
83190
  onResize: (width, height) => {
83191
+ this.builder.util.hideControls();
83192
+
82685
83193
  if (width) {
82686
83194
  col.style.flex = 'none';
82687
83195
  col.style.width = `${width}px`; // adjust others
@@ -82709,8 +83217,9 @@ class Resize {
82709
83217
  if (item.classList.contains('is-row-tool')) return;
82710
83218
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82711
83219
 
82712
- if (item === col) return;
82713
- item.style.width = '100%';
83220
+ if (item === col) return; // item.style.width = '100%';
83221
+
83222
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82714
83223
  item.style.flex = '';
82715
83224
  numOfCols++;
82716
83225
  });
@@ -82727,7 +83236,8 @@ class Resize {
82727
83236
  if (item === col) return;
82728
83237
 
82729
83238
  if (item.style.width === '') {
82730
- item.style.width = '100%';
83239
+ // item.style.width = '100%';
83240
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82731
83241
  item.style.flex = '';
82732
83242
  }
82733
83243
  });
@@ -82769,8 +83279,9 @@ class Resize {
82769
83279
  if (item.classList.contains('is-row-tool')) return;
82770
83280
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82771
83281
 
82772
- if (item === col) return;
82773
- item.style.width = '100%';
83282
+ if (item === col) return; // item.style.width = '100%';
83283
+
83284
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82774
83285
  item.style.flex = '';
82775
83286
  });
82776
83287
  } // /adjust others
@@ -82782,6 +83293,10 @@ class Resize {
82782
83293
  Array.from(col.parentNode.children).map(item => {
82783
83294
  if (item.classList.contains('is-row-tool')) return;
82784
83295
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
83296
+ // // Refresh Module
83297
+ // if(item.getAttribute('data-module')) {
83298
+ // this.builder.util.refreshModuleLayout(item);
83299
+ // }
82785
83300
 
82786
83301
  if (item === col) {
82787
83302
  activeColumnWidth = item.offsetWidth;
@@ -82795,7 +83310,19 @@ class Resize {
82795
83310
  percentage = maxResult / row.offsetWidth * 100;
82796
83311
  }
82797
83312
 
82798
- col.style.width = percentage + '%';
83313
+ col.style.width = percentage + '%'; // Refresh Module
83314
+
83315
+ Array.from(col.parentNode.children).map(item => {
83316
+ if (item.classList.contains('is-row-tool')) return;
83317
+ if (item.classList.contains('is-rowadd-tool')) return;
83318
+
83319
+ if (item.getAttribute('data-module')) {
83320
+ let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
83321
+ item.style.width = moduleWidth + '%';
83322
+ item.style.flex = 'none';
83323
+ this.builder.util.refreshModuleLayout(item);
83324
+ }
83325
+ });
82799
83326
  }
82800
83327
 
82801
83328
  if (col.style.height) {
@@ -82806,10 +83333,15 @@ class Resize {
82806
83333
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82807
83334
 
82808
83335
  if (item === col) return;
82809
- item.style.height = '100%';
83336
+ item.style.height = '';
82810
83337
  item.style.minHeight = '';
82811
83338
  });
82812
- }
83339
+ } // To position columnTool correctly, add delay.
83340
+
83341
+
83342
+ setTimeout(() => {
83343
+ col.click();
83344
+ }, 30);
82813
83345
  }
82814
83346
  });
82815
83347
  }
@@ -82820,7 +83352,7 @@ class Resize {
82820
83352
 
82821
83353
  }
82822
83354
 
82823
- class ContentStuff {
83355
+ class ContentStuff$1 {
82824
83356
  constructor(builder) {
82825
83357
  this.builder = builder;
82826
83358
  const util = builder.util;
@@ -83025,19 +83557,6 @@ class ContentStuff {
83025
83557
  outline:none;
83026
83558
  }
83027
83559
 
83028
- .clearfix:before,
83029
- .clearfix:after {
83030
- content: " ";
83031
- display: table;
83032
- }
83033
- .clearfix:after {
83034
- clear:both;
83035
- }
83036
- .clearfix {
83037
- *zoom: 1;
83038
- clear:none;
83039
- }
83040
-
83041
83560
  .transition1 {
83042
83561
  transition: all ease 0.1s;
83043
83562
  }
@@ -83358,6 +83877,9 @@ class ContentStuff {
83358
83877
  .is-tool.is-column-tool button {
83359
83878
  width: 25px;
83360
83879
  height: 25px;
83880
+ display: flex;
83881
+ justify-content: center;
83882
+ align-items: center;
83361
83883
  }
83362
83884
  .is-tool.is-column-tool .cell-add {background: #0fcc52;}
83363
83885
  .is-tool.is-column-tool .cell-more {background: rgba(216, 200, 6, 0.9);}
@@ -83380,6 +83902,9 @@ class ContentStuff {
83380
83902
  .is-tool.is-row-tool button {
83381
83903
  width: 25px;
83382
83904
  height: 25px;
83905
+ display: flex;
83906
+ justify-content: center;
83907
+ align-items: center;
83383
83908
  }
83384
83909
  .is-tool.is-row-tool svg {
83385
83910
  fill: #fff;
@@ -83730,7 +84255,6 @@ class ContentStuff {
83730
84255
 
83731
84256
 
83732
84257
 
83733
-
83734
84258
  .is-builder.builder-active > div:not(.row-active) {
83735
84259
  border-right: 120px rgba(0,0,0,0) solid;
83736
84260
  margin-right: -120px;
@@ -83739,6 +84263,42 @@ class ContentStuff {
83739
84263
  border-left: 120px rgba(0,0,0,0) solid;
83740
84264
  margin-left: -120px;
83741
84265
  }
84266
+
84267
+
84268
+
84269
+
84270
+ /* Prevent css framework overide (Materialize) */
84271
+ .is-ui [type="checkbox"]:not(:checked), .is-ui [type="checkbox"]:checked {
84272
+ position: unset !important;
84273
+ }
84274
+ .is-ui input[type=range] {
84275
+ border: none;
84276
+ }
84277
+ .is-ui form {
84278
+ background: unset;
84279
+ margin: unset;
84280
+ padding: unset;
84281
+ border: unset;
84282
+ }
84283
+ .is-ui svg {
84284
+ max-width: unset;
84285
+ }
84286
+
84287
+ /* Prevent css framework overide (Tailwind) */
84288
+ .is-ui svg {
84289
+ display: initial !important;
84290
+ }
84291
+ .is-section-tool svg,
84292
+ .is-row-tool svg {
84293
+ display: initial !important;
84294
+ }
84295
+
84296
+ /* Make slider block resizable */
84297
+ .is-builder > div > div[data-module=slider-builder].cell-active {
84298
+ padding: 0 2px 4px !important;
84299
+ z-index: 1 !important;
84300
+ }
84301
+
83742
84302
  `;
83743
84303
  builder.contentStuff.insertAdjacentHTML('afterbegin', `
83744
84304
  <style>
@@ -84286,7 +84846,7 @@ class ContentBuilder {
84286
84846
  },
84287
84847
  useCssClasses: true,
84288
84848
  useButtonPlugin: false,
84289
- enableDragResize: false
84849
+ enableDragResize: true
84290
84850
  }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
84291
84851
 
84292
84852
  this.opts = Object.assign(this, defaults, opts);
@@ -84397,7 +84957,8 @@ class ContentBuilder {
84397
84957
  if (this.opts.row !== '' && this.opts.cols.length > 0) ; else {
84398
84958
  if (this.opts.cellFormat === '' && this.opts.rowFormat === '') {
84399
84959
  // DEFAULT: Built-in simple css grid
84400
- this.opts.row = 'row clearfix';
84960
+ this.opts.row = 'row'; //row clrfx
84961
+
84401
84962
  this.opts.cols = ['column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
84402
84963
  this.opts.colequal = [['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
84403
84964
  this.opts.colsizes = [//needed for columns in which the size increment is not constant.
@@ -84441,7 +85002,7 @@ class ContentBuilder {
84441
85002
  }
84442
85003
 
84443
85004
  this.contentStuff = contentStuff;
84444
- this.stuff = new ContentStuff(this);
85005
+ this.stuff = new ContentStuff$1(this);
84445
85006
  }
84446
85007
 
84447
85008
  this.isTouchSupport = util.isTouchSupport();
@@ -84648,8 +85209,8 @@ class ContentBuilder {
84648
85209
 
84649
85210
  if (!(b || j || m || n || target.tagName.toLowerCase() === 'img')) {
84650
85211
  let imageTool = document.querySelector('#divImageTool');
84651
- imageTool.style.display = '';
84652
- this.activeImage = null;
85212
+ imageTool.style.display = ''; // this.activeImage = null; // Commented => Additional (to prevent lost focus)
85213
+
84653
85214
  let imageResizer = document.querySelector('#divImageResizer');
84654
85215
  imageResizer.style.display = 'none'; // moveable
84655
85216
 
@@ -84667,8 +85228,11 @@ class ContentBuilder {
84667
85228
  if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
84668
85229
  // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
84669
85230
  if (!this.dom.getSelected()) {
84670
- util.clearActiveCell();
84671
- util.clearControls();
85231
+ if (!document.querySelector('.is-modal.active')) {
85232
+ // Additional (to prevent lost focus)
85233
+ util.clearActiveCell();
85234
+ util.clearControls();
85235
+ }
84672
85236
  }
84673
85237
  } // Button Modal
84674
85238
 
@@ -84735,8 +85299,8 @@ class ContentBuilder {
84735
85299
  }); // Convenience variable for outside access, for example, from snippet dialog (assets/minimalist-blocks/snippets.html))
84736
85300
 
84737
85301
  window._cb = this;
84738
- window.applyLargerImage = this.applyLargerImage;
84739
- window.returnUrl = this.returnUrl; // same as applyLargerImage (NEW)
85302
+ window.applyLargerImage = this.applyLargerImage.bind(this);
85303
+ window.returnUrl = this.returnUrl.bind(this); // same as applyLargerImage (NEW)
84740
85304
 
84741
85305
  window.selectFile = this.selectFile.bind(this);
84742
85306
  window.selectImage = this.selectImage.bind(this);
@@ -85073,7 +85637,7 @@ class ContentBuilder {
85073
85637
  var noedit = result[0].noedit;
85074
85638
  var bSnippet;
85075
85639
 
85076
- if (html.indexOf('row clearfix') === -1) {
85640
+ if (html.indexOf('"row') === -1) {
85077
85641
  bSnippet = true; // Just snippet (without row/column grid)
85078
85642
  } else {
85079
85643
  bSnippet = false; // Snippet is wrapped in row/colum
@@ -85086,7 +85650,10 @@ class ContentBuilder {
85086
85650
  var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
85087
85651
 
85088
85652
  if (rowClass !== '' && colClass.length === 12) {
85089
- html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
85653
+ // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
85654
+ html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
85655
+
85656
+ html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
85090
85657
  html = html.replace(new RegExp('column full', 'g'), colClass[11]);
85091
85658
  html = html.replace(new RegExp('column half', 'g'), colClass[5]);
85092
85659
  html = html.replace(new RegExp('column third', 'g'), colClass[3]);
@@ -85406,7 +85973,8 @@ class ContentBuilder {
85406
85973
  }
85407
85974
 
85408
85975
  selectAsset(s) {
85409
- let extension = s.split('.').pop();
85976
+ let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
85977
+
85410
85978
  extension = extension.toLowerCase();
85411
85979
  let ok = false;
85412
85980
 
@@ -86301,7 +86869,7 @@ class ContentBuilder {
86301
86869
 
86302
86870
  if (elm.getAttribute('data-modal-url')) {
86303
86871
  url = elm.getAttribute('data-modal-url');
86304
- let extension = url.split('.').pop();
86872
+ let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
86305
86873
 
86306
86874
  if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
86307
86875
  this.lightbox.openImage(url, theme, color);
@@ -86352,6 +86920,7 @@ class ContentBuilder {
86352
86920
  }
86353
86921
 
86354
86922
  handleCellClick(col, e) {
86923
+ if (this.cleanEditing) col.parentNode.querySelector('.is-row-tool').style.display = '';
86355
86924
  this.lightboxOpen(col);
86356
86925
  const util = this.util;
86357
86926
  util.clearActiveCell();
@@ -86366,6 +86935,7 @@ class ContentBuilder {
86366
86935
  this.dom.removeClass(builder, 'builder-active');
86367
86936
  });
86368
86937
  this.dom.addClass(row.parentNode, 'builder-active');
86938
+ this.dom.addClass(this.doc.body, 'content-edit');
86369
86939
 
86370
86940
  if (row.childElementCount - 2 === 1) ; else {
86371
86941
  this.dom.addClass(row, 'row-outline');
@@ -86416,7 +86986,8 @@ class ContentBuilder {
86416
86986
  return false;
86417
86987
  }
86418
86988
 
86419
- let extension = url.split('.').pop();
86989
+ let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
86990
+
86420
86991
  let theme = link.getAttribute('data-modal-theme');
86421
86992
  if (!theme) theme = 'light';
86422
86993
  const color = elm.getAttribute('data-modal-color');
@@ -86483,7 +87054,7 @@ class ContentBuilder {
86483
87054
  } // Show Lock Indicator
86484
87055
 
86485
87056
 
86486
- this.colTool.showHideLockIndicator(col); // Check if last row, make sure the Row Add Tool visible
87057
+ this.colTool.showHideLockIndicator(col); // Extra: Check if last row, make sure the Row Add Tool visible
86487
87058
 
86488
87059
  const tool = row.querySelector('.is-rowadd-tool');
86489
87060
  const tollAddButton = tool.querySelector('button');
@@ -86496,14 +87067,17 @@ class ContentBuilder {
86496
87067
  let lastChild = children[children.length - 1];
86497
87068
 
86498
87069
  if (row === lastChild) {
86499
- const section = row.parentNode.parentNode;
86500
- const sectionOffset = this.dom.getElementOffset(section);
86501
- let h1 = sectionOffset.top + sectionOffset.height;
86502
- const rowOffset = this.dom.getElementOffset(row);
86503
- let h2 = rowOffset.top + rowOffset.height;
87070
+ const section = row.closest('.is-section');
86504
87071
 
86505
- if (h1 - h2 < 19) {
86506
- tollAddButton.style.marginTop = '-14px';
87072
+ if (section) {
87073
+ const sectionOffset = this.dom.getElementOffset(section);
87074
+ let h1 = sectionOffset.top + sectionOffset.height;
87075
+ const rowOffset = this.dom.getElementOffset(row);
87076
+ let h2 = rowOffset.top + rowOffset.height;
87077
+
87078
+ if (h1 - h2 < 19) {
87079
+ tollAddButton.style.marginTop = '-14px';
87080
+ }
86507
87081
  }
86508
87082
  }
86509
87083
  }
@@ -86515,7 +87089,7 @@ class ContentBuilder {
86515
87089
  } // Enable resizable on click
86516
87090
 
86517
87091
 
86518
- this.resize = new Resize(col);
87092
+ this.resize = new Resize(col, this);
86519
87093
  this.resize.enable();
86520
87094
  }
86521
87095
  }
@@ -86865,6 +87439,11 @@ class ContentBuilder {
86865
87439
  e.preventDefault();
86866
87440
  }
86867
87441
  }
87442
+
87443
+ if (this.cleanEditing) {
87444
+ this.colTool.columnTool.classList.remove('active');
87445
+ col.parentNode.querySelector('.is-row-tool').style.display = 'none';
87446
+ }
86868
87447
  }
86869
87448
 
86870
87449
  createRange(node, chars, range) {
@@ -86995,12 +87574,12 @@ class ContentBuilder {
86995
87574
  var el; // var curr;
86996
87575
 
86997
87576
  try {
86998
- if (window.getSelection) {
87577
+ if (this.win.getSelection) {
86999
87578
  // curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
87000
- el = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
87001
- } else if (document.selection) {
87002
- // curr = document.selection.createRange();
87003
- el = document.selection.createRange().parentElement();
87579
+ el = this.win.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
87580
+ } else if (this.doc.selection) {
87581
+ // curr = this.doc.selection.createRange();
87582
+ el = this.doc.selection.createRange().parentElement();
87004
87583
  }
87005
87584
  } catch (e) {
87006
87585
  return;
@@ -87017,16 +87596,16 @@ class ContentBuilder {
87017
87596
  //Without this, pressing ENTER at the end of list will returns <p> on Chrome but then it become <div> (On Opera it returns <div>)
87018
87597
  //With this, we change it into <p>
87019
87598
  if(el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div') {
87020
- document.execCommand('formatBlock', false, '<p>');
87599
+ this.doc.execCommand('formatBlock', false, '<p>');
87021
87600
  }
87022
87601
  }*/
87023
87602
  if (el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div') {
87024
- document.execCommand('formatBlock', false, '<p>');
87603
+ this.doc.execCommand('formatBlock', false, '<p>');
87025
87604
  }
87026
87605
  /*
87027
87606
  if(isFirefox) {
87028
87607
  //On FF (when enter at the end of list) jQuery(curr).html() returns undefined
87029
- if(curr) document.execCommand('formatBlock', false, '<p>');
87608
+ if(curr) this.doc.execCommand('formatBlock', false, '<p>');
87030
87609
  }*/
87031
87610
 
87032
87611
 
@@ -88591,12 +89170,174 @@ var pace = {exports: {}};
88591
89170
 
88592
89171
  var Pace = pace.exports;
88593
89172
 
89173
+ class ContentStuff {
89174
+ constructor(builder) {
89175
+ this.builder = builder; // const util = builder.util;
89176
+
89177
+ const html = `
89178
+ <iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
89179
+ `;
89180
+ builder.contentStuff.insertAdjacentHTML('afterbegin', html);
89181
+ let css = `
89182
+ .is-box-tool {
89183
+ display: none;
89184
+ z-index: 1;
89185
+ position: absolute;
89186
+ top: auto;
89187
+ bottom: 0;
89188
+ left: calc(50% - 80px);
89189
+ right: auto;
89190
+ box-sizing: border-box;
89191
+ line-height: 30px;
89192
+ outline: none;
89193
+ text-align: center;
89194
+ cursor: pointer;
89195
+ border-radius: 0px;
89196
+ overflow: hidden;
89197
+ }
89198
+ .is-box-tool button {
89199
+ width: 40px !important;
89200
+ height: 40px !important;
89201
+ cursor: pointer;
89202
+ }
89203
+ .is-box-tool button svg {
89204
+ fill: #fff !important;
89205
+ }
89206
+ .is-box-tool button.is-box-edit {
89207
+ background: rgb(0, 172, 214);
89208
+ }
89209
+ .is-box-tool button.is-module-edit {
89210
+ background: #FF9800;
89211
+ }
89212
+
89213
+ .is-section-tool {
89214
+ display: none;
89215
+ z-index: 1;
89216
+ position: absolute;
89217
+ top: 15%;
89218
+ right: 0px;
89219
+ left: auto;
89220
+ width: 40px;
89221
+ height: 80px;
89222
+ }
89223
+ .is-section-tool > button {
89224
+ width: 40px;
89225
+ height: 40px;
89226
+ border-radius: 0;
89227
+ line-height: 40px;
89228
+ padding: 0px;
89229
+ font-size: 13px;
89230
+ cursor: pointer;
89231
+ border: none;
89232
+ }
89233
+ .is-section-tool .is-section-edit {
89234
+ background: rgb(0, 172, 214);
89235
+ }
89236
+ .is-section-tool .is-section-edit svg {
89237
+ fill: #fff !important;
89238
+ }
89239
+ .is-section-tool .is-section-remove {
89240
+ background: rgb(247, 99, 46);
89241
+ color: #fff !important;
89242
+ }
89243
+
89244
+ .is-wrapper {
89245
+ opacity: 0.01;
89246
+ /* setting display=none makes initial script may not work properly */
89247
+ transform-origin: top;
89248
+ }
89249
+
89250
+ .box-active {
89251
+ animation-name: box-active-anim;
89252
+ animation-duration: 1s;
89253
+ }
89254
+
89255
+ @keyframes box-active-anim {
89256
+ 0% {
89257
+ transform: scale(1);
89258
+ }
89259
+ 50% {
89260
+ transform: scale(0.95);
89261
+ }
89262
+ 100% {
89263
+ transform: scale(1);
89264
+ }
89265
+ }
89266
+
89267
+ .section-active {
89268
+ animation-name: section-active-anim;
89269
+ animation-duration: 1s;
89270
+ }
89271
+
89272
+ @keyframes section-active-anim {
89273
+ 0% {transform:scale(1);}
89274
+ 50% {transform:scale(0.95);}
89275
+ 100% {transform:scale(1);}
89276
+ }
89277
+
89278
+ .box-hover {
89279
+ outline: 1px solid #00da89;
89280
+ outline-offset: -1px;
89281
+ }
89282
+ .is-section:not(.box-space) .box-hover .is-overlay,
89283
+ .is-section:not(.box-space).box-hover .is-overlay {
89284
+ top: 1px;
89285
+ bottom: 1px;
89286
+ left: 1px;
89287
+ right: 1px;
89288
+ }
89289
+
89290
+ .box-active .is-container {
89291
+ border: rgba(0,0,0,0.1) 1px solid;
89292
+ }
89293
+
89294
+ .box-active {
89295
+ outline: 1px solid #00da89;
89296
+ outline-offset: -1px;
89297
+ }
89298
+ .is-section:not(.box-space) .box-active .is-overlay,
89299
+ .is-section:not(.box-space).box-active .is-overlay {
89300
+ top: 1px;
89301
+ bottom: 1px;
89302
+ left: 1px;
89303
+ right: 1px;
89304
+ }
89305
+ .section-active {
89306
+ outline: 1px solid #00da89;
89307
+ outline-offset: -1px;
89308
+ }
89309
+ .is-section:not(.box-space).section-active .is-overlay {
89310
+ top: 1px;
89311
+ bottom: 1px;
89312
+ left: 1px;
89313
+ right: 1px;
89314
+ }
89315
+
89316
+ .content-edit .is-section-tool,
89317
+ .content-edit .is-box-tool {
89318
+ display: none !important;
89319
+ }
89320
+ .content-edit .box-hover {
89321
+ outline: none !important;
89322
+ }
89323
+ `;
89324
+ builder.contentStuff.insertAdjacentHTML('afterbegin', `
89325
+ <style>
89326
+ ${css}
89327
+ </style>
89328
+ `);
89329
+ }
89330
+
89331
+ }
89332
+
88594
89333
  const dom = new Dom$1();
88595
89334
 
88596
89335
  class ContentBox {
88597
89336
  constructor(settings = {}) {
88598
89337
  const defaults = {
88599
89338
  wrapper: '.is-wrapper',
89339
+ previewURL: 'preview.html',
89340
+ sectionHoverOutline: false,
88600
89341
  useSidebar: true,
88601
89342
  disableLoadingStatus: false,
88602
89343
  sidebarData: {
@@ -90997,6 +91738,7 @@ class ContentBox {
90997
91738
  },
90998
91739
  useCssClasses: true,
90999
91740
  useButtonPlugin: false,
91741
+ enableDragResize: true,
91000
91742
 
91001
91743
  /* Old Version (backward compatible) */
91002
91744
  onAddSectionOpen: function () {},
@@ -91041,9 +91783,39 @@ class ContentBox {
91041
91783
 
91042
91784
  if (this.settings.contentStyleWithSample) {
91043
91785
  this.settings.contentStyles = this.settings.contentStylesAlt;
91786
+ } // Experimental for iframe
91787
+
91788
+
91789
+ let win, doc;
91790
+
91791
+ if (this.iframe) {
91792
+ win = this.iframe.contentWindow;
91793
+ let iframeDocument = this.iframe.contentDocument || this.iframe.contentWindow.document;
91794
+ doc = iframeDocument;
91795
+ this.iframeDocument = iframeDocument;
91796
+ } else {
91797
+ win = window;
91798
+ doc = document;
91799
+ }
91800
+
91801
+ this.win = win;
91802
+ this.doc = doc; // Content stuff
91803
+
91804
+ if (this.iframe) {
91805
+ let contentStuff = doc.querySelector('.content-stuff');
91806
+
91807
+ if (!contentStuff) {
91808
+ contentStuff = document.createElement('div');
91809
+ contentStuff.className = 'content-stuff is-ui';
91810
+ contentStuff.id = '_cbhtml';
91811
+ doc.body.appendChild(contentStuff);
91812
+ }
91813
+
91814
+ this.contentStuff = contentStuff;
91815
+ this.stuff = new ContentStuff(this);
91044
91816
  }
91045
91817
 
91046
- this.wrapperEl = document.querySelector(this.wrapper);
91818
+ this.wrapperEl = this.doc.querySelector(this.wrapper);
91047
91819
 
91048
91820
  if (dom.hasClass(this.wrapperEl, 'preview')) {
91049
91821
  this.preview = true;
@@ -91063,9 +91835,9 @@ class ContentBox {
91063
91835
  //Run parts of box(-flex).js
91064
91836
  this.box(); //Run built-in plugin inside the builder
91065
91837
 
91066
- setTimeout(function () {
91067
- if (window.skrollr) {
91068
- let obj = window.skrollr.get();
91838
+ setTimeout(() => {
91839
+ if (this.win.skrollr) {
91840
+ let obj = this.win.skrollr.get();
91069
91841
  if (obj) obj.refresh();
91070
91842
  }
91071
91843
  }, 100);
@@ -91077,10 +91849,9 @@ class ContentBox {
91077
91849
  let old2 = this.settings.onChange;
91078
91850
 
91079
91851
  this.settings.onChange = () => {
91080
- old2.call(this);
91081
- setTimeout(() => {
91082
- this.quickPosTool();
91083
- }, 100);
91852
+ old2.call(this); // setTimeout(()=>{
91853
+ // this.quickPosTool();
91854
+ // }, 100);
91084
91855
  }; // Hidden placement for builder things
91085
91856
 
91086
91857
 
@@ -91114,6 +91885,7 @@ class ContentBox {
91114
91885
  window.applyBoxImage = this.boxImage.bind(this);
91115
91886
  window.applyLargerImage = this.applyLargerImage.bind(this);
91116
91887
  window.returnUrl = this.returnUrl.bind(this);
91888
+ this.win.applyBoxImage = this.boxImage.bind(this);
91117
91889
  window._contentbox = this;
91118
91890
  } // constructor
91119
91891
 
@@ -91122,6 +91894,7 @@ class ContentBox {
91122
91894
  this.editor = new ContentBuilder({
91123
91895
  container: '.is-container',
91124
91896
  page: '.is-wrapper',
91897
+ iframe: this.settings.iframe,
91125
91898
  imageAdjust: 2,
91126
91899
  // ContentBuilder
91127
91900
  scriptPath: this.settings.scriptPath,
@@ -91145,11 +91918,11 @@ class ContentBox {
91145
91918
  onChange: () => {
91146
91919
  this.settings.onChange();
91147
91920
  },
91148
- onRefreshTool: () => {
91149
- setTimeout(() => {
91150
- this.quickPosTool();
91151
- }, 100);
91152
- },
91921
+ // onRefreshTool: ()=>{
91922
+ // setTimeout(()=>{
91923
+ // this.quickPosTool();
91924
+ // }, 100);
91925
+ // },
91153
91926
  useLightbox: this.settings.useLightbox,
91154
91927
  themes: this.settings.themes,
91155
91928
  moduleConfig: this.settings.moduleConfig,
@@ -91234,23 +92007,29 @@ class ContentBox {
91234
92007
  cssClasses: this.settings.cssClasses,
91235
92008
  useCssClasses: this.settings.useCssClasses,
91236
92009
  useButtonPlugin: this.settings.useButtonPlugin,
92010
+ enableDragResize: this.settings.enableDragResize,
91237
92011
  zoom: this.settings.zoom,
91238
92012
  onZoomStart: () => {
91239
- // const wrapper = this.wrapperEl;
91240
- // wrapper.style.transition = 'all ease 0.1s';
91241
- let elms = document.querySelectorAll('.is-section-tool');
92013
+ const wrapper = this.wrapperEl; // wrapper.style.transition = 'all ease 0.1s';
92014
+
92015
+ let elms = wrapper.querySelectorAll('.is-section-tool');
91242
92016
  Array.prototype.forEach.call(elms, function (elm) {
91243
92017
  if (elm.style.display === 'block') {
91244
92018
  elm.setAttribute('data-section-active', '');
91245
92019
  elm.style.display = 'none';
91246
92020
  }
91247
92021
  });
91248
- let boxTool = document.querySelector('#divBoxTool');
91249
-
91250
- if (boxTool.style.display === 'flex') {
91251
- boxTool.setAttribute('data-box-active', '');
91252
- boxTool.style.display = 'none';
91253
- }
92022
+ elms = wrapper.querySelectorAll('.is-box-tool');
92023
+ Array.prototype.forEach.call(elms, function (elm) {
92024
+ if (elm.style.display === 'flex') {
92025
+ elm.setAttribute('data-box-active', '');
92026
+ elm.style.display = 'none';
92027
+ }
92028
+ }); // let boxTool = document.querySelector('#divBoxTool');
92029
+ // if(boxTool.style.display==='flex') {
92030
+ // boxTool.setAttribute('data-box-active', '');
92031
+ // boxTool.style.display = 'none';
92032
+ // }
91254
92033
 
91255
92034
  this.wrapperEl.style.transition = 'none';
91256
92035
  },
@@ -91261,23 +92040,29 @@ class ContentBox {
91261
92040
  this.wrapperEl.style.marginTop = `${x}px`;
91262
92041
  },
91263
92042
  onZoomEnd: () => {
91264
- const section = this.wrapperEl.querySelector('.is-section');
92043
+ const wrapper = this.wrapperEl;
92044
+ const section = wrapper.querySelector('.is-section');
91265
92045
  if (!section) return; // empty content
91266
92046
 
91267
92047
  this.addSpace();
91268
- let elm = document.querySelector('.is-section-tool[data-section-active]');
92048
+ let elm = wrapper.querySelector('.is-section-tool[data-section-active]');
91269
92049
 
91270
92050
  if (elm) {
91271
92051
  elm.removeAttribute('data-section-active');
91272
92052
  elm.style.display = 'block';
91273
92053
  }
91274
92054
 
91275
- elm = document.querySelector('#divBoxTool[data-box-active]');
92055
+ elm = wrapper.querySelector('.is-box-tool[data-box-active]');
91276
92056
 
91277
92057
  if (elm) {
91278
92058
  elm.removeAttribute('data-box-active');
91279
92059
  elm.style.display = 'flex';
91280
- }
92060
+ } // elm = document.querySelector('#divBoxTool[data-box-active]');
92061
+ // if(elm) {
92062
+ // elm.removeAttribute('data-box-active');
92063
+ // elm.style.display = 'flex';
92064
+ // }
92065
+
91281
92066
 
91282
92067
  this.rePositionTool();
91283
92068
  this.wrapperEl.style.transition = '';
@@ -91308,7 +92093,7 @@ class ContentBox {
91308
92093
  let num = url.replace('#section', '');
91309
92094
 
91310
92095
  if (!isNaN(parseInt(num))) {
91311
- let sections = document.querySelectorAll('.is-section');
92096
+ let sections = this.doc.querySelectorAll('.is-section');
91312
92097
  let gotoSection;
91313
92098
  let x = 0;
91314
92099
  sections.forEach(function (section) {
@@ -91328,7 +92113,7 @@ class ContentBox {
91328
92113
  e.preventDefault();
91329
92114
  }
91330
92115
  } else {
91331
- let bookmark = document.querySelector(url);
92116
+ let bookmark = this.doc.querySelector(url);
91332
92117
 
91333
92118
  if (bookmark) {
91334
92119
  this.scrollTo(bookmark);
@@ -91346,7 +92131,7 @@ class ContentBox {
91346
92131
 
91347
92132
  init() {
91348
92133
  // Add special css (remove on destroy)
91349
- dom.appendHtml(document.head, `<style id="_contentbox_lightbox">
92134
+ dom.appendHtml(this.doc.head, `<style id="_contentbox_lightbox">
91350
92135
  body {
91351
92136
  background: ${this.settings.backgroundColor};
91352
92137
  }
@@ -91453,13 +92238,18 @@ class ContentBox {
91453
92238
  } // Add document Click event
91454
92239
 
91455
92240
 
91456
- document.addEventListener('click', this.doDocumentClick = e => {
92241
+ this.doc.addEventListener('click', this.doDocumentClick = e => {
91457
92242
  e = e || window.event;
91458
92243
  var target = e.target || e.srcElement;
91459
92244
  let a = false,
91460
92245
  b = false,
91461
92246
  c = false,
91462
- d = false;
92247
+ d = false,
92248
+ f = false,
92249
+ g = false,
92250
+ h = false,
92251
+ i = false,
92252
+ j = false;
91463
92253
  let element = target;
91464
92254
 
91465
92255
  while (element) {
@@ -91468,6 +92258,11 @@ class ContentBox {
91468
92258
  if (dom.hasClass(element, 'is-sidebar-content')) a = true;
91469
92259
  if (dom.hasClass(element, 'is-sidebar')) b = true;
91470
92260
  if (dom.hasClass(element, 'is-builder')) c = true;
92261
+ if (dom.hasClass(element, 'is-wrapper')) f = true;
92262
+ if (dom.hasClass(element, 'is-rte-tool')) g = true;
92263
+ if (dom.hasClass(element, 'is-modal')) h = true;
92264
+ if (dom.hasClass(element, 'is-pop')) i = true;
92265
+ if (dom.hasClass(element, 'is-tool')) j = true;
91471
92266
 
91472
92267
  if (dom.hasClass(element, 'is-section')) {
91473
92268
  if (element.hasAttribute('data-anim-start') || element.hasAttribute('data-anim-end')) d = true;
@@ -91476,6 +92271,19 @@ class ContentBox {
91476
92271
  element = element.parentNode;
91477
92272
  }
91478
92273
 
92274
+ if (!(a || b || f || g || h || i || j)) {
92275
+ const boxHover = this.doc.querySelector('.box-hover');
92276
+ if (boxHover) dom.removeClass(boxHover, 'box-hover');
92277
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92278
+ boxTools.forEach(tool => {
92279
+ tool.style.display = 'none';
92280
+ });
92281
+ const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92282
+ sectionTools.forEach(tool => {
92283
+ tool.style.display = 'none';
92284
+ });
92285
+ }
92286
+
91479
92287
  if (!(a || b)) {
91480
92288
  this.sidebar.closeSidebar();
91481
92289
  }
@@ -91483,7 +92291,52 @@ class ContentBox {
91483
92291
  if (c && d) {
91484
92292
  this.controlHiddenOnScroll = true;
91485
92293
  }
91486
- }); // Hide tool on scrolling
92294
+ });
92295
+
92296
+ if (this.iframe) {
92297
+ document.addEventListener('click', this.doDocumentClick = e => {
92298
+ e = e || window.event;
92299
+ var target = e.target || e.srcElement;
92300
+ let a = false,
92301
+ b = false,
92302
+ f = false,
92303
+ g = false,
92304
+ h = false,
92305
+ i = false,
92306
+ j = false;
92307
+ let element = target;
92308
+
92309
+ while (element) {
92310
+ if (!element.tagName) break;
92311
+ if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
92312
+ if (dom.hasClass(element, 'is-sidebar-content')) a = true;
92313
+ if (dom.hasClass(element, 'is-sidebar')) b = true;
92314
+ if (dom.hasClass(element, 'is-wrapper')) f = true;
92315
+ if (dom.hasClass(element, 'is-rte-tool')) g = true;
92316
+ if (dom.hasClass(element, 'is-modal')) h = true;
92317
+ if (dom.hasClass(element, 'is-pop')) i = true;
92318
+ if (dom.hasClass(element, 'is-tool')) j = true;
92319
+ element = element.parentNode;
92320
+ }
92321
+
92322
+ if (!(a || b || f || g || h || i || j)) {
92323
+ const boxHover = this.doc.querySelector('.box-hover');
92324
+ if (boxHover) dom.removeClass(boxHover, 'box-hover');
92325
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92326
+ boxTools.forEach(tool => {
92327
+ tool.style.display = 'none';
92328
+ });
92329
+ const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92330
+ sectionTools.forEach(tool => {
92331
+ tool.style.display = 'none';
92332
+ });
92333
+ }
92334
+
92335
+ if (!(a || b)) {
92336
+ this.sidebar.closeSidebar();
92337
+ }
92338
+ });
92339
+ } // Hide tool on scrolling
91487
92340
 
91488
92341
  /*
91489
92342
  let timeoutId;
@@ -91514,6 +92367,7 @@ class ContentBox {
91514
92367
  // document.addEventListener('keydown', this.doDocumentKeydown = (e)=>{
91515
92368
  // console.log(e.target);
91516
92369
  // });
92370
+
91517
92371
  } // init
91518
92372
 
91519
92373
 
@@ -91539,7 +92393,7 @@ class ContentBox {
91539
92393
 
91540
92394
 
91541
92395
  box() {
91542
- const navbar = document.querySelector('.is-section-navbar');
92396
+ const navbar = this.doc.querySelector('.is-section-navbar');
91543
92397
 
91544
92398
  if (navbar) {
91545
92399
  const links = navbar.querySelectorAll('a');
@@ -91554,7 +92408,7 @@ class ContentBox {
91554
92408
  let num = url.replace('#section', '');
91555
92409
 
91556
92410
  if (!isNaN(parseInt(num))) {
91557
- let sections = document.querySelectorAll('.is-section');
92411
+ let sections = this.doc.querySelectorAll('.is-section');
91558
92412
  let gotoSection;
91559
92413
  let x = 0;
91560
92414
  sections.forEach(function (section) {
@@ -91575,7 +92429,7 @@ class ContentBox {
91575
92429
  }
91576
92430
  } else {
91577
92431
  try {
91578
- let bookmark = document.querySelector(url);
92432
+ let bookmark = this.doc.querySelector(url);
91579
92433
 
91580
92434
  if (bookmark) {
91581
92435
  this.scrollTo(bookmark);
@@ -91585,11 +92439,11 @@ class ContentBox {
91585
92439
  }
91586
92440
  }
91587
92441
  }
91588
- }
92442
+ } // if(link.closest('.is-menu-search')) return;
92443
+ // if(link.closest('.is-menu-toggle')) return;
92444
+ // e.preventDefault();
92445
+ // e.stopImmediatePropagation();
91589
92446
 
91590
- if (link.closest('.is-menu-search')) return;
91591
- e.preventDefault();
91592
- e.stopImmediatePropagation();
91593
92447
  });
91594
92448
  });
91595
92449
  }
@@ -91629,8 +92483,19 @@ class ContentBox {
91629
92483
  }
91630
92484
 
91631
92485
  sectionSetup(section) {
91632
- dom.appendHtml(section, '<div class="is-section-tool">' + '<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 class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>');
91633
- this.editor.setTooltip(section);
92486
+ dom.appendHtml(section, '<div class="is-section-tool">' + '<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 class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">&#10005;</button>' + '</div>'); // this.editor.setTooltip(section);
92487
+ // Prepare for tooltip
92488
+
92489
+ let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
92490
+ Array.prototype.forEach.call(elms, elm => {
92491
+ elm.setAttribute('data-title', elm.getAttribute('title'));
92492
+
92493
+ if (!this.iframe) {
92494
+ this.editor.tooltip.set(elm, 5, 3);
92495
+ } else {
92496
+ this.editor.tooltip.set(elm, 5, 3, true);
92497
+ }
92498
+ });
91634
92499
  const btnSectionEdit = section.querySelector('.is-section-edit');
91635
92500
  btnSectionEdit.addEventListener('click', () => {
91636
92501
  this.editsection.edit();
@@ -91644,6 +92509,86 @@ class ContentBox {
91644
92509
 
91645
92510
 
91646
92511
  boxSetup(box) {
92512
+ let tool = box.querySelector('.is-box-tool');
92513
+ if (tool) tool.parentNode.removeChild(tool);
92514
+ dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<form class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" 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);">' + '<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="" />' + '</form>' + '<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 class="is-module-edit" 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>' + '</div>'); // this.editor.setTooltip(box);
92515
+ // Prepare for tooltip
92516
+
92517
+ if (tool) {
92518
+ let elms = tool.querySelectorAll('[title]');
92519
+ Array.prototype.forEach.call(elms, elm => {
92520
+ elm.setAttribute('data-title', elm.getAttribute('title'));
92521
+
92522
+ if (!this.iframe) {
92523
+ this.editor.tooltip.set(elm, 5, 3);
92524
+ } else {
92525
+ this.editor.tooltip.set(elm, 5, 3, true);
92526
+ }
92527
+ });
92528
+ }
92529
+
92530
+ const btnBoxEdit = box.querySelector('.is-box-edit');
92531
+ if (btnBoxEdit) btnBoxEdit.addEventListener('click', () => {
92532
+ this.editbox.edit();
92533
+ });
92534
+ const btnModuleEdit = box.querySelector('.is-module-edit');
92535
+ if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
92536
+ this.editbox.editModule();
92537
+ });
92538
+ const fileCover = box.querySelector('.input-file-cover');
92539
+ if (fileCover) fileCover.addEventListener('click', () => {
92540
+ /*
92541
+ // Remove Waiting Indicator
92542
+ const builderStuff = this.builderStuff;
92543
+ const indicator = builderStuff.querySelector('.waiting-indicator');
92544
+ if(indicator) {
92545
+ alert('Please wait until another upload process completed.')
92546
+ e.preventDefault();
92547
+ return;
92548
+ }
92549
+ */
92550
+ // prevent lost of activeBox during uploading cover (save to targetBox)
92551
+ this.editbox.targetBox = this.activeBox;
92552
+ });
92553
+ if (fileCover) fileCover.addEventListener('change', e => {
92554
+ if (fileCover.value === '') return;
92555
+ this.editor.saveForUndo(); // Show Waiting Indicator
92556
+
92557
+ const builderStuff = this.builderStuff;
92558
+ dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
92559
+ <div class="waiting-indicator">
92560
+ <div>${out('Uploading..')}</div>
92561
+ </div>
92562
+ `);
92563
+ const indicator = builderStuff.querySelector('.waiting-indicator');
92564
+ let targetBox = this.editbox.targetBox;
92565
+ let top, left;
92566
+
92567
+ if (!this.iframe) {
92568
+ top = targetBox.getBoundingClientRect().top + window.pageYOffset;
92569
+ left = targetBox.getBoundingClientRect().left + window.pageXOffset;
92570
+ } else {
92571
+ let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
92572
+ let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
92573
+ top = targetBox.getBoundingClientRect().top + adjY;
92574
+ left = targetBox.getBoundingClientRect().left + adjX;
92575
+ }
92576
+
92577
+ indicator.style.top = top + 'px';
92578
+ indicator.style.left = left + 'px';
92579
+ box.querySelector('.input-custom-value').value = this.settings.customval;
92580
+
92581
+ if (this.settings.onUploadCoverImage) {
92582
+ this.settings.onUploadCoverImage(e);
92583
+ } else {
92584
+ box.querySelector('.is-cover-upload').submit();
92585
+ }
92586
+
92587
+ fileCover.value = ''; // Clear Input
92588
+
92589
+ e.preventDefault();
92590
+ e.stopImmediatePropagation();
92591
+ });
91647
92592
  box.addEventListener('mouseenter', () => {
91648
92593
  this.positionTool(box);
91649
92594
  let activeSection;
@@ -91656,6 +92601,11 @@ class ContentBox {
91656
92601
 
91657
92602
  this.activeBox = box;
91658
92603
  this.activeSection = activeSection;
92604
+ const elms = this.doc.querySelectorAll('.box-hover');
92605
+ elms.forEach(elm => {
92606
+ dom.removeClass(elm, 'box-hover');
92607
+ });
92608
+ if (this.sectionHoverOutline) dom.addClass(this.activeBox, 'box-hover');
91659
92609
  });
91660
92610
  } // boxSetup
91661
92611
 
@@ -91941,26 +92891,29 @@ class ContentBox {
91941
92891
 
91942
92892
  this.positionTool(box);
91943
92893
  }
91944
-
92894
+ /*
91945
92895
  quickPosTool() {
91946
- let box = this.activeBox;
91947
- if (!box) return;
91948
- let leftadj = 40;
91949
- const boxTool = this.boxTool;
91950
- const elmOffset = dom.getElementOffset(box);
91951
- let offsetTop = elmOffset.top;
91952
- let offsetLeft = elmOffset.left;
91953
- let offsetWidth = elmOffset.width;
91954
- let offsetHeight = elmOffset.height;
91955
- let top = offsetTop + offsetHeight - 40;
91956
- let left = offsetLeft + offsetWidth / 2;
91957
- boxTool.style.top = top + 'px';
91958
- boxTool.style.left = left - leftadj + 'px';
91959
- boxTool.style.display = 'flex';
92896
+ let box = this.activeBox;
92897
+ if(!box) return;
92898
+ let leftadj = 40;
92899
+ const boxTool = this.boxTool;
92900
+ const elmOffset = dom.getElementOffset(box);
92901
+ let offsetTop = elmOffset.top;
92902
+ let offsetLeft = elmOffset.left;
92903
+ let offsetWidth = elmOffset.width;
92904
+ let offsetHeight = elmOffset.height;
92905
+ let top = offsetTop + offsetHeight - 40;
92906
+ let left = offsetLeft + offsetWidth/2;
92907
+ boxTool.style.top = top + 'px';
92908
+ boxTool.style.left = (left - leftadj) + 'px';
92909
+ boxTool.style.display = 'flex';
91960
92910
  }
92911
+ */
92912
+
91961
92913
 
91962
92914
  positionTool(box) {
91963
- // Zoom
92915
+ if (!box) return; // Zoom
92916
+
91964
92917
  var zoom;
91965
92918
 
91966
92919
  if (localStorage.getItem('_zoom') !== null) {
@@ -91969,40 +92922,51 @@ class ContentBox {
91969
92922
  zoom = this.settings.zoom; //1;
91970
92923
  }
91971
92924
 
91972
- let leftadj;
91973
- const boxTool = document.querySelector('#divBoxTool');
91974
92925
  const sectionNavbar = box.closest('.is-section-navbar');
91975
-
91976
- if (sectionNavbar) {
91977
- document.querySelector('#form-upload-cover').style.display = 'none';
91978
- document.querySelector('#btnEditBox').style.display = 'none';
91979
- document.querySelector('#btnEditModule').style.display = 'inline-block';
91980
- boxTool.style.width = '40px';
91981
- leftadj = 20;
91982
- } else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
91983
- document.querySelector('#form-upload-cover').style.display = 'none';
91984
- document.querySelector('#btnEditBox').style.display = 'inline-block';
91985
- document.querySelector('#btnEditModule').style.display = 'inline-block';
91986
- boxTool.style.width = '80px';
91987
- leftadj = 40;
92926
+ /*
92927
+ let leftadj;
92928
+ let boxTool = document.querySelector('#divBoxTool');
92929
+ if(sectionNavbar) {
92930
+ document.querySelector('#form-upload-cover').style.display = 'none';
92931
+ document.querySelector('#btnEditBox').style.display = 'none';
92932
+ document.querySelector('#btnEditModule').style.display = 'inline-block';
92933
+ boxTool.style.width = '40px';
92934
+ leftadj = 20;
92935
+ } else if(box.querySelectorAll('.is-overlay-content[data-module]').length>0) {
92936
+ document.querySelector('#form-upload-cover').style.display = 'none';
92937
+ document.querySelector('#btnEditBox').style.display = 'inline-block';
92938
+ document.querySelector('#btnEditModule').style.display = 'inline-block';
92939
+ boxTool.style.width = '80px';
92940
+ leftadj = 40;
91988
92941
  } else {
91989
- document.querySelector('#form-upload-cover').style.display = 'block';
91990
- document.querySelector('#btnEditBox').style.display = 'inline-block';
91991
- document.querySelector('#btnEditModule').style.display = 'none';
91992
- boxTool.style.width = '80px';
91993
- leftadj = 40;
92942
+ document.querySelector('#form-upload-cover').style.display = 'block';
92943
+ document.querySelector('#btnEditBox').style.display = 'inline-block';
92944
+ document.querySelector('#btnEditModule').style.display = 'none';
92945
+ boxTool.style.width = '80px';
92946
+ leftadj = 40;
91994
92947
  }
91995
-
91996
- const elmOffset = dom.getElementOffset(box);
92948
+ const elmOffset = dom.getElementOffset(box);
91997
92949
  let offsetTop = elmOffset.top;
91998
92950
  let offsetLeft = elmOffset.left;
91999
92951
  let offsetWidth = elmOffset.width;
92000
92952
  let offsetHeight = elmOffset.height;
92001
- let top = offsetTop + offsetHeight - 40;
92002
- let left = offsetLeft + offsetWidth / 2;
92003
- boxTool.style.top = top + 'px';
92004
- boxTool.style.left = left - leftadj + 'px';
92005
- boxTool.style.display = 'flex';
92953
+ let top, left;
92954
+ if(!this.iframe) {
92955
+ let top = offsetTop + offsetHeight - 40;
92956
+ let left = offsetLeft + offsetWidth/2;
92957
+ boxTool.style.top = top + 'px';
92958
+ boxTool.style.left = (left - leftadj) + 'px';
92959
+ } else {
92960
+ let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
92961
+ let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
92962
+ top = offsetHeight - 40 + box.getBoundingClientRect().top + adjY;
92963
+ left = (offsetWidth/2) + box.getBoundingClientRect().left + adjX;
92964
+ boxTool.style.top = top + 'px';
92965
+ boxTool.style.left = (left - leftadj) + 'px';
92966
+ }
92967
+ boxTool.style.display = 'flex';
92968
+ */
92969
+
92006
92970
  const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92007
92971
  sectionTools.forEach(tool => {
92008
92972
  tool.style.display = 'none';
@@ -92022,6 +92986,39 @@ class ContentBox {
92022
92986
  sectionTool.style.display = 'block';
92023
92987
  sectionTool.style.transform = 'scale(' + 1 / zoom + ')';
92024
92988
  sectionTool.style.transformOrigin = 'top right';
92989
+ } //new box tool
92990
+
92991
+
92992
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92993
+ boxTools.forEach(tool => {
92994
+ tool.style.display = 'none';
92995
+ });
92996
+ let boxTool = box.querySelector('.is-box-tool');
92997
+
92998
+ if (boxTool) {
92999
+ boxTool.style.display = 'flex';
93000
+ boxTool.style.transform = 'scale(' + 1 / zoom + ')';
93001
+ boxTool.style.transformOrigin = 'center bottom'; // boxTool.style.marginTop = (-(boxTool.offsetHeight * 1/zoom)) + 'px';
93002
+
93003
+ if (sectionNavbar) {
93004
+ box.querySelector('.is-cover-upload').style.display = 'none';
93005
+ box.querySelector('.is-box-edit').style.display = 'none';
93006
+ box.querySelector('.is-module-edit').style.display = 'inline-block';
93007
+ boxTool.style.width = '40px';
93008
+ boxTool.style.left = 'calc(50% - 20px)';
93009
+ } else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
93010
+ box.querySelector('.is-cover-upload').style.display = 'none';
93011
+ box.querySelector('.is-box-edit').style.display = 'inline-block';
93012
+ box.querySelector('.is-module-edit').style.display = 'inline-block';
93013
+ boxTool.style.width = '80px';
93014
+ boxTool.style.left = 'calc(50% - 40px)';
93015
+ } else {
93016
+ box.querySelector('.is-cover-upload').style.display = 'block';
93017
+ box.querySelector('.is-box-edit').style.display = 'inline-block';
93018
+ box.querySelector('.is-module-edit').style.display = 'none';
93019
+ boxTool.style.width = '80px';
93020
+ boxTool.style.left = 'calc(50% - 40px)';
93021
+ }
92025
93022
  }
92026
93023
  }
92027
93024
 
@@ -92046,12 +93043,20 @@ class ContentBox {
92046
93043
  btnNew.addEventListener('click', () => {
92047
93044
  if (btn.src) {
92048
93045
  if (!dom.hasClass(btnNew, 'active')) {
92049
- dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
92050
- dom.removeClass(builderStuff.querySelector('.is-sidebar-content'), 'active');
92051
- document.body.style.overflowY = '';
93046
+ // Close all opened sidebar
93047
+ // dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
93048
+ // dom.removeClass(builderStuff.querySelector('.is-sidebar-content'), 'active');
93049
+ // document.body.style.overflowY = '';
93050
+ this.sidebar.closeSidebar();
92052
93051
  dom.addClass(btnNew, 'active');
92053
- var id = btnNew.getAttribute('data-content');
92054
- dom.addClass(builderStuff.querySelector('#' + id), 'active');
93052
+ var id = btnNew.getAttribute('data-content'); // dom.addClass(builderStuff.querySelector('#' + id), 'active');
93053
+
93054
+ const panelContent = document.querySelector('#' + id);
93055
+ panelContent.style.display = 'block';
93056
+ setTimeout(() => {
93057
+ dom.addClass(panelContent, 'active');
93058
+ panelContent.focus();
93059
+ }, 10);
92055
93060
  var iframe = builderStuff.querySelector('#' + id + ' iframe');
92056
93061
 
92057
93062
  if (iframe.getAttribute('src') == 'about:blank') {
@@ -92111,8 +93116,8 @@ class ContentBox {
92111
93116
  this.editor.returnUrl(s);
92112
93117
  }
92113
93118
 
92114
- showModal(modal) {
92115
- this.editor.util.showModal(modal);
93119
+ showModal(modal, overlayStay, cancelCallback, animated) {
93120
+ this.editor.util.showModal(modal, overlayStay, cancelCallback, animated);
92116
93121
  }
92117
93122
 
92118
93123
  hideModal(modal) {
@@ -92124,7 +93129,7 @@ class ContentBox {
92124
93129
  }
92125
93130
 
92126
93131
  loadStyles(mainCss, sectionCss) {
92127
- let links = document.getElementsByTagName('link');
93132
+ let links = this.doc.getElementsByTagName('link');
92128
93133
  let boxCssInBody;
92129
93134
 
92130
93135
  for (let i = 0; i < links.length; i++) {
@@ -92149,12 +93154,12 @@ class ContentBox {
92149
93154
  boxCssInBody = true;
92150
93155
  }
92151
93156
 
92152
- let elms = document.querySelectorAll('[data-rel="_del"]');
93157
+ let elms = this.doc.querySelectorAll('[data-rel="_del"]');
92153
93158
  elms.forEach(elm => {
92154
93159
  elm.parentNode.removeChild(elm);
92155
93160
  });
92156
- let page = document.head;
92157
- if (!page) page = document.body;
93161
+ let page = this.doc.head;
93162
+ if (!page) page = this.doc.body;
92158
93163
  if (mainCss) if (mainCss !== '') {
92159
93164
  if (boxCssInBody) {
92160
93165
  this.wrapperEl.insertAdjacentHTML('beforebegin', mainCss);
@@ -92216,7 +93221,7 @@ class ContentBox {
92216
93221
  }
92217
93222
 
92218
93223
  mainCss() {
92219
- let links = document.getElementsByTagName('link');
93224
+ let links = this.doc.getElementsByTagName('link');
92220
93225
  let arrLinks = [];
92221
93226
 
92222
93227
  for (let i = 0; i < links.length; i++) {
@@ -92232,7 +93237,7 @@ class ContentBox {
92232
93237
  }
92233
93238
 
92234
93239
  mainCssList() {
92235
- let links = document.getElementsByTagName('link');
93240
+ let links = this.doc.getElementsByTagName('link');
92236
93241
  let arrLinks = [];
92237
93242
 
92238
93243
  for (let i = 0; i < links.length; i++) {
@@ -92248,7 +93253,7 @@ class ContentBox {
92248
93253
  }
92249
93254
 
92250
93255
  sectionCss() {
92251
- let links = document.getElementsByTagName('link');
93256
+ let links = this.doc.getElementsByTagName('link');
92252
93257
  let arrLinks = [];
92253
93258
 
92254
93259
  for (let i = 0; i < links.length; i++) {
@@ -92265,7 +93270,7 @@ class ContentBox {
92265
93270
  }
92266
93271
 
92267
93272
  sectionCssList() {
92268
- let links = document.getElementsByTagName('link');
93273
+ let links = this.doc.getElementsByTagName('link');
92269
93274
  let arrLinks = [];
92270
93275
 
92271
93276
  for (let i = 0; i < links.length; i++) {
@@ -92292,7 +93297,8 @@ class ContentBox {
92292
93297
  }
92293
93298
 
92294
93299
  destroy() {
92295
- document.removeEventListener('click', this.doDocumentClick, false);
93300
+ this.doc.removeEventListener('click', this.doDocumentClick, false);
93301
+ if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);
92296
93302
  window.removeEventListener('scroll', this.doWindowScroll, false);
92297
93303
  let html = this.html(); // this.builderStuff.parentNode.removeChild(this.builderStuff);
92298
93304
 
@@ -92314,7 +93320,7 @@ class ContentBox {
92314
93320
  }
92315
93321
 
92316
93322
  cleanupUnused() {
92317
- let links = document.getElementsByTagName('link');
93323
+ let links = this.doc.getElementsByTagName('link');
92318
93324
 
92319
93325
  for (let i = 0; i < links.length; i++) {
92320
93326
  //Remove unused google font links
@@ -92347,7 +93353,7 @@ class ContentBox {
92347
93353
  } //Cleanup unused contentstyles
92348
93354
 
92349
93355
 
92350
- links = document.getElementsByTagName('link');
93356
+ links = this.doc.getElementsByTagName('link');
92351
93357
 
92352
93358
  for (let i = 0; i < links.length; i++) {
92353
93359
  if (links[i].getAttribute('data-name') === 'contentstyle') {
@@ -92366,7 +93372,7 @@ class ContentBox {
92366
93372
  }
92367
93373
  }
92368
93374
 
92369
- let elms = document.querySelectorAll('[data-rel="_del"]');
93375
+ let elms = this.doc.querySelectorAll('[data-rel="_del"]');
92370
93376
  elms.forEach(elm => {
92371
93377
  elm.parentNode.removeChild(elm);
92372
93378
  });
@@ -92381,7 +93387,7 @@ class ContentBox {
92381
93387
  How about basetype-*.css? basetype-*.css always included once (by cleanup previous basetype-*.css include). It only used if enableContentStyle is set true. And for this (enableContentStyle=true), .mainCss() method MUST BE USED.
92382
93388
  */
92383
93389
 
92384
- elms = document.head.querySelectorAll('link');
93390
+ elms = this.doc.head.querySelectorAll('link');
92385
93391
  elms.forEach(elm => {
92386
93392
  let src = elm.getAttribute('href');
92387
93393
  let links = this.wrapperEl.querySelectorAll('link');
@@ -92391,7 +93397,7 @@ class ContentBox {
92391
93397
  }
92392
93398
  });
92393
93399
  });
92394
- elms = document.querySelectorAll('[data-rel="_del"]');
93400
+ elms = this.doc.querySelectorAll('[data-rel="_del"]');
92395
93401
  elms.forEach(elm => {
92396
93402
  elm.parentNode.removeChild(elm);
92397
93403
  });