@innovastudio/contentbox 1.5.9 → 1.5.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
|
@@ -10779,14 +10779,14 @@ class EditBox {
|
|
|
10779
10779
|
|
|
10780
10780
|
` ) + '<div style="padding:0;width:100%;">' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animation') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div style="display:flex">' + '<div id="divBoxSize" style="margin-right: 50px;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxMove">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Left') + '" class="cmd-box-left" style="width:40px;">←</button>' + '<button title="' + out('Right') + '" class="cmd-box-right" style="width:40px;border-left:none">→</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '</div>';
|
|
10781
10781
|
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>';
|
|
10782
|
-
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;justify-content:flex-end;">' + '<button title="' + out('Add Text') + '" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Remove Text') + '" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" 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('Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
|
|
10782
|
+
html += '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div style="display:flex;align-items:flex-end;">' + '<div class="box-bgimage-preview"></div>' + '<label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> ' + out('Grayscale') + '</label>' + '</div>' + '<div style="display:flex;align-items: flex-end;">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Select') + '" class="input-select">' + '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<div style="display:flex;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;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('Add 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:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Text') + '</span></button>' + '<button title="' + out('Add Code') + '" class="cmd-box-addcode" 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('Add Code') + '</span></button>' + '<button title="' + out('Remove Code') + '" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>' + out('Remove Code') + '</span></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>';
|
|
10783
10783
|
html += '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">' + '<input id="hidRefId5_box" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>' + '<input onclick="blur()" title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
|
|
10784
10784
|
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>';
|
|
10785
10785
|
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>';
|
|
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="
|
|
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;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 => {
|