@innovastudio/contentbox 1.6.13 → 1.6.15

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
3
  "type": "module",
4
- "version": "1.6.13",
4
+ "version": "1.6.15",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
@@ -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
 
@@ -101549,14 +101602,14 @@ class AnimateScroll {
101549
101602
 
101550
101603
  <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
101551
101604
  <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>
101605
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101553
101606
  <span style="margin-left:7px">${out('Clear All')}</span>
101554
101607
  </button>
101555
101608
  </div>
101556
101609
 
101557
101610
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
101558
101611
  <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>
101612
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101560
101613
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101561
101614
  </button>
101562
101615
  </div>
@@ -101654,7 +101707,7 @@ class AnimateScroll {
101654
101707
  <button title="1.3s" class="cmd-basic-delay" data-value="delay-1300ms" style="width:55px">1.3s</button>
101655
101708
  <button title="1.4s" class="cmd-basic-delay" data-value="delay-1400ms" style="width:55px">1.4s</button>
101656
101709
  <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>
101710
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101658
101711
  </button>
101659
101712
  </div>
101660
101713
 
@@ -101664,14 +101717,14 @@ class AnimateScroll {
101664
101717
 
101665
101718
  <div style="display:flex;justify-content: flex-end;margin-top: 15px;margin-right: 20px;">
101666
101719
  <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>
101720
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101668
101721
  <span style="margin-left:7px">${out('Clear All')}</span>
101669
101722
  </button>
101670
101723
  </div>
101671
101724
 
101672
101725
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;margin-right: 20px;">
101673
101726
  <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>
101727
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101675
101728
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101676
101729
  </button>
101677
101730
  </div>
@@ -101699,7 +101752,7 @@ class AnimateScroll {
101699
101752
  <input class="inp-slide-left" type="text" />
101700
101753
  </span>
101701
101754
  <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>
101755
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101703
101756
  </button>
101704
101757
  </div>
101705
101758
  <div class="flex-wrap">
@@ -101716,7 +101769,7 @@ class AnimateScroll {
101716
101769
  <input class="inp-slide-right" type="text" />
101717
101770
  </span>
101718
101771
  <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>
101772
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101720
101773
  </button>
101721
101774
  </div>
101722
101775
  <div class="flex-wrap">
@@ -101734,7 +101787,7 @@ class AnimateScroll {
101734
101787
  <input class="inp-slide-up" type="text" />
101735
101788
  </span>
101736
101789
  <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>
101790
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101738
101791
  </button>
101739
101792
  </div>
101740
101793
  <div class="flex-wrap">
@@ -101751,7 +101804,7 @@ class AnimateScroll {
101751
101804
  <input class="inp-slide-down" type="text" />
101752
101805
  </span>
101753
101806
  <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>
101807
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101755
101808
  </button>
101756
101809
  </div>
101757
101810
  <div class="flex-wrap">
@@ -101769,7 +101822,7 @@ class AnimateScroll {
101769
101822
  <input class="inp-scale" type="text" />
101770
101823
  </span>
101771
101824
  <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>
101825
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101773
101826
  </button>
101774
101827
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-arrows-diagonal"></use></svg>-->
101775
101828
  </div>
@@ -101788,7 +101841,7 @@ class AnimateScroll {
101788
101841
  <input class="inp-rotate-clockwise" type="text" />
101789
101842
  </span>
101790
101843
  <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>
101844
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101792
101845
  </button>
101793
101846
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
101794
101847
  </div>
@@ -101805,7 +101858,7 @@ class AnimateScroll {
101805
101858
  <input class="inp-rotate-counter" type="text" />
101806
101859
  </span>
101807
101860
  <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>
101861
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101809
101862
  </button>
101810
101863
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
101811
101864
  </div>
@@ -101825,14 +101878,14 @@ class AnimateScroll {
101825
101878
 
101826
101879
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101827
101880
  <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>
101881
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101829
101882
  <span style="margin-left:7px">${out('Clear All')}</span>
101830
101883
  </button>
101831
101884
  </div>
101832
101885
 
101833
101886
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101834
101887
  <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>
101888
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101836
101889
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101837
101890
  </button>
101838
101891
  </div>
@@ -101847,7 +101900,7 @@ class AnimateScroll {
101847
101900
  <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" type="text" />
101848
101901
  </span>
101849
101902
  <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>
101903
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101851
101904
  </button>
101852
101905
  </div>
101853
101906
  <div class="flex-wrap">
@@ -101864,7 +101917,7 @@ class AnimateScroll {
101864
101917
  <input class="inp-slide-right" type="text" />
101865
101918
  </span>
101866
101919
  <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>
101920
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101868
101921
  </button>
101869
101922
  </div>
101870
101923
  <div class="flex-wrap">
@@ -101882,7 +101935,7 @@ class AnimateScroll {
101882
101935
  <input class="inp-slide-up" type="text" />
101883
101936
  </span>
101884
101937
  <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>
101938
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101886
101939
  </button>
101887
101940
  </div>
101888
101941
  <div class="flex-wrap">
@@ -101899,7 +101952,7 @@ class AnimateScroll {
101899
101952
  <input class="inp-slide-down" type="text" />
101900
101953
  </span>
101901
101954
  <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>
101955
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101903
101956
  </button>
101904
101957
  </div>
101905
101958
  <div class="flex-wrap">
@@ -101917,7 +101970,7 @@ class AnimateScroll {
101917
101970
  <input class="inp-scale" type="text" />
101918
101971
  </span>
101919
101972
  <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>
101973
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101921
101974
  </button>
101922
101975
  </div>
101923
101976
  <div class="flex-nowrap">
@@ -101935,7 +101988,7 @@ class AnimateScroll {
101935
101988
  <input class="inp-rotate-clockwise" type="text" />
101936
101989
  </span>
101937
101990
  <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>
101991
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101939
101992
  </button>
101940
101993
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-clockwise"></use></svg>-->
101941
101994
  </div>
@@ -101952,7 +102005,7 @@ class AnimateScroll {
101952
102005
  <input class="inp-rotate-counter" type="text" />
101953
102006
  </span>
101954
102007
  <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>
102008
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101956
102009
  </button>
101957
102010
  <!--<svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-rotate-2"></use></svg>-->
101958
102011
  </div>
@@ -101971,14 +102024,14 @@ class AnimateScroll {
101971
102024
 
101972
102025
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101973
102026
  <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>
102027
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101975
102028
  <span style="margin-left:7px">${out('Clear All')}</span>
101976
102029
  </button>
101977
102030
  </div>
101978
102031
 
101979
102032
  <div style="display:flex;justify-content: flex-end;margin-top: 5px;">
101980
102033
  <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>
102034
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
101982
102035
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
101983
102036
  </button>
101984
102037
  </div>
@@ -102038,7 +102091,7 @@ class AnimateScroll {
102038
102091
  </label>
102039
102092
 
102040
102093
  <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>
102094
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
102042
102095
  <span style="margin-left:7px">${out('Clear')}</span>
102043
102096
  </button>
102044
102097
  </div>
@@ -105715,7 +105768,7 @@ class Timeline {
105715
105768
  <td style="text-align:center"></td>
105716
105769
  <td style="text-align:center;padding:0">
105717
105770
  <!--<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>
105771
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
105719
105772
  </button>-->
105720
105773
  </td>
105721
105774
  </tr>
@@ -106222,7 +106275,7 @@ class Timeline {
106222
106275
  <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
106276
 
106224
106277
  <!--<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>
106278
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106226
106279
  </button>-->
106227
106280
  </div>
106228
106281
  </div>
@@ -106264,7 +106317,7 @@ class Timeline {
106264
106317
  </div>
106265
106318
  <div class="flex-wrap" style="margin-top:8px;">
106266
106319
  <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>
106320
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106268
106321
  </button>
106269
106322
  <button title="${out('More')}" type="button" class="cmd-clear-more" style="width:30px;height:23px;">
106270
106323
  <svg class="is-icon-flex" style="width: 14px;height: 14px;"><use xlink:href="#ion-more"></use></svg>
@@ -106273,7 +106326,7 @@ class Timeline {
106273
106326
 
106274
106327
  <div class="clear-more flex-wrap is-pop">
106275
106328
  <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>
106329
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106277
106330
  <span style="margin-left:7px">${out('Clear All Animations in Section')}</span>
106278
106331
  </button>
106279
106332
  </div>
@@ -106309,7 +106362,7 @@ class Timeline {
106309
106362
  </div>
106310
106363
  <!--
106311
106364
  <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>
106365
+ <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
106313
106366
  </button>
106314
106367
  -->
106315
106368
  </div>
@@ -128386,6 +128439,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
128386
128439
  localStorage.removeItem('_screenmode');
128387
128440
  }
128388
128441
 
128442
+ if (this.controlPanel) {
128443
+ // The new control panel works best with zoom=1, no live preview and animation
128444
+ localStorage.removeItem('_zoom'); // Reset zoom
128445
+
128446
+ localStorage.removeItem('_livepreview');
128447
+ localStorage.removeItem('_disableanimation');
128448
+ }
128449
+
128389
128450
  this.templateJSON = [{
128390
128451
  url: this.settings.designUrl1,
128391
128452
  path: this.settings.designPath,
@@ -128857,8 +128918,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
128857
128918
  wrapper.style.transition = 'none';
128858
128919
  },
128859
128920
  onZoom: scale => {
128860
- console.log('onZoom'); // Zoom Adjustment
128861
-
128921
+ // Zoom Adjustment
128862
128922
  const x = 300 * (1 - scale) / 0.5;
128863
128923
  this.wrapperEl.style.marginTop = `${x}px`;
128864
128924
  const wrapper = this.wrapperEl;
@@ -128874,10 +128934,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
128874
128934
  tools.forEach(elm => {
128875
128935
  elm.setAttribute('data-boxinfo-active', '');
128876
128936
  });
128877
- this.ss();
128878
128937
  },
128879
128938
  onZoomEnd: () => {
128880
- console.log('onZoomEnd');
128881
128939
  const wrapper = this.wrapperEl;
128882
128940
  const section = wrapper.querySelector('.is-section');
128883
128941
  if (!section) return; // empty content
@@ -130146,7 +130204,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
130146
130204
  }
130147
130205
  if (elmTool) elmTool.style.display = '';
130148
130206
  if (divImageTool) divImageTool.style.display = '';
130149
- if (divImageResizer) divImageResizer.style.display = '';
130207
+
130208
+ if (divImageResizer) {
130209
+ divImageResizer.style.display = ''; // moveable
130210
+
130211
+ divImageResizer.style.top = '-10px';
130212
+ divImageResizer.style.left = '-10px';
130213
+ divImageResizer.style.width = '1px';
130214
+ divImageResizer.style.height = '1px';
130215
+ }
130150
130216
  };
130151
130217
 
130152
130218
  if (hideOnScroll) {
@@ -130779,7 +130845,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
130779
130845
  arrSections.push(newSection);
130780
130846
  }
130781
130847
  } else {
130782
- if (this.activeSection) {
130848
+ if (this.activeSection && this.wrapperEl.contains(this.activeSection)) {
130783
130849
  let activeSection = this.activeSection;
130784
130850
 
130785
130851
  if (dom.hasClass(activeSection, 'is-static')) {
@@ -131574,10 +131640,6 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
131574
131640
  }
131575
131641
  }
131576
131642
 
131577
- clear() {
131578
- this.loadHtml('');
131579
- }
131580
-
131581
131643
  loadHtml(html) {
131582
131644
  // Reset
131583
131645
  this.activeBox = null;
@@ -131837,6 +131899,14 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
131837
131899
  this.export(options, true);
131838
131900
  }
131839
131901
 
131902
+ clear() {
131903
+ this.editor.util.confirm(out('Are you sure you want to clear the page content?'), ok => {
131904
+ if (ok) {
131905
+ this.loadHtml('');
131906
+ }
131907
+ }, true, out('Clear'), true); //true => force open
131908
+ }
131909
+
131840
131910
  export(options = {}, shortenOutput = false) {
131841
131911
  let pageTemplate = this.pageTemplate;
131842
131912
  let output = ''; // [%CONTENT%]