@innovastudio/contentbox 1.3.27 → 1.4.0

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 +1406 -517
  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>
@@ -81777,7 +82163,7 @@ class Lightbox {
81777
82163
 
81778
82164
  this.id = this.makeid();
81779
82165
  let html = `
81780
- <div class="is-lightbox lightbox-externalvideo" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82166
+ <div class="is-lightbox lightbox-externalvideo-edit" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81781
82167
  <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
82168
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81783
82169
  </button>
@@ -81787,13 +82173,13 @@ class Lightbox {
81787
82173
  </div>
81788
82174
  </div>
81789
82175
  </div>
81790
- <div class="is-lightbox lightbox-video light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82176
+ <div class="is-lightbox lightbox-video-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81791
82177
  <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
82178
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81793
82179
  </button>
81794
82180
  <div class="lightbox-content" style="width:100%;"></div>
81795
82181
  </div>
81796
- <div class="is-lightbox lightbox-image light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
82182
+ <div class="is-lightbox lightbox-image-edit light" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
81797
82183
  <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
82184
  <svg><use xlink:href="#_${this.id}svgIconClose"></use></svg>
81799
82185
  </button>
@@ -81830,6 +82216,7 @@ class Lightbox {
81830
82216
 
81831
82217
  const handleItemKeyDown = e => {
81832
82218
  e.preventDefault();
82219
+ e.stopImmediatePropagation();
81833
82220
 
81834
82221
  if (e.keyCode === 27) {
81835
82222
  // escape key
@@ -81842,18 +82229,23 @@ class Lightbox {
81842
82229
  }
81843
82230
  };
81844
82231
 
81845
- const lightboxes = this.builderStuff.querySelectorAll('div.is-lightbox');
82232
+ const lightboxes = this.builderStuff.querySelectorAll('.lightbox-externalvideo-edit,.lightbox-video-edit,.lightbox-image-edit');
81846
82233
  lightboxes.forEach(lightbox => {
81847
82234
  lightbox.addEventListener('keydown', handleItemKeyDown);
81848
82235
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81849
- btnClose.addEventListener('click', () => {
82236
+ btnClose.addEventListener('click', e => {
81850
82237
  close();
82238
+ e.preventDefault();
82239
+ e.stopImmediatePropagation();
81851
82240
  });
81852
82241
  btnClose.addEventListener('keydown', e => {
81853
82242
  if (e.keyCode === 13 || e.keyCode === 32) {
81854
82243
  // enter or spacebar key
81855
82244
  close();
81856
82245
  }
82246
+
82247
+ e.preventDefault();
82248
+ e.stopImmediatePropagation();
81857
82249
  });
81858
82250
  }); // this.init();
81859
82251
  } //constructor
@@ -81914,17 +82306,17 @@ class Lightbox {
81914
82306
  const dom = this.dom;
81915
82307
  if (document.activeElement) this.elmFocus = document.activeElement;
81916
82308
  this.builder.preserveSelection = true;
81917
- let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image'); // in case opened in an iframe (ex. preview)
82309
+ let lightbox = this.builderStuff.querySelector('div.is-lightbox.lightbox-image-edit'); // in case opened in an iframe (ex. preview)
81918
82310
 
81919
82311
  if (window.frameElement && !lightbox) {
81920
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-image');
82312
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-image-edit');
81921
82313
  }
81922
82314
 
81923
82315
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81924
82316
  btnClose.style.opacity = 0;
81925
82317
  if (color) lightbox.style.backgroundColor = color;
81926
82318
  const div = lightbox.querySelector('.lightbox-content');
81927
- div.innerHTML = '<img src=' + url + '>';
82319
+ div.innerHTML = `<img src="${url}">`;
81928
82320
 
81929
82321
  if (theme === 'light') {
81930
82322
  dom.addClass(lightbox, 'light');
@@ -81951,17 +82343,19 @@ class Lightbox {
81951
82343
  const dom = this.dom;
81952
82344
  if (document.activeElement) this.elmFocus = document.activeElement;
81953
82345
  this.builder.preserveSelection = true;
81954
- let lightbox = document.querySelector('.is-lightbox.lightbox-video'); // in case opened in an iframe (ex. preview)
82346
+ let lightbox = document.querySelector('.is-lightbox.lightbox-video-edit'); // in case opened in an iframe (ex. preview)
81955
82347
 
81956
82348
  if (window.frameElement && !lightbox) {
81957
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-video');
82349
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-video-edit');
81958
82350
  }
81959
82351
 
81960
82352
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
81961
82353
  btnClose.style.opacity = 0;
81962
82354
  if (color) lightbox.style.backgroundColor = color;
81963
82355
  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>';
82356
+ div.innerHTML = `<video class="is-video-bg" playsinline controls autoplay width="100%">
82357
+ <source src="${url}" type="video/mp4">
82358
+ </video>`;
81965
82359
 
81966
82360
  if (theme === 'light') {
81967
82361
  dom.addClass(lightbox, 'light');
@@ -81988,10 +82382,10 @@ class Lightbox {
81988
82382
  const dom = this.dom;
81989
82383
  if (document.activeElement) this.elmFocus = document.activeElement;
81990
82384
  this.builder.preserveSelection = true;
81991
- let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo'); // in case opened in an iframe (ex. preview)
82385
+ let lightbox = document.querySelector('.is-lightbox.lightbox-externalvideo-edit'); // in case opened in an iframe (ex. preview)
81992
82386
 
81993
82387
  if (window.frameElement && !lightbox) {
81994
- lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo');
82388
+ lightbox = parent.document.querySelector('.is-lightbox.lightbox-externalvideo-edit');
81995
82389
  }
81996
82390
 
81997
82391
  const btnClose = lightbox.querySelector('.cmd-lightbox-close');
@@ -82668,11 +83062,12 @@ class Resizeable {
82668
83062
  }
82669
83063
 
82670
83064
  class Resize {
82671
- constructor(element, opts = {}) {
83065
+ constructor(element, builder, opts = {}) {
82672
83066
  let defaults = {
82673
83067
  filterSiblingClass: 'is-row-tool'
82674
83068
  };
82675
83069
  this.opts = Object.assign(this, defaults, opts);
83070
+ this.builder = builder;
82676
83071
  this.element = element;
82677
83072
  }
82678
83073
 
@@ -82682,6 +83077,8 @@ class Resize {
82682
83077
  this.resize = new Resizeable({
82683
83078
  pane: col,
82684
83079
  onResize: (width, height) => {
83080
+ this.builder.util.hideControls();
83081
+
82685
83082
  if (width) {
82686
83083
  col.style.flex = 'none';
82687
83084
  col.style.width = `${width}px`; // adjust others
@@ -82709,8 +83106,9 @@ class Resize {
82709
83106
  if (item.classList.contains('is-row-tool')) return;
82710
83107
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82711
83108
 
82712
- if (item === col) return;
82713
- item.style.width = '100%';
83109
+ if (item === col) return; // item.style.width = '100%';
83110
+
83111
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82714
83112
  item.style.flex = '';
82715
83113
  numOfCols++;
82716
83114
  });
@@ -82727,7 +83125,8 @@ class Resize {
82727
83125
  if (item === col) return;
82728
83126
 
82729
83127
  if (item.style.width === '') {
82730
- item.style.width = '100%';
83128
+ // item.style.width = '100%';
83129
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82731
83130
  item.style.flex = '';
82732
83131
  }
82733
83132
  });
@@ -82769,8 +83168,9 @@ class Resize {
82769
83168
  if (item.classList.contains('is-row-tool')) return;
82770
83169
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82771
83170
 
82772
- if (item === col) return;
82773
- item.style.width = '100%';
83171
+ if (item === col) return; // item.style.width = '100%';
83172
+
83173
+ if (!item.getAttribute('data-module')) item.style.width = '100%';
82774
83174
  item.style.flex = '';
82775
83175
  });
82776
83176
  } // /adjust others
@@ -82782,6 +83182,10 @@ class Resize {
82782
83182
  Array.from(col.parentNode.children).map(item => {
82783
83183
  if (item.classList.contains('is-row-tool')) return;
82784
83184
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
83185
+ // // Refresh Module
83186
+ // if(item.getAttribute('data-module')) {
83187
+ // this.builder.util.refreshModuleLayout(item);
83188
+ // }
82785
83189
 
82786
83190
  if (item === col) {
82787
83191
  activeColumnWidth = item.offsetWidth;
@@ -82795,7 +83199,19 @@ class Resize {
82795
83199
  percentage = maxResult / row.offsetWidth * 100;
82796
83200
  }
82797
83201
 
82798
- col.style.width = percentage + '%';
83202
+ col.style.width = percentage + '%'; // Refresh Module
83203
+
83204
+ Array.from(col.parentNode.children).map(item => {
83205
+ if (item.classList.contains('is-row-tool')) return;
83206
+ if (item.classList.contains('is-rowadd-tool')) return;
83207
+
83208
+ if (item.getAttribute('data-module')) {
83209
+ let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
83210
+ item.style.width = moduleWidth + '%';
83211
+ item.style.flex = 'none';
83212
+ this.builder.util.refreshModuleLayout(item);
83213
+ }
83214
+ });
82799
83215
  }
82800
83216
 
82801
83217
  if (col.style.height) {
@@ -82806,10 +83222,15 @@ class Resize {
82806
83222
  if (item.classList.contains('is-rowadd-tool')) return; // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
82807
83223
 
82808
83224
  if (item === col) return;
82809
- item.style.height = '100%';
83225
+ item.style.height = '';
82810
83226
  item.style.minHeight = '';
82811
83227
  });
82812
- }
83228
+ } // To position columnTool correctly, add delay.
83229
+
83230
+
83231
+ setTimeout(() => {
83232
+ col.click();
83233
+ }, 30);
82813
83234
  }
82814
83235
  });
82815
83236
  }
@@ -82820,7 +83241,7 @@ class Resize {
82820
83241
 
82821
83242
  }
82822
83243
 
82823
- class ContentStuff {
83244
+ class ContentStuff$1 {
82824
83245
  constructor(builder) {
82825
83246
  this.builder = builder;
82826
83247
  const util = builder.util;
@@ -83025,19 +83446,6 @@ class ContentStuff {
83025
83446
  outline:none;
83026
83447
  }
83027
83448
 
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
83449
  .transition1 {
83042
83450
  transition: all ease 0.1s;
83043
83451
  }
@@ -83358,6 +83766,9 @@ class ContentStuff {
83358
83766
  .is-tool.is-column-tool button {
83359
83767
  width: 25px;
83360
83768
  height: 25px;
83769
+ display: flex;
83770
+ justify-content: center;
83771
+ align-items: center;
83361
83772
  }
83362
83773
  .is-tool.is-column-tool .cell-add {background: #0fcc52;}
83363
83774
  .is-tool.is-column-tool .cell-more {background: rgba(216, 200, 6, 0.9);}
@@ -83380,6 +83791,9 @@ class ContentStuff {
83380
83791
  .is-tool.is-row-tool button {
83381
83792
  width: 25px;
83382
83793
  height: 25px;
83794
+ display: flex;
83795
+ justify-content: center;
83796
+ align-items: center;
83383
83797
  }
83384
83798
  .is-tool.is-row-tool svg {
83385
83799
  fill: #fff;
@@ -83730,7 +84144,6 @@ class ContentStuff {
83730
84144
 
83731
84145
 
83732
84146
 
83733
-
83734
84147
  .is-builder.builder-active > div:not(.row-active) {
83735
84148
  border-right: 120px rgba(0,0,0,0) solid;
83736
84149
  margin-right: -120px;
@@ -83739,6 +84152,42 @@ class ContentStuff {
83739
84152
  border-left: 120px rgba(0,0,0,0) solid;
83740
84153
  margin-left: -120px;
83741
84154
  }
84155
+
84156
+
84157
+
84158
+
84159
+ /* Prevent css framework overide (Materialize) */
84160
+ .is-ui [type="checkbox"]:not(:checked), .is-ui [type="checkbox"]:checked {
84161
+ position: unset !important;
84162
+ }
84163
+ .is-ui input[type=range] {
84164
+ border: none;
84165
+ }
84166
+ .is-ui form {
84167
+ background: unset;
84168
+ margin: unset;
84169
+ padding: unset;
84170
+ border: unset;
84171
+ }
84172
+ .is-ui svg {
84173
+ max-width: unset;
84174
+ }
84175
+
84176
+ /* Prevent css framework overide (Tailwind) */
84177
+ .is-ui svg {
84178
+ display: initial !important;
84179
+ }
84180
+ .is-section-tool svg,
84181
+ .is-row-tool svg {
84182
+ display: initial !important;
84183
+ }
84184
+
84185
+ /* Make slider block resizable */
84186
+ .is-builder > div > div[data-module=slider-builder].cell-active {
84187
+ padding: 0 2px 4px !important;
84188
+ z-index: 1 !important;
84189
+ }
84190
+
83742
84191
  `;
83743
84192
  builder.contentStuff.insertAdjacentHTML('afterbegin', `
83744
84193
  <style>
@@ -84286,7 +84735,7 @@ class ContentBuilder {
84286
84735
  },
84287
84736
  useCssClasses: true,
84288
84737
  useButtonPlugin: false,
84289
- enableDragResize: false
84738
+ enableDragResize: true
84290
84739
  }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
84291
84740
 
84292
84741
  this.opts = Object.assign(this, defaults, opts);
@@ -84397,7 +84846,8 @@ class ContentBuilder {
84397
84846
  if (this.opts.row !== '' && this.opts.cols.length > 0) ; else {
84398
84847
  if (this.opts.cellFormat === '' && this.opts.rowFormat === '') {
84399
84848
  // DEFAULT: Built-in simple css grid
84400
- this.opts.row = 'row clearfix';
84849
+ this.opts.row = 'row'; //row clrfx
84850
+
84401
84851
  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
84852
  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
84853
  this.opts.colsizes = [//needed for columns in which the size increment is not constant.
@@ -84441,7 +84891,7 @@ class ContentBuilder {
84441
84891
  }
84442
84892
 
84443
84893
  this.contentStuff = contentStuff;
84444
- this.stuff = new ContentStuff(this);
84894
+ this.stuff = new ContentStuff$1(this);
84445
84895
  }
84446
84896
 
84447
84897
  this.isTouchSupport = util.isTouchSupport();
@@ -84735,8 +85185,8 @@ class ContentBuilder {
84735
85185
  }); // Convenience variable for outside access, for example, from snippet dialog (assets/minimalist-blocks/snippets.html))
84736
85186
 
84737
85187
  window._cb = this;
84738
- window.applyLargerImage = this.applyLargerImage;
84739
- window.returnUrl = this.returnUrl; // same as applyLargerImage (NEW)
85188
+ window.applyLargerImage = this.applyLargerImage.bind(this);
85189
+ window.returnUrl = this.returnUrl.bind(this); // same as applyLargerImage (NEW)
84740
85190
 
84741
85191
  window.selectFile = this.selectFile.bind(this);
84742
85192
  window.selectImage = this.selectImage.bind(this);
@@ -85073,7 +85523,7 @@ class ContentBuilder {
85073
85523
  var noedit = result[0].noedit;
85074
85524
  var bSnippet;
85075
85525
 
85076
- if (html.indexOf('row clearfix') === -1) {
85526
+ if (html.indexOf('"row') === -1) {
85077
85527
  bSnippet = true; // Just snippet (without row/column grid)
85078
85528
  } else {
85079
85529
  bSnippet = false; // Snippet is wrapped in row/colum
@@ -85086,7 +85536,10 @@ class ContentBuilder {
85086
85536
  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
85537
 
85088
85538
  if (rowClass !== '' && colClass.length === 12) {
85089
- html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
85539
+ // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
85540
+ html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
85541
+
85542
+ html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
85090
85543
  html = html.replace(new RegExp('column full', 'g'), colClass[11]);
85091
85544
  html = html.replace(new RegExp('column half', 'g'), colClass[5]);
85092
85545
  html = html.replace(new RegExp('column third', 'g'), colClass[3]);
@@ -86352,6 +86805,7 @@ class ContentBuilder {
86352
86805
  }
86353
86806
 
86354
86807
  handleCellClick(col, e) {
86808
+ if (this.cleanEditing) col.parentNode.querySelector('.is-row-tool').style.display = '';
86355
86809
  this.lightboxOpen(col);
86356
86810
  const util = this.util;
86357
86811
  util.clearActiveCell();
@@ -86366,6 +86820,7 @@ class ContentBuilder {
86366
86820
  this.dom.removeClass(builder, 'builder-active');
86367
86821
  });
86368
86822
  this.dom.addClass(row.parentNode, 'builder-active');
86823
+ this.dom.addClass(this.doc.body, 'content-edit');
86369
86824
 
86370
86825
  if (row.childElementCount - 2 === 1) ; else {
86371
86826
  this.dom.addClass(row, 'row-outline');
@@ -86483,7 +86938,7 @@ class ContentBuilder {
86483
86938
  } // Show Lock Indicator
86484
86939
 
86485
86940
 
86486
- this.colTool.showHideLockIndicator(col); // Check if last row, make sure the Row Add Tool visible
86941
+ this.colTool.showHideLockIndicator(col); // Extra: Check if last row, make sure the Row Add Tool visible
86487
86942
 
86488
86943
  const tool = row.querySelector('.is-rowadd-tool');
86489
86944
  const tollAddButton = tool.querySelector('button');
@@ -86496,14 +86951,17 @@ class ContentBuilder {
86496
86951
  let lastChild = children[children.length - 1];
86497
86952
 
86498
86953
  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;
86954
+ const section = row.closest('.is-section');
86955
+
86956
+ if (section) {
86957
+ const sectionOffset = this.dom.getElementOffset(section);
86958
+ let h1 = sectionOffset.top + sectionOffset.height;
86959
+ const rowOffset = this.dom.getElementOffset(row);
86960
+ let h2 = rowOffset.top + rowOffset.height;
86504
86961
 
86505
- if (h1 - h2 < 19) {
86506
- tollAddButton.style.marginTop = '-14px';
86962
+ if (h1 - h2 < 19) {
86963
+ tollAddButton.style.marginTop = '-14px';
86964
+ }
86507
86965
  }
86508
86966
  }
86509
86967
  }
@@ -86515,7 +86973,7 @@ class ContentBuilder {
86515
86973
  } // Enable resizable on click
86516
86974
 
86517
86975
 
86518
- this.resize = new Resize(col);
86976
+ this.resize = new Resize(col, this);
86519
86977
  this.resize.enable();
86520
86978
  }
86521
86979
  }
@@ -86865,6 +87323,11 @@ class ContentBuilder {
86865
87323
  e.preventDefault();
86866
87324
  }
86867
87325
  }
87326
+
87327
+ if (this.cleanEditing) {
87328
+ this.colTool.columnTool.classList.remove('active');
87329
+ col.parentNode.querySelector('.is-row-tool').style.display = 'none';
87330
+ }
86868
87331
  }
86869
87332
 
86870
87333
  createRange(node, chars, range) {
@@ -86995,12 +87458,12 @@ class ContentBuilder {
86995
87458
  var el; // var curr;
86996
87459
 
86997
87460
  try {
86998
- if (window.getSelection) {
87461
+ if (this.win.getSelection) {
86999
87462
  // 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();
87463
+ el = this.win.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
87464
+ } else if (this.doc.selection) {
87465
+ // curr = this.doc.selection.createRange();
87466
+ el = this.doc.selection.createRange().parentElement();
87004
87467
  }
87005
87468
  } catch (e) {
87006
87469
  return;
@@ -87017,16 +87480,16 @@ class ContentBuilder {
87017
87480
  //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
87481
  //With this, we change it into <p>
87019
87482
  if(el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div') {
87020
- document.execCommand('formatBlock', false, '<p>');
87483
+ this.doc.execCommand('formatBlock', false, '<p>');
87021
87484
  }
87022
87485
  }*/
87023
87486
  if (el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div') {
87024
- document.execCommand('formatBlock', false, '<p>');
87487
+ this.doc.execCommand('formatBlock', false, '<p>');
87025
87488
  }
87026
87489
  /*
87027
87490
  if(isFirefox) {
87028
87491
  //On FF (when enter at the end of list) jQuery(curr).html() returns undefined
87029
- if(curr) document.execCommand('formatBlock', false, '<p>');
87492
+ if(curr) this.doc.execCommand('formatBlock', false, '<p>');
87030
87493
  }*/
87031
87494
 
87032
87495
 
@@ -88591,12 +89054,173 @@ var pace = {exports: {}};
88591
89054
 
88592
89055
  var Pace = pace.exports;
88593
89056
 
89057
+ class ContentStuff {
89058
+ constructor(builder) {
89059
+ this.builder = builder; // const util = builder.util;
89060
+
89061
+ const html = `
89062
+ <iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
89063
+ `;
89064
+ builder.contentStuff.insertAdjacentHTML('afterbegin', html);
89065
+ let css = `
89066
+ .is-box-tool {
89067
+ display: none;
89068
+ z-index: 1;
89069
+ position: absolute;
89070
+ top: auto;
89071
+ bottom: 0;
89072
+ left: calc(50% - 80px);
89073
+ right: auto;
89074
+ box-sizing: border-box;
89075
+ line-height: 30px;
89076
+ outline: none;
89077
+ text-align: center;
89078
+ cursor: pointer;
89079
+ border-radius: 0px;
89080
+ overflow: hidden;
89081
+ }
89082
+ .is-box-tool button {
89083
+ width: 40px !important;
89084
+ height: 40px !important;
89085
+ cursor: pointer;
89086
+ }
89087
+ .is-box-tool button svg {
89088
+ fill: #fff !important;
89089
+ }
89090
+ .is-box-tool button.is-box-edit {
89091
+ background: rgb(0, 172, 214);
89092
+ }
89093
+ .is-box-tool button.is-module-edit {
89094
+ background: #FF9800;
89095
+ }
89096
+
89097
+ .is-section-tool {
89098
+ display: none;
89099
+ z-index: 1;
89100
+ position: absolute;
89101
+ top: 15%;
89102
+ right: 0px;
89103
+ left: auto;
89104
+ width: 40px;
89105
+ height: 80px;
89106
+ }
89107
+ .is-section-tool > button {
89108
+ width: 40px;
89109
+ height: 40px;
89110
+ border-radius: 0;
89111
+ line-height: 40px;
89112
+ padding: 0px;
89113
+ font-size: 13px;
89114
+ cursor: pointer;
89115
+ border: none;
89116
+ }
89117
+ .is-section-tool .is-section-edit {
89118
+ background: rgb(0, 172, 214);
89119
+ }
89120
+ .is-section-tool .is-section-edit svg {
89121
+ fill: #fff !important;
89122
+ }
89123
+ .is-section-tool .is-section-remove {
89124
+ background: rgb(247, 99, 46);
89125
+ color: #fff !important;
89126
+ }
89127
+
89128
+ .is-wrapper {
89129
+ opacity: 0.01;
89130
+ /* setting display=none makes initial script may not work properly */
89131
+ transform-origin: top;
89132
+ }
89133
+
89134
+ .box-active {
89135
+ animation-name: box-active-anim;
89136
+ animation-duration: 1s;
89137
+ }
89138
+
89139
+ @keyframes box-active-anim {
89140
+ 0% {
89141
+ transform: scale(1);
89142
+ }
89143
+ 50% {
89144
+ transform: scale(0.95);
89145
+ }
89146
+ 100% {
89147
+ transform: scale(1);
89148
+ }
89149
+ }
89150
+
89151
+ .section-active {
89152
+ animation-name: section-active-anim;
89153
+ animation-duration: 1s;
89154
+ }
89155
+
89156
+ @keyframes section-active-anim {
89157
+ 0% {transform:scale(1);}
89158
+ 50% {transform:scale(0.95);}
89159
+ 100% {transform:scale(1);}
89160
+ }
89161
+
89162
+ .box-hover {
89163
+ outline: 1px solid #00da89;
89164
+ outline-offset: -1px;
89165
+ }
89166
+ .is-section:not(.box-space) .box-hover .is-overlay,
89167
+ .is-section:not(.box-space).box-hover .is-overlay {
89168
+ top: 1px;
89169
+ bottom: 1px;
89170
+ left: 1px;
89171
+ right: 1px;
89172
+ }
89173
+
89174
+ .box-active .is-container {
89175
+ border: rgba(0,0,0,0.1) 1px solid;
89176
+ }
89177
+
89178
+ .box-active {
89179
+ outline: 1px solid #00da89;
89180
+ outline-offset: -1px;
89181
+ }
89182
+ .is-section:not(.box-space) .box-active .is-overlay,
89183
+ .is-section:not(.box-space).box-active .is-overlay {
89184
+ top: 1px;
89185
+ bottom: 1px;
89186
+ left: 1px;
89187
+ right: 1px;
89188
+ }
89189
+ .section-active {
89190
+ outline: 1px solid #00da89;
89191
+ outline-offset: -1px;
89192
+ }
89193
+ .is-section:not(.box-space).section-active .is-overlay {
89194
+ top: 1px;
89195
+ bottom: 1px;
89196
+ left: 1px;
89197
+ right: 1px;
89198
+ }
89199
+
89200
+ .content-edit .is-section-tool,
89201
+ .content-edit .is-box-tool {
89202
+ display: none !important;
89203
+ }
89204
+ .content-edit .box-hover {
89205
+ outline: none !important;
89206
+ }
89207
+ `;
89208
+ builder.contentStuff.insertAdjacentHTML('afterbegin', `
89209
+ <style>
89210
+ ${css}
89211
+ </style>
89212
+ `);
89213
+ }
89214
+
89215
+ }
89216
+
88594
89217
  const dom = new Dom$1();
88595
89218
 
88596
89219
  class ContentBox {
88597
89220
  constructor(settings = {}) {
88598
89221
  const defaults = {
88599
89222
  wrapper: '.is-wrapper',
89223
+ sectionHoverOutline: false,
88600
89224
  useSidebar: true,
88601
89225
  disableLoadingStatus: false,
88602
89226
  sidebarData: {
@@ -90997,6 +91621,7 @@ class ContentBox {
90997
91621
  },
90998
91622
  useCssClasses: true,
90999
91623
  useButtonPlugin: false,
91624
+ enableDragResize: true,
91000
91625
 
91001
91626
  /* Old Version (backward compatible) */
91002
91627
  onAddSectionOpen: function () {},
@@ -91041,9 +91666,39 @@ class ContentBox {
91041
91666
 
91042
91667
  if (this.settings.contentStyleWithSample) {
91043
91668
  this.settings.contentStyles = this.settings.contentStylesAlt;
91669
+ } // Experimental for iframe
91670
+
91671
+
91672
+ let win, doc;
91673
+
91674
+ if (this.iframe) {
91675
+ win = this.iframe.contentWindow;
91676
+ let iframeDocument = this.iframe.contentDocument || this.iframe.contentWindow.document;
91677
+ doc = iframeDocument;
91678
+ this.iframeDocument = iframeDocument;
91679
+ } else {
91680
+ win = window;
91681
+ doc = document;
91682
+ }
91683
+
91684
+ this.win = win;
91685
+ this.doc = doc; // Content stuff
91686
+
91687
+ if (this.iframe) {
91688
+ let contentStuff = doc.querySelector('.content-stuff');
91689
+
91690
+ if (!contentStuff) {
91691
+ contentStuff = document.createElement('div');
91692
+ contentStuff.className = 'content-stuff is-ui';
91693
+ contentStuff.id = '_cbhtml';
91694
+ doc.body.appendChild(contentStuff);
91695
+ }
91696
+
91697
+ this.contentStuff = contentStuff;
91698
+ this.stuff = new ContentStuff(this);
91044
91699
  }
91045
91700
 
91046
- this.wrapperEl = document.querySelector(this.wrapper);
91701
+ this.wrapperEl = this.doc.querySelector(this.wrapper);
91047
91702
 
91048
91703
  if (dom.hasClass(this.wrapperEl, 'preview')) {
91049
91704
  this.preview = true;
@@ -91063,9 +91718,9 @@ class ContentBox {
91063
91718
  //Run parts of box(-flex).js
91064
91719
  this.box(); //Run built-in plugin inside the builder
91065
91720
 
91066
- setTimeout(function () {
91067
- if (window.skrollr) {
91068
- let obj = window.skrollr.get();
91721
+ setTimeout(() => {
91722
+ if (this.win.skrollr) {
91723
+ let obj = this.win.skrollr.get();
91069
91724
  if (obj) obj.refresh();
91070
91725
  }
91071
91726
  }, 100);
@@ -91077,10 +91732,9 @@ class ContentBox {
91077
91732
  let old2 = this.settings.onChange;
91078
91733
 
91079
91734
  this.settings.onChange = () => {
91080
- old2.call(this);
91081
- setTimeout(() => {
91082
- this.quickPosTool();
91083
- }, 100);
91735
+ old2.call(this); // setTimeout(()=>{
91736
+ // this.quickPosTool();
91737
+ // }, 100);
91084
91738
  }; // Hidden placement for builder things
91085
91739
 
91086
91740
 
@@ -91114,6 +91768,7 @@ class ContentBox {
91114
91768
  window.applyBoxImage = this.boxImage.bind(this);
91115
91769
  window.applyLargerImage = this.applyLargerImage.bind(this);
91116
91770
  window.returnUrl = this.returnUrl.bind(this);
91771
+ this.win.applyBoxImage = this.boxImage.bind(this);
91117
91772
  window._contentbox = this;
91118
91773
  } // constructor
91119
91774
 
@@ -91122,6 +91777,7 @@ class ContentBox {
91122
91777
  this.editor = new ContentBuilder({
91123
91778
  container: '.is-container',
91124
91779
  page: '.is-wrapper',
91780
+ iframe: this.settings.iframe,
91125
91781
  imageAdjust: 2,
91126
91782
  // ContentBuilder
91127
91783
  scriptPath: this.settings.scriptPath,
@@ -91145,11 +91801,11 @@ class ContentBox {
91145
91801
  onChange: () => {
91146
91802
  this.settings.onChange();
91147
91803
  },
91148
- onRefreshTool: () => {
91149
- setTimeout(() => {
91150
- this.quickPosTool();
91151
- }, 100);
91152
- },
91804
+ // onRefreshTool: ()=>{
91805
+ // setTimeout(()=>{
91806
+ // this.quickPosTool();
91807
+ // }, 100);
91808
+ // },
91153
91809
  useLightbox: this.settings.useLightbox,
91154
91810
  themes: this.settings.themes,
91155
91811
  moduleConfig: this.settings.moduleConfig,
@@ -91234,23 +91890,29 @@ class ContentBox {
91234
91890
  cssClasses: this.settings.cssClasses,
91235
91891
  useCssClasses: this.settings.useCssClasses,
91236
91892
  useButtonPlugin: this.settings.useButtonPlugin,
91893
+ enableDragResize: this.settings.enableDragResize,
91237
91894
  zoom: this.settings.zoom,
91238
91895
  onZoomStart: () => {
91239
- // const wrapper = this.wrapperEl;
91240
- // wrapper.style.transition = 'all ease 0.1s';
91241
- let elms = document.querySelectorAll('.is-section-tool');
91896
+ const wrapper = this.wrapperEl; // wrapper.style.transition = 'all ease 0.1s';
91897
+
91898
+ let elms = wrapper.querySelectorAll('.is-section-tool');
91242
91899
  Array.prototype.forEach.call(elms, function (elm) {
91243
91900
  if (elm.style.display === 'block') {
91244
91901
  elm.setAttribute('data-section-active', '');
91245
91902
  elm.style.display = 'none';
91246
91903
  }
91247
91904
  });
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
- }
91905
+ elms = wrapper.querySelectorAll('.is-box-tool');
91906
+ Array.prototype.forEach.call(elms, function (elm) {
91907
+ if (elm.style.display === 'flex') {
91908
+ elm.setAttribute('data-box-active', '');
91909
+ elm.style.display = 'none';
91910
+ }
91911
+ }); // let boxTool = document.querySelector('#divBoxTool');
91912
+ // if(boxTool.style.display==='flex') {
91913
+ // boxTool.setAttribute('data-box-active', '');
91914
+ // boxTool.style.display = 'none';
91915
+ // }
91254
91916
 
91255
91917
  this.wrapperEl.style.transition = 'none';
91256
91918
  },
@@ -91261,23 +91923,29 @@ class ContentBox {
91261
91923
  this.wrapperEl.style.marginTop = `${x}px`;
91262
91924
  },
91263
91925
  onZoomEnd: () => {
91264
- const section = this.wrapperEl.querySelector('.is-section');
91926
+ const wrapper = this.wrapperEl;
91927
+ const section = wrapper.querySelector('.is-section');
91265
91928
  if (!section) return; // empty content
91266
91929
 
91267
91930
  this.addSpace();
91268
- let elm = document.querySelector('.is-section-tool[data-section-active]');
91931
+ let elm = wrapper.querySelector('.is-section-tool[data-section-active]');
91269
91932
 
91270
91933
  if (elm) {
91271
91934
  elm.removeAttribute('data-section-active');
91272
91935
  elm.style.display = 'block';
91273
91936
  }
91274
91937
 
91275
- elm = document.querySelector('#divBoxTool[data-box-active]');
91938
+ elm = wrapper.querySelector('.is-box-tool[data-box-active]');
91276
91939
 
91277
91940
  if (elm) {
91278
91941
  elm.removeAttribute('data-box-active');
91279
91942
  elm.style.display = 'flex';
91280
- }
91943
+ } // elm = document.querySelector('#divBoxTool[data-box-active]');
91944
+ // if(elm) {
91945
+ // elm.removeAttribute('data-box-active');
91946
+ // elm.style.display = 'flex';
91947
+ // }
91948
+
91281
91949
 
91282
91950
  this.rePositionTool();
91283
91951
  this.wrapperEl.style.transition = '';
@@ -91308,7 +91976,7 @@ class ContentBox {
91308
91976
  let num = url.replace('#section', '');
91309
91977
 
91310
91978
  if (!isNaN(parseInt(num))) {
91311
- let sections = document.querySelectorAll('.is-section');
91979
+ let sections = this.doc.querySelectorAll('.is-section');
91312
91980
  let gotoSection;
91313
91981
  let x = 0;
91314
91982
  sections.forEach(function (section) {
@@ -91328,7 +91996,7 @@ class ContentBox {
91328
91996
  e.preventDefault();
91329
91997
  }
91330
91998
  } else {
91331
- let bookmark = document.querySelector(url);
91999
+ let bookmark = this.doc.querySelector(url);
91332
92000
 
91333
92001
  if (bookmark) {
91334
92002
  this.scrollTo(bookmark);
@@ -91346,7 +92014,7 @@ class ContentBox {
91346
92014
 
91347
92015
  init() {
91348
92016
  // Add special css (remove on destroy)
91349
- dom.appendHtml(document.head, `<style id="_contentbox_lightbox">
92017
+ dom.appendHtml(this.doc.head, `<style id="_contentbox_lightbox">
91350
92018
  body {
91351
92019
  background: ${this.settings.backgroundColor};
91352
92020
  }
@@ -91453,13 +92121,18 @@ class ContentBox {
91453
92121
  } // Add document Click event
91454
92122
 
91455
92123
 
91456
- document.addEventListener('click', this.doDocumentClick = e => {
92124
+ this.doc.addEventListener('click', this.doDocumentClick = e => {
91457
92125
  e = e || window.event;
91458
92126
  var target = e.target || e.srcElement;
91459
92127
  let a = false,
91460
92128
  b = false,
91461
92129
  c = false,
91462
- d = false;
92130
+ d = false,
92131
+ f = false,
92132
+ g = false,
92133
+ h = false,
92134
+ i = false,
92135
+ j = false;
91463
92136
  let element = target;
91464
92137
 
91465
92138
  while (element) {
@@ -91468,6 +92141,11 @@ class ContentBox {
91468
92141
  if (dom.hasClass(element, 'is-sidebar-content')) a = true;
91469
92142
  if (dom.hasClass(element, 'is-sidebar')) b = true;
91470
92143
  if (dom.hasClass(element, 'is-builder')) c = true;
92144
+ if (dom.hasClass(element, 'is-wrapper')) f = true;
92145
+ if (dom.hasClass(element, 'is-rte-tool')) g = true;
92146
+ if (dom.hasClass(element, 'is-modal')) h = true;
92147
+ if (dom.hasClass(element, 'is-pop')) i = true;
92148
+ if (dom.hasClass(element, 'is-tool')) j = true;
91471
92149
 
91472
92150
  if (dom.hasClass(element, 'is-section')) {
91473
92151
  if (element.hasAttribute('data-anim-start') || element.hasAttribute('data-anim-end')) d = true;
@@ -91476,6 +92154,19 @@ class ContentBox {
91476
92154
  element = element.parentNode;
91477
92155
  }
91478
92156
 
92157
+ if (!(a || b || f || g || h || i || j)) {
92158
+ const boxHover = this.doc.querySelector('.box-hover');
92159
+ if (boxHover) dom.removeClass(boxHover, 'box-hover');
92160
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92161
+ boxTools.forEach(tool => {
92162
+ tool.style.display = 'none';
92163
+ });
92164
+ const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92165
+ sectionTools.forEach(tool => {
92166
+ tool.style.display = 'none';
92167
+ });
92168
+ }
92169
+
91479
92170
  if (!(a || b)) {
91480
92171
  this.sidebar.closeSidebar();
91481
92172
  }
@@ -91483,7 +92174,52 @@ class ContentBox {
91483
92174
  if (c && d) {
91484
92175
  this.controlHiddenOnScroll = true;
91485
92176
  }
91486
- }); // Hide tool on scrolling
92177
+ });
92178
+
92179
+ if (this.iframe) {
92180
+ document.addEventListener('click', this.doDocumentClick = e => {
92181
+ e = e || window.event;
92182
+ var target = e.target || e.srcElement;
92183
+ let a = false,
92184
+ b = false,
92185
+ f = false,
92186
+ g = false,
92187
+ h = false,
92188
+ i = false,
92189
+ j = false;
92190
+ let element = target;
92191
+
92192
+ while (element) {
92193
+ if (!element.tagName) break;
92194
+ if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
92195
+ if (dom.hasClass(element, 'is-sidebar-content')) a = true;
92196
+ if (dom.hasClass(element, 'is-sidebar')) b = true;
92197
+ if (dom.hasClass(element, 'is-wrapper')) f = true;
92198
+ if (dom.hasClass(element, 'is-rte-tool')) g = true;
92199
+ if (dom.hasClass(element, 'is-modal')) h = true;
92200
+ if (dom.hasClass(element, 'is-pop')) i = true;
92201
+ if (dom.hasClass(element, 'is-tool')) j = true;
92202
+ element = element.parentNode;
92203
+ }
92204
+
92205
+ if (!(a || b || f || g || h || i || j)) {
92206
+ const boxHover = this.doc.querySelector('.box-hover');
92207
+ if (boxHover) dom.removeClass(boxHover, 'box-hover');
92208
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92209
+ boxTools.forEach(tool => {
92210
+ tool.style.display = 'none';
92211
+ });
92212
+ const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92213
+ sectionTools.forEach(tool => {
92214
+ tool.style.display = 'none';
92215
+ });
92216
+ }
92217
+
92218
+ if (!(a || b)) {
92219
+ this.sidebar.closeSidebar();
92220
+ }
92221
+ });
92222
+ } // Hide tool on scrolling
91487
92223
 
91488
92224
  /*
91489
92225
  let timeoutId;
@@ -91514,6 +92250,7 @@ class ContentBox {
91514
92250
  // document.addEventListener('keydown', this.doDocumentKeydown = (e)=>{
91515
92251
  // console.log(e.target);
91516
92252
  // });
92253
+
91517
92254
  } // init
91518
92255
 
91519
92256
 
@@ -91539,7 +92276,7 @@ class ContentBox {
91539
92276
 
91540
92277
 
91541
92278
  box() {
91542
- const navbar = document.querySelector('.is-section-navbar');
92279
+ const navbar = this.doc.querySelector('.is-section-navbar');
91543
92280
 
91544
92281
  if (navbar) {
91545
92282
  const links = navbar.querySelectorAll('a');
@@ -91554,7 +92291,7 @@ class ContentBox {
91554
92291
  let num = url.replace('#section', '');
91555
92292
 
91556
92293
  if (!isNaN(parseInt(num))) {
91557
- let sections = document.querySelectorAll('.is-section');
92294
+ let sections = this.doc.querySelectorAll('.is-section');
91558
92295
  let gotoSection;
91559
92296
  let x = 0;
91560
92297
  sections.forEach(function (section) {
@@ -91575,7 +92312,7 @@ class ContentBox {
91575
92312
  }
91576
92313
  } else {
91577
92314
  try {
91578
- let bookmark = document.querySelector(url);
92315
+ let bookmark = this.doc.querySelector(url);
91579
92316
 
91580
92317
  if (bookmark) {
91581
92318
  this.scrollTo(bookmark);
@@ -91585,11 +92322,11 @@ class ContentBox {
91585
92322
  }
91586
92323
  }
91587
92324
  }
91588
- }
92325
+ } // if(link.closest('.is-menu-search')) return;
92326
+ // if(link.closest('.is-menu-toggle')) return;
92327
+ // e.preventDefault();
92328
+ // e.stopImmediatePropagation();
91589
92329
 
91590
- if (link.closest('.is-menu-search')) return;
91591
- e.preventDefault();
91592
- e.stopImmediatePropagation();
91593
92330
  });
91594
92331
  });
91595
92332
  }
@@ -91629,8 +92366,19 @@ class ContentBox {
91629
92366
  }
91630
92367
 
91631
92368
  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);
92369
+ 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);
92370
+ // Prepare for tooltip
92371
+
92372
+ let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
92373
+ Array.prototype.forEach.call(elms, elm => {
92374
+ elm.setAttribute('data-title', elm.getAttribute('title'));
92375
+
92376
+ if (!this.iframe) {
92377
+ this.editor.tooltip.set(elm, 5, 3);
92378
+ } else {
92379
+ this.editor.tooltip.set(elm, 5, 3, true);
92380
+ }
92381
+ });
91634
92382
  const btnSectionEdit = section.querySelector('.is-section-edit');
91635
92383
  btnSectionEdit.addEventListener('click', () => {
91636
92384
  this.editsection.edit();
@@ -91644,6 +92392,86 @@ class ContentBox {
91644
92392
 
91645
92393
 
91646
92394
  boxSetup(box) {
92395
+ let tool = box.querySelector('.is-box-tool');
92396
+ if (tool) tool.parentNode.removeChild(tool);
92397
+ 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);
92398
+ // Prepare for tooltip
92399
+
92400
+ if (tool) {
92401
+ let elms = tool.querySelectorAll('[title]');
92402
+ Array.prototype.forEach.call(elms, elm => {
92403
+ elm.setAttribute('data-title', elm.getAttribute('title'));
92404
+
92405
+ if (!this.iframe) {
92406
+ this.editor.tooltip.set(elm, 5, 3);
92407
+ } else {
92408
+ this.editor.tooltip.set(elm, 5, 3, true);
92409
+ }
92410
+ });
92411
+ }
92412
+
92413
+ const btnBoxEdit = box.querySelector('.is-box-edit');
92414
+ if (btnBoxEdit) btnBoxEdit.addEventListener('click', () => {
92415
+ this.editbox.edit();
92416
+ });
92417
+ const btnModuleEdit = box.querySelector('.is-module-edit');
92418
+ if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
92419
+ this.editbox.editModule();
92420
+ });
92421
+ const fileCover = box.querySelector('.input-file-cover');
92422
+ if (fileCover) fileCover.addEventListener('click', () => {
92423
+ /*
92424
+ // Remove Waiting Indicator
92425
+ const builderStuff = this.builderStuff;
92426
+ const indicator = builderStuff.querySelector('.waiting-indicator');
92427
+ if(indicator) {
92428
+ alert('Please wait until another upload process completed.')
92429
+ e.preventDefault();
92430
+ return;
92431
+ }
92432
+ */
92433
+ // prevent lost of activeBox during uploading cover (save to targetBox)
92434
+ this.editbox.targetBox = this.activeBox;
92435
+ });
92436
+ if (fileCover) fileCover.addEventListener('change', e => {
92437
+ if (fileCover.value === '') return;
92438
+ this.editor.saveForUndo(); // Show Waiting Indicator
92439
+
92440
+ const builderStuff = this.builderStuff;
92441
+ dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
92442
+ <div class="waiting-indicator">
92443
+ <div>${out('Uploading..')}</div>
92444
+ </div>
92445
+ `);
92446
+ const indicator = builderStuff.querySelector('.waiting-indicator');
92447
+ let targetBox = this.editbox.targetBox;
92448
+ let top, left;
92449
+
92450
+ if (!this.iframe) {
92451
+ top = targetBox.getBoundingClientRect().top + window.pageYOffset;
92452
+ left = targetBox.getBoundingClientRect().left + window.pageXOffset;
92453
+ } else {
92454
+ let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
92455
+ let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
92456
+ top = targetBox.getBoundingClientRect().top + adjY;
92457
+ left = targetBox.getBoundingClientRect().left + adjX;
92458
+ }
92459
+
92460
+ indicator.style.top = top + 'px';
92461
+ indicator.style.left = left + 'px';
92462
+ box.querySelector('.input-custom-value').value = this.settings.customval;
92463
+
92464
+ if (this.settings.onUploadCoverImage) {
92465
+ this.settings.onUploadCoverImage(e);
92466
+ } else {
92467
+ box.querySelector('.is-cover-upload').submit();
92468
+ }
92469
+
92470
+ fileCover.value = ''; // Clear Input
92471
+
92472
+ e.preventDefault();
92473
+ e.stopImmediatePropagation();
92474
+ });
91647
92475
  box.addEventListener('mouseenter', () => {
91648
92476
  this.positionTool(box);
91649
92477
  let activeSection;
@@ -91656,6 +92484,11 @@ class ContentBox {
91656
92484
 
91657
92485
  this.activeBox = box;
91658
92486
  this.activeSection = activeSection;
92487
+ const elms = this.doc.querySelectorAll('.box-hover');
92488
+ elms.forEach(elm => {
92489
+ dom.removeClass(elm, 'box-hover');
92490
+ });
92491
+ if (this.sectionHoverOutline) dom.addClass(this.activeBox, 'box-hover');
91659
92492
  });
91660
92493
  } // boxSetup
91661
92494
 
@@ -91941,26 +92774,29 @@ class ContentBox {
91941
92774
 
91942
92775
  this.positionTool(box);
91943
92776
  }
91944
-
92777
+ /*
91945
92778
  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';
92779
+ let box = this.activeBox;
92780
+ if(!box) return;
92781
+ let leftadj = 40;
92782
+ const boxTool = this.boxTool;
92783
+ const elmOffset = dom.getElementOffset(box);
92784
+ let offsetTop = elmOffset.top;
92785
+ let offsetLeft = elmOffset.left;
92786
+ let offsetWidth = elmOffset.width;
92787
+ let offsetHeight = elmOffset.height;
92788
+ let top = offsetTop + offsetHeight - 40;
92789
+ let left = offsetLeft + offsetWidth/2;
92790
+ boxTool.style.top = top + 'px';
92791
+ boxTool.style.left = (left - leftadj) + 'px';
92792
+ boxTool.style.display = 'flex';
91960
92793
  }
92794
+ */
92795
+
91961
92796
 
91962
92797
  positionTool(box) {
91963
- // Zoom
92798
+ if (!box) return; // Zoom
92799
+
91964
92800
  var zoom;
91965
92801
 
91966
92802
  if (localStorage.getItem('_zoom') !== null) {
@@ -91969,40 +92805,51 @@ class ContentBox {
91969
92805
  zoom = this.settings.zoom; //1;
91970
92806
  }
91971
92807
 
91972
- let leftadj;
91973
- const boxTool = document.querySelector('#divBoxTool');
91974
92808
  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;
92809
+ /*
92810
+ let leftadj;
92811
+ let boxTool = document.querySelector('#divBoxTool');
92812
+ if(sectionNavbar) {
92813
+ document.querySelector('#form-upload-cover').style.display = 'none';
92814
+ document.querySelector('#btnEditBox').style.display = 'none';
92815
+ document.querySelector('#btnEditModule').style.display = 'inline-block';
92816
+ boxTool.style.width = '40px';
92817
+ leftadj = 20;
92818
+ } else if(box.querySelectorAll('.is-overlay-content[data-module]').length>0) {
92819
+ document.querySelector('#form-upload-cover').style.display = 'none';
92820
+ document.querySelector('#btnEditBox').style.display = 'inline-block';
92821
+ document.querySelector('#btnEditModule').style.display = 'inline-block';
92822
+ boxTool.style.width = '80px';
92823
+ leftadj = 40;
91988
92824
  } 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;
92825
+ document.querySelector('#form-upload-cover').style.display = 'block';
92826
+ document.querySelector('#btnEditBox').style.display = 'inline-block';
92827
+ document.querySelector('#btnEditModule').style.display = 'none';
92828
+ boxTool.style.width = '80px';
92829
+ leftadj = 40;
91994
92830
  }
91995
-
91996
- const elmOffset = dom.getElementOffset(box);
92831
+ const elmOffset = dom.getElementOffset(box);
91997
92832
  let offsetTop = elmOffset.top;
91998
92833
  let offsetLeft = elmOffset.left;
91999
92834
  let offsetWidth = elmOffset.width;
92000
92835
  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';
92836
+ let top, left;
92837
+ if(!this.iframe) {
92838
+ let top = offsetTop + offsetHeight - 40;
92839
+ let left = offsetLeft + offsetWidth/2;
92840
+ boxTool.style.top = top + 'px';
92841
+ boxTool.style.left = (left - leftadj) + 'px';
92842
+ } else {
92843
+ let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
92844
+ let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
92845
+ top = offsetHeight - 40 + box.getBoundingClientRect().top + adjY;
92846
+ left = (offsetWidth/2) + box.getBoundingClientRect().left + adjX;
92847
+ boxTool.style.top = top + 'px';
92848
+ boxTool.style.left = (left - leftadj) + 'px';
92849
+ }
92850
+ boxTool.style.display = 'flex';
92851
+ */
92852
+
92006
92853
  const sectionTools = this.wrapperEl.querySelectorAll('.is-section-tool');
92007
92854
  sectionTools.forEach(tool => {
92008
92855
  tool.style.display = 'none';
@@ -92022,6 +92869,39 @@ class ContentBox {
92022
92869
  sectionTool.style.display = 'block';
92023
92870
  sectionTool.style.transform = 'scale(' + 1 / zoom + ')';
92024
92871
  sectionTool.style.transformOrigin = 'top right';
92872
+ } //new box tool
92873
+
92874
+
92875
+ const boxTools = this.wrapperEl.querySelectorAll('.is-box-tool');
92876
+ boxTools.forEach(tool => {
92877
+ tool.style.display = 'none';
92878
+ });
92879
+ let boxTool = box.querySelector('.is-box-tool');
92880
+
92881
+ if (boxTool) {
92882
+ boxTool.style.display = 'flex';
92883
+ boxTool.style.transform = 'scale(' + 1 / zoom + ')';
92884
+ boxTool.style.transformOrigin = 'center bottom'; // boxTool.style.marginTop = (-(boxTool.offsetHeight * 1/zoom)) + 'px';
92885
+
92886
+ if (sectionNavbar) {
92887
+ box.querySelector('.is-cover-upload').style.display = 'none';
92888
+ box.querySelector('.is-box-edit').style.display = 'none';
92889
+ box.querySelector('.is-module-edit').style.display = 'inline-block';
92890
+ boxTool.style.width = '40px';
92891
+ boxTool.style.left = 'calc(50% - 20px)';
92892
+ } else if (box.querySelectorAll('.is-overlay-content[data-module]').length > 0) {
92893
+ box.querySelector('.is-cover-upload').style.display = 'none';
92894
+ box.querySelector('.is-box-edit').style.display = 'inline-block';
92895
+ box.querySelector('.is-module-edit').style.display = 'inline-block';
92896
+ boxTool.style.width = '80px';
92897
+ boxTool.style.left = 'calc(50% - 40px)';
92898
+ } else {
92899
+ box.querySelector('.is-cover-upload').style.display = 'block';
92900
+ box.querySelector('.is-box-edit').style.display = 'inline-block';
92901
+ box.querySelector('.is-module-edit').style.display = 'none';
92902
+ boxTool.style.width = '80px';
92903
+ boxTool.style.left = 'calc(50% - 40px)';
92904
+ }
92025
92905
  }
92026
92906
  }
92027
92907
 
@@ -92046,12 +92926,20 @@ class ContentBox {
92046
92926
  btnNew.addEventListener('click', () => {
92047
92927
  if (btn.src) {
92048
92928
  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 = '';
92929
+ // Close all opened sidebar
92930
+ // dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
92931
+ // dom.removeClass(builderStuff.querySelector('.is-sidebar-content'), 'active');
92932
+ // document.body.style.overflowY = '';
92933
+ this.sidebar.closeSidebar();
92052
92934
  dom.addClass(btnNew, 'active');
92053
- var id = btnNew.getAttribute('data-content');
92054
- dom.addClass(builderStuff.querySelector('#' + id), 'active');
92935
+ var id = btnNew.getAttribute('data-content'); // dom.addClass(builderStuff.querySelector('#' + id), 'active');
92936
+
92937
+ const panelContent = document.querySelector('#' + id);
92938
+ panelContent.style.display = 'block';
92939
+ setTimeout(() => {
92940
+ dom.addClass(panelContent, 'active');
92941
+ panelContent.focus();
92942
+ }, 10);
92055
92943
  var iframe = builderStuff.querySelector('#' + id + ' iframe');
92056
92944
 
92057
92945
  if (iframe.getAttribute('src') == 'about:blank') {
@@ -92111,8 +92999,8 @@ class ContentBox {
92111
92999
  this.editor.returnUrl(s);
92112
93000
  }
92113
93001
 
92114
- showModal(modal) {
92115
- this.editor.util.showModal(modal);
93002
+ showModal(modal, overlayStay, cancelCallback, animated) {
93003
+ this.editor.util.showModal(modal, overlayStay, cancelCallback, animated);
92116
93004
  }
92117
93005
 
92118
93006
  hideModal(modal) {
@@ -92124,7 +93012,7 @@ class ContentBox {
92124
93012
  }
92125
93013
 
92126
93014
  loadStyles(mainCss, sectionCss) {
92127
- let links = document.getElementsByTagName('link');
93015
+ let links = this.doc.getElementsByTagName('link');
92128
93016
  let boxCssInBody;
92129
93017
 
92130
93018
  for (let i = 0; i < links.length; i++) {
@@ -92149,12 +93037,12 @@ class ContentBox {
92149
93037
  boxCssInBody = true;
92150
93038
  }
92151
93039
 
92152
- let elms = document.querySelectorAll('[data-rel="_del"]');
93040
+ let elms = this.doc.querySelectorAll('[data-rel="_del"]');
92153
93041
  elms.forEach(elm => {
92154
93042
  elm.parentNode.removeChild(elm);
92155
93043
  });
92156
- let page = document.head;
92157
- if (!page) page = document.body;
93044
+ let page = this.doc.head;
93045
+ if (!page) page = this.doc.body;
92158
93046
  if (mainCss) if (mainCss !== '') {
92159
93047
  if (boxCssInBody) {
92160
93048
  this.wrapperEl.insertAdjacentHTML('beforebegin', mainCss);
@@ -92216,7 +93104,7 @@ class ContentBox {
92216
93104
  }
92217
93105
 
92218
93106
  mainCss() {
92219
- let links = document.getElementsByTagName('link');
93107
+ let links = this.doc.getElementsByTagName('link');
92220
93108
  let arrLinks = [];
92221
93109
 
92222
93110
  for (let i = 0; i < links.length; i++) {
@@ -92232,7 +93120,7 @@ class ContentBox {
92232
93120
  }
92233
93121
 
92234
93122
  mainCssList() {
92235
- let links = document.getElementsByTagName('link');
93123
+ let links = this.doc.getElementsByTagName('link');
92236
93124
  let arrLinks = [];
92237
93125
 
92238
93126
  for (let i = 0; i < links.length; i++) {
@@ -92248,7 +93136,7 @@ class ContentBox {
92248
93136
  }
92249
93137
 
92250
93138
  sectionCss() {
92251
- let links = document.getElementsByTagName('link');
93139
+ let links = this.doc.getElementsByTagName('link');
92252
93140
  let arrLinks = [];
92253
93141
 
92254
93142
  for (let i = 0; i < links.length; i++) {
@@ -92265,7 +93153,7 @@ class ContentBox {
92265
93153
  }
92266
93154
 
92267
93155
  sectionCssList() {
92268
- let links = document.getElementsByTagName('link');
93156
+ let links = this.doc.getElementsByTagName('link');
92269
93157
  let arrLinks = [];
92270
93158
 
92271
93159
  for (let i = 0; i < links.length; i++) {
@@ -92292,7 +93180,8 @@ class ContentBox {
92292
93180
  }
92293
93181
 
92294
93182
  destroy() {
92295
- document.removeEventListener('click', this.doDocumentClick, false);
93183
+ this.doc.removeEventListener('click', this.doDocumentClick, false);
93184
+ if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);
92296
93185
  window.removeEventListener('scroll', this.doWindowScroll, false);
92297
93186
  let html = this.html(); // this.builderStuff.parentNode.removeChild(this.builderStuff);
92298
93187
 
@@ -92314,7 +93203,7 @@ class ContentBox {
92314
93203
  }
92315
93204
 
92316
93205
  cleanupUnused() {
92317
- let links = document.getElementsByTagName('link');
93206
+ let links = this.doc.getElementsByTagName('link');
92318
93207
 
92319
93208
  for (let i = 0; i < links.length; i++) {
92320
93209
  //Remove unused google font links
@@ -92347,7 +93236,7 @@ class ContentBox {
92347
93236
  } //Cleanup unused contentstyles
92348
93237
 
92349
93238
 
92350
- links = document.getElementsByTagName('link');
93239
+ links = this.doc.getElementsByTagName('link');
92351
93240
 
92352
93241
  for (let i = 0; i < links.length; i++) {
92353
93242
  if (links[i].getAttribute('data-name') === 'contentstyle') {
@@ -92366,7 +93255,7 @@ class ContentBox {
92366
93255
  }
92367
93256
  }
92368
93257
 
92369
- let elms = document.querySelectorAll('[data-rel="_del"]');
93258
+ let elms = this.doc.querySelectorAll('[data-rel="_del"]');
92370
93259
  elms.forEach(elm => {
92371
93260
  elm.parentNode.removeChild(elm);
92372
93261
  });
@@ -92381,7 +93270,7 @@ class ContentBox {
92381
93270
  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
93271
  */
92383
93272
 
92384
- elms = document.head.querySelectorAll('link');
93273
+ elms = this.doc.head.querySelectorAll('link');
92385
93274
  elms.forEach(elm => {
92386
93275
  let src = elm.getAttribute('href');
92387
93276
  let links = this.wrapperEl.querySelectorAll('link');
@@ -92391,7 +93280,7 @@ class ContentBox {
92391
93280
  }
92392
93281
  });
92393
93282
  });
92394
- elms = document.querySelectorAll('[data-rel="_del"]');
93283
+ elms = this.doc.querySelectorAll('[data-rel="_del"]');
92395
93284
  elms.forEach(elm => {
92396
93285
  elm.parentNode.removeChild(elm);
92397
93286
  });