@innovastudio/contentbox 1.4.9 → 1.4.11
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
|
@@ -9863,9 +9863,10 @@ class EditBox {
|
|
|
9863
9863
|
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>';
|
|
9864
9864
|
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>';
|
|
9865
9865
|
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="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input 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>';
|
|
9866
|
-
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>' + '
|
|
9867
|
-
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>' + '<
|
|
9868
|
-
html += (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' +
|
|
9866
|
+
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>';
|
|
9867
|
+
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>';
|
|
9868
|
+
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>' +
|
|
9869
|
+
'<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>';
|
|
9869
9870
|
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>';
|
|
9870
9871
|
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>';
|
|
9871
9872
|
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>';
|
|
@@ -9924,7 +9925,21 @@ class EditBox {
|
|
|
9924
9925
|
this.modalEditBox = modalEditBox;
|
|
9925
9926
|
const modalEditCode = builderStuff.querySelector('.is-modal.editcustomcode');
|
|
9926
9927
|
const modalEditModule = builderStuff.querySelector('.is-modal.editmodule');
|
|
9927
|
-
new Tabs$1(modalEditBox);
|
|
9928
|
+
new Tabs$1(modalEditBox); // Backward compatibility
|
|
9929
|
+
|
|
9930
|
+
let s = '<div class="feature-master-style"></div>';
|
|
9931
|
+
dom$j.appendHtml(modalEditBox, s);
|
|
9932
|
+
const stamp = modalEditBox.querySelector('.feature-master-style');
|
|
9933
|
+
let d = window.getComputedStyle(stamp, null).getPropertyValue('display');
|
|
9934
|
+
|
|
9935
|
+
if (d === 'none') ; else {
|
|
9936
|
+
const divContainerParagraphSize = modalEditBox.querySelector('#divContainerParagraphSize');
|
|
9937
|
+
const divContainerLineHeight = modalEditBox.querySelector('#divContainerLineHeight');
|
|
9938
|
+
divContainerParagraphSize.style.display = 'none';
|
|
9939
|
+
divContainerLineHeight.style.display = 'none';
|
|
9940
|
+
}
|
|
9941
|
+
|
|
9942
|
+
stamp.parentNode.removeChild(stamp);
|
|
9928
9943
|
const tabs = modalEditBox.querySelectorAll('.is-tabs a');
|
|
9929
9944
|
tabs.forEach(tab => {
|
|
9930
9945
|
tab.addEventListener('click', e => {
|
|
@@ -9962,7 +9977,13 @@ class EditBox {
|
|
|
9962
9977
|
btnBoxTextColor.addEventListener('click', () => {
|
|
9963
9978
|
this.builder.editor.saveForUndo();
|
|
9964
9979
|
let color = btnBoxTextColor.getAttribute('data-value');
|
|
9965
|
-
this.boxTextColor(color); //
|
|
9980
|
+
this.boxTextColor(color); // realtime
|
|
9981
|
+
|
|
9982
|
+
const btns = modalEditBox.querySelectorAll('.cmd-box-textcolor');
|
|
9983
|
+
btns.forEach(btn => {
|
|
9984
|
+
dom$j.removeClass(btn, 'on');
|
|
9985
|
+
});
|
|
9986
|
+
if (color !== '') dom$j.addClass(btnBoxTextColor, 'on'); //Trigger Change event
|
|
9966
9987
|
|
|
9967
9988
|
this.builder.settings.onChange();
|
|
9968
9989
|
});
|
|
@@ -9972,7 +9993,106 @@ class EditBox {
|
|
|
9972
9993
|
btnBoxTextAlign.addEventListener('click', () => {
|
|
9973
9994
|
this.builder.editor.saveForUndo();
|
|
9974
9995
|
let align = btnBoxTextAlign.getAttribute('data-value');
|
|
9975
|
-
this.boxTextAlign(align); //
|
|
9996
|
+
this.boxTextAlign(align); // realtime
|
|
9997
|
+
|
|
9998
|
+
const btns = modalEditBox.querySelectorAll('.cmd-box-textalign');
|
|
9999
|
+
btns.forEach(btn => {
|
|
10000
|
+
dom$j.removeClass(btn, 'on');
|
|
10001
|
+
});
|
|
10002
|
+
if (align !== '') dom$j.addClass(btnBoxTextAlign, 'on'); //Trigger Change event
|
|
10003
|
+
|
|
10004
|
+
this.builder.settings.onChange();
|
|
10005
|
+
});
|
|
10006
|
+
});
|
|
10007
|
+
const btnBoxParaSizes = modalEditBox.querySelectorAll('.cmd-box-parasize');
|
|
10008
|
+
btnBoxParaSizes.forEach(btnBoxParaSize => {
|
|
10009
|
+
btnBoxParaSize.addEventListener('click', () => {
|
|
10010
|
+
this.builder.editor.saveForUndo();
|
|
10011
|
+
let activeBox = this.builder.activeBox;
|
|
10012
|
+
let container = activeBox.querySelector('.is-builder');
|
|
10013
|
+
dom$j.removeClass(container, 'size-16');
|
|
10014
|
+
dom$j.removeClass(container, 'size-17');
|
|
10015
|
+
dom$j.removeClass(container, 'size-18');
|
|
10016
|
+
dom$j.removeClass(container, 'size-19');
|
|
10017
|
+
dom$j.removeClass(container, 'size-20');
|
|
10018
|
+
dom$j.removeClass(container, 'size-21');
|
|
10019
|
+
let val = btnBoxParaSize.getAttribute('data-value');
|
|
10020
|
+
if (val === '16') dom$j.addClass(container, 'size-16');
|
|
10021
|
+
if (val === '17') dom$j.addClass(container, 'size-17');
|
|
10022
|
+
if (val === '18') dom$j.addClass(container, 'size-18');
|
|
10023
|
+
if (val === '19') dom$j.addClass(container, 'size-19');
|
|
10024
|
+
if (val === '20') dom$j.addClass(container, 'size-20');
|
|
10025
|
+
if (val === '21') dom$j.addClass(container, 'size-21'); // cleanup
|
|
10026
|
+
|
|
10027
|
+
const paragraphs = container.querySelectorAll('p');
|
|
10028
|
+
paragraphs.forEach(p => {
|
|
10029
|
+
if (val === '16') if (dom$j.hasClass(p, 'size-16')) dom$j.removeClass(p, 'size-16');
|
|
10030
|
+
if (val === '17') if (dom$j.hasClass(p, 'size-17')) dom$j.removeClass(p, 'size-17');
|
|
10031
|
+
if (val === '18') if (dom$j.hasClass(p, 'size-18')) dom$j.removeClass(p, 'size-18');
|
|
10032
|
+
if (val === '19') if (dom$j.hasClass(p, 'size-19')) dom$j.removeClass(p, 'size-19');
|
|
10033
|
+
if (val === '20') if (dom$j.hasClass(p, 'size-20')) dom$j.removeClass(p, 'size-20');
|
|
10034
|
+
if (val === '21') if (dom$j.hasClass(p, 'size-21')) dom$j.removeClass(p, 'size-21');
|
|
10035
|
+
}); // realtime
|
|
10036
|
+
|
|
10037
|
+
const btns = modalEditBox.querySelectorAll('.cmd-box-parasize');
|
|
10038
|
+
btns.forEach(btn => {
|
|
10039
|
+
dom$j.removeClass(btn, 'on');
|
|
10040
|
+
});
|
|
10041
|
+
if (val !== '') dom$j.addClass(btnBoxParaSize, 'on'); //Trigger Change event
|
|
10042
|
+
|
|
10043
|
+
this.builder.settings.onChange();
|
|
10044
|
+
});
|
|
10045
|
+
});
|
|
10046
|
+
const btnBoxLineHeights = modalEditBox.querySelectorAll('.cmd-box-lineheight');
|
|
10047
|
+
btnBoxLineHeights.forEach(btnBoxLineHeight => {
|
|
10048
|
+
btnBoxLineHeight.addEventListener('click', () => {
|
|
10049
|
+
this.builder.editor.saveForUndo();
|
|
10050
|
+
let activeBox = this.builder.activeBox;
|
|
10051
|
+
let container = activeBox.querySelector('.is-builder');
|
|
10052
|
+
dom$j.removeClass(container, 'leading-none');
|
|
10053
|
+
dom$j.removeClass(container, 'leading-11');
|
|
10054
|
+
dom$j.removeClass(container, 'leading-12');
|
|
10055
|
+
dom$j.removeClass(container, 'leading-13');
|
|
10056
|
+
dom$j.removeClass(container, 'leading-14');
|
|
10057
|
+
dom$j.removeClass(container, 'leading-15');
|
|
10058
|
+
dom$j.removeClass(container, 'leading-16');
|
|
10059
|
+
dom$j.removeClass(container, 'leading-17');
|
|
10060
|
+
dom$j.removeClass(container, 'leading-18');
|
|
10061
|
+
dom$j.removeClass(container, 'leading-19');
|
|
10062
|
+
dom$j.removeClass(container, 'leading-20');
|
|
10063
|
+
let val = btnBoxLineHeight.getAttribute('data-value');
|
|
10064
|
+
if (val === '1') dom$j.addClass(container, 'leading-none');
|
|
10065
|
+
if (val === '1.1') dom$j.addClass(container, 'leading-11');
|
|
10066
|
+
if (val === '1.2') dom$j.addClass(container, 'leading-12');
|
|
10067
|
+
if (val === '1.3') dom$j.addClass(container, 'leading-13');
|
|
10068
|
+
if (val === '1.4') dom$j.addClass(container, 'leading-14');
|
|
10069
|
+
if (val === '1.5') dom$j.addClass(container, 'leading-15');
|
|
10070
|
+
if (val === '1.6') dom$j.addClass(container, 'leading-16');
|
|
10071
|
+
if (val === '1.7') dom$j.addClass(container, 'leading-17');
|
|
10072
|
+
if (val === '1.8') dom$j.addClass(container, 'leading-18');
|
|
10073
|
+
if (val === '1.9') dom$j.addClass(container, 'leading-19');
|
|
10074
|
+
if (val === '2') dom$j.addClass(container, 'leading-20'); // cleanup
|
|
10075
|
+
|
|
10076
|
+
const paragraphs = container.querySelectorAll('p');
|
|
10077
|
+
paragraphs.forEach(p => {
|
|
10078
|
+
if (val === '1') if (dom$j.hasClass(p, 'leading-none')) dom$j.removeClass(p, 'leading-none');
|
|
10079
|
+
if (val === '1.1') if (dom$j.hasClass(p, 'leading-11')) dom$j.removeClass(p, 'leading-11');
|
|
10080
|
+
if (val === '1.2') if (dom$j.hasClass(p, 'leading-12')) dom$j.removeClass(p, 'leading-12');
|
|
10081
|
+
if (val === '1.3') if (dom$j.hasClass(p, 'leading-13')) dom$j.removeClass(p, 'leading-13');
|
|
10082
|
+
if (val === '1.4') if (dom$j.hasClass(p, 'leading-14')) dom$j.removeClass(p, 'leading-14');
|
|
10083
|
+
if (val === '1.5') if (dom$j.hasClass(p, 'leading-15')) dom$j.removeClass(p, 'leading-15');
|
|
10084
|
+
if (val === '1.6') if (dom$j.hasClass(p, 'leading-16')) dom$j.removeClass(p, 'leading-16');
|
|
10085
|
+
if (val === '1.7') if (dom$j.hasClass(p, 'leading-17')) dom$j.removeClass(p, 'leading-17');
|
|
10086
|
+
if (val === '1.8') if (dom$j.hasClass(p, 'leading-18')) dom$j.removeClass(p, 'leading-18');
|
|
10087
|
+
if (val === '1.9') if (dom$j.hasClass(p, 'leading-19')) dom$j.removeClass(p, 'leading-19');
|
|
10088
|
+
if (val === '2') if (dom$j.hasClass(p, 'leading-20')) dom$j.removeClass(p, 'leading-20');
|
|
10089
|
+
}); // realtime
|
|
10090
|
+
|
|
10091
|
+
const btns = modalEditBox.querySelectorAll('.cmd-box-lineheight');
|
|
10092
|
+
btns.forEach(btn => {
|
|
10093
|
+
dom$j.removeClass(btn, 'on');
|
|
10094
|
+
});
|
|
10095
|
+
if (val !== '') dom$j.addClass(btnBoxLineHeight, 'on'); //Trigger Change event
|
|
9976
10096
|
|
|
9977
10097
|
this.builder.settings.onChange();
|
|
9978
10098
|
});
|
|
@@ -11383,6 +11503,106 @@ class EditBox {
|
|
|
11383
11503
|
}
|
|
11384
11504
|
}
|
|
11385
11505
|
|
|
11506
|
+
let btns = modalEditBox.querySelectorAll('.cmd-box-textcolor');
|
|
11507
|
+
btns.forEach(btn => {
|
|
11508
|
+
dom$j.removeClass(btn, 'on');
|
|
11509
|
+
});
|
|
11510
|
+
|
|
11511
|
+
if (dom$j.hasClass(activeBox, 'is-dark-text')) {
|
|
11512
|
+
const btn = modalEditBox.querySelector('.cmd-box-textcolor[data-value="dark"]');
|
|
11513
|
+
dom$j.addClass(btn, 'on');
|
|
11514
|
+
} else if (dom$j.hasClass(activeBox, 'is-light-text')) {
|
|
11515
|
+
const btn = modalEditBox.querySelector('.cmd-box-textcolor[data-value="light"]');
|
|
11516
|
+
dom$j.addClass(btn, 'on');
|
|
11517
|
+
}
|
|
11518
|
+
|
|
11519
|
+
btns = modalEditBox.querySelectorAll('.cmd-box-textalign');
|
|
11520
|
+
btns.forEach(btn => {
|
|
11521
|
+
dom$j.removeClass(btn, 'on');
|
|
11522
|
+
});
|
|
11523
|
+
|
|
11524
|
+
if (dom$j.hasClass(activeBox, 'is-align-left')) {
|
|
11525
|
+
const btn = modalEditBox.querySelector('.cmd-box-textalign[data-value="left"]');
|
|
11526
|
+
dom$j.addClass(btn, 'on');
|
|
11527
|
+
} else if (dom$j.hasClass(activeBox, 'is-align-center')) {
|
|
11528
|
+
const btn = modalEditBox.querySelector('.cmd-box-textalign[data-value="center"]');
|
|
11529
|
+
dom$j.addClass(btn, 'on');
|
|
11530
|
+
} else if (dom$j.hasClass(activeBox, 'is-align-right')) {
|
|
11531
|
+
const btn = modalEditBox.querySelector('.cmd-box-textalign[data-value="right"]');
|
|
11532
|
+
dom$j.addClass(btn, 'on');
|
|
11533
|
+
} else if (dom$j.hasClass(activeBox, 'is-align-justify')) {
|
|
11534
|
+
const btn = modalEditBox.querySelector('.cmd-box-textalign[data-value="justify"]');
|
|
11535
|
+
dom$j.addClass(btn, 'on');
|
|
11536
|
+
}
|
|
11537
|
+
|
|
11538
|
+
if (container) {
|
|
11539
|
+
btns = modalEditBox.querySelectorAll('.cmd-box-parasize');
|
|
11540
|
+
btns.forEach(btn => {
|
|
11541
|
+
dom$j.removeClass(btn, 'on');
|
|
11542
|
+
});
|
|
11543
|
+
|
|
11544
|
+
if (dom$j.hasClass(container, 'size-16')) {
|
|
11545
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="16"]');
|
|
11546
|
+
dom$j.addClass(btn, 'on');
|
|
11547
|
+
} else if (dom$j.hasClass(container, 'size-17')) {
|
|
11548
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="17"]');
|
|
11549
|
+
dom$j.addClass(btn, 'on');
|
|
11550
|
+
} else if (dom$j.hasClass(container, 'size-18')) {
|
|
11551
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="18"]');
|
|
11552
|
+
dom$j.addClass(btn, 'on');
|
|
11553
|
+
} else if (dom$j.hasClass(container, 'size-19')) {
|
|
11554
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="19"]');
|
|
11555
|
+
dom$j.addClass(btn, 'on');
|
|
11556
|
+
} else if (dom$j.hasClass(container, 'size-20')) {
|
|
11557
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="20"]');
|
|
11558
|
+
dom$j.addClass(btn, 'on');
|
|
11559
|
+
} else if (dom$j.hasClass(container, 'size-21')) {
|
|
11560
|
+
const btn = modalEditBox.querySelector('.cmd-box-parasize[data-value="21"]');
|
|
11561
|
+
dom$j.addClass(btn, 'on');
|
|
11562
|
+
} // realtime
|
|
11563
|
+
|
|
11564
|
+
|
|
11565
|
+
btns = modalEditBox.querySelectorAll('.cmd-box-lineheight');
|
|
11566
|
+
btns.forEach(btn => {
|
|
11567
|
+
dom$j.removeClass(btn, 'on');
|
|
11568
|
+
});
|
|
11569
|
+
|
|
11570
|
+
if (dom$j.hasClass(container, 'leading-none')) {
|
|
11571
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1"]');
|
|
11572
|
+
dom$j.addClass(btn, 'on');
|
|
11573
|
+
} else if (dom$j.hasClass(container, 'leading-11')) {
|
|
11574
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.1"]');
|
|
11575
|
+
dom$j.addClass(btn, 'on');
|
|
11576
|
+
} else if (dom$j.hasClass(container, 'leading-12')) {
|
|
11577
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.2"]');
|
|
11578
|
+
dom$j.addClass(btn, 'on');
|
|
11579
|
+
} else if (dom$j.hasClass(container, 'leading-13')) {
|
|
11580
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.3"]');
|
|
11581
|
+
dom$j.addClass(btn, 'on');
|
|
11582
|
+
} else if (dom$j.hasClass(container, 'leading-14')) {
|
|
11583
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.4"]');
|
|
11584
|
+
dom$j.addClass(btn, 'on');
|
|
11585
|
+
} else if (dom$j.hasClass(container, 'leading-15')) {
|
|
11586
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.5"]');
|
|
11587
|
+
dom$j.addClass(btn, 'on');
|
|
11588
|
+
} else if (dom$j.hasClass(container, 'leading-16')) {
|
|
11589
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.6"]');
|
|
11590
|
+
dom$j.addClass(btn, 'on');
|
|
11591
|
+
} else if (dom$j.hasClass(container, 'leading-17')) {
|
|
11592
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.7"]');
|
|
11593
|
+
dom$j.addClass(btn, 'on');
|
|
11594
|
+
} else if (dom$j.hasClass(container, 'leading-18')) {
|
|
11595
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.8"]');
|
|
11596
|
+
dom$j.addClass(btn, 'on');
|
|
11597
|
+
} else if (dom$j.hasClass(container, 'leading-19')) {
|
|
11598
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="1.9"]');
|
|
11599
|
+
dom$j.addClass(btn, 'on');
|
|
11600
|
+
} else if (dom$j.hasClass(container, 'leading-20')) {
|
|
11601
|
+
const btn = modalEditBox.querySelector('.cmd-box-lineheight[data-value="2"]');
|
|
11602
|
+
dom$j.addClass(btn, 'on');
|
|
11603
|
+
}
|
|
11604
|
+
}
|
|
11605
|
+
|
|
11386
11606
|
modalEditBox.querySelector('#chkOptimizeTextSize').checked = false;
|
|
11387
11607
|
|
|
11388
11608
|
if (container) {
|