@innovastudio/contentbuilder 1.5.13 → 1.5.16
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 +1 -1
- package/public/contentbuilder/contentbuilder.css +43 -3
- package/public/contentbuilder/contentbuilder.esm.js +1233 -241
- package/public/contentbuilder/contentbuilder.js +89798 -0
- package/public/contentbuilder/contentbuilder.min.js +6 -6
- package/public/contentbuilder/lang/en.js +2 -1
- package/public/contentbuilder/lang/fr.js +2 -1
- package/readme.txt +6 -2
|
@@ -11527,7 +11527,7 @@ class HtmlUtil {
|
|
|
11527
11527
|
elm.removeAttribute('grideditor');
|
|
11528
11528
|
elm.removeAttribute('gridoutline');
|
|
11529
11529
|
});
|
|
11530
|
-
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
|
|
11530
|
+
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool,.h-ruler,.v-ruler');
|
|
11531
11531
|
elms.forEach(elm => {
|
|
11532
11532
|
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
|
11533
11533
|
elm.previousSibling.remove();
|
|
@@ -11904,6 +11904,8 @@ class UndoRedo {
|
|
|
11904
11904
|
dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
|
|
11905
11905
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
|
11906
11906
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
|
11907
|
+
dom.removeElements(tmp.querySelectorAll('.h-ruler'));
|
|
11908
|
+
dom.removeElements(tmp.querySelectorAll('.v-ruler'));
|
|
11907
11909
|
|
|
11908
11910
|
// freeform
|
|
11909
11911
|
elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
|
|
@@ -12562,11 +12564,11 @@ const prepareSvgIcons = builder => {
|
|
|
12562
12564
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
|
|
12563
12565
|
</symbol>
|
|
12564
12566
|
|
|
12565
|
-
<symbol id="icon-
|
|
12567
|
+
<symbol id="icon-duplicate2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12566
12568
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
|
|
12567
12569
|
</symbol>
|
|
12568
|
-
<symbol id="icon-
|
|
12569
|
-
|
|
12570
|
+
<symbol id="icon-duplicate" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12571
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
|
|
12570
12572
|
</symbol>
|
|
12571
12573
|
|
|
12572
12574
|
<symbol id="icon-trash" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -12617,7 +12619,7 @@ const prepareSvgIcons = builder => {
|
|
|
12617
12619
|
</symbol>
|
|
12618
12620
|
|
|
12619
12621
|
<symbol id="icon-pagesize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12620
|
-
<path d="
|
|
12622
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" /><path d="M13 8l2 0" /><path d="M13 12l2 0" />
|
|
12621
12623
|
</symbol>
|
|
12622
12624
|
<symbol id="icon-print" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12623
12625
|
<path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
|
|
@@ -64487,7 +64489,7 @@ class Rte {
|
|
|
64487
64489
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
|
64488
64490
|
if (btn === 'createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'removeformat') html_rtemore += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'bold') html_rtemore += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rtemore += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rtemore += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;
|
|
64489
64491
|
// else if(btn==='createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;
|
|
64490
|
-
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_rtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"
|
|
64492
|
+
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_rtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
64491
64493
|
html_rtemore += '<div class="rte-separator"></div>';
|
|
64492
64494
|
} else {
|
|
64493
64495
|
html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64497,7 +64499,7 @@ class Rte {
|
|
|
64497
64499
|
let html_rte = '';
|
|
64498
64500
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
|
64499
64501
|
btn = builder.opts.buttons[j].toLowerCase();
|
|
64500
|
-
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_rte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"
|
|
64502
|
+
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_rte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
64501
64503
|
html_rte += '<div class="rte-separator"></div>';
|
|
64502
64504
|
} else {
|
|
64503
64505
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64515,7 +64517,7 @@ class Rte {
|
|
|
64515
64517
|
let html_elementrtemore = '';
|
|
64516
64518
|
for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
|
|
64517
64519
|
btn = builder.opts.elementButtonsMore[j].toLowerCase();
|
|
64518
|
-
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"
|
|
64520
|
+
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
64519
64521
|
html_elementrtemore += '<div class="rte-separator"></div>';
|
|
64520
64522
|
} else {
|
|
64521
64523
|
html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64525,7 +64527,7 @@ class Rte {
|
|
|
64525
64527
|
let html_elementrte = '';
|
|
64526
64528
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
|
64527
64529
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
|
64528
|
-
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:
|
|
64530
|
+
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:16px;height:16px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
64529
64531
|
html_elementrte += '<div class="rte-separator"></div>';
|
|
64530
64532
|
} else {
|
|
64531
64533
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64545,7 +64547,7 @@ class Rte {
|
|
|
64545
64547
|
let html_iconrte = '';
|
|
64546
64548
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
|
64547
64549
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
|
64548
|
-
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"
|
|
64550
|
+
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
|
64549
64551
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
|
64550
64552
|
} else {
|
|
64551
64553
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64554,7 +64556,7 @@ class Rte {
|
|
|
64554
64556
|
|
|
64555
64557
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
|
64556
64558
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
|
64557
|
-
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"
|
|
64559
|
+
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:1px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
|
|
64558
64560
|
html_iconrte += '<div class="rte-separator"></div>';
|
|
64559
64561
|
} else {
|
|
64560
64562
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64701,6 +64703,9 @@ class Rte {
|
|
|
64701
64703
|
<div style="padding-top:4px">
|
|
64702
64704
|
<input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
|
|
64703
64705
|
</div>
|
|
64706
|
+
<div style="display:flex;justify-content:flex-end">
|
|
64707
|
+
<button title="${util.out('Reset')}" class="reset-zoom" style="background:transparent;padding:0;height:27px;text-decoration:underline">${util.out('Reset')}</button>
|
|
64708
|
+
</div>
|
|
64704
64709
|
</div>
|
|
64705
64710
|
</div>
|
|
64706
64711
|
|
|
@@ -65879,6 +65884,16 @@ class Rte {
|
|
|
65879
65884
|
showTools();
|
|
65880
65885
|
});
|
|
65881
65886
|
|
|
65887
|
+
// Reset Zoom
|
|
65888
|
+
const btnResetZoom = builderStuff.querySelector('.reset-zoom');
|
|
65889
|
+
btnResetZoom.addEventListener('click', () => {
|
|
65890
|
+
this.builder.opts.zoom = 1;
|
|
65891
|
+
localStorage.setItem('_zoom', 1); // Save
|
|
65892
|
+
|
|
65893
|
+
// setZoomOnArea
|
|
65894
|
+
this.builder.setZoomOnArea();
|
|
65895
|
+
});
|
|
65896
|
+
|
|
65882
65897
|
// Zoom Modal
|
|
65883
65898
|
this.inpZoomSlider.onfocus = () => {
|
|
65884
65899
|
if (this.builder.onZoomStart) {
|
|
@@ -73397,7 +73412,6 @@ class ContentStuff {
|
|
|
73397
73412
|
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
|
|
73398
73413
|
</div>
|
|
73399
73414
|
|
|
73400
|
-
|
|
73401
73415
|
<div class="is-locked-indicator">
|
|
73402
73416
|
<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
|
|
73403
73417
|
</div>
|
|
@@ -73891,6 +73905,35 @@ class ContentStuff {
|
|
|
73891
73905
|
}
|
|
73892
73906
|
.is-tool.is-element-tool .elm-settings { display: none; }
|
|
73893
73907
|
|
|
73908
|
+
/* is-block-tool
|
|
73909
|
+
|
|
73910
|
+
.is-tool.is-block-tool {
|
|
73911
|
+
background: rgba(243, 243, 243, 0.9);
|
|
73912
|
+
border-radius: 3px;
|
|
73913
|
+
overflow: hidden;
|
|
73914
|
+
top: 3px;
|
|
73915
|
+
right: 3px;
|
|
73916
|
+
left: auto;
|
|
73917
|
+
width: 25px;
|
|
73918
|
+
}
|
|
73919
|
+
.is-tool.is-block-tool button {
|
|
73920
|
+
width: 25px;
|
|
73921
|
+
height: 25px;
|
|
73922
|
+
background: transparent;
|
|
73923
|
+
display: flex;
|
|
73924
|
+
align-items: center;
|
|
73925
|
+
justify-content: center;
|
|
73926
|
+
}
|
|
73927
|
+
.is-tool.is-block-tool svg {
|
|
73928
|
+
width: 14px;
|
|
73929
|
+
height: 14px;
|
|
73930
|
+
fill: #000;
|
|
73931
|
+
}
|
|
73932
|
+
.is-block.active:not(.multi):not(.editable) .is-block-tool {
|
|
73933
|
+
display:flex;
|
|
73934
|
+
}
|
|
73935
|
+
*/
|
|
73936
|
+
|
|
73894
73937
|
/* is-column-tool */
|
|
73895
73938
|
|
|
73896
73939
|
.is-tool.is-column-tool {
|
|
@@ -74987,7 +75030,7 @@ class LivePreview {
|
|
|
74987
75030
|
// ContentBuilder
|
|
74988
75031
|
|
|
74989
75032
|
if (this.builder.previewURL) {
|
|
74990
|
-
if (this.builder.livePreviewAlwaysReload) {
|
|
75033
|
+
if (this.builder.livePreviewAlwaysReload || hardReload) {
|
|
74991
75034
|
iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
|
|
74992
75035
|
} else {
|
|
74993
75036
|
let iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
|
@@ -81759,7 +81802,25 @@ class Common {
|
|
|
81759
81802
|
applyPercentage(block) {
|
|
81760
81803
|
const zoom = this.zoom;
|
|
81761
81804
|
const rect = this.getRect(block);
|
|
81762
|
-
const container = block.
|
|
81805
|
+
const container = block.closest('.box-canvas');
|
|
81806
|
+
const containerRect = this.getRect(container); // if container has top/left
|
|
81807
|
+
|
|
81808
|
+
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
|
81809
|
+
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
|
81810
|
+
this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
|
|
81811
|
+
this.verticalRulerLeft = container.querySelector('.v-ruler-left');
|
|
81812
|
+
this.verticalRulerRight = container.querySelector('.v-ruler-right');
|
|
81813
|
+
this.verticalRulerCenter = container.querySelector('.v-ruler-center');
|
|
81814
|
+
|
|
81815
|
+
// Check Edges
|
|
81816
|
+
let topTouched = false;
|
|
81817
|
+
let bottomTouched = false;
|
|
81818
|
+
let leftTouched = false;
|
|
81819
|
+
let rightTouched = false;
|
|
81820
|
+
if (this.horizontalRulerTop.hasAttribute('data-topTouched')) topTouched = true;
|
|
81821
|
+
if (this.horizontalRulerBottom.hasAttribute('data-bottomTouched')) bottomTouched = true;
|
|
81822
|
+
if (this.verticalRulerLeft.hasAttribute('data-leftTouched')) leftTouched = true;
|
|
81823
|
+
if (this.verticalRulerRight.hasAttribute('data-rightTouched')) rightTouched = true;
|
|
81763
81824
|
let isChildBlock = false;
|
|
81764
81825
|
if (block.parentNode.matches(this.selector)) {
|
|
81765
81826
|
// child block
|
|
@@ -81767,7 +81828,7 @@ class Common {
|
|
|
81767
81828
|
}
|
|
81768
81829
|
|
|
81769
81830
|
// const containerRect = container.getBoundingClientRect(); // if container has top/left
|
|
81770
|
-
const containerRect = this.getRect(container); // if container has top/left
|
|
81831
|
+
// const containerRect = this.getRect(container); // if container has top/left
|
|
81771
81832
|
let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
|
|
81772
81833
|
let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
|
|
81773
81834
|
let isBlockFixed = block.classList.contains('block-steady');
|
|
@@ -81806,6 +81867,35 @@ class Common {
|
|
|
81806
81867
|
block.style.left = left / zoom + '%';
|
|
81807
81868
|
if (block.classList.contains('height-auto')) block.style.height = '';
|
|
81808
81869
|
}
|
|
81870
|
+
|
|
81871
|
+
// Check
|
|
81872
|
+
|
|
81873
|
+
block.style.right = ''; //reset
|
|
81874
|
+
block.style.bottom = ''; //reset
|
|
81875
|
+
|
|
81876
|
+
if (topTouched) block.style.top = 0;
|
|
81877
|
+
// if(topTouched && bottomTouched) block.style.height = '100%';
|
|
81878
|
+
if (leftTouched) block.style.left = 0;
|
|
81879
|
+
// if(leftTouched && rightTouched) block.style.width = '100%';
|
|
81880
|
+
|
|
81881
|
+
if (topTouched && bottomTouched) {
|
|
81882
|
+
block.style.top = 0;
|
|
81883
|
+
block.style.bottom = 0;
|
|
81884
|
+
block.style.height = '';
|
|
81885
|
+
}
|
|
81886
|
+
if (leftTouched && rightTouched) {
|
|
81887
|
+
block.style.left = 0;
|
|
81888
|
+
block.style.right = 0;
|
|
81889
|
+
block.style.width = '';
|
|
81890
|
+
}
|
|
81891
|
+
if (bottomTouched && !topTouched) {
|
|
81892
|
+
block.style.bottom = 0;
|
|
81893
|
+
block.style.height = '';
|
|
81894
|
+
}
|
|
81895
|
+
if (rightTouched && !leftTouched) {
|
|
81896
|
+
block.style.right = 0;
|
|
81897
|
+
block.style.width = '';
|
|
81898
|
+
}
|
|
81809
81899
|
}
|
|
81810
81900
|
applyPixels(block) {
|
|
81811
81901
|
const zoom = this.zoom;
|
|
@@ -81960,15 +82050,16 @@ class Common {
|
|
|
81960
82050
|
right = Math.max(right, blockLeft + blockWidth);
|
|
81961
82051
|
}
|
|
81962
82052
|
});
|
|
82053
|
+
const container = blocks[0].parentNode;
|
|
82054
|
+
const containerRect = this.getRect(container);
|
|
81963
82055
|
const group = this.doc.createElement('div');
|
|
81964
82056
|
group.classList.add(className);
|
|
81965
82057
|
group.classList.add(groupClassName);
|
|
81966
82058
|
group.classList.add('block-steady');
|
|
81967
|
-
group.style.top = top + 'px';
|
|
81968
|
-
group.style.left = left + 'px';
|
|
82059
|
+
group.style.top = top - containerRect.top + 'px';
|
|
82060
|
+
group.style.left = left - containerRect.left + 'px';
|
|
81969
82061
|
group.style.width = right + 1 - left + 'px';
|
|
81970
82062
|
group.style.height = bottom + 1 - top + 'px';
|
|
81971
|
-
const container = blocks[0].parentNode;
|
|
81972
82063
|
container.appendChild(group);
|
|
81973
82064
|
blocks.forEach(block => {
|
|
81974
82065
|
if (!block.parentNode.matches(this.selector)) {
|
|
@@ -81977,8 +82068,8 @@ class Common {
|
|
|
81977
82068
|
let blockLeft = parseFloat(block.style.left) || 0;
|
|
81978
82069
|
|
|
81979
82070
|
// Adjust position relative to the group div
|
|
81980
|
-
block.style.top = blockTop - top + 'px';
|
|
81981
|
-
block.style.left = blockLeft - left + 'px';
|
|
82071
|
+
block.style.top = blockTop - top + containerRect.top + 'px';
|
|
82072
|
+
block.style.left = blockLeft - left + containerRect.left + 'px';
|
|
81982
82073
|
group.appendChild(block);
|
|
81983
82074
|
this.applyPercentage(block);
|
|
81984
82075
|
}
|
|
@@ -82033,14 +82124,15 @@ class Common {
|
|
|
82033
82124
|
const top = rect.top;
|
|
82034
82125
|
const left = rect.left;
|
|
82035
82126
|
const container = group.parentNode;
|
|
82127
|
+
const containerRect = this.getRect(container);
|
|
82036
82128
|
group.querySelectorAll(this.selector).forEach(block => {
|
|
82037
82129
|
this.applyPixels(block);
|
|
82038
82130
|
let blockTop = parseFloat(block.style.top) || 0;
|
|
82039
82131
|
let blockLeft = parseFloat(block.style.left) || 0;
|
|
82040
82132
|
|
|
82041
82133
|
// Adjust position relative to the group div
|
|
82042
|
-
block.style.top = blockTop + top + 'px';
|
|
82043
|
-
block.style.left = blockLeft + left + 'px';
|
|
82134
|
+
block.style.top = blockTop + top - containerRect.top + 'px';
|
|
82135
|
+
block.style.left = blockLeft + left - containerRect.left + 'px';
|
|
82044
82136
|
container.appendChild(block);
|
|
82045
82137
|
|
|
82046
82138
|
// Remove all breakpoints
|
|
@@ -82252,10 +82344,23 @@ class Ruler {
|
|
|
82252
82344
|
this.zoom = scale;
|
|
82253
82345
|
}
|
|
82254
82346
|
setup() {
|
|
82255
|
-
this.elements = this.doc.querySelectorAll(this.selector);
|
|
82347
|
+
// this.elements = this.doc.querySelectorAll(this.selector);
|
|
82348
|
+
this.refresh();
|
|
82256
82349
|
}
|
|
82257
82350
|
refresh() {
|
|
82258
82351
|
this.elements = this.doc.querySelectorAll(this.selector);
|
|
82352
|
+
const rulerHTML = `
|
|
82353
|
+
<div class="ruler h-ruler h-ruler-top""></div>
|
|
82354
|
+
<div class="ruler h-ruler h-ruler-bottom"></div>
|
|
82355
|
+
<div class="ruler h-ruler h-ruler-middle"></div>
|
|
82356
|
+
<div class="ruler v-ruler v-ruler-left"></div>
|
|
82357
|
+
<div class="ruler v-ruler v-ruler-right"></div>
|
|
82358
|
+
<div class="ruler v-ruler v-ruler-center"></div>
|
|
82359
|
+
`;
|
|
82360
|
+
const containers = this.doc.querySelectorAll('.box-canvas');
|
|
82361
|
+
containers.forEach(container => {
|
|
82362
|
+
if (!container.querySelector('.h-ruler-top')) container.insertAdjacentHTML('beforeend', rulerHTML);
|
|
82363
|
+
});
|
|
82259
82364
|
}
|
|
82260
82365
|
destroy() {
|
|
82261
82366
|
[this.horizontalRulerTop, this.horizontalRulerBottom, this.verticalRulerLeft, this.verticalRulerRight].forEach(elm => {
|
|
@@ -82263,6 +82368,18 @@ class Ruler {
|
|
|
82263
82368
|
});
|
|
82264
82369
|
}
|
|
82265
82370
|
hideRulers() {
|
|
82371
|
+
this.horizontalRulerTop.classList.remove('active');
|
|
82372
|
+
this.horizontalRulerBottom.classList.remove('active');
|
|
82373
|
+
this.horizontalRulerMiddle.classList.remove('active');
|
|
82374
|
+
this.verticalRulerLeft.classList.remove('active');
|
|
82375
|
+
this.verticalRulerRight.classList.remove('active');
|
|
82376
|
+
this.verticalRulerCenter.classList.remove('active');
|
|
82377
|
+
this.rulerTop = null;
|
|
82378
|
+
this.rulerBottom = null; //new
|
|
82379
|
+
this.rulerLeft = null;
|
|
82380
|
+
this.rulerRight = null;
|
|
82381
|
+
}
|
|
82382
|
+
hideRulers_bak() {
|
|
82266
82383
|
this.horizontalRulerTop.style.top = '-1000px';
|
|
82267
82384
|
this.horizontalRulerBottom.style.top = '-1000px';
|
|
82268
82385
|
this.horizontalRulerMiddle.style.top = '-1000px';
|
|
@@ -82270,10 +82387,207 @@ class Ruler {
|
|
|
82270
82387
|
this.verticalRulerRight.style.left = '-1000px';
|
|
82271
82388
|
this.verticalRulerCenter.style.left = '-1000px';
|
|
82272
82389
|
this.rulerTop = null;
|
|
82390
|
+
this.rulerBottom = null; //new
|
|
82273
82391
|
this.rulerLeft = null;
|
|
82274
82392
|
this.rulerRight = null;
|
|
82275
82393
|
}
|
|
82276
82394
|
updateRulers(block) {
|
|
82395
|
+
const container = block.closest('.box-canvas');
|
|
82396
|
+
this.horizontalRulerTop = container.querySelector('.h-ruler-top');
|
|
82397
|
+
this.horizontalRulerBottom = container.querySelector('.h-ruler-bottom');
|
|
82398
|
+
this.horizontalRulerMiddle = container.querySelector('.h-ruler-middle');
|
|
82399
|
+
this.verticalRulerLeft = container.querySelector('.v-ruler-left');
|
|
82400
|
+
this.verticalRulerRight = container.querySelector('.v-ruler-right');
|
|
82401
|
+
this.verticalRulerCenter = container.querySelector('.v-ruler-center');
|
|
82402
|
+
let transform = block.style.transform;
|
|
82403
|
+
if (transform.includes('rotate') || transform.includes('matrix3d')) return;
|
|
82404
|
+
let parentTransform = block.parentNode.style.transform;
|
|
82405
|
+
if (parentTransform.includes('rotate')) return;
|
|
82406
|
+
this.hideRulers();
|
|
82407
|
+
const top = block.offsetTop;
|
|
82408
|
+
const bottom = top + block.offsetHeight;
|
|
82409
|
+
const left = block.offsetLeft;
|
|
82410
|
+
const right = left + block.offsetWidth;
|
|
82411
|
+
const center = left + block.offsetWidth / 2;
|
|
82412
|
+
const middle = top + block.offsetHeight / 2;
|
|
82413
|
+
this.rulerTop = null;
|
|
82414
|
+
this.rulerBottom = null; //new
|
|
82415
|
+
this.rulerLeft = null;
|
|
82416
|
+
this.rulerRight = null;
|
|
82417
|
+
this.elements = container.querySelectorAll(this.selector);
|
|
82418
|
+
this.elements.forEach(element => {
|
|
82419
|
+
if (!this.doc.body.contains(element)) return; // in case element removed (eg. unGroup, block deleted)
|
|
82420
|
+
|
|
82421
|
+
if (block.contains(element)) return; // In case of group moving
|
|
82422
|
+
|
|
82423
|
+
let transform = element.style.transform;
|
|
82424
|
+
let parentTransform = element.parentNode.style.transform;
|
|
82425
|
+
if (!transform.includes('rotate') && !parentTransform.includes('rotate') && !transform.includes('matrix3d') && !parentTransform.includes('matrix3d') && element !== block && !element.classList.contains('cloned')) {
|
|
82426
|
+
const otherTop = element.offsetTop;
|
|
82427
|
+
const otherBottom = otherTop + element.offsetHeight;
|
|
82428
|
+
const otherLeft = element.offsetLeft;
|
|
82429
|
+
const otherRight = otherLeft + element.offsetWidth;
|
|
82430
|
+
const otherMiddle = otherTop + element.offsetHeight / 2;
|
|
82431
|
+
const otherCenter = otherLeft + element.offsetWidth / 2;
|
|
82432
|
+
|
|
82433
|
+
// block top
|
|
82434
|
+
if (otherTop - 4 <= top && top <= otherTop + 4) {
|
|
82435
|
+
this.horizontalRulerTop.style.top = otherTop + 'px';
|
|
82436
|
+
this.horizontalRulerTop.classList.add('active');
|
|
82437
|
+
let val = otherTop;
|
|
82438
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82439
|
+
}
|
|
82440
|
+
if (otherBottom - 4 <= top && top <= otherBottom + 4) {
|
|
82441
|
+
this.horizontalRulerTop.style.top = otherBottom + 'px';
|
|
82442
|
+
this.horizontalRulerTop.classList.add('active');
|
|
82443
|
+
let val = otherBottom;
|
|
82444
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82445
|
+
}
|
|
82446
|
+
|
|
82447
|
+
// block bottom
|
|
82448
|
+
if (otherTop - 4 <= bottom && bottom <= otherTop + 4) {
|
|
82449
|
+
/*
|
|
82450
|
+
_____
|
|
82451
|
+
___________________|__x__|__ rulerBottom
|
|
82452
|
+
| other |
|
|
82453
|
+
*/
|
|
82454
|
+
this.horizontalRulerBottom.style.top = otherTop + 'px';
|
|
82455
|
+
this.horizontalRulerBottom.classList.add('active');
|
|
82456
|
+
if (this.rulerBottom === null) this.rulerBottom = element.offsetTop; // new
|
|
82457
|
+
}
|
|
82458
|
+
|
|
82459
|
+
if (otherBottom - 4 <= bottom && bottom <= otherBottom + 4) {
|
|
82460
|
+
/*
|
|
82461
|
+
_____
|
|
82462
|
+
| other |__________|__x__|__ rulerBottom
|
|
82463
|
+
|
|
82464
|
+
*/
|
|
82465
|
+
this.horizontalRulerBottom.style.top = otherBottom + 'px';
|
|
82466
|
+
this.horizontalRulerBottom.classList.add('active');
|
|
82467
|
+
if (this.rulerBottom === null) this.rulerBottom = element.offsetTop + element.offsetHeight; // new
|
|
82468
|
+
}
|
|
82469
|
+
|
|
82470
|
+
// block middle
|
|
82471
|
+
if (this.rulerTop === null && this.rulerBottom === null) {
|
|
82472
|
+
if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
|
|
82473
|
+
this.horizontalRulerMiddle.style.top = otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82474
|
+
this.horizontalRulerMiddle.classList.add('active');
|
|
82475
|
+
let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
|
|
82476
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82477
|
+
}
|
|
82478
|
+
}
|
|
82479
|
+
|
|
82480
|
+
// block left
|
|
82481
|
+
if (otherLeft - 4 <= left && left <= otherLeft + 4) {
|
|
82482
|
+
this.verticalRulerLeft.style.left = otherLeft + 'px';
|
|
82483
|
+
this.verticalRulerLeft.classList.add('active');
|
|
82484
|
+
let val = otherLeft;
|
|
82485
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82486
|
+
}
|
|
82487
|
+
if (otherRight - 4 <= left && left <= otherRight + 4) {
|
|
82488
|
+
this.verticalRulerLeft.style.left = otherRight + 'px';
|
|
82489
|
+
this.verticalRulerLeft.classList.add('active');
|
|
82490
|
+
let val = otherRight;
|
|
82491
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82492
|
+
}
|
|
82493
|
+
|
|
82494
|
+
// block right
|
|
82495
|
+
if (otherLeft - 4 <= right && right <= otherLeft + 4) {
|
|
82496
|
+
this.verticalRulerRight.style.left = otherLeft + 'px';
|
|
82497
|
+
this.verticalRulerRight.classList.add('active');
|
|
82498
|
+
let val = otherLeft;
|
|
82499
|
+
if (this.rulerRight === null) this.rulerRight = val;
|
|
82500
|
+
}
|
|
82501
|
+
if (otherRight - 4 <= right && right <= otherRight + 4) {
|
|
82502
|
+
this.verticalRulerRight.style.left = otherRight + 'px';
|
|
82503
|
+
this.verticalRulerRight.classList.add('active');
|
|
82504
|
+
let val = otherRight;
|
|
82505
|
+
if (this.rulerRight === null) this.rulerRight = val;
|
|
82506
|
+
}
|
|
82507
|
+
|
|
82508
|
+
// block center
|
|
82509
|
+
if (this.rulerLeft === null && this.rulerRight === null) {
|
|
82510
|
+
if (otherCenter - 4 <= center && center <= otherCenter + 4) {
|
|
82511
|
+
this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82512
|
+
this.verticalRulerCenter.classList.add('active');
|
|
82513
|
+
let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
|
|
82514
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82515
|
+
}
|
|
82516
|
+
}
|
|
82517
|
+
}
|
|
82518
|
+
});
|
|
82519
|
+
|
|
82520
|
+
// Edges
|
|
82521
|
+
const conTop = 0;
|
|
82522
|
+
const conBottom = container.offsetHeight;
|
|
82523
|
+
const conLeft = 0;
|
|
82524
|
+
const conRight = container.offsetWidth;
|
|
82525
|
+
const conCenter = container.offsetWidth / 2;
|
|
82526
|
+
const conMiddle = container.offsetHeight / 2;
|
|
82527
|
+
|
|
82528
|
+
// block top
|
|
82529
|
+
this.horizontalRulerTop.removeAttribute('data-topTouched');
|
|
82530
|
+
if (conTop - 4 <= top && top <= conTop + 4) {
|
|
82531
|
+
this.horizontalRulerTop.style.top = conTop + 'px';
|
|
82532
|
+
this.horizontalRulerTop.classList.add('active');
|
|
82533
|
+
let val = conTop;
|
|
82534
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82535
|
+
this.topTouched = true;
|
|
82536
|
+
this.horizontalRulerTop.setAttribute('data-topTouched', 1);
|
|
82537
|
+
}
|
|
82538
|
+
|
|
82539
|
+
// block bottom
|
|
82540
|
+
this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
|
82541
|
+
if (conBottom - 4 <= bottom && bottom <= conBottom + 4) {
|
|
82542
|
+
this.horizontalRulerBottom.style.top = conBottom - 2 + 'px'; // -2 is an adjustment to make the line visible
|
|
82543
|
+
this.horizontalRulerBottom.classList.add('active');
|
|
82544
|
+
if (this.rulerBottom === null) this.rulerBottom = conBottom; //conRect.height;// or block.parentNode.offsetHeight; // new
|
|
82545
|
+
|
|
82546
|
+
this.bottomTouched = true;
|
|
82547
|
+
this.horizontalRulerBottom.setAttribute('data-bottomTouched', 1);
|
|
82548
|
+
}
|
|
82549
|
+
|
|
82550
|
+
// block middle
|
|
82551
|
+
if (this.rulerTop === null && this.rulerBottom === null) {
|
|
82552
|
+
if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
|
|
82553
|
+
this.horizontalRulerMiddle.style.top = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82554
|
+
this.horizontalRulerMiddle.classList.add('active');
|
|
82555
|
+
let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
|
|
82556
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82557
|
+
}
|
|
82558
|
+
}
|
|
82559
|
+
|
|
82560
|
+
// block left
|
|
82561
|
+
this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
|
82562
|
+
if (conLeft - 4 <= left && left <= conLeft + 4) {
|
|
82563
|
+
this.verticalRulerLeft.style.left = conLeft + 0 + 'px'; // +0 is an adjustment
|
|
82564
|
+
this.verticalRulerLeft.classList.add('active');
|
|
82565
|
+
let val = conLeft;
|
|
82566
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82567
|
+
this.verticalRulerLeft.setAttribute('data-leftTouched', 1);
|
|
82568
|
+
}
|
|
82569
|
+
|
|
82570
|
+
// block right
|
|
82571
|
+
this.verticalRulerRight.removeAttribute('data-rightTouched');
|
|
82572
|
+
if (conRight - 4 <= right && right <= conRight + 4) {
|
|
82573
|
+
this.verticalRulerRight.style.left = conRight - 2 + 'px'; // -2 is an adjustment
|
|
82574
|
+
this.verticalRulerRight.classList.add('active');
|
|
82575
|
+
let val = conRight;
|
|
82576
|
+
if (this.rulerRight === null) this.rulerRight = val;
|
|
82577
|
+
this.verticalRulerRight.setAttribute('data-rightTouched', 1);
|
|
82578
|
+
}
|
|
82579
|
+
|
|
82580
|
+
// block center
|
|
82581
|
+
if (this.rulerLeft === null && this.rulerRight === null) {
|
|
82582
|
+
if (conCenter - 4 <= center && center <= conCenter + 4) {
|
|
82583
|
+
this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82584
|
+
this.verticalRulerCenter.classList.add('active');
|
|
82585
|
+
let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
|
|
82586
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82587
|
+
}
|
|
82588
|
+
}
|
|
82589
|
+
}
|
|
82590
|
+
updateRulers_bak(block) {
|
|
82277
82591
|
// if(block.querySelector(this.selector)) return; // group (because updateRules also calls parent group if child block is dragged)
|
|
82278
82592
|
|
|
82279
82593
|
let transform = block.style.transform;
|
|
@@ -82291,6 +82605,7 @@ class Ruler {
|
|
|
82291
82605
|
const center = left + block.offsetWidth / 2;
|
|
82292
82606
|
const middle = top + block.offsetHeight / 2;
|
|
82293
82607
|
this.rulerTop = null;
|
|
82608
|
+
this.rulerBottom = null; //new
|
|
82294
82609
|
this.rulerLeft = null;
|
|
82295
82610
|
this.rulerRight = null;
|
|
82296
82611
|
let containerTop = 0;
|
|
@@ -82314,18 +82629,6 @@ class Ruler {
|
|
|
82314
82629
|
const otherRight = rect.left + element.offsetWidth;
|
|
82315
82630
|
const otherMiddle = rect.top + element.offsetHeight / 2;
|
|
82316
82631
|
const otherCenter = rect.left + element.offsetWidth / 2;
|
|
82317
|
-
if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
|
|
82318
|
-
this.horizontalRulerMiddle.style.top = containerTop + otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82319
|
-
let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
|
|
82320
|
-
if (this.rulerTop === null) this.rulerTop = val;
|
|
82321
|
-
}
|
|
82322
|
-
if (otherCenter - 4 <= center && center <= otherCenter + 4) {
|
|
82323
|
-
this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82324
|
-
this.verticalRulerCenter.style.top = containerTop + 'px'; // adj
|
|
82325
|
-
|
|
82326
|
-
let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
|
|
82327
|
-
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82328
|
-
}
|
|
82329
82632
|
|
|
82330
82633
|
// block top
|
|
82331
82634
|
if (otherTop - 4 <= top && top <= otherTop + 4) {
|
|
@@ -82341,14 +82644,38 @@ class Ruler {
|
|
|
82341
82644
|
|
|
82342
82645
|
// block bottom
|
|
82343
82646
|
if (otherTop - 4 <= bottom && bottom <= otherTop + 4) {
|
|
82647
|
+
/*
|
|
82648
|
+
_____
|
|
82649
|
+
___________________|__x__|__ rulerBottom
|
|
82650
|
+
| other |
|
|
82651
|
+
*/
|
|
82344
82652
|
this.horizontalRulerBottom.style.top = containerTop + otherTop + 'px';
|
|
82345
|
-
|
|
82346
|
-
|
|
82653
|
+
|
|
82654
|
+
// let val = otherTop - block.offsetHeight;
|
|
82655
|
+
// if(this.rulerTop===null) this.rulerTop = val;
|
|
82656
|
+
if (this.rulerBottom === null) this.rulerBottom = element.offsetTop; // new
|
|
82347
82657
|
}
|
|
82658
|
+
|
|
82348
82659
|
if (otherBottom - 4 <= bottom && bottom <= otherBottom + 4) {
|
|
82660
|
+
/*
|
|
82661
|
+
_____
|
|
82662
|
+
| other |__________|__x__|__ rulerBottom
|
|
82663
|
+
|
|
82664
|
+
*/
|
|
82349
82665
|
this.horizontalRulerBottom.style.top = containerTop + otherBottom + 'px';
|
|
82350
|
-
|
|
82351
|
-
|
|
82666
|
+
|
|
82667
|
+
// let val = otherBottom - block.offsetHeight;
|
|
82668
|
+
// if(this.rulerTop===null) this.rulerTop = val;
|
|
82669
|
+
if (this.rulerBottom === null) this.rulerBottom = element.offsetTop + element.offsetHeight; // new
|
|
82670
|
+
}
|
|
82671
|
+
|
|
82672
|
+
// block middle
|
|
82673
|
+
if (this.rulerTop === null && this.rulerBottom === null) {
|
|
82674
|
+
if (otherMiddle - 4 <= middle && middle <= otherMiddle + 4) {
|
|
82675
|
+
this.horizontalRulerMiddle.style.top = containerTop + otherTop + (element.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82676
|
+
let val = otherTop + (element.offsetHeight - block.offsetHeight) / 2;
|
|
82677
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82678
|
+
}
|
|
82352
82679
|
}
|
|
82353
82680
|
|
|
82354
82681
|
// block left
|
|
@@ -82382,6 +82709,17 @@ class Ruler {
|
|
|
82382
82709
|
let val = otherRight;
|
|
82383
82710
|
if (this.rulerRight === null) this.rulerRight = val;
|
|
82384
82711
|
}
|
|
82712
|
+
|
|
82713
|
+
// block center
|
|
82714
|
+
if (this.rulerLeft === null && this.rulerRight === null) {
|
|
82715
|
+
if (otherCenter - 4 <= center && center <= otherCenter + 4) {
|
|
82716
|
+
this.verticalRulerCenter.style.left = otherLeft + (element.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82717
|
+
this.verticalRulerCenter.style.top = containerTop + 'px'; // adj
|
|
82718
|
+
|
|
82719
|
+
let val = otherLeft + (element.offsetWidth - block.offsetWidth) / 2;
|
|
82720
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82721
|
+
}
|
|
82722
|
+
}
|
|
82385
82723
|
}
|
|
82386
82724
|
});
|
|
82387
82725
|
|
|
@@ -82393,44 +82731,69 @@ class Ruler {
|
|
|
82393
82731
|
const conRight = conRect.left + block.parentNode.offsetWidth;
|
|
82394
82732
|
const conCenter = conRect.left + block.parentNode.offsetWidth / 2;
|
|
82395
82733
|
const conMiddle = conRect.top + block.parentNode.offsetHeight / 2;
|
|
82396
|
-
if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
|
|
82397
|
-
this.horizontalRulerMiddle.style.top = containerTop + conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82398
|
-
let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
|
|
82399
|
-
if (this.rulerTop === null) this.rulerTop = val;
|
|
82400
|
-
}
|
|
82401
|
-
if (conCenter - 4 <= center && center <= conCenter + 4) {
|
|
82402
|
-
this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82403
|
-
this.verticalRulerCenter.style.top = containerTop + 'px';
|
|
82404
|
-
let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
|
|
82405
|
-
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82406
|
-
}
|
|
82407
82734
|
|
|
82408
82735
|
// block top
|
|
82736
|
+
this.horizontalRulerTop.removeAttribute('data-topTouched');
|
|
82409
82737
|
if (conTop - 4 <= top && top <= conTop + 4) {
|
|
82410
82738
|
this.horizontalRulerTop.style.top = containerTop + conTop + 'px';
|
|
82411
82739
|
let val = conTop;
|
|
82412
82740
|
if (this.rulerTop === null) this.rulerTop = val;
|
|
82741
|
+
this.topTouched = true;
|
|
82742
|
+
this.horizontalRulerTop.setAttribute('data-topTouched', 1);
|
|
82413
82743
|
}
|
|
82744
|
+
|
|
82414
82745
|
// block bottom
|
|
82746
|
+
this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
|
|
82415
82747
|
if (conBottom - 4 <= bottom && bottom <= conBottom + 4) {
|
|
82416
|
-
this.horizontalRulerBottom.style.top = containerTop + conBottom -
|
|
82748
|
+
this.horizontalRulerBottom.style.top = containerTop + conBottom - 2 + 'px'; // -2 is an adjustment to make the line visible
|
|
82417
82749
|
|
|
82418
|
-
let val = conBottom - block.offsetHeight;
|
|
82419
|
-
if
|
|
82750
|
+
// let val = conBottom - block.offsetHeight;
|
|
82751
|
+
// if(this.rulerTop===null) this.rulerTop = val;
|
|
82752
|
+
if (this.rulerBottom === null) this.rulerBottom = conRect.height; // or block.parentNode.offsetHeight; // new
|
|
82753
|
+
|
|
82754
|
+
this.bottomTouched = true;
|
|
82755
|
+
this.horizontalRulerBottom.setAttribute('data-bottomTouched', 1);
|
|
82756
|
+
}
|
|
82757
|
+
|
|
82758
|
+
// block middle
|
|
82759
|
+
if (this.rulerTop === null && this.rulerBottom === null) {
|
|
82760
|
+
if (conMiddle - 4 <= middle && middle <= conMiddle + 4) {
|
|
82761
|
+
this.horizontalRulerMiddle.style.top = containerTop + conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2 + block.offsetHeight / 2 + 'px';
|
|
82762
|
+
let val = conTop + (block.parentNode.offsetHeight - block.offsetHeight) / 2;
|
|
82763
|
+
if (this.rulerTop === null) this.rulerTop = val;
|
|
82764
|
+
}
|
|
82420
82765
|
}
|
|
82766
|
+
|
|
82421
82767
|
// block left
|
|
82768
|
+
this.verticalRulerLeft.removeAttribute('data-leftTouched');
|
|
82422
82769
|
if (conLeft - 4 <= left && left <= conLeft + 4) {
|
|
82423
|
-
this.verticalRulerLeft.style.left = conLeft +
|
|
82424
|
-
this.verticalRulerLeft.style.top = containerTop + 'px';
|
|
82770
|
+
this.verticalRulerLeft.style.left = conLeft + 0 + 'px'; // +0 is an adjustment
|
|
82771
|
+
this.verticalRulerLeft.style.top = containerTop + 'px'; // adj
|
|
82772
|
+
|
|
82425
82773
|
let val = conLeft;
|
|
82426
82774
|
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82775
|
+
this.verticalRulerLeft.setAttribute('data-leftTouched', 1);
|
|
82427
82776
|
}
|
|
82777
|
+
|
|
82428
82778
|
// block right
|
|
82779
|
+
this.verticalRulerRight.removeAttribute('data-rightTouched');
|
|
82429
82780
|
if (conRight - 4 <= right && right <= conRight + 4) {
|
|
82430
82781
|
this.verticalRulerRight.style.left = conRight - 2 + 'px'; // -2 is an adjustment
|
|
82431
|
-
this.verticalRulerRight.style.top = containerTop + 'px';
|
|
82782
|
+
this.verticalRulerRight.style.top = containerTop + 'px'; // adj
|
|
82783
|
+
|
|
82432
82784
|
let val = conRight;
|
|
82433
82785
|
if (this.rulerRight === null) this.rulerRight = val;
|
|
82786
|
+
this.verticalRulerRight.setAttribute('data-rightTouched', 1);
|
|
82787
|
+
}
|
|
82788
|
+
|
|
82789
|
+
// block center
|
|
82790
|
+
if (this.rulerLeft === null && this.rulerRight === null) {
|
|
82791
|
+
if (conCenter - 4 <= center && center <= conCenter + 4) {
|
|
82792
|
+
this.verticalRulerCenter.style.left = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2 + block.offsetWidth / 2 + 'px';
|
|
82793
|
+
this.verticalRulerCenter.style.top = containerTop + 'px';
|
|
82794
|
+
let val = conLeft + (block.parentNode.offsetWidth - block.offsetWidth) / 2;
|
|
82795
|
+
if (this.rulerLeft === null) this.rulerLeft = val;
|
|
82796
|
+
}
|
|
82434
82797
|
}
|
|
82435
82798
|
}
|
|
82436
82799
|
}
|
|
@@ -82905,38 +83268,129 @@ class Resizable {
|
|
|
82905
83268
|
}
|
|
82906
83269
|
|
|
82907
83270
|
// Replace with ruler's alignment
|
|
82908
|
-
|
|
82909
|
-
|
|
82910
|
-
|
|
82911
|
-
|
|
82912
|
-
|
|
82913
|
-
target.style.top = this.ruler.rulerTop
|
|
83271
|
+
|
|
83272
|
+
if (this.resizeHandle.includes('top')) {
|
|
83273
|
+
if (this.ruler.rulerTop !== null) {
|
|
83274
|
+
//bottom fixed
|
|
83275
|
+
let targetBottom = target.offsetTop + target.offsetHeight;
|
|
83276
|
+
target.style.top = this.ruler.rulerTop + 'px';
|
|
83277
|
+
target.style.height = targetBottom - this.ruler.rulerTop + 'px';
|
|
82914
83278
|
}
|
|
82915
83279
|
}
|
|
82916
|
-
|
|
82917
|
-
|
|
82918
|
-
|
|
82919
|
-
|
|
83280
|
+
if (this.resizeHandle.includes('bottom')) {
|
|
83281
|
+
if (this.ruler.rulerBottom !== null) {
|
|
83282
|
+
// top fixed
|
|
83283
|
+
target.style.height = this.ruler.rulerBottom - target.offsetTop + 'px';
|
|
83284
|
+
}
|
|
83285
|
+
}
|
|
83286
|
+
if (this.resizeHandle.includes('left')) {
|
|
83287
|
+
if (this.ruler.rulerLeft !== null) {
|
|
83288
|
+
//right fixed
|
|
83289
|
+
let targetRight = target.offsetLeft + target.offsetWidth;
|
|
83290
|
+
target.style.left = this.ruler.rulerLeft + 'px';
|
|
83291
|
+
target.style.width = targetRight - this.ruler.rulerLeft + 'px';
|
|
83292
|
+
}
|
|
83293
|
+
}
|
|
83294
|
+
if (this.resizeHandle.includes('right')) {
|
|
82920
83295
|
if (this.ruler.rulerRight !== null) {
|
|
82921
|
-
//
|
|
82922
|
-
|
|
83296
|
+
//left fixed
|
|
83297
|
+
target.style.width = this.ruler.rulerRight - target.offsetLeft + 'px';
|
|
83298
|
+
}
|
|
83299
|
+
}
|
|
82923
83300
|
|
|
82924
|
-
|
|
82925
|
-
|
|
82926
|
-
|
|
83301
|
+
// Convert px to %
|
|
83302
|
+
this.common.applyPercentage(target);
|
|
83303
|
+
setTimeout(() => {
|
|
83304
|
+
const breakpoint = this.doc.body.getAttribute('data-breakpoint');
|
|
83305
|
+
|
|
83306
|
+
// const screenWidth = window.innerWidth;
|
|
83307
|
+
// let defaultPoint;
|
|
83308
|
+
// if(screenWidth<=1920) {
|
|
83309
|
+
// defaultPoint = 1366;
|
|
83310
|
+
// } else {
|
|
83311
|
+
// defaultPoint = 1900;
|
|
83312
|
+
// }
|
|
83313
|
+
|
|
83314
|
+
let largeScreenBreakpoint = 1280; //1920
|
|
83315
|
+
largeScreenBreakpoint = window.innerWidth - 360; //351
|
|
83316
|
+
if (largeScreenBreakpoint < 1280) largeScreenBreakpoint = 1280;
|
|
83317
|
+
let isPrint = false;
|
|
83318
|
+
let elmBox = target.closest('[data-pagesize]');
|
|
83319
|
+
if (elmBox) {
|
|
83320
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
|
83321
|
+
isPrint = true;
|
|
83322
|
+
}
|
|
82927
83323
|
}
|
|
82928
|
-
|
|
82929
|
-
|
|
82930
|
-
|
|
83324
|
+
if (isPrint) {
|
|
83325
|
+
target.setAttribute('data--t', target.style.top);
|
|
83326
|
+
target.setAttribute('data--l', target.style.left);
|
|
83327
|
+
target.setAttribute('data--b', target.style.bottom);
|
|
83328
|
+
target.setAttribute('data--r', target.style.right);
|
|
83329
|
+
target.setAttribute('data--w', target.style.width);
|
|
83330
|
+
target.setAttribute('data--h', target.style.height);
|
|
83331
|
+
} else {
|
|
83332
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
|
83333
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
|
83334
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
|
83335
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
|
83336
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
|
83337
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
|
83338
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
|
83339
|
+
} else {
|
|
83340
|
+
target.setAttribute('data--t', target.style.top);
|
|
83341
|
+
target.setAttribute('data--l', target.style.left);
|
|
83342
|
+
target.setAttribute('data--b', target.style.bottom);
|
|
83343
|
+
target.setAttribute('data--r', target.style.right);
|
|
83344
|
+
target.setAttribute('data--w', target.style.width);
|
|
83345
|
+
target.setAttribute('data--h', target.style.height);
|
|
83346
|
+
}
|
|
83347
|
+
}
|
|
83348
|
+
target.removeAttribute('data-prev'); // reset
|
|
83349
|
+
target.removeAttribute('data-fluid');
|
|
83350
|
+
}, 30); // delay needed since we use updateHeight() previously that has 20ms process
|
|
82931
83351
|
|
|
82932
|
-
|
|
82933
|
-
|
|
82934
|
-
|
|
83352
|
+
if (this.onChange) this.onChange();
|
|
83353
|
+
}
|
|
83354
|
+
updateBlockStyle_bak(target) {
|
|
83355
|
+
if (target.querySelector(this.selector)) ; else {
|
|
83356
|
+
// this.common.updateHeight(target);
|
|
83357
|
+
if (target.classList.contains('height-auto')) target.style.height = '';
|
|
83358
|
+
}
|
|
82935
83359
|
|
|
82936
|
-
|
|
82937
|
-
|
|
82938
|
-
|
|
82939
|
-
|
|
83360
|
+
// Replace with ruler's alignment
|
|
83361
|
+
const containerRect = this.common.getRect(target.parentNode); // if container has top/left
|
|
83362
|
+
|
|
83363
|
+
if (this.resizeHandle.includes('top')) {
|
|
83364
|
+
if (this.ruler.rulerTop !== null) {
|
|
83365
|
+
//bottom fixed
|
|
83366
|
+
const rect = target.getBoundingClientRect();
|
|
83367
|
+
let targetBottom = rect.top + rect.height;
|
|
83368
|
+
target.style.top = this.ruler.rulerTop - containerRect.top + 'px';
|
|
83369
|
+
target.style.height = targetBottom - this.ruler.rulerTop + 'px';
|
|
83370
|
+
}
|
|
83371
|
+
}
|
|
83372
|
+
if (this.resizeHandle.includes('bottom')) {
|
|
83373
|
+
if (this.ruler.rulerBottom !== null) {
|
|
83374
|
+
// top fixed
|
|
83375
|
+
// const rect = target.getBoundingClientRect();
|
|
83376
|
+
// target.style.height = this.ruler.rulerBottom - rect.top + containerRect.top + 'px';
|
|
83377
|
+
target.style.height = this.ruler.rulerBottom - target.offsetTop + 'px';
|
|
83378
|
+
}
|
|
83379
|
+
}
|
|
83380
|
+
if (this.resizeHandle.includes('left')) {
|
|
83381
|
+
if (this.ruler.rulerLeft !== null) {
|
|
83382
|
+
//right fixed
|
|
83383
|
+
const rect = target.getBoundingClientRect();
|
|
83384
|
+
let targetRight = rect.left + rect.width;
|
|
83385
|
+
target.style.left = this.ruler.rulerLeft - containerRect.left + 'px';
|
|
83386
|
+
target.style.width = targetRight - this.ruler.rulerLeft + 'px';
|
|
83387
|
+
}
|
|
83388
|
+
}
|
|
83389
|
+
if (this.resizeHandle.includes('right')) {
|
|
83390
|
+
if (this.ruler.rulerRight !== null) {
|
|
83391
|
+
//left fixed
|
|
83392
|
+
const rect = target.getBoundingClientRect();
|
|
83393
|
+
target.style.width = this.ruler.rulerRight - rect.left + 'px';
|
|
82940
83394
|
}
|
|
82941
83395
|
}
|
|
82942
83396
|
|
|
@@ -82953,8 +83407,9 @@ class Resizable {
|
|
|
82953
83407
|
// defaultPoint = 1900;
|
|
82954
83408
|
// }
|
|
82955
83409
|
|
|
82956
|
-
|
|
82957
|
-
|
|
83410
|
+
let largeScreenBreakpoint = 1280; //1920
|
|
83411
|
+
largeScreenBreakpoint = window.innerWidth - 360; //351
|
|
83412
|
+
if (largeScreenBreakpoint < 1280) largeScreenBreakpoint = 1280;
|
|
82958
83413
|
let isPrint = false;
|
|
82959
83414
|
let elmBox = target.closest('[data-pagesize]');
|
|
82960
83415
|
if (elmBox) {
|
|
@@ -83138,6 +83593,10 @@ class Draggable {
|
|
|
83138
83593
|
const y = startY - rect.top + containerRect.top;
|
|
83139
83594
|
target.setAttribute('data-startx', x);
|
|
83140
83595
|
target.setAttribute('data-starty', y);
|
|
83596
|
+
|
|
83597
|
+
// reset (from applyPercentage bottomTouched)
|
|
83598
|
+
target.style.height = target.offsetHeight + 'px';
|
|
83599
|
+
target.style.bottom = '';
|
|
83141
83600
|
this.common.applyPixels(target);
|
|
83142
83601
|
});
|
|
83143
83602
|
this.clickedBlock = this.common.getSelectedBlock();
|
|
@@ -83205,10 +83664,9 @@ class Draggable {
|
|
|
83205
83664
|
}
|
|
83206
83665
|
updateBlockStyle(target) {
|
|
83207
83666
|
// Replace with ruler's alignment
|
|
83208
|
-
|
|
83209
|
-
|
|
83210
|
-
if (this.ruler.
|
|
83211
|
-
if (this.ruler.rulerLeft !== null) target.style.left = this.ruler.rulerLeft - containerRect.left + 'px';else if (this.ruler.rulerRight !== null) target.style.left = this.ruler.rulerRight - initialWidth - containerRect.left + 'px';
|
|
83667
|
+
if (this.ruler.rulerTop !== null) target.style.top = this.ruler.rulerTop + 'px';
|
|
83668
|
+
if (this.ruler.rulerBottom !== null) target.style.top = this.ruler.rulerBottom - target.offsetHeight + 'px'; //new
|
|
83669
|
+
if (this.ruler.rulerLeft !== null) target.style.left = this.ruler.rulerLeft + 'px';else if (this.ruler.rulerRight !== null) target.style.left = this.ruler.rulerRight - target.offsetWidth + 'px';
|
|
83212
83670
|
this.doc.querySelectorAll('[data-startx]').forEach(elm => elm.removeAttribute('data-startx'));
|
|
83213
83671
|
this.doc.querySelectorAll('[data-starty]').forEach(elm => elm.removeAttribute('data-starty'));
|
|
83214
83672
|
this.common.applyPercentage(target);
|
|
@@ -83222,8 +83680,9 @@ class Draggable {
|
|
|
83222
83680
|
// defaultPoint = 1900;
|
|
83223
83681
|
// }
|
|
83224
83682
|
|
|
83225
|
-
|
|
83226
|
-
|
|
83683
|
+
let largeScreenBreakpoint = 1280; //1920
|
|
83684
|
+
largeScreenBreakpoint = window.innerWidth - 360; //351
|
|
83685
|
+
if (largeScreenBreakpoint < 1280) largeScreenBreakpoint = 1280;
|
|
83227
83686
|
let isPrint = false;
|
|
83228
83687
|
let elmBox = target.closest('[data-pagesize]');
|
|
83229
83688
|
if (elmBox) {
|
|
@@ -83898,6 +84357,9 @@ class EditableBlocks {
|
|
|
83898
84357
|
win: this.win,
|
|
83899
84358
|
onContentClick: this.onContentClick,
|
|
83900
84359
|
onEditStart: (event, block) => {
|
|
84360
|
+
const container = block.querySelector('.is-container');
|
|
84361
|
+
if (!container) return; // if block is empty, no edit required
|
|
84362
|
+
|
|
83901
84363
|
if (block.classList.contains('clone')) {
|
|
83902
84364
|
const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
|
|
83903
84365
|
this.onEditStart(event, clonedTarget);
|
|
@@ -84068,133 +84530,181 @@ class BlockModal {
|
|
|
84068
84530
|
</div>
|
|
84069
84531
|
</div>
|
|
84070
84532
|
|
|
84533
|
+
<div class="label-page-grayscale label checkbox grayscale" style="padding:30px 0 10px;">
|
|
84534
|
+
<label class="label-checkbox" for="chkPageGrayscale"><input id="chkPageGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
84535
|
+
</div>
|
|
84536
|
+
|
|
84537
|
+
<div style="padding-top:30px;padding-bottom:3px;">${util.out('Auto layout on mobile')}:</div>
|
|
84538
|
+
|
|
84539
|
+
<label class="switch"><input id="inpAutoLayout" type="checkbox" checked=""><span class="slider round"></span></label>
|
|
84540
|
+
|
|
84071
84541
|
</div>
|
|
84072
84542
|
|
|
84073
|
-
<div class="modal-content">
|
|
84543
|
+
<div class="modal-content" style="padding:0">
|
|
84074
84544
|
|
|
84075
|
-
<div style="
|
|
84076
|
-
|
|
84077
|
-
<
|
|
84078
|
-
<button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
|
84545
|
+
<div class="is-tabs" data-group="blocksettings" style="background-color:transparent">
|
|
84546
|
+
<a title="${util.out('General')}" id="tabBlockGeneral" href="#" data-content="divBlockGeneral" class="active">${util.out('General')}</a>
|
|
84547
|
+
<a title="${util.out('More')}" id="tabBlockMore" href="#" data-content="divBlockMore">${util.out('More')}</a>
|
|
84079
84548
|
</div>
|
|
84080
84549
|
|
|
84081
|
-
<div style="padding
|
|
84082
|
-
|
|
84083
|
-
<div class="
|
|
84084
|
-
|
|
84085
|
-
|
|
84086
|
-
|
|
84087
|
-
|
|
84550
|
+
<div id="divBlockMore" class="is-tab-content" data-group="blocksettings" tabindex="-1" style="padding:25px 25px 28px">
|
|
84551
|
+
|
|
84552
|
+
<div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
|
|
84553
|
+
<button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
|
|
84554
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
|
|
84555
|
+
</button>
|
|
84556
|
+
<button title="${util.out('Laptop/Tablet (Landscape)')}" class="input-device" data-value="md" style="width:40px;height:25px;">
|
|
84557
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
84558
|
+
</button>
|
|
84559
|
+
<button title="${util.out('Tablet (Portrait)')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
|
|
84560
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
|
|
84561
|
+
</button>
|
|
84562
|
+
<button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
|
|
84563
|
+
<svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
|
|
84088
84564
|
</button>
|
|
84089
|
-
<button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
|
|
84090
|
-
<button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
84091
|
-
<button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
84092
84565
|
</div>
|
|
84093
|
-
</div>
|
|
84094
84566
|
|
|
84095
|
-
|
|
84096
|
-
<div style="
|
|
84097
|
-
|
|
84098
|
-
|
|
84099
|
-
|
|
84100
|
-
|
|
84101
|
-
<button title="${util.out('
|
|
84567
|
+
<div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
|
|
84568
|
+
<div class="div-visibility" style="display:flex;">
|
|
84569
|
+
<button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
|
|
84570
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
|
|
84571
|
+
<span>${util.out('Visible')}</span>
|
|
84572
|
+
</button>
|
|
84573
|
+
<button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
|
|
84574
|
+
<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
|
|
84575
|
+
<span>${util.out('Hidden')}</span>
|
|
84576
|
+
</button>
|
|
84102
84577
|
</div>
|
|
84578
|
+
|
|
84103
84579
|
</div>
|
|
84104
84580
|
|
|
84105
|
-
<div class="
|
|
84106
|
-
<label class="label-block-grayscale label-checkbox" for="chkBlockGrayscale"><input id="chkBlockGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
84107
|
-
</div>
|
|
84581
|
+
<div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
|
|
84108
84582
|
|
|
84109
|
-
|
|
84110
|
-
<
|
|
84111
|
-
|
|
84112
|
-
|
|
84583
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
|
84584
|
+
<div style="display:flex;">
|
|
84585
|
+
<button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
|
|
84586
|
+
<button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
|
84587
|
+
</div>
|
|
84113
84588
|
|
|
84114
|
-
|
|
84115
|
-
<
|
|
84116
|
-
|
|
84117
|
-
|
|
84589
|
+
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
|
84590
|
+
<div>
|
|
84591
|
+
<div class="asset-block-preview" style="display:none"></div>
|
|
84592
|
+
<div style="display: flex">
|
|
84593
|
+
<button title="${util.out('Image')}" class="btn-block-bgimage">
|
|
84594
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
|
84595
|
+
<span>${util.out('Image')}</span>
|
|
84596
|
+
</button>
|
|
84597
|
+
<button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
|
|
84598
|
+
<button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
84599
|
+
<button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
84600
|
+
</div>
|
|
84601
|
+
</div>
|
|
84118
84602
|
|
|
84119
|
-
|
|
84603
|
+
<div class="div-content-textcolor flex flex-col">
|
|
84604
|
+
<div style="padding-top:20px;padding-bottom:3px;">${util.out('Text Color')}:</div>
|
|
84605
|
+
<div class="flex flex-row">
|
|
84606
|
+
<button title="0" data-textcolor="dark">${util.out('Dark')}</button>
|
|
84607
|
+
<button title="10" data-textcolor="light">${util.out('Light')}</button>
|
|
84608
|
+
|
|
84609
|
+
<button title="${util.out('Clear')}" data-textcolor=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
84610
|
+
</div>
|
|
84611
|
+
</div>
|
|
84120
84612
|
|
|
84121
|
-
|
|
84613
|
+
<div class="label-block-grayscale label checkbox grayscale" style="padding:30px 0 10px;">
|
|
84614
|
+
<label class="label-checkbox" for="chkBlockGrayscale"><input id="chkBlockGrayscale" class="chk-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
|
|
84615
|
+
</div>
|
|
84122
84616
|
|
|
84123
|
-
|
|
84617
|
+
<button title="${util.out('Remove Content/Text')}" class="btn-clear-text" style="margin-top:20px">
|
|
84618
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
|
|
84619
|
+
<span>${util.out('Remove Content/Text')}</span>
|
|
84620
|
+
</button>
|
|
84124
84621
|
|
|
84125
|
-
<
|
|
84126
|
-
<
|
|
84127
|
-
|
|
84128
|
-
|
|
84129
|
-
|
|
84130
|
-
|
|
84131
|
-
|
|
84132
|
-
|
|
84133
|
-
|
|
84134
|
-
|
|
84622
|
+
<button title="${util.out('Clear Breakpoints')}" class="btn-clear-breakpoint" style="margin-top:20px">
|
|
84623
|
+
<svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg>
|
|
84624
|
+
<span>${util.out('Clear Breakpoints')}</span>
|
|
84625
|
+
</button>
|
|
84626
|
+
|
|
84627
|
+
<div style="padding-top:23px;padding-bottom:3px;">${util.out('Lock')}:</div>
|
|
84628
|
+
|
|
84629
|
+
<label class="switch"><input id="inpLockBlock" type="checkbox" checked=""><span class="slider round"></span></label>
|
|
84630
|
+
|
|
84631
|
+
<div id="divBlockPos">
|
|
84632
|
+
|
|
84633
|
+
<div class="flex" style="gap:10px">
|
|
84634
|
+
<div>
|
|
84635
|
+
<label for="inpBlockTop" class="flex" style="padding:10px 0 3px;">${util.out('Top')}:</label>
|
|
84636
|
+
<div style="display:flex">
|
|
84637
|
+
<input id="inpBlockTop" class="inp-block-top" type="text" style="width:74px;height:35px">
|
|
84638
|
+
<select id="inpBlockTopUnit">
|
|
84639
|
+
<option></option>
|
|
84640
|
+
<option>px</option>
|
|
84641
|
+
<option>%</option>
|
|
84642
|
+
</select>
|
|
84643
|
+
</div>
|
|
84135
84644
|
</div>
|
|
84136
|
-
|
|
84137
|
-
|
|
84138
|
-
|
|
84139
|
-
|
|
84140
|
-
|
|
84141
|
-
|
|
84142
|
-
|
|
84143
|
-
|
|
84144
|
-
|
|
84145
|
-
</
|
|
84645
|
+
<div>
|
|
84646
|
+
<label for="inpBlockBottom" class="flex" style="padding:10px 0 3px;">${util.out('Bottom')}:</label>
|
|
84647
|
+
<div style="display:flex">
|
|
84648
|
+
<input id="inpBlockBottom" class="inp-block-top" type="text" style="width:74px;height:35px">
|
|
84649
|
+
<select id="inpBlockBottomUnit">
|
|
84650
|
+
<option></option>
|
|
84651
|
+
<option>px</option>
|
|
84652
|
+
<option>%</option>
|
|
84653
|
+
</select>
|
|
84654
|
+
</div>
|
|
84146
84655
|
</div>
|
|
84147
84656
|
</div>
|
|
84148
|
-
</div>
|
|
84149
84657
|
|
|
84150
|
-
|
|
84151
|
-
|
|
84152
|
-
|
|
84153
|
-
|
|
84154
|
-
|
|
84155
|
-
|
|
84156
|
-
|
|
84157
|
-
|
|
84158
|
-
|
|
84159
|
-
|
|
84658
|
+
<div class="flex" style="gap:10px">
|
|
84659
|
+
<div>
|
|
84660
|
+
<label for="inpBlockLeft" class="flex" style="padding:10px 0 3px;">${util.out('Left')}:</label>
|
|
84661
|
+
<div style="display:flex">
|
|
84662
|
+
<input id="inpBlockLeft" class="inp-block-left" type="text" style="width:74px;height:35px">
|
|
84663
|
+
<select id="inpBlockLeftUnit">
|
|
84664
|
+
<option></option>
|
|
84665
|
+
<option>px</option>
|
|
84666
|
+
<option>%</option>
|
|
84667
|
+
</select>
|
|
84668
|
+
</div>
|
|
84160
84669
|
</div>
|
|
84161
|
-
|
|
84162
|
-
|
|
84163
|
-
|
|
84164
|
-
|
|
84165
|
-
|
|
84166
|
-
|
|
84167
|
-
|
|
84168
|
-
|
|
84169
|
-
|
|
84170
|
-
</
|
|
84670
|
+
<div>
|
|
84671
|
+
<label for="inpBlockRight" class="flex" style="padding:10px 0 3px;">${util.out('Right')}:</label>
|
|
84672
|
+
<div style="display:flex">
|
|
84673
|
+
<input id="inpBlockRight" class="inp-block-left" type="text" style="width:74px;height:35px">
|
|
84674
|
+
<select id="inpBlockRightUnit">
|
|
84675
|
+
<option></option>
|
|
84676
|
+
<option>px</option>
|
|
84677
|
+
<option>%</option>
|
|
84678
|
+
</select>
|
|
84679
|
+
</div>
|
|
84171
84680
|
</div>
|
|
84172
84681
|
</div>
|
|
84173
|
-
</div>
|
|
84174
84682
|
|
|
84175
|
-
|
|
84176
|
-
|
|
84177
|
-
|
|
84178
|
-
|
|
84179
|
-
|
|
84180
|
-
|
|
84181
|
-
|
|
84182
|
-
|
|
84183
|
-
|
|
84184
|
-
|
|
84683
|
+
<div class="flex" style="gap:10px">
|
|
84684
|
+
<div>
|
|
84685
|
+
<label for="inpBlockWidth" class="flex" style="padding:10px 0 3px;">${util.out('Width')}:</label>
|
|
84686
|
+
<div style="display:flex">
|
|
84687
|
+
<input id="inpBlockWidth" class="inp-block-left" type="text" style="width:74px;height:35px">
|
|
84688
|
+
<select id="inpBlockWidthUnit">
|
|
84689
|
+
<option></option>
|
|
84690
|
+
<option>px</option>
|
|
84691
|
+
<option>%</option>
|
|
84692
|
+
</select>
|
|
84693
|
+
</div>
|
|
84185
84694
|
</div>
|
|
84186
|
-
|
|
84187
|
-
|
|
84188
|
-
|
|
84189
|
-
|
|
84190
|
-
|
|
84191
|
-
|
|
84192
|
-
|
|
84193
|
-
|
|
84194
|
-
|
|
84195
|
-
</
|
|
84695
|
+
<div>
|
|
84696
|
+
<label for="inpBlockHeight" class="flex" style="padding:10px 0 3px;">${util.out('Height')}:</label>
|
|
84697
|
+
<div style="display:flex">
|
|
84698
|
+
<input id="inpBlockHeight" class="inp-block-left" type="text" style="width:74px;height:35px">
|
|
84699
|
+
<select id="inpBlockHeightUnit">
|
|
84700
|
+
<option></option>
|
|
84701
|
+
<option>px</option>
|
|
84702
|
+
<option>%</option>
|
|
84703
|
+
</select>
|
|
84704
|
+
</div>
|
|
84196
84705
|
</div>
|
|
84197
84706
|
</div>
|
|
84707
|
+
|
|
84198
84708
|
</div>
|
|
84199
84709
|
|
|
84200
84710
|
</div>
|
|
@@ -84296,19 +84806,19 @@ class BlockModal {
|
|
|
84296
84806
|
const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
|
|
84297
84807
|
if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
|
|
84298
84808
|
// Background image
|
|
84299
|
-
|
|
84809
|
+
let pageOverlay = this.pageOverlay();
|
|
84300
84810
|
let src = '';
|
|
84301
|
-
if (
|
|
84302
|
-
if (
|
|
84303
|
-
src =
|
|
84811
|
+
if (pageOverlay) if (pageOverlay.style.backgroundImage) {
|
|
84812
|
+
if (pageOverlay.style.backgroundImage.indexOf('url(') !== -1) {
|
|
84813
|
+
src = pageOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
84304
84814
|
}
|
|
84305
84815
|
}
|
|
84306
84816
|
this.openImagePicker(src, url => {
|
|
84307
|
-
|
|
84817
|
+
let pageOverlay = this.pageOverlay();
|
|
84308
84818
|
this.builder.uo.saveForUndo();
|
|
84309
|
-
|
|
84310
|
-
|
|
84311
|
-
|
|
84819
|
+
pageOverlay.style.backgroundImage = `url("${url}")`;
|
|
84820
|
+
pageOverlay.style.backgroundSize = 'cover';
|
|
84821
|
+
pageOverlay.style.backgroundRepeat = 'no-repeat';
|
|
84312
84822
|
const div = this.pageImagePreview;
|
|
84313
84823
|
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
|
84314
84824
|
const btnPageClear = modal.querySelector('.btn-page-clear');
|
|
@@ -84339,9 +84849,43 @@ class BlockModal {
|
|
|
84339
84849
|
});
|
|
84340
84850
|
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
|
84341
84851
|
btnPageAdjust.addEventListener('click', () => {
|
|
84342
|
-
let
|
|
84343
|
-
this.builder.colTool.openImageAdjust(
|
|
84852
|
+
let pageOverlay = this.pageOverlay();
|
|
84853
|
+
this.builder.colTool.openImageAdjust(pageOverlay, btnPageAdjust);
|
|
84344
84854
|
});
|
|
84855
|
+
const chkPageGrayscale = modal.querySelector('#chkPageGrayscale');
|
|
84856
|
+
chkPageGrayscale.addEventListener('click', () => {
|
|
84857
|
+
this.builder.uo.saveForUndo();
|
|
84858
|
+
let pageOverlay = this.pageOverlay();
|
|
84859
|
+
const checked = chkPageGrayscale.checked;
|
|
84860
|
+
if (checked) {
|
|
84861
|
+
pageOverlay.style.filter = 'grayscale(1)';
|
|
84862
|
+
} else {
|
|
84863
|
+
if (pageOverlay.style.filter) pageOverlay.style.filter = pageOverlay.style.filter.replace('grayscale(1)', '');
|
|
84864
|
+
}
|
|
84865
|
+
this.builder.onChange();
|
|
84866
|
+
});
|
|
84867
|
+
|
|
84868
|
+
// Page Auto Layout
|
|
84869
|
+
const chkAutoLayout = modal.querySelector('#inpAutoLayout');
|
|
84870
|
+
chkAutoLayout.addEventListener(this.builder.isTouchSupport ? 'touchstart' : 'click', () => {
|
|
84871
|
+
const page = this.getPage();
|
|
84872
|
+
if (chkAutoLayout.checked) {
|
|
84873
|
+
page.classList.add('autolayout');
|
|
84874
|
+
} else {
|
|
84875
|
+
page.classList.remove('autolayout');
|
|
84876
|
+
}
|
|
84877
|
+
});
|
|
84878
|
+
if (this.builder.isTouchSupport) {
|
|
84879
|
+
let chkAutoLayoutLabel = chkAutoLayout.parentNode;
|
|
84880
|
+
chkAutoLayoutLabel.addEventListener('touchstart', () => {
|
|
84881
|
+
const page = this.getPage();
|
|
84882
|
+
if (chkAutoLayout.checked) {
|
|
84883
|
+
page.classList.add('autolayout');
|
|
84884
|
+
} else {
|
|
84885
|
+
page.classList.remove('autolayout');
|
|
84886
|
+
}
|
|
84887
|
+
});
|
|
84888
|
+
}
|
|
84345
84889
|
|
|
84346
84890
|
// Block Background Image
|
|
84347
84891
|
|
|
@@ -84395,7 +84939,7 @@ class BlockModal {
|
|
|
84395
84939
|
let blockOverlay = this.blockOverlay();
|
|
84396
84940
|
this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
|
|
84397
84941
|
});
|
|
84398
|
-
const chkGrayscale = modal.querySelector('
|
|
84942
|
+
const chkGrayscale = modal.querySelector('#chkBlockGrayscale');
|
|
84399
84943
|
chkGrayscale.addEventListener('click', () => {
|
|
84400
84944
|
this.builder.uo.saveForUndo();
|
|
84401
84945
|
let blockOverlay = this.blockOverlay();
|
|
@@ -84622,6 +85166,62 @@ class BlockModal {
|
|
|
84622
85166
|
}
|
|
84623
85167
|
});
|
|
84624
85168
|
}
|
|
85169
|
+
|
|
85170
|
+
// Responsive Visibility
|
|
85171
|
+
|
|
85172
|
+
let btns = modal.querySelectorAll('.input-device');
|
|
85173
|
+
btns.forEach(btn => {
|
|
85174
|
+
btn.addEventListener('click', () => {
|
|
85175
|
+
const block = this.blockSelected();
|
|
85176
|
+
let elms = modal.querySelectorAll('.input-device');
|
|
85177
|
+
elms.forEach(elm => {
|
|
85178
|
+
elm.classList.remove('on');
|
|
85179
|
+
});
|
|
85180
|
+
btn.classList.add('on');
|
|
85181
|
+
this.realtimeVisibility(block);
|
|
85182
|
+
});
|
|
85183
|
+
});
|
|
85184
|
+
let btnVisible = modal.querySelector('.input-visible');
|
|
85185
|
+
let btnHidden = modal.querySelector('.input-hidden');
|
|
85186
|
+
btnVisible.addEventListener('click', () => {
|
|
85187
|
+
const block = this.blockSelected();
|
|
85188
|
+
this.builder.uo.saveForUndo();
|
|
85189
|
+
let divTarget = modal.querySelector('.div-target');
|
|
85190
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
85191
|
+
if (target === 'xs') {
|
|
85192
|
+
block.classList.remove('xs-hidden');
|
|
85193
|
+
} else if (target === 'sm') {
|
|
85194
|
+
block.classList.remove('sm-hidden');
|
|
85195
|
+
} else if (target === 'md') {
|
|
85196
|
+
block.classList.remove('md-hidden');
|
|
85197
|
+
} else if (target === '') {
|
|
85198
|
+
block.classList.remove('desktop-hidden');
|
|
85199
|
+
}
|
|
85200
|
+
btnVisible.classList.add('on');
|
|
85201
|
+
btnHidden.classList.remove('on');
|
|
85202
|
+
this.builder.opts.onChange();
|
|
85203
|
+
});
|
|
85204
|
+
btnHidden.addEventListener('click', () => {
|
|
85205
|
+
const block = this.blockSelected();
|
|
85206
|
+
this.builder.uo.saveForUndo();
|
|
85207
|
+
let divTarget = modal.querySelector('.div-target');
|
|
85208
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
85209
|
+
if (target === 'xs') {
|
|
85210
|
+
block.classList.add('xs-hidden');
|
|
85211
|
+
} else if (target === 'sm') {
|
|
85212
|
+
block.classList.add('sm-hidden');
|
|
85213
|
+
} else if (target === 'md') {
|
|
85214
|
+
block.classList.add('md-hidden');
|
|
85215
|
+
} else if (target === '') {
|
|
85216
|
+
block.classList.add('desktop-hidden');
|
|
85217
|
+
}
|
|
85218
|
+
btnVisible.classList.remove('on');
|
|
85219
|
+
btnHidden.classList.add('on');
|
|
85220
|
+
this.builder.opts.onChange();
|
|
85221
|
+
});
|
|
85222
|
+
new Tabs({
|
|
85223
|
+
element: modal
|
|
85224
|
+
});
|
|
84625
85225
|
} // constructor
|
|
84626
85226
|
|
|
84627
85227
|
getPage() {
|
|
@@ -84653,6 +85253,16 @@ class BlockModal {
|
|
|
84653
85253
|
// this.builder.eb.common.applyPercentage(target);
|
|
84654
85254
|
}
|
|
84655
85255
|
|
|
85256
|
+
pageOverlay() {
|
|
85257
|
+
const page = this.getPage();
|
|
85258
|
+
if (!page) return false;
|
|
85259
|
+
let pageOverlay = page.querySelector('.is-page-overlay');
|
|
85260
|
+
if (!pageOverlay) {
|
|
85261
|
+
page.insertAdjacentHTML('afterbegin', '<div class="is-page-overlay"></div>');
|
|
85262
|
+
pageOverlay = page.querySelector('.is-page-overlay');
|
|
85263
|
+
}
|
|
85264
|
+
return pageOverlay;
|
|
85265
|
+
}
|
|
84656
85266
|
blockOverlay() {
|
|
84657
85267
|
const block = this.builder.doc.querySelector('.is-block.active:not(.multi)');
|
|
84658
85268
|
if (!block) return false;
|
|
@@ -84669,6 +85279,7 @@ class BlockModal {
|
|
|
84669
85279
|
}
|
|
84670
85280
|
realtime() {
|
|
84671
85281
|
const modal = this.modal;
|
|
85282
|
+
if (!modal.classList.contains('active')) return;
|
|
84672
85283
|
const page = this.getPage();
|
|
84673
85284
|
const block = this.blockSelected();
|
|
84674
85285
|
if (block) {
|
|
@@ -84711,7 +85322,7 @@ class BlockModal {
|
|
|
84711
85322
|
}
|
|
84712
85323
|
|
|
84713
85324
|
// Grayscale
|
|
84714
|
-
const chkGrayscale = modal.querySelector('
|
|
85325
|
+
const chkGrayscale = modal.querySelector('#chkBlockGrayscale');
|
|
84715
85326
|
chkGrayscale.checked = false;
|
|
84716
85327
|
if (blockOverlay) {
|
|
84717
85328
|
if (blockOverlay.style.filter) {
|
|
@@ -84862,23 +85473,38 @@ class BlockModal {
|
|
|
84862
85473
|
inpHeight.value = '';
|
|
84863
85474
|
inpHeightUnit.value = '%';
|
|
84864
85475
|
}
|
|
85476
|
+
this.realtimeVisibility(block);
|
|
84865
85477
|
} else if (page) {
|
|
85478
|
+
let pageOverlay = this.pageOverlay();
|
|
85479
|
+
|
|
84866
85480
|
// Background image
|
|
84867
85481
|
let src = '';
|
|
84868
|
-
if (
|
|
84869
|
-
if (
|
|
84870
|
-
src =
|
|
85482
|
+
if (pageOverlay) if (pageOverlay.style.backgroundImage) {
|
|
85483
|
+
if (pageOverlay.style.backgroundImage.indexOf('url(') !== -1) {
|
|
85484
|
+
src = pageOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
84871
85485
|
}
|
|
84872
85486
|
}
|
|
84873
85487
|
|
|
84874
85488
|
// Update preview
|
|
84875
85489
|
this.updatePanelPageImage(src);
|
|
84876
85490
|
|
|
84877
|
-
// Show/hide
|
|
85491
|
+
// Show/hide grayscale
|
|
85492
|
+
const divPageGrayscale = modal.querySelector('.label-page-grayscale');
|
|
84878
85493
|
if (src === '') {
|
|
84879
85494
|
this.pageImagePreview.style.display = 'none';
|
|
85495
|
+
divPageGrayscale.style.display = 'none';
|
|
84880
85496
|
} else {
|
|
84881
85497
|
this.pageImagePreview.style.display = '';
|
|
85498
|
+
divPageGrayscale.style.display = '';
|
|
85499
|
+
}
|
|
85500
|
+
|
|
85501
|
+
// Grayscale
|
|
85502
|
+
const chkPageGrayscale = modal.querySelector('#chkPageGrayscale');
|
|
85503
|
+
chkPageGrayscale.checked = false;
|
|
85504
|
+
if (pageOverlay.style.filter) {
|
|
85505
|
+
if (pageOverlay.style.filter.indexOf('grayscale') !== -1) {
|
|
85506
|
+
chkPageGrayscale.checked = true;
|
|
85507
|
+
}
|
|
84882
85508
|
}
|
|
84883
85509
|
|
|
84884
85510
|
// Background color
|
|
@@ -84901,6 +85527,58 @@ class BlockModal {
|
|
|
84901
85527
|
} else {
|
|
84902
85528
|
btnPageGradient.style.backgroundImage = '';
|
|
84903
85529
|
}
|
|
85530
|
+
|
|
85531
|
+
// Page Auto Layout
|
|
85532
|
+
const chkAutoLayout = modal.querySelector('#inpAutoLayout');
|
|
85533
|
+
if (page.classList.contains('autolayout')) {
|
|
85534
|
+
chkAutoLayout.checked = true;
|
|
85535
|
+
} else {
|
|
85536
|
+
chkAutoLayout.checked = false;
|
|
85537
|
+
}
|
|
85538
|
+
}
|
|
85539
|
+
}
|
|
85540
|
+
realtimeVisibility(row, initialOpen) {
|
|
85541
|
+
if (!this.modal) return;
|
|
85542
|
+
if (initialOpen) {
|
|
85543
|
+
const builderStuff = this.builder.builderStuff;
|
|
85544
|
+
const modal = builderStuff.querySelector('.is-modal.content-preview.active');
|
|
85545
|
+
if (modal) {
|
|
85546
|
+
let elms = this.modal.querySelectorAll('.input-device');
|
|
85547
|
+
elms.forEach(elm => {
|
|
85548
|
+
elm.classList.remove('on');
|
|
85549
|
+
});
|
|
85550
|
+
if (modal.classList.contains('is-screen-1920')) {
|
|
85551
|
+
this.modal.querySelector('.input-device[data-value=""]').classList.add('on');
|
|
85552
|
+
} else if (modal.classList.contains('is-screen-1440')) {
|
|
85553
|
+
this.modal.querySelector('.input-device[data-value=""]').classList.add('on');
|
|
85554
|
+
} else if (modal.classList.contains('is-screen-1024')) {
|
|
85555
|
+
this.modal.querySelector('.input-device[data-value="md"]').classList.add('on');
|
|
85556
|
+
} else if (modal.classList.contains('is-screen-768')) {
|
|
85557
|
+
this.modal.querySelector('.input-device[data-value="sm"]').classList.add('on');
|
|
85558
|
+
} else if (modal.classList.contains('is-screen-375')) {
|
|
85559
|
+
this.modal.querySelector('.input-device[data-value="xs"]').classList.add('on');
|
|
85560
|
+
}
|
|
85561
|
+
}
|
|
85562
|
+
}
|
|
85563
|
+
let divTarget = this.modal.querySelector('.div-target');
|
|
85564
|
+
let divVisibility = this.modal.querySelector('.div-visibility');
|
|
85565
|
+
let target = this.builder.responsive.readTarget(divTarget);
|
|
85566
|
+
let valVisibility = this.builder.responsive.getVisibility(row, target);
|
|
85567
|
+
this.builder.responsive.showVisibility(divVisibility, valVisibility);
|
|
85568
|
+
|
|
85569
|
+
// const divColsPerLine = this.modal.querySelector('.div-colsperline');
|
|
85570
|
+
let btns = this.modal.querySelectorAll('.input-colsperline');
|
|
85571
|
+
btns.forEach(btn => {
|
|
85572
|
+
btn.classList.remove('on');
|
|
85573
|
+
});
|
|
85574
|
+
if (target === 'xs') {
|
|
85575
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(375);
|
|
85576
|
+
} else if (target === 'sm') {
|
|
85577
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(768);
|
|
85578
|
+
} else if (target === 'md') {
|
|
85579
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1024);
|
|
85580
|
+
} else {
|
|
85581
|
+
if (!initialOpen) this.builder.livePreview.resizePreview(1920);
|
|
84904
85582
|
}
|
|
84905
85583
|
}
|
|
84906
85584
|
openImagePicker(currentUrl, callback, btn) {
|
|
@@ -84924,17 +85602,17 @@ class BlockModal {
|
|
|
84924
85602
|
}
|
|
84925
85603
|
updatePageImage(src) {
|
|
84926
85604
|
this.builder.uo.saveForUndo();
|
|
84927
|
-
let
|
|
84928
|
-
|
|
85605
|
+
let pageOverlay = this.pageOverlay();
|
|
85606
|
+
pageOverlay.style.backgroundImage = 'url(\'' + src + '\')';
|
|
84929
85607
|
|
|
84930
85608
|
// Reset position & filter (grayscale)
|
|
84931
|
-
|
|
84932
|
-
|
|
84933
|
-
|
|
84934
|
-
|
|
84935
|
-
|
|
84936
|
-
|
|
84937
|
-
|
|
85609
|
+
pageOverlay.style.filter = '';
|
|
85610
|
+
pageOverlay.style.backgroundSize = '';
|
|
85611
|
+
pageOverlay.style.backgroundPosition = '50% 60%';
|
|
85612
|
+
pageOverlay.removeAttribute('data-bg-xs');
|
|
85613
|
+
pageOverlay.removeAttribute('data-bg-sm');
|
|
85614
|
+
pageOverlay.removeAttribute('data-bg-md');
|
|
85615
|
+
pageOverlay.removeAttribute('data-bg-lg');
|
|
84938
85616
|
this.updatePanelPageImage(src);
|
|
84939
85617
|
this.builder.onChange();
|
|
84940
85618
|
}
|
|
@@ -84958,6 +85636,16 @@ class BlockModal {
|
|
|
84958
85636
|
}
|
|
84959
85637
|
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
|
84960
85638
|
btnPageGradient.style.backgroundImage = '';
|
|
85639
|
+
|
|
85640
|
+
// Show/hide grayscale
|
|
85641
|
+
const divPageGrayscale = modal.querySelector('.label-page-grayscale');
|
|
85642
|
+
if (src === '') {
|
|
85643
|
+
this.pageImagePreview.style.display = 'none';
|
|
85644
|
+
divPageGrayscale.style.display = 'none';
|
|
85645
|
+
} else {
|
|
85646
|
+
this.pageImagePreview.style.display = '';
|
|
85647
|
+
divPageGrayscale.style.display = '';
|
|
85648
|
+
}
|
|
84961
85649
|
}
|
|
84962
85650
|
updateImage(src) {
|
|
84963
85651
|
this.builder.uo.saveForUndo();
|
|
@@ -84973,6 +85661,7 @@ class BlockModal {
|
|
|
84973
85661
|
blockOverlay.removeAttribute('data-bg-md');
|
|
84974
85662
|
blockOverlay.removeAttribute('data-bg-lg');
|
|
84975
85663
|
this.updatePanelImage(src);
|
|
85664
|
+
this.realtime();
|
|
84976
85665
|
this.builder.onChange();
|
|
84977
85666
|
}
|
|
84978
85667
|
updatePanelImage(src) {
|
|
@@ -84995,6 +85684,16 @@ class BlockModal {
|
|
|
84995
85684
|
}
|
|
84996
85685
|
const btnGradient = modal.querySelector('.btn-block-gradient');
|
|
84997
85686
|
btnGradient.style.backgroundImage = '';
|
|
85687
|
+
|
|
85688
|
+
// Show/hide grayscale
|
|
85689
|
+
const divGrayscale = modal.querySelector('.label-block-grayscale');
|
|
85690
|
+
if (src === '') {
|
|
85691
|
+
this.imagePreview.style.display = 'none';
|
|
85692
|
+
divGrayscale.style.display = 'none';
|
|
85693
|
+
} else {
|
|
85694
|
+
this.imagePreview.style.display = '';
|
|
85695
|
+
divGrayscale.style.display = '';
|
|
85696
|
+
}
|
|
84998
85697
|
}
|
|
84999
85698
|
show() {
|
|
85000
85699
|
const modal = this.modal;
|
|
@@ -85025,6 +85724,7 @@ class BlockModal {
|
|
|
85025
85724
|
}
|
|
85026
85725
|
showHideControls() {
|
|
85027
85726
|
const modal = this.modal;
|
|
85727
|
+
if (!modal.classList.contains('active')) return;
|
|
85028
85728
|
const content1 = modal.querySelector('.modal-none');
|
|
85029
85729
|
const content2 = modal.querySelector('.modal-content');
|
|
85030
85730
|
const content3 = modal.querySelector('.modal-page-content');
|
|
@@ -85065,6 +85765,60 @@ class BlockModal {
|
|
|
85065
85765
|
this.builder.doc.removeEventListener('click', this.handleBlockClick);
|
|
85066
85766
|
}
|
|
85067
85767
|
}
|
|
85768
|
+
position() {
|
|
85769
|
+
const dom = this.dom;
|
|
85770
|
+
let elementTool = this.elementTool;
|
|
85771
|
+
let elementMore = this.elementMore;
|
|
85772
|
+
dom.addClass(elementMore, 'transition1');
|
|
85773
|
+
let elmMore = elementTool.querySelector('.elm-more');
|
|
85774
|
+
const viewportHeight = window.innerHeight;
|
|
85775
|
+
|
|
85776
|
+
/*
|
|
85777
|
+
let top, left;
|
|
85778
|
+
if(!this.builder.iframe) {
|
|
85779
|
+
top = elmMore.getBoundingClientRect().top;
|
|
85780
|
+
left = elmMore.getBoundingClientRect().left;
|
|
85781
|
+
} else {
|
|
85782
|
+
let adjY = this.builder.iframe.getBoundingClientRect().top;
|
|
85783
|
+
let adjX = this.builder.iframe.getBoundingClientRect().left;
|
|
85784
|
+
top = elmMore.getBoundingClientRect().top;
|
|
85785
|
+
left = elmMore.getBoundingClientRect().left;
|
|
85786
|
+
top = top + adjY;
|
|
85787
|
+
left = left + adjX;
|
|
85788
|
+
}
|
|
85789
|
+
*/
|
|
85790
|
+
const newPos = this.builder.util.getElementPosition(elmMore);
|
|
85791
|
+
let top = newPos.top;
|
|
85792
|
+
let left = newPos.left;
|
|
85793
|
+
|
|
85794
|
+
// elementMore.style.display = 'flex';
|
|
85795
|
+
const btnMore = elementTool.querySelector('.elm-more');
|
|
85796
|
+
this.util.showPop(elementMore, false, btnMore);
|
|
85797
|
+
const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
85798
|
+
const h = elementMore.offsetHeight;
|
|
85799
|
+
if (viewportHeight - top > h) {
|
|
85800
|
+
elementMore.style.top = top + window.pageYOffset + 27 + 'px';
|
|
85801
|
+
elementMore.style.left = left - w / 2 + 10 + 'px';
|
|
85802
|
+
dom.removeClass(elementMore, 'arrow-bottom');
|
|
85803
|
+
dom.removeClass(elementMore, 'arrow-right');
|
|
85804
|
+
dom.removeClass(elementMore, 'arrow-left');
|
|
85805
|
+
dom.removeClass(elementMore, 'center');
|
|
85806
|
+
dom.addClass(elementMore, 'arrow-top');
|
|
85807
|
+
dom.addClass(elementMore, 'center');
|
|
85808
|
+
} else {
|
|
85809
|
+
elementMore.style.top = top + window.pageYOffset - h - 8 + 'px';
|
|
85810
|
+
elementMore.style.left = left - w / 2 + 10 + 'px';
|
|
85811
|
+
dom.removeClass(elementMore, 'arrow-top');
|
|
85812
|
+
dom.removeClass(elementMore, 'arrow-right');
|
|
85813
|
+
dom.removeClass(elementMore, 'arrow-left');
|
|
85814
|
+
dom.removeClass(elementMore, 'center');
|
|
85815
|
+
dom.addClass(elementMore, 'arrow-bottom');
|
|
85816
|
+
dom.addClass(elementMore, 'center');
|
|
85817
|
+
}
|
|
85818
|
+
setTimeout(() => {
|
|
85819
|
+
dom.removeClass(elementMore, 'transition1');
|
|
85820
|
+
}, 300);
|
|
85821
|
+
}
|
|
85068
85822
|
}
|
|
85069
85823
|
|
|
85070
85824
|
class PageSize {
|
|
@@ -85197,12 +85951,19 @@ class PageSize {
|
|
|
85197
85951
|
// let h = arr[1].trim();
|
|
85198
85952
|
if (arr.length === 3) {
|
|
85199
85953
|
// web
|
|
85200
|
-
|
|
85201
|
-
|
|
85202
|
-
|
|
85203
|
-
|
|
85204
|
-
|
|
85205
|
-
|
|
85954
|
+
let box = docContainer.querySelector('.is-box');
|
|
85955
|
+
if (box) {
|
|
85956
|
+
const boxWidth = box.offsetWidth;
|
|
85957
|
+
const viewportWidth = this.builder.win.innerWidth;
|
|
85958
|
+
if (boxWidth < viewportWidth - 50) {
|
|
85959
|
+
// web (container)
|
|
85960
|
+
docContainer.classList.remove('page-web');
|
|
85961
|
+
docContainer.classList.add('page-web-container');
|
|
85962
|
+
} else {
|
|
85963
|
+
// web (full)
|
|
85964
|
+
docContainer.classList.remove('page-web-container');
|
|
85965
|
+
docContainer.classList.add('page-web');
|
|
85966
|
+
}
|
|
85206
85967
|
} else {
|
|
85207
85968
|
// web (full)
|
|
85208
85969
|
docContainer.classList.remove('page-web-container');
|
|
@@ -85291,18 +86052,53 @@ class PageSize {
|
|
|
85291
86052
|
position: relative;
|
|
85292
86053
|
flex:none;
|
|
85293
86054
|
background: #fff;
|
|
85294
|
-
overflow: hidden
|
|
86055
|
+
/* overflow: hidden;*/
|
|
85295
86056
|
box-shadow: none;
|
|
85296
86057
|
}
|
|
85297
86058
|
${css}
|
|
85298
86059
|
</style>
|
|
86060
|
+
|
|
86061
|
+
${html.includes('data-module="codeview"') ? `
|
|
86062
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" rel="stylesheet">
|
|
86063
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-coy.min.css" rel="stylesheet">
|
|
86064
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
|
|
86065
|
+
<style>
|
|
86066
|
+
:not(pre)>code[class*=language-], pre[class*=language-] {
|
|
86067
|
+
background-color: #f4f4f4 !important;
|
|
86068
|
+
padding: 12px 16px !important;
|
|
86069
|
+
}
|
|
86070
|
+
pre[class*=language-]:after, pre[class*=language-]:before {
|
|
86071
|
+
box-shadow: none;
|
|
86072
|
+
}
|
|
86073
|
+
:not(pre)>code[class*=language-], pre[class*=language-] {
|
|
86074
|
+
margin-bottom: 1.2rem;
|
|
86075
|
+
}
|
|
86076
|
+
div[data-html] {
|
|
86077
|
+
min-height: 40px;
|
|
86078
|
+
}
|
|
86079
|
+
code[class*=language-], pre[class*=language-] {
|
|
86080
|
+
text-shadow: none;
|
|
86081
|
+
}
|
|
86082
|
+
</style>
|
|
86083
|
+
` : ''}
|
|
85299
86084
|
</head>
|
|
85300
86085
|
<body class="print">
|
|
85301
86086
|
|
|
85302
86087
|
<div class="is-page">${html}</div>
|
|
85303
86088
|
|
|
85304
86089
|
<script>
|
|
85305
|
-
|
|
86090
|
+
var docReady = function(fn) {
|
|
86091
|
+
var stateCheck = setInterval(function() {
|
|
86092
|
+
if (document.readyState !== "complete") return;
|
|
86093
|
+
clearInterval(stateCheck);
|
|
86094
|
+
try {
|
|
86095
|
+
fn()
|
|
86096
|
+
} catch (e) {}
|
|
86097
|
+
}, 1);
|
|
86098
|
+
};
|
|
86099
|
+
docReady(function() {
|
|
86100
|
+
window.print();
|
|
86101
|
+
});
|
|
85306
86102
|
</script>
|
|
85307
86103
|
</body>
|
|
85308
86104
|
</html>
|
|
@@ -85387,6 +86183,9 @@ class PageSize {
|
|
|
85387
86183
|
width: ${docWidth};
|
|
85388
86184
|
height: ${docHeight};
|
|
85389
86185
|
}
|
|
86186
|
+
.hide-on-print {
|
|
86187
|
+
display: none !important;
|
|
86188
|
+
}
|
|
85390
86189
|
}
|
|
85391
86190
|
@page {
|
|
85392
86191
|
size:${docWidth} ${docHeight};;
|
|
@@ -85407,6 +86206,9 @@ class PageSize {
|
|
|
85407
86206
|
width: ${w};
|
|
85408
86207
|
height: ${h};
|
|
85409
86208
|
}
|
|
86209
|
+
.hide-on-print {
|
|
86210
|
+
display: none !important;
|
|
86211
|
+
}
|
|
85410
86212
|
}
|
|
85411
86213
|
@page {
|
|
85412
86214
|
size:${w} ${h};
|
|
@@ -85676,7 +86478,7 @@ class ContentBuilder {
|
|
|
85676
86478
|
style: 'width:180px;height:112.5px'
|
|
85677
86479
|
}, {
|
|
85678
86480
|
title: 'Web (container)',
|
|
85679
|
-
pagesize: '
|
|
86481
|
+
pagesize: '1000px,1000px,web',
|
|
85680
86482
|
style: 'width:180px;height:112.5px'
|
|
85681
86483
|
}, {
|
|
85682
86484
|
title: '8.27x5.52',
|
|
@@ -86517,6 +87319,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86517
87319
|
if (window.data_basic) {
|
|
86518
87320
|
// if snippet file included
|
|
86519
87321
|
this.opts.snippetJSON = window.data_basic;
|
|
87322
|
+
if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
|
|
87323
|
+
if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
|
|
87324
|
+
this.opts.snippetJSON.snippets.splice(i, 1);
|
|
87325
|
+
}
|
|
87326
|
+
}
|
|
87327
|
+
|
|
86520
87328
|
// if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
|
|
86521
87329
|
if (this.opts.snippetPath === '') {
|
|
86522
87330
|
this.opts.snippetPath = window._snippets_path;
|
|
@@ -86557,12 +87365,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86557
87365
|
this.blockContainer = '.is-box';
|
|
86558
87366
|
this.imageResizeOnBlock = false;
|
|
86559
87367
|
this.toolbarDisplay = 'always';
|
|
86560
|
-
this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets',
|
|
86561
|
-
this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
|
|
86562
|
-
this.elementButtons = ['front', 'backward', 'moveup', 'movedown',
|
|
86563
|
-
this.elementButtonsMore = [];
|
|
86564
|
-
this.iconButtons = ['icon', 'color',
|
|
86565
|
-
this.iconButtonsMore = [];
|
|
87368
|
+
// this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets','pageoptions', 'print', 'html', 'zoom', 'more'];
|
|
87369
|
+
// this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
|
|
87370
|
+
// this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete','left', 'center', 'right', 'full' , 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'pageoptions', 'print', 'zoom', 'html'];
|
|
87371
|
+
// this.elementButtonsMore = [];
|
|
87372
|
+
// this.iconButtons = ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'pageoptions', 'print', 'zoom', 'html'];
|
|
87373
|
+
// this.iconButtonsMore = [];
|
|
87374
|
+
|
|
87375
|
+
this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
|
87376
|
+
this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'aiassistant', 'snippets', 'preferences'];
|
|
87377
|
+
this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
|
87378
|
+
this.elementButtonsMore = ['aiassistant', 'snippets', 'preferences'];
|
|
87379
|
+
this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
|
87380
|
+
this.iconButtonsMore = ['aiassistant', 'snippets', 'preferences'];
|
|
86566
87381
|
if (!this.docContainer && this.container !== '.is-container') {
|
|
86567
87382
|
this.docContainer = this.container;
|
|
86568
87383
|
this.container = '.is-container';
|
|
@@ -87074,6 +87889,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87074
87889
|
this.rte.hideBlockButtons();
|
|
87075
87890
|
this.rte.positionToolbar();
|
|
87076
87891
|
}
|
|
87892
|
+
if (this.blockmodal) {
|
|
87893
|
+
setTimeout(() => {
|
|
87894
|
+
this.blockmodal.showHideControls();
|
|
87895
|
+
}, 30);
|
|
87896
|
+
}
|
|
87077
87897
|
},
|
|
87078
87898
|
onSelectBlock: block => {
|
|
87079
87899
|
if (this.onSelectBlock) this.onSelectBlock(block);
|
|
@@ -87229,6 +88049,57 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87229
88049
|
}
|
|
87230
88050
|
}
|
|
87231
88051
|
});
|
|
88052
|
+
|
|
88053
|
+
// Copy & Paste Block
|
|
88054
|
+
document.addEventListener('keydown', e => {
|
|
88055
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 67) {
|
|
88056
|
+
//CTRL-C
|
|
88057
|
+
const activeBlock = docContainer.querySelector('.is-block.active'); // always get .cloned
|
|
88058
|
+
if (activeBlock) {
|
|
88059
|
+
this.copyBlock = activeBlock;
|
|
88060
|
+
}
|
|
88061
|
+
}
|
|
88062
|
+
});
|
|
88063
|
+
document.addEventListener('keydown', e => {
|
|
88064
|
+
if ((e.ctrlKey || e.metaKey) && e.which === 86) {
|
|
88065
|
+
//CTRL-V
|
|
88066
|
+
|
|
88067
|
+
const box = docContainer.querySelector('.is-box.box-select'); // always get .cloned
|
|
88068
|
+
let block = this.copyBlock;
|
|
88069
|
+
if (box && block) {
|
|
88070
|
+
if (document.querySelector('.is-modal.active:not(.is-modal-content)')) return;
|
|
88071
|
+
const focusedElement = e.target;
|
|
88072
|
+
const isEditable = focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA' || focusedElement.hasAttribute('contenteditable');
|
|
88073
|
+
if (isEditable) return;
|
|
88074
|
+
this.uo.saveForUndo();
|
|
88075
|
+
let block = this.copyBlock;
|
|
88076
|
+
const builder = block.querySelector(this.container);
|
|
88077
|
+
let html = '';
|
|
88078
|
+
if (builder) {
|
|
88079
|
+
html = this.readHtml(builder);
|
|
88080
|
+
}
|
|
88081
|
+
let clonedDiv = block.cloneNode(true);
|
|
88082
|
+
clonedDiv.style.top = '20%';
|
|
88083
|
+
clonedDiv.style.left = '20%';
|
|
88084
|
+
if (builder) {
|
|
88085
|
+
const cloneBuilder = clonedDiv.querySelector(this.container);
|
|
88086
|
+
cloneBuilder.innerHTML = '';
|
|
88087
|
+
box.appendChild(clonedDiv);
|
|
88088
|
+
const range = document.createRange();
|
|
88089
|
+
cloneBuilder.appendChild(range.createContextualFragment(html));
|
|
88090
|
+
this.applyBehaviorOn(cloneBuilder);
|
|
88091
|
+
cloneBuilder.click();
|
|
88092
|
+
} else {
|
|
88093
|
+
block.parentNode.appendChild(clonedDiv);
|
|
88094
|
+
}
|
|
88095
|
+
block.classList.remove('active');
|
|
88096
|
+
this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
|
88097
|
+
this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
|
|
88098
|
+
this.eb.refresh();
|
|
88099
|
+
this.opts.onChange();
|
|
88100
|
+
}
|
|
88101
|
+
}
|
|
88102
|
+
});
|
|
87232
88103
|
}
|
|
87233
88104
|
let previousWidth = this.win.innerWidth;
|
|
87234
88105
|
let timer;
|
|
@@ -87567,6 +88438,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87567
88438
|
}
|
|
87568
88439
|
}
|
|
87569
88440
|
}, 300);
|
|
88441
|
+
|
|
88442
|
+
// info
|
|
88443
|
+
let largeScreenBreakpoint = 1280; //1920
|
|
88444
|
+
largeScreenBreakpoint = window.innerWidth - 360; //351
|
|
88445
|
+
if (largeScreenBreakpoint < 1280) largeScreenBreakpoint = 1280;
|
|
88446
|
+
if (this.consoleLog) {
|
|
88447
|
+
console.log('vw: ' + window.innerWidth);
|
|
88448
|
+
console.log('lg: ' + largeScreenBreakpoint);
|
|
88449
|
+
}
|
|
87570
88450
|
} // constructor
|
|
87571
88451
|
|
|
87572
88452
|
// Convenience constructor, so that the plugin can be called directly using: ContentBuilder.run({ ... });
|
|
@@ -87649,6 +88529,22 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87649
88529
|
top: 0;
|
|
87650
88530
|
left: -1000px;
|
|
87651
88531
|
}
|
|
88532
|
+
.h-ruler {
|
|
88533
|
+
top:0;
|
|
88534
|
+
left:-100vw;
|
|
88535
|
+
width: 300vw;
|
|
88536
|
+
height:2px;
|
|
88537
|
+
display:none;
|
|
88538
|
+
}
|
|
88539
|
+
.h-ruler.active { display: block }
|
|
88540
|
+
.v-ruler {
|
|
88541
|
+
top:0;
|
|
88542
|
+
left:0;
|
|
88543
|
+
width:2px;
|
|
88544
|
+
height: 100%;
|
|
88545
|
+
display:none;
|
|
88546
|
+
}
|
|
88547
|
+
.v-ruler.active { display: block }
|
|
87652
88548
|
|
|
87653
88549
|
/* Resize Handles */
|
|
87654
88550
|
.handle {
|
|
@@ -87823,16 +88719,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87823
88719
|
@media (max-width: 760px) {
|
|
87824
88720
|
.is-box.autolayout .is-block > .rotate-handle,
|
|
87825
88721
|
.is-box.autolayout .is-block > .handle {
|
|
87826
|
-
|
|
88722
|
+
display: none;
|
|
87827
88723
|
}
|
|
87828
88724
|
|
|
87829
88725
|
/* NEW */
|
|
87830
|
-
.is-block.clone {
|
|
88726
|
+
.is-box.autolayout .is-block.clone {
|
|
87831
88727
|
display:none;
|
|
87832
88728
|
}
|
|
87833
|
-
.is-block.cloned {
|
|
88729
|
+
.is-box.autolayout .is-block.cloned {
|
|
87834
88730
|
outline: var(--is-outline);
|
|
87835
88731
|
}
|
|
88732
|
+
.is-box.box-select {
|
|
88733
|
+
outline: none !important;
|
|
88734
|
+
}
|
|
87836
88735
|
}
|
|
87837
88736
|
|
|
87838
88737
|
.is-block.locked .handle,
|
|
@@ -88499,7 +89398,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88499
89398
|
this.setZoomOnControl(builder);
|
|
88500
89399
|
}
|
|
88501
89400
|
html(area) {
|
|
88502
|
-
if (this.docContainer) {
|
|
89401
|
+
if (this.docContainer && !area) {
|
|
88503
89402
|
// freeform
|
|
88504
89403
|
|
|
88505
89404
|
const docContainer = this.doc.querySelector(this.docContainer);
|
|
@@ -88607,7 +89506,33 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88607
89506
|
}
|
|
88608
89507
|
refresh() {
|
|
88609
89508
|
if (this.eb) this.eb.refresh();
|
|
89509
|
+
|
|
89510
|
+
/*
|
|
89511
|
+
// Add block tool
|
|
89512
|
+
let html = `
|
|
89513
|
+
<div class="is-tool is-block-tool">
|
|
89514
|
+
<button type="button" tabindex="-1" title="${this.util.out('Settings')}" class="block-settings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>
|
|
89515
|
+
</div>
|
|
89516
|
+
`;
|
|
89517
|
+
let blocks = this.doc.querySelectorAll('.is-block');
|
|
89518
|
+
blocks.forEach(block => {
|
|
89519
|
+
let tool = block.querySelector('.is-block-tool');
|
|
89520
|
+
if(tool) tool.remove();
|
|
89521
|
+
block.insertAdjacentHTML('beforeend', html);
|
|
89522
|
+
tool = block.querySelector('.is-block-tool');
|
|
89523
|
+
tool.addEventListener('click',(e)=>{
|
|
89524
|
+
if(document.querySelector('.is-modal.editblock.active')) {
|
|
89525
|
+
this.blockmodal.hide();
|
|
89526
|
+
} else {
|
|
89527
|
+
this.blockmodal.show();
|
|
89528
|
+
}
|
|
89529
|
+
e.preventDefault();
|
|
89530
|
+
e.stopImmediatePropagation();
|
|
89531
|
+
});
|
|
89532
|
+
});
|
|
89533
|
+
*/
|
|
88610
89534
|
}
|
|
89535
|
+
|
|
88611
89536
|
group() {
|
|
88612
89537
|
if (!this.eb) return;
|
|
88613
89538
|
this.uo.saveForUndo();
|
|
@@ -88762,6 +89687,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88762
89687
|
<!--
|
|
88763
89688
|
<button type="button" tabindex="-1" class="box-settings" title="${this.util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
88764
89689
|
-->
|
|
89690
|
+
<button type="button" tabindex="-1" class="box-duplicate" title="${this.util.out('Duplicate')}"><svg class="is-icon-flex" style="width:14px;height:14px"><use xlink:href="#icon-duplicate"></use></svg></button>
|
|
88765
89691
|
<button type="button" tabindex="-1" class="box-remove" title="${this.util.out('Remove')}"><svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg></button>
|
|
88766
89692
|
</div>
|
|
88767
89693
|
<div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
|
|
@@ -88812,6 +89738,57 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88812
89738
|
});
|
|
88813
89739
|
this.opts.onChange();
|
|
88814
89740
|
});
|
|
89741
|
+
const btnDuplicate = box.querySelector('.is-canvas-tool .box-duplicate');
|
|
89742
|
+
btnDuplicate.addEventListener('click', e => {
|
|
89743
|
+
this.eb.selectClear(); // clear clone
|
|
89744
|
+
|
|
89745
|
+
// clear active
|
|
89746
|
+
const box = e.target.closest('.is-box');
|
|
89747
|
+
const block = box.querySelector('.is-block.active');
|
|
89748
|
+
if (block) block.classList.remove('active');
|
|
89749
|
+
this.uo.saveForUndo();
|
|
89750
|
+
let copiedBox = box.cloneNode(true);
|
|
89751
|
+
copiedBox.setAttribute('data-box-copied', '1');
|
|
89752
|
+
let parent = box.parentNode;
|
|
89753
|
+
parent.insertBefore(copiedBox, box.nextElementSibling);
|
|
89754
|
+
let newBox = docContainer.querySelector('[data-box-copied]');
|
|
89755
|
+
newBox.removeAttribute('data-box-copied');
|
|
89756
|
+
|
|
89757
|
+
// Code Blocks Handling
|
|
89758
|
+
let codeBlocks = newBox.querySelectorAll('[data-module]');
|
|
89759
|
+
codeBlocks.forEach(element => {
|
|
89760
|
+
let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
|
|
89761
|
+
html = html.replace(/{id}/g, this.util.makeId());
|
|
89762
|
+
//Fill the block with original code
|
|
89763
|
+
this.html(element, html);
|
|
89764
|
+
});
|
|
89765
|
+
newBox.scrollIntoView({
|
|
89766
|
+
behavior: 'smooth',
|
|
89767
|
+
block: 'center'
|
|
89768
|
+
});
|
|
89769
|
+
this.applyBehaviorCanvas();
|
|
89770
|
+
|
|
89771
|
+
// ContentBuilder Handling
|
|
89772
|
+
let containers = newBox.querySelectorAll('.is-builder');
|
|
89773
|
+
containers.forEach(container => {
|
|
89774
|
+
let containerHtml = this.html(container);
|
|
89775
|
+
let range = document.createRange();
|
|
89776
|
+
container.innerHTML = '';
|
|
89777
|
+
container.appendChild(range.createContextualFragment(containerHtml));
|
|
89778
|
+
container.removeAttribute('data-sort'); //important (ContentBuilder cleanup for the container)
|
|
89779
|
+
this.applyBehaviorOn(container);
|
|
89780
|
+
});
|
|
89781
|
+
this.eb.refresh();
|
|
89782
|
+
this.opts.onChange();
|
|
89783
|
+
|
|
89784
|
+
// Change selection
|
|
89785
|
+
setTimeout(() => {
|
|
89786
|
+
box.classList.remove('box-select');
|
|
89787
|
+
const prevBox = docContainer.querySelector('.box-select');
|
|
89788
|
+
if (prevBox) prevBox.classList.remove('box-select');
|
|
89789
|
+
newBox.classList.add('box-select');
|
|
89790
|
+
}, 30);
|
|
89791
|
+
});
|
|
88815
89792
|
const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
|
|
88816
89793
|
btnRemove.addEventListener('click', e => {
|
|
88817
89794
|
const box = e.target.closest('.is-box');
|
|
@@ -89878,6 +90855,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
89878
90855
|
script.async = true;
|
|
89879
90856
|
script.onload = () => {
|
|
89880
90857
|
this.opts.snippetJSON = window.data_basic;
|
|
90858
|
+
if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
|
|
90859
|
+
if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
|
|
90860
|
+
this.opts.snippetJSON.snippets.splice(i, 1);
|
|
90861
|
+
}
|
|
90862
|
+
}
|
|
90863
|
+
|
|
89881
90864
|
// if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
|
|
89882
90865
|
if (this.opts.snippetPath === '') {
|
|
89883
90866
|
this.opts.snippetPath = window._snippets_path;
|
|
@@ -89904,7 +90887,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
89904
90887
|
html = `
|
|
89905
90888
|
<div class="is-box box-canvas autolayout">
|
|
89906
90889
|
<div class="is-block block-steady height-auto" style="top: calc(50% - 357px); left: calc(50% - 348px); width: 696px;" data--t="calc(50% - 357px)" data--l="calc(50% - 348px)" data--b="" data--r="" data--w="696px" data--h="">
|
|
89907
|
-
<div class="is-container
|
|
90890
|
+
<div class="is-container">
|
|
89908
90891
|
${html}
|
|
89909
90892
|
</div>
|
|
89910
90893
|
<div class="is-block-overlay"></div>
|
|
@@ -91476,6 +92459,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
91476
92459
|
|
|
91477
92460
|
if (this.opts.emailMode) bSnippet = false;
|
|
91478
92461
|
|
|
92462
|
+
// check if is block
|
|
92463
|
+
let isBlock = false;
|
|
92464
|
+
if (html.includes('"is-block')) {
|
|
92465
|
+
isBlock = true;
|
|
92466
|
+
bSnippet = false;
|
|
92467
|
+
}
|
|
92468
|
+
|
|
91479
92469
|
// Convert snippet into your defined 12 columns grid
|
|
91480
92470
|
var rowClass = this.opts.row; //row
|
|
91481
92471
|
var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
|
|
@@ -91522,24 +92512,26 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
91522
92512
|
this.dom.removeClass(itemEl, 'snippet-item');
|
|
91523
92513
|
let bw = '';
|
|
91524
92514
|
if (this.page && this.page === '.is-wrapper') {
|
|
91525
|
-
bw = '
|
|
92515
|
+
bw = '760px';
|
|
91526
92516
|
} else {
|
|
91527
92517
|
if (occurrences === 2) {
|
|
91528
|
-
bw = '
|
|
92518
|
+
bw = '760px';
|
|
91529
92519
|
} else if (occurrences >= 3) {
|
|
91530
|
-
bw = '
|
|
92520
|
+
bw = '760px';
|
|
91531
92521
|
} else {
|
|
91532
92522
|
bw = '540px';
|
|
91533
92523
|
}
|
|
91534
92524
|
}
|
|
91535
92525
|
const blockTemplate = `
|
|
91536
92526
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
|
91537
|
-
<div class="is-container container-new
|
|
92527
|
+
<div class="is-container container-new">
|
|
91538
92528
|
[%CONTENT%]
|
|
91539
92529
|
</div>
|
|
91540
92530
|
</div>
|
|
91541
92531
|
`; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
|
|
91542
92532
|
itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
|
|
92533
|
+
} else if (isBlock) {
|
|
92534
|
+
itemEl.outerHTML = html;
|
|
91543
92535
|
} else {
|
|
91544
92536
|
// Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
|
|
91545
92537
|
// Can only be inserted after current row or last row (not on column or element).
|
|
@@ -91572,19 +92564,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
91572
92564
|
itemEl.appendChild(range.createContextualFragment(html));
|
|
91573
92565
|
let bw = '';
|
|
91574
92566
|
if (this.page && this.page === '.is-wrapper') {
|
|
91575
|
-
bw = '
|
|
92567
|
+
bw = '760px';
|
|
91576
92568
|
} else {
|
|
91577
92569
|
if (occurrences === 2) {
|
|
91578
|
-
bw = '
|
|
92570
|
+
bw = '760px';
|
|
91579
92571
|
} else if (occurrences >= 3) {
|
|
91580
|
-
bw = '
|
|
92572
|
+
bw = '760px';
|
|
91581
92573
|
} else {
|
|
91582
92574
|
bw = '540px';
|
|
91583
92575
|
}
|
|
91584
92576
|
}
|
|
91585
92577
|
const blockTemplate = `
|
|
91586
92578
|
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
|
91587
|
-
<div class="is-container container-new
|
|
92579
|
+
<div class="is-container container-new">
|
|
91588
92580
|
[%CONTENT%]
|
|
91589
92581
|
</div>
|
|
91590
92582
|
</div>
|