@innovastudio/contentbox 1.0.30 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@innovastudio/contentbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.31",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "public/contentbox/contentbox.esm.js",
|
|
6
6
|
"files": [
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
"webpack-dev-server": "^4.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
+
"@ashthornton/asscroll": "^2.0.4",
|
|
41
42
|
"@innovastudio/contentbuilder": "^1.0.61",
|
|
42
43
|
"axios": "^0.21.4",
|
|
43
44
|
"cors": "^2.8.5",
|
|
@@ -393,19 +393,22 @@
|
|
|
393
393
|
font-size: 13px;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
#_cbhtml .is-modal.editsection button
|
|
397
|
-
|
|
398
|
-
#_cbhtml .is-modal.editsection button.cmd-scroll-preset {
|
|
399
|
-
width: 45px;
|
|
396
|
+
#_cbhtml .is-modal.editsection button {
|
|
397
|
+
width: auto;
|
|
400
398
|
}
|
|
401
|
-
#_cbhtml .is-modal.editsection button
|
|
402
|
-
#_cbhtml .is-modal.editsection button.cmd-box-spacing svg,
|
|
403
|
-
#_cbhtml .is-modal.editsection button.cmd-scroll-preset svg {
|
|
399
|
+
#_cbhtml .is-modal.editsection button svg {
|
|
404
400
|
flex: none;
|
|
405
401
|
width: 10px;
|
|
406
402
|
height: 10px;
|
|
407
403
|
}
|
|
408
404
|
|
|
405
|
+
#_cbhtml .is-modal.editsection button.cmd-section-height,
|
|
406
|
+
#_cbhtml .is-modal.editsection button.cmd-box-spacing,
|
|
407
|
+
#_cbhtml .is-modal.editsection button.cmd-scroll-preset,
|
|
408
|
+
#_cbhtml .is-modal.editsection button.cmd-section-duplicate {
|
|
409
|
+
width: 45px;
|
|
410
|
+
}
|
|
411
|
+
|
|
409
412
|
#_cbhtml .is-modal.editsection button.cmd-section-duplicate {
|
|
410
413
|
padding: 0 22px;
|
|
411
414
|
}
|
|
@@ -1885,10 +1885,28 @@ class EditSection {
|
|
|
1885
1885
|
this.builder = builder;
|
|
1886
1886
|
const builderStuff = this.builder.builderStuff;
|
|
1887
1887
|
this.builderStuff = builderStuff;
|
|
1888
|
-
let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:
|
|
1888
|
+
let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<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;">' + '<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>' + '<div id="divSectionGeneral" class="is-tab-content" 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>' + '<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>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" 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>' +
|
|
1889
|
+
'<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>' + '<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" 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>' + '' + '<div class="is-modal editmodule">' + '<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>' + '' + '<div class="is-modal editcustomcode">' + '<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="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
|
|
1889
1890
|
dom$H.appendHtml(builderStuff, html);
|
|
1890
1891
|
let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
|
|
1891
1892
|
this.modalEditSection = modalEditSection;
|
|
1893
|
+
const tabs = modalEditSection.querySelectorAll('.is-tabs a');
|
|
1894
|
+
tabs.forEach(tab => {
|
|
1895
|
+
tab.addEventListener('click', e => {
|
|
1896
|
+
e.preventDefault();
|
|
1897
|
+
if (dom$H.hasClass(tab, 'active')) return;
|
|
1898
|
+
tabs.forEach(item => {
|
|
1899
|
+
dom$H.removeClass(item, 'active');
|
|
1900
|
+
});
|
|
1901
|
+
dom$H.addClass(tab, 'active');
|
|
1902
|
+
let id = tab.getAttribute('data-content');
|
|
1903
|
+
const tabContents = modalEditSection.querySelectorAll('.is-tab-content');
|
|
1904
|
+
tabContents.forEach(tabContent => {
|
|
1905
|
+
tabContent.style.display = 'none';
|
|
1906
|
+
});
|
|
1907
|
+
modalEditSection.querySelector('#' + id).style.display = 'flex';
|
|
1908
|
+
});
|
|
1909
|
+
});
|
|
1892
1910
|
const modalDelConfirm = builderStuff.querySelector('.is-modal.delsectionconfirm');
|
|
1893
1911
|
const btnOk = modalDelConfirm.querySelector('.input-ok');
|
|
1894
1912
|
btnOk.addEventListener('click', () => {
|
|
@@ -1901,7 +1919,11 @@ class EditSection {
|
|
|
1901
1919
|
|
|
1902
1920
|
this.builder.settings.onChange(); //Hide box tool
|
|
1903
1921
|
|
|
1904
|
-
document.querySelector('#divBoxTool')
|
|
1922
|
+
let boxTool = document.querySelector('#divBoxTool');
|
|
1923
|
+
boxTool.style.display = 'none';
|
|
1924
|
+
setTimeout(() => {
|
|
1925
|
+
boxTool.style.display = 'none';
|
|
1926
|
+
}, 300);
|
|
1905
1927
|
this.builder.activeSection = null;
|
|
1906
1928
|
});
|
|
1907
1929
|
const btnSectionUp = modalEditSection.querySelector('.cmd-section-up');
|
|
@@ -1939,6 +1961,50 @@ class EditSection {
|
|
|
1939
1961
|
|
|
1940
1962
|
this.builder.settings.onChange();
|
|
1941
1963
|
});
|
|
1964
|
+
const btnSectionAnimStart = modalEditSection.querySelectorAll('.cmd-section-anim-start');
|
|
1965
|
+
btnSectionAnimStart.forEach(btn => {
|
|
1966
|
+
btn.addEventListener('click', () => {
|
|
1967
|
+
this.builder.editor.saveForUndo();
|
|
1968
|
+
let val = btn.getAttribute('data-value');
|
|
1969
|
+
this.sectionAnimStart(val);
|
|
1970
|
+
let btns = modalEditSection.querySelectorAll('.cmd-section-anim-start');
|
|
1971
|
+
btns.forEach(btn => {
|
|
1972
|
+
dom$H.removeClass(btn, 'on');
|
|
1973
|
+
});
|
|
1974
|
+
dom$H.addClass(btn, 'on');
|
|
1975
|
+
|
|
1976
|
+
if (val === '') {
|
|
1977
|
+
setTimeout(() => {
|
|
1978
|
+
dom$H.removeClass(btn, 'on');
|
|
1979
|
+
}, 100);
|
|
1980
|
+
} //Trigger Change event
|
|
1981
|
+
|
|
1982
|
+
|
|
1983
|
+
this.builder.settings.onChange();
|
|
1984
|
+
});
|
|
1985
|
+
});
|
|
1986
|
+
const btnSectionAnimEnd = modalEditSection.querySelectorAll('.cmd-section-anim-end');
|
|
1987
|
+
btnSectionAnimEnd.forEach(btn => {
|
|
1988
|
+
btn.addEventListener('click', () => {
|
|
1989
|
+
this.builder.editor.saveForUndo();
|
|
1990
|
+
let val = btn.getAttribute('data-value');
|
|
1991
|
+
this.sectionAnimEnd(val);
|
|
1992
|
+
let btns = modalEditSection.querySelectorAll('.cmd-section-anim-end');
|
|
1993
|
+
btns.forEach(btn => {
|
|
1994
|
+
dom$H.removeClass(btn, 'on');
|
|
1995
|
+
});
|
|
1996
|
+
dom$H.addClass(btn, 'on');
|
|
1997
|
+
|
|
1998
|
+
if (val === '') {
|
|
1999
|
+
setTimeout(() => {
|
|
2000
|
+
dom$H.removeClass(btn, 'on');
|
|
2001
|
+
}, 100);
|
|
2002
|
+
} //Trigger Change event
|
|
2003
|
+
|
|
2004
|
+
|
|
2005
|
+
this.builder.settings.onChange();
|
|
2006
|
+
});
|
|
2007
|
+
});
|
|
1942
2008
|
const btnSectionHeight = modalEditSection.querySelectorAll('.cmd-section-height');
|
|
1943
2009
|
btnSectionHeight.forEach(btn => {
|
|
1944
2010
|
btn.addEventListener('click', () => {
|
|
@@ -1964,7 +2030,14 @@ class EditSection {
|
|
|
1964
2030
|
btns.forEach(btn => {
|
|
1965
2031
|
dom$H.removeClass(btn, 'on');
|
|
1966
2032
|
});
|
|
1967
|
-
|
|
2033
|
+
dom$H.addClass(btn, 'on');
|
|
2034
|
+
|
|
2035
|
+
if (val === '') {
|
|
2036
|
+
setTimeout(() => {
|
|
2037
|
+
dom$H.removeClass(btn, 'on');
|
|
2038
|
+
}, 100);
|
|
2039
|
+
} //Trigger Change event
|
|
2040
|
+
|
|
1968
2041
|
|
|
1969
2042
|
this.builder.settings.onChange();
|
|
1970
2043
|
});
|
|
@@ -1984,13 +2057,20 @@ class EditSection {
|
|
|
1984
2057
|
btnScrollPreset.forEach(btn => {
|
|
1985
2058
|
btn.addEventListener('click', () => {
|
|
1986
2059
|
this.builder.editor.saveForUndo();
|
|
1987
|
-
let
|
|
1988
|
-
this.sectionScrollPreset(
|
|
2060
|
+
let val = btn.getAttribute('data-value');
|
|
2061
|
+
this.sectionScrollPreset(val);
|
|
1989
2062
|
let btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
|
|
1990
2063
|
btns.forEach(btn => {
|
|
1991
2064
|
dom$H.removeClass(btn, 'on');
|
|
1992
2065
|
});
|
|
1993
|
-
|
|
2066
|
+
dom$H.addClass(btn, 'on');
|
|
2067
|
+
|
|
2068
|
+
if (val === '') {
|
|
2069
|
+
setTimeout(() => {
|
|
2070
|
+
dom$H.removeClass(btn, 'on');
|
|
2071
|
+
}, 100);
|
|
2072
|
+
} //Trigger Change event
|
|
2073
|
+
|
|
1994
2074
|
|
|
1995
2075
|
this.builder.settings.onChange();
|
|
1996
2076
|
});
|
|
@@ -2033,6 +2113,33 @@ class EditSection {
|
|
|
2033
2113
|
if (dom$H.hasClass(activeSection, 'is-section-25')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="25"]'), 'on');
|
|
2034
2114
|
if (dom$H.hasClass(activeSection, 'is-section-20')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="20"]'), 'on');
|
|
2035
2115
|
if (dom$H.hasClass(activeSection, 'is-section-auto')) dom$H.addClass(modalEditSection.querySelector('.cmd-section-height[data-value="0"]'), 'on');
|
|
2116
|
+
btns = modalEditSection.querySelectorAll('.cmd-section-anim-start');
|
|
2117
|
+
btns.forEach(btn => {
|
|
2118
|
+
dom$H.removeClass(btn, 'on');
|
|
2119
|
+
});
|
|
2120
|
+
btns = modalEditSection.querySelectorAll('.cmd-section-anim-end');
|
|
2121
|
+
btns.forEach(btn => {
|
|
2122
|
+
dom$H.removeClass(btn, 'on');
|
|
2123
|
+
});
|
|
2124
|
+
|
|
2125
|
+
if (activeSection.hasAttribute('data-anim-start')) {
|
|
2126
|
+
const animPreset = activeSection.getAttribute('data-anim-start');
|
|
2127
|
+
if (animPreset === 'zoom-in') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="zoom-in"]'), 'on');
|
|
2128
|
+
if (animPreset === 'zoom-out') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="zoom-out"]'), 'on');
|
|
2129
|
+
if (animPreset === 'slide-left') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="slide-left"]'), 'on');
|
|
2130
|
+
if (animPreset === 'slide-right') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-start[data-value="slide-right"]'), 'on');
|
|
2131
|
+
}
|
|
2132
|
+
|
|
2133
|
+
if (activeSection.hasAttribute('data-anim-end')) {
|
|
2134
|
+
const animPreset = activeSection.getAttribute('data-anim-end');
|
|
2135
|
+
if (animPreset === 'zoom-in') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="zoom-in"]'), 'on');
|
|
2136
|
+
if (animPreset === 'zoom-out') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="zoom-out"]'), 'on');
|
|
2137
|
+
if (animPreset === 'slide-left') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-left"]'), 'on');
|
|
2138
|
+
if (animPreset === 'slide-right') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-right"]'), 'on');
|
|
2139
|
+
if (animPreset === 'overlap') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="overlap"]'), 'on');
|
|
2140
|
+
if (animPreset === 'slide-back') dom$H.addClass(modalEditSection.querySelector('.cmd-section-anim-end[data-value="slide-back"]'), 'on');
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2036
2143
|
btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
|
|
2037
2144
|
btns.forEach(btn => {
|
|
2038
2145
|
dom$H.removeClass(btn, 'on');
|
|
@@ -2052,7 +2159,7 @@ class EditSection {
|
|
|
2052
2159
|
let preset = btnScroll.getAttribute('data-scroll-preset');
|
|
2053
2160
|
|
|
2054
2161
|
if (preset) {
|
|
2055
|
-
let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-
|
|
2162
|
+
let btn = modalEditSection.querySelector(`.cmd-scroll-preset[data-value="${preset}"]`);
|
|
2056
2163
|
dom$H.addClass(btn, 'on');
|
|
2057
2164
|
}
|
|
2058
2165
|
} // this.builder.scrollTo(activeSection);
|
|
@@ -2174,6 +2281,81 @@ class EditSection {
|
|
|
2174
2281
|
this.builder.scrollTo(section);
|
|
2175
2282
|
}
|
|
2176
2283
|
|
|
2284
|
+
sectionAnimStart(s) {
|
|
2285
|
+
const activeSection = this.builder.activeSection;
|
|
2286
|
+
activeSection.removeAttribute('data-bottom-top');
|
|
2287
|
+
activeSection.removeAttribute('data-300-bottom');
|
|
2288
|
+
activeSection.removeAttribute('data-400-bottom');
|
|
2289
|
+
activeSection.removeAttribute('data-anim-start'); // activeSection.style.transform = '';
|
|
2290
|
+
|
|
2291
|
+
if (s === 'zoom-in') {
|
|
2292
|
+
activeSection.setAttribute('data-bottom-top', 'transform:translateX(0%) translateY(0%) scale(0.7)');
|
|
2293
|
+
activeSection.setAttribute('data-300-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2294
|
+
} else if (s === 'zoom-out') {
|
|
2295
|
+
//NOT APPLICABLE
|
|
2296
|
+
activeSection.setAttribute('data-bottom-top', 'transform:translateX(0%) translateY(0%) scale(1.5)');
|
|
2297
|
+
activeSection.setAttribute('data-300-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2298
|
+
} else if (s === 'slide-left') {
|
|
2299
|
+
activeSection.setAttribute('data-bottom-top', 'transform:translateX(100%) translateY(0%) scale(1)');
|
|
2300
|
+
activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)'); //400 is shorter than 300
|
|
2301
|
+
} else if (s === 'slide-right') {
|
|
2302
|
+
activeSection.setAttribute('data-bottom-top', 'transform:translateX(-100%) translateY(0%) scale(1)');
|
|
2303
|
+
activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2304
|
+
}
|
|
2305
|
+
|
|
2306
|
+
let enimEnd = activeSection.getAttribute('data-anim-end');
|
|
2307
|
+
|
|
2308
|
+
if (enimEnd === 'overlap') {
|
|
2309
|
+
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
2310
|
+
} else {
|
|
2311
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
2312
|
+
}
|
|
2313
|
+
|
|
2314
|
+
activeSection.setAttribute('data-anim-start', s); //Trigger Render event
|
|
2315
|
+
|
|
2316
|
+
this.builder.settings.onRender();
|
|
2317
|
+
}
|
|
2318
|
+
|
|
2319
|
+
sectionAnimEnd(s) {
|
|
2320
|
+
const activeSection = this.builder.activeSection;
|
|
2321
|
+
activeSection.removeAttribute('data-top-bottom');
|
|
2322
|
+
activeSection.removeAttribute('data-center');
|
|
2323
|
+
activeSection.removeAttribute('data-anim-end'); // activeSection.style.transform = '';
|
|
2324
|
+
|
|
2325
|
+
if (s === 'zoom-in') {
|
|
2326
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2327
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(0%) scale(1.5)');
|
|
2328
|
+
} else if (s === 'zoom-out') {
|
|
2329
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1);');
|
|
2330
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(0%) scale(0.5)');
|
|
2331
|
+
} else if (s === 'overlap') {
|
|
2332
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2333
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(70%) scale(1)');
|
|
2334
|
+
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
2335
|
+
} else if (s === 'slide-left') {
|
|
2336
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2337
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(-100%) translateY(0%) scale(1)');
|
|
2338
|
+
} else if (s === 'slide-right') {
|
|
2339
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1)');
|
|
2340
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(100%) translateY(0%) scale(1)');
|
|
2341
|
+
} else if (s === 'slide-back') {
|
|
2342
|
+
activeSection.setAttribute('data-center', 'transform:translateX(0%) translateY(0%) scale(1);');
|
|
2343
|
+
activeSection.setAttribute('data-top-bottom', 'transform:translateX(0%) translateY(100%) scale(0.5)');
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
let enimEnd = activeSection.getAttribute('data-anim-end');
|
|
2347
|
+
|
|
2348
|
+
if (enimEnd === 'overlap') {
|
|
2349
|
+
activeSection.setAttribute('data-smooth-scrolling', 'off');
|
|
2350
|
+
} else {
|
|
2351
|
+
activeSection.removeAttribute('data-smooth-scrolling');
|
|
2352
|
+
}
|
|
2353
|
+
|
|
2354
|
+
activeSection.setAttribute('data-anim-end', s); //Trigger Render event
|
|
2355
|
+
|
|
2356
|
+
this.builder.settings.onRender();
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2177
2359
|
sectionHeight(n) {
|
|
2178
2360
|
const activeSection = this.builder.activeSection;
|
|
2179
2361
|
activeSection.style.height = '';
|
|
@@ -2204,7 +2386,7 @@ class EditSection {
|
|
|
2204
2386
|
boxSpacing(s) {
|
|
2205
2387
|
const activeSection = this.builder.activeSection;
|
|
2206
2388
|
|
|
2207
|
-
if (s == '
|
|
2389
|
+
if (s == '') {
|
|
2208
2390
|
dom$H.removeClass(activeSection, 'box-space');
|
|
2209
2391
|
dom$H.removeClass(activeSection, 'box-space-sm');
|
|
2210
2392
|
dom$H.removeClass(activeSection, 'box-space-m');
|
|
@@ -9684,7 +9866,7 @@ class EditBox {
|
|
|
9684
9866
|
let activeBox = this.builder.activeBox;
|
|
9685
9867
|
let activeSection = this.builder.activeSection;
|
|
9686
9868
|
let container = activeBox.querySelector('.is-builder');
|
|
9687
|
-
let amount = '
|
|
9869
|
+
let amount = '20%';
|
|
9688
9870
|
let minHeight = parseInt(window.getComputedStyle(activeSection, null).getPropertyValue('min-height'));
|
|
9689
9871
|
|
|
9690
9872
|
if (parseInt(minHeight) <= 50) {
|
|
@@ -72771,7 +72953,9 @@ class ContentBox {
|
|
|
72771
72953
|
e = e || window.event;
|
|
72772
72954
|
var target = e.target || e.srcElement;
|
|
72773
72955
|
let a = false,
|
|
72774
|
-
b = false
|
|
72956
|
+
b = false,
|
|
72957
|
+
c = false,
|
|
72958
|
+
d = false;
|
|
72775
72959
|
let element = target;
|
|
72776
72960
|
|
|
72777
72961
|
while (element) {
|
|
@@ -72779,12 +72963,51 @@ class ContentBox {
|
|
|
72779
72963
|
if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
|
|
72780
72964
|
if (dom.hasClass(element, 'is-sidebar-content')) a = true;
|
|
72781
72965
|
if (dom.hasClass(element, 'is-sidebar')) b = true;
|
|
72966
|
+
if (dom.hasClass(element, 'is-builder')) c = true;
|
|
72967
|
+
|
|
72968
|
+
if (dom.hasClass(element, 'is-section')) {
|
|
72969
|
+
if (element.hasAttribute('data-anim-start') || element.hasAttribute('data-anim-end')) d = true;
|
|
72970
|
+
}
|
|
72971
|
+
|
|
72782
72972
|
element = element.parentNode;
|
|
72783
72973
|
}
|
|
72784
72974
|
|
|
72785
72975
|
if (!(a || b)) {
|
|
72786
72976
|
this.sidebar.closeSidebar();
|
|
72787
72977
|
}
|
|
72978
|
+
|
|
72979
|
+
if (c && d) {
|
|
72980
|
+
this.controlHiddenOnScroll = true;
|
|
72981
|
+
}
|
|
72982
|
+
}); // Hide tool on scrolling
|
|
72983
|
+
|
|
72984
|
+
let timeoutId;
|
|
72985
|
+
window.addEventListener('scroll', this.doWindowScroll = () => {
|
|
72986
|
+
if (this.controlHiddenOnScroll) {
|
|
72987
|
+
let builderActive = document.querySelector('.builder-active');
|
|
72988
|
+
|
|
72989
|
+
if (builderActive) {
|
|
72990
|
+
this.editor.util.clearActiveCell();
|
|
72991
|
+
this.editor.util.clearControls();
|
|
72992
|
+
this.controlHiddenOnScroll = false;
|
|
72993
|
+
}
|
|
72994
|
+
}
|
|
72995
|
+
|
|
72996
|
+
clearTimeout(timeoutId);
|
|
72997
|
+
timeoutId = setTimeout(() => {
|
|
72998
|
+
let hover = false;
|
|
72999
|
+
|
|
73000
|
+
if (this.activeSection) {
|
|
73001
|
+
if (this.activeSection.matches(':hover')) {
|
|
73002
|
+
hover = true;
|
|
73003
|
+
}
|
|
73004
|
+
}
|
|
73005
|
+
|
|
73006
|
+
if (!hover) {
|
|
73007
|
+
let boxTool = document.querySelector('#divBoxTool');
|
|
73008
|
+
boxTool.style.display = 'none';
|
|
73009
|
+
}
|
|
73010
|
+
}, 30);
|
|
72788
73011
|
});
|
|
72789
73012
|
} // init
|
|
72790
73013
|
|
|
@@ -73312,6 +73535,9 @@ class ContentBox {
|
|
|
73312
73535
|
}
|
|
73313
73536
|
|
|
73314
73537
|
loadHtml(html) {
|
|
73538
|
+
// Reset
|
|
73539
|
+
this.activeBox = null;
|
|
73540
|
+
this.activeSection = null;
|
|
73315
73541
|
const wrapper = this.wrapperEl;
|
|
73316
73542
|
|
|
73317
73543
|
if (!wrapper.style.opacity) {
|
|
@@ -73389,6 +73615,8 @@ class ContentBox {
|
|
|
73389
73615
|
}
|
|
73390
73616
|
|
|
73391
73617
|
destroy() {
|
|
73618
|
+
document.removeEventListener('click', this.doDocumentClick, false);
|
|
73619
|
+
window.removeEventListener('scroll', this.doWindowScroll, false);
|
|
73392
73620
|
let html = this.html(); // this.builderStuff.parentNode.removeChild(this.builderStuff);
|
|
73393
73621
|
|
|
73394
73622
|
this.builderStuff.innerHTML = '';
|