@innovastudio/contentbox 1.0.23 → 1.0.27

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 +50 -14
  3. package/public/contentbox/contentbox.esm.js +1100 -786
  4. package/public/contentbox/contentbox.min.js +8 -8
  5. package/public/contentbox/lang/en.js +15 -5
package/public/contentbox/contentbox.esm.js CHANGED
@@ -363,12 +363,23 @@ class SideBar {
363
363
  sideIndex++;
364
364
  });
365
365
  html += '</div>';
366
- html += '' + '<div id="divSidebarSections" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker"" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" style="width:100%;height:100%;resize: none;"></textarea>' + '<button title="' + out('Enlarge') + '" class="edit-html-larger" style="width:40px;height:40px;position:absolute;right:20px;top:5px;background:#fff;padding: 0;"><svg class="is-icon-flex" style="width:22px;height:22px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div id="divSelector" style="position:fixed;top:0;right:0;width:100%;z-index:2;padding: 0 0 0 50px;box-sizing: border-box;"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
366
+ html += '' + '<div id="divSidebarSections" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker"" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" style="width:100%;height:100%;resize: none;"></textarea>' + '<button title="' + out('Enlarge') + '" class="edit-html-larger" style="width:40px;height:40px;position:absolute;right:20px;top:5px;background:#fff;padding: 0;"><svg class="is-icon-flex" style="width:22px;height:22px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
367
367
  } else {
368
368
  html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
369
369
  }
370
+ /*
371
+ html += '<div class="is-modal applytypography">' +
372
+ '<div style="max-width: 400px;text-align:center;">' +
373
+ '<p>' + out('This page has one or more sections that have their own typography style.') + '</p>' +
374
+ '<label><input name="rdoApplyTypoStyle" type="radio" value="1">' + out('Replace all sections\' typography style.') + '</label><br>' +
375
+ '<label><input name="rdoApplyTypoStyle" type="radio" value="0">' + out('Keep sections\' specific typography style.') + '</label>' +
376
+ '<p><i>' + out('To apply typography style on a specific section, goto \'Content Style\' tab in Box Settings') + '</i></p>' +
377
+ '<button class="input-ok classic">' + out('Ok') + '</button>' +
378
+ '</div>' +
379
+ '</div>';
380
+ */
381
+
370
382
 
371
- html += '<div class="is-modal applytypography">' + '<div style="max-width: 400px;text-align:center;">' + '<p>' + out('This page has one or more sections that have their own typography style.') + '</p>' + '<label><input name="rdoApplyTypoStyle" type="radio" value="1">' + out('Replace all sections\' typography style.') + '</label><br>' + '<label><input name="rdoApplyTypoStyle" type="radio" value="0">' + out('Keep sections\' specific typography style.') + '</label>' + '<p><i>' + out('To apply typography style on a specific section, goto \'Content Style\' tab in Box Settings') + '</i></p>' + '<button class="input-ok classic">' + out('Ok') + '</button>' + '</div>' + '</div>';
372
383
  dom$I.appendHtml(builderStuff, html);
373
384
 
374
385
  if (this.builder.useSidebar) {
@@ -400,7 +411,8 @@ class SideBar {
400
411
  let panelId = btn.getAttribute('data-content');
401
412
 
402
413
  if (panelId) {
403
- if (panelId === 'divSidebarSections' || panelId === 'divSidebarTypography') {
414
+ if (panelId === 'divSidebarSections') {
415
+ // || panelId==='divSidebarTypography'
404
416
  const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
405
417
  dom$I.appendHtml(builderStuff, overlayHtml);
406
418
  }
@@ -443,6 +455,8 @@ class SideBar {
443
455
 
444
456
  if (cmd == 'typography') {
445
457
  btn.setAttribute('data-applyto', 'page');
458
+ builderStuff.querySelector('.typo-target-default').style.display = 'flex';
459
+ builderStuff.querySelector('.typo-target-box').style.display = 'none';
446
460
  this.viewTypography();
447
461
  }
448
462
  }
@@ -537,63 +551,61 @@ class SideBar {
537
551
  textarea.setAttribute('data-source-ok', '#btnViewHtmlOk');
538
552
  textarea.setAttribute('data-source-cancel', '#btnViewHtmlCancel');
539
553
  this.builder.editor.viewHtmlLarger();
554
+ });
555
+ let btnTypoClear = document.querySelector('#btnTypoClear');
556
+ btnTypoClear.addEventListener('click', () => {
557
+ this.boxTypography('', '', '');
540
558
  }); // Apply Typography on Page
541
559
 
560
+ /*
542
561
  let modalTypography = builderStuff.querySelector('.is-modal.applytypography');
543
562
  const btnOk = modalTypography.querySelector('.input-ok');
544
- btnOk.addEventListener('click', () => {
545
- const contentStylePath = this.builder.settings.contentStylePath;
546
- let val = modalTypography.querySelector('input[name="rdoApplyTypoStyle"]:checked').value;
547
-
548
- if (val === '1') {
549
- // Replace all sections' style
563
+ btnOk.addEventListener('click', ()=>{
564
+ const contentStylePath = this.builder.settings.contentStylePath;
565
+ let val = modalTypography.querySelector('input[name="rdoApplyTypoStyle"]:checked').value;
566
+ if (val === '1') {
567
+ // Replace all sections' style
568
+ let links = document.getElementsByTagName('link');
569
+ for (let i = 0; i < links.length; i++) {
570
+ if (links[i].getAttribute('data-name') === 'contentstyle') {
571
+ let classname = links[i].getAttribute('data-class');
572
+ //check if classname used in content
573
+ if (this.builder.wrapperEl.querySelector('.' + classname)) {
574
+ let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
575
+ elms.forEach((elm)=>{
576
+ dom.removeClass(elm, classname);
577
+ });
578
+ links[i].setAttribute('data-rel', '_del');
579
+ }
580
+ }
581
+ }
582
+ let dels = document.querySelectorAll('[data-rel="_del"]');
583
+ dels.forEach((item)=>{
584
+ item.parentNode.removeChild(item);
585
+ });
586
+ }
587
+ //Cleanup (remove previous css that has prefix 'basetype-')
550
588
  let links = document.getElementsByTagName('link');
551
-
552
589
  for (let i = 0; i < links.length; i++) {
553
- if (links[i].getAttribute('data-name') === 'contentstyle') {
554
- let classname = links[i].getAttribute('data-class'); //check if classname used in content
555
-
556
- if (this.builder.wrapperEl.querySelector('.' + classname)) {
557
- let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
558
- elms.forEach(elm => {
559
- dom$I.removeClass(elm, classname);
560
- });
561
- links[i].setAttribute('data-rel', '_del');
590
+ let src = links[i].href.toLowerCase();
591
+ if (src.indexOf('basetype-') != -1) {
592
+ links[i].setAttribute('data-rel', '_del');
562
593
  }
563
- }
564
594
  }
565
-
566
595
  let dels = document.querySelectorAll('[data-rel="_del"]');
567
- dels.forEach(item => {
568
- item.parentNode.removeChild(item);
596
+ dels.forEach((item)=>{
597
+ item.parentNode.removeChild(item);
569
598
  });
570
- } //Cleanup (remove previous css that has prefix 'basetype-')
571
-
572
-
573
- let links = document.getElementsByTagName('link');
574
-
575
- for (let i = 0; i < links.length; i++) {
576
- let src = links[i].href.toLowerCase();
577
-
578
- if (src.indexOf('basetype-') != -1) {
579
- links[i].setAttribute('data-rel', '_del');
599
+ //Add new page css
600
+ if (this.pageCss != '') {
601
+ dom.appendHtml(document.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
580
602
  }
581
- }
582
-
583
- let dels = document.querySelectorAll('[data-rel="_del"]');
584
- dels.forEach(item => {
585
- item.parentNode.removeChild(item);
586
- }); //Add new page css
587
-
588
- if (this.pageCss != '') {
589
- dom$I.appendHtml(document.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
590
- } // this.builder.hideModal($modal);
591
-
592
-
593
- this.builder.hideModal(modalTypography); //Trigger Change event
594
-
595
- this.builder.settings.onChange();
603
+ // this.builder.hideModal($modal);
604
+ this.builder.hideModal(modalTypography);
605
+ //Trigger Change event
606
+ this.builder.settings.onChange();
596
607
  });
608
+ */
597
609
  }
598
610
  } //constructor
599
611
 
@@ -728,9 +740,9 @@ class SideBar {
728
740
  html += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '">' + '<div>[' + (i + 1) + '] ' + styles[i].caption + '</div>' + '<img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
729
741
  }
730
742
  }
731
- }
743
+ } // html += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
744
+
732
745
 
733
- html += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
734
746
  let selection = document.querySelector('#divStyles');
735
747
  selection.innerHTML = html;
736
748
  let elms = elementChildren(selection);
@@ -765,21 +777,31 @@ class SideBar {
765
777
  const contentStylePath = this.builder.settings.contentStylePath; //Check apply to what
766
778
 
767
779
  let applyto = builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').getAttribute('data-applyto');
780
+ let mode = document.querySelector('input[name="typoTarget"]:checked').value;
768
781
 
769
- if (applyto === 'box') {
770
- let activeBox = this.builder.activeBox;
771
-
772
- if (activeBox) {
773
- let classList = activeBox.getAttribute('class').split(/\s+/);
782
+ if (applyto !== 'box') {
783
+ if (mode === 'section') {
784
+ let activeSection = this.builder.activeSection;
785
+ let classList = activeSection.getAttribute('class').split(/\s+/);
774
786
  classList.forEach(item => {
775
787
  if (item.indexOf('type-') != -1) {
776
788
  //Remove previous class that has prefix 'type-'
777
- dom$I.removeClass(activeBox, item);
789
+ dom$I.removeClass(activeSection, item);
778
790
  }
791
+ });
792
+ let boxes = activeSection.querySelectorAll('.is-box, .is-box-centered');
793
+ boxes.forEach(box => {
794
+ let classList = box.getAttribute('class').split(/\s+/);
795
+ classList.forEach(item => {
796
+ if (item.indexOf('type-') != -1) {
797
+ //Remove previous class that has prefix 'type-'
798
+ dom$I.removeClass(box, item);
799
+ }
800
+ });
779
801
  }); //Add new class
780
802
 
781
803
  if (className !== '') {
782
- dom$I.addClass(activeBox, className); //Add css
804
+ dom$I.addClass(activeSection, className); //Add css
783
805
 
784
806
  let exist = false;
785
807
  let links = document.getElementsByTagName('link');
@@ -809,20 +831,30 @@ class SideBar {
809
831
  dels.forEach(item => {
810
832
  item.parentNode.removeChild(item);
811
833
  });
812
- }
813
- } else {
814
- let bSectionStyleExists = false;
815
- let links = document.getElementsByTagName('link');
834
+ } else if (mode === 'page') {
835
+ // Replace all sections' style
836
+ let links = document.getElementsByTagName('link');
837
+
838
+ for (let i = 0; i < links.length; i++) {
839
+ if (links[i].getAttribute('data-name') === 'contentstyle') {
840
+ let classname = links[i].getAttribute('data-class'); //check if classname used in content
816
841
 
817
- for (let i = 0; i < links.length; i++) {
818
- if (links[i].getAttribute('data-name') === 'contentstyle') {
819
- bSectionStyleExists = true;
842
+ if (this.builder.wrapperEl.querySelector('.' + classname)) {
843
+ let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
844
+ elms.forEach(elm => {
845
+ dom$I.removeClass(elm, classname);
846
+ });
847
+ links[i].setAttribute('data-rel', '_del');
848
+ }
849
+ }
820
850
  }
821
- }
822
851
 
823
- if (!bSectionStyleExists) {
824
- //Cleanup (remove previous css that has prefix 'basetype-')
825
- let links = document.getElementsByTagName('link');
852
+ let dels = document.querySelectorAll('[data-rel="_del"]');
853
+ dels.forEach(item => {
854
+ item.parentNode.removeChild(item);
855
+ }); //Cleanup (remove previous css that has prefix 'basetype-')
856
+
857
+ links = document.getElementsByTagName('link');
826
858
 
827
859
  for (let i = 0; i < links.length; i++) {
828
860
  let src = links[i].href.toLowerCase();
@@ -832,21 +864,103 @@ class SideBar {
832
864
  }
833
865
  }
834
866
 
835
- let dels = document.querySelectorAll('[data-rel="_del"]');
867
+ dels = document.querySelectorAll('[data-rel="_del"]');
836
868
  dels.forEach(item => {
837
869
  item.parentNode.removeChild(item);
838
870
  }); //Add new page css
839
871
 
840
- if (pageCss != '') {
872
+ if (this.pageCss != '') {
841
873
  dom$I.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
842
874
  }
843
- } else {
844
- // this.className = className;
845
- // this.contentCss = contentCss;
846
- this.pageCss = pageCss;
847
- let modal = builderStuff.querySelector('.is-modal.applytypography');
848
- this.builder.showModal(modal);
849
- builderStuff.querySelectorAll('input[name="rdoApplyTypoStyle"]')[1].checked = true;
875
+ } else if (mode === 'container') {
876
+ let builderActive = document.querySelector('.builder-active');
877
+ if (!builderActive) return;
878
+ let box = dom$I.parentsHasClass(builderActive, 'is-box');
879
+ let classList = box.getAttribute('class').split(/\s+/);
880
+ classList.forEach(item => {
881
+ if (item.indexOf('type-') != -1) {
882
+ //Remove previous class that has prefix 'type-'
883
+ dom$I.removeClass(box, item);
884
+ }
885
+ }); //Add new class
886
+
887
+ if (className !== '') {
888
+ dom$I.addClass(box, className); //Add css
889
+
890
+ let exist = false;
891
+ let links = document.getElementsByTagName('link');
892
+
893
+ for (let i = 0; i < links.length; i++) {
894
+ let src = links[i].href.toLowerCase();
895
+ if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
896
+ }
897
+
898
+ if (!exist) dom$I.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
899
+ } //Cleanup unused
900
+
901
+
902
+ let links = document.getElementsByTagName('link');
903
+
904
+ for (let i = 0; i < links.length; i++) {
905
+ if (links[i].getAttribute('data-name') === 'contentstyle') {
906
+ let classname = links[i].getAttribute('data-class'); //check if classname used in content
907
+
908
+ if (!this.builder.wrapperEl.querySelector('.' + classname)) {
909
+ links[i].setAttribute('data-rel', '_del');
910
+ }
911
+ }
912
+ }
913
+
914
+ let dels = document.querySelectorAll('[data-rel="_del"]');
915
+ dels.forEach(item => {
916
+ item.parentNode.removeChild(item);
917
+ });
918
+ }
919
+ }
920
+
921
+ if (applyto === 'box') {
922
+ let activeBox = this.builder.activeBox;
923
+
924
+ if (activeBox) {
925
+ let classList = activeBox.getAttribute('class').split(/\s+/);
926
+ classList.forEach(item => {
927
+ if (item.indexOf('type-') != -1) {
928
+ //Remove previous class that has prefix 'type-'
929
+ dom$I.removeClass(activeBox, item);
930
+ }
931
+ }); //Add new class
932
+
933
+ if (className !== '') {
934
+ dom$I.addClass(activeBox, className); //Add css
935
+
936
+ let exist = false;
937
+ let links = document.getElementsByTagName('link');
938
+
939
+ for (let i = 0; i < links.length; i++) {
940
+ let src = links[i].href.toLowerCase();
941
+ if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
942
+ }
943
+
944
+ if (!exist) dom$I.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
945
+ } //Cleanup unused
946
+
947
+
948
+ let links = document.getElementsByTagName('link');
949
+
950
+ for (let i = 0; i < links.length; i++) {
951
+ if (links[i].getAttribute('data-name') === 'contentstyle') {
952
+ let classname = links[i].getAttribute('data-class'); //check if classname used in content
953
+
954
+ if (!this.builder.wrapperEl.querySelector('.' + classname)) {
955
+ links[i].setAttribute('data-rel', '_del');
956
+ }
957
+ }
958
+ }
959
+
960
+ let dels = document.querySelectorAll('[data-rel="_del"]');
961
+ dels.forEach(item => {
962
+ item.parentNode.removeChild(item);
963
+ });
850
964
  }
851
965
  } //Trigger Change event
852
966
 
@@ -1771,7 +1885,10 @@ class EditSection {
1771
1885
  this.builder = builder;
1772
1886
  const builderStuff = this.builder.builderStuff;
1773
1887
  this.builderStuff = builderStuff;
1774
- let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width: 270px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button class="cmd-section-height" data-value="0">Auto</button>' + '<button class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '</div>' + '<div style="display:flex">' + '<button class="cmd-section-height" data-value="50" style="border-top:none;">50%</button>' + '<button class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<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('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" 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 editcustomcode">' + '<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="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
1888
+ let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:292px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' +
1889
+ /*
1890
+ '<button title="Auto" class="cmd-section-height" data-value="0">Auto</button>' + */
1891
+ '<button title="20%" class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25" style="border-left:none;">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50" style="border-left:none;">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default" style="border-left:none;">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm" style="border-left:none;">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m" style="border-left:none;">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg" style="border-left:none;">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value="none" style="border-left:none;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<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('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" 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 editcustomcode">' + '<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="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
1775
1892
  dom$H.appendHtml(builderStuff, html);
1776
1893
  let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
1777
1894
  this.modalEditSection = modalEditSection;
@@ -1827,6 +1944,16 @@ class EditSection {
1827
1944
  this.builder.settings.onChange();
1828
1945
  });
1829
1946
  });
1947
+ const btnBoxSpacing = modalEditSection.querySelectorAll('.cmd-box-spacing');
1948
+ btnBoxSpacing.forEach(btn => {
1949
+ btn.addEventListener('click', () => {
1950
+ this.builder.editor.saveForUndo();
1951
+ let val = btn.getAttribute('data-value');
1952
+ this.boxSpacing(val); //Trigger Change event
1953
+
1954
+ this.builder.settings.onChange();
1955
+ });
1956
+ });
1830
1957
  const btnScrollIconStyle = modalEditSection.querySelectorAll('.cmd-section-scroll');
1831
1958
  btnScrollIconStyle.forEach(btn => {
1832
1959
  btn.addEventListener('click', () => {
@@ -1928,11 +2055,14 @@ class EditSection {
1928
2055
  activeSection.style.height = '';
1929
2056
  dom$H.removeClass(activeSection, 'is-section-auto');
1930
2057
  dom$H.removeClass(activeSection, 'is-section-20');
2058
+ dom$H.removeClass(activeSection, 'is-section-25');
1931
2059
  dom$H.removeClass(activeSection, 'is-section-30');
1932
2060
  dom$H.removeClass(activeSection, 'is-section-40');
1933
2061
  dom$H.removeClass(activeSection, 'is-section-50');
1934
2062
  dom$H.removeClass(activeSection, 'is-section-60');
2063
+ dom$H.removeClass(activeSection, 'is-section-70');
1935
2064
  dom$H.removeClass(activeSection, 'is-section-75');
2065
+ dom$H.removeClass(activeSection, 'is-section-80');
1936
2066
  dom$H.removeClass(activeSection, 'is-section-100');
1937
2067
 
1938
2068
  if (n === '0') {
@@ -1946,6 +2076,37 @@ class EditSection {
1946
2076
  this.builder.scrollTo(activeSection);
1947
2077
  }
1948
2078
 
2079
+ boxSpacing(s) {
2080
+ const activeSection = this.builder.activeSection;
2081
+
2082
+ if (s == 'none') {
2083
+ dom$H.removeClass(activeSection, 'box-space');
2084
+ dom$H.removeClass(activeSection, 'box-space-sm');
2085
+ dom$H.removeClass(activeSection, 'box-space-m');
2086
+ dom$H.removeClass(activeSection, 'box-space-lg');
2087
+ } else {
2088
+ dom$H.addClass(activeSection, 'box-space');
2089
+ }
2090
+
2091
+ if (s === 'sm') {
2092
+ dom$H.removeClass(activeSection, 'box-space-m');
2093
+ dom$H.removeClass(activeSection, 'box-space-lg');
2094
+ dom$H.addClass(activeSection, 'box-space-sm');
2095
+ } else if (s == 'm') {
2096
+ dom$H.removeClass(activeSection, 'box-space-sm');
2097
+ dom$H.removeClass(activeSection, 'box-space-lg');
2098
+ dom$H.addClass(activeSection, 'box-space-m');
2099
+ } else if (s == 'lg') {
2100
+ dom$H.removeClass(activeSection, 'box-space-sm');
2101
+ dom$H.removeClass(activeSection, 'box-space-m');
2102
+ dom$H.addClass(activeSection, 'box-space-lg');
2103
+ } else if (s == 'default') {
2104
+ dom$H.removeClass(activeSection, 'box-space-sm');
2105
+ dom$H.removeClass(activeSection, 'box-space-m');
2106
+ dom$H.removeClass(activeSection, 'box-space-lg');
2107
+ }
2108
+ }
2109
+
1949
2110
  sectionUseScroll() {
1950
2111
  const activeSection = this.builder.activeSection;
1951
2112
  const modalEditSection = this.modalEditSection;
@@ -7318,8 +7479,11 @@ class EditBox {
7318
7479
  btnBoxTypo.addEventListener('click', () => {
7319
7480
  this.builder.hideModal(modalEditBox); //Open divSidebarTypography
7320
7481
 
7321
- builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click();
7482
+ builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
7483
+
7322
7484
  builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
7485
+ builderStuff.querySelector('.typo-target-default').style.display = 'none';
7486
+ builderStuff.querySelector('.typo-target-box').style.display = 'flex';
7323
7487
  });
7324
7488
  });
7325
7489
  const btnBoxSizes = modalEditBox.querySelectorAll('.cmd-box-size');
@@ -7488,6 +7652,9 @@ class EditBox {
7488
7652
  } else if (dom$G.hasClass(container, 'edge-x-5')) {
7489
7653
  dom$G.removeClass(container, 'edge-x-5');
7490
7654
  dom$G.addClass(container, 'edge-x-4');
7655
+ } else if (dom$G.hasClass(container, 'edge-x-6')) {
7656
+ dom$G.removeClass(container, 'edge-x-6');
7657
+ dom$G.addClass(container, 'edge-x-5');
7491
7658
  } else {
7492
7659
  dom$G.addClass(container, 'edge-x-0');
7493
7660
  }
@@ -7510,6 +7677,9 @@ class EditBox {
7510
7677
  dom$G.removeClass(container, 'edge-x-4');
7511
7678
  dom$G.addClass(container, 'edge-x-5');
7512
7679
  } else if (dom$G.hasClass(container, 'edge-x-5')) {
7680
+ dom$G.removeClass(container, 'edge-x-5');
7681
+ dom$G.addClass(container, 'edge-x-6');
7682
+ } else if (dom$G.hasClass(container, 'edge-x-6')) {
7513
7683
  return false;
7514
7684
  } else {
7515
7685
  dom$G.addClass(container, 'edge-x-0');
@@ -7523,6 +7693,7 @@ class EditBox {
7523
7693
  dom$G.removeClass(container, 'edge-x-3');
7524
7694
  dom$G.removeClass(container, 'edge-x-4');
7525
7695
  dom$G.removeClass(container, 'edge-x-5');
7696
+ dom$G.removeClass(container, 'edge-x-6');
7526
7697
  } //Trigger Change event
7527
7698
 
7528
7699
 
@@ -7570,6 +7741,15 @@ class EditBox {
7570
7741
  } else if (dom$G.hasClass(boxCentered, 'edge-y-5')) {
7571
7742
  dom$G.removeClass(boxCentered, 'edge-y-5');
7572
7743
  dom$G.addClass(boxCentered, 'edge-y-4');
7744
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-6')) {
7745
+ dom$G.removeClass(boxCentered, 'edge-y-6');
7746
+ dom$G.addClass(boxCentered, 'edge-y-5');
7747
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-7')) {
7748
+ dom$G.removeClass(boxCentered, 'edge-y-7');
7749
+ dom$G.addClass(boxCentered, 'edge-y-6');
7750
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-8')) {
7751
+ dom$G.removeClass(boxCentered, 'edge-y-8');
7752
+ dom$G.addClass(boxCentered, 'edge-y-7');
7573
7753
  } else {
7574
7754
  dom$G.addClass(boxCentered, 'edge-y-0');
7575
7755
  }
@@ -7607,6 +7787,15 @@ class EditBox {
7607
7787
  dom$G.removeClass(boxCentered, 'edge-y-4');
7608
7788
  dom$G.addClass(boxCentered, 'edge-y-5');
7609
7789
  } else if (dom$G.hasClass(boxCentered, 'edge-y-5')) {
7790
+ dom$G.removeClass(boxCentered, 'edge-y-5');
7791
+ dom$G.addClass(boxCentered, 'edge-y-6');
7792
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-6')) {
7793
+ dom$G.removeClass(boxCentered, 'edge-y-6');
7794
+ dom$G.addClass(boxCentered, 'edge-y-7');
7795
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-7')) {
7796
+ dom$G.removeClass(boxCentered, 'edge-y-7');
7797
+ dom$G.addClass(boxCentered, 'edge-y-8');
7798
+ } else if (dom$G.hasClass(boxCentered, 'edge-y-8')) {
7610
7799
  return false;
7611
7800
  } else {
7612
7801
  dom$G.addClass(boxCentered, 'edge-y-0');
@@ -7625,98 +7814,55 @@ class EditBox {
7625
7814
  dom$G.removeClass(boxCentered, 'edge-y-3');
7626
7815
  dom$G.removeClass(boxCentered, 'edge-y-4');
7627
7816
  dom$G.removeClass(boxCentered, 'edge-y-5');
7628
- } //simplified
7629
-
7630
-
7631
- if (s === '-') {
7632
- if (dom$G.hasClass(activeBox, 'edge-y--5')) {
7633
- return false;
7634
- } else if (dom$G.hasClass(activeBox, 'edge-y--4')) {
7635
- dom$G.removeClass(activeBox, 'edge-y--4');
7636
- dom$G.addClass(activeBox, 'edge-y--5');
7637
- } else if (dom$G.hasClass(activeBox, 'edge-y--3')) {
7638
- dom$G.removeClass(activeBox, 'edge-y--3');
7639
- dom$G.addClass(activeBox, 'edge-y--4');
7640
- } else if (dom$G.hasClass(activeBox, 'edge-y--2')) {
7641
- dom$G.removeClass(activeBox, 'edge-y--2');
7642
- dom$G.addClass(activeBox, 'edge-y--3');
7643
- } else if (dom$G.hasClass(activeBox, 'edge-y--1')) {
7644
- dom$G.removeClass(activeBox, 'edge-y--1');
7645
- dom$G.addClass(activeBox, 'edge-y--2');
7646
- } else if (dom$G.hasClass(activeBox, 'edge-y-0')) {
7647
- dom$G.removeClass(activeBox, 'edge-y-0');
7648
- dom$G.addClass(activeBox, 'edge-y--1');
7649
- } else if (dom$G.hasClass(activeBox, 'edge-y-1')) {
7650
- dom$G.removeClass(activeBox, 'edge-y-1');
7651
- dom$G.addClass(activeBox, 'edge-y-0');
7652
- } else if (dom$G.hasClass(activeBox, 'edge-y-2')) {
7653
- dom$G.removeClass(activeBox, 'edge-y-2');
7654
- dom$G.addClass(activeBox, 'edge-y-1');
7655
- } else if (dom$G.hasClass(activeBox, 'edge-y-3')) {
7656
- dom$G.removeClass(activeBox, 'edge-y-3');
7657
- dom$G.addClass(activeBox, 'edge-y-2');
7658
- } else if (dom$G.hasClass(activeBox, 'edge-y-4')) {
7659
- dom$G.removeClass(activeBox, 'edge-y-4');
7660
- dom$G.addClass(activeBox, 'edge-y-3');
7661
- } else if (dom$G.hasClass(activeBox, 'edge-y-5')) {
7662
- dom$G.removeClass(activeBox, 'edge-y-5');
7663
- dom$G.addClass(activeBox, 'edge-y-4');
7664
- } else {
7665
- dom$G.addClass(activeBox, 'edge-y-0');
7666
- }
7667
- }
7668
-
7669
- if (s == '+') {
7670
- if (dom$G.hasClass(activeBox, 'edge-y--5')) {
7671
- dom$G.removeClass(activeBox, 'edge-y--5');
7672
- dom$G.addClass(activeBox, 'edge-y--4');
7673
- } else if (dom$G.hasClass(activeBox, 'edge-y--4')) {
7674
- dom$G.removeClass(activeBox, 'edge-y--4');
7675
- dom$G.addClass(activeBox, 'edge-y--3');
7676
- } else if (dom$G.hasClass(activeBox, 'edge-y--3')) {
7677
- dom$G.removeClass(activeBox, 'edge-y--3');
7678
- dom$G.addClass(activeBox, 'edge-y--2');
7679
- } else if (dom$G.hasClass(activeBox, 'edge-y--2')) {
7680
- dom$G.removeClass(activeBox, 'edge-y--2');
7681
- dom$G.addClass(activeBox, 'edge-y--1');
7682
- } else if (dom$G.hasClass(activeBox, 'edge-y--1')) {
7683
- dom$G.removeClass(activeBox, 'edge-y--1');
7684
- dom$G.addClass(activeBox, 'edge-y-0');
7685
- } else if (dom$G.hasClass(activeBox, 'edge-y-0')) {
7686
- dom$G.removeClass(activeBox, 'edge-y-0');
7687
- dom$G.addClass(activeBox, 'edge-y-1');
7688
- } else if (dom$G.hasClass(activeBox, 'edge-y-1')) {
7689
- dom$G.removeClass(activeBox, 'edge-y-1');
7690
- dom$G.addClass(activeBox, 'edge-y-2');
7691
- } else if (dom$G.hasClass(activeBox, 'edge-y-2')) {
7692
- dom$G.removeClass(activeBox, 'edge-y-2');
7693
- dom$G.addClass(activeBox, 'edge-y-3');
7694
- } else if (dom$G.hasClass(activeBox, 'edge-y-3')) {
7695
- dom$G.removeClass(activeBox, 'edge-y-3');
7696
- dom$G.addClass(activeBox, 'edge-y-4');
7697
- } else if (dom$G.hasClass(activeBox, 'edge-y-4')) {
7698
- dom$G.removeClass(activeBox, 'edge-y-4');
7699
- dom$G.addClass(activeBox, 'edge-y-5');
7700
- } else if (dom$G.hasClass(activeBox, 'edge-y-5')) {
7701
- return false;
7702
- } else {
7703
- dom$G.addClass(activeBox, 'edge-y-0');
7704
- }
7705
- }
7706
-
7707
- if (s == '') {
7708
- dom$G.removeClass(activeBox, 'edge-y--5');
7709
- dom$G.removeClass(activeBox, 'edge-y--4');
7710
- dom$G.removeClass(activeBox, 'edge-y--3');
7711
- dom$G.removeClass(activeBox, 'edge-y--2');
7712
- dom$G.removeClass(activeBox, 'edge-y--1');
7713
- dom$G.removeClass(activeBox, 'edge-y-0');
7714
- dom$G.removeClass(activeBox, 'edge-y-1');
7715
- dom$G.removeClass(activeBox, 'edge-y-2');
7716
- dom$G.removeClass(activeBox, 'edge-y-3');
7717
- dom$G.removeClass(activeBox, 'edge-y-4');
7718
- dom$G.removeClass(activeBox, 'edge-y-5');
7719
- } //Trigger Change event
7817
+ dom$G.removeClass(boxCentered, 'edge-y-6');
7818
+ dom$G.removeClass(boxCentered, 'edge-y-7');
7819
+ dom$G.removeClass(boxCentered, 'edge-y-8');
7820
+ } // //simplified
7821
+ // if (s === '-') {
7822
+ // if (dom.hasClass(activeBox, 'edge-y--5')) { return false; }
7823
+ // else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--5'); }
7824
+ // else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--4'); }
7825
+ // else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--3'); }
7826
+ // else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y--2'); }
7827
+ // else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y--1'); }
7828
+ // else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-0'); }
7829
+ // else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-1'); }
7830
+ // else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-2'); }
7831
+ // else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-3'); }
7832
+ // else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-4'); }
7833
+ // else if (dom.hasClass(activeBox, 'edge-y-6')) { dom.removeClass(activeBox, 'edge-y-6'); dom.addClass(activeBox, 'edge-y-5'); }
7834
+ // else { dom.addClass(activeBox, 'edge-y-0'); }
7835
+ // }
7836
+ // if (s == '+') {
7837
+ // if (dom.hasClass(activeBox, 'edge-y--5')) { dom.removeClass(activeBox, 'edge-y--5'); dom.addClass(activeBox, 'edge-y--4'); }
7838
+ // else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--3'); }
7839
+ // else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--2'); }
7840
+ // else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--1'); }
7841
+ // else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y-0'); }
7842
+ // else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y-1'); }
7843
+ // else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-2'); }
7844
+ // else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-3'); }
7845
+ // else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-4'); }
7846
+ // else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-5'); }
7847
+ // else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-6'); }
7848
+ // else if (dom.hasClass(activeBox, 'edge-y-6')) { return false; }
7849
+ // else { dom.addClass(activeBox, 'edge-y-0'); }
7850
+ // }
7851
+ // if (s == '') {
7852
+ // dom.removeClass(activeBox, 'edge-y--5');
7853
+ // dom.removeClass(activeBox, 'edge-y--4');
7854
+ // dom.removeClass(activeBox, 'edge-y--3');
7855
+ // dom.removeClass(activeBox, 'edge-y--2');
7856
+ // dom.removeClass(activeBox, 'edge-y--1');
7857
+ // dom.removeClass(activeBox, 'edge-y-0');
7858
+ // dom.removeClass(activeBox, 'edge-y-1');
7859
+ // dom.removeClass(activeBox, 'edge-y-2');
7860
+ // dom.removeClass(activeBox, 'edge-y-3');
7861
+ // dom.removeClass(activeBox, 'edge-y-4');
7862
+ // dom.removeClass(activeBox, 'edge-y-5');
7863
+ // dom.removeClass(boxCentered, 'edge-y-6');
7864
+ // }
7865
+ //Trigger Change event
7720
7866
 
7721
7867
 
7722
7868
  this.builder.settings.onChange();
@@ -7923,12 +8069,13 @@ class EditBox {
7923
8069
  this.builder.editor.saveForUndo(true); // checkLater = true
7924
8070
 
7925
8071
  const activeBox = this.builder.activeBox;
7926
- let bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
7927
- if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = ''; // let bgcolor = activeBox.style.backgroundColor;
7928
-
8072
+ let bgcolor = btnBoxBgColor.style.backgroundColor;
8073
+ let overlay = activeBox.querySelector('.is-overlay');
7929
8074
  colorpicker.open(s => {
7930
- activeBox.style.backgroundColor = s;
7931
- activeBox.style.backgroundImage = ''; //remove gradient
8075
+ // activeBox.style.backgroundColor = s;
8076
+ // activeBox.style.backgroundImage = '';//remove gradient
8077
+ overlay.style.backgroundColor = s;
8078
+ overlay.style.backgroundImage = ''; //remove gradient
7932
8079
 
7933
8080
  btnBoxBgColor.style.backgroundColor = s; // preview
7934
8081
  }, bgcolor);
@@ -7939,8 +8086,9 @@ class EditBox {
7939
8086
  const activeBox = this.builder.activeBox;
7940
8087
  this.builder.editor.saveForUndo(true); // checkLater = true
7941
8088
 
8089
+ let overlay = activeBox.querySelector('.is-overlay');
7942
8090
  let gradientPicker = this.builder.editor.gradientpicker();
7943
- gradientPicker.open(activeBox);
8091
+ gradientPicker.open(overlay);
7944
8092
  }); // Box Overlay Color
7945
8093
 
7946
8094
  const btnBoxOverlayColor = modalEditBox.querySelector('.input-box-overlaycolor');
@@ -7983,6 +8131,8 @@ class EditBox {
7983
8131
  overlayColor.style.backgroundColor = s;
7984
8132
  }
7985
8133
 
8134
+ btnBoxOverlayColor.style.backgroundColor = s; // preview
8135
+
7986
8136
  return false;
7987
8137
  }, color); //Note: if color empty, colorpicker will stay with its previous color
7988
8138
  }); // Click to Open Media Select Dialog
@@ -8306,12 +8456,7 @@ class EditBox {
8306
8456
  if (dom$G.hasClass(activeBox, 'delay-2700ms')) selAnimateDelay.value = 'delay-2700ms';
8307
8457
  if (dom$G.hasClass(activeBox, 'delay-2800ms')) selAnimateDelay.value = 'delay-2800ms';
8308
8458
  if (dom$G.hasClass(activeBox, 'delay-2900ms')) selAnimateDelay.value = 'delay-2900ms';
8309
- if (dom$G.hasClass(activeBox, 'delay-3000ms')) selAnimateDelay.value = 'delay-3000ms'; //Background color
8310
-
8311
- let bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
8312
- if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
8313
- let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
8314
- if (bgcolor) btnBoxBgColor.style.backgroundColor = bgcolor;else btnBoxBgColor.style.backgroundColor = 'transparent'; //Background image
8459
+ if (dom$G.hasClass(activeBox, 'delay-3000ms')) selAnimateDelay.value = 'delay-3000ms'; //Background image
8315
8460
  //Hide image tab
8316
8461
 
8317
8462
  modalEditBox.querySelector('#tabBoxImage').style.display = 'none';
@@ -8356,6 +8501,43 @@ class EditBox {
8356
8501
  modalEditBox.querySelector('#divNoBoxSettings').style.display = 'block'; //Show info: This box has no available settings
8357
8502
  } else {
8358
8503
  modalEditBox.querySelector('#divNoBoxSettings').style.display = 'none';
8504
+ } // FIX OLD VERSION
8505
+
8506
+
8507
+ let overlay = activeBox.querySelector('.is-overlay');
8508
+
8509
+ if (overlay) ; else {
8510
+ activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
8511
+ overlay = activeBox.querySelector('.is-overlay');
8512
+ } // Gradient Color
8513
+
8514
+
8515
+ const s = activeBox.style.backgroundImage;
8516
+ if (s) if (s.indexOf('linear-gradient') !== -1) {
8517
+ // Fix
8518
+ overlay.style.backgroundImage = s;
8519
+ activeBox.style.backgroundImage = '';
8520
+ } // Background color
8521
+
8522
+ let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
8523
+ let bgcolor = activeBox.style.backgroundColor;
8524
+
8525
+ if (bgcolor) {
8526
+ // Fix
8527
+ overlay.style.backgroundColor = bgcolor;
8528
+ activeBox.style.backgroundColor = '';
8529
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
8530
+ } else {
8531
+ bgcolor = overlay.style.backgroundColor;
8532
+
8533
+ if (bgcolor) {
8534
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
8535
+ } else {
8536
+ //backward
8537
+ bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
8538
+ if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
8539
+ btnBoxBgColor.style.backgroundColor = bgcolor; //preview
8540
+ }
8359
8541
  }
8360
8542
  } //edit
8361
8543
 
@@ -8887,7 +9069,7 @@ class EditBox {
8887
9069
  // }
8888
9070
 
8889
9071
 
8890
- overlayBg.style.backgroundImage = 'url(' + url + ')';
9072
+ overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
8891
9073
  overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
8892
9074
 
8893
9075
  preview.innerHTML = `<img src="${url}">`;
@@ -8908,11 +9090,11 @@ class EditBox {
8908
9090
 
8909
9091
  if (overlayContent) {
8910
9092
  if (overlayContent.innerHTML === '') overlayContent.parentNode.removeChild(overlayContent);
8911
- }
8912
-
8913
- if (overlay.childElementCount === 0) overlay.parentNode.removeChild(overlay); // overlayBg.style.backgroundImage = '';
9093
+ } // if(overlay.childElementCount===0) overlay.parentNode.removeChild(overlay); // new version always need overlay
9094
+ // overlayBg.style.backgroundImage = '';
8914
9095
  // overlayBg.style.backgroundPosition = '';
8915
9096
 
9097
+
8916
9098
  preview.innerHTML = ''; //clear overlay color
8917
9099
 
8918
9100
  const btnBoxOverlayColor = modalEditBox.querySelector('.input-box-overlaycolor');
@@ -9494,7 +9676,8 @@ class Util {
9494
9676
  dom.moveAfter(cellElement, cell);
9495
9677
  }
9496
9678
 
9497
- this.builder.applyBehavior();
9679
+ let builderActive = document.querySelector('.builder-active');
9680
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9498
9681
  this.fixLayout(row);
9499
9682
  cellElement.click(); //change active block to the newly created
9500
9683
  }
@@ -9543,7 +9726,8 @@ class Util {
9543
9726
 
9544
9727
  row.parentNode.insertBefore(rowElement, row);
9545
9728
  dom.moveAfter(rowElement, row);
9546
- this.builder.applyBehavior();
9729
+ let builderActive = document.querySelector('.builder-active');
9730
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9547
9731
  cellElement.click(); //change active block to the newly created
9548
9732
  }
9549
9733
 
@@ -9557,7 +9741,8 @@ class Util {
9557
9741
  // }
9558
9742
 
9559
9743
  element.insertAdjacentHTML('afterend', html);
9560
- this.builder.applyBehavior();
9744
+ let builderActive = document.querySelector('.builder-active');
9745
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9561
9746
  let newelement = element.nextElementSibling;
9562
9747
 
9563
9748
  if (newelement.tagName.toLowerCase() === 'img') {
@@ -9565,7 +9750,7 @@ class Util {
9565
9750
  clearTimeout(timeoutId);
9566
9751
  timeoutId = setTimeout(() => {
9567
9752
  if (newelement.complete) {
9568
- newelement.click(); //console.log(2);
9753
+ newelement.click();
9569
9754
  }
9570
9755
  }, 200);
9571
9756
  } else {
@@ -9656,7 +9841,8 @@ class Util {
9656
9841
 
9657
9842
  row.parentNode.insertBefore(rowElement, row);
9658
9843
  dom.moveAfter(rowElement, row);
9659
- this.builder.applyBehavior();
9844
+ let builderActive = document.querySelector('.builder-active');
9845
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9660
9846
  cellElement.click(); //change active block to the newly created
9661
9847
  // Change to row selection
9662
9848
 
@@ -9734,10 +9920,16 @@ class Util {
9734
9920
  cell.parentNode.insertBefore(cell, cell.previousElementSibling);
9735
9921
  }
9736
9922
 
9737
- this.builder.applyBehavior();
9738
- this.fixLayout(row);
9739
- cellElement.click(); //change active block to the newly created
9740
- // Call onChange
9923
+ let builderActive = document.querySelector('.builder-active');
9924
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9925
+ this.fixLayout(row); // cellElement.click(); //change active block to the newly created
9926
+
9927
+ if (mode === 'cell' || mode === 'cell-right') {
9928
+ cell.nextElementSibling.click();
9929
+ } else {
9930
+ cell.previousElementSibling.click();
9931
+ } // Call onChange
9932
+
9741
9933
 
9742
9934
  this.builder.opts.onChange();
9743
9935
  return;
@@ -9781,10 +9973,11 @@ class Util {
9781
9973
  // row.scrollIntoView({ behavior: 'smooth', block: 'center' });
9782
9974
  // }, 600);
9783
9975
 
9784
- rowElement = row.nextElementSibling; // a must. Must be before applyBehavior() to prevent element delete during fixLayout
9785
-
9786
- this.builder.applyBehavior(); // checkEmpty & onRender called here
9976
+ rowElement = row.nextElementSibling; // a must. Must be before applyBehavior to prevent element delete during fixLayout
9977
+ // checkEmpty & onRender called here
9787
9978
 
9979
+ let builderActive = document.querySelector('.builder-active');
9980
+ if (builderActive) this.builder.applyBehaviorOn(builderActive);
9788
9981
  cellElement = rowElement.childNodes[0];
9789
9982
  cellElement.click(); //change active block to the newly created
9790
9983
  // Change to row selection
@@ -10130,71 +10323,80 @@ class Util {
10130
10323
  }
10131
10324
 
10132
10325
  checkEmpty() {
10133
- const dom = this.dom; // Get all builder areas
10134
-
10326
+ // Get all builder areas
10135
10327
  const builders = document.querySelectorAll(this.builder.opts.container);
10136
10328
  Array.prototype.forEach.call(builders, builder => {
10137
- const rows = dom.elementChildren(builder);
10138
- let empty = true;
10139
- rows.forEach(row => {
10140
- if (dom.hasClass(row, 'row-add-initial')) return;
10141
- if (dom.hasClass(row, 'dummy-space')) return;
10142
- empty = false;
10143
- });
10329
+ this.checkEmptyOn(builder);
10330
+ });
10331
+ }
10144
10332
 
10145
- if (empty) {
10146
- let emptyinfo = builder.querySelector('.row-add-initial');
10333
+ checkEmptyOn(builder) {
10334
+ const dom = this.dom;
10335
+ const rows = dom.elementChildren(builder);
10336
+ let empty = true;
10337
+ rows.forEach(row => {
10338
+ if (dom.hasClass(row, 'row-add-initial')) return;
10339
+ if (dom.hasClass(row, 'dummy-space')) return;
10340
+ empty = false;
10341
+ });
10147
10342
 
10148
- if (!emptyinfo) {
10149
- builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span>${this.out('+ Click to add content')}</span></div>`;
10150
- emptyinfo = builder.querySelector('.row-add-initial');
10151
- }
10343
+ if (empty) {
10344
+ let emptyinfo = builder.querySelector('.row-add-initial');
10152
10345
 
10153
- emptyinfo.addEventListener('click', () => {
10154
- this.clearActiveCell();
10155
- dom.addClass(emptyinfo, 'row-active'); // Needed for addContent(). Directly apply class in Util is fine.
10346
+ if (!emptyinfo) {
10347
+ builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span>${this.out('+ Click to add content')}</span></div>`;
10348
+ emptyinfo = builder.querySelector('.row-add-initial');
10349
+ }
10156
10350
 
10157
- const builderStuff = this.builder.builderStuff;
10158
- let quickadd = builderStuff.querySelector('.quickadd'); // see quickadd.js. Directly select by class in Util is fine.
10351
+ emptyinfo.addEventListener('click', () => {
10352
+ this.clearActiveCell();
10353
+ const builders = document.querySelectorAll(this.builder.opts.container);
10354
+ Array.prototype.forEach.call(builders, item => {
10355
+ dom.removeClass(item, 'builder-active');
10356
+ });
10357
+ dom.addClass(builder, 'builder-active');
10358
+ dom.addClass(emptyinfo, 'row-active'); // Needed for addContent(). Directly apply class in Util is fine.
10159
10359
 
10160
- let tabs = quickadd.querySelector('.is-pop-tabs');
10161
- tabs.style.display = 'none';
10162
- const viewportHeight = window.innerHeight;
10163
- let top = emptyinfo.getBoundingClientRect().top;
10164
- const left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
10165
- quickadd.style.display = 'flex';
10166
- const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
10167
-
10168
- const h = quickadd.offsetHeight;
10169
-
10170
- if (viewportHeight - top > h) {
10171
- top = top + emptyinfo.offsetHeight * this.builder.opts.zoom - 19;
10172
- quickadd.style.top = top + window.pageYOffset + 27 + 'px';
10173
- quickadd.style.left = left - w / 2 + 7 + 'px';
10174
- dom.removeClass(quickadd, 'arrow-bottom');
10175
- dom.removeClass(quickadd, 'arrow-right');
10176
- dom.removeClass(quickadd, 'arrow-left');
10177
- dom.removeClass(quickadd, 'center');
10178
- dom.addClass(quickadd, 'arrow-top');
10179
- dom.addClass(quickadd, 'center');
10180
- } else {
10181
- quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
10182
- quickadd.style.left = left - w / 2 + 7 + 'px';
10183
- dom.removeClass(quickadd, 'arrow-top');
10184
- dom.removeClass(quickadd, 'arrow-right');
10185
- dom.removeClass(quickadd, 'arrow-left');
10186
- dom.removeClass(quickadd, 'center');
10187
- dom.addClass(quickadd, 'arrow-bottom');
10188
- dom.addClass(quickadd, 'center');
10189
- }
10360
+ const builderStuff = this.builder.builderStuff;
10361
+ let quickadd = builderStuff.querySelector('.quickadd'); // see quickadd.js. Directly select by class in Util is fine.
10190
10362
 
10191
- quickadd.setAttribute('data-mode', 'row');
10192
- });
10193
- } else {
10194
- let emptyinfo = builder.querySelector('.row-add-initial');
10195
- if (emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
10196
- }
10197
- });
10363
+ let tabs = quickadd.querySelector('.is-pop-tabs');
10364
+ tabs.style.display = 'none';
10365
+ const viewportHeight = window.innerHeight;
10366
+ let top = emptyinfo.getBoundingClientRect().top;
10367
+ const left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
10368
+ quickadd.style.display = 'flex';
10369
+ const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
10370
+
10371
+ const h = quickadd.offsetHeight;
10372
+
10373
+ if (viewportHeight - top > h) {
10374
+ top = top + emptyinfo.offsetHeight * this.builder.opts.zoom - 19;
10375
+ quickadd.style.top = top + window.pageYOffset + 27 + 'px';
10376
+ quickadd.style.left = left - w / 2 + 7 + 'px';
10377
+ dom.removeClass(quickadd, 'arrow-bottom');
10378
+ dom.removeClass(quickadd, 'arrow-right');
10379
+ dom.removeClass(quickadd, 'arrow-left');
10380
+ dom.removeClass(quickadd, 'center');
10381
+ dom.addClass(quickadd, 'arrow-top');
10382
+ dom.addClass(quickadd, 'center');
10383
+ } else {
10384
+ quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
10385
+ quickadd.style.left = left - w / 2 + 7 + 'px';
10386
+ dom.removeClass(quickadd, 'arrow-top');
10387
+ dom.removeClass(quickadd, 'arrow-right');
10388
+ dom.removeClass(quickadd, 'arrow-left');
10389
+ dom.removeClass(quickadd, 'center');
10390
+ dom.addClass(quickadd, 'arrow-bottom');
10391
+ dom.addClass(quickadd, 'center');
10392
+ }
10393
+
10394
+ quickadd.setAttribute('data-mode', 'row');
10395
+ });
10396
+ } else {
10397
+ let emptyinfo = builder.querySelector('.row-add-initial');
10398
+ if (emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
10399
+ }
10198
10400
  }
10199
10401
 
10200
10402
  clearPreferences() {
@@ -10476,8 +10678,7 @@ class Util {
10476
10678
 
10477
10679
  this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
10478
10680
  this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
10479
- this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color'); // console.log(this.builder.styleButtonClassicBackgroundHover);
10480
-
10681
+ this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color');
10481
10682
  this.builder.styleDark = false;
10482
10683
  this.builder.styleColored = false;
10483
10684
  this.builder.styleColoredDark = false;
@@ -11586,7 +11787,6 @@ class Dom {
11586
11787
  }
11587
11788
  } // https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/
11588
11789
  // addClass(element, classname) {
11589
- // console.log(element.classList)
11590
11790
  // if (element.classList) element.classList.add(classname);
11591
11791
  // else if (!this.hasClass(element, classname)) element.className += ' ' + classname;
11592
11792
  // }
@@ -11603,7 +11803,6 @@ class Dom {
11603
11803
  let s = element.getAttribute('class');
11604
11804
  return new RegExp('\\b' + classname + '\\b').test(s);
11605
11805
  } catch (e) {// Do Nothing
11606
- // console.log(element);
11607
11806
  } //return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);
11608
11807
 
11609
11808
  }
@@ -11635,7 +11834,6 @@ class Dom {
11635
11834
  // if(classname==='is-side') console.log(element.nodeName); // NOTE: click on svg can still returns undefined in IE11
11636
11835
  if (!element.tagName) return false;
11637
11836
  if (element.tagName === 'BODY' || element.tagName === 'HTML') return false; // if(!element.classList) {
11638
- // console.log('no classList');
11639
11837
  // return false;
11640
11838
  // }
11641
11839
 
@@ -11685,7 +11883,6 @@ class Dom {
11685
11883
  return true;
11686
11884
  }
11687
11885
  } catch (e) {// Do Nothing
11688
- // console.log(element);
11689
11886
  // return false;
11690
11887
  }
11691
11888
 
@@ -11717,7 +11914,6 @@ class Dom {
11717
11914
  return element;
11718
11915
  }
11719
11916
  } catch (e) {// Do Nothing
11720
- // console.log(element);
11721
11917
  // return false;
11722
11918
  }
11723
11919
 
@@ -11844,7 +12040,7 @@ class Dom {
11844
12040
  textSelection() {
11845
12041
  try {
11846
12042
  var elm;
11847
- var curr = window.getSelection().getRangeAt(0).commonAncestorContainer; //console.log(curr.nodeType)
12043
+ var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
11848
12044
 
11849
12045
  if (curr.nodeType === 3) {
11850
12046
  // text node
@@ -17135,9 +17331,9 @@ let hash$1 = {};
17135
17331
  class HtmlUtil {
17136
17332
  constructor(builder) {
17137
17333
  this.builder = builder;
17138
- const util = new Util(builder);
17139
- const builderstuff = util.builderStuff();
17140
- let viewhtml = builderstuff.querySelector('.viewhtml');
17334
+ const util = this.builder.util;
17335
+ const builderStuff = this.builder.builderStuff;
17336
+ let viewhtml = builderStuff.querySelector('.viewhtml');
17141
17337
 
17142
17338
  if (!viewhtml) {
17143
17339
  /*
@@ -17183,10 +17379,10 @@ class HtmlUtil {
17183
17379
  </div>
17184
17380
 
17185
17381
  `;
17186
- dom$E.appendHtml(builderstuff, html);
17187
- viewhtml = builderstuff.querySelector('.viewhtml');
17188
- let viewhtmlformatted = builderstuff.querySelector('.viewhtmlformatted');
17189
- let viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
17382
+ dom$E.appendHtml(builderStuff, html);
17383
+ viewhtml = builderStuff.querySelector('.viewhtml');
17384
+ let viewhtmlformatted = builderStuff.querySelector('.viewhtmlformatted');
17385
+ let viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
17190
17386
  let elm = viewhtml.querySelector('.input-html-larger');
17191
17387
  dom$E.addEventListener(elm, 'click', () => {
17192
17388
  let textarea = viewhtml.querySelector('textarea'); // Used by html dialog (syntaxhighlighting)
@@ -17222,9 +17418,9 @@ class HtmlUtil {
17222
17418
  }
17223
17419
 
17224
17420
  viewHtmlNormal() {
17225
- const util = new Util(this.builder);
17226
- const builderstuff = util.builderStuff();
17227
- const viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
17421
+ const util = this.builder.util;
17422
+ const builderStuff = this.builder.builderStuff;
17423
+ const viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
17228
17424
  let iframe = viewhtmlnormal.querySelector('iframe');
17229
17425
  iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
17230
17426
 
@@ -17237,9 +17433,9 @@ class HtmlUtil {
17237
17433
  }
17238
17434
 
17239
17435
  viewHtmlLarger() {
17240
- const util = new Util(this.builder);
17241
- const builderstuff = util.builderStuff();
17242
- const viewhtmllarger = builderstuff.querySelector('.viewhtmllarger');
17436
+ const util = this.builder.util;
17437
+ const builderStuff = this.builder.builderStuff;
17438
+ const viewhtmllarger = builderStuff.querySelector('.viewhtmllarger');
17243
17439
  let iframe = viewhtmllarger.querySelector('iframe');
17244
17440
  iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
17245
17441
 
@@ -17251,14 +17447,14 @@ class HtmlUtil {
17251
17447
  }
17252
17448
 
17253
17449
  view(mode, area) {
17254
- const util = new Util(this.builder);
17255
- const builderstuff = util.builderStuff();
17450
+ const util = this.builder.util;
17451
+ const builderStuff = this.builder.builderStuff;
17256
17452
  let viewhtml;
17257
17453
 
17258
17454
  if (this.builder.opts.htmlSyntaxHighlighting) {
17259
- viewhtml = builderstuff.querySelector('.viewhtmlformatted');
17455
+ viewhtml = builderStuff.querySelector('.viewhtmlformatted');
17260
17456
  } else {
17261
- viewhtml = builderstuff.querySelector('.viewhtml');
17457
+ viewhtml = builderStuff.querySelector('.viewhtml');
17262
17458
  }
17263
17459
 
17264
17460
  viewhtml.querySelector('.is-modal-footer').innerHTML = `<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -17284,7 +17480,7 @@ class HtmlUtil {
17284
17480
 
17285
17481
  dom$E.removeClass(row, 'row-outline'); //Hide Column tool
17286
17482
 
17287
- let columnTool = builderstuff.querySelector('.is-column-tool');
17483
+ let columnTool = builderStuff.querySelector('.is-column-tool');
17288
17484
  dom$E.removeClass(columnTool, 'active');
17289
17485
  }
17290
17486
 
@@ -17332,7 +17528,8 @@ class HtmlUtil {
17332
17528
  if (mode === 'cell') {
17333
17529
  const cell = util.cellSelected();
17334
17530
  cell.innerHTML = html;
17335
- this.builder.applyBehavior(); //Trigger Change event
17531
+ let builderActive = document.querySelector('.builder-active');
17532
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
17336
17533
 
17337
17534
  this.builder.opts.onChange(); //Trigger Render event
17338
17535
 
@@ -17343,7 +17540,8 @@ class HtmlUtil {
17343
17540
  const cell = util.cellSelected();
17344
17541
  const row = cell.parentNode;
17345
17542
  row.innerHTML = html;
17346
- this.builder.applyBehavior(); //Trigger Change event
17543
+ let builderActive = document.querySelector('.builder-active');
17544
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
17347
17545
 
17348
17546
  this.builder.opts.onChange(); //Trigger Render event
17349
17547
 
@@ -17358,7 +17556,8 @@ class HtmlUtil {
17358
17556
  var range = document.createRange();
17359
17557
  range.setStart(area, 0);
17360
17558
  area.appendChild(range.createContextualFragment(html));
17361
- this.builder.applyBehavior(); //Trigger Change event
17559
+ let builderActive = document.querySelector('.builder-active');
17560
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
17362
17561
 
17363
17562
  this.builder.opts.onChange(); //Trigger Render event
17364
17563
 
@@ -17397,9 +17596,9 @@ class HtmlUtil {
17397
17596
  } //Hide popup
17398
17597
 
17399
17598
 
17400
- let columnMore = builderstuff.querySelector('.is-pop.columnmore');
17599
+ let columnMore = builderStuff.querySelector('.is-pop.columnmore');
17401
17600
  columnMore.style.display = '';
17402
- let rowMore = builderstuff.querySelector('.is-pop.rowmore');
17601
+ let rowMore = builderStuff.querySelector('.is-pop.rowmore');
17403
17602
  rowMore.style.display = '';
17404
17603
  }
17405
17604
 
@@ -17427,17 +17626,17 @@ class HtmlUtil {
17427
17626
  });
17428
17627
  }
17429
17628
 
17430
- const util = new Util(this.builder); //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
17629
+ const util = this.builder.util;
17630
+ const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
17431
17631
 
17432
- const builderstuff = util.builderStuff();
17433
- let elm = builderstuff.querySelector('#tmp_content');
17434
- if (elm) builderstuff.removeChild(elm);
17435
- elm = builderstuff.querySelector('#tmp_buildercontent');
17436
- if (elm) builderstuff.removeChild(elm);
17632
+ let elm = builderStuff.querySelector('#tmp_content');
17633
+ if (elm) builderStuff.removeChild(elm);
17634
+ elm = builderStuff.querySelector('#tmp_buildercontent');
17635
+ if (elm) builderStuff.removeChild(elm);
17437
17636
  let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
17438
17637
  <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
17439
- dom$E.appendHtml(builderstuff, html);
17440
- let tmp = builderstuff.querySelector('#tmp_content');
17638
+ dom$E.appendHtml(builderStuff, html);
17639
+ let tmp = builderStuff.querySelector('#tmp_content');
17441
17640
  tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
17442
17641
 
17443
17642
  let blocks = tmp.querySelectorAll('[data-html]');
@@ -17478,7 +17677,7 @@ class HtmlUtil {
17478
17677
  _builder.removeAttribute('between-blocks-center'); // old
17479
17678
  _builder.removeAttribute('hideelementhighlight');
17480
17679
  let builderhtml = _builder.innerHTML;
17481
- let tmpbuilder = builderstuff.querySelector('#tmp_buildercontent');
17680
+ let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
17482
17681
  tmpbuilder.innerHTML = builderhtml;
17483
17682
  let elms = tmp.querySelectorAll('.sortable-chosen');
17484
17683
  dom.removeClasses(elms, 'sortable-chosen');
@@ -17762,10 +17961,10 @@ class HtmlUtil {
17762
17961
  html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
17763
17962
  }
17764
17963
 
17765
- elm = builderstuff.querySelector('#tmp_content');
17766
- if (elm) builderstuff.removeChild(elm);
17767
- elm = builderstuff.querySelector('#tmp_buildercontent');
17768
- if (elm) builderstuff.removeChild(elm); // return html;
17964
+ elm = builderStuff.querySelector('#tmp_content');
17965
+ if (elm) builderStuff.removeChild(elm);
17966
+ elm = builderStuff.querySelector('#tmp_buildercontent');
17967
+ if (elm) builderStuff.removeChild(elm); // return html;
17769
17968
 
17770
17969
  let beautify = JsBeautify.html;
17771
17970
  return beautify(html);
@@ -18541,7 +18740,8 @@ const prepareSvgIcons = () => {
18541
18740
  class Snippets {
18542
18741
  constructor(builder) {
18543
18742
  this.builder = builder;
18544
- this.util = new Util(this.builder);
18743
+ const util = this.builder.util;
18744
+ this.util = util;
18545
18745
  }
18546
18746
 
18547
18747
  getSnippetsHtml() {
@@ -19438,8 +19638,8 @@ class Snippets {
19438
19638
  const dom$B = new Dom();
19439
19639
 
19440
19640
  const renderQuickAdd = builder => {
19441
- const util = new Util(builder);
19442
- const builderStuff = util.builderStuff();
19641
+ const util = builder.util;
19642
+ const builderStuff = builder.builderStuff;
19443
19643
  let quickadd = builderStuff.querySelector('.quickadd');
19444
19644
 
19445
19645
  if (!quickadd) {
@@ -19824,9 +20024,10 @@ class Grid {
19824
20024
  row.previousElementSibling.appendChild(cell); //add
19825
20025
 
19826
20026
  row.parentNode.removeChild(row); //remove current (empty) row (including its overlay)
20027
+ //re-add tool
19827
20028
 
19828
- builder.applyBehavior(); //re-add tool
19829
-
20029
+ let builderActive = document.querySelector('.builder-active');
20030
+ builder.applyBehaviorOn(builderActive);
19830
20031
  columnTool.position(cell);
19831
20032
  cell.click(); //refresh active cell/row
19832
20033
 
@@ -19841,9 +20042,10 @@ class Grid {
19841
20042
  var rowElement = row.cloneNode(true);
19842
20043
  rowElement.innerHTML = '';
19843
20044
  rowElement.appendChild(cell);
19844
- row.parentNode.insertBefore(rowElement, row);
19845
- builder.applyBehavior(); //re-add tool
20045
+ row.parentNode.insertBefore(rowElement, row); //re-add tool
19846
20046
 
20047
+ let builderActive = document.querySelector('.builder-active');
20048
+ builder.applyBehaviorOn(builderActive);
19847
20049
  columnTool.position(cell);
19848
20050
  cell.click(); //refresh active cell/row
19849
20051
 
@@ -19899,9 +20101,10 @@ class Grid {
19899
20101
  row.nextElementSibling.appendChild(cell); //add
19900
20102
 
19901
20103
  row.parentNode.removeChild(row); //remove current (empty) row (including its overlay)
20104
+ //re-add tool
19902
20105
 
19903
- builder.applyBehavior(); //re-add tool
19904
-
20106
+ let builderActive = document.querySelector('.builder-active');
20107
+ builder.applyBehaviorOn(builderActive);
19905
20108
  columnTool.position(cell);
19906
20109
  cell.click(); //refresh active cell/row
19907
20110
 
@@ -19916,9 +20119,10 @@ class Grid {
19916
20119
  var rowElement = row.cloneNode(true);
19917
20120
  rowElement.innerHTML = '';
19918
20121
  rowElement.appendChild(cell);
19919
- dom$A.moveAfter(rowElement, row);
19920
- builder.applyBehavior(); //re-add tool
20122
+ dom$A.moveAfter(rowElement, row); //re-add tool
19921
20123
 
20124
+ let builderActive = document.querySelector('.builder-active');
20125
+ builder.applyBehaviorOn(builderActive);
19922
20126
  columnTool.position(cell);
19923
20127
  cell.click(); //refresh active cell/row
19924
20128
 
@@ -19962,8 +20166,10 @@ class Grid {
19962
20166
  }
19963
20167
 
19964
20168
  row.insertBefore(cellElement, cell);
19965
- util.fixLayout(row, builder);
19966
- builder.applyBehavior();
20169
+ util.fixLayout(row, builder); //re-add tool
20170
+
20171
+ let builderActive = document.querySelector('.builder-active');
20172
+ builder.applyBehaviorOn(builderActive);
19967
20173
  columnTool.position(cell);
19968
20174
  cell.click(); //refresh active cell/row
19969
20175
 
@@ -20467,8 +20673,10 @@ class Grid {
20467
20673
  cols = dom$A.elementChildren(row);
20468
20674
  cols.forEach(col => {
20469
20675
  dom$A.removeClass(col, 'cell-active');
20470
- });
20471
- builder.applyBehavior();
20676
+ }); //re-add tool
20677
+
20678
+ let builderActive = document.querySelector('.builder-active');
20679
+ builder.applyBehaviorOn(builderActive);
20472
20680
  this.rowTool.position(rowElement);
20473
20681
  this.builder.opts.onChange();
20474
20682
  } // Utilities
@@ -20497,10 +20705,9 @@ class RowTool$1 {
20497
20705
  }
20498
20706
 
20499
20707
  position(row) {
20500
- const util = new Util(this.builder);
20501
- const builderstuff = util.builderStuff();
20708
+ const builderStuff = this.builder.builderStuff;
20502
20709
  let rowTool = row.querySelector('.is-row-tool');
20503
- let rowMore = builderstuff.querySelector('.rowmore');
20710
+ let rowMore = builderStuff.querySelector('.rowmore');
20504
20711
  dom$A.addClass(rowMore, 'transition1');
20505
20712
  const elm = rowTool.querySelector('.row-more');
20506
20713
  const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -20537,10 +20744,9 @@ class ColumnTool$1 {
20537
20744
  }
20538
20745
 
20539
20746
  position(col) {
20540
- const util = new Util(this.builder);
20541
- const builderstuff = util.builderStuff();
20542
- this.columnTool = builderstuff.querySelector('.is-column-tool');
20543
- this.columnMore = builderstuff.querySelector('.columnmore');
20747
+ const builderStuff = this.builder.builderStuff;
20748
+ this.columnTool = builderStuff.querySelector('.is-column-tool');
20749
+ this.columnMore = builderStuff.querySelector('.columnmore');
20544
20750
  dom$A.addClass(this.columnMore, 'transition1');
20545
20751
  setTimeout(() => {
20546
20752
  this.columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
@@ -20556,17 +20762,15 @@ class ColumnTool$1 {
20556
20762
  }
20557
20763
 
20558
20764
  hide() {
20559
- const util = new Util(this.builder);
20560
- const builderstuff = util.builderStuff();
20561
- this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
20765
+ const builderStuff = this.builder.builderStuff;
20766
+ this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
20562
20767
 
20563
20768
  dom$A.removeClass(this.columnTool, 'active');
20564
20769
  }
20565
20770
 
20566
20771
  show() {
20567
- const util = new Util(this.builder);
20568
- const builderstuff = util.builderStuff();
20569
- this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
20772
+ const builderStuff = this.builder.builderStuff;
20773
+ this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
20570
20774
 
20571
20775
  dom$A.addClass(this.columnTool, 'active');
20572
20776
  }
@@ -20689,7 +20893,8 @@ class Draggable$1 {
20689
20893
  const dom$z = new Dom();
20690
20894
 
20691
20895
  const renderGridEditor = builder => {
20692
- const util = new Util(builder);
20896
+ const util = builder.util;
20897
+ const builderStuff = builder.builderStuff;
20693
20898
  const grid = new Grid(builder);
20694
20899
  const htmlutil = new HtmlUtil(builder);
20695
20900
  let rowhtmlbutton = '';
@@ -20736,8 +20941,7 @@ const renderGridEditor = builder => {
20736
20941
  </div>`; //LATER:
20737
20942
  //<button title="${util.out('Element Tool')}" class="cell-elmtool"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></button>
20738
20943
 
20739
- const builderstuff = util.builderStuff();
20740
- dom$z.appendHtml(builderstuff, html);
20944
+ dom$z.appendHtml(builderStuff, html);
20741
20945
  new Draggable$1({
20742
20946
  selector: '.is-draggable'
20743
20947
  });
@@ -24012,8 +24216,8 @@ Sortable.mount(Remove, Revert);
24012
24216
  const dom$x = new Dom();
24013
24217
 
24014
24218
  const renderSnippetPanel = builder => {
24015
- const util = new Util(builder);
24016
- const builderStuff = util.builderStuff();
24219
+ const util = builder.util;
24220
+ const builderStuff = builder.builderStuff;
24017
24221
  let hideHandle = '';
24018
24222
  let sidePanel = builder.opts.sidePanel;
24019
24223
 
@@ -47341,9 +47545,9 @@ const dom$w = new Dom();
47341
47545
  class Image {
47342
47546
  constructor(builder) {
47343
47547
  this.builder = builder;
47344
- const util = new Util(builder);
47548
+ const util = this.builder.util;
47549
+ const builderStuff = this.builder.builderStuff;
47345
47550
  this.util = util;
47346
- const builderStuff = util.builderStuff();
47347
47551
  let imageTool = builderStuff.querySelector('#divImageTool');
47348
47552
  let imageResizer;
47349
47553
 
@@ -49536,8 +49740,8 @@ const dom$v = new Dom();
49536
49740
  class Hyperlink {
49537
49741
  constructor(builder) {
49538
49742
  this.builder = builder;
49539
- const util = new Util(builder);
49540
- const builderStuff = util.builderStuff();
49743
+ const util = this.builder.util;
49744
+ const builderStuff = this.builder.builderStuff;
49541
49745
  this.builderStuff = builderStuff;
49542
49746
  let linkTool = builderStuff.querySelector('#divLinkTool');
49543
49747
 
@@ -50090,9 +50294,9 @@ const dom$u = new Dom();
50090
50294
  class Spacer {
50091
50295
  constructor(builder) {
50092
50296
  this.builder = builder;
50093
- const util = new Util(builder);
50297
+ const util = this.builder.util;
50298
+ const builderStuff = this.builder.builderStuff;
50094
50299
  this.util = util;
50095
- const builderStuff = util.builderStuff();
50096
50300
  this.builderStuff = builderStuff;
50097
50301
  let spacerTool = builderStuff.querySelector('.is-spacer-tool');
50098
50302
 
@@ -50256,9 +50460,9 @@ const dom$t = new Dom();
50256
50460
  class Module {
50257
50461
  constructor(builder) {
50258
50462
  this.builder = builder;
50259
- const util = new Util(builder);
50463
+ const util = this.builder.util;
50464
+ const builderStuff = this.builder.builderStuff;
50260
50465
  this.util = util;
50261
- const builderStuff = util.builderStuff();
50262
50466
  this.builderStuff = builderStuff;
50263
50467
  let moduleTool = builderStuff.querySelector('.is-module-tool');
50264
50468
  let moduleModal;
@@ -50445,7 +50649,8 @@ class Module {
50445
50649
 
50446
50650
  i++;
50447
50651
  });
50448
- this.builder.applyBehavior(); //Trigger Change event
50652
+ let builderActive = document.querySelector('.builder-active');
50653
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
50449
50654
 
50450
50655
  this.builder.opts.onChange(); //Trigger Render event
50451
50656
 
@@ -50501,12 +50706,12 @@ const dom$s = new Dom();
50501
50706
  class Code {
50502
50707
  constructor(builder) {
50503
50708
  this.builder = builder;
50504
- const util = new Util(builder);
50709
+ const util = this.builder.util;
50710
+ const builderStuff = this.builder.builderStuff;
50505
50711
  this.util = util;
50712
+ this.builderStuff = builderStuff;
50506
50713
  const htmlUtil = new HtmlUtil(builder);
50507
50714
  this.htmlUtil = htmlUtil;
50508
- const builderStuff = util.builderStuff();
50509
- this.builderStuff = builderStuff;
50510
50715
  let codeTool = builderStuff.querySelector('.is-code-tool');
50511
50716
 
50512
50717
  if (!codeTool) {
@@ -50627,7 +50832,8 @@ class Code {
50627
50832
  var range = document.createRange();
50628
50833
  range.setStart(codeblock, 0);
50629
50834
  codeblock.appendChild(range.createContextualFragment(html));
50630
- this.builder.applyBehavior(); //Trigger Change event
50835
+ let builderActive = document.querySelector('.builder-active');
50836
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
50631
50837
 
50632
50838
  this.builder.opts.onChange(); //Trigger Render event
50633
50839
 
@@ -50702,9 +50908,9 @@ const dom$r = new Dom();
50702
50908
  class Iframe {
50703
50909
  constructor(builder) {
50704
50910
  this.builder = builder;
50705
- const util = new Util(builder);
50911
+ const util = this.builder.util;
50912
+ const builderStuff = this.builder.builderStuff;
50706
50913
  this.util = util;
50707
- const builderStuff = util.builderStuff();
50708
50914
  this.builderStuff = builderStuff;
50709
50915
  let iframeTool = builderStuff.querySelector('.is-iframe-tool');
50710
50916
  let iframeModal;
@@ -50792,7 +50998,8 @@ class Iframe {
50792
50998
  }
50793
50999
 
50794
51000
  this.builder.activeIframe = iframeParent.querySelector('iframe');
50795
- this.builder.applyBehavior(); //Trigger Change event
51001
+ let builderActive = document.querySelector('.builder-active');
51002
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
50796
51003
 
50797
51004
  this.builder.opts.onChange();
50798
51005
  }
@@ -50844,9 +51051,9 @@ const dom$q = new Dom();
50844
51051
  class Table {
50845
51052
  constructor(builder) {
50846
51053
  this.builder = builder;
50847
- const util = new Util(builder);
51054
+ const util = this.builder.util;
51055
+ const builderStuff = this.builder.builderStuff;
50848
51056
  this.util = util;
50849
- const builderStuff = util.builderStuff();
50850
51057
  this.builderStuff = builderStuff;
50851
51058
  let tableTool = builderStuff.querySelector('.is-table-tool');
50852
51059
  let tableModal;
@@ -51359,9 +51566,9 @@ const dom$p = new Dom();
51359
51566
  class Video {
51360
51567
  constructor(builder) {
51361
51568
  this.builder = builder;
51362
- const util = new Util(builder);
51363
- this.util = util;
51569
+ const util = this.builder.util;
51364
51570
  const builderStuff = this.builder.builderStuff;
51571
+ this.util = util;
51365
51572
  this.builderStuff = builderStuff;
51366
51573
  let videoTool = builderStuff.querySelector('.is-video-tool');
51367
51574
 
@@ -51578,8 +51785,10 @@ const dom$o = new Dom();
51578
51785
  class Element$1 {
51579
51786
  constructor(builder) {
51580
51787
  this.builder = builder;
51581
- const util = new Util(builder);
51788
+ const util = this.builder.util;
51789
+ const builderStuff = this.builder.builderStuff;
51582
51790
  this.util = util;
51791
+ this.builderStuff = builderStuff;
51583
51792
  this.hyperlink = new Hyperlink(builder);
51584
51793
  this.image = new Image(builder);
51585
51794
  this.spacer = new Spacer(builder);
@@ -51588,8 +51797,6 @@ class Element$1 {
51588
51797
  this.iframe = new Iframe(builder);
51589
51798
  this.table = new Table(builder);
51590
51799
  this.video = new Video(builder);
51591
- const builderStuff = util.builderStuff();
51592
- this.builderStuff = builderStuff;
51593
51800
  window.addEventListener('keydown', e => {
51594
51801
  if (e.keyCode === 46) {
51595
51802
  //delete
@@ -51852,11 +52059,11 @@ const dom$n = new Dom();
51852
52059
  class RowTool {
51853
52060
  constructor(builder) {
51854
52061
  this.builder = builder;
52062
+ const util = this.builder.util;
52063
+ const builderStuff = this.builder.builderStuff;
51855
52064
  this.grid = new Grid(builder);
51856
- const util = new Util(this.builder);
51857
52065
  const htmlutil = new HtmlUtil(builder);
51858
- const builderstuff = util.builderStuff();
51859
- let rowMore = builderstuff.querySelector('.rowmore');
52066
+ let rowMore = builderStuff.querySelector('.rowmore');
51860
52067
  let htmlbutton = '';
51861
52068
  if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
51862
52069
  <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')}
@@ -51871,8 +52078,8 @@ class RowTool {
51871
52078
  ${htmlbutton}
51872
52079
  </div>
51873
52080
  </div>`;
51874
- dom$n.appendHtml(builderstuff, html);
51875
- rowMore = builderstuff.querySelector('.rowmore');
52081
+ dom$n.appendHtml(builderStuff, html);
52082
+ rowMore = builderStuff.querySelector('.rowmore');
51876
52083
  let elm = rowMore.querySelector('.row-up');
51877
52084
  if (elm) dom$n.addEventListener(elm, 'click', () => {
51878
52085
  this.grid.moveRowUp();
@@ -51917,8 +52124,8 @@ class RowTool {
51917
52124
  }
51918
52125
 
51919
52126
  render(row) {
51920
- const util = new Util(this.builder);
51921
- const builderstuff = util.builderStuff();
52127
+ const util = this.builder.util;
52128
+ const builderStuff = this.builder.builderStuff;
51922
52129
  let rowMore = this.rowMore;
51923
52130
  let rowtool = row.querySelector('.is-row-tool');
51924
52131
 
@@ -51939,7 +52146,7 @@ class RowTool {
51939
52146
  });
51940
52147
  let elm = rowtool.querySelector('.row-grideditor');
51941
52148
  if (elm) dom$n.addEventListener(elm, 'click', () => {
51942
- const grideditor = builderstuff.querySelector('.grideditor');
52149
+ const grideditor = builderStuff.querySelector('.grideditor');
51943
52150
 
51944
52151
  if (dom$n.hasClass(grideditor, 'active')) {
51945
52152
  dom$n.removeClass(grideditor, 'active');
@@ -51987,7 +52194,7 @@ class RowTool {
51987
52194
 
51988
52195
  dom$n.removeClass(row, 'row-outline'); //Hide Column tool
51989
52196
 
51990
- let columnTool = builderstuff.querySelector('.is-column-tool');
52197
+ let columnTool = builderStuff.querySelector('.is-column-tool');
51991
52198
  dom$n.removeClass(columnTool, 'active');
51992
52199
  const elm = rowtool.querySelector('.row-more');
51993
52200
  const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -52041,7 +52248,7 @@ class RowAddTool {
52041
52248
  }
52042
52249
 
52043
52250
  render(row) {
52044
- const util = new Util(this.builder);
52251
+ const util = this.builder.util;
52045
52252
  const quickadd = renderQuickAdd(this.builder);
52046
52253
  let rowaddtool = row.querySelector('.is-rowadd-tool');
52047
52254
 
@@ -53756,9 +53963,9 @@ class ColumnTool {
53756
53963
  constructor(builder) {
53757
53964
  this.builder = builder;
53758
53965
  this.grid = new Grid(builder);
53759
- const util = new Util(builder);
53966
+ const util = this.builder.util;
53967
+ const builderStuff = this.builder.builderStuff;
53760
53968
  this.util = util;
53761
- const builderStuff = util.builderStuff();
53762
53969
  let columnTool = builderStuff.querySelector('.is-column-tool');
53763
53970
  let columnMore;
53764
53971
  let htmlbutton = '';
@@ -55187,9 +55394,9 @@ const dom$k = new Dom();
55187
55394
  class ELementStyleEditor {
55188
55395
  constructor(builder) {
55189
55396
  this.builder = builder;
55190
- const util = new Util(builder);
55397
+ const util = this.builder.util;
55398
+ const builderStuff = this.builder.builderStuff;
55191
55399
  this.util = util;
55192
- const builderStuff = util.builderStuff();
55193
55400
  this.builderStuff = builderStuff;
55194
55401
  let modalStyles = builderStuff.querySelector('.editstyles');
55195
55402
 
@@ -55307,9 +55514,9 @@ const dom$j = new Dom();
55307
55514
  class ElementBoxStyles {
55308
55515
  constructor(builder) {
55309
55516
  this.builder = builder;
55310
- const util = new Util(builder);
55517
+ const util = this.builder.util;
55518
+ const builderStuff = this.builder.builderStuff;
55311
55519
  this.util = util;
55312
- const builderStuff = util.builderStuff();
55313
55520
  this.builderStuff = builderStuff;
55314
55521
  const elementStyleEditor = new ELementStyleEditor(builder);
55315
55522
  let panelStuff = builderStuff.querySelector('#divElementBox');
@@ -55825,9 +56032,9 @@ const dom$i = new Dom();
55825
56032
  class ElementSpacingStyles {
55826
56033
  constructor(builder) {
55827
56034
  this.builder = builder;
55828
- const util = new Util(builder);
56035
+ const util = this.builder.util;
56036
+ const builderStuff = this.builder.builderStuff;
55829
56037
  this.util = util;
55830
- const builderStuff = util.builderStuff();
55831
56038
  this.builderStuff = builderStuff;
55832
56039
  const elementStyleEditor = new ELementStyleEditor(builder);
55833
56040
  let panelStuff = builderStuff.querySelector('#divElementSpacing');
@@ -56478,9 +56685,9 @@ const dom$h = new Dom();
56478
56685
  class ElementBorderStyles {
56479
56686
  constructor(builder) {
56480
56687
  this.builder = builder;
56481
- const util = new Util(builder);
56688
+ const util = this.builder.util;
56689
+ const builderStuff = this.builder.builderStuff;
56482
56690
  this.util = util;
56483
- const builderStuff = util.builderStuff();
56484
56691
  this.builderStuff = builderStuff;
56485
56692
  const elementStyleEditor = new ELementStyleEditor(builder);
56486
56693
  let panelStuff = builderStuff.querySelector('#divElementBorder');
@@ -57200,9 +57407,9 @@ const dom$g = new Dom();
57200
57407
  class ElementTextStyles {
57201
57408
  constructor(builder) {
57202
57409
  this.builder = builder;
57203
- const util = new Util(builder);
57410
+ const util = this.builder.util;
57411
+ const builderStuff = this.builder.builderStuff;
57204
57412
  this.util = util;
57205
- const builderStuff = util.builderStuff();
57206
57413
  this.builderStuff = builderStuff;
57207
57414
  const elementStyleEditor = new ELementStyleEditor(builder);
57208
57415
  let panelStuff = builderStuff.querySelector('#divElementText');
@@ -57721,9 +57928,9 @@ const dom$f = new Dom();
57721
57928
  class ElementCornerStyles {
57722
57929
  constructor(builder) {
57723
57930
  this.builder = builder;
57724
- const util = new Util(builder);
57931
+ const util = this.builder.util;
57932
+ const builderStuff = this.builder.builderStuff;
57725
57933
  this.util = util;
57726
- const builderStuff = util.builderStuff();
57727
57934
  this.builderStuff = builderStuff;
57728
57935
  const elementStyleEditor = new ELementStyleEditor(builder);
57729
57936
  let panelStuff = builderStuff.querySelector('#divElementCorner');
@@ -57916,9 +58123,9 @@ const dom$e = new Dom();
57916
58123
  class ElementShadowStyles {
57917
58124
  constructor(builder) {
57918
58125
  this.builder = builder;
57919
- const util = new Util(builder);
58126
+ const util = this.builder.util;
58127
+ const builderStuff = this.builder.builderStuff;
57920
58128
  this.util = util;
57921
- const builderStuff = util.builderStuff();
57922
58129
  this.builderStuff = builderStuff;
57923
58130
  const elementStyleEditor = new ELementStyleEditor(builder);
57924
58131
  let panelStuff = builderStuff.querySelector('#divElementShadow');
@@ -58179,9 +58386,9 @@ const dom$d = new Dom();
58179
58386
  class ElementDisplayStyles {
58180
58387
  constructor(builder) {
58181
58388
  this.builder = builder;
58182
- const util = new Util(builder);
58389
+ const util = this.builder.util;
58390
+ const builderStuff = this.builder.builderStuff;
58183
58391
  this.util = util;
58184
- const builderStuff = util.builderStuff();
58185
58392
  this.builderStuff = builderStuff;
58186
58393
  const elementStyleEditor = new ELementStyleEditor(builder);
58187
58394
  let panelStuff = builderStuff.querySelector('#divElementDisplay');
@@ -58370,9 +58577,9 @@ const dom$c = new Dom();
58370
58577
  class ElementPositionStyles {
58371
58578
  constructor(builder) {
58372
58579
  this.builder = builder;
58373
- const util = new Util(builder);
58580
+ const util = this.builder.util;
58581
+ const builderStuff = this.builder.builderStuff;
58374
58582
  this.util = util;
58375
- const builderStuff = util.builderStuff();
58376
58583
  this.builderStuff = builderStuff;
58377
58584
  const elementStyleEditor = new ELementStyleEditor(builder);
58378
58585
  let panelStuff = builderStuff.querySelector('#divElementPosition');
@@ -58709,9 +58916,9 @@ const dom$b = new Dom();
58709
58916
  class ElementEffectStyles {
58710
58917
  constructor(builder) {
58711
58918
  this.builder = builder;
58712
- const util = new Util(builder);
58919
+ const util = this.builder.util;
58920
+ const builderStuff = this.builder.builderStuff;
58713
58921
  this.util = util;
58714
- const builderStuff = util.builderStuff();
58715
58922
  this.builderStuff = builderStuff;
58716
58923
  const elementStyleEditor = new ELementStyleEditor(builder);
58717
58924
  let panelStuff = builderStuff.querySelector('#divElementEffect');
@@ -59264,9 +59471,9 @@ const dom$a = new Dom();
59264
59471
  class ElementAttributeStyles {
59265
59472
  constructor(builder) {
59266
59473
  this.builder = builder;
59267
- const util = new Util(builder);
59474
+ const util = this.builder.util;
59475
+ const builderStuff = this.builder.builderStuff;
59268
59476
  this.util = util;
59269
- const builderStuff = util.builderStuff();
59270
59477
  this.builderStuff = builderStuff;
59271
59478
  let panelStuff = builderStuff.querySelector('#divElementAttribute');
59272
59479
  this.panelStuff = panelStuff;
@@ -59408,9 +59615,9 @@ const dom$9 = new Dom();
59408
59615
  class ElementAnimationStyles {
59409
59616
  constructor(builder) {
59410
59617
  this.builder = builder;
59411
- const util = new Util(builder);
59618
+ const util = this.builder.util;
59619
+ const builderStuff = this.builder.builderStuff;
59412
59620
  this.util = util;
59413
- const builderStuff = util.builderStuff();
59414
59621
  this.builderStuff = builderStuff;
59415
59622
  let panelStuff = builderStuff.querySelector('#divElementAnimation');
59416
59623
  this.panelStuff = panelStuff;
@@ -59659,9 +59866,9 @@ let arrElms = [];
59659
59866
  class ElementPanel {
59660
59867
  constructor(builder) {
59661
59868
  this.builder = builder;
59662
- const util = new Util(builder);
59869
+ const util = this.builder.util;
59870
+ const builderStuff = this.builder.builderStuff;
59663
59871
  this.util = util;
59664
- const builderStuff = util.builderStuff();
59665
59872
  this.builderStuff = builderStuff;
59666
59873
  let panel = builderStuff.querySelector('.elementstyles');
59667
59874
 
@@ -59888,13 +60095,14 @@ const dom$7 = new Dom();
59888
60095
  class ElementTool {
59889
60096
  constructor(builder) {
59890
60097
  this.builder = builder;
59891
- const util = new Util(builder);
60098
+ const util = this.builder.util;
60099
+ const builderStuff = this.builder.builderStuff;
59892
60100
  this.util = util;
60101
+ this.builderStuff = builderStuff;
59893
60102
  const elementPanel = new ElementPanel(builder);
59894
60103
  this.elementPanel = elementPanel;
59895
- const builderstuff = util.builderStuff();
59896
- let elementTool = builderstuff.querySelector('.is-element-tool');
59897
- let elementMore = builderstuff.querySelector('.elmmore');
60104
+ let elementTool = builderStuff.querySelector('.is-element-tool');
60105
+ let elementMore = builderStuff.querySelector('.elmmore');
59898
60106
 
59899
60107
  if (!elementTool) {
59900
60108
  let html = `<div class="is-tool is-element-tool">
@@ -59914,9 +60122,9 @@ class ElementTool {
59914
60122
  </div>
59915
60123
  </div>
59916
60124
  `;
59917
- dom$7.appendHtml(builderstuff, html);
59918
- elementTool = builderstuff.querySelector('.is-element-tool');
59919
- elementMore = builderstuff.querySelector('.elmmore'); // Prepare for tooltip
60125
+ dom$7.appendHtml(builderStuff, html);
60126
+ elementTool = builderStuff.querySelector('.is-element-tool');
60127
+ elementMore = builderStuff.querySelector('.elmmore'); // Prepare for tooltip
59920
60128
 
59921
60129
  let elms = elementTool.querySelectorAll('[title]');
59922
60130
  Array.prototype.forEach.call(elms, elm => {
@@ -60002,14 +60210,14 @@ class ElementTool {
60002
60210
 
60003
60211
  if (cell.childElementCount === 0 && row.childElementCount === 3) {
60004
60212
  row.parentNode.removeChild(row);
60005
- let columnTool = builderstuff.querySelector('.is-column-tool'); // quick access
60213
+ let columnTool = builderStuff.querySelector('.is-column-tool'); // quick access
60006
60214
 
60007
60215
  dom$7.removeClass(columnTool, 'active');
60008
60216
  util.checkEmpty();
60009
60217
  } else if (cell.childElementCount === 0) {
60010
60218
  row.removeChild(cell);
60011
60219
  util.fixLayout(row, builder);
60012
- let columnTool = builderstuff.querySelector('.is-column-tool'); // // quick access
60220
+ let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
60013
60221
 
60014
60222
  dom$7.removeClass(columnTool, 'active');
60015
60223
  }
@@ -60135,7 +60343,8 @@ class ElementTool {
60135
60343
  setTimeout(() => {
60136
60344
  newelm.click();
60137
60345
  this.position(newelm);
60138
- this.builder.applyBehavior(); //Trigger Change event
60346
+ let builderActive = document.querySelector('.builder-active');
60347
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
60139
60348
 
60140
60349
  this.builder.opts.onChange();
60141
60350
  }, 100); //Timeout needed by Safari
@@ -60414,8 +60623,8 @@ const dom$6 = new Dom();
60414
60623
  class Preferences {
60415
60624
  constructor(builder) {
60416
60625
  this.builder = builder;
60417
- const util = new Util(builder);
60418
- const builderstuff = util.builderStuff();
60626
+ const util = this.builder.util;
60627
+ const builderStuff = this.builder.builderStuff;
60419
60628
  let htmlThemes = '';
60420
60629
 
60421
60630
  if (this.builder.themes) {
@@ -60435,7 +60644,7 @@ class Preferences {
60435
60644
  htmlThemes += '</div>';
60436
60645
  }
60437
60646
 
60438
- let config = builderstuff.querySelector('.viewconfig');
60647
+ let config = builderStuff.querySelector('.viewconfig');
60439
60648
 
60440
60649
  if (!config) {
60441
60650
  let html = `<div class="is-modal viewconfig">
@@ -60561,8 +60770,8 @@ class Preferences {
60561
60770
  </div>
60562
60771
  </div>
60563
60772
  </div>`;
60564
- dom$6.appendHtml(builderstuff, html);
60565
- config = builderstuff.querySelector('.viewconfig');
60773
+ dom$6.appendHtml(builderStuff, html);
60774
+ config = builderStuff.querySelector('.viewconfig');
60566
60775
 
60567
60776
  if (!(builder.opts.snippetList === '#divSnippetList' && builder.opts.snippetJSON.snippets.length > 0)) {
60568
60777
  config.querySelector('.option-opensnippets').style.display = 'none';
@@ -60727,9 +60936,9 @@ class Preferences {
60727
60936
  this.setColumnTool(true);
60728
60937
  this.setBuilderMode('');
60729
60938
  this.setEmailMode();
60730
- builderstuff.querySelector('#divHideCellTool').style.display = 'none';
60731
- builderstuff.querySelector('#divOutlineMode').style.display = 'none';
60732
- builderstuff.querySelector('#divBuilderMode').style.display = 'none';
60939
+ builderStuff.querySelector('#divHideCellTool').style.display = 'none';
60940
+ builderStuff.querySelector('#divOutlineMode').style.display = 'none';
60941
+ builderStuff.querySelector('#divBuilderMode').style.display = 'none';
60733
60942
  }
60734
60943
  }
60735
60944
 
@@ -60912,23 +61121,23 @@ class Preferences {
60912
61121
  }
60913
61122
 
60914
61123
  setToolbar(toolbar) {
60915
- let builderstuff = document.querySelector('#_cbhtml');
61124
+ const builderStuff = this.builder.builderStuff;
60916
61125
 
60917
61126
  if (toolbar === 'top') {
60918
- builderstuff.removeAttribute('toolbarleft', '');
60919
- builderstuff.removeAttribute('toolbarright', '');
61127
+ builderStuff.removeAttribute('toolbarleft', '');
61128
+ builderStuff.removeAttribute('toolbarright', '');
60920
61129
  } else if (toolbar === 'left') {
60921
- builderstuff.setAttribute('toolbarleft', '');
60922
- builderstuff.removeAttribute('toolbarright', '');
61130
+ builderStuff.setAttribute('toolbarleft', '');
61131
+ builderStuff.removeAttribute('toolbarright', '');
60923
61132
  } else if (toolbar === 'right') {
60924
- builderstuff.setAttribute('toolbarright', '');
60925
- builderstuff.removeAttribute('toolbarleft', '');
61133
+ builderStuff.setAttribute('toolbarright', '');
61134
+ builderStuff.removeAttribute('toolbarleft', '');
60926
61135
  } // this.positionToolbar();
60927
61136
 
60928
61137
 
60929
- const rteTool = builderstuff.querySelector('.is-rte-tool');
60930
- const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
60931
- const elementRteMoreOptions = builderstuff.querySelector('.elementrte-more-options');
61138
+ const rteTool = builderStuff.querySelector('.is-rte-tool');
61139
+ const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
61140
+ const elementRteMoreOptions = builderStuff.querySelector('.elementrte-more-options');
60932
61141
  if (rteTool) this.builder.rte.positionToolbar();
60933
61142
 
60934
61143
  if (rteMoreOptions) {
@@ -60940,14 +61149,14 @@ class Preferences {
60940
61149
  }
60941
61150
 
60942
61151
  setEmailMode() {
60943
- let builderstuff = document.querySelector('#_cbhtml');
60944
- builderstuff.setAttribute('emailmode', '');
61152
+ const builderStuff = this.builder.builderStuff;
61153
+ builderStuff.setAttribute('emailmode', '');
60945
61154
  }
60946
61155
  /*
60947
61156
  positionToolbar() { // direct
60948
- let builderstuff = document.querySelector('#_cbhtml');
60949
- const rteTool = builderstuff.querySelector('.is-rte-tool');
60950
- const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
61157
+ let builderStuff = document.querySelector('#_cbhtml');
61158
+ const rteTool = builderStuff.querySelector('.is-rte-tool');
61159
+ const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
60951
61160
  if(rteTool){ // check in case rte stuff hasn't rendered yet
60952
61161
  const viewportWidth = window.innerWidth;
60953
61162
  const viewportHeight = window.innerHeight;
@@ -60978,19 +61187,19 @@ class Preferences {
60978
61187
  }
60979
61188
  }
60980
61189
  setToolbarDisplay(toolbardisplay) {
60981
- let builderstuff = document.querySelector('#_cbhtml');
61190
+ let builderStuff = document.querySelector('#_cbhtml');
60982
61191
  if(toolbardisplay==='auto'){
60983
- builderstuff.removeAttribute('toolbarstay','');
61192
+ builderStuff.removeAttribute('toolbarstay','');
60984
61193
  // direct
60985
- const rteTool = builderstuff.querySelector('.is-rte-tool');
61194
+ const rteTool = builderStuff.querySelector('.is-rte-tool');
60986
61195
  if(rteTool) { // check in case rte stuff hasn't rendered yet
60987
61196
  rteTool.style.display = '';
60988
61197
  }
60989
61198
  } else {
60990
- builderstuff.setAttribute('toolbarstay','');
61199
+ builderStuff.setAttribute('toolbarstay','');
60991
61200
  // direct
60992
61201
  const viewportWidth = window.innerWidth;
60993
- const rteTool = builderstuff.querySelector('.is-rte-tool');
61202
+ const rteTool = builderStuff.querySelector('.is-rte-tool');
60994
61203
  if(rteTool) { // check in case rte stuff hasn't rendered yet
60995
61204
  let w = rteTool.offsetWidth;
60996
61205
  let left = (viewportWidth/2) - (w/2);
@@ -61002,12 +61211,12 @@ class Preferences {
61002
61211
 
61003
61212
 
61004
61213
  setElementTool(hideelementtool) {
61005
- let builderstuff = document.querySelector('#_cbhtml');
61214
+ const builderStuff = this.builder.builderStuff;
61006
61215
 
61007
61216
  if (hideelementtool) {
61008
- builderstuff.setAttribute('hideelementtool', '');
61217
+ builderStuff.setAttribute('hideelementtool', '');
61009
61218
  } else {
61010
- builderstuff.removeAttribute('hideelementtool', '');
61219
+ builderStuff.removeAttribute('hideelementtool', '');
61011
61220
  }
61012
61221
  }
61013
61222
 
@@ -61034,12 +61243,12 @@ class Preferences {
61034
61243
  }
61035
61244
 
61036
61245
  setColumnTool(hidecolumntool) {
61037
- let builderstuff = document.querySelector('#_cbhtml');
61246
+ const builderStuff = this.builder.builderStuff;
61038
61247
 
61039
61248
  if (hidecolumntool) {
61040
- builderstuff.setAttribute('hidecolumntool', '');
61249
+ builderStuff.setAttribute('hidecolumntool', '');
61041
61250
  } else {
61042
- builderstuff.removeAttribute('hidecolumntool', '');
61251
+ builderStuff.removeAttribute('hidecolumntool', '');
61043
61252
  }
61044
61253
  }
61045
61254
 
@@ -61055,15 +61264,15 @@ class Preferences {
61055
61264
  }
61056
61265
 
61057
61266
  setToolStyle(toolStyle) {
61058
- let builderstuff = document.querySelector('#_cbhtml');
61267
+ const builderStuff = this.builder.builderStuff;
61059
61268
  const builders = document.querySelectorAll(this.builder.opts.container);
61060
61269
  Array.prototype.forEach.call(builders, builder => {
61061
61270
  if (toolStyle === 'gray') {
61062
61271
  builder.setAttribute('gray', '');
61063
- builderstuff.setAttribute('gray', '');
61272
+ builderStuff.setAttribute('gray', '');
61064
61273
  } else {
61065
61274
  builder.removeAttribute('gray');
61066
- builderstuff.removeAttribute('gray', '');
61275
+ builderStuff.removeAttribute('gray', '');
61067
61276
  }
61068
61277
  });
61069
61278
  }
@@ -61102,24 +61311,24 @@ class Preferences {
61102
61311
  }
61103
61312
 
61104
61313
  setBuilderMode(builderMode) {
61105
- let builderstuff = document.querySelector('#_cbhtml');
61314
+ const builderStuff = this.builder.builderStuff;
61106
61315
  const builders = document.querySelectorAll(this.builder.opts.container);
61107
61316
  Array.prototype.forEach.call(builders, builder => {
61108
61317
  if (builderMode === '') {
61109
61318
  builder.removeAttribute('minimal');
61110
61319
  builder.removeAttribute('clean');
61111
- builderstuff.removeAttribute('minimal');
61112
- builderstuff.removeAttribute('clean');
61320
+ builderStuff.removeAttribute('minimal');
61321
+ builderStuff.removeAttribute('clean');
61113
61322
  } else if (builderMode === 'minimal') {
61114
61323
  builder.setAttribute('minimal', '');
61115
61324
  builder.removeAttribute('clean');
61116
- builderstuff.setAttribute('minimal', '');
61117
- builderstuff.removeAttribute('clean');
61325
+ builderStuff.setAttribute('minimal', '');
61326
+ builderStuff.removeAttribute('clean');
61118
61327
  } else if (builderMode === 'clean') {
61119
61328
  builder.setAttribute('clean', '');
61120
61329
  builder.removeAttribute('minimal');
61121
- builderstuff.setAttribute('clean', '');
61122
- builderstuff.removeAttribute('minimal');
61330
+ builderStuff.setAttribute('clean', '');
61331
+ builderStuff.removeAttribute('minimal');
61123
61332
  }
61124
61333
  });
61125
61334
  }
@@ -61208,9 +61417,9 @@ const dom$5 = new Dom();
61208
61417
  class Rte {
61209
61418
  constructor(builder) {
61210
61419
  this.builder = builder;
61211
- const util = new Util(builder);
61420
+ const util = this.builder.util;
61421
+ const builderStuff = this.builder.builderStuff;
61212
61422
  this.util = util;
61213
- const builderStuff = util.builderStuff();
61214
61423
  this.builderStuff = builderStuff;
61215
61424
  this.elementStyleEditor = new ELementStyleEditor(builder);
61216
61425
  this.hyperlink = new Hyperlink(builder);
@@ -62071,7 +62280,8 @@ class Rte {
62071
62280
  let fileToInsert = modalInsertImage.querySelector('#imgInsertImagePreview').getAttribute('data-filename');
62072
62281
  util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
62073
62282
  util.hideModal(modalInsertImage);
62074
- this.builder.applyBehavior(); //save selection
62283
+ let builderActive = document.querySelector('.builder-active');
62284
+ if (builderActive) this.builder.applyBehaviorOn(builderActive); //save selection
62075
62285
 
62076
62286
  util.saveSelection(); //Trigger Change event
62077
62287
 
@@ -62270,8 +62480,9 @@ class Rte {
62270
62480
  let scale = val / 100;
62271
62481
  this.builder.opts.zoom = scale;
62272
62482
  localStorage.setItem('_zoom', scale); // Save
62483
+ // setZoomOnArea
62273
62484
 
62274
- this.builder.setZoom(); // hide tools
62485
+ this.builder.setZoomOnArea(); // hide tools
62275
62486
 
62276
62487
  let tools = this.builderStuff.querySelectorAll('.is-tool');
62277
62488
  Array.prototype.forEach.call(tools, tool => {
@@ -62297,7 +62508,18 @@ class Rte {
62297
62508
 
62298
62509
  this.rteZoomSlider.onchange = () => {
62299
62510
  setTimeout(() => {
62300
- // show & reposition
62511
+ // setZoomOnControl
62512
+ if (this.builder.opts.page !== '') {
62513
+ const wrapper = document.querySelector(this.builder.opts.page);
62514
+ this.builder.setZoomOnControl(wrapper);
62515
+ } else {
62516
+ const builders = document.querySelectorAll(this.builder.opts.container);
62517
+ builders.forEach(builder => {
62518
+ this.builder.setZoomOnControl(builder);
62519
+ });
62520
+ } // show & reposition
62521
+
62522
+
62301
62523
  this.builder.elmTool.repositionElementTool();
62302
62524
  let col = this.builder.activeCol;
62303
62525
  let tool = this.builderStuff.querySelector('.is-column-tool');
@@ -62448,8 +62670,10 @@ class Rte {
62448
62670
  dom$5.selectElementContents(elm);
62449
62671
  document.execCommand('italic', false, null);
62450
62672
  } else {
62451
- if (elm.style.fontStyle === 'italic') {
62452
- elm.style.fontStyle = '';
62673
+ let fontStyle = window.getComputedStyle(elm).getPropertyValue('font-style');
62674
+
62675
+ if (fontStyle === 'italic') {
62676
+ elm.style.fontStyle = 'normal';
62453
62677
  } else {
62454
62678
  elm.style.fontStyle = 'italic';
62455
62679
  }
@@ -62506,10 +62730,18 @@ class Rte {
62506
62730
  }
62507
62731
 
62508
62732
  if (command === 'uppercase') {
62509
- if (elm.style.textTransform === 'uppercase') {
62510
- elm.style.textTransform = '';
62511
- } else {
62733
+ let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
62734
+
62735
+ if (textTransform === 'uppercase') {
62736
+ elm.style.textTransform = 'lowercase';
62737
+ } else if (textTransform === 'lowercase') {
62738
+ elm.style.textTransform = 'capitalize';
62739
+ } else if (textTransform === 'capitalize') {
62740
+ elm.style.textTransform = 'none';
62741
+ } else if (textTransform === 'none') {
62512
62742
  elm.style.textTransform = 'uppercase';
62743
+ } else {
62744
+ elm.style.textTransform = 'none';
62513
62745
  }
62514
62746
  }
62515
62747
 
@@ -65450,8 +65682,10 @@ const dom$3 = new Dom();
65450
65682
 
65451
65683
  class Tooltip {
65452
65684
  constructor(builder) {
65453
- const util = new Util(builder);
65454
- const builderStuff = util.builderStuff();
65685
+ this.builder = builder;
65686
+ const util = this.builder.util;
65687
+ const builderStuff = this.builder.builderStuff;
65688
+ this.util = util;
65455
65689
  this.builderStuff = builderStuff;
65456
65690
  let tooltip = builderStuff.querySelector('.is-tooltip');
65457
65691
 
@@ -65576,17 +65810,18 @@ const dom$2 = new Dom();
65576
65810
  class Lightbox {
65577
65811
  constructor(builder) {
65578
65812
  this.builder = builder;
65579
- const util = new Util(builder);
65580
- let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
65581
-
65582
- if (!builderStuff) {
65583
- builderStuff = dom$2.createElement('div');
65584
- builderStuff.id = '_cbhtml';
65585
- builderStuff.className = 'is-ui';
65586
- dom$2.appendChild(document.body, builderStuff);
65587
- }
65813
+ const util = this.builder.util;
65814
+ const builderStuff = this.builder.builderStuff;
65815
+ this.util = util;
65816
+ this.builderStuff = builderStuff; // let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
65817
+ // if(!builderStuff) {
65818
+ // builderStuff = dom.createElement('div');
65819
+ // builderStuff.id = '_cbhtml';
65820
+ // builderStuff.className = 'is-ui';
65821
+ // dom.appendChild(document.body, builderStuff);
65822
+ // }
65823
+ // this.builderStuff = builderStuff;
65588
65824
 
65589
- this.builderStuff = builderStuff;
65590
65825
  let html = `
65591
65826
  <div class="is-lightbox lightbox-externalvideo">
65592
65827
  <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;">
@@ -66106,6 +66341,7 @@ class ContentBuilder {
66106
66341
  zoom: 1,
66107
66342
  useLightbox: false,
66108
66343
  imageRenameOnEdit: true,
66344
+ disableAutoEmbedVideo: false,
66109
66345
 
66110
66346
  /*
66111
66347
  onZoomStart: () => {
@@ -66277,10 +66513,6 @@ class ContentBuilder {
66277
66513
  const util = new Util(this); // General utilities
66278
66514
 
66279
66515
  this.util = util;
66280
- /** added by Jack */
66281
-
66282
- this.cbDom = new Dom(); // ---
66283
-
66284
66516
  this.isTouchSupport = util.isTouchSupport();
66285
66517
  this.isIE = util.detectIE();
66286
66518
 
@@ -66291,6 +66523,7 @@ class ContentBuilder {
66291
66523
  this.uoTm = null;
66292
66524
  this.uo = new UndoRedo(this);
66293
66525
  this.dom = dom$F;
66526
+ this.cbDom = dom$F;
66294
66527
  this.autoclean = false;
66295
66528
  this.filesAdded = '';
66296
66529
 
@@ -66313,9 +66546,19 @@ class ContentBuilder {
66313
66546
  this.preferences = new Preferences(this); // this will also call setUIColor() and getUIStyles() for theme
66314
66547
 
66315
66548
  renderGridEditor(this); // Render Grid Editor
66549
+ // Check if preview
66550
+ // Get all builder areas
66316
66551
 
66317
- if (this.opts.snippetJSON.snippets.length > 0) {
66318
- renderSnippetPanel(this); // Render Snippet Panel
66552
+ this.preview = false;
66553
+ const builders = document.querySelectorAll(this.opts.container);
66554
+ Array.prototype.forEach.call(builders, builder => {
66555
+ if (dom$F.hasClass(builder, 'preview')) this.preview = true;
66556
+ });
66557
+
66558
+ if (!this.preview) {
66559
+ if (this.opts.snippetJSON.snippets.length > 0) {
66560
+ renderSnippetPanel(this); // Render Snippet Panel
66561
+ }
66319
66562
  }
66320
66563
 
66321
66564
  this.colTool = new ColumnTool(this); // Render Column Tool
@@ -66346,26 +66589,28 @@ class ContentBuilder {
66346
66589
  this.rte = new Rte(this);
66347
66590
  this.tooltip = new Tooltip(this);
66348
66591
  this.lightbox = new Lightbox(this);
66349
- this.applyBehavior(); // Apply editing behavior on content (builder areas)
66592
+ if (!this.preview) this.applyBehavior(); // Apply editing behavior on content (builder areas)
66350
66593
  // Load plugins
66351
66594
 
66352
- if (this.opts.plugins.length > 0) {
66353
- // Option to load plugins without config.js => just use plugins param (and specify the pluginPath).
66354
- this.loadPlugins();
66355
- } else {
66356
- if (typeof this.opts.scriptPath === 'undefined' && this.opts.pluginPath === '') ; else {
66357
- // Backward compatibility
66358
- if (!this.opts.disableConfig) {
66359
- let scriptUrl = this.opts.scriptPath + 'config.js';
66360
- if (this.opts.pluginPath !== '') scriptUrl = this.opts.pluginPath + 'config.js'; // overide plugin location if pluginPath is specified
66361
-
66362
- this.loadScript(scriptUrl).then(() => {
66363
- if (this.opts.plugins.length > 0) {
66364
- this.loadPlugins();
66365
- }
66366
- }, () => {
66367
- console.log('Fail to load config');
66368
- });
66595
+ if (!this.preview) {
66596
+ if (this.opts.plugins.length > 0) {
66597
+ // Option to load plugins without config.js => just use plugins param (and specify the pluginPath).
66598
+ this.loadPlugins();
66599
+ } else {
66600
+ if (typeof this.opts.scriptPath === 'undefined' && this.opts.pluginPath === '') ; else {
66601
+ // Backward compatibility
66602
+ if (!this.opts.disableConfig) {
66603
+ let scriptUrl = this.opts.scriptPath + 'config.js';
66604
+ if (this.opts.pluginPath !== '') scriptUrl = this.opts.pluginPath + 'config.js'; // overide plugin location if pluginPath is specified
66605
+
66606
+ this.loadScript(scriptUrl).then(() => {
66607
+ if (this.opts.plugins.length > 0) {
66608
+ this.loadPlugins();
66609
+ }
66610
+ }, () => {
66611
+ console.log('Fail to load config');
66612
+ });
66613
+ }
66369
66614
  }
66370
66615
  }
66371
66616
  } // Tooltip (move to after plugins loaded)
@@ -66537,9 +66782,11 @@ class ContentBuilder {
66537
66782
  }
66538
66783
 
66539
66784
  setZoom() {
66785
+ // Complete (On Area + On Control)
66540
66786
  if (this.opts.page !== '') {
66541
66787
  const wrapper = document.querySelector(this.opts.page);
66542
66788
  wrapper.style.transform = `scale(${this.opts.zoom})`;
66789
+ this.setZoomOnControl(wrapper);
66543
66790
  } else {
66544
66791
  const builders = document.querySelectorAll(this.opts.container);
66545
66792
  builders.forEach(builder => {
@@ -66558,18 +66805,10 @@ class ContentBuilder {
66558
66805
  builder.style.transition = '';
66559
66806
  }, 300);
66560
66807
  }
66808
+
66809
+ this.setZoomOnControl(builder);
66561
66810
  });
66562
66811
  }
66563
-
66564
- const rowtools = document.querySelectorAll('.is-row-tool');
66565
- rowtools.forEach(rowtool => {
66566
- rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
66567
- rowtool.style.transformOrigin = 'top';
66568
- });
66569
- const rowaddtools = document.querySelectorAll('.is-rowadd-tool button');
66570
- rowaddtools.forEach(rowaddtool => {
66571
- rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
66572
- });
66573
66812
  /*
66574
66813
  if(this.opts.zoom<1) {
66575
66814
  let ss = document.styleSheets;
@@ -66584,296 +66823,342 @@ class ContentBuilder {
66584
66823
  }
66585
66824
  }
66586
66825
  */
66826
+
66827
+ }
66828
+
66829
+ setZoomOnControl(area) {
66830
+ const rowtools = area.querySelectorAll('.is-row-tool');
66831
+ rowtools.forEach(rowtool => {
66832
+ rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
66833
+ rowtool.style.transformOrigin = 'top';
66834
+ });
66835
+ const rowaddtools = area.querySelectorAll('.is-rowadd-tool button');
66836
+ rowaddtools.forEach(rowaddtool => {
66837
+ rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
66838
+ });
66839
+ }
66840
+
66841
+ setZoomOnArea() {
66842
+ if (this.opts.page !== '') {
66843
+ const wrapper = document.querySelector(this.opts.page);
66844
+ wrapper.style.transform = `scale(${this.opts.zoom})`;
66845
+ } else {
66846
+ const builders = document.querySelectorAll(this.opts.container);
66847
+ builders.forEach(builder => {
66848
+ let fade = false; // to prevent initial load animation
66849
+
66850
+ if (!builder.style.transform) fade = true;
66851
+
66852
+ if (fade) {
66853
+ builder.style.transition = 'none';
66854
+ }
66855
+
66856
+ builder.style.transform = `scale(${this.opts.zoom})`;
66857
+
66858
+ if (fade) {
66859
+ setTimeout(() => {
66860
+ builder.style.transition = '';
66861
+ }, 300);
66862
+ }
66863
+ });
66864
+ }
66587
66865
  }
66588
66866
 
66589
66867
  applyBehavior() {
66590
- const util = this.util; // Get all builder areas
66868
+ // Zoom (required by the next process, eg. setZoomOnControl)
66869
+ if (localStorage.getItem('_zoom') !== null) {
66870
+ this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
66871
+ }
66872
+
66873
+ this.rte.rteZoomSlider.value = this.opts.zoom * 100; // Set slider value
66874
+ // Get all builder areas
66591
66875
 
66592
66876
  const builders = document.querySelectorAll(this.opts.container);
66593
66877
  Array.prototype.forEach.call(builders, builder => {
66594
- //Make absolute
66595
- if (this.opts.absolutePath) {
66596
- let links = builder.querySelectorAll('a');
66597
- Array.prototype.forEach.call(links, link => {
66598
- let href = link.href;
66599
- link.setAttribute('href', href);
66600
- });
66601
- let imgs = builder.querySelectorAll('img');
66602
- Array.prototype.forEach.call(imgs, img => {
66603
- let src = img.src;
66604
- img.setAttribute('src', src);
66605
- });
66606
- } // Add .is-builder class on each builder area (container)
66878
+ this.applyBehaviorOn(builder); // includes setZoomOnControl
66879
+ }); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
66607
66880
 
66881
+ this.opts.onRender();
66882
+ this.setZoomOnArea(); // Set zoom
66883
+ } // applyBehavior
66608
66884
 
66609
- dom$F.addClass(builder, 'is-builder'); // Additional setting needed for dynamically added .is-builder. Without this, current toolStyle won't be applied to newly created section (eg. in ContentBox))
66610
- // if (localStorage.getItem('_toolstyle') !== null) {
66611
- // let toolStyle = localStorage.getItem('_toolstyle');
66612
- // this.preferences.setToolStyle(toolStyle);
66613
- // }
66614
- // if (localStorage.getItem('_outlinestyle') !== null) {
66615
- // let outlineStyle = localStorage.getItem('_outlinestyle');
66616
- // this.preferences.setOutlineStyle(outlineStyle);
66617
- // }
66618
66885
 
66619
- this.preferences.initBuilder(builder); // Apply behavior on each row
66886
+ applyBehaviorOn(builder) {
66887
+ const util = this.util; //Make absolute
66620
66888
 
66621
- const rows = dom$F.elementChildren(builder);
66622
- rows.forEach(row => {
66623
- if (dom$F.hasClass(row, 'row-add-initial')) return; // Hack. If a row has margin left/right specified, don't need to set hidden border (that is used to make smooth sortable)
66889
+ if (this.opts.absolutePath) {
66890
+ let links = builder.querySelectorAll('a');
66891
+ Array.prototype.forEach.call(links, link => {
66892
+ let href = link.href;
66893
+ link.setAttribute('href', href);
66894
+ });
66895
+ let imgs = builder.querySelectorAll('img');
66896
+ Array.prototype.forEach.call(imgs, img => {
66897
+ let src = img.src;
66898
+ img.setAttribute('src', src);
66899
+ });
66900
+ } // Add .is-builder class on each builder area (container)
66624
66901
 
66625
- if (row.style.marginLeft || row.style.marginRight) {
66626
- row.style.border = 'none';
66627
- } // On each row, add 2 tools: Row tool (div.is-row-tool) & Row Add tool (div.is-rowadd-tool)
66628
- // Render Row tool
66629
66902
 
66903
+ dom$F.addClass(builder, 'is-builder'); // Additional setting needed for dynamically added .is-builder. Without this, current toolStyle won't be applied to newly created section (eg. in ContentBox))
66904
+ // if (localStorage.getItem('_toolstyle') !== null) {
66905
+ // let toolStyle = localStorage.getItem('_toolstyle');
66906
+ // this.preferences.setToolStyle(toolStyle);
66907
+ // }
66908
+ // if (localStorage.getItem('_outlinestyle') !== null) {
66909
+ // let outlineStyle = localStorage.getItem('_outlinestyle');
66910
+ // this.preferences.setOutlineStyle(outlineStyle);
66911
+ // }
66630
66912
 
66631
- this.rowtool = new RowTool(this);
66632
- this.rowtool.render(row); // Render Row Add tool
66913
+ this.preferences.initBuilder(builder); // Apply behavior on each row
66633
66914
 
66634
- const rowaddtool = new RowAddTool(this);
66635
- rowaddtool.render(row); // Apply behavior on each column
66915
+ const rows = dom$F.elementChildren(builder);
66916
+ rows.forEach(row => {
66917
+ if (dom$F.hasClass(row, 'row-add-initial')) return; // Hack. If a row has margin left/right specified, don't need to set hidden border (that is used to make smooth sortable)
66636
66918
 
66637
- const cols = dom$F.elementChildren(row);
66638
- cols.forEach(col => {
66639
- if (dom$F.hasClass(col, 'is-row-tool') || dom$F.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
66640
- // For backward compatibility, replace:
66641
- // - data-mode="readonly" with data-noedit
66642
- // - data-mode="readonly-protected" with data-protected
66919
+ if (row.style.marginLeft || row.style.marginRight) {
66920
+ row.style.border = 'none';
66921
+ } // On each row, add 2 tools: Row tool (div.is-row-tool) & Row Add tool (div.is-rowadd-tool)
66922
+ // Render Row tool
66643
66923
 
66644
- if (col.getAttribute('data-mode') === 'readonly') {
66645
- col.setAttribute('data-noedit', '');
66646
- col.removeAttribute('data-mode');
66647
- }
66648
66924
 
66649
- if (col.getAttribute('data-mode') === 'readonly-protected') {
66650
- col.setAttribute('data-protected', '');
66651
- col.removeAttribute('data-mode');
66652
- } // Set ContentEditable
66925
+ this.rowtool = new RowTool(this);
66926
+ this.rowtool.render(row); // Render Row Add tool
66653
66927
 
66928
+ const rowaddtool = new RowAddTool(this);
66929
+ rowaddtool.render(row); // Apply behavior on each column
66654
66930
 
66655
- let noedit = false;
66931
+ const cols = dom$F.elementChildren(row);
66932
+ cols.forEach(col => {
66933
+ if (dom$F.hasClass(col, 'is-row-tool') || dom$F.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
66934
+ // For backward compatibility, replace:
66935
+ // - data-mode="readonly" with data-noedit
66936
+ // - data-mode="readonly-protected" with data-protected
66656
66937
 
66657
- if (col.hasAttribute('data-noedit')) {
66658
- // Column is not (text) editable.
66659
- noedit = true;
66660
- }
66938
+ if (col.getAttribute('data-mode') === 'readonly') {
66939
+ col.setAttribute('data-noedit', '');
66940
+ col.removeAttribute('data-mode');
66941
+ }
66661
66942
 
66662
- let _protected = false;
66943
+ if (col.getAttribute('data-mode') === 'readonly-protected') {
66944
+ col.setAttribute('data-protected', '');
66945
+ col.removeAttribute('data-mode');
66946
+ } // Set ContentEditable
66663
66947
 
66664
- if (col.hasAttribute('data-protected')) {
66665
- // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
66666
- _protected = true;
66667
- }
66668
66948
 
66669
- let customcode = false;
66949
+ let noedit = false;
66670
66950
 
66671
- if (col.hasAttribute('data-html')) {
66672
- // Column contains custom code.
66673
- customcode = true;
66674
- } // let custommodule = false;
66675
- // if (col.hasAttribute('data-module')) { // Column contains custom module.
66676
- // custommodule = true;
66677
- // }
66951
+ if (col.hasAttribute('data-noedit')) {
66952
+ // Column is not (text) editable.
66953
+ noedit = true;
66954
+ }
66678
66955
 
66956
+ let _protected = false;
66679
66957
 
66680
- if (!customcode && !noedit && !_protected) {
66681
- // Check if column contains editable text
66682
- let elms = col.querySelectorAll('p,h1,h2,h3,h4,h5,h6,table,ul,ol,pre,blockquote,code,figcaption,label,legend,button,a');
66958
+ if (col.hasAttribute('data-protected')) {
66959
+ // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
66960
+ _protected = true;
66961
+ }
66683
66962
 
66684
- if (elms.length > 0) {
66685
- col.contentEditable = true; // Column is (text) editable
66686
- }
66687
- } // Apply behavior on several elements for editing purpose
66963
+ let customcode = false;
66688
66964
 
66965
+ if (col.hasAttribute('data-html')) {
66966
+ // Column contains custom code.
66967
+ customcode = true;
66968
+ } // let custommodule = false;
66969
+ // if (col.hasAttribute('data-module')) { // Column contains custom module.
66970
+ // custommodule = true;
66971
+ // }
66689
66972
 
66690
- this.element.applyBehavior(col); // Add events on column
66691
66973
 
66692
- if (!col.getAttribute('data-click')) {
66693
- // ON CLICK
66694
- // Use bind() => https://www.w3schools.com/react/react_events.asp
66695
- col.addEventListener('click', this.handleCellClick.bind(this, col)); // ON KEYPRESS
66974
+ if (!customcode && !noedit && !_protected) {
66975
+ // Check if column contains editable text
66976
+ let elms = col.querySelectorAll('p,h1,h2,h3,h4,h5,h6,table,ul,ol,pre,blockquote,code,figcaption,label,legend,button,a');
66696
66977
 
66697
- col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
66978
+ if (elms.length > 0) {
66979
+ col.contentEditable = true; // Column is (text) editable
66980
+ }
66981
+ } // Apply behavior on several elements for editing purpose
66698
66982
 
66699
- col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
66700
66983
 
66701
- col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON PASTE
66984
+ this.element.applyBehavior(col); // Add events on column
66702
66985
 
66703
- col.addEventListener('paste', this.handleCellPaste.bind(this));
66704
- col.setAttribute('data-click', true);
66705
- }
66706
- });
66707
- }); // Sortable on each builder (container)
66986
+ if (!col.getAttribute('data-click')) {
66987
+ // ON CLICK
66988
+ // Use bind() => https://www.w3schools.com/react/react_events.asp
66989
+ col.addEventListener('click', this.handleCellClick.bind(this, col)); // ON KEYPRESS
66708
66990
 
66709
- if (!builder.getAttribute('data-sort') && !builder.hasAttribute('nogrid')) {
66710
- // Check first if sortable has been added.
66991
+ col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
66711
66992
 
66712
- /*
66713
- let userAgentString = navigator.userAgent;
66714
- let safariAgent = userAgentString.indexOf('Safari') > -1;
66715
- let chromeAgent = userAgentString.indexOf('Chrome') > -1;
66716
- if ((chromeAgent) && (safariAgent)) safariAgent = false;
66717
- */
66718
- // let safariAgent = false;
66719
- let sortableObject = new Sortable(builder, {
66720
- // forceFallback: safariAgent,
66721
- // forceFallback: true,
66722
- scroll: true,
66723
- // invertSwap: true, /* https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold */
66724
- group: 'shared',
66725
- direction: 'dummy',
66726
- animation: 300,
66727
- handle: '.row-handle',
66728
- // swapThreshold: 0.1, // this cause drag drop snippet sometimes difficult
66729
- // invertedSwapThreshold: 0.1,
66730
- sort: true,
66731
- onStart: () => {
66732
- this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change
66733
-
66734
- this.colTool.hideColumnTool();
66735
- this.elmTool.hide();
66736
- },
66737
- onEnd: () => {
66738
- if (!this.opts.emailMode) {
66739
- if (dom$F.hasClass(this.activeCol.parentNode, 'row-outline')) {
66740
- //if not row selection, but col selection
66741
- //if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
66742
- this.colTool.refreshColumnTool(this.activeCol);
66743
- this.colTool.showColumnTool(this.activeCol);
66744
- }
66993
+ col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
66994
+
66995
+ col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON PASTE
66996
+
66997
+ col.addEventListener('paste', this.handleCellPaste.bind(this));
66998
+ col.setAttribute('data-click', true);
66999
+ }
67000
+ });
67001
+ }); // Sortable on each builder (container)
67002
+
67003
+ if (!builder.getAttribute('data-sort') && !builder.hasAttribute('nogrid')) {
67004
+ // Check first if sortable has been added.
67005
+
67006
+ /*
67007
+ let userAgentString = navigator.userAgent;
67008
+ let safariAgent = userAgentString.indexOf('Safari') > -1;
67009
+ let chromeAgent = userAgentString.indexOf('Chrome') > -1;
67010
+ if ((chromeAgent) && (safariAgent)) safariAgent = false;
67011
+ */
67012
+ // let safariAgent = false;
67013
+ let sortableObject = new Sortable(builder, {
67014
+ // forceFallback: safariAgent,
67015
+ // forceFallback: true,
67016
+ scroll: true,
67017
+ // invertSwap: true, /* https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold */
67018
+ group: 'shared',
67019
+ direction: 'dummy',
67020
+ animation: 300,
67021
+ handle: '.row-handle',
67022
+ // swapThreshold: 0.1, // this cause drag drop snippet sometimes difficult
67023
+ // invertedSwapThreshold: 0.1,
67024
+ sort: true,
67025
+ onStart: () => {
67026
+ this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change
67027
+
67028
+ this.colTool.hideColumnTool();
67029
+ this.elmTool.hide();
67030
+ },
67031
+ onEnd: () => {
67032
+ if (!this.opts.emailMode) {
67033
+ if (dom$F.hasClass(this.activeCol.parentNode, 'row-outline')) {
67034
+ //if not row selection, but col selection
67035
+ //if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
67036
+ this.colTool.refreshColumnTool(this.activeCol);
67037
+ this.colTool.showColumnTool(this.activeCol);
66745
67038
  }
66746
- },
66747
- onAdd: evt => {
66748
- var itemEl = evt.item;
67039
+ }
67040
+ },
67041
+ onAdd: evt => {
67042
+ var itemEl = evt.item;
66749
67043
 
66750
- if (itemEl.getAttribute('data-id')) {
66751
- // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
66752
- let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
67044
+ if (itemEl.getAttribute('data-id')) {
67045
+ // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
67046
+ let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
66753
67047
 
66754
- const result = this.opts.snippetJSON.snippets.filter(item => {
66755
- if (item.id + '' === snippetid) return item;else return false;
66756
- });
66757
- var html = result[0].html;
66758
- var noedit = result[0].noedit;
66759
- var bSnippet;
67048
+ const result = this.opts.snippetJSON.snippets.filter(item => {
67049
+ if (item.id + '' === snippetid) return item;else return false;
67050
+ });
67051
+ var html = result[0].html;
67052
+ var noedit = result[0].noedit;
67053
+ var bSnippet;
66760
67054
 
66761
- if (html.indexOf('row clearfix') === -1) {
66762
- bSnippet = true; // Just snippet (without row/column grid)
66763
- } else {
66764
- bSnippet = false; // Snippet is wrapped in row/colum
66765
- }
67055
+ if (html.indexOf('row clearfix') === -1) {
67056
+ bSnippet = true; // Just snippet (without row/column grid)
67057
+ } else {
67058
+ bSnippet = false; // Snippet is wrapped in row/colum
67059
+ }
66766
67060
 
66767
- if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid
67061
+ if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid
66768
67062
 
66769
- var rowClass = this.opts.row; //row
67063
+ var rowClass = this.opts.row; //row
66770
67064
 
66771
- 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']
67065
+ 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']
66772
67066
 
66773
- if (rowClass !== '' && colClass.length === 12) {
66774
- html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
66775
- html = html.replace(new RegExp('column full', 'g'), colClass[11]);
66776
- html = html.replace(new RegExp('column half', 'g'), colClass[5]);
66777
- html = html.replace(new RegExp('column third', 'g'), colClass[3]);
66778
- html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
66779
- html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
66780
- html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
66781
- html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
66782
- html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
66783
- html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
66784
- html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
66785
- }
67067
+ if (rowClass !== '' && colClass.length === 12) {
67068
+ html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
67069
+ html = html.replace(new RegExp('column full', 'g'), colClass[11]);
67070
+ html = html.replace(new RegExp('column half', 'g'), colClass[5]);
67071
+ html = html.replace(new RegExp('column third', 'g'), colClass[3]);
67072
+ html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
67073
+ html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
67074
+ html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
67075
+ html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
67076
+ html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
67077
+ html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
67078
+ html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
67079
+ }
66786
67080
 
66787
- html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
67081
+ html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
66788
67082
 
66789
- if (this.opts.onAdd) {
66790
- html = this.opts.onAdd(html);
66791
- }
67083
+ if (this.opts.onAdd) {
67084
+ html = this.opts.onAdd(html);
67085
+ }
66792
67086
 
66793
- if (this.opts.snippetPathReplace.length > 0) {
66794
- // try {
66795
- if (this.opts.snippetPathReplace[0] !== '') {
66796
- var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
66797
- html = html.replace(regex, this.opts.snippetPathReplace[1]);
66798
- var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
66799
- var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
66800
- var regex2 = new RegExp(string1, 'g');
66801
- html = html.replace(regex2, string2);
66802
- } // } catch (e) { 1; }
67087
+ if (this.opts.snippetPathReplace.length > 0) {
67088
+ // try {
67089
+ if (this.opts.snippetPathReplace[0] !== '') {
67090
+ var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
67091
+ html = html.replace(regex, this.opts.snippetPathReplace[1]);
67092
+ var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
67093
+ var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
67094
+ var regex2 = new RegExp(string1, 'g');
67095
+ html = html.replace(regex2, string2);
67096
+ } // } catch (e) { 1; }
66803
67097
 
66804
- }
67098
+ }
66805
67099
 
66806
- if (bSnippet) {
66807
- // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
66808
- // Can be inserted after current row, column (cell), element, or last row.
66809
- html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
67100
+ if (bSnippet) {
67101
+ // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
67102
+ // Can be inserted after current row, column (cell), element, or last row.
67103
+ html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
66810
67104
 
66811
- itemEl.removeAttribute('draggable');
66812
- dom$F.removeClass(itemEl, 'snippet-item');
66813
- itemEl.outerHTML = html;
66814
- } else {
66815
- // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
66816
- // Can only be inserted after current row or last row (not on column or element).
66817
- let snippet = dom$F.createElement('div');
66818
- snippet.innerHTML = html;
66819
- let blocks = snippet.querySelectorAll('[data-html]');
66820
- Array.prototype.forEach.call(blocks, block => {
66821
- // Render custom code block
66822
- html = decodeURIComponent(block.getAttribute('data-html'));
66823
- html = html.replace(/{id}/g, util.makeId());
66824
-
66825
- for (var i = 1; i <= 20; i++) {
66826
- html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
66827
- }
67105
+ itemEl.removeAttribute('draggable');
67106
+ dom$F.removeClass(itemEl, 'snippet-item');
67107
+ itemEl.outerHTML = html;
67108
+ } else {
67109
+ // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
67110
+ // Can only be inserted after current row or last row (not on column or element).
67111
+ let snippet = dom$F.createElement('div');
67112
+ snippet.innerHTML = html;
67113
+ let blocks = snippet.querySelectorAll('[data-html]');
67114
+ Array.prototype.forEach.call(blocks, block => {
67115
+ // Render custom code block
67116
+ html = decodeURIComponent(block.getAttribute('data-html'));
67117
+ html = html.replace(/{id}/g, util.makeId());
67118
+
67119
+ for (var i = 1; i <= 20; i++) {
67120
+ html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
67121
+ }
66828
67122
 
66829
- block.innerHTML = html;
66830
- });
66831
- html = snippet.innerHTML; // Clean snippet from sortable related code
67123
+ block.innerHTML = html;
67124
+ });
67125
+ html = snippet.innerHTML; // Clean snippet from sortable related code
66832
67126
 
66833
- itemEl.removeAttribute('draggable');
66834
- dom$F.removeClass(itemEl, 'snippet-item');
66835
- itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
66836
- // https://ghinda.net/article/script-tags/
67127
+ itemEl.removeAttribute('draggable');
67128
+ dom$F.removeClass(itemEl, 'snippet-item');
67129
+ itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
67130
+ // https://ghinda.net/article/script-tags/
66837
67131
 
66838
- var range = document.createRange();
66839
- range.setStart(itemEl, 0);
66840
- itemEl.appendChild(range.createContextualFragment(html));
66841
- itemEl.outerHTML = itemEl.innerHTML;
66842
- } // After snippet has been added, re-apply behavior on builder areas
67132
+ var range = document.createRange();
67133
+ range.setStart(itemEl, 0);
67134
+ itemEl.appendChild(range.createContextualFragment(html));
67135
+ itemEl.outerHTML = itemEl.innerHTML;
67136
+ } // After snippet has been added, re-apply behavior on builder areas
66843
67137
 
66844
67138
 
66845
- this.applyBehavior(); // Call onChange
67139
+ this.applyBehaviorOn(builder); // Call onChange
66846
67140
 
66847
- this.opts.onChange(); // Hide element tool
67141
+ this.opts.onChange(); // Hide element tool
66848
67142
 
66849
- this.elmTool.hide();
66850
- }
67143
+ this.elmTool.hide();
66851
67144
  }
66852
- });
66853
- this.sortableObjects.push(sortableObject);
66854
- builder.setAttribute('data-sort', true);
66855
- } // /Sortable
67145
+ }
67146
+ });
67147
+ this.sortableObjects.push(sortableObject);
67148
+ builder.setAttribute('data-sort', true);
67149
+ } // /Sortable
67150
+ // Additional contentEditable for subblock
66856
67151
 
66857
- }); // Additional contentEditable for subblock
66858
67152
 
66859
- const subblocks = document.querySelectorAll('.is-subblock');
67153
+ const subblocks = builder.querySelectorAll('.is-subblock');
66860
67154
  Array.prototype.forEach.call(subblocks, subblock => {
66861
67155
  subblock.contentEditable = true;
66862
67156
  }); // Check if there is empty builder area (still has no content)
66863
67157
 
66864
- util.checkEmpty(); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
66865
-
66866
- this.opts.onRender(); // Zoom
66867
-
66868
- if (localStorage.getItem('_zoom') !== null) {
66869
- this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
66870
- }
66871
-
66872
- this.rte.rteZoomSlider.value = this.opts.zoom * 100; // Set slider value
66873
-
66874
- this.setZoom(); // Set zoom
66875
- } // applyBehavior
67158
+ this.util.checkEmptyOn(builder); // Zoom
66876
67159
 
67160
+ this.setZoomOnControl(builder);
67161
+ }
66877
67162
 
66878
67163
  html(area) {
66879
67164
  const util = this.util;
@@ -67675,6 +67960,7 @@ class ContentBuilder {
67675
67960
  }
67676
67961
 
67677
67962
  loadSnippets(snippetFile) {
67963
+ if (this.preview) return;
67678
67964
  let snippetPanel = document.querySelector(this.opts.snippetList);
67679
67965
  if (snippetPanel) return; // do not render if already rendered (just protection)
67680
67966
 
@@ -68384,26 +68670,29 @@ class ContentBuilder {
68384
68670
  let contentword = document.querySelector('#idContentWord'); //Check video embed
68385
68671
 
68386
68672
  var bPasteObject = false;
68387
- var src = contentword.innerText; //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
68673
+ var src = contentword.innerText;
68388
68674
 
68389
- var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
68390
- var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
68391
- var youRegexMatches = youRegex.exec(src);
68392
- var vimeoRegexMatches = vimeoRegex.exec(src);
68675
+ if (!this.opts.disableAutoEmbedVideo) {
68676
+ //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
68677
+ var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
68678
+ var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
68679
+ var youRegexMatches = youRegex.exec(src);
68680
+ var vimeoRegexMatches = vimeoRegex.exec(src);
68393
68681
 
68394
- if (youRegexMatches !== null || vimeoRegexMatches !== null) {
68395
- if (youRegexMatches !== null && youRegexMatches.length >= 7) {
68396
- var youMatch = youRegexMatches[6];
68397
- src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
68398
- }
68682
+ if (youRegexMatches !== null || vimeoRegexMatches !== null) {
68683
+ if (youRegexMatches !== null && youRegexMatches.length >= 7) {
68684
+ var youMatch = youRegexMatches[6];
68685
+ src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
68686
+ }
68399
68687
 
68400
- if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
68401
- var vimeoMatch = vimeoRegexMatches[6];
68402
- src = 'https://player.vimeo.com/video/' + vimeoMatch;
68403
- }
68688
+ if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
68689
+ var vimeoMatch = vimeoRegexMatches[6];
68690
+ src = 'https://player.vimeo.com/video/' + vimeoMatch;
68691
+ }
68404
68692
 
68405
- sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
68406
- bPasteObject = true;
68693
+ sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
68694
+ bPasteObject = true;
68695
+ }
68407
68696
  }
68408
68697
 
68409
68698
  if (!bPasteObject) {
@@ -68525,7 +68814,8 @@ class ContentBuilder {
68525
68814
 
68526
68815
  oSel.removeAllRanges();
68527
68816
  oSel.addRange(range);
68528
- this.applyBehavior(); //Trigger Change event
68817
+ let builderActive = document.querySelector('.builder-active');
68818
+ if (builderActive) this.applyBehaviorOn(builderActive); //Trigger Change event
68529
68819
 
68530
68820
  this.opts.onChange(); //Trigger Render event
68531
68821
 
@@ -71217,11 +71507,14 @@ class ContentBox {
71217
71507
  this.editsection = new EditSection(this);
71218
71508
  this.editbox = new EditBox(this);
71219
71509
  setTimeout(() => {
71220
- this.pageSetup(); // this.wrapperEl.style.opacity = 1;
71510
+ if (!this.pageSetupDone) {
71511
+ this.pageSetup();
71512
+ } // this.wrapperEl.style.opacity = 1;
71221
71513
  // Remove the page-overlay
71222
71514
  // setTimeout(()=>{
71223
71515
  // pageOverlay.parentNode.removeChild(pageOverlay);
71224
71516
  // }, 10);
71517
+
71225
71518
  }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
71226
71519
 
71227
71520
  Pace.start();
@@ -71340,13 +71633,11 @@ class ContentBox {
71340
71633
  if (newArea.indexOf('is-static') == -1 && hasStatic) {
71341
71634
  // If page has a footer (a static section), then insert the new section before it.
71342
71635
  dom.appendHtml(lastSection, newArea, 'beforebegin');
71343
- newSection = lastSection.previousSibling;
71344
-
71345
- if (newSection.previousSibling) {
71346
- if (!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
71347
- dom.addClass(newSection, 'is-bg-grey');
71348
- }
71349
- }
71636
+ newSection = lastSection.previousSibling; // if(newSection.previousSibling) {
71637
+ // if(!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
71638
+ // dom.addClass(newSection, 'is-bg-grey');
71639
+ // }
71640
+ // }
71350
71641
  } else {
71351
71642
  const sectionElms = this.wrapperEl.querySelectorAll('.is-section');
71352
71643
 
@@ -71358,50 +71649,72 @@ class ContentBox {
71358
71649
  dom.appendHtml(this.wrapperEl, newArea, 'afterbegin');
71359
71650
  }
71360
71651
 
71361
- newSection = dom.getLastElement(this.wrapperEl, '.is-section');
71652
+ newSection = dom.getLastElement(this.wrapperEl, '.is-section'); // if(newSection.previousSibling) {
71653
+ // if(!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
71654
+ // dom.addClass(newSection, 'is-bg-grey');
71655
+ // }
71656
+ // }
71657
+ }
71362
71658
 
71363
- if (newSection.previousSibling) {
71364
- if (!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
71365
- dom.addClass(newSection, 'is-bg-grey');
71366
- }
71367
- }
71368
- } // Code Blocks Handling
71659
+ let arrSections = [];
71660
+ arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
71369
71661
 
71662
+ let prevSection = newSection.previousElementSibling;
71370
71663
 
71371
- let codeBlocks = newSection.querySelectorAll('.is-overlay-content[data-module]');
71372
- codeBlocks.forEach(element => {
71373
- let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
71664
+ if (prevSection) {
71665
+ let ok = prevSection.querySelector('.is-section-tool');
71374
71666
 
71375
- html = html.replace(/{id}/g, dom.uniqueId()); //Fill the block with original code
71667
+ if (!ok) {
71668
+ arrSections.push(prevSection);
71669
+ }
71376
71670
 
71377
- dom.html(element, html);
71378
- }); // Fix old structure (backward compatible)
71671
+ prevSection = prevSection.previousElementSibling;
71379
71672
 
71380
- let overlays = newSection.querySelectorAll('.is-overlay');
71381
- overlays.forEach(overlay => {
71382
- let overlayContent = overlay.querySelector('.is-overlay-content');
71673
+ if (prevSection) {
71674
+ ok = prevSection.querySelector('.is-section-tool');
71383
71675
 
71384
- if (overlayContent) {
71385
- if (overlayContent.innerHTML === '') {
71386
- if (overlay.childElementCount === 1) {
71387
- overlay.parentNode.removeChild(overlay);
71388
- }
71676
+ if (!ok) {
71677
+ arrSections.push(prevSection);
71389
71678
  }
71390
71679
  }
71391
- });
71392
- this.editor.applyBehavior(); // Section Setup
71680
+ }
71393
71681
 
71394
- this.sectionSetup(newSection); // Box Setup (previously: applyBoxBehavior)
71682
+ arrSections.forEach(section => {
71683
+ // Code Blocks Handling
71684
+ let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
71685
+ codeBlocks.forEach(element => {
71686
+ let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
71395
71687
 
71396
- if (dom.hasClass(newSection, 'is-box')) {
71397
- this.boxSetup(newSection);
71398
- } else {
71399
- const boxes = newSection.querySelectorAll('.is-box');
71400
- boxes.forEach(box => {
71401
- this.boxSetup(box);
71402
- });
71403
- } //Trigger Change event
71688
+ html = html.replace(/{id}/g, dom.uniqueId()); //Fill the block with original code
71404
71689
 
71690
+ dom.html(element, html);
71691
+ }); // Fix old structure (backward compatible)
71692
+
71693
+ let overlays = section.querySelectorAll('.is-overlay');
71694
+ overlays.forEach(overlay => {
71695
+ let overlayContent = overlay.querySelector('.is-overlay-content');
71696
+
71697
+ if (overlayContent) {
71698
+ if (overlayContent.innerHTML === '') {
71699
+ if (overlay.childElementCount === 1) {
71700
+ overlay.parentNode.removeChild(overlay);
71701
+ }
71702
+ }
71703
+ }
71704
+ }); // Section Setup
71705
+
71706
+ this.sectionSetup(section); // Box Setup (previously: applyBoxBehavior)
71707
+
71708
+ if (dom.hasClass(section, 'is-box')) {
71709
+ this.boxSetup(section);
71710
+ } else {
71711
+ const boxes = section.querySelectorAll('.is-box');
71712
+ boxes.forEach(box => {
71713
+ this.boxSetup(box);
71714
+ });
71715
+ }
71716
+ });
71717
+ this.editor.applyBehavior(); //Trigger Change event
71405
71718
 
71406
71719
  this.onChange();
71407
71720
  dom.removeElement(document.querySelector('.is-sidebar-overlay'));
@@ -71667,6 +71980,7 @@ class ContentBox {
71667
71980
  wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
71668
71981
 
71669
71982
  this.pageSetup();
71983
+ this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
71670
71984
  }
71671
71985
 
71672
71986
  boxImage(url) {