@innovastudio/contentbox 1.1.7 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@innovastudio/contentbox",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "public/contentbox/contentbox.esm.js",
|
|
6
6
|
"files": [
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"webpack-dev-server": "^4.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@innovastudio/contentbuilder": "^1.0.
|
|
41
|
+
"@innovastudio/contentbuilder": "^1.0.88",
|
|
42
42
|
"axios": "^0.21.4",
|
|
43
43
|
"cors": "^2.8.5",
|
|
44
44
|
"express": "^4.17.1",
|
|
@@ -1667,6 +1667,21 @@ class SideBar {
|
|
|
1667
1667
|
var googleFonts = result[0].googleFonts;
|
|
1668
1668
|
var contentCss = result[0].contentCss;
|
|
1669
1669
|
var contentClass = result[0].contentClass;
|
|
1670
|
+
|
|
1671
|
+
//To Tailwind
|
|
1672
|
+
if (framework == 'tailwind') {
|
|
1673
|
+
html = html.replace(new RegExp(' container', 'g'), ' container');
|
|
1674
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
|
|
1675
|
+
html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
|
|
1676
|
+
html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');
|
|
1677
|
+
html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');
|
|
1678
|
+
html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');
|
|
1679
|
+
html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed
|
|
1680
|
+
html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');
|
|
1681
|
+
html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');
|
|
1682
|
+
html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');
|
|
1683
|
+
html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');
|
|
1684
|
+
}
|
|
1670
1685
|
|
|
1671
1686
|
//To Bootstrap
|
|
1672
1687
|
if (framework == 'bootstrap') {
|
|
@@ -8042,7 +8057,7 @@ class EditBox {
|
|
|
8042
8057
|
this.builder = builder;
|
|
8043
8058
|
this.builderStuff = this.builder.builderStuff;
|
|
8044
8059
|
const builderStuff = this.builderStuff;
|
|
8045
|
-
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>';
|
|
8060
|
+
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') + ': <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>' + '<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>';
|
|
8046
8061
|
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: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>' + '<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>' + '<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') + '</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>' + '';
|
|
8047
8062
|
dom$H.appendHtml(builderStuff, html); // Box Tool
|
|
8048
8063
|
|
|
@@ -8226,7 +8241,8 @@ class EditBox {
|
|
|
8226
8241
|
container.style.maxWidth = '';
|
|
8227
8242
|
dom$H.addClass(container, 'is-content-none'); //new
|
|
8228
8243
|
|
|
8229
|
-
modalEditBox.querySelector('.inp-box-size').value = '';
|
|
8244
|
+
modalEditBox.querySelector('.inp-box-size').value = '';
|
|
8245
|
+
modalEditBox.querySelector('.val-box-size').innerHTML = ''; //Trigger Change event
|
|
8230
8246
|
|
|
8231
8247
|
this.builder.settings.onChange();
|
|
8232
8248
|
return;
|
|
@@ -8252,13 +8268,16 @@ class EditBox {
|
|
|
8252
8268
|
|
|
8253
8269
|
if (val <= 300) val = 300;
|
|
8254
8270
|
if (val >= 2700) val = 2700;
|
|
8255
|
-
}
|
|
8271
|
+
} // container.style.maxWidth = val +'px';
|
|
8272
|
+
|
|
8273
|
+
|
|
8274
|
+
container.style.maxWidth = ''; //remove inline style
|
|
8256
8275
|
|
|
8257
|
-
container.style.maxWidth = val + 'px';
|
|
8258
8276
|
dom$H.addClass(container, 'is-content-' + val); //new
|
|
8259
8277
|
// dom.addClass(container, 'v2'); //new
|
|
8260
8278
|
|
|
8261
|
-
modalEditBox.querySelector('.inp-box-size').value = val;
|
|
8279
|
+
modalEditBox.querySelector('.inp-box-size').value = val;
|
|
8280
|
+
modalEditBox.querySelector('.val-box-size').innerHTML = val; //Trigger Change event
|
|
8262
8281
|
|
|
8263
8282
|
this.builder.settings.onChange();
|
|
8264
8283
|
});
|
|
@@ -9489,6 +9508,9 @@ class EditBox {
|
|
|
9489
9508
|
if (container) {
|
|
9490
9509
|
let maxWidth = parseInt(container.style.maxWidth);
|
|
9491
9510
|
if (!isNaN(maxWidth)) inpBoxSize.value = parseInt(container.style.maxWidth);
|
|
9511
|
+
modalEditBox.querySelector('.val-box-size').innerHTML = '';
|
|
9512
|
+
maxWidth = parseInt(window.getComputedStyle(container, null).getPropertyValue('max-width'));
|
|
9513
|
+
if (!isNaN(maxWidth)) modalEditBox.querySelector('.val-box-size').innerHTML = maxWidth;
|
|
9492
9514
|
} // Animate Box
|
|
9493
9515
|
|
|
9494
9516
|
|
|
@@ -23427,6 +23449,7 @@ class HtmlUtil {
|
|
|
23427
23449
|
const util = this.builder.util;
|
|
23428
23450
|
const builderStuff = this.builder.builderStuff;
|
|
23429
23451
|
const viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
|
|
23452
|
+
util.showModal(viewhtmlnormal, true, null, false);
|
|
23430
23453
|
let iframe = viewhtmlnormal.querySelector('iframe');
|
|
23431
23454
|
iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
|
|
23432
23455
|
|
|
@@ -23435,7 +23458,6 @@ class HtmlUtil {
|
|
|
23435
23458
|
doc.write(this.getIframeHtml()); // use the same html as viewhtmllarger
|
|
23436
23459
|
|
|
23437
23460
|
doc.close();
|
|
23438
|
-
util.showModal(viewhtmlnormal, true, null, false);
|
|
23439
23461
|
}
|
|
23440
23462
|
|
|
23441
23463
|
viewHtmlLarger() {
|
|
@@ -23642,59 +23664,59 @@ class HtmlUtil {
|
|
|
23642
23664
|
|
|
23643
23665
|
if (this.builder.cleanHtmlFormatting) {
|
|
23644
23666
|
// this cleanHtmlFormatting flag only use for output, not during editing
|
|
23645
|
-
if (this.builder.
|
|
23667
|
+
if (this.builder.useCssClasses) {
|
|
23646
23668
|
// Clean all uneeded normal classes
|
|
23647
|
-
let elmNormals = content.querySelectorAll(`.${this.builder.
|
|
23669
|
+
let elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontWeight.defaultNormal}`);
|
|
23648
23670
|
Array.prototype.forEach.call(elmNormals, elm => {
|
|
23649
23671
|
let decor = false;
|
|
23650
23672
|
|
|
23651
|
-
if (elm.closest(`.${this.builder.
|
|
23673
|
+
if (elm.closest(`.${this.builder.cssClasses.fontWeight.defaultBold}`)) {
|
|
23652
23674
|
decor = true;
|
|
23653
23675
|
}
|
|
23654
23676
|
|
|
23655
23677
|
if (!decor) {
|
|
23656
|
-
dom$F.removeClass(elm, this.builder.
|
|
23678
|
+
dom$F.removeClass(elm, this.builder.cssClasses.fontWeight.defaultNormal);
|
|
23657
23679
|
}
|
|
23658
23680
|
});
|
|
23659
|
-
elmNormals = content.querySelectorAll(`.${this.builder.
|
|
23681
|
+
elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontStyle.normal}`);
|
|
23660
23682
|
Array.prototype.forEach.call(elmNormals, elm => {
|
|
23661
23683
|
let decor = false;
|
|
23662
23684
|
|
|
23663
|
-
if (elm.closest(`.${this.builder.
|
|
23685
|
+
if (elm.closest(`.${this.builder.cssClasses.fontStyle.italic}`)) {
|
|
23664
23686
|
decor = true;
|
|
23665
23687
|
}
|
|
23666
23688
|
|
|
23667
23689
|
if (!decor) {
|
|
23668
|
-
dom$F.removeClass(elm, this.builder.
|
|
23690
|
+
dom$F.removeClass(elm, this.builder.cssClasses.fontStyle.normal);
|
|
23669
23691
|
}
|
|
23670
23692
|
});
|
|
23671
|
-
elmNormals = content.querySelectorAll(`.${this.builder.
|
|
23693
|
+
elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
|
|
23672
23694
|
Array.prototype.forEach.call(elmNormals, elm => {
|
|
23673
23695
|
let decor = false;
|
|
23674
23696
|
|
|
23675
|
-
if (elm.closest(`.${this.builder.
|
|
23697
|
+
if (elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
|
|
23676
23698
|
decor = true;
|
|
23677
23699
|
}
|
|
23678
23700
|
|
|
23679
23701
|
if (!decor) {
|
|
23680
|
-
dom$F.removeClass(elm, this.builder.
|
|
23702
|
+
dom$F.removeClass(elm, this.builder.cssClasses.textDecoration.normal);
|
|
23681
23703
|
}
|
|
23682
23704
|
});
|
|
23683
|
-
elmNormals = content.querySelectorAll(`.${this.builder.
|
|
23705
|
+
elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textTransform.normal}`);
|
|
23684
23706
|
Array.prototype.forEach.call(elmNormals, elm => {
|
|
23685
23707
|
let decor = false;
|
|
23686
23708
|
|
|
23687
|
-
if (elm.closest(`.${this.builder.
|
|
23709
|
+
if (elm.closest(`.${this.builder.cssClasses.textTransform.uppercase},.${this.builder.cssClasses.textTransform.lowercase},.${this.builder.cssClasses.textTransform.capitalize}`)) {
|
|
23688
23710
|
decor = true;
|
|
23689
23711
|
}
|
|
23690
23712
|
|
|
23691
23713
|
if (!decor) {
|
|
23692
|
-
dom$F.removeClass(elm, this.builder.
|
|
23714
|
+
dom$F.removeClass(elm, this.builder.cssClasses.textTransform.normal);
|
|
23693
23715
|
}
|
|
23694
23716
|
});
|
|
23695
|
-
elmNormals = content.querySelectorAll(`.${this.builder.
|
|
23717
|
+
elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
|
|
23696
23718
|
Array.prototype.forEach.call(elmNormals, elm => {
|
|
23697
|
-
dom$F.removeClass(elm, this.builder.
|
|
23719
|
+
dom$F.removeClass(elm, this.builder.cssClasses.extend.unset);
|
|
23698
23720
|
});
|
|
23699
23721
|
} // Clean unused spans
|
|
23700
23722
|
|
|
@@ -68966,8 +68988,8 @@ class Rte {
|
|
|
68966
68988
|
var text = dom$5.getSelected();
|
|
68967
68989
|
|
|
68968
68990
|
if (command === 'bold') {
|
|
68969
|
-
if (this.builder.
|
|
68970
|
-
dom$5.execCommandToggle('fontWeight', '', this.builder.
|
|
68991
|
+
if (this.builder.useCssClasses) {
|
|
68992
|
+
dom$5.execCommandToggle('fontWeight', '', this.builder.cssClasses);
|
|
68971
68993
|
} else {
|
|
68972
68994
|
if (text.trim() === '') {
|
|
68973
68995
|
var tagname = elm.tagName.toLowerCase();
|
|
@@ -68989,8 +69011,8 @@ class Rte {
|
|
|
68989
69011
|
}
|
|
68990
69012
|
|
|
68991
69013
|
if (command === 'italic') {
|
|
68992
|
-
if (this.builder.
|
|
68993
|
-
dom$5.execCommandToggle('fontStyle', '', this.builder.
|
|
69014
|
+
if (this.builder.useCssClasses) {
|
|
69015
|
+
dom$5.execCommandToggle('fontStyle', '', this.builder.cssClasses);
|
|
68994
69016
|
} else {
|
|
68995
69017
|
if (text.trim() === '') {
|
|
68996
69018
|
tagname = elm.tagName.toLowerCase();
|
|
@@ -69014,8 +69036,8 @@ class Rte {
|
|
|
69014
69036
|
}
|
|
69015
69037
|
|
|
69016
69038
|
if (command === 'underline') {
|
|
69017
|
-
if (this.builder.
|
|
69018
|
-
dom$5.execCommandToggle('textUnderline', '', this.builder.
|
|
69039
|
+
if (this.builder.useCssClasses) {
|
|
69040
|
+
dom$5.execCommandToggle('textUnderline', '', this.builder.cssClasses);
|
|
69019
69041
|
} else {
|
|
69020
69042
|
if (text.trim() === '') {
|
|
69021
69043
|
tagname = elm.tagName.toLowerCase();
|
|
@@ -69037,8 +69059,8 @@ class Rte {
|
|
|
69037
69059
|
}
|
|
69038
69060
|
|
|
69039
69061
|
if (command === 'strikethrough') {
|
|
69040
|
-
if (this.builder.
|
|
69041
|
-
dom$5.execCommandToggle('textLinethrough', '', this.builder.
|
|
69062
|
+
if (this.builder.useCssClasses) {
|
|
69063
|
+
dom$5.execCommandToggle('textLinethrough', '', this.builder.cssClasses);
|
|
69042
69064
|
} else {
|
|
69043
69065
|
if (text.trim() === '') {
|
|
69044
69066
|
tagname = elm.tagName.toLowerCase();
|
|
@@ -69060,24 +69082,24 @@ class Rte {
|
|
|
69060
69082
|
}
|
|
69061
69083
|
|
|
69062
69084
|
if (command === 'superscript') {
|
|
69063
|
-
if (this.builder.
|
|
69064
|
-
dom$5.execCommandToggle('extend', 'superscript', this.builder.
|
|
69085
|
+
if (this.builder.useCssClasses) {
|
|
69086
|
+
dom$5.execCommandToggle('extend', 'superscript', this.builder.cssClasses);
|
|
69065
69087
|
} else {
|
|
69066
69088
|
document.execCommand('superscript', false, null);
|
|
69067
69089
|
}
|
|
69068
69090
|
}
|
|
69069
69091
|
|
|
69070
69092
|
if (command === 'subscript') {
|
|
69071
|
-
if (this.builder.
|
|
69072
|
-
dom$5.execCommandToggle('extend', 'subscript', this.builder.
|
|
69093
|
+
if (this.builder.useCssClasses) {
|
|
69094
|
+
dom$5.execCommandToggle('extend', 'subscript', this.builder.cssClasses);
|
|
69073
69095
|
} else {
|
|
69074
69096
|
document.execCommand('subscript', false, null);
|
|
69075
69097
|
}
|
|
69076
69098
|
}
|
|
69077
69099
|
|
|
69078
69100
|
if (command === 'uppercase') {
|
|
69079
|
-
if (this.builder.
|
|
69080
|
-
dom$5.execCommandToggle('textTransform', '', this.builder.
|
|
69101
|
+
if (this.builder.useCssClasses) {
|
|
69102
|
+
dom$5.execCommandToggle('textTransform', '', this.builder.cssClasses);
|
|
69081
69103
|
} else {
|
|
69082
69104
|
let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
|
|
69083
69105
|
|
|
@@ -69096,10 +69118,10 @@ class Rte {
|
|
|
69096
69118
|
}
|
|
69097
69119
|
|
|
69098
69120
|
if (command === 'clean') {
|
|
69099
|
-
if (this.builder.
|
|
69121
|
+
if (this.builder.useCssClasses) {
|
|
69100
69122
|
document.execCommand('removeFormat', false, null); // optional: backward compatible (for cleaning old b, i tags)
|
|
69101
69123
|
|
|
69102
|
-
dom$5.execCommandToggle('clean', '', this.builder.
|
|
69124
|
+
dom$5.execCommandToggle('clean', '', this.builder.cssClasses);
|
|
69103
69125
|
} else {
|
|
69104
69126
|
if (text.trim() === '') {
|
|
69105
69127
|
elm.style.cssText = '';
|
|
@@ -69204,16 +69226,16 @@ class Rte {
|
|
|
69204
69226
|
element = element.parentNode;
|
|
69205
69227
|
}
|
|
69206
69228
|
|
|
69207
|
-
if (this.builder.
|
|
69229
|
+
if (this.builder.useCssClasses) {
|
|
69208
69230
|
element.style.textAlign = '';
|
|
69209
|
-
dom$5.removeClass(element, this.builder.
|
|
69210
|
-
dom$5.removeClass(element, this.builder.
|
|
69211
|
-
dom$5.removeClass(element, this.builder.
|
|
69212
|
-
dom$5.removeClass(element, this.builder.
|
|
69213
|
-
if (command === 'left') dom$5.addClass(element, this.builder.
|
|
69214
|
-
if (command === 'center') dom$5.addClass(element, this.builder.
|
|
69215
|
-
if (command === 'right') dom$5.addClass(element, this.builder.
|
|
69216
|
-
if (command === 'justify') dom$5.addClass(element, this.builder.
|
|
69231
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
|
|
69232
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
|
|
69233
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
|
|
69234
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69235
|
+
if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
|
|
69236
|
+
if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
|
|
69237
|
+
if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
|
|
69238
|
+
if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69217
69239
|
} else {
|
|
69218
69240
|
element.style.textAlign = command;
|
|
69219
69241
|
}
|
|
@@ -69259,16 +69281,16 @@ class Rte {
|
|
|
69259
69281
|
element = element.parentNode;
|
|
69260
69282
|
}
|
|
69261
69283
|
|
|
69262
|
-
if (this.builder.
|
|
69284
|
+
if (this.builder.useCssClasses) {
|
|
69263
69285
|
element.style.textAlign = '';
|
|
69264
|
-
dom$5.removeClass(element, this.builder.
|
|
69265
|
-
dom$5.removeClass(element, this.builder.
|
|
69266
|
-
dom$5.removeClass(element, this.builder.
|
|
69267
|
-
dom$5.removeClass(element, this.builder.
|
|
69268
|
-
if (command === 'left') dom$5.addClass(element, this.builder.
|
|
69269
|
-
if (command === 'center') dom$5.addClass(element, this.builder.
|
|
69270
|
-
if (command === 'right') dom$5.addClass(element, this.builder.
|
|
69271
|
-
if (command === 'justify') dom$5.addClass(element, this.builder.
|
|
69286
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
|
|
69287
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
|
|
69288
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
|
|
69289
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69290
|
+
if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
|
|
69291
|
+
if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
|
|
69292
|
+
if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
|
|
69293
|
+
if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69272
69294
|
} else {
|
|
69273
69295
|
element.style.textAlign = command;
|
|
69274
69296
|
}
|
|
@@ -69293,16 +69315,16 @@ class Rte {
|
|
|
69293
69315
|
element = element.parentNode;
|
|
69294
69316
|
}
|
|
69295
69317
|
|
|
69296
|
-
if (this.builder.
|
|
69318
|
+
if (this.builder.useCssClasses) {
|
|
69297
69319
|
element.style.textAlign = '';
|
|
69298
|
-
dom$5.removeClass(element, this.builder.
|
|
69299
|
-
dom$5.removeClass(element, this.builder.
|
|
69300
|
-
dom$5.removeClass(element, this.builder.
|
|
69301
|
-
dom$5.removeClass(element, this.builder.
|
|
69302
|
-
if (command === 'left') dom$5.addClass(element, this.builder.
|
|
69303
|
-
if (command === 'center') dom$5.addClass(element, this.builder.
|
|
69304
|
-
if (command === 'right') dom$5.addClass(element, this.builder.
|
|
69305
|
-
if (command === 'justify') dom$5.addClass(element, this.builder.
|
|
69320
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
|
|
69321
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
|
|
69322
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
|
|
69323
|
+
dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69324
|
+
if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
|
|
69325
|
+
if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
|
|
69326
|
+
if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
|
|
69327
|
+
if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
|
|
69306
69328
|
} else {
|
|
69307
69329
|
element.style.textAlign = command;
|
|
69308
69330
|
}
|
|
@@ -72915,7 +72937,7 @@ class ContentBuilder {
|
|
|
72915
72937
|
*/
|
|
72916
72938
|
colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700],
|
|
72917
72939
|
// maxColumns: 6,
|
|
72918
|
-
|
|
72940
|
+
cssClasses: {
|
|
72919
72941
|
fontWeight: {
|
|
72920
72942
|
thin: 'font-thin',
|
|
72921
72943
|
extralight: 'font-extralight',
|
|
@@ -72955,7 +72977,7 @@ class ContentBuilder {
|
|
|
72955
72977
|
subscript: 'sub'
|
|
72956
72978
|
}
|
|
72957
72979
|
},
|
|
72958
|
-
|
|
72980
|
+
useCssClasses: false
|
|
72959
72981
|
}; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
|
|
72960
72982
|
|
|
72961
72983
|
this.opts = Object.assign(this, defaults, opts);
|
|
@@ -73026,6 +73048,11 @@ class ContentBuilder {
|
|
|
73026
73048
|
this.opts.cols = ['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'];
|
|
73027
73049
|
this.opts.colequal = [];
|
|
73028
73050
|
this.opts.colsizes = [];
|
|
73051
|
+
} else if (this.opts.framework === 'tailwind') {
|
|
73052
|
+
this.opts.row = 'flex flex-col md:flex-row';
|
|
73053
|
+
this.opts.cols = ['w-full md:w-1/12 px-4', 'w-full md:w-2/12 px-4', 'w-full md:w-3/12 px-4', 'w-full md:w-4/12 px-4', 'w-full md:w-5/12 px-4', 'w-full md:w-6/12 px-4', 'w-full md:w-7/12 px-4', 'w-full md:w-8/12 px-4', 'w-full md:w-9/12 px-4', 'w-full md:w-10/12 px-4', 'w-full md:w-11/12 px-4', 'w-full px-4'];
|
|
73054
|
+
this.opts.colequal = [];
|
|
73055
|
+
this.opts.colsizes = [];
|
|
73029
73056
|
} else if (this.opts.framework === 'foundation') {
|
|
73030
73057
|
this.opts.row = 'row';
|
|
73031
73058
|
this.opts.cols = ['large-1 columns', 'large-2 columns', 'large-3 columns', 'large-4 columns', 'large-5 columns', 'large-6 columns', 'large-7 columns', 'large-8 columns', 'large-9 columns', 'large-10 columns', 'large-11 columns', 'large-12 columns'];
|
|
@@ -73746,10 +73773,10 @@ class ContentBuilder {
|
|
|
73746
73773
|
}
|
|
73747
73774
|
}
|
|
73748
73775
|
|
|
73749
|
-
this.
|
|
73776
|
+
this.cleanHtmlFormatting = true;
|
|
73750
73777
|
let outputHtml = htmlutil.readHtml(area); //for view=false
|
|
73751
73778
|
|
|
73752
|
-
this.
|
|
73779
|
+
this.cleanHtmlFormatting = false;
|
|
73753
73780
|
return outputHtml;
|
|
73754
73781
|
} // ContentBox
|
|
73755
73782
|
|
|
@@ -76978,6 +77005,7 @@ class ContentBox {
|
|
|
76978
77005
|
undoContainerOnly: false,
|
|
76979
77006
|
absolutePath: false,
|
|
76980
77007
|
maxEmbedImageWidth: 1600,
|
|
77008
|
+
useCssClasses: false,
|
|
76981
77009
|
zoom: 0.6,
|
|
76982
77010
|
contentStyleWithSample: false,
|
|
76983
77011
|
contentStyles: {
|
|
@@ -79151,7 +79179,8 @@ class ContentBox {
|
|
|
79151
79179
|
},
|
|
79152
79180
|
undoContainerOnly: this.settings.undoContainerOnly,
|
|
79153
79181
|
absolutePath: this.settings.absolutePath,
|
|
79154
|
-
|
|
79182
|
+
useCssClasses: this.settings.useCssClasses,
|
|
79183
|
+
zoom: this.settings.zoom,
|
|
79155
79184
|
onZoomStart: () => {
|
|
79156
79185
|
// const wrapper = this.wrapperEl;
|
|
79157
79186
|
// wrapper.style.transition = 'all ease 0.1s';
|