@innovastudio/contentbox 1.5.9 → 1.5.10
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
|
@@ -10786,7 +10786,7 @@ class EditBox {
|
|
|
10786
10786
|
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>' +
|
|
10787
10787
|
'<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>';
|
|
10788
10788
|
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>';
|
|
10789
|
-
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<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>' + '<div style="padding-top:20px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit
|
|
10789
|
+
html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<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>' + '<div style="display:flex;padding-top:20px;">' + '<div style="display:flex;align-items: center;margin-right:30px">' + '<label for="chkAutofitContent" style="margin:0;display:flex;align-items: center;"><input id="chkAutofitContent" type="checkbox" /> <span style="margin-left:3px">' + out('Autofit on Mobile') + '</span></label>' + '</div>' + '<div style="display:flex;align-items: center;">' + '<label for="inpBoxMinHeight" style="margin:0 4px 0 0;">' + out('Min Height') + ':</label>' + '<select id="inpBoxMinHeight">' + '<option value="">' + out('Not Set') + '</option>' + '<option value="20">20%</option>' + '<option value="25">25%</option>' + '<option value="30">30%</option>' + '<option value="40">40%</option>' + '<option value="50">50%</option>' + '<option value="60">60%</option>' + '<option value="70">70%</option>' + '<option value="75">75%</option>' + '<option value="80">80%</option>' + '<option value="90">90%</option>' + '<option value="100">100%</option>' + '</select>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + // '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' +
|
|
10790
10790
|
// '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' +
|
|
10791
10791
|
'<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>';
|
|
10792
10792
|
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>') +
|
|
@@ -11896,6 +11896,30 @@ class EditBox {
|
|
|
11896
11896
|
this.builder.editor.saveForUndo();
|
|
11897
11897
|
this.boxContentAutofit(); //Trigger Change event
|
|
11898
11898
|
|
|
11899
|
+
this.builder.settings.onChange();
|
|
11900
|
+
});
|
|
11901
|
+
const inpBoxMinHeight = modalEditBox.querySelector('#inpBoxMinHeight');
|
|
11902
|
+
inpBoxMinHeight.addEventListener('change', () => {
|
|
11903
|
+
this.builder.editor.saveForUndo();
|
|
11904
|
+
let activeBox = this.builder.activeBox;
|
|
11905
|
+
let val = inpBoxMinHeight.value;
|
|
11906
|
+
activeBox.classList.remove('min-height-20');
|
|
11907
|
+
activeBox.classList.remove('min-height-25');
|
|
11908
|
+
activeBox.classList.remove('min-height-30');
|
|
11909
|
+
activeBox.classList.remove('min-height-40');
|
|
11910
|
+
activeBox.classList.remove('min-height-50');
|
|
11911
|
+
activeBox.classList.remove('min-height-60');
|
|
11912
|
+
activeBox.classList.remove('min-height-70');
|
|
11913
|
+
activeBox.classList.remove('min-height-75');
|
|
11914
|
+
activeBox.classList.remove('min-height-80');
|
|
11915
|
+
activeBox.classList.remove('min-height-90');
|
|
11916
|
+
activeBox.classList.remove('min-height-100');
|
|
11917
|
+
|
|
11918
|
+
if (val !== '') {
|
|
11919
|
+
activeBox.classList.add(`min-height-${val}`);
|
|
11920
|
+
} //Trigger Change event
|
|
11921
|
+
|
|
11922
|
+
|
|
11899
11923
|
this.builder.settings.onChange();
|
|
11900
11924
|
});
|
|
11901
11925
|
const btnBoxPickPhoto = modalEditBox.querySelector('.cmd-box-pickphoto');
|
|
@@ -12866,12 +12890,25 @@ class EditBox {
|
|
|
12866
12890
|
|
|
12867
12891
|
if (dom$l.hasClass(activeBox, 'box-autofit')) {
|
|
12868
12892
|
modalEditBox.querySelector('#chkAutofitContent').checked = true;
|
|
12869
|
-
}
|
|
12893
|
+
}
|
|
12894
|
+
|
|
12895
|
+
const inpBoxMinHeight = modalEditBox.querySelector('#inpBoxMinHeight');
|
|
12896
|
+
inpBoxMinHeight.value = '';
|
|
12897
|
+
if (dom$l.hasClass(activeBox, 'min-height-20')) inpBoxMinHeight.value = 20;
|
|
12898
|
+
if (dom$l.hasClass(activeBox, 'min-height-25')) inpBoxMinHeight.value = 25;
|
|
12899
|
+
if (dom$l.hasClass(activeBox, 'min-height-30')) inpBoxMinHeight.value = 30;
|
|
12900
|
+
if (dom$l.hasClass(activeBox, 'min-height-40')) inpBoxMinHeight.value = 40;
|
|
12901
|
+
if (dom$l.hasClass(activeBox, 'min-height-50')) inpBoxMinHeight.value = 50;
|
|
12902
|
+
if (dom$l.hasClass(activeBox, 'min-height-60')) inpBoxMinHeight.value = 60;
|
|
12903
|
+
if (dom$l.hasClass(activeBox, 'min-height-70')) inpBoxMinHeight.value = 70;
|
|
12904
|
+
if (dom$l.hasClass(activeBox, 'min-height-75')) inpBoxMinHeight.value = 75;
|
|
12905
|
+
if (dom$l.hasClass(activeBox, 'min-height-80')) inpBoxMinHeight.value = 80;
|
|
12906
|
+
if (dom$l.hasClass(activeBox, 'min-height-90')) inpBoxMinHeight.value = 90;
|
|
12907
|
+
if (dom$l.hasClass(activeBox, 'min-height-100')) inpBoxMinHeight.value = 100; // const elms = this.builder.doc.querySelectorAll('.box-active');
|
|
12870
12908
|
// elms.forEach(elm=>{
|
|
12871
12909
|
// dom.removeClass(elm, 'box-active');
|
|
12872
12910
|
// });
|
|
12873
12911
|
|
|
12874
|
-
|
|
12875
12912
|
if (container) {
|
|
12876
12913
|
modalEditBox.querySelector('.val-box-size').innerHTML = '';
|
|
12877
12914
|
container.classList.forEach(item => {
|