@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
@@ -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
|
-
|
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
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
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>'
|
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
|
-
|
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 (
|
786
|
-
|
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 =
|
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; //
|
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)
|
107814
|
-
|
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
|
-
|
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.
|
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 (
|
107843
|
-
iframe.
|
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() {
|