@innovastudio/contentbox 1.5.8 → 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
|
@@ -4042,15 +4042,20 @@ class EditSection {
|
|
|
4042
4042
|
</div>
|
|
4043
4043
|
` + '<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>';
|
|
4044
4044
|
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>';
|
|
4045
|
-
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>' +
|
|
4046
|
-
<div style="
|
|
4047
|
-
|
|
4048
|
-
<
|
|
4049
|
-
<
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
<
|
|
4053
|
-
|
|
4045
|
+
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>' + '<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>' + `
|
|
4046
|
+
<div class="div-section-wrapboxes" style="display:flex;flex-direction:column;">
|
|
4047
|
+
<div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
|
|
4048
|
+
<div style="padding-top:3px;display:flex;align-items: center;">
|
|
4049
|
+
<button title="${out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
|
|
4050
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
4051
|
+
</button>
|
|
4052
|
+
<button title="${out('Tablet (Portrait)')}" class="input-breakpoint on" data-value="sm" style="width:40px;height:25px;">
|
|
4053
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
4054
|
+
</button>
|
|
4055
|
+
|
|
4056
|
+
<label for="chkReverseBoxes" style="margin:0;margin-left:70px;display:flex"><input id="chkReverseBoxes" type="checkbox" style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
|
|
4057
|
+
|
|
4058
|
+
</div>
|
|
4054
4059
|
</div>
|
|
4055
4060
|
|
|
4056
4061
|
<div class="is-separator" style="margin-top:20px"></div>
|
|
@@ -4378,6 +4383,14 @@ class EditSection {
|
|
|
4378
4383
|
const section = this.builder.activeSection;
|
|
4379
4384
|
let bgcolor = btnSectionBgColor.style.backgroundColor;
|
|
4380
4385
|
colorpicker.open(s => {
|
|
4386
|
+
if (!section.classList.contains('box-space')) {
|
|
4387
|
+
let overlays = section.querySelectorAll('.is-overlay');
|
|
4388
|
+
overlays.forEach(overlay => {
|
|
4389
|
+
overlay.style.backgroundColor = '';
|
|
4390
|
+
overlay.style.backgroundImage = ''; //remove gradient
|
|
4391
|
+
});
|
|
4392
|
+
}
|
|
4393
|
+
|
|
4381
4394
|
section.style.backgroundColor = s;
|
|
4382
4395
|
section.style.backgroundImage = ''; //remove gradient
|
|
4383
4396
|
|
|
@@ -4395,7 +4408,15 @@ class EditSection {
|
|
|
4395
4408
|
const section = this.builder.activeSection;
|
|
4396
4409
|
let gradientPicker = this.builder.editor.gradientpicker();
|
|
4397
4410
|
gradientPicker.open(section, () => {
|
|
4398
|
-
|
|
4411
|
+
if (!section.classList.contains('box-space')) {
|
|
4412
|
+
let overlays = section.querySelectorAll('.is-overlay');
|
|
4413
|
+
overlays.forEach(overlay => {
|
|
4414
|
+
overlay.style.backgroundColor = '';
|
|
4415
|
+
overlay.style.backgroundImage = ''; //remove gradient
|
|
4416
|
+
});
|
|
4417
|
+
} //Trigger Change event
|
|
4418
|
+
|
|
4419
|
+
|
|
4399
4420
|
this.builder.onChange();
|
|
4400
4421
|
});
|
|
4401
4422
|
});
|
|
@@ -4475,6 +4496,21 @@ class EditSection {
|
|
|
4475
4496
|
|
|
4476
4497
|
this.builder.onChange();
|
|
4477
4498
|
});
|
|
4499
|
+
});
|
|
4500
|
+
const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
|
|
4501
|
+
chkReverseBoxes.addEventListener('click', () => {
|
|
4502
|
+
let section = this.builder.activeSection;
|
|
4503
|
+
if (!section) return;
|
|
4504
|
+
this.builder.editor.saveForUndo();
|
|
4505
|
+
|
|
4506
|
+
if (chkReverseBoxes.checked) {
|
|
4507
|
+
section.classList.add('box-reverse');
|
|
4508
|
+
} else {
|
|
4509
|
+
section.classList.remove('box-reverse');
|
|
4510
|
+
} //Trigger Change event
|
|
4511
|
+
|
|
4512
|
+
|
|
4513
|
+
this.builder.settings.onChange();
|
|
4478
4514
|
}); // Section Visibility
|
|
4479
4515
|
|
|
4480
4516
|
btns = modalEditSection.querySelectorAll('.input-device');
|
|
@@ -4686,6 +4722,14 @@ class EditSection {
|
|
|
4686
4722
|
divSectionSpaceSettings.style.display = 'none';
|
|
4687
4723
|
}
|
|
4688
4724
|
|
|
4725
|
+
const divSectionWrapBoxes = this.modalEditSection.querySelector('.div-section-wrapboxes');
|
|
4726
|
+
|
|
4727
|
+
if (dom$m.hasClass(activeSection, 'is-box')) {
|
|
4728
|
+
divSectionWrapBoxes.style.display = 'none';
|
|
4729
|
+
} else {
|
|
4730
|
+
divSectionWrapBoxes.style.display = '';
|
|
4731
|
+
}
|
|
4732
|
+
|
|
4689
4733
|
const divMultiBoxes = this.modalEditSection.querySelector('.div-multi-boxes');
|
|
4690
4734
|
|
|
4691
4735
|
if (dom$m.hasClass(activeSection, 'is-box')) {
|
|
@@ -4755,6 +4799,14 @@ class EditSection {
|
|
|
4755
4799
|
} else {
|
|
4756
4800
|
dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
|
|
4757
4801
|
}
|
|
4802
|
+
|
|
4803
|
+
const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
|
|
4804
|
+
|
|
4805
|
+
if (activeSection.classList.contains('box-reverse')) {
|
|
4806
|
+
chkReverseBoxes.checked = true;
|
|
4807
|
+
} else {
|
|
4808
|
+
chkReverseBoxes.checked = false;
|
|
4809
|
+
}
|
|
4758
4810
|
}
|
|
4759
4811
|
|
|
4760
4812
|
close() {
|
|
@@ -10734,7 +10786,7 @@ class EditBox {
|
|
|
10734
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>' +
|
|
10735
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>';
|
|
10736
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>';
|
|
10737
|
-
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>' +
|
|
10738
10790
|
// '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' +
|
|
10739
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>';
|
|
10740
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>') +
|
|
@@ -11844,6 +11896,30 @@ class EditBox {
|
|
|
11844
11896
|
this.builder.editor.saveForUndo();
|
|
11845
11897
|
this.boxContentAutofit(); //Trigger Change event
|
|
11846
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
|
+
|
|
11847
11923
|
this.builder.settings.onChange();
|
|
11848
11924
|
});
|
|
11849
11925
|
const btnBoxPickPhoto = modalEditBox.querySelector('.cmd-box-pickphoto');
|
|
@@ -12265,10 +12341,8 @@ class EditBox {
|
|
|
12265
12341
|
let bgcolor = btnBoxBgColor.style.backgroundColor;
|
|
12266
12342
|
let overlay = activeBox.querySelector('.is-overlay');
|
|
12267
12343
|
colorpicker.open(s => {
|
|
12268
|
-
activeBox.style.backgroundColor = ''
|
|
12269
|
-
|
|
12270
|
-
activeBox.style.backgroundImage = ''; /// clean old
|
|
12271
|
-
|
|
12344
|
+
// activeBox.style.backgroundColor = '';// clean old
|
|
12345
|
+
// activeBox.style.backgroundImage = '';/// clean old
|
|
12272
12346
|
overlay.style.backgroundColor = s;
|
|
12273
12347
|
overlay.style.backgroundImage = ''; //remove gradient
|
|
12274
12348
|
|
|
@@ -12287,11 +12361,9 @@ class EditBox {
|
|
|
12287
12361
|
let overlay = activeBox.querySelector('.is-overlay');
|
|
12288
12362
|
let gradientPicker = this.builder.editor.gradientpicker();
|
|
12289
12363
|
gradientPicker.open(overlay, () => {
|
|
12290
|
-
activeBox.style.backgroundColor = ''
|
|
12291
|
-
|
|
12292
|
-
activeBox.style.backgroundImage = ''; // clean old
|
|
12364
|
+
// activeBox.style.backgroundColor = '';// clean old
|
|
12365
|
+
// activeBox.style.backgroundImage = '';// clean old
|
|
12293
12366
|
//Trigger Change event
|
|
12294
|
-
|
|
12295
12367
|
this.builder.onChange();
|
|
12296
12368
|
});
|
|
12297
12369
|
}); // Box Overlay Color
|
|
@@ -12818,12 +12890,25 @@ class EditBox {
|
|
|
12818
12890
|
|
|
12819
12891
|
if (dom$l.hasClass(activeBox, 'box-autofit')) {
|
|
12820
12892
|
modalEditBox.querySelector('#chkAutofitContent').checked = true;
|
|
12821
|
-
}
|
|
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');
|
|
12822
12908
|
// elms.forEach(elm=>{
|
|
12823
12909
|
// dom.removeClass(elm, 'box-active');
|
|
12824
12910
|
// });
|
|
12825
12911
|
|
|
12826
|
-
|
|
12827
12912
|
if (container) {
|
|
12828
12913
|
modalEditBox.querySelector('.val-box-size').innerHTML = '';
|
|
12829
12914
|
container.classList.forEach(item => {
|