@innovastudio/contentbox 1.6.14 → 1.6.16

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
- "type":"module",
4
- "version": "1.6.14",
3
+ "type": "module",
4
+ "version": "1.6.16",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
@@ -52,7 +52,7 @@
52
52
  "ws": "^8.13.0"
53
53
  },
54
54
  "dependencies": {
55
- "@innovastudio/contentbuilder": "^1.4.136",
55
+ "@innovastudio/contentbuilder": "^1.4.137",
56
56
  "js-beautify": "^1.14.0"
57
57
  }
58
58
  }
@@ -744,7 +744,7 @@ body.controlpanel .is-content-view.fullview iframe {
744
744
  height: 25px;
745
745
  margin-top: 3px;
746
746
  }
747
- .builder-ui .custom-select .select-styled:focus {
747
+ .builder-ui .custom-select .select-styled:focus-visible {
748
748
  outline: #3e93f7 2px solid;
749
749
  outline-offset: -1px;
750
750
  }
@@ -628,6 +628,9 @@ const prepareSvgIcons$1 = builder => {
628
628
  <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
629
629
  <path d="M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
630
630
  </symbol>
631
+ <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
632
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" />
633
+ </symbol>
631
634
 
632
635
  </defs>
633
636
  </svg>`;
@@ -858,7 +861,7 @@ class SideBar {
858
861
  sideIndex++;
859
862
  });
860
863
  html += '</div>';
861
- html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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 is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" 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" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" 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') + '" tabindex="0" 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>';
864
+ html += '' + '<div id="divSidebarSections" class="is-sidebar-content is-area-2nd ' + this.builder.templateThumbnailSize + '" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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 is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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" tabindex="-1" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" tabindex="-1" 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" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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" tabindex="0" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" tabindex="0" 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') + '" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>';
862
865
  } else {
863
866
  html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
864
867
  }
@@ -918,6 +921,10 @@ class SideBar {
918
921
  this.builder.editor.rte.zoomEnd(this.pageZoomSlider);
919
922
  };
920
923
 
924
+ this.pageZoomSlider.addEventListener('mouseup', () => {
925
+ // in case of no value change
926
+ this.builder.editor.rte.zoomEnd(this.pageZoomSlider);
927
+ });
921
928
  const btnEditTimeline = this.pageQuickSettings.querySelector('.cmd-timeline-edit');
922
929
  if (btnEditTimeline) btnEditTimeline.addEventListener('click', () => {
923
930
  this.builder.timeline.edit();
@@ -8828,8 +8835,39 @@ class Text {
8828
8835
  });
8829
8836
  }
8830
8837
 
8831
- setFlexGrow(isGrow) {
8838
+ elementChildren(elm) {
8839
+ const childNodes = elm.childNodes;
8840
+ let children = [];
8841
+ let i = childNodes.length;
8842
+
8843
+ while (i--) {
8844
+ if (childNodes[i].nodeType === 1) {
8845
+ children.unshift(childNodes[i]);
8846
+ }
8847
+ }
8848
+
8849
+ return children;
8850
+ }
8851
+
8852
+ getElmBlock() {
8853
+ // Get element block (eg. h1, h2, p, div, ..) that is under the column (column's child)
8854
+ let activeColumn = this.builder.controlpanel.activeColumn;
8832
8855
  let elm = this.getElm();
8856
+ let children = this.elementChildren(activeColumn);
8857
+ let elmBlock;
8858
+ children.forEach(item => {
8859
+ if (item.contains(elm)) {
8860
+ elmBlock = item;
8861
+ }
8862
+ });
8863
+ return elmBlock;
8864
+ }
8865
+
8866
+ setFlexGrow(isGrow) {
8867
+ // let elm = this.getElm();
8868
+ // if(!elm) return;
8869
+ // elm = this.getParentBlock(elm);
8870
+ let elm = this.getElmBlock();
8833
8871
  if (!elm) return;
8834
8872
 
8835
8873
  if (isGrow) {
@@ -11009,7 +11047,12 @@ class PanelText {
11009
11047
 
11010
11048
  getState() {
11011
11049
  let activeElement = this.builder.controlpanel.activeElement;
11012
- if (!activeElement) return; // Coloris
11050
+ if (!activeElement) return;
11051
+
11052
+ if (activeElement.classList.contains('cell-active')) {
11053
+ activeElement = this.text.getElm();
11054
+ if (!activeElement) return;
11055
+ } // Coloris
11013
11056
 
11014
11057
  /*
11015
11058
  Coloris.close(true);
@@ -11019,6 +11062,7 @@ class PanelText {
11019
11062
  btnColor.dispatchEvent(new Event('input', { bubbles: true }));
11020
11063
  */
11021
11064
 
11065
+
11022
11066
  const btnColorPick = this.panel.querySelector('.btn-color');
11023
11067
  let currentColor = this.text.getStyle(activeElement, 'color');
11024
11068
  btnColorPick.style.backgroundColor = currentColor;
@@ -20894,6 +20938,15 @@ class ControlPanel {
20894
20938
  Array.prototype.forEach.call(elms, elm => {
20895
20939
  elm.setAttribute('data-title', elm.getAttribute('title'));
20896
20940
  this.builder.editor.tooltip.set(elm);
20941
+ }); // Enable tooltip for buttons inside div.data-tooltip
20942
+
20943
+ const divs = document.querySelectorAll('[data-tooltip]');
20944
+ divs.forEach(div => {
20945
+ let elms = div.querySelectorAll('button[title]');
20946
+ elms.forEach(elm => {
20947
+ elm.setAttribute('data-title', elm.getAttribute('title'));
20948
+ this.builder.editor.tooltip.set(elm);
20949
+ });
20897
20950
  });
20898
20951
  }
20899
20952
 
@@ -21105,6 +21158,7 @@ class Util$1 {
21105
21158
  e.preventDefault();
21106
21159
  e.stopImmediatePropagation();
21107
21160
  });
21161
+ if (buttonok) buttonok.focus();
21108
21162
  }
21109
21163
  showRtePop(pop, onShow, btn) {
21110
21164
  const dom = this.dom;
@@ -101549,14 +101603,14 @@ class AnimateScroll {
101549
101603
 
101550
101604
  <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
101551
101605
  <button title="${out('Clear All')}" class="cmd-clear-simplescroll" style="padding: 0 20px;">
101552
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101606
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101553
101607
  <span style="margin-left:7px">${out('Clear All')}</span>
101554
101608
  </button>
101555
101609
  </div>
101556
101610
 
101557
101611
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
101558
101612
  <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
101559
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101613
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101560
101614
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101561
101615
  </button>
101562
101616
  </div>
@@ -101654,7 +101708,7 @@ class AnimateScroll {
101654
101708
  <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:55px">1.3s</button>
101655
101709
  <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:55px">1.4s</button>
101656
101710
  <button title="${out('Clear')}" class="cmd-clear-delay" style="width:45px;background: none;box-shadow:none;">
101657
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101711
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101658
101712
  </button>
101659
101713
  </div>
101660
101714
 
@@ -101664,14 +101718,14 @@ class AnimateScroll {
101664
101718
 
101665
101719
  <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
101666
101720
  <button title="${out('Clear All')}" class="cmd-clear-basicanim" style="padding: 0 20px;">
101667
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101721
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101668
101722
  <span style="margin-left:7px">${out('Clear All')}</span>
101669
101723
  </button>
101670
101724
  </div>
101671
101725
 
101672
101726
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
101673
101727
  <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
101674
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101728
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101675
101729
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101676
101730
  </button>
101677
101731
  </div>
@@ -101699,7 +101753,7 @@ class AnimateScroll {
101699
101753
  <input class="inp-slide-left" type="text" />
101700
101754
  </span>
101701
101755
  <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
101702
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101756
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101703
101757
  </button>
101704
101758
  </div>
101705
101759
  <div class="flex-wrap">
@@ -101716,7 +101770,7 @@ class AnimateScroll {
101716
101770
  <input class="inp-slide-right" type="text" />
101717
101771
  </span>
101718
101772
  <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
101719
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101773
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101720
101774
  </button>
101721
101775
  </div>
101722
101776
  <div class="flex-wrap">
@@ -101734,7 +101788,7 @@ class AnimateScroll {
101734
101788
  <input class="inp-slide-up" type="text" />
101735
101789
  </span>
101736
101790
  <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
101737
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101791
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101738
101792
  </button>
101739
101793
  </div>
101740
101794
  <div class="flex-wrap">
@@ -101751,7 +101805,7 @@ class AnimateScroll {
101751
101805
  <input class="inp-slide-down" type="text" />
101752
101806
  </span>
101753
101807
  <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
101754
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101808
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101755
101809
  </button>
101756
101810
  </div>
101757
101811
  <div class="flex-wrap">
@@ -101769,7 +101823,7 @@ class AnimateScroll {
101769
101823
  <input class="inp-scale" type="text" />
101770
101824
  </span>
101771
101825
  <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
101772
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101826
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101773
101827
  </button>
101774
101828
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
101775
101829
  </div>
@@ -101788,7 +101842,7 @@ class AnimateScroll {
101788
101842
  <input class="inp-rotate-clockwise" type="text" />
101789
101843
  </span>
101790
101844
  <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
101791
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101845
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101792
101846
  </button>
101793
101847
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
101794
101848
  </div>
@@ -101805,7 +101859,7 @@ class AnimateScroll {
101805
101859
  <input class="inp-rotate-counter" type="text" />
101806
101860
  </span>
101807
101861
  <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
101808
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101862
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101809
101863
  </button>
101810
101864
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
101811
101865
  </div>
@@ -101825,14 +101879,14 @@ class AnimateScroll {
101825
101879
 
101826
101880
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101827
101881
  <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="padding: 0 20px;">
101828
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101882
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101829
101883
  <span style="margin-left:7px">${out('Clear All')}</span>
101830
101884
  </button>
101831
101885
  </div>
101832
101886
 
101833
101887
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101834
101888
  <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
101835
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101889
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101836
101890
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101837
101891
  </button>
101838
101892
  </div>
@@ -101847,7 +101901,7 @@ class AnimateScroll {
101847
101901
  <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
101848
101902
  </span>
101849
101903
  <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
101850
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101904
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101851
101905
  </button>
101852
101906
  </div>
101853
101907
  <div class="flex-wrap">
@@ -101864,7 +101918,7 @@ class AnimateScroll {
101864
101918
  <input class="inp-slide-right" type="text" />
101865
101919
  </span>
101866
101920
  <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
101867
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101921
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101868
101922
  </button>
101869
101923
  </div>
101870
101924
  <div class="flex-wrap">
@@ -101882,7 +101936,7 @@ class AnimateScroll {
101882
101936
  <input class="inp-slide-up" type="text" />
101883
101937
  </span>
101884
101938
  <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
101885
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101939
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101886
101940
  </button>
101887
101941
  </div>
101888
101942
  <div class="flex-wrap">
@@ -101899,7 +101953,7 @@ class AnimateScroll {
101899
101953
  <input class="inp-slide-down" type="text" />
101900
101954
  </span>
101901
101955
  <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
101902
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101956
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101903
101957
  </button>
101904
101958
  </div>
101905
101959
  <div class="flex-wrap">
@@ -101917,7 +101971,7 @@ class AnimateScroll {
101917
101971
  <input class="inp-scale" type="text" />
101918
101972
  </span>
101919
101973
  <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
101920
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101974
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101921
101975
  </button>
101922
101976
  </div>
101923
101977
  <div class="flex-nowrap">
@@ -101935,7 +101989,7 @@ class AnimateScroll {
101935
101989
  <input class="inp-rotate-clockwise" type="text" />
101936
101990
  </span>
101937
101991
  <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
101938
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
101992
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101939
101993
  </button>
101940
101994
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
101941
101995
  </div>
@@ -101952,7 +102006,7 @@ class AnimateScroll {
101952
102006
  <input class="inp-rotate-counter" type="text" />
101953
102007
  </span>
101954
102008
  <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
101955
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
102009
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101956
102010
  </button>
101957
102011
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
101958
102012
  </div>
@@ -101971,14 +102025,14 @@ class AnimateScroll {
101971
102025
 
101972
102026
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101973
102027
  <button title="${out('Clear All')}" class="cmd-clear-scrollanim" style="padding: 0 20px;">
101974
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
102028
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101975
102029
  <span style="margin-left:7px">${out('Clear All')}</span>
101976
102030
  </button>
101977
102031
  </div>
101978
102032
 
101979
102033
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101980
102034
  <button title="${out('Clear All Animations in Section')}" class="cmd-clear-anim-all" style="padding: 0 20px;">
101981
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
102035
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101982
102036
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101983
102037
  </button>
101984
102038
  </div>
@@ -102038,7 +102092,7 @@ class AnimateScroll {
102038
102092
  </label>
102039
102093
 
102040
102094
  <button title="${out('Clear')}" class="cmd-clear-anim-wizard" style="width:100px">
102041
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
102095
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
102042
102096
  <span style="margin-left:7px">${out('Clear')}</span>
102043
102097
  </button>
102044
102098
  </div>
@@ -105715,7 +105769,7 @@ class Timeline {
105715
105769
  <td style="text-align:center"></td>
105716
105770
  <td style="text-align:center;padding:0">
105717
105771
  <!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:23px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
105718
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
105772
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
105719
105773
  </button>-->
105720
105774
  </td>
105721
105775
  </tr>
@@ -106222,7 +106276,7 @@ class Timeline {
106222
106276
  <button type="button" title="${out('More')}" class="cmd-timeline-more" style="width:40px;height:34px;"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
106223
106277
 
106224
106278
  <!--<button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:40px;height:34px;">
106225
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
106279
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106226
106280
  </button>-->
106227
106281
  </div>
106228
106282
  </div>
@@ -106264,7 +106318,7 @@ class Timeline {
106264
106318
  </div>
106265
106319
  <div class="flex-wrap" style="margin-top:8px;">
106266
106320
  <button title="${out('Clear All')}" class="cmd-clear-timeline" style="width:30px;height:23px;flex: none;box-shadow: none !important;">
106267
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
106321
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106268
106322
  </button>
106269
106323
  <button title="${out('More')}" type="button" class="cmd-clear-more" style="width:30px;height:23px;">
106270
106324
  <svg class="is-icon-flex" style="width: 14px;height: 14px;"><use xlink:href="#ion-more"></use></svg>
@@ -106273,7 +106327,7 @@ class Timeline {
106273
106327
 
106274
106328
  <div class="clear-more flex-wrap is-pop">
106275
106329
  <button title="${out('Clear All Animations in Section')}" class="cmd-clear-timeline-all" style="flex:none;width:auto;padding:0 20px !important;box-shadow:none !important;">
106276
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
106330
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106277
106331
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
106278
106332
  </button>
106279
106333
  </div>
@@ -106309,7 +106363,7 @@ class Timeline {
106309
106363
  </div>
106310
106364
  <!--
106311
106365
  <button title="${out('Clear All')}" class="cmd-clear-timeline" style="margin-left:5px;height:34px;flex: none;width: auto;padding: 0 0 0 8px !important;box-shadow: none !important;background: transparent !important;">
106312
- <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
106366
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106313
106367
  </button>
106314
106368
  -->
106315
106369
  </div>
@@ -128386,6 +128440,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
128386
128440
  localStorage.removeItem('_screenmode');
128387
128441
  }
128388
128442
 
128443
+ if (this.controlPanel) {
128444
+ // The new control panel works best with zoom=1, no live preview and animation
128445
+ localStorage.removeItem('_zoom'); // Reset zoom
128446
+
128447
+ localStorage.removeItem('_livepreview');
128448
+ localStorage.removeItem('_disableanimation');
128449
+ }
128450
+
128389
128451
  this.templateJSON = [{
128390
128452
  url: this.settings.designUrl1,
128391
128453
  path: this.settings.designPath,
@@ -130143,7 +130205,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
130143
130205
  }
130144
130206
  if (elmTool) elmTool.style.display = '';
130145
130207
  if (divImageTool) divImageTool.style.display = '';
130146
- if (divImageResizer) divImageResizer.style.display = '';
130208
+
130209
+ if (divImageResizer) {
130210
+ divImageResizer.style.display = ''; // moveable
130211
+
130212
+ divImageResizer.style.top = '-10px';
130213
+ divImageResizer.style.left = '-10px';
130214
+ divImageResizer.style.width = '1px';
130215
+ divImageResizer.style.height = '1px';
130216
+ }
130147
130217
  };
130148
130218
 
130149
130219
  if (hideOnScroll) {
@@ -130776,7 +130846,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
130776
130846
  arrSections.push(newSection);
130777
130847
  }
130778
130848
  } else {
130779
- if (this.activeSection) {
130849
+ if (this.activeSection && this.wrapperEl.contains(this.activeSection)) {
130780
130850
  let activeSection = this.activeSection;
130781
130851
 
130782
130852
  if (dom.hasClass(activeSection, 'is-static')) {
@@ -131571,10 +131641,6 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
131571
131641
  }
131572
131642
  }
131573
131643
 
131574
- clear() {
131575
- this.loadHtml('');
131576
- }
131577
-
131578
131644
  loadHtml(html) {
131579
131645
  // Reset
131580
131646
  this.activeBox = null;
@@ -131834,6 +131900,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
131834
131900
  this.export(options, true);
131835
131901
  }
131836
131902
 
131903
+ clear() {
131904
+ this.editor.util.confirm(out('Are you sure you want to clear the page content?'), ok => {
131905
+ if (ok) {
131906
+ this.loadHtml('');
131907
+ }
131908
+ }, true, out('Clear'), true); //true => force open
131909
+ }
131910
+
131837
131911
  export(options = {}, shortenOutput = false) {
131838
131912
  let pageTemplate = this.pageTemplate;
131839
131913
  let output = ''; // [%CONTENT%]