@innovastudio/contentbox 1.4.23 → 1.4.25
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 +2 -2
- package/public/contentbox/contentbox.esm.js +1136 -218
- package/public/contentbox/contentbox.min.js +9 -9
- package/public/contentbox/lang/en.js +17 -2
- package/readme.txt +1 -1
|
@@ -3670,11 +3670,11 @@ class EditSection {
|
|
|
3670
3670
|
this.builderStuff = builderStuff;
|
|
3671
3671
|
let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
|
|
3672
3672
|
html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">↑</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">↓</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇤</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">⇥</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
|
|
3673
|
-
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
3674
|
-
html += '<div class="div-section-
|
|
3673
|
+
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
3674
|
+
html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
|
|
3675
3675
|
'<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
|
|
3676
3676
|
html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
3677
|
-
html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
|
|
3677
|
+
html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;"><span>' + out('Module Settings') + '</span>' + '<button class="is-modal-close" tabindex="-1" title="' + out('Close') + '">' + '<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>' + '</button>' + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
|
|
3678
3678
|
dom$k.appendHtml(builderStuff, html);
|
|
3679
3679
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
3680
3680
|
this.modalEditSection = modalEditSection;
|
|
@@ -3701,7 +3701,8 @@ class EditSection {
|
|
|
3701
3701
|
btnOk.addEventListener('click', () => {
|
|
3702
3702
|
const activeSection = this.builder.activeSection;
|
|
3703
3703
|
this.builder.editor.saveForUndo();
|
|
3704
|
-
activeSection.parentNode.removeChild(activeSection);
|
|
3704
|
+
activeSection.parentNode.removeChild(activeSection);
|
|
3705
|
+
this.builder.sectionStack(); //Trigger Render event
|
|
3705
3706
|
|
|
3706
3707
|
this.builder.settings.onRender();
|
|
3707
3708
|
this.builder.editor.util.hideModal(modalDelConfirm);
|
|
@@ -3719,35 +3720,40 @@ class EditSection {
|
|
|
3719
3720
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
|
3720
3721
|
btnSectionUp.addEventListener('click', () => {
|
|
3721
3722
|
this.builder.editor.saveForUndo();
|
|
3722
|
-
this.sectionUp();
|
|
3723
|
+
this.sectionUp();
|
|
3724
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3723
3725
|
|
|
3724
3726
|
this.builder.settings.onChange();
|
|
3725
3727
|
});
|
|
3726
3728
|
const btnSectionDown = modalEditSection.querySelector('.cmd-section-down');
|
|
3727
3729
|
btnSectionDown.addEventListener('click', () => {
|
|
3728
3730
|
this.builder.editor.saveForUndo();
|
|
3729
|
-
this.sectionDown();
|
|
3731
|
+
this.sectionDown();
|
|
3732
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3730
3733
|
|
|
3731
3734
|
this.builder.settings.onChange();
|
|
3732
3735
|
});
|
|
3733
3736
|
const btnSectionTop = modalEditSection.querySelector('.cmd-section-top');
|
|
3734
3737
|
btnSectionTop.addEventListener('click', () => {
|
|
3735
3738
|
this.builder.editor.saveForUndo();
|
|
3736
|
-
this.sectionTop();
|
|
3739
|
+
this.sectionTop();
|
|
3740
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3737
3741
|
|
|
3738
3742
|
this.builder.settings.onChange();
|
|
3739
3743
|
});
|
|
3740
3744
|
const btnSectionBottom = modalEditSection.querySelector('.cmd-section-bottom');
|
|
3741
3745
|
btnSectionBottom.addEventListener('click', () => {
|
|
3742
3746
|
this.builder.editor.saveForUndo();
|
|
3743
|
-
this.sectionBottom();
|
|
3747
|
+
this.sectionBottom();
|
|
3748
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3744
3749
|
|
|
3745
3750
|
this.builder.settings.onChange();
|
|
3746
3751
|
});
|
|
3747
3752
|
const btnSectionDuplicate = modalEditSection.querySelector('.cmd-section-duplicate');
|
|
3748
3753
|
btnSectionDuplicate.addEventListener('click', () => {
|
|
3749
3754
|
this.builder.editor.saveForUndo();
|
|
3750
|
-
this.sectionDuplicate();
|
|
3755
|
+
this.sectionDuplicate();
|
|
3756
|
+
this.builder.sectionStack(); //Trigger Change event
|
|
3751
3757
|
|
|
3752
3758
|
this.builder.settings.onChange();
|
|
3753
3759
|
});
|
|
@@ -3829,6 +3835,55 @@ class EditSection {
|
|
|
3829
3835
|
} //Trigger Change event
|
|
3830
3836
|
|
|
3831
3837
|
|
|
3838
|
+
this.builder.settings.onChange();
|
|
3839
|
+
});
|
|
3840
|
+
});
|
|
3841
|
+
const btnBetweenBoxSpacing = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
|
|
3842
|
+
btnBetweenBoxSpacing.forEach(btn => {
|
|
3843
|
+
btn.addEventListener('click', () => {
|
|
3844
|
+
this.builder.editor.saveForUndo();
|
|
3845
|
+
let val = btn.getAttribute('data-value');
|
|
3846
|
+
const activeSection = this.builder.activeSection;
|
|
3847
|
+
|
|
3848
|
+
if (val == 'space') {
|
|
3849
|
+
dom$k.removeClass(activeSection, 'space-around');
|
|
3850
|
+
} else {
|
|
3851
|
+
dom$k.addClass(activeSection, 'space-around');
|
|
3852
|
+
}
|
|
3853
|
+
|
|
3854
|
+
let btns = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
|
|
3855
|
+
btns.forEach(btn => {
|
|
3856
|
+
dom$k.removeClass(btn, 'on');
|
|
3857
|
+
});
|
|
3858
|
+
dom$k.addClass(btn, 'on'); //Trigger Change event
|
|
3859
|
+
|
|
3860
|
+
this.builder.settings.onChange();
|
|
3861
|
+
});
|
|
3862
|
+
});
|
|
3863
|
+
const btnSectionStack = modalEditSection.querySelectorAll('.cmd-section-stack');
|
|
3864
|
+
btnSectionStack.forEach(btn => {
|
|
3865
|
+
btn.addEventListener('click', () => {
|
|
3866
|
+
this.builder.editor.saveForUndo();
|
|
3867
|
+
let val = btn.getAttribute('data-value');
|
|
3868
|
+
const activeSection = this.builder.activeSection;
|
|
3869
|
+
dom$k.removeClass(activeSection, 'stack-top');
|
|
3870
|
+
dom$k.removeClass(activeSection, 'stack-middle');
|
|
3871
|
+
dom$k.removeClass(activeSection, 'stack-bottom');
|
|
3872
|
+
|
|
3873
|
+
if (val == 'top') {
|
|
3874
|
+
dom$k.addClass(activeSection, 'stack-top');
|
|
3875
|
+
} else if (val == 'middle') {
|
|
3876
|
+
dom$k.addClass(activeSection, 'stack-middle');
|
|
3877
|
+
} else if (val == 'bottom') {
|
|
3878
|
+
dom$k.addClass(activeSection, 'stack-bottom');
|
|
3879
|
+
}
|
|
3880
|
+
|
|
3881
|
+
let btns = modalEditSection.querySelectorAll('.cmd-section-stack');
|
|
3882
|
+
btns.forEach(btn => {
|
|
3883
|
+
dom$k.removeClass(btn, 'on');
|
|
3884
|
+
});
|
|
3885
|
+
dom$k.addClass(btn, 'on'); //Trigger Change event
|
|
3886
|
+
|
|
3832
3887
|
this.builder.settings.onChange();
|
|
3833
3888
|
});
|
|
3834
3889
|
});
|
|
@@ -3905,6 +3960,7 @@ class EditSection {
|
|
|
3905
3960
|
}
|
|
3906
3961
|
|
|
3907
3962
|
edit() {
|
|
3963
|
+
this.builder.hideTools();
|
|
3908
3964
|
this.builder.sidebar.closeSidebar();
|
|
3909
3965
|
const activeSection = this.builder.activeSection;
|
|
3910
3966
|
const modalEditSection = this.modalEditSection; // const elms = this.builder.doc.querySelectorAll('.section-active');
|
|
@@ -3915,6 +3971,7 @@ class EditSection {
|
|
|
3915
3971
|
dom$k.addClass(activeSection, 'section-active');
|
|
3916
3972
|
this.builder.showModal(modalEditSection, false, () => {
|
|
3917
3973
|
dom$k.removeClass(activeSection, 'section-active');
|
|
3974
|
+
this.builder.showTools();
|
|
3918
3975
|
});
|
|
3919
3976
|
modalEditSection.focus(); // Clean old unused is-bg-light/dark
|
|
3920
3977
|
|
|
@@ -4027,16 +4084,48 @@ class EditSection {
|
|
|
4027
4084
|
}
|
|
4028
4085
|
|
|
4029
4086
|
btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
|
|
4030
|
-
const
|
|
4087
|
+
const divSectionSpaceSettings = this.modalEditSection.querySelector('.div-section-spacesettings');
|
|
4031
4088
|
btns.forEach(btn => {
|
|
4032
4089
|
dom$k.removeClass(btn, 'on');
|
|
4033
4090
|
});
|
|
4034
4091
|
|
|
4035
4092
|
if (dom$k.hasClass(activeSection, 'box-space')) {
|
|
4036
|
-
if (dom$k.hasClass(activeSection, 'box-space-sm')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-m')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-lg')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
|
|
4037
|
-
|
|
4093
|
+
if (dom$k.hasClass(activeSection, 'box-space-sm')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-xxs')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="xxs"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-m')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-lg')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
|
|
4094
|
+
divSectionSpaceSettings.style.display = 'flex';
|
|
4095
|
+
} else {
|
|
4096
|
+
divSectionSpaceSettings.style.display = 'none';
|
|
4097
|
+
}
|
|
4098
|
+
|
|
4099
|
+
const divMultiBoxes = this.modalEditSection.querySelector('.div-multi-boxes');
|
|
4100
|
+
|
|
4101
|
+
if (dom$k.hasClass(activeSection, 'is-box')) {
|
|
4102
|
+
divMultiBoxes.style.display = 'none';
|
|
4103
|
+
} else {
|
|
4104
|
+
divMultiBoxes.style.display = 'block';
|
|
4105
|
+
}
|
|
4106
|
+
|
|
4107
|
+
btns = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
|
|
4108
|
+
btns.forEach(btn => {
|
|
4109
|
+
dom$k.removeClass(btn, 'on');
|
|
4110
|
+
});
|
|
4111
|
+
|
|
4112
|
+
if (dom$k.hasClass(activeSection, 'space-around')) {
|
|
4113
|
+
dom$k.addClass(modalEditSection.querySelector('.cmd-betweenbox-spacing[data-value="no-space"]'), 'on');
|
|
4038
4114
|
} else {
|
|
4039
|
-
|
|
4115
|
+
dom$k.addClass(modalEditSection.querySelector('.cmd-betweenbox-spacing[data-value="space"]'), 'on');
|
|
4116
|
+
}
|
|
4117
|
+
|
|
4118
|
+
btns = modalEditSection.querySelectorAll('.cmd-section-stack');
|
|
4119
|
+
btns.forEach(btn => {
|
|
4120
|
+
dom$k.removeClass(btn, 'on');
|
|
4121
|
+
});
|
|
4122
|
+
|
|
4123
|
+
if (dom$k.hasClass(activeSection, 'stack-top')) {
|
|
4124
|
+
dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="top"]'), 'on');
|
|
4125
|
+
} else if (dom$k.hasClass(activeSection, 'stack-middle')) {
|
|
4126
|
+
dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="middle"]'), 'on');
|
|
4127
|
+
} else if (dom$k.hasClass(activeSection, 'stack-bottom')) {
|
|
4128
|
+
dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="bottom"]'), 'on');
|
|
4040
4129
|
}
|
|
4041
4130
|
|
|
4042
4131
|
btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
|
|
@@ -4290,36 +4379,48 @@ class EditSection {
|
|
|
4290
4379
|
|
|
4291
4380
|
boxSpacing(s) {
|
|
4292
4381
|
const activeSection = this.builder.activeSection;
|
|
4293
|
-
const
|
|
4382
|
+
const divSectionSpaceSettings = this.modalEditSection.querySelector('.div-section-spacesettings');
|
|
4294
4383
|
|
|
4295
4384
|
if (s == '') {
|
|
4296
4385
|
dom$k.removeClass(activeSection, 'box-space');
|
|
4386
|
+
dom$k.removeClass(activeSection, 'box-space-xxs');
|
|
4297
4387
|
dom$k.removeClass(activeSection, 'box-space-sm');
|
|
4298
4388
|
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4299
4389
|
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4300
|
-
|
|
4390
|
+
divSectionSpaceSettings.style.display = 'none';
|
|
4301
4391
|
} else {
|
|
4302
4392
|
dom$k.addClass(activeSection, 'box-space');
|
|
4303
|
-
|
|
4393
|
+
divSectionSpaceSettings.style.display = 'flex';
|
|
4304
4394
|
}
|
|
4305
4395
|
|
|
4306
4396
|
if (s === 'sm') {
|
|
4397
|
+
dom$k.removeClass(activeSection, 'box-space-xxs');
|
|
4307
4398
|
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4308
4399
|
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4309
4400
|
dom$k.addClass(activeSection, 'box-space-sm');
|
|
4401
|
+
} else if (s == 'xxs') {
|
|
4402
|
+
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4403
|
+
dom$k.removeClass(activeSection, 'box-space-sm');
|
|
4404
|
+
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4405
|
+
dom$k.addClass(activeSection, 'box-space-xxs');
|
|
4310
4406
|
} else if (s == 'm') {
|
|
4407
|
+
dom$k.removeClass(activeSection, 'box-space-xxs');
|
|
4311
4408
|
dom$k.removeClass(activeSection, 'box-space-sm');
|
|
4312
4409
|
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4313
4410
|
dom$k.addClass(activeSection, 'box-space-m');
|
|
4314
4411
|
} else if (s == 'lg') {
|
|
4412
|
+
dom$k.removeClass(activeSection, 'box-space-xxs');
|
|
4315
4413
|
dom$k.removeClass(activeSection, 'box-space-sm');
|
|
4316
4414
|
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4317
4415
|
dom$k.addClass(activeSection, 'box-space-lg');
|
|
4318
4416
|
} else if (s == 'default') {
|
|
4417
|
+
dom$k.removeClass(activeSection, 'box-space-xxs');
|
|
4319
4418
|
dom$k.removeClass(activeSection, 'box-space-sm');
|
|
4320
4419
|
dom$k.removeClass(activeSection, 'box-space-m');
|
|
4321
4420
|
dom$k.removeClass(activeSection, 'box-space-lg');
|
|
4322
4421
|
}
|
|
4422
|
+
|
|
4423
|
+
this.builder.sectionStack();
|
|
4323
4424
|
}
|
|
4324
4425
|
|
|
4325
4426
|
sectionUseScroll() {
|
|
@@ -9931,18 +10032,24 @@ class EditBox {
|
|
|
9931
10032
|
// '<button id="btnEditModule" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' +
|
|
9932
10033
|
// '</div>';
|
|
9933
10034
|
|
|
10035
|
+
html += `
|
|
10036
|
+
<form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
|
|
10037
|
+
<input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
10038
|
+
<input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
|
|
10039
|
+
</form>
|
|
10040
|
+
`;
|
|
9934
10041
|
html += '<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>';
|
|
9935
|
-
html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
10042
|
+
html += '<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
|
|
9936
10043
|
html += '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ': <span class="val-box-size" style="font-size:12px"></span></div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button>' + '<button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button>' + '<button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button>' + '<button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button>' + '<button title="' + out('Clear') + '" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
9937
|
-
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
|
|
9938
|
-
html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="
|
|
10044
|
+
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Clear') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
|
|
10045
|
+
html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
9939
10046
|
html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textcolor" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>';
|
|
9940
10047
|
html += '<div id="divContainerTransparency" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:27px;">' + out('Default Text Formatting') + ':</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">' + out('Alignment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textalign" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div id="divContainerParagraphSize" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div>' + '<div style="display:flex">' + '<button title="' + out('16') + '" class="cmd-box-parasize" data-value="16" style="width:40px">16</button>' + '<button title="' + out('17') + '" class="cmd-box-parasize" data-value="17" style="width:40px">17</button>' + '<button title="' + out('18') + '" class="cmd-box-parasize" data-value="18" style="width:40px">18</button>' + '<button title="' + out('19') + '" class="cmd-box-parasize" data-value="19" style="width:40px">19</button>' + '<button title="' + out('20') + '" class="cmd-box-parasize" data-value="20" style="width:40px">20</button>' + '<button title="' + out('21') + '" class="cmd-box-parasize" data-value="21" style="width:40px">21</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-parasize" data-value="" style="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Auto adjust text size on large screen.') + '</label>' + '</div>' + '<div id="divContainerLineHeight" style="display:flex;flex-direction: column;">' + '<div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div>' + '<div style="display:flex;flex-flow: wrap;width: 290px;">' + '<button title="' + out('1') + '" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button>' + '<button title="' + out('1.1') + '" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button>' + '<button title="' + out('1.2') + '" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button>' + '<button title="' + out('1.3') + '" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button>' + '<button title="' + out('1.4') + '" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button>' + '<button title="' + out('1.5') + '" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button>' + '<button title="' + out('1.6') + '" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button>' + '<button title="' + out('1.7') + '" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button>' + '<button title="' + out('1.8') + '" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button>' + '<button title="' + out('1.9') + '" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button>' + '<button title="' + out('2') + '" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-lineheight" data-value="" style="">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>';
|
|
9941
10048
|
html += (this.builder.settings.enableContentStyle ? '<div style="padding-top:10px;display:flex;flex-direction: column;">' + // '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
|
|
9942
10049
|
'<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
|
|
9943
10050
|
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">↖</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">↑</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">↗</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">←</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">☉</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">→</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">↙</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">↓</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">↘</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
|
|
9944
10051
|
html += '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:13px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '</div>';
|
|
9945
|
-
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>';
|
|
10052
|
+
html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> ' + out('Zoom on Hover') + '</label>' + '</div>';
|
|
9946
10053
|
html += '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>';
|
|
9947
10054
|
html += '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
9948
10055
|
dom$j.appendHtml(builderStuff, html); // Box Tool
|
|
@@ -9998,6 +10105,67 @@ class EditBox {
|
|
|
9998
10105
|
this.modalEditBox = modalEditBox;
|
|
9999
10106
|
const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
|
|
10000
10107
|
const modalEditModule = builderStuff.querySelector('.is-modal.editmodule');
|
|
10108
|
+
const divBoxClick = modalEditBox.querySelector('#divBoxClick');
|
|
10109
|
+
this.divBoxClick = divBoxClick;
|
|
10110
|
+
const divBoxGeneral = modalEditBox.querySelector('#divBoxGeneral');
|
|
10111
|
+
this.divBoxGeneral = divBoxGeneral; // ------ Box Cover Upload -------
|
|
10112
|
+
|
|
10113
|
+
let fileCover = builderStuff.querySelector('.input-file-cover-central');
|
|
10114
|
+
|
|
10115
|
+
if (this.builder.iframe) {
|
|
10116
|
+
fileCover = this.builder.contentStuff.querySelector('.input-file-cover-central');
|
|
10117
|
+
}
|
|
10118
|
+
|
|
10119
|
+
if (fileCover) fileCover.addEventListener('click', () => {
|
|
10120
|
+
this.targetBox = this.builder.activeBox;
|
|
10121
|
+
});
|
|
10122
|
+
if (fileCover) fileCover.addEventListener('change', e => {
|
|
10123
|
+
if (fileCover.value === '') return;
|
|
10124
|
+
this.builder.editor.saveForUndo(); // Show Waiting Indicator
|
|
10125
|
+
|
|
10126
|
+
const builderStuff = this.builderStuff;
|
|
10127
|
+
dom$j.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
10128
|
+
<div class="waiting-indicator">
|
|
10129
|
+
<div>${out('Uploading..')}</div>
|
|
10130
|
+
</div>
|
|
10131
|
+
`);
|
|
10132
|
+
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
10133
|
+
let targetBox = this.targetBox;
|
|
10134
|
+
let top, left;
|
|
10135
|
+
|
|
10136
|
+
if (!this.builder.iframe) {
|
|
10137
|
+
top = targetBox.getBoundingClientRect().top + window.pageYOffset;
|
|
10138
|
+
left = targetBox.getBoundingClientRect().left + window.pageXOffset;
|
|
10139
|
+
indicator.style.top = top + 'px';
|
|
10140
|
+
indicator.style.left = left + 'px';
|
|
10141
|
+
} else {
|
|
10142
|
+
// let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
10143
|
+
// let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
10144
|
+
// top = targetBox.getBoundingClientRect().top + adjY;
|
|
10145
|
+
// left = targetBox.getBoundingClientRect().left + adjX;
|
|
10146
|
+
// indicator.style.top = top + 'px';
|
|
10147
|
+
// indicator.style.left = left + 'px';
|
|
10148
|
+
indicator.style.top = '0';
|
|
10149
|
+
indicator.style.left = 'calc(50% - 68px)';
|
|
10150
|
+
} // builderStuff.querySelector('.input-custom-value-central').value = this.builder.settings.customval;
|
|
10151
|
+
|
|
10152
|
+
|
|
10153
|
+
if (this.builder.settings.onUploadCoverImage) {
|
|
10154
|
+
this.builder.settings.onUploadCoverImage(e);
|
|
10155
|
+
} else {
|
|
10156
|
+
if (!this.builder.iframe) {
|
|
10157
|
+
builderStuff.querySelector('.is-cover-upload-central').submit();
|
|
10158
|
+
} else {
|
|
10159
|
+
this.builder.contentStuff.querySelector('.is-cover-upload-central').submit();
|
|
10160
|
+
}
|
|
10161
|
+
}
|
|
10162
|
+
|
|
10163
|
+
fileCover.value = ''; // Clear Input
|
|
10164
|
+
|
|
10165
|
+
e.preventDefault();
|
|
10166
|
+
e.stopImmediatePropagation();
|
|
10167
|
+
}); // /------ Box Cover Upload -------
|
|
10168
|
+
|
|
10001
10169
|
new Tabs$1(modalEditBox); // Backward compatibility
|
|
10002
10170
|
|
|
10003
10171
|
let s = '<div class="feature-master-style"></div>';
|
|
@@ -10045,6 +10213,44 @@ class EditBox {
|
|
|
10045
10213
|
|
|
10046
10214
|
this.builder.settings.onChange();
|
|
10047
10215
|
});
|
|
10216
|
+
const btnBoxLeft = modalEditBox.querySelector('.cmd-box-left');
|
|
10217
|
+
btnBoxLeft.addEventListener('click', () => {
|
|
10218
|
+
this.builder.editor.saveForUndo();
|
|
10219
|
+
let activeBox = this.builder.activeBox;
|
|
10220
|
+
let currPrev = activeBox.previousElementSibling;
|
|
10221
|
+
|
|
10222
|
+
if (currPrev) {
|
|
10223
|
+
while (!dom$j.hasClass(currPrev, 'is-box')) {
|
|
10224
|
+
if (!currPrev.previousElementSibling) break;
|
|
10225
|
+
currPrev = currPrev.previousElementSibling;
|
|
10226
|
+
}
|
|
10227
|
+
}
|
|
10228
|
+
|
|
10229
|
+
if (currPrev) {
|
|
10230
|
+
activeBox.parentNode.insertBefore(activeBox, currPrev); //Trigger Change event
|
|
10231
|
+
|
|
10232
|
+
this.builder.settings.onChange();
|
|
10233
|
+
}
|
|
10234
|
+
});
|
|
10235
|
+
const btnBoxRight = modalEditBox.querySelector('.cmd-box-right');
|
|
10236
|
+
btnBoxRight.addEventListener('click', () => {
|
|
10237
|
+
this.builder.editor.saveForUndo();
|
|
10238
|
+
let activeBox = this.builder.activeBox;
|
|
10239
|
+
let currNext = activeBox.nextElementSibling;
|
|
10240
|
+
|
|
10241
|
+
if (currNext) {
|
|
10242
|
+
while (!dom$j.hasClass(currNext, 'is-box')) {
|
|
10243
|
+
if (!currNext.nextElementSibling) break;
|
|
10244
|
+
currNext = currNext.previousElementSibling;
|
|
10245
|
+
}
|
|
10246
|
+
}
|
|
10247
|
+
|
|
10248
|
+
if (currNext) {
|
|
10249
|
+
activeBox.parentNode.insertBefore(currNext, activeBox); //Trigger Change event
|
|
10250
|
+
|
|
10251
|
+
this.builder.settings.onChange();
|
|
10252
|
+
}
|
|
10253
|
+
});
|
|
10048
10254
|
const btnBoxTextColors = modalEditBox.querySelectorAll('.cmd-box-textcolor');
|
|
10049
10255
|
btnBoxTextColors.forEach(btnBoxTextColor => {
|
|
10050
10256
|
btnBoxTextColor.addEventListener('click', () => {
|
|
@@ -10907,6 +11113,20 @@ class EditBox {
|
|
|
10907
11113
|
this.builder.editor.saveForUndo();
|
|
10908
11114
|
this.boxParallaxBg2(); //Trigger Change event
|
|
10909
11115
|
|
|
11116
|
+
this.builder.settings.onChange();
|
|
11117
|
+
});
|
|
11118
|
+
const chkZoomOnHover = modalEditBox.querySelector('#chkZoomOnHover');
|
|
11119
|
+
chkZoomOnHover.addEventListener('click', () => {
|
|
11120
|
+
this.builder.editor.saveForUndo();
|
|
11121
|
+
let activeBox = this.builder.activeBox;
|
|
11122
|
+
|
|
11123
|
+
if (chkZoomOnHover.checked) {
|
|
11124
|
+
activeBox.classList.add('hover-zoom');
|
|
11125
|
+
} else {
|
|
11126
|
+
activeBox.classList.remove('hover-zoom');
|
|
11127
|
+
} //Trigger Change event
|
|
11128
|
+
|
|
11129
|
+
|
|
10910
11130
|
this.builder.settings.onChange();
|
|
10911
11131
|
});
|
|
10912
11132
|
const btnBoxOverlayOpacity = modalEditBox.querySelectorAll('.cmd-box-overlayopacity');
|
|
@@ -11313,7 +11533,11 @@ class EditBox {
|
|
|
11313
11533
|
}
|
|
11314
11534
|
|
|
11315
11535
|
if (!onImageSelectClick && imageselect === '') {
|
|
11316
|
-
|
|
11536
|
+
this.divBoxClick.querySelector('.input-select').style.display = 'none';
|
|
11537
|
+
}
|
|
11538
|
+
|
|
11539
|
+
if (!onImageSelectClick && imageselect === '') {
|
|
11540
|
+
this.divBoxGeneral.querySelector('.input-select').style.display = 'none';
|
|
11317
11541
|
} // Select image (opens Asset Manager plugin or custom dialog)
|
|
11318
11542
|
|
|
11319
11543
|
|
|
@@ -11337,12 +11561,37 @@ class EditBox {
|
|
|
11337
11561
|
}
|
|
11338
11562
|
|
|
11339
11563
|
if (onImageSelectClick || imageselect || onFileSelectClick || fileselect) {
|
|
11340
|
-
const elm =
|
|
11564
|
+
const elm = this.divBoxClick.querySelector('.input-select');
|
|
11341
11565
|
if (elm) elm.addEventListener('click', () => {
|
|
11342
11566
|
this.builder.editor.openAsset(modalEditBox.querySelector('.input-src'), 'media', elm);
|
|
11343
11567
|
});
|
|
11344
11568
|
}
|
|
11345
11569
|
|
|
11570
|
+
if (onImageSelectClick || imageselect) {
|
|
11571
|
+
const btnSelectBoxBgImage = this.divBoxGeneral.querySelector('.input-select');
|
|
11572
|
+
this.builder.editor.renderSelectAsset(btnSelectBoxBgImage, 'image', url => {
|
|
11573
|
+
this.boxImage(url);
|
|
11574
|
+
const activeBox = this.builder.activeBox;
|
|
11575
|
+
const overlay = activeBox.querySelector('.is-overlay');
|
|
11576
|
+
const overlayBg = activeBox.querySelector('.is-overlay-bg'); // Reset position & filter (grayscale)
|
|
11577
|
+
|
|
11578
|
+
overlayBg.style.filter = '';
|
|
11579
|
+
overlay.style.filter = '';
|
|
11580
|
+
const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
|
|
11581
|
+
chkBoxBgImageGrayscale.checked = false;
|
|
11582
|
+
overlayBg.style.backgroundPosition = '50% 60%';
|
|
11583
|
+
overlayBg.removeAttribute('data-scale');
|
|
11584
|
+
overlayBg.removeAttribute('data-x');
|
|
11585
|
+
overlayBg.removeAttribute('data-y');
|
|
11586
|
+
overlayBg.style.top = '';
|
|
11587
|
+
overlayBg.style.bottom = '';
|
|
11588
|
+
overlayBg.style.left = '';
|
|
11589
|
+
overlayBg.style.right = '';
|
|
11590
|
+
overlayBg.style.width = '';
|
|
11591
|
+
overlayBg.style.height = ''; // /Reset
|
|
11592
|
+
});
|
|
11593
|
+
}
|
|
11594
|
+
|
|
11346
11595
|
let fileLargerImage = modalEditBox.querySelector('#fileImage5');
|
|
11347
11596
|
fileLargerImage.addEventListener('change', e => {
|
|
11348
11597
|
let element = fileLargerImage;
|
|
@@ -11442,6 +11691,7 @@ class EditBox {
|
|
|
11442
11691
|
}
|
|
11443
11692
|
|
|
11444
11693
|
edit() {
|
|
11694
|
+
this.builder.hideTools();
|
|
11445
11695
|
this.targetBox = null;
|
|
11446
11696
|
this.builder.sidebar.closeSidebar();
|
|
11447
11697
|
const builderStuff = this.builderStuff;
|
|
@@ -11589,12 +11839,20 @@ class EditBox {
|
|
|
11589
11839
|
} else {
|
|
11590
11840
|
modalEditBox.querySelector('#chkParallaxBg2').checked = false;
|
|
11591
11841
|
}
|
|
11842
|
+
|
|
11843
|
+
if (activeBox.classList.contains('hover-zoom')) {
|
|
11844
|
+
modalEditBox.querySelector('#chkZoomOnHover').checked = true;
|
|
11845
|
+
} else {
|
|
11846
|
+
modalEditBox.querySelector('#chkZoomOnHover').checked = false;
|
|
11847
|
+
}
|
|
11592
11848
|
}
|
|
11593
11849
|
|
|
11594
11850
|
if (dom$j.hasClass(activeBox, 'is-section')) {
|
|
11595
11851
|
modalEditBox.querySelector('#divBoxSize').style.display = 'none';
|
|
11852
|
+
modalEditBox.querySelector('#divBoxMove').style.display = 'none';
|
|
11596
11853
|
} else {
|
|
11597
11854
|
modalEditBox.querySelector('#divBoxSize').style.display = 'block';
|
|
11855
|
+
modalEditBox.querySelector('#divBoxMove').style.display = 'block';
|
|
11598
11856
|
}
|
|
11599
11857
|
|
|
11600
11858
|
modalEditBox.querySelector('#chkParallaxContent').checked = false;
|
|
@@ -11735,6 +11993,7 @@ class EditBox {
|
|
|
11735
11993
|
dom$j.addClass(activeBox, 'box-active');
|
|
11736
11994
|
this.builder.showModal(modalEditBox, false, () => {
|
|
11737
11995
|
dom$j.removeClass(activeBox, 'box-active');
|
|
11996
|
+
this.builder.showTools();
|
|
11738
11997
|
});
|
|
11739
11998
|
modalEditBox.focus();
|
|
11740
11999
|
|
|
@@ -11966,8 +12225,6 @@ class EditBox {
|
|
|
11966
12225
|
|
|
11967
12226
|
if (dom$j.hasClass(activeSection, 'noedit')) {
|
|
11968
12227
|
chkBoxAddText.style.display = 'none';
|
|
11969
|
-
} else {
|
|
11970
|
-
chkBoxAddText.style.display = 'flex';
|
|
11971
12228
|
} // Content Height & Justify
|
|
11972
12229
|
|
|
11973
12230
|
|
|
@@ -12078,7 +12335,7 @@ class EditBox {
|
|
|
12078
12335
|
doc.open();
|
|
12079
12336
|
doc.write(result);
|
|
12080
12337
|
doc.close();
|
|
12081
|
-
this.builder.showModal(modalEditModule);
|
|
12338
|
+
this.builder.showModal(modalEditModule, true);
|
|
12082
12339
|
setTimeout(() => {
|
|
12083
12340
|
iframe.style.opacity = 1;
|
|
12084
12341
|
}, 200);
|
|
@@ -12086,9 +12343,9 @@ class EditBox {
|
|
|
12086
12343
|
const modalBar = modalEditModule.querySelector('.is-modal-bar');
|
|
12087
12344
|
|
|
12088
12345
|
if (moduleDesc) {
|
|
12089
|
-
modalBar.innerHTML = moduleDesc;
|
|
12346
|
+
modalBar.querySelector('span').innerHTML = out(moduleDesc);
|
|
12090
12347
|
} else {
|
|
12091
|
-
modalBar.innerHTML = out('Module Settings');
|
|
12348
|
+
modalBar.querySelector('span').innerHTML = out('Module Settings');
|
|
12092
12349
|
}
|
|
12093
12350
|
|
|
12094
12351
|
let w = activeModule.getAttribute('data-dialog-width');
|
|
@@ -12105,6 +12362,12 @@ class EditBox {
|
|
|
12105
12362
|
|
|
12106
12363
|
modalEditModule.childNodes.forEach(div => {
|
|
12107
12364
|
if (!dom$j.hasClass(div, 'is-modal-overlay')) {
|
|
12365
|
+
if (moduleName === 'slider-box') {
|
|
12366
|
+
div.style.width = '1600px';
|
|
12367
|
+
w = '90vw';
|
|
12368
|
+
h = '80vh';
|
|
12369
|
+
}
|
|
12370
|
+
|
|
12108
12371
|
div.style.maxWidth = w;
|
|
12109
12372
|
div.style.height = h;
|
|
12110
12373
|
}
|
|
@@ -12495,6 +12758,7 @@ class EditBox {
|
|
|
12495
12758
|
overlayBg.removeAttribute('data-top-bottom');
|
|
12496
12759
|
overlayBg.style.transform = 'translateY(0) scale(1)';
|
|
12497
12760
|
overlayBg.style.transform = '';
|
|
12761
|
+
overlayBg.style.transition = '';
|
|
12498
12762
|
let s = overlayBg.outerHTML;
|
|
12499
12763
|
overlayBg.parentNode.removeChild(overlayBg);
|
|
12500
12764
|
dom$j.appendHtml(overlay, s);
|
|
@@ -18543,7 +18807,9 @@ class Util {
|
|
|
18543
18807
|
|
|
18544
18808
|
repositionColumnTool(transition) {
|
|
18545
18809
|
let columnTool = this.builder.colTool.columnTool;
|
|
18810
|
+
if (!columnTool) return;
|
|
18546
18811
|
let col = this.builder.activeCol;
|
|
18812
|
+
if (!col) return;
|
|
18547
18813
|
|
|
18548
18814
|
if (transition) {
|
|
18549
18815
|
columnTool.style.transition = 'all 100ms ease';
|
|
@@ -28581,7 +28847,7 @@ class Snippets {
|
|
|
28581
28847
|
z-index:10;width:30px;height:30px;position:absolute;
|
|
28582
28848
|
top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;
|
|
28583
28849
|
}
|
|
28584
|
-
.is-pop-close:focus {
|
|
28850
|
+
.is-pop-close:focus-visible {
|
|
28585
28851
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28586
28852
|
}
|
|
28587
28853
|
|
|
@@ -28722,7 +28988,7 @@ class Snippets {
|
|
|
28722
28988
|
border-radius: 2px;
|
|
28723
28989
|
}
|
|
28724
28990
|
|
|
28725
|
-
.is-design-list>li:focus {
|
|
28991
|
+
.is-design-list>li:focus-visible {
|
|
28726
28992
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28727
28993
|
}
|
|
28728
28994
|
|
|
@@ -28821,7 +29087,7 @@ class Snippets {
|
|
|
28821
29087
|
cursor: default;
|
|
28822
29088
|
}
|
|
28823
29089
|
|
|
28824
|
-
.is-category-list a:focus {
|
|
29090
|
+
.is-category-list a:focus-visible {
|
|
28825
29091
|
outline: ${this.builder.styleOutlineColor} 2px solid;
|
|
28826
29092
|
}
|
|
28827
29093
|
|
|
@@ -62102,6 +62368,7 @@ class Image$1 {
|
|
|
62102
62368
|
<button title="3x4" data-crop-size="0.75" style="width: 45px;height: 60px;">3x4</button>
|
|
62103
62369
|
<button title="6x4" data-crop-size="1.5" style="width: 60px;height: 40px;">6x4</button>
|
|
62104
62370
|
<button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
|
|
62371
|
+
<button title="16x9" data-crop-size="1.77" style="width: 60px;height: 35px;">16x9</button>
|
|
62105
62372
|
<button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
|
|
62106
62373
|
</div>
|
|
62107
62374
|
<div class="imageedit-preview" style="max-width:1000px;width:100%;max-height:550px;">
|
|
@@ -62124,10 +62391,10 @@ class Image$1 {
|
|
|
62124
62391
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
62125
62392
|
<input id="hidRefId1" name="hidRefId" type="hidden" value="" />
|
|
62126
62393
|
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
62127
|
-
<input title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62394
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage1" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62128
62395
|
</form>
|
|
62129
62396
|
|
|
62130
|
-
<iframe
|
|
62397
|
+
<iframe id="frameTargetImageUpload" name="frameTargetImageUpload" tabindex="-1" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
62131
62398
|
</div>
|
|
62132
62399
|
</div>
|
|
62133
62400
|
|
|
@@ -62142,7 +62409,7 @@ class Image$1 {
|
|
|
62142
62409
|
<form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
|
|
62143
62410
|
<input id="hidRefId2" name="hidRefId" type="hidden" value="" />
|
|
62144
62411
|
<svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
62145
|
-
<input title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62412
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage2" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
62146
62413
|
</form>
|
|
62147
62414
|
</div>
|
|
62148
62415
|
</div>
|
|
@@ -63417,7 +63684,7 @@ class ButtonEditor {
|
|
|
63417
63684
|
${util.out('Button')}
|
|
63418
63685
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
|
63419
63686
|
</div>
|
|
63420
|
-
<div style="padding:0">
|
|
63687
|
+
<div style="padding:0;height:100%;">
|
|
63421
63688
|
<div class="is-tabs" data-group="button" style="position:relative;z-index:1">
|
|
63422
63689
|
<a title="${util.out('General')}" href="" data-content="divButtonGeneral" class="active">${util.out('General')}</a>
|
|
63423
63690
|
<a title="${util.out('Hover')}" href="" data-content="divButtonHover">${util.out('Hover')}</a>
|
|
@@ -63724,8 +63991,8 @@ class ButtonEditor {
|
|
|
63724
63991
|
let elm = e.target;
|
|
63725
63992
|
this.builder.colorPicker.open(color => {
|
|
63726
63993
|
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
63727
|
-
activeButton.style.backgroundColor = color;
|
|
63728
|
-
|
|
63994
|
+
activeButton.style.backgroundColor = color; // activeButton.setAttribute('data-bg', color);
|
|
63995
|
+
|
|
63729
63996
|
dom.removeClassesByPrefix(activeButton, 'bg-');
|
|
63730
63997
|
elm.style.backgroundColor = color; // preview
|
|
63731
63998
|
//Trigger Change event
|
|
@@ -63789,10 +64056,20 @@ class ButtonEditor {
|
|
|
63789
64056
|
let elm = e.target;
|
|
63790
64057
|
this.builder.colorPicker.open(color => {
|
|
63791
64058
|
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
63792
|
-
|
|
64059
|
+
|
|
64060
|
+
if (color === '') {
|
|
64061
|
+
activeButton.removeAttribute('data-bg');
|
|
64062
|
+
activeButton.removeAttribute('data-hover-bg');
|
|
64063
|
+
activeButton.removeAttribute('onmouseover');
|
|
64064
|
+
activeButton.removeAttribute('onmouseout');
|
|
64065
|
+
} else {
|
|
64066
|
+
activeButton.setAttribute('data-bg', activeButton.style.backgroundColor);
|
|
64067
|
+
activeButton.setAttribute('data-hover-bg', color);
|
|
64068
|
+
activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
|
|
64069
|
+
activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
|
|
64070
|
+
}
|
|
64071
|
+
|
|
63793
64072
|
dom.removeClassesByPrefix(activeButton, 'hover:bg-');
|
|
63794
|
-
activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
|
|
63795
|
-
activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
|
|
63796
64073
|
elm.style.backgroundColor = color; // preview
|
|
63797
64074
|
//Trigger Change event
|
|
63798
64075
|
|
|
@@ -64249,15 +64526,20 @@ class ButtonEditor {
|
|
|
64249
64526
|
|
|
64250
64527
|
dom.removeClass(activeButton, 'active');
|
|
64251
64528
|
dom.removeClass(activeButton, 'elm-active');
|
|
64252
|
-
|
|
64253
|
-
|
|
64254
|
-
|
|
64529
|
+
let dataBg = activeButton.getAttribute('data-bg'); // if(!dataBg) {
|
|
64530
|
+
// if(activeButton.style.backgroundColor) dataBg=activeButton.style.backgroundColor;
|
|
64531
|
+
// }
|
|
64532
|
+
|
|
64533
|
+
const dataHoverBg = activeButton.getAttribute('data-hover-bg'); // const color = activeButton.style.color;
|
|
64534
|
+
|
|
64535
|
+
const cssText = activeButton.style.cssText;
|
|
64255
64536
|
mybuttons.push({
|
|
64256
64537
|
id: mybuttons.length,
|
|
64257
64538
|
className: activeButton.className,
|
|
64258
64539
|
bg: dataBg ? dataBg : '',
|
|
64259
64540
|
hoverBg: dataHoverBg ? dataHoverBg : '',
|
|
64260
|
-
color: color
|
|
64541
|
+
// color: color?color:'',
|
|
64542
|
+
cssText: cssText
|
|
64261
64543
|
});
|
|
64262
64544
|
localStorage.setItem('_savedbuttons', JSON.stringify(mybuttons));
|
|
64263
64545
|
this.renderMyButtons();
|
|
@@ -64292,6 +64574,14 @@ class ButtonEditor {
|
|
|
64292
64574
|
this.getVisibleBgColor(item.replace('hover:', ''), color => {
|
|
64293
64575
|
btnHoverBgColor.style.backgroundColor = color;
|
|
64294
64576
|
activeButton.setAttribute('data-hover-bg', color); //new inline
|
|
64577
|
+
|
|
64578
|
+
if (!activeButton.hasAttribute('data-bg')) {
|
|
64579
|
+
// fix needed data-bg
|
|
64580
|
+
activeButton.setAttribute('data-bg', btnBgColor.style.backgroundColor); // needed by hover
|
|
64581
|
+
}
|
|
64582
|
+
|
|
64583
|
+
activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
|
|
64584
|
+
activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
|
|
64295
64585
|
});
|
|
64296
64586
|
}
|
|
64297
64587
|
|
|
@@ -64318,7 +64608,13 @@ class ButtonEditor {
|
|
|
64318
64608
|
} // NEW: inline color
|
|
64319
64609
|
|
|
64320
64610
|
|
|
64321
|
-
if (activeButton.
|
|
64611
|
+
if (activeButton.hasAttribute('data-bg')) {
|
|
64612
|
+
btnBgColor.style.backgroundColor = activeButton.getAttribute('data-bg');
|
|
64613
|
+
} else {
|
|
64614
|
+
if (activeButton.style.backgroundColor) {
|
|
64615
|
+
btnBgColor.style.backgroundColor = activeButton.style.backgroundColor;
|
|
64616
|
+
}
|
|
64617
|
+
}
|
|
64322
64618
|
|
|
64323
64619
|
if (activeButton.getAttribute('data-hover-bg')) btnHoverBgColor.style.backgroundColor = activeButton.getAttribute('data-hover-bg');
|
|
64324
64620
|
if (activeButton.style.color) btnTextColor.style.backgroundColor = activeButton.style.color;
|
|
@@ -64516,7 +64812,95 @@ class ButtonEditor {
|
|
|
64516
64812
|
}
|
|
64517
64813
|
|
|
64518
64814
|
renderTemplates() {
|
|
64519
|
-
const templates = [
|
|
64815
|
+
const templates = [
|
|
64816
|
+
/* rounded */
|
|
64817
|
+
{
|
|
64818
|
+
html: `
|
|
64819
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
|
|
64820
|
+
`
|
|
64821
|
+
}, {
|
|
64822
|
+
html: `
|
|
64823
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
64824
|
+
`
|
|
64825
|
+
}, {
|
|
64826
|
+
html: `
|
|
64827
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
64828
|
+
`
|
|
64829
|
+
}, {
|
|
64830
|
+
html: `
|
|
64831
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
64832
|
+
`
|
|
64833
|
+
}, {
|
|
64834
|
+
html: `
|
|
64835
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
64836
|
+
`
|
|
64837
|
+
}, {
|
|
64838
|
+
html: `
|
|
64839
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
64840
|
+
`
|
|
64841
|
+
},
|
|
64842
|
+
/* colors */
|
|
64843
|
+
{
|
|
64844
|
+
html: `
|
|
64845
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
64846
|
+
`
|
|
64847
|
+
}, {
|
|
64848
|
+
html: `
|
|
64849
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
64850
|
+
`
|
|
64851
|
+
}, {
|
|
64852
|
+
html: `
|
|
64853
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
64854
|
+
`
|
|
64855
|
+
}, {
|
|
64856
|
+
html: `
|
|
64857
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
64858
|
+
`
|
|
64859
|
+
},
|
|
64860
|
+
/* square */
|
|
64861
|
+
{
|
|
64862
|
+
html: `
|
|
64863
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
|
|
64864
|
+
`
|
|
64865
|
+
}, {
|
|
64866
|
+
html: `
|
|
64867
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
|
|
64868
|
+
`
|
|
64869
|
+
}, {
|
|
64870
|
+
html: `
|
|
64871
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
|
|
64872
|
+
`
|
|
64873
|
+
}, {
|
|
64874
|
+
html: `
|
|
64875
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
|
|
64876
|
+
`
|
|
64877
|
+
}, {
|
|
64878
|
+
html: `
|
|
64879
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
|
|
64880
|
+
`
|
|
64881
|
+
}, {
|
|
64882
|
+
html: `
|
|
64883
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
|
|
64884
|
+
`
|
|
64885
|
+
},
|
|
64886
|
+
/* colors */
|
|
64887
|
+
{
|
|
64888
|
+
html: `
|
|
64889
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
|
|
64890
|
+
`
|
|
64891
|
+
}, {
|
|
64892
|
+
html: `
|
|
64893
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
|
|
64894
|
+
`
|
|
64895
|
+
}, {
|
|
64896
|
+
html: `
|
|
64897
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
|
|
64898
|
+
`
|
|
64899
|
+
}, {
|
|
64900
|
+
html: `
|
|
64901
|
+
<a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
|
|
64902
|
+
`
|
|
64903
|
+
}, {
|
|
64520
64904
|
text: 'Order Now',
|
|
64521
64905
|
className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
|
|
64522
64906
|
}, {
|
|
@@ -64568,7 +64952,11 @@ class ButtonEditor {
|
|
|
64568
64952
|
let html = '';
|
|
64569
64953
|
|
|
64570
64954
|
for (let i = 0; i < templates.length; i++) {
|
|
64571
|
-
|
|
64955
|
+
if (templates[i].html) {
|
|
64956
|
+
html += templates[i].html;
|
|
64957
|
+
} else {
|
|
64958
|
+
html += `<a class="${templates[i].className}" href="#" role="button" tabindex="0">${templates[i].text}</a>`;
|
|
64959
|
+
}
|
|
64572
64960
|
}
|
|
64573
64961
|
|
|
64574
64962
|
document.querySelector('#divButtonTemplateList').innerHTML = html;
|
|
@@ -64576,10 +64964,30 @@ class ButtonEditor {
|
|
|
64576
64964
|
Array.prototype.forEach.call(btns, btn => {
|
|
64577
64965
|
btn.addEventListener('click', e => {
|
|
64578
64966
|
this.builder.uo.saveForUndo();
|
|
64579
|
-
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
64580
|
-
this.
|
|
64581
|
-
|
|
64582
|
-
|
|
64967
|
+
const activeButton = this.builder.activeButton || this.builder.activeLinkButton; // this.applyStyles(activeButton, btn);
|
|
64968
|
+
// this.cleanupOldClasses(activeButton);
|
|
64969
|
+
|
|
64970
|
+
activeButton.removeAttribute('style');
|
|
64971
|
+
activeButton.removeAttribute('onmouseover');
|
|
64972
|
+
activeButton.removeAttribute('onmouseout');
|
|
64973
|
+
activeButton.removeAttribute('data-bg');
|
|
64974
|
+
activeButton.removeAttribute('data-hover-bg');
|
|
64975
|
+
activeButton.setAttribute('class', btn.getAttribute('class'));
|
|
64976
|
+
if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
|
|
64977
|
+
if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
|
|
64978
|
+
if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
|
|
64979
|
+
|
|
64980
|
+
if (btn.hasAttribute('data-bg')) {
|
|
64981
|
+
activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
|
|
64982
|
+
activeButton.style.backgroundColor = btn.getAttribute('data-bg');
|
|
64983
|
+
}
|
|
64984
|
+
|
|
64985
|
+
if (btn.hasAttribute('data-hover-bg')) {
|
|
64986
|
+
activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
|
|
64987
|
+
}
|
|
64988
|
+
|
|
64989
|
+
activeButton.classList.remove('active');
|
|
64990
|
+
this.realtime();
|
|
64583
64991
|
e.preventDefault();
|
|
64584
64992
|
return false;
|
|
64585
64993
|
});
|
|
@@ -64593,14 +65001,26 @@ class ButtonEditor {
|
|
|
64593
65001
|
let html_mybuttons = '';
|
|
64594
65002
|
|
|
64595
65003
|
for (let i = 0; i < mybuttons.length; i++) {
|
|
64596
|
-
|
|
65004
|
+
let sDataBg = '';
|
|
65005
|
+
if (mybuttons[i].bg !== '') sDataBg = ` data-bg="${mybuttons[i].bg}"`;
|
|
65006
|
+
let sDataHoverBg = '';
|
|
65007
|
+
if (mybuttons[i].hoverBg !== '') sDataHoverBg = ` data-hover-bg="${mybuttons[i].hoverBg}"`;
|
|
65008
|
+
|
|
65009
|
+
if (sDataHoverBg !== '' && sDataBg === '') {
|
|
65010
|
+
sDataBg = ' data-bg=""';
|
|
65011
|
+
}
|
|
65012
|
+
|
|
65013
|
+
html_mybuttons += `<a data-id="${mybuttons[i].id}"${sDataBg}${sDataHoverBg} class="${mybuttons[i].className}" href="#" style="${mybuttons[i].cssText}">Button<span class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></span></a>`;
|
|
64597
65014
|
}
|
|
64598
65015
|
|
|
64599
65016
|
document.querySelector('#divMyButtonList').innerHTML = html_mybuttons;
|
|
64600
65017
|
let btns = this.buttonModal.querySelectorAll('#divMyButtonList a');
|
|
64601
65018
|
Array.prototype.forEach.call(btns, btn => {
|
|
64602
|
-
|
|
64603
|
-
|
|
65019
|
+
if (btn.getAttribute('data-hover-bg')) {
|
|
65020
|
+
btn.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
|
|
65021
|
+
btn.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
|
|
65022
|
+
}
|
|
65023
|
+
|
|
64604
65024
|
btn.addEventListener('click', e => {
|
|
64605
65025
|
this.builder.uo.saveForUndo();
|
|
64606
65026
|
const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
|
|
@@ -64608,10 +65028,31 @@ class ButtonEditor {
|
|
|
64608
65028
|
Array.prototype.forEach.call(links, link => {
|
|
64609
65029
|
dom.removeClass(link, 'active');
|
|
64610
65030
|
});
|
|
64611
|
-
dom.addClass(btn, 'active');
|
|
64612
|
-
this.
|
|
64613
|
-
|
|
65031
|
+
dom.addClass(btn, 'active'); // this.applyStyles(activeButton, btn);
|
|
65032
|
+
// this.cleanupOldClasses(activeButton);
|
|
65033
|
+
|
|
65034
|
+
activeButton.removeAttribute('style');
|
|
65035
|
+
activeButton.removeAttribute('onmouseover');
|
|
65036
|
+
activeButton.removeAttribute('onmouseout');
|
|
65037
|
+
activeButton.removeAttribute('data-bg');
|
|
65038
|
+
activeButton.removeAttribute('data-hover-bg');
|
|
65039
|
+
activeButton.setAttribute('class', btn.getAttribute('class'));
|
|
65040
|
+
if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
|
|
65041
|
+
if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
|
|
65042
|
+
if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
|
|
65043
|
+
|
|
65044
|
+
if (btn.hasAttribute('data-bg')) {
|
|
65045
|
+
activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
|
|
65046
|
+
activeButton.style.backgroundColor = btn.getAttribute('data-bg');
|
|
65047
|
+
}
|
|
65048
|
+
|
|
65049
|
+
if (btn.hasAttribute('data-hover-bg')) {
|
|
65050
|
+
activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
|
|
65051
|
+
}
|
|
65052
|
+
|
|
65053
|
+
activeButton.classList.remove('active');
|
|
64614
65054
|
this.builder.opts.onChange();
|
|
65055
|
+
this.realtime();
|
|
64615
65056
|
e.preventDefault();
|
|
64616
65057
|
return false;
|
|
64617
65058
|
});
|
|
@@ -64672,23 +65113,15 @@ class ButtonEditor {
|
|
|
64672
65113
|
}
|
|
64673
65114
|
|
|
64674
65115
|
applyDefault(link) {
|
|
64675
|
-
const dom = this.dom;
|
|
64676
|
-
dom.addClass(link, 'transition-all');
|
|
64677
|
-
if
|
|
64678
|
-
dom.addClass(link, 'cursor-pointer');
|
|
64679
|
-
|
|
64680
|
-
dom.addClass(link, '
|
|
64681
|
-
dom.addClass(link, 'leading-relaxed'); // dom.addClass(link, 'mt-2');
|
|
64682
|
-
// dom.addClass(link, 'mb-2');
|
|
64683
|
-
// link.removeAttribute('style');
|
|
64684
|
-
// link.removeAttribute('onmouseover');
|
|
64685
|
-
// link.removeAttribute('onmouseout');
|
|
64686
|
-
|
|
65116
|
+
// const dom = this.dom;
|
|
65117
|
+
// dom.addClass(link, 'transition-all');
|
|
65118
|
+
// if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
|
|
65119
|
+
// dom.addClass(link, 'cursor-pointer');
|
|
65120
|
+
// dom.addClass(link, 'border-solid');
|
|
65121
|
+
// dom.addClass(link, 'leading-relaxed');
|
|
64687
65122
|
link.removeAttribute('data-hover-bgcolor');
|
|
64688
65123
|
link.removeAttribute('data-hover-color');
|
|
64689
65124
|
link.removeAttribute('data-hover-bordercolor');
|
|
64690
|
-
link.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
|
|
64691
|
-
link.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
|
|
64692
65125
|
}
|
|
64693
65126
|
|
|
64694
65127
|
cleanupOldClasses(link) {
|
|
@@ -65711,9 +66144,13 @@ class Module {
|
|
|
65711
66144
|
var moduleDesc = module.getAttribute('data-module-desc');
|
|
65712
66145
|
|
|
65713
66146
|
if (moduleDesc) {
|
|
65714
|
-
moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}"
|
|
66147
|
+
moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
|
66148
|
+
<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
66149
|
+
</button>`;
|
|
65715
66150
|
} else {
|
|
65716
|
-
moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}"
|
|
66151
|
+
moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out('Module Settings') + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
|
66152
|
+
<svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
|
66153
|
+
</button>`;
|
|
65717
66154
|
}
|
|
65718
66155
|
|
|
65719
66156
|
var w = module.getAttribute('data-dialog-width');
|
|
@@ -65728,6 +66165,12 @@ class Module {
|
|
|
65728
66165
|
h = '570px';
|
|
65729
66166
|
}
|
|
65730
66167
|
|
|
66168
|
+
if (modulename === 'slider-builder') {
|
|
66169
|
+
moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
|
|
66170
|
+
w = '1500px';
|
|
66171
|
+
h = '80vh';
|
|
66172
|
+
}
|
|
66173
|
+
|
|
65731
66174
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
|
|
65732
66175
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
|
|
65733
66176
|
let btnClose = moduleModal.querySelector('.is-modal-close');
|
|
@@ -67004,6 +67447,12 @@ class Video {
|
|
|
67004
67447
|
let elm = e.target;
|
|
67005
67448
|
|
|
67006
67449
|
if (elm.tagName.toLowerCase() === 'video') {
|
|
67450
|
+
if (elm.closest('[data-html]')) {
|
|
67451
|
+
this.builder.activeVideo = null;
|
|
67452
|
+
this.videoTool.style.display = '';
|
|
67453
|
+
return;
|
|
67454
|
+
}
|
|
67455
|
+
|
|
67007
67456
|
this.builder.activeVideo = elm;
|
|
67008
67457
|
this.videoTool.style.display = 'flex';
|
|
67009
67458
|
let _toolwidth = this.videoTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
@@ -67011,7 +67460,8 @@ class Video {
|
|
|
67011
67460
|
let w = elm.offsetWidth * this.builder.opts.zoom;
|
|
67012
67461
|
let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
|
|
67013
67462
|
let left = elm.getBoundingClientRect().left;
|
|
67014
|
-
left = left + (w - _toolwidth); //
|
|
67463
|
+
left = left + (w - _toolwidth); // left = left + (w/2 - _toolwidth/2);
|
|
67464
|
+
//Adjust left in case an element is outside the screen
|
|
67015
67465
|
|
|
67016
67466
|
const _screenwidth = window.innerWidth;
|
|
67017
67467
|
if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
|
|
@@ -69736,6 +70186,7 @@ class ColumnTool {
|
|
|
69736
70186
|
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
|
69737
70187
|
<span>${util.out('Image')}</span>
|
|
69738
70188
|
</button>
|
|
70189
|
+
<button title="${util.out('Select')}" class="input-select"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
69739
70190
|
<button title="${util.out('Remove')}" class="input-cell-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
69740
70191
|
<button title="${util.out('Adjust')}" class="input-cell-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
69741
70192
|
</div>
|
|
@@ -69870,11 +70321,11 @@ class ColumnTool {
|
|
|
69870
70321
|
<div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
69871
70322
|
<form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
|
|
69872
70323
|
<input id="hidRefId4" name="hidRefId" type="hidden" value="">
|
|
69873
|
-
<svg class="is-icon-flex"><use xlink:href="#ion-
|
|
69874
|
-
<input title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
|
|
70324
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
70325
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage4" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:68px;opacity: 0;cursor: pointer;">
|
|
69875
70326
|
</form>
|
|
69876
70327
|
|
|
69877
|
-
<iframe tabindex="
|
|
70328
|
+
<iframe tabindex="-1" id="frameTargetLinkUpload" name="frameTargetLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
69878
70329
|
</div>
|
|
69879
70330
|
</div>
|
|
69880
70331
|
<div style="padding-top:20px">
|
|
@@ -69967,11 +70418,11 @@ class ColumnTool {
|
|
|
69967
70418
|
<div class="image-larger3 input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
69968
70419
|
<form class="form-upload-larger" target="frameTargetCellImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
|
69969
70420
|
<input id="hidRefId3" name="hidRefId" type="hidden" value="">
|
|
69970
|
-
<svg class="is-icon-flex"><use xlink:href="#ion-
|
|
69971
|
-
<input title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
70421
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
70422
|
+
<input onclick="blur()" title="${util.out('Select')}" id="fileImage3" name="fileImage" type="file" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
69972
70423
|
</form>
|
|
69973
70424
|
|
|
69974
|
-
<iframe tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
70425
|
+
<iframe tabindex="-1" tabIndex="0" id="frameTargetCellImageUpload" name="frameTargetCellImageUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
69975
70426
|
</div>
|
|
69976
70427
|
</div>
|
|
69977
70428
|
|
|
@@ -69999,6 +70450,8 @@ class ColumnTool {
|
|
|
69999
70450
|
|
|
70000
70451
|
columnMore = builderStuff.querySelector('.columnmore');
|
|
70001
70452
|
this.cellSettings = builderStuff.querySelector('.is-modal.columnsettings');
|
|
70453
|
+
this.divCellClick = builderStuff.querySelector('#divCellClick');
|
|
70454
|
+
this.divCellGeneral = builderStuff.querySelector('#divCellGeneral');
|
|
70002
70455
|
const quickadd = renderQuickAdd(builder); // Prepare for tooltip
|
|
70003
70456
|
|
|
70004
70457
|
let elms = columnTool.querySelectorAll('[title]');
|
|
@@ -70339,6 +70792,36 @@ class ColumnTool {
|
|
|
70339
70792
|
btnImageRemove.style.display = 'none';
|
|
70340
70793
|
div.innerHTML = ''; //Trigger Change event
|
|
70341
70794
|
|
|
70795
|
+
this.builder.opts.onChange();
|
|
70796
|
+
}); // Column Background Image Open Asset
|
|
70797
|
+
|
|
70798
|
+
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
70799
|
+
this.divCellGeneral.querySelector('.input-select').style.display = 'none';
|
|
70800
|
+
}
|
|
70801
|
+
|
|
70802
|
+
const btnCellBgImageOpenAsset = this.divCellGeneral.querySelector('.input-select');
|
|
70803
|
+
this.builder.renderSelectAsset(btnCellBgImageOpenAsset, 'image', url => {
|
|
70804
|
+
let cell = util.cellSelected();
|
|
70805
|
+
if (!cell) return;
|
|
70806
|
+
this.builder.uo.saveForUndo();
|
|
70807
|
+
cell.style.backgroundImage = `url("${url}")`;
|
|
70808
|
+
cell.style.backgroundSize = 'cover';
|
|
70809
|
+
cell.style.backgroundRepeat = 'no-repeat';
|
|
70810
|
+
const div = cellSettings.querySelector('.cell-bgimage-preview');
|
|
70811
|
+
const btnImageAdjust = this.cellSettings.querySelector('.input-cell-bgimageadjust');
|
|
70812
|
+
const btnImageRemove = this.cellSettings.querySelector('.input-cell-bgremove');
|
|
70813
|
+
btnImageAdjust.style.display = 'none';
|
|
70814
|
+
btnImageRemove.style.display = 'none';
|
|
70815
|
+
|
|
70816
|
+
if (url !== '') {
|
|
70817
|
+
div.innerHTML = `<img src="${url}">`;
|
|
70818
|
+
btnImageAdjust.style.display = 'flex';
|
|
70819
|
+
btnImageRemove.style.display = 'flex';
|
|
70820
|
+
} else {
|
|
70821
|
+
div.innerHTML = '';
|
|
70822
|
+
} //Trigger Change event
|
|
70823
|
+
|
|
70824
|
+
|
|
70342
70825
|
this.builder.opts.onChange();
|
|
70343
70826
|
}); // Column Background Image Select Dialog (.is-modal.imagesource)
|
|
70344
70827
|
|
|
@@ -71136,13 +71619,13 @@ class ColumnTool {
|
|
|
71136
71619
|
}
|
|
71137
71620
|
|
|
71138
71621
|
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
71139
|
-
this.
|
|
71622
|
+
this.divCellClick.querySelector('.input-select').style.display = 'none';
|
|
71140
71623
|
} // Select image (opens Asset Manager plugin or custom dialog)
|
|
71141
71624
|
|
|
71142
71625
|
|
|
71143
71626
|
if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
|
|
71144
71627
|
const inpSrc = this.cellSettings.querySelector('.input-src');
|
|
71145
|
-
elm = this.
|
|
71628
|
+
elm = this.divCellClick.querySelector('.input-select');
|
|
71146
71629
|
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
71147
71630
|
//---default
|
|
71148
71631
|
this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
|
|
@@ -72020,6 +72503,24 @@ class ColumnTool {
|
|
|
72020
72503
|
this.columnTool.querySelector('.cell-remove').style.display = '';
|
|
72021
72504
|
this.columnTool.querySelector('.cell-more').style.display = '';
|
|
72022
72505
|
}
|
|
72506
|
+
} // Column Lock will hide Add & Remove column
|
|
72507
|
+
|
|
72508
|
+
|
|
72509
|
+
if (col.classList.contains('column-lock')) {
|
|
72510
|
+
this.columnTool.querySelector('.cell-add').style.display = 'none';
|
|
72511
|
+
this.columnTool.querySelector('.cell-remove').style.display = 'none';
|
|
72512
|
+
this.columnMore.querySelector('.cell-prev').style.display = 'none';
|
|
72513
|
+
this.columnMore.querySelector('.cell-next').style.display = 'none';
|
|
72514
|
+
this.columnMore.querySelector('.cell-up').style.display = 'none';
|
|
72515
|
+
this.columnMore.querySelector('.cell-down').style.display = 'none';
|
|
72516
|
+
this.columnMore.querySelector('.cell-increase').style.display = 'none';
|
|
72517
|
+
this.columnMore.querySelector('.cell-decrease').style.display = 'none';
|
|
72518
|
+
this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
|
|
72519
|
+
this.columnMore.querySelector('.is-separator').style.display = 'none';
|
|
72520
|
+
this.columnMore.querySelector('.cell-locking').style.display = 'none';
|
|
72521
|
+
} else {
|
|
72522
|
+
this.columnMore.querySelector('.is-separator').style.display = '';
|
|
72523
|
+
this.columnMore.querySelector('.cell-locking').style.display = '';
|
|
72023
72524
|
}
|
|
72024
72525
|
}
|
|
72025
72526
|
|
|
@@ -83136,7 +83637,7 @@ class Rte {
|
|
|
83136
83637
|
|
|
83137
83638
|
if (count < 3) {
|
|
83138
83639
|
//not used
|
|
83139
|
-
|
|
83640
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83140
83641
|
|
|
83141
83642
|
if (!attr) {
|
|
83142
83643
|
links[i].setAttribute('data-rel', '_del');
|
|
@@ -83267,23 +83768,46 @@ class Rte {
|
|
|
83267
83768
|
fontname = fontname.replace(/'/g, ''); // NEW 4.0.5 (replace quotes in font family)
|
|
83268
83769
|
|
|
83269
83770
|
if (provider === 'google') {
|
|
83270
|
-
|
|
83271
|
-
|
|
83771
|
+
let bExist = false;
|
|
83772
|
+
bExist = this.checkIfFontCssLinkExists(fontfamily);
|
|
83272
83773
|
|
|
83273
|
-
|
|
83274
|
-
|
|
83275
|
-
|
|
83276
|
-
|
|
83774
|
+
if (!bExist) {
|
|
83775
|
+
let element = elm;
|
|
83776
|
+
|
|
83777
|
+
while (!dom.hasClass(element, 'is-builder')) {
|
|
83778
|
+
element = element.parentNode;
|
|
83779
|
+
}
|
|
83780
|
+
|
|
83781
|
+
let cssUrl = '';
|
|
83782
|
+
|
|
83783
|
+
if (this.builder.fontPath) {
|
|
83784
|
+
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
83785
|
+
cssUrl = this.builder.fontPath + cssFileName;
|
|
83786
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
|
|
83787
|
+
} else {
|
|
83788
|
+
dom.appendHtml(element, '<link href="//fonts.googleapis.com/css?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
|
|
83789
|
+
}
|
|
83277
83790
|
}
|
|
83791
|
+
}
|
|
83792
|
+
|
|
83793
|
+
if (provider === 'others') {
|
|
83794
|
+
let bExist = false;
|
|
83795
|
+
bExist = this.checkIfFontCssLinkExists(fontfamily);
|
|
83278
83796
|
|
|
83279
83797
|
if (!bExist) {
|
|
83280
|
-
|
|
83798
|
+
let element = elm;
|
|
83281
83799
|
|
|
83282
83800
|
while (!dom.hasClass(element, 'is-builder')) {
|
|
83283
83801
|
element = element.parentNode;
|
|
83284
83802
|
}
|
|
83285
83803
|
|
|
83286
|
-
|
|
83804
|
+
let cssUrl = '';
|
|
83805
|
+
|
|
83806
|
+
if (this.builder.fontPath) {
|
|
83807
|
+
const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
|
|
83808
|
+
cssUrl = this.builder.fontPath + cssFileName;
|
|
83809
|
+
dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
|
|
83810
|
+
}
|
|
83287
83811
|
}
|
|
83288
83812
|
}
|
|
83289
83813
|
|
|
@@ -83301,9 +83825,12 @@ class Rte {
|
|
|
83301
83825
|
} //Trigger Change event
|
|
83302
83826
|
|
|
83303
83827
|
|
|
83304
|
-
this.builder.opts.onChange(); //
|
|
83305
|
-
//Cleanup Google font css link
|
|
83828
|
+
this.builder.opts.onChange(); //Cleanup Google font css link
|
|
83306
83829
|
|
|
83830
|
+
this.cleanupFontCssLink();
|
|
83831
|
+
}
|
|
83832
|
+
|
|
83833
|
+
cleanupFontCssLink() {
|
|
83307
83834
|
const fonts = [];
|
|
83308
83835
|
|
|
83309
83836
|
if (this.builder.opts.page !== '') {
|
|
@@ -83320,54 +83847,64 @@ class Rte {
|
|
|
83320
83847
|
if (fonts.indexOf(fontFamily) === -1) fonts.push(fontFamily);
|
|
83321
83848
|
});
|
|
83322
83849
|
});
|
|
83323
|
-
}
|
|
83850
|
+
} // Cleanup
|
|
83324
83851
|
|
|
83325
|
-
links = this.builder.doc.getElementsByTagName('link');
|
|
83326
83852
|
|
|
83327
|
-
|
|
83328
|
-
|
|
83853
|
+
let links = this.builder.doc.getElementsByTagName('link');
|
|
83854
|
+
|
|
83855
|
+
for (let i = 0; i < links.length; i++) {
|
|
83856
|
+
let sSrc = links[i].href.toLowerCase();
|
|
83329
83857
|
|
|
83330
83858
|
if (sSrc.indexOf('googleapis') !== -1) {
|
|
83331
83859
|
//get fontname
|
|
83332
83860
|
sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
83333
|
-
|
|
83861
|
+
let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
|
|
83334
83862
|
|
|
83335
|
-
if (
|
|
83336
|
-
|
|
83863
|
+
if (linkFontName.indexOf(':') !== -1) {
|
|
83864
|
+
linkFontName = linkFontName.split(':')[0];
|
|
83337
83865
|
}
|
|
83338
83866
|
|
|
83339
|
-
if (
|
|
83340
|
-
|
|
83867
|
+
if (linkFontName.indexOf('|') !== -1) {
|
|
83868
|
+
linkFontName = linkFontName.split('|')[0];
|
|
83341
83869
|
}
|
|
83342
83870
|
|
|
83343
|
-
|
|
83344
|
-
//console.log(
|
|
83345
|
-
//check if fontname used in content
|
|
83346
|
-
// let tmp = this.builder.doc.body.innerHTML.toLowerCase();
|
|
83871
|
+
linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
|
|
83872
|
+
// console.log(linkFontName);
|
|
83873
|
+
// check if fontname used in content
|
|
83347
83874
|
|
|
83348
83875
|
let used = false;
|
|
83349
83876
|
fonts.forEach(item => {
|
|
83350
|
-
if (item.toLowerCase().indexOf(
|
|
83877
|
+
if (item.toLowerCase().indexOf(linkFontName.toLowerCase()) === -1) ; else {
|
|
83351
83878
|
used = true;
|
|
83352
83879
|
}
|
|
83353
83880
|
});
|
|
83354
83881
|
|
|
83355
83882
|
if (!used) {
|
|
83356
83883
|
//not used
|
|
83357
|
-
|
|
83884
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83358
83885
|
|
|
83359
83886
|
if (!attr) {
|
|
83360
83887
|
links[i].setAttribute('data-rel', '_del');
|
|
83361
83888
|
}
|
|
83362
|
-
}
|
|
83363
|
-
|
|
83364
|
-
|
|
83365
|
-
|
|
83366
|
-
|
|
83367
|
-
|
|
83368
|
-
|
|
83369
|
-
|
|
83889
|
+
}
|
|
83890
|
+
} else if (links[i].getAttribute('data-name') === 'fontfamily') {
|
|
83891
|
+
let used = false;
|
|
83892
|
+
fonts.forEach(item => {
|
|
83893
|
+
const cssFileName = item.split(',')[0].replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-').toLowerCase() + '.css';
|
|
83894
|
+
|
|
83895
|
+
if (sSrc.toLowerCase().indexOf('/' + cssFileName) === -1) ; else {
|
|
83896
|
+
used = true;
|
|
83897
|
+
}
|
|
83898
|
+
});
|
|
83370
83899
|
|
|
83900
|
+
if (!used) {
|
|
83901
|
+
//not used
|
|
83902
|
+
let attr = links[i].getAttribute('data-protect');
|
|
83903
|
+
|
|
83904
|
+
if (!attr) {
|
|
83905
|
+
links[i].setAttribute('data-rel', '_del');
|
|
83906
|
+
}
|
|
83907
|
+
}
|
|
83371
83908
|
}
|
|
83372
83909
|
}
|
|
83373
83910
|
|
|
@@ -83376,6 +83913,54 @@ class Rte {
|
|
|
83376
83913
|
});
|
|
83377
83914
|
}
|
|
83378
83915
|
|
|
83916
|
+
checkIfFontCssLinkExists(fontfamily) {
|
|
83917
|
+
let bExist = false;
|
|
83918
|
+
let fontname = fontfamily.split(',')[0];
|
|
83919
|
+
fontname = fontname.replace(/'/g, '');
|
|
83920
|
+
fontname = fontname.replace(/"/g, ''); // (replace double quotes in font family)
|
|
83921
|
+
|
|
83922
|
+
fontname = fontname.toLowerCase();
|
|
83923
|
+
let links = this.builder.doc.getElementsByTagName('link');
|
|
83924
|
+
|
|
83925
|
+
for (let i = 0; i < links.length; i++) {
|
|
83926
|
+
let sSrc = links[i].href.toLowerCase();
|
|
83927
|
+
|
|
83928
|
+
if (sSrc.indexOf('googleapis') !== -1) {
|
|
83929
|
+
if (!this.builder.fontPath) {
|
|
83930
|
+
//get fontname
|
|
83931
|
+
sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
83932
|
+
let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
|
|
83933
|
+
|
|
83934
|
+
if (linkFontName.indexOf(':') !== -1) {
|
|
83935
|
+
linkFontName = linkFontName.split(':')[0];
|
|
83936
|
+
}
|
|
83937
|
+
|
|
83938
|
+
if (linkFontName.indexOf('|') !== -1) {
|
|
83939
|
+
linkFontName = linkFontName.split('|')[0];
|
|
83940
|
+
}
|
|
83941
|
+
|
|
83942
|
+
linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
|
|
83943
|
+
//check if fontname used in content
|
|
83944
|
+
// let tmp = this.builder.doc.body.innerHTML.toLowerCase();
|
|
83945
|
+
|
|
83946
|
+
if (linkFontName === fontname.toLowerCase()) {
|
|
83947
|
+
bExist = true; // console.log(fontname.toLowerCase() + '-' +linkFontName);
|
|
83948
|
+
}
|
|
83949
|
+
}
|
|
83950
|
+
} else if (links[i].getAttribute('data-name') === 'fontfamily') {
|
|
83951
|
+
if (this.builder.fontPath) {
|
|
83952
|
+
let cssFile = fontname.replace(/\s/g, '-').toLowerCase() + '.css';
|
|
83953
|
+
|
|
83954
|
+
if (sSrc.toLowerCase().indexOf('/' + cssFile) !== -1) {
|
|
83955
|
+
bExist = true;
|
|
83956
|
+
}
|
|
83957
|
+
}
|
|
83958
|
+
}
|
|
83959
|
+
}
|
|
83960
|
+
|
|
83961
|
+
return bExist;
|
|
83962
|
+
}
|
|
83963
|
+
|
|
83379
83964
|
positionToolbar() {
|
|
83380
83965
|
const viewportWidth = document.body.clientWidth; //window.innerWidth;
|
|
83381
83966
|
|
|
@@ -86257,6 +86842,177 @@ class ContentStuff$1 {
|
|
|
86257
86842
|
|
|
86258
86843
|
}
|
|
86259
86844
|
|
|
86845
|
+
class MediaPicker {
|
|
86846
|
+
constructor(builder) {
|
|
86847
|
+
this.builder = builder;
|
|
86848
|
+
const util = this.builder.util;
|
|
86849
|
+
this.util = util;
|
|
86850
|
+
const builderStuff = this.builder.builderStuff;
|
|
86851
|
+
const dom = this.builder.dom;
|
|
86852
|
+
this.dom = dom;
|
|
86853
|
+
this.id = this.builder.util.makeId();
|
|
86854
|
+
const html = `
|
|
86855
|
+
<div class="is-modal mediasource" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
86856
|
+
<div class="is-modal-content" style="max-width:550px;">
|
|
86857
|
+
|
|
86858
|
+
<label for="inpMediaSource" style="display:block">${util.out('Source')}:</label>
|
|
86859
|
+
<div class="image-src">
|
|
86860
|
+
<input id="inpMediaSource" class="input-src" type="text">
|
|
86861
|
+
<button title="${util.out('Select')}" class="input-select" style="flex:none;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
86862
|
+
<div class="input-upload" style="position: relative; flex: 0 0 auto;box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
|
|
86863
|
+
<form class="form-upload-larger" target="frameTarget${this.id}" method="post" action="${this.builder.opts.onLargerImageUpload}" enctype="multipart/form-data" style="position:absolute;display:flex;justify-content: center;align-items: center;top:0;left:0;width:100%;height:100%;">
|
|
86864
|
+
<input name="hidRefId" class="input-ref-id" type="hidden" value="">
|
|
86865
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
|
|
86866
|
+
<input title="${util.out('Select')}" name="fileImage" class="input-file-select" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">
|
|
86867
|
+
</form>
|
|
86868
|
+
<iframe tabIndex="0" id="frameTarget${this.id}" name="frameTarget${this.id}" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
86869
|
+
</div>
|
|
86870
|
+
</div>
|
|
86871
|
+
|
|
86872
|
+
<div style="text-align:right;margin-top:20px;">
|
|
86873
|
+
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
|
86874
|
+
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
|
86875
|
+
</div>
|
|
86876
|
+
|
|
86877
|
+
</div>
|
|
86878
|
+
</div>
|
|
86879
|
+
`;
|
|
86880
|
+
dom.appendHtml(builderStuff, html);
|
|
86881
|
+
const modalMediaSelect = document.querySelector('.mediasource');
|
|
86882
|
+
this.modalMediaSelect = modalMediaSelect;
|
|
86883
|
+
|
|
86884
|
+
if (this.builder.opts.largerImageHandler === '' && !this.builder.opts.onLargerImageUpload) {
|
|
86885
|
+
modalMediaSelect.querySelector('.input-upload').style.display = 'none';
|
|
86886
|
+
}
|
|
86887
|
+
|
|
86888
|
+
if (!this.builder.opts.onImageSelectClick && this.builder.opts.imageselect === '') {
|
|
86889
|
+
modalMediaSelect.querySelector('.input-select').style.display = 'none';
|
|
86890
|
+
}
|
|
86891
|
+
|
|
86892
|
+
if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect || this.builder.opts.onFileSelectClick || this.builder.opts.fileselect) {
|
|
86893
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
86894
|
+
const elm = modalMediaSelect.querySelector('.input-select');
|
|
86895
|
+
if (elm) dom.addEventListener(elm, 'click', () => {
|
|
86896
|
+
if (this.builder.opts.onFileSelectClick) {
|
|
86897
|
+
this.builder.opts.onFileSelectClick({
|
|
86898
|
+
targetInput: inpSrc,
|
|
86899
|
+
theTrigger: elm
|
|
86900
|
+
});
|
|
86901
|
+
} else if (this.builder.opts.onImageSelectClick) {
|
|
86902
|
+
this.builder.opts.onImageSelectClick({
|
|
86903
|
+
targetInput: inpSrc,
|
|
86904
|
+
theTrigger: elm
|
|
86905
|
+
});
|
|
86906
|
+
} else if (this.builder.opts.fileselect) {
|
|
86907
|
+
let modalFileSelect = builderStuff.querySelector('.is-modal.fileselect');
|
|
86908
|
+
let iframe = modalFileSelect.querySelector('iframe');
|
|
86909
|
+
|
|
86910
|
+
if (this.builder.opts.assetRefresh) {
|
|
86911
|
+
iframe.src = this.builder.opts.fileselect;
|
|
86912
|
+
this.builder.opts.assetRefresh = false;
|
|
86913
|
+
}
|
|
86914
|
+
|
|
86915
|
+
if (iframe.src === 'about:blank') {
|
|
86916
|
+
iframe.src = this.builder.opts.fileselect;
|
|
86917
|
+
}
|
|
86918
|
+
|
|
86919
|
+
util.showModal(modalFileSelect, false, () => {
|
|
86920
|
+
elm.removeAttribute('data-focus');
|
|
86921
|
+
elm.focus();
|
|
86922
|
+
});
|
|
86923
|
+
elm.setAttribute('data-focus', true);
|
|
86924
|
+
this.builder.targetInput = inpSrc;
|
|
86925
|
+
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
86926
|
+
} else if (this.builder.opts.imageselect) {
|
|
86927
|
+
let modalImageSelect = builderStuff.querySelector('.is-modal.imageselect');
|
|
86928
|
+
let iframe = modalImageSelect.querySelector('iframe');
|
|
86929
|
+
|
|
86930
|
+
if (this.builder.opts.assetRefresh) {
|
|
86931
|
+
iframe.src = this.builder.opts.imageselect;
|
|
86932
|
+
this.builder.opts.assetRefresh = false;
|
|
86933
|
+
}
|
|
86934
|
+
|
|
86935
|
+
if (iframe.src === 'about:blank') {
|
|
86936
|
+
iframe.src = this.builder.opts.imageselect;
|
|
86937
|
+
}
|
|
86938
|
+
|
|
86939
|
+
util.showModal(modalImageSelect, false, () => {
|
|
86940
|
+
elm.removeAttribute('data-focus');
|
|
86941
|
+
elm.focus();
|
|
86942
|
+
});
|
|
86943
|
+
elm.setAttribute('data-focus', true);
|
|
86944
|
+
this.builder.targetInput = inpSrc;
|
|
86945
|
+
this.builder.targetCallback = null; // this.builder.targetAssetType = 'media';
|
|
86946
|
+
}
|
|
86947
|
+
});
|
|
86948
|
+
}
|
|
86949
|
+
|
|
86950
|
+
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
86951
|
+
dom.addEventListener(inputFileSelect, 'change', e => {
|
|
86952
|
+
let element = inputFileSelect;
|
|
86953
|
+
|
|
86954
|
+
while (element.nodeName.toLowerCase() !== 'form') {
|
|
86955
|
+
element = element.parentNode;
|
|
86956
|
+
}
|
|
86957
|
+
|
|
86958
|
+
let frmUpload = element;
|
|
86959
|
+
dom.addClass(frmUpload, 'please-wait');
|
|
86960
|
+
modalMediaSelect.querySelector('.input-ref-id').value = this.builder.opts.customval;
|
|
86961
|
+
|
|
86962
|
+
if (this.builder.opts.onLargerImageUpload) {
|
|
86963
|
+
this.builder.opts.onLargerImageUpload(e);
|
|
86964
|
+
} else {
|
|
86965
|
+
frmUpload.submit();
|
|
86966
|
+
}
|
|
86967
|
+
|
|
86968
|
+
inputFileSelect.value = ''; // Clear Input
|
|
86969
|
+
});
|
|
86970
|
+
const btnImageOk = modalMediaSelect.querySelector('.input-ok');
|
|
86971
|
+
dom.addEventListener(btnImageOk, 'click', () => {
|
|
86972
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
86973
|
+
const url = inpSrc.value;
|
|
86974
|
+
if (this.builder.mediaSelectedCallback) this.builder.mediaSelectedCallback(url);
|
|
86975
|
+
this.builder.hideModal(modalMediaSelect);
|
|
86976
|
+
});
|
|
86977
|
+
const btnImageCancel = modalMediaSelect.querySelector('.input-cancel');
|
|
86978
|
+
dom.addEventListener(btnImageCancel, 'click', () => {
|
|
86979
|
+
this.builder.hideModal(modalMediaSelect);
|
|
86980
|
+
});
|
|
86981
|
+
}
|
|
86982
|
+
|
|
86983
|
+
openMediaPicker(currentUrl, assetType, callback, btn) {
|
|
86984
|
+
this.builder.targetAssetType = assetType;
|
|
86985
|
+
const modalMediaSelect = this.modalMediaSelect;
|
|
86986
|
+
let inputFileSelect = modalMediaSelect.querySelector('.input-file-select');
|
|
86987
|
+
|
|
86988
|
+
if (assetType === 'media') {
|
|
86989
|
+
inputFileSelect.setAttribute('accept', 'image/*,video/mp4');
|
|
86990
|
+
} else if (assetType === 'video') {
|
|
86991
|
+
inputFileSelect.setAttribute('accept', 'video/mp4');
|
|
86992
|
+
} else if (assetType === 'image') {
|
|
86993
|
+
inputFileSelect.setAttribute('accept', 'image/*');
|
|
86994
|
+
} else if (assetType === 'audio') {
|
|
86995
|
+
inputFileSelect.setAttribute('accept', 'audio/mp3');
|
|
86996
|
+
} //Current value
|
|
86997
|
+
|
|
86998
|
+
|
|
86999
|
+
const inpSrc = modalMediaSelect.querySelector('.input-src');
|
|
87000
|
+
inpSrc.value = currentUrl; //mediaSelectedCallback
|
|
87001
|
+
|
|
87002
|
+
this.builder.mediaSelectedCallback = callback; //Show modal
|
|
87003
|
+
|
|
87004
|
+
modalMediaSelect.style.zIndex = '10005';
|
|
87005
|
+
this.util.showModal(modalMediaSelect, false, () => {
|
|
87006
|
+
if (btn) {
|
|
87007
|
+
btn.removeAttribute('data-focus');
|
|
87008
|
+
btn.focus();
|
|
87009
|
+
}
|
|
87010
|
+
});
|
|
87011
|
+
if (btn) btn.setAttribute('data-focus', true);
|
|
87012
|
+
}
|
|
87013
|
+
|
|
87014
|
+
}
|
|
87015
|
+
|
|
86260
87016
|
class ContentBuilder {
|
|
86261
87017
|
constructor(opts = {}) {
|
|
86262
87018
|
let defaults = {
|
|
@@ -86300,6 +87056,8 @@ class ContentBuilder {
|
|
|
86300
87056
|
assetPath: 'assets/',
|
|
86301
87057
|
// Used for the location of ionicons/ (see rte.js 2788) & scripts/ (see plugins/preview/plugin.js 237)
|
|
86302
87058
|
fontAssetPath: 'assets/fonts/',
|
|
87059
|
+
// Option for self-hosted fonts:
|
|
87060
|
+
// fontPath: 'assets/cssfonts/', // If set, will be used
|
|
86303
87061
|
snippetData: 'assets/minimalist-blocks/snippetlist.html',
|
|
86304
87062
|
// Deprecated
|
|
86305
87063
|
snippetUrl: 'assets/minimalist-blocks/content.js',
|
|
@@ -87003,7 +87761,8 @@ class ContentBuilder {
|
|
|
87003
87761
|
}
|
|
87004
87762
|
|
|
87005
87763
|
this.colTool = new ColumnTool(this); // Render Column Tool
|
|
87006
|
-
|
|
87764
|
+
|
|
87765
|
+
this.mediaPicker = new MediaPicker(this); // Extend the onChange function
|
|
87007
87766
|
|
|
87008
87767
|
var oldget = this.opts.onChange;
|
|
87009
87768
|
|
|
@@ -87897,6 +88656,10 @@ class ContentBuilder {
|
|
|
87897
88656
|
this.opts.assetRefresh = true; // After file upload, make open asset refreshed
|
|
87898
88657
|
}
|
|
87899
88658
|
|
|
88659
|
+
openMediaPicker(currentUrl, assetType = 'media', callback, btn) {
|
|
88660
|
+
this.mediaPicker.openMediaPicker(currentUrl, assetType, callback, btn);
|
|
88661
|
+
}
|
|
88662
|
+
|
|
87900
88663
|
openImagePicker(currentUrl, callback, btn) {
|
|
87901
88664
|
this.colTool.openImagePicker(currentUrl, callback, btn);
|
|
87902
88665
|
}
|
|
@@ -87982,6 +88745,65 @@ class ContentBuilder {
|
|
|
87982
88745
|
return this.targetAssetType; // not used yet
|
|
87983
88746
|
}
|
|
87984
88747
|
|
|
88748
|
+
renderSelectAsset(btn, targetAssetType, callback) {
|
|
88749
|
+
const _id = 'inp_' + this.util.makeId();
|
|
88750
|
+
|
|
88751
|
+
btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
|
|
88752
|
+
const inpUrl = btn.parentNode.querySelector(`#${_id}`);
|
|
88753
|
+
btn.addEventListener('click', () => {
|
|
88754
|
+
this.openAsset(inpUrl, targetAssetType, btn);
|
|
88755
|
+
});
|
|
88756
|
+
|
|
88757
|
+
let out = s => this.util.out(s);
|
|
88758
|
+
|
|
88759
|
+
const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
|
88760
|
+
Object.defineProperty(inpUrl, 'value', {
|
|
88761
|
+
get: desc.get,
|
|
88762
|
+
set: function (s) {
|
|
88763
|
+
// Additional protection if normal selectAsset() is not used in asset dialog.
|
|
88764
|
+
// This is used if onImageSelectClick or onFileSelectClick are used.
|
|
88765
|
+
const filename = s.substring(s.lastIndexOf('/') + 1);
|
|
88766
|
+
let extension = filename.split('.').pop();
|
|
88767
|
+
extension = extension.toLowerCase();
|
|
88768
|
+
let ok = false;
|
|
88769
|
+
|
|
88770
|
+
if (targetAssetType === 'all') {
|
|
88771
|
+
ok = true;
|
|
88772
|
+
} else if (targetAssetType === 'media') {
|
|
88773
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'mp4') {
|
|
88774
|
+
ok = true;
|
|
88775
|
+
} else {
|
|
88776
|
+
alert(out('Please select an image or video file.'));
|
|
88777
|
+
}
|
|
88778
|
+
} else if (targetAssetType === 'video') {
|
|
88779
|
+
if (extension === 'mp4') {
|
|
88780
|
+
ok = true;
|
|
88781
|
+
} else {
|
|
88782
|
+
alert(out('Please select an mp4 file.'));
|
|
88783
|
+
}
|
|
88784
|
+
} else if (targetAssetType === 'image') {
|
|
88785
|
+
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
|
|
88786
|
+
ok = true;
|
|
88787
|
+
} else {
|
|
88788
|
+
alert(out('Please select an image file.'));
|
|
88789
|
+
}
|
|
88790
|
+
} else if (targetAssetType === 'audio') {
|
|
88791
|
+
if (extension === 'mp3') {
|
|
88792
|
+
ok = true;
|
|
88793
|
+
} else {
|
|
88794
|
+
alert(out('Please select an mp3 file.'));
|
|
88795
|
+
}
|
|
88796
|
+
}
|
|
88797
|
+
|
|
88798
|
+
if (ok) {
|
|
88799
|
+
if (callback) callback(s);
|
|
88800
|
+
}
|
|
88801
|
+
|
|
88802
|
+
desc.set.call(this, s);
|
|
88803
|
+
}
|
|
88804
|
+
});
|
|
88805
|
+
}
|
|
88806
|
+
|
|
87985
88807
|
openAsset(targetInput, targetAssetType, theTrigger) {
|
|
87986
88808
|
if (targetAssetType === 'media' && (this.opts.onFileSelectClick || this.opts.onImageSelectClick)) {
|
|
87987
88809
|
if (this.opts.onFileSelectClick) {
|
|
@@ -91129,6 +91951,10 @@ class ContentStuff {
|
|
|
91129
91951
|
this.builder = builder; // const util = builder.util;
|
|
91130
91952
|
|
|
91131
91953
|
const html = `
|
|
91954
|
+
<form class="is-cover-upload-central" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
|
|
91955
|
+
<input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
|
|
91956
|
+
<input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
|
|
91957
|
+
</form>
|
|
91132
91958
|
<iframe id="target-upload-cover" name="target-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>
|
|
91133
91959
|
`;
|
|
91134
91960
|
builder.contentStuff.insertAdjacentHTML('afterbegin', html);
|
|
@@ -91422,6 +92248,8 @@ class ContentBox {
|
|
|
91422
92248
|
contentStylePath: 'assets/styles/',
|
|
91423
92249
|
pluginPath: 'contentbuilder/',
|
|
91424
92250
|
fontAssetPath: 'assets/fonts/',
|
|
92251
|
+
// Option for self-hosted fonts:
|
|
92252
|
+
// fontPath: 'assets/cssfonts/', // If set, will be used
|
|
91425
92253
|
plugins: [{
|
|
91426
92254
|
name: 'preview',
|
|
91427
92255
|
showInMainToolbar: true,
|
|
@@ -91511,7 +92339,7 @@ class ContentBox {
|
|
|
91511
92339
|
dragWithoutHandle: false,
|
|
91512
92340
|
addButtonPlacement: '',
|
|
91513
92341
|
snippetCategories: [[120, 'Basic'], [118, 'Article'], [101, 'Headline'], [119, 'Buttons'], [102, 'Photos'], [103, 'Profile'], [116, 'Contact'], [104, 'Products'], [105, 'Features'], [106, 'Process'], [107, 'Pricing'], [108, 'Skills'], [109, 'Achievements'], [110, 'Quotes'], [111, 'Partners'], [112, 'As Featured On'], [113, 'Page Not Found'], [114, 'Coming Soon'], [115, 'Help, FAQ']],
|
|
91514
|
-
defaultSnippetCategory:
|
|
92342
|
+
defaultSnippetCategory: 120,
|
|
91515
92343
|
outlineMode: '',
|
|
91516
92344
|
elementHighlight: true,
|
|
91517
92345
|
rowTool: 'right',
|
|
@@ -93950,6 +94778,7 @@ class ContentBox {
|
|
|
93950
94778
|
pluginPath: this.settings.pluginPath,
|
|
93951
94779
|
modulePath: this.settings.modulePath,
|
|
93952
94780
|
fontAssetPath: this.settings.fontAssetPath,
|
|
94781
|
+
fontPath: this.settings.fontPath,
|
|
93953
94782
|
assetPath: this.settings.assetPath,
|
|
93954
94783
|
plugins: this.settings.plugins,
|
|
93955
94784
|
disableConfig: this.settings.disableConfig,
|
|
@@ -94539,7 +95368,7 @@ class ContentBox {
|
|
|
94539
95368
|
}
|
|
94540
95369
|
|
|
94541
95370
|
sectionSetup(section) {
|
|
94542
|
-
dom.appendHtml(section, '<div class="is-section-tool">' + '<button class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">✕</button>' + '</div>'); // this.editor.setTooltip(section);
|
|
95371
|
+
dom.appendHtml(section, '<div class="is-section-tool">' + '<button type="button" class="is-section-edit" tabindex="-1" data-title="' + out('Section Settings') + '" title="' + out('Section Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-section-remove" tabindex="-1" data-title="' + out('Remove') + '" title="' + out('Remove') + '">✕</button>' + '</div>'); // this.editor.setTooltip(section);
|
|
94543
95372
|
// Prepare for tooltip
|
|
94544
95373
|
|
|
94545
95374
|
let elms = section.querySelector('.is-section-tool').querySelectorAll('[title]');
|
|
@@ -94567,7 +95396,7 @@ class ContentBox {
|
|
|
94567
95396
|
boxSetup(box) {
|
|
94568
95397
|
let tool = box.querySelector('.is-box-tool');
|
|
94569
95398
|
if (tool) tool.parentNode.removeChild(tool);
|
|
94570
|
-
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<
|
|
95399
|
+
dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>'); // this.editor.setTooltip(box);
|
|
94571
95400
|
// Prepare for tooltip
|
|
94572
95401
|
|
|
94573
95402
|
if (tool) {
|
|
@@ -94591,60 +95420,66 @@ class ContentBox {
|
|
|
94591
95420
|
if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
|
|
94592
95421
|
this.editbox.editModule();
|
|
94593
95422
|
});
|
|
94594
|
-
|
|
94595
|
-
if (
|
|
94596
|
-
|
|
94597
|
-
// Remove Waiting Indicator
|
|
94598
|
-
const builderStuff = this.builderStuff;
|
|
94599
|
-
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
94600
|
-
if(indicator) {
|
|
94601
|
-
alert('Please wait until another upload process completed.')
|
|
94602
|
-
e.preventDefault();
|
|
94603
|
-
return;
|
|
94604
|
-
}
|
|
94605
|
-
*/
|
|
94606
|
-
// prevent lost of activeBox during uploading cover (save to targetBox)
|
|
94607
|
-
this.editbox.targetBox = this.activeBox;
|
|
94608
|
-
});
|
|
94609
|
-
if (fileCover) fileCover.addEventListener('change', e => {
|
|
94610
|
-
if (fileCover.value === '') return;
|
|
94611
|
-
this.editor.saveForUndo(); // Show Waiting Indicator
|
|
94612
|
-
|
|
94613
|
-
const builderStuff = this.builderStuff;
|
|
94614
|
-
dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
94615
|
-
<div class="waiting-indicator">
|
|
94616
|
-
<div>${out('Uploading..')}</div>
|
|
94617
|
-
</div>
|
|
94618
|
-
`);
|
|
94619
|
-
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
94620
|
-
let targetBox = this.editbox.targetBox;
|
|
94621
|
-
let top, left;
|
|
95423
|
+
let btnCover = box.querySelector('.is-cover-upload');
|
|
95424
|
+
if (btnCover) btnCover.addEventListener('mouseenter', () => {
|
|
95425
|
+
let btnCoverCentral;
|
|
94622
95426
|
|
|
94623
95427
|
if (!this.iframe) {
|
|
94624
|
-
|
|
94625
|
-
left = targetBox.getBoundingClientRect().left + window.pageXOffset;
|
|
95428
|
+
btnCoverCentral = this.builderStuff.querySelector('.is-cover-upload-central');
|
|
94626
95429
|
} else {
|
|
94627
|
-
|
|
94628
|
-
let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
94629
|
-
top = targetBox.getBoundingClientRect().top + adjY;
|
|
94630
|
-
left = targetBox.getBoundingClientRect().left + adjX;
|
|
94631
|
-
}
|
|
94632
|
-
|
|
94633
|
-
indicator.style.top = top + 'px';
|
|
94634
|
-
indicator.style.left = left + 'px';
|
|
94635
|
-
box.querySelector('.input-custom-value').value = this.settings.customval;
|
|
94636
|
-
|
|
94637
|
-
if (this.settings.onUploadCoverImage) {
|
|
94638
|
-
this.settings.onUploadCoverImage(e);
|
|
94639
|
-
} else {
|
|
94640
|
-
box.querySelector('.is-cover-upload').submit();
|
|
95430
|
+
btnCoverCentral = this.contentStuff.querySelector('.is-cover-upload-central');
|
|
94641
95431
|
}
|
|
94642
95432
|
|
|
94643
|
-
|
|
94644
|
-
|
|
94645
|
-
|
|
94646
|
-
|
|
95433
|
+
let top, left;
|
|
95434
|
+
top = btnCover.getBoundingClientRect().top + this.win.pageYOffset;
|
|
95435
|
+
left = btnCover.getBoundingClientRect().left + this.win.pageXOffset;
|
|
95436
|
+
btnCoverCentral.style.top = top + 'px';
|
|
95437
|
+
btnCoverCentral.style.left = left + 'px';
|
|
95438
|
+
});
|
|
95439
|
+
/*
|
|
95440
|
+
const fileCover = box.querySelector('.input-file-cover');
|
|
95441
|
+
if(fileCover) fileCover.addEventListener('click', ()=>{
|
|
95442
|
+
// prevent lost of activeBox during uploading cover (save to targetBox)
|
|
95443
|
+
this.editbox.targetBox = this.activeBox;
|
|
95444
|
+
});
|
|
95445
|
+
if(fileCover) fileCover.addEventListener('change', (e)=>{
|
|
95446
|
+
if (fileCover.value === '') return;
|
|
95447
|
+
|
|
95448
|
+
this.editor.saveForUndo();
|
|
95449
|
+
// Show Waiting Indicator
|
|
95450
|
+
const builderStuff = this.builderStuff;
|
|
95451
|
+
dom.appendHtml(builderStuff, `<div class="waiting-indicator-overlay"></div>
|
|
95452
|
+
<div class="waiting-indicator">
|
|
95453
|
+
<div>${out('Uploading..')}</div>
|
|
95454
|
+
</div>
|
|
95455
|
+
`);
|
|
95456
|
+
const indicator = builderStuff.querySelector('.waiting-indicator');
|
|
95457
|
+
let targetBox = this.editbox.targetBox;
|
|
95458
|
+
let top, left;
|
|
95459
|
+
if(!this.iframe) {
|
|
95460
|
+
top = (targetBox.getBoundingClientRect().top + window.pageYOffset);
|
|
95461
|
+
left = (targetBox.getBoundingClientRect().left + window.pageXOffset);
|
|
95462
|
+
} else {
|
|
95463
|
+
let adjY = this.iframe.getBoundingClientRect().top + window.pageYOffset;
|
|
95464
|
+
let adjX = this.iframe.getBoundingClientRect().left + window.pageXOffset;
|
|
95465
|
+
top = targetBox.getBoundingClientRect().top + adjY;
|
|
95466
|
+
left = targetBox.getBoundingClientRect().left + adjX;
|
|
95467
|
+
}
|
|
95468
|
+
indicator.style.top = top + 'px';
|
|
95469
|
+
indicator.style.left = left + 'px';
|
|
95470
|
+
box.querySelector('.input-custom-value').value = this.settings.customval;
|
|
95471
|
+
if(this.settings.onUploadCoverImage) {
|
|
95472
|
+
this.settings.onUploadCoverImage(e);
|
|
95473
|
+
} else {
|
|
95474
|
+
box.querySelector('.is-cover-upload').submit();
|
|
95475
|
+
}
|
|
95476
|
+
|
|
95477
|
+
fileCover.value = ''; // Clear Input
|
|
95478
|
+
e.preventDefault();
|
|
95479
|
+
e.stopImmediatePropagation();
|
|
94647
95480
|
});
|
|
95481
|
+
*/
|
|
95482
|
+
|
|
94648
95483
|
box.addEventListener('mouseenter', () => {
|
|
94649
95484
|
this.positionTool(box);
|
|
94650
95485
|
let activeSection;
|
|
@@ -94685,6 +95520,47 @@ class ContentBox {
|
|
|
94685
95520
|
}
|
|
94686
95521
|
}
|
|
94687
95522
|
|
|
95523
|
+
sectionStack() {
|
|
95524
|
+
const sections = this.wrapperEl.querySelectorAll('.is-section.box-space');
|
|
95525
|
+
sections.forEach(section => {
|
|
95526
|
+
let prev = false;
|
|
95527
|
+
|
|
95528
|
+
if (section.previousElementSibling) {
|
|
95529
|
+
if (section.previousElementSibling.classList.contains('box-space')) prev = true;
|
|
95530
|
+
}
|
|
95531
|
+
|
|
95532
|
+
let next = false;
|
|
95533
|
+
|
|
95534
|
+
if (section.nextElementSibling) {
|
|
95535
|
+
if (section.nextElementSibling.classList.contains('box-space')) next = true;
|
|
95536
|
+
}
|
|
95537
|
+
|
|
95538
|
+
if (!prev && next) {
|
|
95539
|
+
section.classList.add('stack-top');
|
|
95540
|
+
section.classList.remove('stack-middle');
|
|
95541
|
+
section.classList.remove('stack-bottom');
|
|
95542
|
+
}
|
|
95543
|
+
|
|
95544
|
+
if (!prev && !next) {
|
|
95545
|
+
section.classList.remove('stack-top');
|
|
95546
|
+
section.classList.remove('stack-middle');
|
|
95547
|
+
section.classList.remove('stack-bottom');
|
|
95548
|
+
}
|
|
95549
|
+
|
|
95550
|
+
if (!next && prev) {
|
|
95551
|
+
section.classList.add('stack-bottom');
|
|
95552
|
+
section.classList.remove('stack-middle');
|
|
95553
|
+
section.classList.remove('stack-top');
|
|
95554
|
+
}
|
|
95555
|
+
|
|
95556
|
+
if (prev && next) {
|
|
95557
|
+
section.classList.remove('stack-top');
|
|
95558
|
+
section.classList.add('stack-middle');
|
|
95559
|
+
section.classList.remove('stack-bottom');
|
|
95560
|
+
}
|
|
95561
|
+
});
|
|
95562
|
+
}
|
|
95563
|
+
|
|
94688
95564
|
addIdea(newArea) {
|
|
94689
95565
|
this.editor.saveForUndo();
|
|
94690
95566
|
const designPath = this.designPath;
|
|
@@ -94826,31 +95702,42 @@ class ContentBox {
|
|
|
94826
95702
|
}
|
|
94827
95703
|
} // arrSections.push(newSection);
|
|
94828
95704
|
// Check up to 3 sections (in case a template has up to 3 sections)
|
|
95705
|
+
// let prevSection = newSection.previousElementSibling;
|
|
95706
|
+
// if(prevSection) {
|
|
95707
|
+
// let ok = prevSection.querySelector('.is-section-tool');
|
|
95708
|
+
// if(!ok) {
|
|
95709
|
+
// arrSections.push(prevSection);
|
|
95710
|
+
// }
|
|
95711
|
+
// prevSection = prevSection.previousElementSibling;
|
|
95712
|
+
// if(prevSection) {
|
|
95713
|
+
// ok = prevSection.querySelector('.is-section-tool');
|
|
95714
|
+
// if(!ok) {
|
|
95715
|
+
// arrSections.push(prevSection);
|
|
95716
|
+
// }
|
|
95717
|
+
// // more sections here
|
|
95718
|
+
// }
|
|
95719
|
+
// }
|
|
95720
|
+
// Check all sections
|
|
94829
95721
|
|
|
94830
95722
|
|
|
94831
|
-
|
|
94832
|
-
|
|
94833
|
-
|
|
94834
|
-
let ok = prevSection.querySelector('.is-section-tool');
|
|
95723
|
+
const sections = this.wrapperEl.querySelectorAll('.is-section');
|
|
95724
|
+
sections.forEach(section => {
|
|
95725
|
+
let ok = section.querySelector('.is-section-tool');
|
|
94835
95726
|
|
|
94836
95727
|
if (!ok) {
|
|
94837
|
-
arrSections.push(
|
|
94838
|
-
}
|
|
94839
|
-
|
|
94840
|
-
prevSection = prevSection.previousElementSibling;
|
|
94841
|
-
|
|
94842
|
-
if (prevSection) {
|
|
94843
|
-
ok = prevSection.querySelector('.is-section-tool');
|
|
94844
|
-
|
|
94845
|
-
if (!ok) {
|
|
94846
|
-
arrSections.push(prevSection);
|
|
94847
|
-
}
|
|
95728
|
+
arrSections.push(section);
|
|
94848
95729
|
}
|
|
94849
|
-
}
|
|
94850
|
-
|
|
95730
|
+
});
|
|
94851
95731
|
arrSections.forEach(section => {
|
|
94852
95732
|
// Code Blocks Handling
|
|
94853
|
-
let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
|
|
95733
|
+
// let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
|
|
95734
|
+
// codeBlocks.forEach(element => {
|
|
95735
|
+
// let html = (decodeURIComponent(element.getAttribute('data-html'))); // Original code is stored in data-html attribute
|
|
95736
|
+
// html = html.replace(/{id}/g, dom.uniqueId());
|
|
95737
|
+
// //Fill the block with original code
|
|
95738
|
+
// dom.html(element, html);
|
|
95739
|
+
// });
|
|
95740
|
+
let codeBlocks = section.querySelectorAll('[data-html]');
|
|
94854
95741
|
codeBlocks.forEach(element => {
|
|
94855
95742
|
let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
|
|
94856
95743
|
|
|
@@ -94904,7 +95791,8 @@ class ContentBox {
|
|
|
94904
95791
|
e.stopImmediatePropagation();
|
|
94905
95792
|
return false;
|
|
94906
95793
|
});
|
|
94907
|
-
});
|
|
95794
|
+
});
|
|
95795
|
+
this.sectionStack(); //Trigger Change event
|
|
94908
95796
|
|
|
94909
95797
|
this.onChange();
|
|
94910
95798
|
dom.removeElement(document.querySelector('.is-sidebar-overlay'));
|
|
@@ -94986,6 +95874,38 @@ class ContentBox {
|
|
|
94986
95874
|
*/
|
|
94987
95875
|
|
|
94988
95876
|
|
|
95877
|
+
hideTools() {
|
|
95878
|
+
// hide tools
|
|
95879
|
+
let tools = this.doc.querySelectorAll('.is-tool');
|
|
95880
|
+
Array.prototype.forEach.call(tools, tool => {
|
|
95881
|
+
tool.style.display = '';
|
|
95882
|
+
});
|
|
95883
|
+
let tool = this.doc.querySelector('.is-column-tool');
|
|
95884
|
+
tool.style.display = 'none';
|
|
95885
|
+
tools = this.doc.querySelectorAll('.is-row-tool');
|
|
95886
|
+
tools.forEach(tool => {
|
|
95887
|
+
tool.style.display = 'none';
|
|
95888
|
+
});
|
|
95889
|
+
tools = this.doc.querySelectorAll('.is-rowadd-tool');
|
|
95890
|
+
tools.forEach(tool => {
|
|
95891
|
+
tool.style.opacity = 0;
|
|
95892
|
+
});
|
|
95893
|
+
}
|
|
95894
|
+
|
|
95895
|
+
showTools() {
|
|
95896
|
+
this.editor.util.repositionColumnTool();
|
|
95897
|
+
let tool = this.doc.querySelector('.is-column-tool');
|
|
95898
|
+
tool.style.display = '';
|
|
95899
|
+
let tools = this.doc.querySelectorAll('.is-row-tool');
|
|
95900
|
+
tools.forEach(tool => {
|
|
95901
|
+
tool.style.display = '';
|
|
95902
|
+
});
|
|
95903
|
+
tools = this.doc.querySelectorAll('.is-rowadd-tool');
|
|
95904
|
+
tools.forEach(tool => {
|
|
95905
|
+
tool.style.opacity = '';
|
|
95906
|
+
});
|
|
95907
|
+
}
|
|
95908
|
+
|
|
94989
95909
|
positionTool(box) {
|
|
94990
95910
|
if (!box) return; // Zoom
|
|
94991
95911
|
|
|
@@ -95105,11 +96025,11 @@ class ContentBox {
|
|
|
95105
96025
|
let btnHtml;
|
|
95106
96026
|
|
|
95107
96027
|
if (btn.src) {
|
|
95108
|
-
btnHtml = '<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>';
|
|
96028
|
+
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>';
|
|
95109
96029
|
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>';
|
|
95110
96030
|
dom.appendHtml(builderStuff, panelHtml);
|
|
95111
96031
|
} else {
|
|
95112
|
-
btnHtml = '<button id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
96032
|
+
btnHtml = '<button type="button" id="' + btnId + '" tabindex="-1" class="is-sidebar-button" data-title="' + out(btn.title) + '" title="' + out(btn.title) + '">' + btn.html + '</button>';
|
|
95113
96033
|
}
|
|
95114
96034
|
|
|
95115
96035
|
const sidebar = builderStuff.querySelector('.is-sidebar');
|
|
@@ -95397,40 +96317,38 @@ class ContentBox {
|
|
|
95397
96317
|
}
|
|
95398
96318
|
|
|
95399
96319
|
cleanupUnused() {
|
|
96320
|
+
/*
|
|
95400
96321
|
let links = this.doc.getElementsByTagName('link');
|
|
95401
|
-
|
|
95402
96322
|
for (let i = 0; i < links.length; i++) {
|
|
95403
|
-
|
|
95404
|
-
|
|
95405
|
-
|
|
95406
|
-
|
|
95407
|
-
|
|
95408
|
-
|
|
95409
|
-
|
|
95410
|
-
|
|
95411
|
-
|
|
95412
|
-
|
|
95413
|
-
|
|
95414
|
-
|
|
95415
|
-
|
|
95416
|
-
|
|
95417
|
-
|
|
95418
|
-
|
|
95419
|
-
|
|
95420
|
-
|
|
95421
|
-
|
|
95422
|
-
|
|
95423
|
-
|
|
95424
|
-
|
|
95425
|
-
|
|
95426
|
-
links[i].setAttribute('data-rel', '_del');
|
|
95427
|
-
}
|
|
96323
|
+
//Remove unused google font links
|
|
96324
|
+
let src = links[i].getAttribute('href');
|
|
96325
|
+
if (src.indexOf('googleapis') !== -1) {
|
|
96326
|
+
//get fontname
|
|
96327
|
+
src = src.replace(/\+/g, ' ').replace(/%20/g, ' ');
|
|
96328
|
+
let fontname = src.substr(src.indexOf('family=') + 7);
|
|
96329
|
+
if (fontname.indexOf(':') != -1) {
|
|
96330
|
+
fontname = fontname.split(':')[0];
|
|
96331
|
+
}
|
|
96332
|
+
fontname = fontname.toLowerCase();
|
|
96333
|
+
//check if fontname used in content
|
|
96334
|
+
let exist = false;
|
|
96335
|
+
let tmp = this.wrapperEl.innerHTML.toLowerCase();
|
|
96336
|
+
let count = tmp.split(fontname).length;
|
|
96337
|
+
if (count >= 3) exist = true;
|
|
96338
|
+
if (!exist) {
|
|
96339
|
+
let attr = links[i].getAttribute('data-protect');
|
|
96340
|
+
if (typeof attr !== typeof undefined && attr !== false) {
|
|
96341
|
+
//do not delete
|
|
96342
|
+
} else {
|
|
96343
|
+
links[i].setAttribute('data-rel', '_del');
|
|
96344
|
+
}
|
|
96345
|
+
}
|
|
95428
96346
|
}
|
|
95429
|
-
|
|
95430
|
-
|
|
95431
|
-
|
|
96347
|
+
}
|
|
96348
|
+
*/
|
|
96349
|
+
this.editor.rte.cleanupFontCssLink(); //Cleanup unused contentstyles
|
|
95432
96350
|
|
|
95433
|
-
links = this.doc.getElementsByTagName('link');
|
|
96351
|
+
let links = this.doc.getElementsByTagName('link');
|
|
95434
96352
|
|
|
95435
96353
|
for (let i = 0; i < links.length; i++) {
|
|
95436
96354
|
if (links[i].getAttribute('data-name') === 'contentstyle') {
|