@innovastudio/contentbox 1.0.56 → 1.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@innovastudio/contentbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.57",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "public/contentbox/contentbox.esm.js",
|
|
6
6
|
"files": [
|
|
@@ -38,8 +38,7 @@
|
|
|
38
38
|
"webpack-dev-server": "^4.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@
|
|
42
|
-
"@innovastudio/contentbuilder": "^1.0.74",
|
|
41
|
+
"@innovastudio/contentbuilder": "^1.0.77",
|
|
43
42
|
"axios": "^0.21.4",
|
|
44
43
|
"cors": "^2.8.5",
|
|
45
44
|
"express": "^4.17.1",
|
|
@@ -278,6 +278,26 @@ const prepareSvgIcons$1 = builder => {
|
|
|
278
278
|
<symbol viewBox="0 0 2048.0 2048.0" id="icon-snippets"><g id="document" transform="matrix(1,0,0,1,1024.0,1024.0)"> <path d="M-727.581,329.502 L318.058,329.502 L318.058,-527.853 L-727.581,-527.853 L-727.581,329.502 Z " fill="#ffffff" fill-opacity="1.00" stroke-width="85.63" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" /> <path d="M-347.749,652.594 L697.89,652.594 L697.89,-204.761 L-347.749,-204.761 L-347.749,652.594 Z " fill="#ffffff" fill-opacity="1.00" stroke-width="85.63" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" /> </g></symbol>
|
|
279
279
|
<symbol viewBox="0 0 512 512" id="ion-ios-copy-outline"><path d="M304 96h-16v80h80v-16h-64z"></path><path d="M325.3 64H160v48h-48v336h240v-48h48V139l-74.7-75zM336 432H128V128h32v272h176v32zm48-48H176V80h142.7l65.3 65.6V384z"></path></symbol>
|
|
280
280
|
|
|
281
|
+
<symbol viewBox="0 0 24 24" id="icon-arrow-bar-to-up" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
282
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
283
|
+
<line x1="12" y1="10" x2="12" y2="20" />
|
|
284
|
+
<line x1="12" y1="10" x2="16" y2="14" />
|
|
285
|
+
<line x1="12" y1="10" x2="8" y2="14" />
|
|
286
|
+
<line x1="4" y1="4" x2="20" y2="4" />
|
|
287
|
+
</symbol>
|
|
288
|
+
<symbol viewBox="0 0 24 24" id="icon-arrow-bar-to-down" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
289
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
290
|
+
<line x1="4" y1="20" x2="20" y2="20" />
|
|
291
|
+
<line x1="12" y1="14" x2="12" y2="4" />
|
|
292
|
+
<line x1="12" y1="14" x2="16" y2="10" />
|
|
293
|
+
<line x1="12" y1="14" x2="8" y2="10" />
|
|
294
|
+
</symbol>
|
|
295
|
+
<symbol viewBox="0 0 24 24" id="icon-space-between" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
296
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
297
|
+
<line x1="4" y1="4" x2="20" y2="4" />
|
|
298
|
+
<line x1="4" y1="20" x2="20" y2="20" />
|
|
299
|
+
</symbol>
|
|
300
|
+
|
|
281
301
|
</defs>
|
|
282
302
|
</svg>`;
|
|
283
303
|
const builderStuff = builder.builderStuff;
|
|
@@ -7987,7 +8007,7 @@ class EditBox {
|
|
|
7987
8007
|
this.builderStuff = this.builder.builderStuff;
|
|
7988
8008
|
const builderStuff = this.builderStuff;
|
|
7989
8009
|
let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<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('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<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="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1020</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="1400" style="width:40px;border-top:none;border-left:none">1400</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>' + '<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>' + '<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" 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" 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>';
|
|
7990
|
-
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>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Optimize text sizes on large screen.') + '</label>' + '</div>' + '<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>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</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>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change 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>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;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: 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 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') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
8010
|
+
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>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> ' + out('Optimize text sizes on large screen.') + '</label>' + '</div>' + '<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>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContainerTextAlign" style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</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>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change 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>' + '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:20px;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>' + '<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>' + '<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') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
|
|
7991
8011
|
dom$G.appendHtml(builderStuff, html); // Box Tool
|
|
7992
8012
|
|
|
7993
8013
|
this.builder.boxTool = builderStuff.querySelector('#divBoxTool');
|
|
@@ -8250,6 +8270,62 @@ class EditBox {
|
|
|
8250
8270
|
|
|
8251
8271
|
this.builder.settings.onChange();
|
|
8252
8272
|
});
|
|
8273
|
+
const btnContentJustify = modalEditBox.querySelectorAll('.cmd-content-justify');
|
|
8274
|
+
btnContentJustify.forEach(btn => {
|
|
8275
|
+
btn.addEventListener('click', () => {
|
|
8276
|
+
this.builder.editor.saveForUndo();
|
|
8277
|
+
let s = btn.getAttribute('data-value');
|
|
8278
|
+
let activeBox = this.builder.activeBox;
|
|
8279
|
+
let container = activeBox.querySelector('.is-container');
|
|
8280
|
+
container.style.justifyContent = s;
|
|
8281
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-content-justify');
|
|
8282
|
+
btnPos.forEach(btn => {
|
|
8283
|
+
dom$G.removeClass(btn, 'on');
|
|
8284
|
+
});
|
|
8285
|
+
dom$G.addClass(btn, 'on'); //Trigger Change event
|
|
8286
|
+
|
|
8287
|
+
this.builder.settings.onChange();
|
|
8288
|
+
});
|
|
8289
|
+
});
|
|
8290
|
+
const btnContentHeight = modalEditBox.querySelectorAll('.cmd-content-height');
|
|
8291
|
+
const divContentJustify = modalEditBox.querySelector('.div-content-justify');
|
|
8292
|
+
btnContentHeight.forEach(btn => {
|
|
8293
|
+
btn.addEventListener('click', () => {
|
|
8294
|
+
this.builder.editor.saveForUndo();
|
|
8295
|
+
let s = btn.getAttribute('data-value');
|
|
8296
|
+
let activeBox = this.builder.activeBox;
|
|
8297
|
+
let container = activeBox.querySelector('.is-container');
|
|
8298
|
+
|
|
8299
|
+
if (s === '') {
|
|
8300
|
+
container.style.height = '';
|
|
8301
|
+
container.style.display = '';
|
|
8302
|
+
container.style.flexDirection = '';
|
|
8303
|
+
container.style.justifyContent = '';
|
|
8304
|
+
divContentJustify.style.display = 'none';
|
|
8305
|
+
}
|
|
8306
|
+
|
|
8307
|
+
if (s === '100') {
|
|
8308
|
+
container.style.height = '100%';
|
|
8309
|
+
container.style.display = 'flex';
|
|
8310
|
+
container.style.flexDirection = 'column';
|
|
8311
|
+
container.style.justifyContent = 'space-between';
|
|
8312
|
+
divContentJustify.style.display = 'block';
|
|
8313
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-content-justify');
|
|
8314
|
+
btnPos.forEach(btn => {
|
|
8315
|
+
dom$G.removeClass(btn, 'on');
|
|
8316
|
+
});
|
|
8317
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="space-between"]'), 'on');
|
|
8318
|
+
}
|
|
8319
|
+
|
|
8320
|
+
let btnPos = modalEditBox.querySelectorAll('.cmd-content-height');
|
|
8321
|
+
btnPos.forEach(btn => {
|
|
8322
|
+
dom$G.removeClass(btn, 'on');
|
|
8323
|
+
});
|
|
8324
|
+
dom$G.addClass(btn, 'on'); //Trigger Change event
|
|
8325
|
+
|
|
8326
|
+
this.builder.settings.onChange();
|
|
8327
|
+
});
|
|
8328
|
+
});
|
|
8253
8329
|
const btnBoxContentPos = modalEditBox.querySelectorAll('.cmd-box-content-pos');
|
|
8254
8330
|
btnBoxContentPos.forEach(btn => {
|
|
8255
8331
|
btn.addEventListener('click', () => {
|
|
@@ -9512,6 +9588,42 @@ class EditBox {
|
|
|
9512
9588
|
} else {
|
|
9513
9589
|
chkBoxAddText.style.display = 'flex';
|
|
9514
9590
|
chkBoxRemoveText.style.display = 'none';
|
|
9591
|
+
} // Content Height & Justify
|
|
9592
|
+
|
|
9593
|
+
|
|
9594
|
+
let btnContentHeight = modalEditBox.querySelectorAll('.cmd-content-height');
|
|
9595
|
+
let divContentJustify = modalEditBox.querySelector('.div-content-justify');
|
|
9596
|
+
btnContentHeight.forEach(btn => {
|
|
9597
|
+
dom$G.removeClass(btn, 'on');
|
|
9598
|
+
});
|
|
9599
|
+
let btnContentJustify = modalEditBox.querySelectorAll('.cmd-content-justify');
|
|
9600
|
+
btnContentJustify.forEach(btn => {
|
|
9601
|
+
dom$G.removeClass(btn, 'on');
|
|
9602
|
+
});
|
|
9603
|
+
|
|
9604
|
+
if (container) {
|
|
9605
|
+
if (container.style.height) {
|
|
9606
|
+
if (container.style.height === '100%') {
|
|
9607
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-height[data-value="100"]'), 'on');
|
|
9608
|
+
}
|
|
9609
|
+
|
|
9610
|
+
divContentJustify.style.display = 'block';
|
|
9611
|
+
|
|
9612
|
+
if (container.style.justifyContent === 'flex-start') {
|
|
9613
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="flex-start"]'), 'on');
|
|
9614
|
+
}
|
|
9615
|
+
|
|
9616
|
+
if (container.style.justifyContent === 'flex-end') {
|
|
9617
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="flex-end"]'), 'on');
|
|
9618
|
+
}
|
|
9619
|
+
|
|
9620
|
+
if (container.style.justifyContent === 'space-between') {
|
|
9621
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-justify[data-value="space-between"]'), 'on');
|
|
9622
|
+
}
|
|
9623
|
+
} else {
|
|
9624
|
+
dom$G.addClass(modalEditBox.querySelector('.cmd-content-height[data-value=""]'), 'on');
|
|
9625
|
+
divContentJustify.style.display = 'none';
|
|
9626
|
+
}
|
|
9515
9627
|
}
|
|
9516
9628
|
} //edit
|
|
9517
9629
|
|
|
@@ -49008,7 +49120,7 @@ class Image {
|
|
|
49008
49120
|
<button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
|
|
49009
49121
|
<button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
|
|
49010
49122
|
</div>
|
|
49011
|
-
<div class="imageedit-preview" style="
|
|
49123
|
+
<div class="imageedit-preview" style="max-width:1000px;width: 100%;max-height: 550px;height: 100%;">
|
|
49012
49124
|
</div>
|
|
49013
49125
|
<div style="margin-top:7px;text-align:right;align-self:flex-end;">
|
|
49014
49126
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
|
@@ -49558,7 +49670,7 @@ class Image {
|
|
|
49558
49670
|
}
|
|
49559
49671
|
}
|
|
49560
49672
|
|
|
49561
|
-
preview.innerHTML = '<img src="" style="max-width:100
|
|
49673
|
+
preview.innerHTML = '<img src="" style="max-width:100%;object-fit:contain;height:100%;"/>';
|
|
49562
49674
|
let imagePreview = modalImageEdit.querySelector('img');
|
|
49563
49675
|
imagePreview.src = img.src;
|
|
49564
49676
|
this.cropper = new Cropper(imagePreview, {
|
|
@@ -62938,6 +63050,7 @@ class Rte {
|
|
|
62938
63050
|
let rteIconOptions;
|
|
62939
63051
|
let rteCustomTagOptions;
|
|
62940
63052
|
let rteZoomSlider;
|
|
63053
|
+
let inpZoomSlider;
|
|
62941
63054
|
|
|
62942
63055
|
if (!rteTool) {
|
|
62943
63056
|
let customtag_button = '';
|
|
@@ -63164,6 +63277,16 @@ class Rte {
|
|
|
63164
63277
|
</div>
|
|
63165
63278
|
</div>
|
|
63166
63279
|
|
|
63280
|
+
<div class="is-modal viewzoom">
|
|
63281
|
+
<div class="is-modal-content" style="max-width:250px;height:150px;display:flex;flex-flow:column;justify-content:center;">
|
|
63282
|
+
<div class="is-modal-bar is-draggable">${util.out('Zoom')}</div>
|
|
63283
|
+
|
|
63284
|
+
<div style="display:flex;flex-wrap:wrap;width:100%;padding-top:32px;">
|
|
63285
|
+
<input type="range" min="50" max="100" value="1" class="inp-zoom-slider is-rangeslider">
|
|
63286
|
+
</div>
|
|
63287
|
+
</div>
|
|
63288
|
+
</div>
|
|
63289
|
+
|
|
63167
63290
|
<div class="is-modal insertimage">
|
|
63168
63291
|
<div class="is-modal-content" style="max-width:560px;">
|
|
63169
63292
|
<div class="is-browse-area">
|
|
@@ -63224,7 +63347,8 @@ class Rte {
|
|
|
63224
63347
|
rteZoomOptions = builderStuff.querySelector('.rte-zoom-options');
|
|
63225
63348
|
rteIconOptions = builderStuff.querySelector('.rte-icon-options');
|
|
63226
63349
|
rteCustomTagOptions = builderStuff.querySelector('.rte-customtag-options');
|
|
63227
|
-
rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider');
|
|
63350
|
+
rteZoomSlider = builderStuff.querySelector('.rte-zoom-slider');
|
|
63351
|
+
inpZoomSlider = builderStuff.querySelector('.inp-zoom-slider'); // Prepare for tooltip
|
|
63228
63352
|
|
|
63229
63353
|
let elms = rteTool.querySelectorAll('[title]');
|
|
63230
63354
|
Array.prototype.forEach.call(elms, elm => {
|
|
@@ -63286,6 +63410,7 @@ class Rte {
|
|
|
63286
63410
|
this.rteIconOptions = rteIconOptions;
|
|
63287
63411
|
this.rteCustomTagOptions = rteCustomTagOptions;
|
|
63288
63412
|
this.rteZoomSlider = rteZoomSlider;
|
|
63413
|
+
this.inpZoomSlider = inpZoomSlider;
|
|
63289
63414
|
this.positionToolbar(); // Formatting
|
|
63290
63415
|
|
|
63291
63416
|
let btnRteFormatting = builderStuff.querySelectorAll('button.rte-formatting');
|
|
@@ -64037,6 +64162,91 @@ class Rte {
|
|
|
64037
64162
|
this.builder.onZoomEnd(scale);
|
|
64038
64163
|
}
|
|
64039
64164
|
}, 300);
|
|
64165
|
+
}; // Zoom Modal
|
|
64166
|
+
|
|
64167
|
+
|
|
64168
|
+
this.inpZoomSlider.onfocus = () => {
|
|
64169
|
+
if (this.builder.onZoomStart) {
|
|
64170
|
+
this.builder.onZoomStart();
|
|
64171
|
+
}
|
|
64172
|
+
|
|
64173
|
+
this.inpZoomSlider.blur();
|
|
64174
|
+
};
|
|
64175
|
+
|
|
64176
|
+
this.inpZoomSlider.oninput = () => {
|
|
64177
|
+
//scale: 0.5 - 1
|
|
64178
|
+
//val: 50 - 100
|
|
64179
|
+
let val = this.inpZoomSlider.value;
|
|
64180
|
+
let scale = val / 100;
|
|
64181
|
+
this.builder.opts.zoom = scale;
|
|
64182
|
+
localStorage.setItem('_zoom', scale); // Save
|
|
64183
|
+
// setZoomOnArea
|
|
64184
|
+
|
|
64185
|
+
this.builder.setZoomOnArea(); // hide tools
|
|
64186
|
+
|
|
64187
|
+
/*
|
|
64188
|
+
let tools = this.builderStuff.querySelectorAll('.is-tool');
|
|
64189
|
+
Array.prototype.forEach.call(tools, (tool) => {
|
|
64190
|
+
tool.style.display = '';
|
|
64191
|
+
});
|
|
64192
|
+
let tool = this.builderStuff.querySelector('.is-column-tool');
|
|
64193
|
+
tool.style.display = 'none';
|
|
64194
|
+
tools = document.querySelectorAll('.is-row-tool');
|
|
64195
|
+
tools.forEach(tool=>{
|
|
64196
|
+
tool.style.display = 'none';
|
|
64197
|
+
});
|
|
64198
|
+
tools = document.querySelectorAll('.is-rowadd-tool');
|
|
64199
|
+
tools.forEach(tool=>{
|
|
64200
|
+
tool.style.opacity = 0;
|
|
64201
|
+
});
|
|
64202
|
+
*/
|
|
64203
|
+
|
|
64204
|
+
if (this.builder.onZoom) {
|
|
64205
|
+
let val = this.inpZoomSlider.value;
|
|
64206
|
+
let scale = val / 100;
|
|
64207
|
+
this.builder.onZoom(scale);
|
|
64208
|
+
}
|
|
64209
|
+
};
|
|
64210
|
+
|
|
64211
|
+
this.inpZoomSlider.onchange = () => {
|
|
64212
|
+
setTimeout(() => {
|
|
64213
|
+
// setZoomOnControl
|
|
64214
|
+
if (this.builder.opts.page !== '') {
|
|
64215
|
+
const wrapper = document.querySelector(this.builder.opts.page);
|
|
64216
|
+
this.builder.setZoomOnControl(wrapper);
|
|
64217
|
+
} else {
|
|
64218
|
+
const builders = document.querySelectorAll(this.builder.opts.container);
|
|
64219
|
+
builders.forEach(builder => {
|
|
64220
|
+
this.builder.setZoomOnControl(builder);
|
|
64221
|
+
});
|
|
64222
|
+
} // show & reposition
|
|
64223
|
+
|
|
64224
|
+
/*
|
|
64225
|
+
this.builder.elmTool.repositionElementTool();
|
|
64226
|
+
let col = this.builder.activeCol;
|
|
64227
|
+
let tool = this.builderStuff.querySelector('.is-column-tool');
|
|
64228
|
+
tool.style.display = '';
|
|
64229
|
+
tool.style.top = (col.getBoundingClientRect().top - 29 + window.pageYOffset) + 'px';
|
|
64230
|
+
tool.style.left = (col.getBoundingClientRect().left - 1) + 'px';
|
|
64231
|
+
let tools = document.querySelectorAll('.is-row-tool');
|
|
64232
|
+
tools.forEach(tool=>{
|
|
64233
|
+
tool.style.display = '';
|
|
64234
|
+
});
|
|
64235
|
+
tools = document.querySelectorAll('.is-rowadd-tool');
|
|
64236
|
+
tools.forEach(tool=>{
|
|
64237
|
+
tool.style.opacity = '';
|
|
64238
|
+
});
|
|
64239
|
+
*/
|
|
64240
|
+
|
|
64241
|
+
|
|
64242
|
+
if (this.builder.onZoomEnd) {
|
|
64243
|
+
let val = this.inpZoomSlider.value;
|
|
64244
|
+
let scale = val / 100;
|
|
64245
|
+
this.builder.onZoomEnd(scale);
|
|
64246
|
+
}
|
|
64247
|
+
|
|
64248
|
+
this.rteZoomSlider.value = this.inpZoomSlider.value;
|
|
64249
|
+
}, 300);
|
|
64040
64250
|
}; // Text Settings
|
|
64041
64251
|
|
|
64042
64252
|
|
|
@@ -67053,6 +67263,13 @@ class Rte {
|
|
|
67053
67263
|
}
|
|
67054
67264
|
}
|
|
67055
67265
|
|
|
67266
|
+
viewZoom() {
|
|
67267
|
+
if (this.builder.onZoomOpen) this.builder.onZoomOpen();
|
|
67268
|
+
this.inpZoomSlider.value = this.builder.opts.zoom * 100;
|
|
67269
|
+
const modal = this.builderStuff.querySelector('.viewzoom');
|
|
67270
|
+
this.util.showModal(modal, false, null, false);
|
|
67271
|
+
}
|
|
67272
|
+
|
|
67056
67273
|
}
|
|
67057
67274
|
|
|
67058
67275
|
const dom$4 = new Dom();
|
|
@@ -69505,6 +69722,10 @@ class ContentBuilder {
|
|
|
69505
69722
|
this.preferences.view();
|
|
69506
69723
|
}
|
|
69507
69724
|
|
|
69725
|
+
viewZoom() {
|
|
69726
|
+
this.rte.viewZoom();
|
|
69727
|
+
}
|
|
69728
|
+
|
|
69508
69729
|
loadSnippets(snippetFile) {
|
|
69509
69730
|
if (this.preview) return;
|
|
69510
69731
|
let snippetPanel = document.querySelector(this.opts.snippetList);
|
|
@@ -74527,7 +74748,14 @@ class ContentBox {
|
|
|
74527
74748
|
rePositionTool() {
|
|
74528
74749
|
let rowActive = this.wrapperEl.querySelector('.row-active'); // when zooming, there should be a focused row/col
|
|
74529
74750
|
|
|
74530
|
-
|
|
74751
|
+
let box;
|
|
74752
|
+
|
|
74753
|
+
if (rowActive) {
|
|
74754
|
+
box = dom.parentsHasClass(rowActive, 'is-box');
|
|
74755
|
+
} else {
|
|
74756
|
+
box = this.activeBox;
|
|
74757
|
+
}
|
|
74758
|
+
|
|
74531
74759
|
this.positionTool(box);
|
|
74532
74760
|
}
|
|
74533
74761
|
|
|
@@ -74806,6 +75034,10 @@ class ContentBox {
|
|
|
74806
75034
|
return html;
|
|
74807
75035
|
}
|
|
74808
75036
|
|
|
75037
|
+
viewZoom() {
|
|
75038
|
+
this.editor.viewZoom();
|
|
75039
|
+
}
|
|
75040
|
+
|
|
74809
75041
|
destroy() {
|
|
74810
75042
|
document.removeEventListener('click', this.doDocumentClick, false);
|
|
74811
75043
|
window.removeEventListener('scroll', this.doWindowScroll, false);
|