@innovastudio/contentbox 1.5.2 → 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.
|
|
4
|
+
"version": "1.5.4",
|
|
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.8",
|
|
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
|
|
|
@@ -73099,7 +73131,7 @@ class ColumnTool {
|
|
|
73099
73131
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
73100
73132
|
// cell.style.backgroundSize = val + '%';
|
|
73101
73133
|
|
|
73102
|
-
if (document.querySelector('.
|
|
73134
|
+
if (document.querySelector('.content-preview.is-screen-375.active') && this.useTarget) {
|
|
73103
73135
|
let dataBg = cell.getAttribute('data-bg-xs');
|
|
73104
73136
|
if (!dataBg) dataBg = '';
|
|
73105
73137
|
let div = document.createElement('div');
|
|
@@ -73107,7 +73139,7 @@ class ColumnTool {
|
|
|
73107
73139
|
|
|
73108
73140
|
div.style.backgroundSize = 'cover';
|
|
73109
73141
|
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
73110
|
-
} else if (document.querySelector('.
|
|
73142
|
+
} else if (document.querySelector('.content-preview.is-screen-768.active') && this.useTarget) {
|
|
73111
73143
|
let dataBg = cell.getAttribute('data-bg-sm');
|
|
73112
73144
|
if (!dataBg) dataBg = '';
|
|
73113
73145
|
let div = document.createElement('div');
|
|
@@ -73115,7 +73147,7 @@ class ColumnTool {
|
|
|
73115
73147
|
|
|
73116
73148
|
div.style.backgroundSize = 'cover';
|
|
73117
73149
|
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
73118
|
-
} else if (document.querySelector('.
|
|
73150
|
+
} else if (document.querySelector('.content-preview.is-screen-1024.active') && this.useTarget) {
|
|
73119
73151
|
let dataBg = cell.getAttribute('data-bg-md');
|
|
73120
73152
|
if (!dataBg) dataBg = '';
|
|
73121
73153
|
let div = document.createElement('div');
|
|
@@ -73138,11 +73170,11 @@ class ColumnTool {
|
|
|
73138
73170
|
};
|
|
73139
73171
|
|
|
73140
73172
|
inpImageScaleSlider.onchange = () => {
|
|
73141
|
-
if (document.querySelector('.
|
|
73173
|
+
if (document.querySelector('.content-preview.is-screen-375.active')) {
|
|
73142
73174
|
inpImageScaleSlider.value = 0;
|
|
73143
|
-
} else if (document.querySelector('.
|
|
73175
|
+
} else if (document.querySelector('.content-preview.is-screen-768.active')) {
|
|
73144
73176
|
inpImageScaleSlider.value = 0;
|
|
73145
|
-
} else if (document.querySelector('.
|
|
73177
|
+
} else if (document.querySelector('.content-preview.is-screen-1024.active')) {
|
|
73146
73178
|
inpImageScaleSlider.value = 0;
|
|
73147
73179
|
} //Trigger Change event
|
|
73148
73180
|
|
|
@@ -73197,7 +73229,7 @@ class ColumnTool {
|
|
|
73197
73229
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
73198
73230
|
// cell.style.backgroundPositionX = val + '%';
|
|
73199
73231
|
|
|
73200
|
-
if (document.querySelector('.
|
|
73232
|
+
if (document.querySelector('.content-preview.is-screen-375.active') && this.useTarget) {
|
|
73201
73233
|
let dataBg = cell.getAttribute('data-bg-xs');
|
|
73202
73234
|
if (!dataBg) dataBg = '';
|
|
73203
73235
|
let div = document.createElement('div');
|
|
@@ -73205,7 +73237,7 @@ class ColumnTool {
|
|
|
73205
73237
|
div.style.backgroundPositionX = val + '%';
|
|
73206
73238
|
div.style.backgroundSize = 'cover';
|
|
73207
73239
|
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
73208
|
-
} else if (document.querySelector('.
|
|
73240
|
+
} else if (document.querySelector('.content-preview.is-screen-768.active') && this.useTarget) {
|
|
73209
73241
|
let dataBg = cell.getAttribute('data-bg-sm');
|
|
73210
73242
|
if (!dataBg) dataBg = '';
|
|
73211
73243
|
let div = document.createElement('div');
|
|
@@ -73213,7 +73245,7 @@ class ColumnTool {
|
|
|
73213
73245
|
div.style.backgroundPositionX = val + '%';
|
|
73214
73246
|
div.style.backgroundSize = 'cover';
|
|
73215
73247
|
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
73216
|
-
} else if (document.querySelector('.
|
|
73248
|
+
} else if (document.querySelector('.content-preview.is-screen-1024.active') && this.useTarget) {
|
|
73217
73249
|
let dataBg = cell.getAttribute('data-bg-md');
|
|
73218
73250
|
if (!dataBg) dataBg = '';
|
|
73219
73251
|
let div = document.createElement('div');
|
|
@@ -73278,7 +73310,7 @@ class ColumnTool {
|
|
|
73278
73310
|
let cell = this.builder.elementSelected; //util.cellSelected();
|
|
73279
73311
|
// cell.style.backgroundPositionY = val + '%';
|
|
73280
73312
|
|
|
73281
|
-
if (document.querySelector('.
|
|
73313
|
+
if (document.querySelector('.content-preview.is-screen-375.active') && this.useTarget) {
|
|
73282
73314
|
let dataBg = cell.getAttribute('data-bg-xs');
|
|
73283
73315
|
if (!dataBg) dataBg = '';
|
|
73284
73316
|
let div = document.createElement('div');
|
|
@@ -73286,7 +73318,7 @@ class ColumnTool {
|
|
|
73286
73318
|
div.style.backgroundPositionY = val + '%';
|
|
73287
73319
|
div.style.backgroundSize = 'cover';
|
|
73288
73320
|
cell.setAttribute('data-bg-xs', div.style.cssText);
|
|
73289
|
-
} else if (document.querySelector('.
|
|
73321
|
+
} else if (document.querySelector('.content-preview.is-screen-768.active') && this.useTarget) {
|
|
73290
73322
|
let dataBg = cell.getAttribute('data-bg-sm');
|
|
73291
73323
|
if (!dataBg) dataBg = '';
|
|
73292
73324
|
let div = document.createElement('div');
|
|
@@ -73294,7 +73326,7 @@ class ColumnTool {
|
|
|
73294
73326
|
div.style.backgroundPositionY = val + '%';
|
|
73295
73327
|
div.style.backgroundSize = 'cover';
|
|
73296
73328
|
cell.setAttribute('data-bg-sm', div.style.cssText);
|
|
73297
|
-
} else if (document.querySelector('.
|
|
73329
|
+
} else if (document.querySelector('.content-preview.is-screen-1024.active') && this.useTarget) {
|
|
73298
73330
|
let dataBg = cell.getAttribute('data-bg-md');
|
|
73299
73331
|
if (!dataBg) dataBg = '';
|
|
73300
73332
|
let div = document.createElement('div');
|
|
@@ -74393,19 +74425,19 @@ class ColumnTool {
|
|
|
74393
74425
|
|
|
74394
74426
|
let div = document.createElement('div');
|
|
74395
74427
|
|
|
74396
|
-
if (document.querySelector('.
|
|
74428
|
+
if (document.querySelector('.content-preview.is-screen-375.active') && useTarget) {
|
|
74397
74429
|
let dataBg = elm.getAttribute('data-bg-xs');
|
|
74398
74430
|
if (!dataBg) dataBg = '';
|
|
74399
74431
|
div.style.cssText = dataBg;
|
|
74400
74432
|
inpImageScaleSlider.disabled = true;
|
|
74401
74433
|
inpImageScaleSlider.style.opacity = 0.6;
|
|
74402
|
-
} else if (document.querySelector('.
|
|
74434
|
+
} else if (document.querySelector('.content-preview.is-screen-768.active') && useTarget) {
|
|
74403
74435
|
let dataBg = elm.getAttribute('data-bg-sm');
|
|
74404
74436
|
if (!dataBg) dataBg = '';
|
|
74405
74437
|
div.style.cssText = dataBg;
|
|
74406
74438
|
inpImageScaleSlider.disabled = true;
|
|
74407
74439
|
inpImageScaleSlider.style.opacity = 0.6;
|
|
74408
|
-
} else if (document.querySelector('.
|
|
74440
|
+
} else if (document.querySelector('.content-preview.is-screen-1024.active') && useTarget) {
|
|
74409
74441
|
let dataBg = elm.getAttribute('data-bg-md');
|
|
74410
74442
|
if (!dataBg) dataBg = '';
|
|
74411
74443
|
div.style.cssText = dataBg;
|
|
@@ -90503,7 +90535,7 @@ class LivePreview {
|
|
|
90503
90535
|
z-index:100021 !important
|
|
90504
90536
|
}
|
|
90505
90537
|
</style>
|
|
90506
|
-
<div style="z-index:
|
|
90538
|
+
<div style="z-index:10002;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
90507
90539
|
<div class="is-modal-bar is-draggable" draggable="">
|
|
90508
90540
|
<span>${util.out('Live Preview')}</span>
|
|
90509
90541
|
<button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
|
|
@@ -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() {
|