@innovastudio/contentbox 1.5.3 → 1.5.4

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.5.3",
4
+ "version": "1.5.4",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
@@ -599,13 +599,24 @@ class SideBar {
599
599
  } else {
600
600
  html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSource" data-command="code" data-title="' + button.title + '" title="' + button.title + '">' + '<svg class="svg-icon" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg>' + '</button>';
601
601
  }
602
- } else if (button.name == 'custom1') {
603
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="divCustomSidebarArea1" data-title="' + button.title + '" title="' + button.title + '" data-src="' + button.src + '">' + button.html + '</button>';
604
- } else if (button.name == 'custom2') {
605
- html += '<button class="is-sidebar-button" data-content="divCustomSidebarArea2" data-title="' + button.title + '" title="' + button.title + '" data-src="' + button.src + '">' + button.html + '</button>';
606
602
  } else {
607
603
  //custom buttons
608
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + button.content.substr(1) + '" data-title="' + button.title + '" title="' + button.title + '">' + button.html + '</button>';
604
+ if (button.src) {
605
+ var panelId = dom$n.uniqueId();
606
+ html += `<button class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${button.title}" title="${button.title}" data-src="${button.src}" data-refresh="${button.refresh ? 1 : 0}">${button.html}</button>`;
607
+
608
+ if (!builderStuff.querySelector(`#${panelId}`)) {
609
+ let customPanelHtml = `<div id="${panelId}" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${button.maxwidth ? button.maxwidth : '500px'};">
610
+ <div style="padding:0 0 0 50px;box-sizing:border-box;">
611
+ <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
612
+ </iframe>
613
+ </div>
614
+ </div>`;
615
+ dom$n.appendHtml(builderStuff, customPanelHtml);
616
+ }
617
+ } else {
618
+ html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + button.content.substr(1) + '" data-title="' + button.title + '" title="' + button.title + '" data-refresh="' + (button.refresh ? 1 : 0) + '">' + button.html + '</button>';
619
+ }
609
620
  }
610
621
 
611
622
  if (this.builder.sideButtons) {
@@ -624,10 +635,23 @@ class SideBar {
624
635
  */
625
636
  this.builder.sideButtons.map(btn => {
626
637
  if (sideIndex == btn.pos) {
627
- var panelId = dom$n.uniqueId();
628
- html += '<button class="is-sidebar-button" tabindex="-1" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
629
- let panelHtml = '<div id="' + panelId + '" class="is-sidebar-content is-area-2nd ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
630
- dom$n.appendHtml(builderStuff, panelHtml);
638
+ if (btn.src) {
639
+ var panelId = dom$n.uniqueId();
640
+ html += `<button class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${out(btn.title)}" title="${out(btn.title)}" data-src="${btn.src}" data-refresh="${btn.refresh ? 1 : 0}">
641
+ ${btn.html}
642
+ </button>`;
643
+ let panelHtml = `<div id="${panelId}" class="is-sidebar-content is-area-2nd ${btn.class}" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${btn.maxwidth ? btn.maxwidth : '1005px'};">
644
+ <div style="padding:0 0 0 50px;box-sizing:border-box;">
645
+ <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
646
+ </iframe>
647
+ </div>
648
+ </div>`;
649
+ dom$n.appendHtml(builderStuff, panelHtml);
650
+ } else {
651
+ html += `<button class="is-sidebar-button" tabindex="-1" data-content="${btn.content.substr(1)}" data-title="${out(btn.title)}" title="${out(btn.title)}">
652
+ ${btn.html}
653
+ </button>`;
654
+ }
631
655
  }
632
656
  });
633
657
  }
@@ -635,7 +659,7 @@ class SideBar {
635
659
  sideIndex++;
636
660
  });
637
661
  html += '</div>';
638
- 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>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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 is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" 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>';
662
+ 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>';
639
663
  } else {
640
664
  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>';
641
665
  }
@@ -704,8 +728,25 @@ class SideBar {
704
728
 
705
729
  if (this.builder.useSidebar) {
706
730
  // jQuery('body').addClass('sidebar-active');
731
+ // When using sidebarData or sideButtons parameters
707
732
  let btns = document.querySelectorAll('.is-sidebar .is-sidebar-button');
708
733
  btns.forEach(btn => {
734
+ // Escape to close
735
+ setTimeout(() => {
736
+ const id = btn.getAttribute('data-content');
737
+
738
+ if (id) {
739
+ const panelContent = document.querySelector('#' + id);
740
+ panelContent.addEventListener('keydown', e => {
741
+ if (e.keyCode === 27) {
742
+ // escape key
743
+ // Close all opened sidebar
744
+ this.closeSidebar();
745
+ }
746
+ });
747
+ }
748
+ }, 300); // Give time for custom div to render
749
+
709
750
  btn.addEventListener('click', () => {
710
751
  let toggle = false;
711
752
 
@@ -777,27 +818,16 @@ class SideBar {
777
818
  }
778
819
  }
779
820
 
780
- let src = btn.getAttribute('data-src');
781
-
782
- if (src) {
821
+ if (btn.hasAttribute('data-src')) {
822
+ let src = btn.getAttribute('data-src');
783
823
  let panelId = btn.getAttribute('data-content');
824
+ let panel = builderStuff.querySelector(`#${panelId}`);
825
+ const ifr = panel.querySelector('iframe');
826
+ let refresh = btn.getAttribute('data-refresh');
784
827
 
785
- if (panelId == 'divCustomSidebarArea1') {
786
- const ifr = document.querySelector('#ifrCustomSidebarArea1');
787
-
788
- if (ifr.getAttribute('src').indexOf('blank') != -1) {
789
- ifr.setAttribute('src', src);
790
- }
791
- } else if (panelId == 'divCustomSidebarArea2') {
792
- const ifr = document.querySelector('#ifrCustomSidebarArea2');
793
-
794
- if (ifr.getAttribute('src').indexOf('blank') != -1) {
795
- ifr.setAttribute('src', src);
796
- }
828
+ if (refresh === '1') {
829
+ ifr.setAttribute('src', src);
797
830
  } else {
798
- let panelId = btn.getAttribute('data-content');
799
- const ifr = document.querySelector('#' + panelId);
800
-
801
831
  if (ifr.getAttribute('src').indexOf('blank') != -1) {
802
832
  ifr.setAttribute('src', src);
803
833
  }
@@ -901,8 +931,9 @@ class SideBar {
901
931
  this.builder.settings.onChange();
902
932
  });
903
933
  */
934
+ // Escape to close
904
935
 
905
- const contents = builderStuff.querySelectorAll('.is-sidebar-content');
936
+ const contents = document.querySelectorAll('.is-sidebar-content');
906
937
  contents.forEach(item => {
907
938
  item.addEventListener('keydown', e => {
908
939
  if (e.keyCode === 27) {
@@ -935,7 +966,8 @@ class SideBar {
935
966
  }
936
967
 
937
968
  closeSidebar() {
938
- const builderStuff = this.builderStuff; // Close all opened sidebar
969
+ const builderStuff = document; // this.builderStuff; // there is posibility of custom panel outside builderStuff
970
+ // Close all opened sidebar
939
971
 
940
972
  const overlay = builderStuff.querySelector('.is-sidebar-overlay');
941
973
 
@@ -106828,6 +106860,7 @@ class ContentBox {
106828
106860
  // document.addEventListener('keydown', this.doDocumentKeydown = (e)=>{
106829
106861
  // console.log(e.target);
106830
106862
  // });
106863
+ // window.wheel = () => {}; // fix TypeError if smooth scroll is used in live preview window
106831
106864
 
106832
106865
  } // init
106833
106866
 
@@ -107808,20 +107841,65 @@ class ContentBox {
107808
107841
  const btnId = dom.uniqueId();
107809
107842
  const panelId = dom.uniqueId();
107810
107843
  let btnHtml;
107844
+ /*
107845
+ if(btn.src) {
107846
+ var panelId = dom.uniqueId();
107847
+ html += `<button class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${out(btn.title)}" title="${out(btn.title)}" data-src="${btn.src }" data-refresh="${(btn.refresh?1:0)}">
107848
+ ${btn.html}
107849
+ </button>`;
107850
+ let panelHtml = `<div id="${panelId}" class="is-sidebar-content is-area-2nd ${btn.class}" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${(btn.maxwidth?btn.maxwidth:'1005px')};">
107851
+ <div style="padding:0 0 0 50px;box-sizing:border-box;">
107852
+ <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
107853
+ </iframe>
107854
+ </div>
107855
+ </div>`;
107856
+ dom.appendHtml(builderStuff, panelHtml);
107857
+
107858
+ } else {
107859
+ html += `<button class="is-sidebar-button" tabindex="-1" data-content="${btn.content.substr(1)}" data-title="${out(btn.title)}" title="${out(btn.title)}">
107860
+ ${btn.html}
107861
+ </button>`;
107862
+ }
107863
+ */
107811
107864
 
107812
107865
  if (btn.src) {
107813
- btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
107814
- var panelHtml = '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
107866
+ // btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-content="' + panelId + '" data-src="' + btn.src + '" data-title="' + out(btn.title)+ '" title="' + out(btn.title)+ '">' +
107867
+ // btn.html +
107868
+ // '</button>';
107869
+ btnHtml = `<button type="button" id="${btnId}" class="is-sidebar-button" tabindex="-1" data-content="${panelId}" data-title="${out(btn.title)}" title="${out(btn.title)}" data-src="${btn.src}" data-refresh="${btn.refresh ? 1 : 0}">
107870
+ ${btn.html}
107871
+ </button>`; // var panelHtml =
107872
+ // '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' +
107873
+ // '<div>' +
107874
+ // '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' +
107875
+ // '</iframe>' +
107876
+ // '</div>' +
107877
+ // '</div>';
107878
+
107879
+ let panelHtml = `<div id="${panelId}" class="is-sidebar-content is-area-2nd ${btn.class}" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${btn.maxwidth ? btn.maxwidth : '1005px'};">
107880
+ <div style="padding:0 0 0 50px;box-sizing:border-box;">
107881
+ <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
107882
+ </iframe>
107883
+ </div>
107884
+ </div>`;
107815
107885
  dom.appendHtml(builderStuff, panelHtml);
107816
107886
  } else {
107817
- btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
107887
+ if (btn.onClick) {
107888
+ btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
107889
+ } else {
107890
+ btnHtml = `<button id="${btnId}" class="is-sidebar-button" tabindex="-1" data-content="${btn.content.substr(1)}" data-title="${out(btn.title)}" title="${out(btn.title)}">
107891
+ ${btn.html}
107892
+ </button>`;
107893
+ }
107818
107894
  }
107819
107895
 
107820
107896
  const sidebar = builderStuff.querySelector('.is-sidebar');
107821
107897
  sidebar.children[btn.pos].insertAdjacentHTML('afterEnd', btnHtml);
107822
107898
  const btnNew = builderStuff.querySelector('#' + btnId);
107823
107899
  btnNew.addEventListener('click', e => {
107824
- if (btn.src) {
107900
+ if (btn.onClick) {
107901
+ btn.onClick(e);
107902
+ } else {
107825
107903
  if (!dom.hasClass(btnNew, 'active')) {
107826
107904
  // Close all opened sidebar
107827
107905
  // dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
@@ -107833,14 +107911,23 @@ class ContentBox {
107833
107911
 
107834
107912
  const panelContent = document.querySelector('#' + id);
107835
107913
  panelContent.style.display = 'block';
107914
+ panelContent.setAttribute('aria-hidden', false);
107836
107915
  setTimeout(() => {
107837
107916
  dom.addClass(panelContent, 'active');
107838
107917
  panelContent.focus();
107839
107918
  }, 10);
107840
- var iframe = builderStuff.querySelector('#' + id + ' iframe');
107841
107919
 
107842
- if (iframe.getAttribute('src') == 'about:blank') {
107843
- iframe.setAttribute('src', btn.src);
107920
+ if (btn.src) {
107921
+ var iframe = builderStuff.querySelector('#' + id + ' iframe');
107922
+ let refresh = btnNew.getAttribute('data-refresh');
107923
+
107924
+ if (refresh === '1') {
107925
+ iframe.setAttribute('src', btn.src);
107926
+ } else {
107927
+ if (iframe.getAttribute('src') == 'about:blank') {
107928
+ iframe.setAttribute('src', btn.src);
107929
+ }
107930
+ }
107844
107931
  }
107845
107932
 
107846
107933
  dom.appendHtml(builderStuff, '<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>');
@@ -107872,10 +107959,22 @@ class ContentBox {
107872
107959
  // Close all opened sidebar
107873
107960
  this.sidebar.closeSidebar();
107874
107961
  }
107875
- } else {
107876
- btn.onClick(e);
107877
107962
  }
107878
- });
107963
+ }); // Escape to close
107964
+
107965
+ setTimeout(() => {
107966
+ if (!btn.onClick) {
107967
+ const id = btnNew.getAttribute('data-content');
107968
+ const panelContent = document.querySelector('#' + id);
107969
+ panelContent.addEventListener('keydown', e => {
107970
+ if (e.keyCode === 27) {
107971
+ // escape key
107972
+ // Close all opened sidebar
107973
+ this.sidebar.closeSidebar();
107974
+ }
107975
+ });
107976
+ }
107977
+ }, 300); // Give time for custom div to render
107879
107978
  }
107880
107979
 
107881
107980
  undo() {