@innovastudio/contentbox 1.5.3 → 1.5.5
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.
|
|
4
|
+
"version": "1.5.5",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "public/contentbox/contentbox.esm.js",
|
|
7
7
|
"files": [
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"webpack-dev-server": "^4.0.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@innovastudio/contentbuilder": "^1.4.
|
|
49
|
+
"@innovastudio/contentbuilder": "^1.4.9",
|
|
50
50
|
"js-beautify": "^1.14.0"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
@@ -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
|
|
|
@@ -90598,7 +90630,10 @@ class LivePreview {
|
|
|
90598
90630
|
if (this.builder.previewURL) {
|
|
90599
90631
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
90600
90632
|
} else {
|
|
90601
|
-
|
|
90633
|
+
try {
|
|
90634
|
+
this.writeHtml(iframe);
|
|
90635
|
+
} catch (e) {// Do Nothing
|
|
90636
|
+
}
|
|
90602
90637
|
}
|
|
90603
90638
|
} else {
|
|
90604
90639
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
@@ -90683,7 +90718,7 @@ class LivePreview {
|
|
|
90683
90718
|
if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
|
|
90684
90719
|
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
90685
90720
|
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
90686
|
-
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90721
|
+
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('monaco-editor') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90687
90722
|
jsincludes1 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
|
|
90688
90723
|
}
|
|
90689
90724
|
}
|
|
@@ -90695,7 +90730,7 @@ class LivePreview {
|
|
|
90695
90730
|
if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
|
|
90696
90731
|
scripts[i].src.indexOf('static/js/') == -1 && //react
|
|
90697
90732
|
scripts[i].src.indexOf('src/') == -1 && //vue
|
|
90698
|
-
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90733
|
+
scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('monaco-editor') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
|
|
90699
90734
|
jsincludes2 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
|
|
90700
90735
|
}
|
|
90701
90736
|
}
|
|
@@ -106828,6 +106863,7 @@ class ContentBox {
|
|
|
106828
106863
|
// document.addEventListener('keydown', this.doDocumentKeydown = (e)=>{
|
|
106829
106864
|
// console.log(e.target);
|
|
106830
106865
|
// });
|
|
106866
|
+
// window.wheel = () => {}; // fix TypeError if smooth scroll is used in live preview window
|
|
106831
106867
|
|
|
106832
106868
|
} // init
|
|
106833
106869
|
|
|
@@ -107808,20 +107844,65 @@ class ContentBox {
|
|
|
107808
107844
|
const btnId = dom.uniqueId();
|
|
107809
107845
|
const panelId = dom.uniqueId();
|
|
107810
107846
|
let btnHtml;
|
|
107847
|
+
/*
|
|
107848
|
+
if(btn.src) {
|
|
107849
|
+
var panelId = dom.uniqueId();
|
|
107850
|
+
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)}">
|
|
107851
|
+
${btn.html}
|
|
107852
|
+
</button>`;
|
|
107853
|
+
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')};">
|
|
107854
|
+
<div style="padding:0 0 0 50px;box-sizing:border-box;">
|
|
107855
|
+
<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
|
|
107856
|
+
</iframe>
|
|
107857
|
+
</div>
|
|
107858
|
+
</div>`;
|
|
107859
|
+
dom.appendHtml(builderStuff, panelHtml);
|
|
107860
|
+
|
|
107861
|
+
} else {
|
|
107862
|
+
html += `<button class="is-sidebar-button" tabindex="-1" data-content="${btn.content.substr(1)}" data-title="${out(btn.title)}" title="${out(btn.title)}">
|
|
107863
|
+
${btn.html}
|
|
107864
|
+
</button>`;
|
|
107865
|
+
}
|
|
107866
|
+
*/
|
|
107811
107867
|
|
|
107812
107868
|
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
|
-
|
|
107869
|
+
// 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)+ '">' +
|
|
107870
|
+
// btn.html +
|
|
107871
|
+
// '</button>';
|
|
107872
|
+
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}">
|
|
107873
|
+
${btn.html}
|
|
107874
|
+
</button>`; // var panelHtml =
|
|
107875
|
+
// '<div id="' + panelId + '" class="is-sidebar-content ' + btn.class + '" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' +
|
|
107876
|
+
// '<div>' +
|
|
107877
|
+
// '<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' +
|
|
107878
|
+
// '</iframe>' +
|
|
107879
|
+
// '</div>' +
|
|
107880
|
+
// '</div>';
|
|
107881
|
+
|
|
107882
|
+
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'};">
|
|
107883
|
+
<div style="padding:0 0 0 50px;box-sizing:border-box;">
|
|
107884
|
+
<iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">
|
|
107885
|
+
</iframe>
|
|
107886
|
+
</div>
|
|
107887
|
+
</div>`;
|
|
107815
107888
|
dom.appendHtml(builderStuff, panelHtml);
|
|
107816
107889
|
} else {
|
|
107817
|
-
|
|
107890
|
+
if (btn.onClick) {
|
|
107891
|
+
btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
107892
|
+
} else {
|
|
107893
|
+
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)}">
|
|
107894
|
+
${btn.html}
|
|
107895
|
+
</button>`;
|
|
107896
|
+
}
|
|
107818
107897
|
}
|
|
107819
107898
|
|
|
107820
107899
|
const sidebar = builderStuff.querySelector('.is-sidebar');
|
|
107821
107900
|
sidebar.children[btn.pos].insertAdjacentHTML('afterEnd', btnHtml);
|
|
107822
107901
|
const btnNew = builderStuff.querySelector('#' + btnId);
|
|
107823
107902
|
btnNew.addEventListener('click', e => {
|
|
107824
|
-
if (btn.
|
|
107903
|
+
if (btn.onClick) {
|
|
107904
|
+
btn.onClick(e);
|
|
107905
|
+
} else {
|
|
107825
107906
|
if (!dom.hasClass(btnNew, 'active')) {
|
|
107826
107907
|
// Close all opened sidebar
|
|
107827
107908
|
// dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
|
|
@@ -107833,14 +107914,23 @@ class ContentBox {
|
|
|
107833
107914
|
|
|
107834
107915
|
const panelContent = document.querySelector('#' + id);
|
|
107835
107916
|
panelContent.style.display = 'block';
|
|
107917
|
+
panelContent.setAttribute('aria-hidden', false);
|
|
107836
107918
|
setTimeout(() => {
|
|
107837
107919
|
dom.addClass(panelContent, 'active');
|
|
107838
107920
|
panelContent.focus();
|
|
107839
107921
|
}, 10);
|
|
107840
|
-
var iframe = builderStuff.querySelector('#' + id + ' iframe');
|
|
107841
107922
|
|
|
107842
|
-
if (
|
|
107843
|
-
iframe.
|
|
107923
|
+
if (btn.src) {
|
|
107924
|
+
var iframe = builderStuff.querySelector('#' + id + ' iframe');
|
|
107925
|
+
let refresh = btnNew.getAttribute('data-refresh');
|
|
107926
|
+
|
|
107927
|
+
if (refresh === '1') {
|
|
107928
|
+
iframe.setAttribute('src', btn.src);
|
|
107929
|
+
} else {
|
|
107930
|
+
if (iframe.getAttribute('src') == 'about:blank') {
|
|
107931
|
+
iframe.setAttribute('src', btn.src);
|
|
107932
|
+
}
|
|
107933
|
+
}
|
|
107844
107934
|
}
|
|
107845
107935
|
|
|
107846
107936
|
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 +107962,22 @@ class ContentBox {
|
|
|
107872
107962
|
// Close all opened sidebar
|
|
107873
107963
|
this.sidebar.closeSidebar();
|
|
107874
107964
|
}
|
|
107875
|
-
} else {
|
|
107876
|
-
btn.onClick(e);
|
|
107877
107965
|
}
|
|
107878
|
-
});
|
|
107966
|
+
}); // Escape to close
|
|
107967
|
+
|
|
107968
|
+
setTimeout(() => {
|
|
107969
|
+
if (!btn.onClick) {
|
|
107970
|
+
const id = btnNew.getAttribute('data-content');
|
|
107971
|
+
const panelContent = document.querySelector('#' + id);
|
|
107972
|
+
panelContent.addEventListener('keydown', e => {
|
|
107973
|
+
if (e.keyCode === 27) {
|
|
107974
|
+
// escape key
|
|
107975
|
+
// Close all opened sidebar
|
|
107976
|
+
this.sidebar.closeSidebar();
|
|
107977
|
+
}
|
|
107978
|
+
});
|
|
107979
|
+
}
|
|
107980
|
+
}, 300); // Give time for custom div to render
|
|
107879
107981
|
}
|
|
107880
107982
|
|
|
107881
107983
|
undo() {
|