@innovastudio/contentbuilder 1.5.9 → 1.5.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2009,7 +2009,10 @@ class Util {
|
|
|
2009
2009
|
const dom = this.dom;
|
|
2010
2010
|
dom.removeClass(modal, 'active');
|
|
2011
2011
|
modal.style.display = '';
|
|
2012
|
+
|
|
2013
|
+
// document.body.style.overflow = '';
|
|
2012
2014
|
}
|
|
2015
|
+
|
|
2013
2016
|
refreshModuleLayout(col) {
|
|
2014
2017
|
let savedHeight;
|
|
2015
2018
|
if (col.style.height) savedHeight = col.style.height;else col.style.height = `${col.offsetHeight}px`;
|
|
@@ -5014,6 +5017,12 @@ class Dom {
|
|
|
5014
5017
|
}
|
|
5015
5018
|
});
|
|
5016
5019
|
}
|
|
5020
|
+
countOccurrences(text, word) {
|
|
5021
|
+
// match the word globally and case insensitively
|
|
5022
|
+
const regex = new RegExp(word, 'gi');
|
|
5023
|
+
const matches = text.match(regex);
|
|
5024
|
+
return matches ? matches.length : 0;
|
|
5025
|
+
}
|
|
5017
5026
|
}
|
|
5018
5027
|
|
|
5019
5028
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
@@ -11517,7 +11526,7 @@ class HtmlUtil {
|
|
|
11517
11526
|
elm.removeAttribute('grideditor');
|
|
11518
11527
|
elm.removeAttribute('gridoutline');
|
|
11519
11528
|
});
|
|
11520
|
-
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool');
|
|
11529
|
+
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
|
|
11521
11530
|
elms.forEach(elm => {
|
|
11522
11531
|
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
|
11523
11532
|
elm.previousSibling.remove();
|
|
@@ -11890,6 +11899,8 @@ class UndoRedo {
|
|
|
11890
11899
|
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
|
11891
11900
|
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
|
11892
11901
|
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
|
11902
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvas-tool'));
|
|
11903
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
|
|
11893
11904
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
|
11894
11905
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
|
11895
11906
|
|
|
@@ -12069,6 +12080,7 @@ class UndoRedo {
|
|
|
12069
12080
|
this.writeHtml(html);
|
|
12070
12081
|
}
|
|
12071
12082
|
this.builder.applyBehavior();
|
|
12083
|
+
this.builder.applyBehaviorCanvas();
|
|
12072
12084
|
this.builder.opts.onChange();
|
|
12073
12085
|
this.undoList[120] = this.undoList[121];
|
|
12074
12086
|
this.undoList[121] = this.undoList[122];
|
|
@@ -12158,6 +12170,7 @@ class UndoRedo {
|
|
|
12158
12170
|
this.writeHtml(html);
|
|
12159
12171
|
}
|
|
12160
12172
|
this.builder.applyBehavior();
|
|
12173
|
+
this.builder.applyBehaviorCanvas();
|
|
12161
12174
|
this.builder.opts.onChange();
|
|
12162
12175
|
this.undoList[119] = this.undoList[118];
|
|
12163
12176
|
this.undoList[118] = this.undoList[117];
|
|
@@ -12601,6 +12614,24 @@ const prepareSvgIcons = builder => {
|
|
|
12601
12614
|
<symbol id="icon-svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12602
12615
|
<path d="M21 8h-2a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2v-4h-1" /><path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" /><path d="M10 8l1.5 8h1l1.5 -8" />
|
|
12603
12616
|
</symbol>
|
|
12617
|
+
|
|
12618
|
+
<symbol id="icon-pagesize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12619
|
+
<path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M7 12v-3h3" /><path d="M17 12v3h-3" />
|
|
12620
|
+
</symbol>
|
|
12621
|
+
<symbol id="icon-print" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12622
|
+
<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" />
|
|
12623
|
+
</symbol>
|
|
12624
|
+
|
|
12625
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12626
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
12627
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
12628
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
12629
|
+
</symbol>
|
|
12630
|
+
<symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
12631
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
12632
|
+
<path d="M12 5l0 14"></path>
|
|
12633
|
+
<path d="M5 12l14 0"></path>
|
|
12634
|
+
</symbol>
|
|
12604
12635
|
</svg>`;
|
|
12605
12636
|
builder.dom.appendHtml(builder.builderStuff, html);
|
|
12606
12637
|
};
|
|
@@ -64388,8 +64419,14 @@ class Rte {
|
|
|
64388
64419
|
let rteZoomSlider;
|
|
64389
64420
|
let inpZoomSlider;
|
|
64390
64421
|
if (!rteTool) {
|
|
64422
|
+
let zoomMax = 100;
|
|
64423
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
|
64424
|
+
// freeform
|
|
64425
|
+
zoomMax = 200;
|
|
64426
|
+
}
|
|
64427
|
+
|
|
64391
64428
|
// if(builder.plugins.length>0) {
|
|
64392
|
-
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg'];
|
|
64429
|
+
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg', 'pageoptions', 'print'];
|
|
64393
64430
|
const filterButtons = myArray => {
|
|
64394
64431
|
let newArray = myArray;
|
|
64395
64432
|
myArray.forEach(item => {
|
|
@@ -64449,7 +64486,7 @@ class Rte {
|
|
|
64449
64486
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
|
64450
64487
|
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>`;
|
|
64451
64488
|
// 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>`;
|
|
64452
|
-
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="margin-top:2px;width:
|
|
64489
|
+
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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64453
64490
|
html_rtemore += '<div class="rte-separator"></div>';
|
|
64454
64491
|
} else {
|
|
64455
64492
|
html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64459,7 +64496,7 @@ class Rte {
|
|
|
64459
64496
|
let html_rte = '';
|
|
64460
64497
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
|
64461
64498
|
btn = builder.opts.buttons[j].toLowerCase();
|
|
64462
|
-
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="
|
|
64499
|
+
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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64463
64500
|
html_rte += '<div class="rte-separator"></div>';
|
|
64464
64501
|
} else {
|
|
64465
64502
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64477,7 +64514,7 @@ class Rte {
|
|
|
64477
64514
|
let html_elementrtemore = '';
|
|
64478
64515
|
for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
|
|
64479
64516
|
btn = builder.opts.elementButtonsMore[j].toLowerCase();
|
|
64480
|
-
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="margin-top:2px;width:
|
|
64517
|
+
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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64481
64518
|
html_elementrtemore += '<div class="rte-separator"></div>';
|
|
64482
64519
|
} else {
|
|
64483
64520
|
html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64487,7 +64524,7 @@ class Rte {
|
|
|
64487
64524
|
let html_elementrte = '';
|
|
64488
64525
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
|
64489
64526
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
|
64490
|
-
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:20px;height:20px;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') html_elementrte += `<button
|
|
64527
|
+
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:20px;height:20px;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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64491
64528
|
html_elementrte += '<div class="rte-separator"></div>';
|
|
64492
64529
|
} else {
|
|
64493
64530
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64507,7 +64544,7 @@ class Rte {
|
|
|
64507
64544
|
let html_iconrte = '';
|
|
64508
64545
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
|
64509
64546
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
|
64510
|
-
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="margin-top:2px;width:
|
|
64547
|
+
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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64511
64548
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
|
64512
64549
|
} else {
|
|
64513
64550
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64516,7 +64553,7 @@ class Rte {
|
|
|
64516
64553
|
|
|
64517
64554
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
|
64518
64555
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
|
64519
|
-
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="margin-top:2px;width:
|
|
64556
|
+
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" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><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="margin-top:2px;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:2px;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 === '|') {
|
|
64520
64557
|
html_iconrte += '<div class="rte-separator"></div>';
|
|
64521
64558
|
} else {
|
|
64522
64559
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
|
@@ -64661,7 +64698,7 @@ class Rte {
|
|
|
64661
64698
|
<div>
|
|
64662
64699
|
<div class="is-label">${util.out('Zoom')}</div>
|
|
64663
64700
|
<div style="padding-top:4px">
|
|
64664
|
-
<input type="range" min="50" max="
|
|
64701
|
+
<input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
|
|
64665
64702
|
</div>
|
|
64666
64703
|
</div>
|
|
64667
64704
|
</div>
|
|
@@ -65610,6 +65647,22 @@ class Rte {
|
|
|
65610
65647
|
});
|
|
65611
65648
|
});
|
|
65612
65649
|
|
|
65650
|
+
// Page Options
|
|
65651
|
+
let btnPageOptions = builderStuff.querySelectorAll('button.rte-pageoptions');
|
|
65652
|
+
btnPageOptions.forEach(btn => {
|
|
65653
|
+
btn.addEventListener('click', () => {
|
|
65654
|
+
this.builder.openPageOptions();
|
|
65655
|
+
});
|
|
65656
|
+
});
|
|
65657
|
+
|
|
65658
|
+
// Print
|
|
65659
|
+
let btnPrint = builderStuff.querySelectorAll('button.rte-print');
|
|
65660
|
+
btnPrint.forEach(btn => {
|
|
65661
|
+
btn.addEventListener('click', () => {
|
|
65662
|
+
this.builder.print();
|
|
65663
|
+
});
|
|
65664
|
+
});
|
|
65665
|
+
|
|
65613
65666
|
// Zoom Settings
|
|
65614
65667
|
let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
|
|
65615
65668
|
zoomButton.forEach(btn => {
|
|
@@ -65726,6 +65779,14 @@ class Rte {
|
|
|
65726
65779
|
tools.forEach(tool => {
|
|
65727
65780
|
tool.style.display = 'none';
|
|
65728
65781
|
});
|
|
65782
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
|
65783
|
+
tools.forEach(tool => {
|
|
65784
|
+
tool.style.display = 'none';
|
|
65785
|
+
});
|
|
65786
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
|
65787
|
+
tools.forEach(tool => {
|
|
65788
|
+
tool.style.display = 'none';
|
|
65789
|
+
});
|
|
65729
65790
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
|
65730
65791
|
tools.forEach(tool => {
|
|
65731
65792
|
tool.style.opacity = 0;
|
|
@@ -65747,6 +65808,14 @@ class Rte {
|
|
|
65747
65808
|
tools.forEach(tool => {
|
|
65748
65809
|
tool.style.display = '';
|
|
65749
65810
|
});
|
|
65811
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
|
65812
|
+
tools.forEach(tool => {
|
|
65813
|
+
tool.style.display = '';
|
|
65814
|
+
});
|
|
65815
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
|
65816
|
+
tools.forEach(tool => {
|
|
65817
|
+
tool.style.display = '';
|
|
65818
|
+
});
|
|
65750
65819
|
}, 350);
|
|
65751
65820
|
};
|
|
65752
65821
|
this.rteZoomSlider.value = this.builder.opts.zoom * 100;
|
|
@@ -65782,9 +65851,13 @@ class Rte {
|
|
|
65782
65851
|
this.rteZoomSlider.onchange = () => {
|
|
65783
65852
|
setTimeout(() => {
|
|
65784
65853
|
// setZoomOnControl
|
|
65785
|
-
if (this.builder.
|
|
65854
|
+
if (this.builder.isContentBox) {
|
|
65786
65855
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
|
65787
65856
|
this.builder.setZoomOnControl(wrapper);
|
|
65857
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
65858
|
+
// freeform
|
|
65859
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
65860
|
+
this.builder.setZoomOnControl(docContainer);
|
|
65788
65861
|
} else {
|
|
65789
65862
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
|
65790
65863
|
builders.forEach(builder => {
|
|
@@ -65835,9 +65908,13 @@ class Rte {
|
|
|
65835
65908
|
this.inpZoomSlider.onchange = () => {
|
|
65836
65909
|
setTimeout(() => {
|
|
65837
65910
|
// setZoomOnControl
|
|
65838
|
-
if (this.builder.
|
|
65911
|
+
if (this.builder.isContentBox) {
|
|
65839
65912
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
|
65840
65913
|
this.builder.setZoomOnControl(wrapper);
|
|
65914
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
65915
|
+
// freeform
|
|
65916
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
65917
|
+
this.builder.setZoomOnControl(docContainer);
|
|
65841
65918
|
} else {
|
|
65842
65919
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
|
65843
65920
|
builders.forEach(builder => {
|
|
@@ -65859,6 +65936,14 @@ class Rte {
|
|
|
65859
65936
|
tools.forEach(tool => {
|
|
65860
65937
|
tool.style.display = '';
|
|
65861
65938
|
});
|
|
65939
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
|
65940
|
+
tools.forEach(tool => {
|
|
65941
|
+
tool.style.display = '';
|
|
65942
|
+
});
|
|
65943
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
|
65944
|
+
tools.forEach(tool => {
|
|
65945
|
+
tool.style.display = '';
|
|
65946
|
+
});
|
|
65862
65947
|
if (this.builder.onZoomEnd) {
|
|
65863
65948
|
let val = this.rteZoomSlider.value;
|
|
65864
65949
|
let scale = val / 100;
|
|
@@ -66919,6 +67004,14 @@ class Rte {
|
|
|
66919
67004
|
tools.forEach(tool => {
|
|
66920
67005
|
tool.style.display = 'none';
|
|
66921
67006
|
});
|
|
67007
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
|
67008
|
+
tools.forEach(tool => {
|
|
67009
|
+
tool.style.display = 'none';
|
|
67010
|
+
});
|
|
67011
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
|
67012
|
+
tools.forEach(tool => {
|
|
67013
|
+
tool.style.display = 'none';
|
|
67014
|
+
});
|
|
66922
67015
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
|
66923
67016
|
tools.forEach(tool => {
|
|
66924
67017
|
tool.style.opacity = 0;
|
|
@@ -66932,9 +67025,13 @@ class Rte {
|
|
|
66932
67025
|
zoomEnd(inp) {
|
|
66933
67026
|
setTimeout(() => {
|
|
66934
67027
|
// setZoomOnControl
|
|
66935
|
-
if (this.builder.
|
|
67028
|
+
if (this.builder.isContentBox) {
|
|
66936
67029
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
|
66937
67030
|
this.builder.setZoomOnControl(wrapper);
|
|
67031
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
67032
|
+
// freeform
|
|
67033
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
67034
|
+
this.builder.setZoomOnControl(docContainer);
|
|
66938
67035
|
} else {
|
|
66939
67036
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
|
66940
67037
|
builders.forEach(builder => {
|
|
@@ -66956,6 +67053,14 @@ class Rte {
|
|
|
66956
67053
|
tools.forEach(tool => {
|
|
66957
67054
|
tool.style.display = '';
|
|
66958
67055
|
});
|
|
67056
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
|
67057
|
+
tools.forEach(tool => {
|
|
67058
|
+
tool.style.display = '';
|
|
67059
|
+
});
|
|
67060
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
|
67061
|
+
tools.forEach(tool => {
|
|
67062
|
+
tool.style.display = '';
|
|
67063
|
+
});
|
|
66959
67064
|
if (this.builder.onZoomEnd) {
|
|
66960
67065
|
let val = inp.value;
|
|
66961
67066
|
let scale = val / 100;
|
|
@@ -67744,11 +67849,12 @@ class Rte {
|
|
|
67744
67849
|
Array.prototype.forEach.call(elms, elm => {
|
|
67745
67850
|
elm.style.display = 'none';
|
|
67746
67851
|
});
|
|
67747
|
-
elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
|
67748
|
-
Array.prototype.forEach.call(elms, elm => {
|
|
67749
|
-
|
|
67750
|
-
});
|
|
67852
|
+
// elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
|
67853
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
|
67854
|
+
// elm.style.display = 'none';
|
|
67855
|
+
// });
|
|
67751
67856
|
}
|
|
67857
|
+
|
|
67752
67858
|
showAlignButtons() {
|
|
67753
67859
|
let separators = this.elementRteTool.querySelectorAll('.rte-separator');
|
|
67754
67860
|
Array.prototype.forEach.call(separators, separator => {
|
|
@@ -71733,7 +71839,39 @@ class SaveImages {
|
|
|
71733
71839
|
}
|
|
71734
71840
|
uploadImages(area) {
|
|
71735
71841
|
if (!area) return;
|
|
71842
|
+
|
|
71736
71843
|
//Check all images
|
|
71844
|
+
|
|
71845
|
+
const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
|
|
71846
|
+
divs.forEach(div => {
|
|
71847
|
+
let src = '';
|
|
71848
|
+
if (div.style.backgroundImage) {
|
|
71849
|
+
if (div.style.backgroundImage.indexOf('url(') !== -1) {
|
|
71850
|
+
src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
71851
|
+
}
|
|
71852
|
+
} else if (div.classList.contains('is-lightbox')) {
|
|
71853
|
+
src = div.getAttribute('href');
|
|
71854
|
+
} else if (div.classList.contains('block-click')) {
|
|
71855
|
+
src = div.getAttribute('data-modal-url');
|
|
71856
|
+
}
|
|
71857
|
+
if (src.includes('base64')) {
|
|
71858
|
+
if (this.opts.onBase64Upload) {
|
|
71859
|
+
let ext = 'jpg';
|
|
71860
|
+
if (src.includes('image/png')) {
|
|
71861
|
+
ext = 'png';
|
|
71862
|
+
}
|
|
71863
|
+
|
|
71864
|
+
//Read image (base64 string)
|
|
71865
|
+
let image = src;
|
|
71866
|
+
image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
|
|
71867
|
+
let filename = this.builder.util.makeId() + '.' + ext; //img.getAttribute('data-filename');
|
|
71868
|
+
|
|
71869
|
+
// console.log(div)
|
|
71870
|
+
this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
|
|
71871
|
+
}
|
|
71872
|
+
}
|
|
71873
|
+
});
|
|
71874
|
+
|
|
71737
71875
|
const images = area.querySelectorAll('img');
|
|
71738
71876
|
Array.prototype.forEach.call(images, img => {
|
|
71739
71877
|
let src = img.getAttribute('src');
|
|
@@ -80483,16 +80621,30 @@ ${answer}
|
|
|
80483
80621
|
}
|
|
80484
80622
|
|
|
80485
80623
|
getContainer() {
|
|
80486
|
-
let container, builderActive
|
|
80624
|
+
let container, builderActive;
|
|
80487
80625
|
builderActive = this.builder.doc.querySelector('.builder-active');
|
|
80488
80626
|
if (builderActive) container = builderActive;else {
|
|
80489
|
-
|
|
80490
|
-
|
|
80627
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
80628
|
+
// canvas mode
|
|
80491
80629
|
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
|
80492
80630
|
if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
|
|
80493
|
-
if (activeBlock)
|
|
80494
|
-
|
|
80631
|
+
if (activeBlock) {
|
|
80632
|
+
container = activeBlock.querySelector(this.builder.container);
|
|
80633
|
+
if (!container) container = this.builder.doc.querySelector(this.builder.container);
|
|
80634
|
+
} else {
|
|
80635
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80636
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
|
80637
|
+
if (!blockContainer) {
|
|
80638
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80639
|
+
}
|
|
80640
|
+
if (blockContainer) {
|
|
80641
|
+
container = blockContainer.querySelector(this.builder.container);
|
|
80642
|
+
} else {
|
|
80643
|
+
container = this.builder.doc.querySelector(this.builder.container);
|
|
80644
|
+
}
|
|
80645
|
+
}
|
|
80495
80646
|
} else {
|
|
80647
|
+
// standard mode
|
|
80496
80648
|
container = this.builder.doc.querySelector(this.builder.container);
|
|
80497
80649
|
}
|
|
80498
80650
|
}
|
|
@@ -80500,56 +80652,92 @@ ${answer}
|
|
|
80500
80652
|
}
|
|
80501
80653
|
renderImage(src) {
|
|
80502
80654
|
this.builder.saveForUndo();
|
|
80655
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
80656
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80657
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
|
80658
|
+
if (!blockContainer) {
|
|
80659
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80660
|
+
}
|
|
80661
|
+
if (!blockContainer) {
|
|
80662
|
+
this.builder.addPage();
|
|
80663
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80664
|
+
}
|
|
80665
|
+
let html = `
|
|
80666
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
|
80667
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
|
80668
|
+
</div>
|
|
80669
|
+
`;
|
|
80670
|
+
this.builder.addBlock(html, blockContainer);
|
|
80671
|
+
this.builder.settings.onChange();
|
|
80672
|
+
this.builder.settings.onRender();
|
|
80673
|
+
return;
|
|
80674
|
+
}
|
|
80503
80675
|
let container = this.getContainer();
|
|
80504
80676
|
if (!container) {
|
|
80505
|
-
|
|
80506
|
-
|
|
80507
|
-
|
|
80508
|
-
|
|
80509
|
-
|
|
80510
|
-
|
|
80511
|
-
<div class="is-
|
|
80512
|
-
|
|
80677
|
+
/*
|
|
80678
|
+
if(this.builder.canvas) {
|
|
80679
|
+
// Canvas Mode
|
|
80680
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80681
|
+
if(docContainer) {
|
|
80682
|
+
|
|
80683
|
+
// <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
|
80684
|
+
// <div class="is-container leading-12 size-17">
|
|
80685
|
+
// <div class="row"><div class="column"><img src="${src}"></div></div>
|
|
80686
|
+
// </div>
|
|
80687
|
+
// </div>
|
|
80688
|
+
let html = `
|
|
80689
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
|
80690
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
|
80513
80691
|
</div>
|
|
80514
|
-
|
|
80515
|
-
|
|
80516
|
-
|
|
80517
|
-
|
|
80518
|
-
|
|
80519
|
-
|
|
80520
|
-
|
|
80521
|
-
|
|
80522
|
-
this.builder.addBlock(html, blockContainer);
|
|
80523
|
-
}
|
|
80524
|
-
} else {
|
|
80525
|
-
this.util.showMessage(this.util.out('No text container found.'));
|
|
80526
|
-
this.dictation.finish(); // Must be called after finished
|
|
80527
|
-
return;
|
|
80692
|
+
`;
|
|
80693
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80694
|
+
this.builder.addBlock(html, blockContainer);
|
|
80695
|
+
}
|
|
80696
|
+
} else {
|
|
80697
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
|
80698
|
+
this.dictation.finish(); // Must be called after finished
|
|
80699
|
+
return;
|
|
80528
80700
|
}
|
|
80701
|
+
*/
|
|
80702
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
|
80703
|
+
this.dictation.finish(); // Must be called after finished
|
|
80704
|
+
return;
|
|
80529
80705
|
} else {
|
|
80530
|
-
|
|
80531
|
-
|
|
80532
|
-
|
|
80533
|
-
|
|
80706
|
+
/*
|
|
80707
|
+
if(this.builder.canvas) {
|
|
80708
|
+
// Canvas Mode
|
|
80709
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80710
|
+
if(docContainer) {
|
|
80711
|
+
|
|
80712
|
+
let html = `
|
|
80713
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
|
80714
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
|
80715
|
+
</div>
|
|
80716
|
+
`;
|
|
80717
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80718
|
+
this.builder.addBlock(html, blockContainer);
|
|
80719
|
+
}
|
|
80720
|
+
} else {
|
|
80721
|
+
// Normal
|
|
80534
80722
|
let html = `
|
|
80535
|
-
|
|
80536
|
-
|
|
80537
|
-
|
|
80538
|
-
|
|
80539
|
-
|
|
80540
|
-
|
|
80541
|
-
|
|
80542
|
-
} else {
|
|
80543
|
-
// Normal
|
|
80544
|
-
let html = `
|
|
80545
|
-
<div class="row"><div class="column"><img src="${src}"></div></div>
|
|
80546
|
-
`;
|
|
80547
|
-
container.insertAdjacentHTML('afterBegin', html);
|
|
80548
|
-
setTimeout(() => {
|
|
80549
|
-
container.firstElementChild.click();
|
|
80550
|
-
}, 300);
|
|
80551
|
-
this.builder.applyBehaviorOn(container);
|
|
80723
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
|
80724
|
+
`;
|
|
80725
|
+
container.insertAdjacentHTML('afterBegin', html);
|
|
80726
|
+
setTimeout(()=>{
|
|
80727
|
+
container.firstElementChild.click();
|
|
80728
|
+
}, 300);
|
|
80729
|
+
this.builder.applyBehaviorOn(container);
|
|
80552
80730
|
}
|
|
80731
|
+
*/
|
|
80732
|
+
// Normal
|
|
80733
|
+
let html = `
|
|
80734
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
|
80735
|
+
`;
|
|
80736
|
+
container.insertAdjacentHTML('afterBegin', html);
|
|
80737
|
+
setTimeout(() => {
|
|
80738
|
+
container.firstElementChild.click();
|
|
80739
|
+
}, 300);
|
|
80740
|
+
this.builder.applyBehaviorOn(container);
|
|
80553
80741
|
}
|
|
80554
80742
|
this.builder.settings.onChange();
|
|
80555
80743
|
this.builder.settings.onRender();
|
|
@@ -80562,50 +80750,87 @@ ${answer}
|
|
|
80562
80750
|
if (elm) {
|
|
80563
80751
|
html = elm.innerHTML;
|
|
80564
80752
|
}
|
|
80753
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
|
80754
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80755
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
|
80756
|
+
if (!blockContainer) {
|
|
80757
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80758
|
+
}
|
|
80759
|
+
if (!blockContainer) {
|
|
80760
|
+
this.builder.addPage();
|
|
80761
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80762
|
+
}
|
|
80763
|
+
html = `
|
|
80764
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
|
80765
|
+
<div class="is-container leading-12 size-17">
|
|
80766
|
+
${html}
|
|
80767
|
+
</div>
|
|
80768
|
+
</div>
|
|
80769
|
+
`;
|
|
80770
|
+
this.builder.addBlock(html, blockContainer);
|
|
80771
|
+
this.builder.settings.onChange();
|
|
80772
|
+
this.builder.settings.onRender();
|
|
80773
|
+
return;
|
|
80774
|
+
}
|
|
80565
80775
|
let container = this.getContainer();
|
|
80566
80776
|
if (!container) {
|
|
80567
|
-
|
|
80568
|
-
|
|
80569
|
-
|
|
80570
|
-
|
|
80571
|
-
|
|
80572
|
-
|
|
80573
|
-
|
|
80574
|
-
|
|
80575
|
-
|
|
80576
|
-
|
|
80577
|
-
|
|
80578
|
-
|
|
80579
|
-
|
|
80580
|
-
|
|
80581
|
-
|
|
80582
|
-
|
|
80583
|
-
|
|
80584
|
-
|
|
80777
|
+
/*
|
|
80778
|
+
if(this.builder.canvas) {
|
|
80779
|
+
// Canvas Mode
|
|
80780
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80781
|
+
if(docContainer) {
|
|
80782
|
+
|
|
80783
|
+
html = `
|
|
80784
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
|
80785
|
+
<div class="is-container leading-12 size-17">
|
|
80786
|
+
${html}
|
|
80787
|
+
</div>
|
|
80788
|
+
</div>
|
|
80789
|
+
`;
|
|
80790
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80791
|
+
this.builder.addBlock(html, blockContainer);
|
|
80792
|
+
}
|
|
80793
|
+
} else {
|
|
80794
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
|
80795
|
+
this.dictation.finish(); // Must be called after finished
|
|
80796
|
+
return;
|
|
80585
80797
|
}
|
|
80798
|
+
*/
|
|
80799
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
|
80800
|
+
this.dictation.finish(); // Must be called after finished
|
|
80801
|
+
return;
|
|
80586
80802
|
} else {
|
|
80587
|
-
|
|
80588
|
-
|
|
80589
|
-
|
|
80590
|
-
|
|
80591
|
-
|
|
80592
|
-
|
|
80593
|
-
|
|
80594
|
-
|
|
80595
|
-
|
|
80596
|
-
|
|
80597
|
-
|
|
80598
|
-
|
|
80599
|
-
|
|
80600
|
-
|
|
80601
|
-
|
|
80602
|
-
|
|
80603
|
-
|
|
80604
|
-
|
|
80605
|
-
container.
|
|
80606
|
-
|
|
80607
|
-
|
|
80803
|
+
/*
|
|
80804
|
+
if(this.builder.canvas) {
|
|
80805
|
+
// Canvas Mode
|
|
80806
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
80807
|
+
if(docContainer) {
|
|
80808
|
+
|
|
80809
|
+
html = `
|
|
80810
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
|
80811
|
+
<div class="is-container leading-12 size-17">
|
|
80812
|
+
${html}
|
|
80813
|
+
</div>
|
|
80814
|
+
</div>
|
|
80815
|
+
`;
|
|
80816
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
|
80817
|
+
this.builder.addBlock(html, blockContainer);
|
|
80818
|
+
}
|
|
80819
|
+
} else {
|
|
80820
|
+
// Normal
|
|
80821
|
+
container.insertAdjacentHTML('afterBegin', html);
|
|
80822
|
+
setTimeout(()=>{
|
|
80823
|
+
container.firstElementChild.click();
|
|
80824
|
+
}, 300);
|
|
80825
|
+
this.builder.applyBehaviorOn(container);
|
|
80608
80826
|
}
|
|
80827
|
+
*/
|
|
80828
|
+
// Normal
|
|
80829
|
+
container.insertAdjacentHTML('afterBegin', html);
|
|
80830
|
+
setTimeout(() => {
|
|
80831
|
+
container.firstElementChild.click();
|
|
80832
|
+
}, 300);
|
|
80833
|
+
this.builder.applyBehaviorOn(container);
|
|
80609
80834
|
}
|
|
80610
80835
|
this.builder.settings.onChange();
|
|
80611
80836
|
this.builder.settings.onRender();
|
|
@@ -81522,7 +81747,11 @@ class Common {
|
|
|
81522
81747
|
this.matrix3d = new Matrix3D();
|
|
81523
81748
|
return this.matrix3d.transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4);
|
|
81524
81749
|
}
|
|
81750
|
+
setZoom(scale) {
|
|
81751
|
+
this.zoom = scale;
|
|
81752
|
+
}
|
|
81525
81753
|
applyPercentage(block) {
|
|
81754
|
+
const zoom = this.zoom;
|
|
81526
81755
|
const rect = this.getRect(block);
|
|
81527
81756
|
const container = block.parentNode;
|
|
81528
81757
|
let isChildBlock = false;
|
|
@@ -81533,11 +81762,11 @@ class Common {
|
|
|
81533
81762
|
|
|
81534
81763
|
// const containerRect = container.getBoundingClientRect(); // if container has top/left
|
|
81535
81764
|
const containerRect = this.getRect(container); // if container has top/left
|
|
81536
|
-
|
|
81537
|
-
|
|
81765
|
+
let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
|
|
81766
|
+
let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
|
|
81538
81767
|
let isBlockFixed = block.classList.contains('block-steady');
|
|
81539
81768
|
if (isBlockFixed) {
|
|
81540
|
-
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top);
|
|
81769
|
+
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top) * zoom;
|
|
81541
81770
|
if (isNaN(dividerTop)) {
|
|
81542
81771
|
// there is possibility of 0/0
|
|
81543
81772
|
dividerTop = 1;
|
|
@@ -81546,7 +81775,7 @@ class Common {
|
|
|
81546
81775
|
if (isChildBlock) {
|
|
81547
81776
|
block.style.top = top + '%';
|
|
81548
81777
|
}
|
|
81549
|
-
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left);
|
|
81778
|
+
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left) * zoom;
|
|
81550
81779
|
if (isNaN(dividerLeft)) {
|
|
81551
81780
|
// there is possibility of 0/0
|
|
81552
81781
|
dividerLeft = 1;
|
|
@@ -81567,16 +81796,17 @@ class Common {
|
|
|
81567
81796
|
const height = block.offsetHeight / container.offsetHeight * 100;
|
|
81568
81797
|
block.style.width = width + '%';
|
|
81569
81798
|
block.style.height = height + '%';
|
|
81570
|
-
block.style.top = top + '%';
|
|
81571
|
-
block.style.left = left + '%';
|
|
81799
|
+
block.style.top = top / zoom + '%';
|
|
81800
|
+
block.style.left = left / zoom + '%';
|
|
81572
81801
|
if (block.classList.contains('height-auto')) block.style.height = '';
|
|
81573
81802
|
}
|
|
81574
81803
|
}
|
|
81575
81804
|
applyPixels(block) {
|
|
81805
|
+
const zoom = this.zoom;
|
|
81576
81806
|
const rect = this.getRect(block);
|
|
81577
81807
|
const containerRect = this.getRect(block.parentNode); // if container has top/left
|
|
81578
|
-
block.style.left = rect.left - containerRect.left + 'px';
|
|
81579
|
-
block.style.top = rect.top - containerRect.top + 'px';
|
|
81808
|
+
block.style.left = (rect.left - containerRect.left) / zoom + 'px';
|
|
81809
|
+
block.style.top = (rect.top - containerRect.top) / zoom + 'px';
|
|
81580
81810
|
block.style.width = block.offsetWidth + 'px';
|
|
81581
81811
|
}
|
|
81582
81812
|
updateHeight(block) {
|
|
@@ -82012,6 +82242,9 @@ class Ruler {
|
|
|
82012
82242
|
this.verticalRulerCenter = this.doc.getElementById('vertical-ruler-center');
|
|
82013
82243
|
this.setup();
|
|
82014
82244
|
}
|
|
82245
|
+
setZoom(scale) {
|
|
82246
|
+
this.zoom = scale;
|
|
82247
|
+
}
|
|
82015
82248
|
setup() {
|
|
82016
82249
|
this.elements = this.doc.querySelectorAll(this.selector);
|
|
82017
82250
|
}
|
|
@@ -82041,6 +82274,8 @@ class Ruler {
|
|
|
82041
82274
|
if (transform.includes('rotate') || transform.includes('matrix3d')) return;
|
|
82042
82275
|
let parentTransform = block.parentNode.style.transform;
|
|
82043
82276
|
if (parentTransform.includes('rotate')) return;
|
|
82277
|
+
if (this.zoom * 1 !== 1) return; // disable rulers on zoomed page
|
|
82278
|
+
|
|
82044
82279
|
this.hideRulers();
|
|
82045
82280
|
const rect = block.getBoundingClientRect();
|
|
82046
82281
|
const top = rect.top;
|
|
@@ -82402,6 +82637,11 @@ class Resizable {
|
|
|
82402
82637
|
win: this.win
|
|
82403
82638
|
});
|
|
82404
82639
|
}
|
|
82640
|
+
setZoom(scale) {
|
|
82641
|
+
this.zoom = scale;
|
|
82642
|
+
this.common.setZoom(scale);
|
|
82643
|
+
this.ruler.setZoom(scale);
|
|
82644
|
+
}
|
|
82405
82645
|
setup() {
|
|
82406
82646
|
this.elements.forEach(element => {
|
|
82407
82647
|
element.querySelectorAll('.handle').forEach(elm => elm.parentNode.removeChild(elm));
|
|
@@ -82571,35 +82811,38 @@ class Resizable {
|
|
|
82571
82811
|
this.ruler.hideRulers();
|
|
82572
82812
|
}
|
|
82573
82813
|
resizeTopLeft(deltaX, deltaY) {
|
|
82574
|
-
|
|
82575
|
-
this.target.style.
|
|
82814
|
+
const zoom = this.zoom;
|
|
82815
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82816
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82576
82817
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
|
82577
82818
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
|
82578
82819
|
if (this.clonedTarget) {
|
|
82579
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
|
82580
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
|
82820
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82821
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82581
82822
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
|
82582
82823
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
|
82583
82824
|
}
|
|
82584
82825
|
}
|
|
82585
82826
|
resizeTopRight(deltaX, deltaY) {
|
|
82827
|
+
const zoom = this.zoom;
|
|
82586
82828
|
this.target.style.width = this.initialWidth + deltaX + 'px';
|
|
82587
|
-
this.target.style.top = this.initialTop + deltaY + 'px';
|
|
82829
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82588
82830
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
|
82589
82831
|
if (this.clonedTarget) {
|
|
82590
82832
|
this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
|
|
82591
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
|
82833
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82592
82834
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
|
82593
82835
|
}
|
|
82594
82836
|
}
|
|
82595
82837
|
resizeBottomLeft(deltaX, deltaY) {
|
|
82838
|
+
const zoom = this.zoom;
|
|
82596
82839
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
|
82597
82840
|
this.target.style.height = this.initialHeight + deltaY + 'px';
|
|
82598
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
|
82841
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82599
82842
|
if (this.clonedTarget) {
|
|
82600
82843
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
|
82601
82844
|
this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
|
|
82602
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
|
82845
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82603
82846
|
}
|
|
82604
82847
|
}
|
|
82605
82848
|
resizeBottomRight(deltaX, deltaY) {
|
|
@@ -82611,10 +82854,11 @@ class Resizable {
|
|
|
82611
82854
|
}
|
|
82612
82855
|
}
|
|
82613
82856
|
resizeTop(deltaY) {
|
|
82614
|
-
|
|
82857
|
+
const zoom = this.zoom;
|
|
82858
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82615
82859
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
|
82616
82860
|
if (this.clonedTarget) {
|
|
82617
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
|
82861
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
|
82618
82862
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
|
82619
82863
|
}
|
|
82620
82864
|
}
|
|
@@ -82625,11 +82869,12 @@ class Resizable {
|
|
|
82625
82869
|
}
|
|
82626
82870
|
}
|
|
82627
82871
|
resizeLeft(deltaX) {
|
|
82872
|
+
const zoom = this.zoom;
|
|
82628
82873
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
|
82629
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
|
82874
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82630
82875
|
if (this.clonedTarget) {
|
|
82631
82876
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
|
82632
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
|
82877
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
|
82633
82878
|
}
|
|
82634
82879
|
}
|
|
82635
82880
|
resizeRight(deltaX) {
|
|
@@ -82704,20 +82949,36 @@ class Resizable {
|
|
|
82704
82949
|
|
|
82705
82950
|
const largeScreenBreakpoint = 1920; //1920
|
|
82706
82951
|
|
|
82707
|
-
|
|
82708
|
-
|
|
82709
|
-
|
|
82710
|
-
|
|
82711
|
-
|
|
82712
|
-
|
|
82713
|
-
|
|
82714
|
-
|
|
82952
|
+
let isPrint = false;
|
|
82953
|
+
let elmBox = target.closest('[data-pagesize]');
|
|
82954
|
+
if (elmBox) {
|
|
82955
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
|
82956
|
+
isPrint = true;
|
|
82957
|
+
}
|
|
82958
|
+
}
|
|
82959
|
+
if (isPrint) {
|
|
82715
82960
|
target.setAttribute('data--t', target.style.top);
|
|
82716
82961
|
target.setAttribute('data--l', target.style.left);
|
|
82717
82962
|
target.setAttribute('data--b', target.style.bottom);
|
|
82718
82963
|
target.setAttribute('data--r', target.style.right);
|
|
82719
82964
|
target.setAttribute('data--w', target.style.width);
|
|
82720
82965
|
target.setAttribute('data--h', target.style.height);
|
|
82966
|
+
} else {
|
|
82967
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
|
82968
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
|
82969
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
|
82970
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
|
82971
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
|
82972
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
|
82973
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
|
82974
|
+
} else {
|
|
82975
|
+
target.setAttribute('data--t', target.style.top);
|
|
82976
|
+
target.setAttribute('data--l', target.style.left);
|
|
82977
|
+
target.setAttribute('data--b', target.style.bottom);
|
|
82978
|
+
target.setAttribute('data--r', target.style.right);
|
|
82979
|
+
target.setAttribute('data--w', target.style.width);
|
|
82980
|
+
target.setAttribute('data--h', target.style.height);
|
|
82981
|
+
}
|
|
82721
82982
|
}
|
|
82722
82983
|
target.removeAttribute('data-prev'); // reset
|
|
82723
82984
|
target.removeAttribute('data-fluid');
|
|
@@ -82760,6 +83021,11 @@ class Draggable {
|
|
|
82760
83021
|
win: this.win
|
|
82761
83022
|
});
|
|
82762
83023
|
}
|
|
83024
|
+
setZoom(scale) {
|
|
83025
|
+
this.zoom = scale;
|
|
83026
|
+
this.common.setZoom(scale);
|
|
83027
|
+
this.ruler.setZoom(scale);
|
|
83028
|
+
}
|
|
82763
83029
|
setup() {
|
|
82764
83030
|
this.elements = this.doc.querySelectorAll(this.selector);
|
|
82765
83031
|
this.elements.forEach(element => {
|
|
@@ -82900,8 +83166,9 @@ class Draggable {
|
|
|
82900
83166
|
const startY = target.getAttribute('data-starty');
|
|
82901
83167
|
const newX = x - startX;
|
|
82902
83168
|
const newY = y - startY;
|
|
82903
|
-
|
|
82904
|
-
target.style.
|
|
83169
|
+
const zoom = this.zoom;
|
|
83170
|
+
target.style.left = newX / zoom + 'px';
|
|
83171
|
+
target.style.top = newY / zoom + 'px';
|
|
82905
83172
|
}
|
|
82906
83173
|
}
|
|
82907
83174
|
handleDragEnd() {
|
|
@@ -82951,20 +83218,36 @@ class Draggable {
|
|
|
82951
83218
|
|
|
82952
83219
|
const largeScreenBreakpoint = 1920; //1920
|
|
82953
83220
|
|
|
82954
|
-
|
|
82955
|
-
|
|
82956
|
-
|
|
82957
|
-
|
|
82958
|
-
|
|
82959
|
-
|
|
82960
|
-
|
|
82961
|
-
|
|
83221
|
+
let isPrint = false;
|
|
83222
|
+
let elmBox = target.closest('[data-pagesize]');
|
|
83223
|
+
if (elmBox) {
|
|
83224
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
|
83225
|
+
isPrint = true;
|
|
83226
|
+
}
|
|
83227
|
+
}
|
|
83228
|
+
if (isPrint) {
|
|
82962
83229
|
target.setAttribute('data--t', target.style.top);
|
|
82963
83230
|
target.setAttribute('data--l', target.style.left);
|
|
82964
83231
|
target.setAttribute('data--b', target.style.bottom);
|
|
82965
83232
|
target.setAttribute('data--r', target.style.right);
|
|
82966
83233
|
target.setAttribute('data--w', target.style.width);
|
|
82967
83234
|
target.setAttribute('data--h', target.style.height);
|
|
83235
|
+
} else {
|
|
83236
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
|
83237
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
|
83238
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
|
83239
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
|
83240
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
|
83241
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
|
83242
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
|
83243
|
+
} else {
|
|
83244
|
+
target.setAttribute('data--t', target.style.top);
|
|
83245
|
+
target.setAttribute('data--l', target.style.left);
|
|
83246
|
+
target.setAttribute('data--b', target.style.bottom);
|
|
83247
|
+
target.setAttribute('data--r', target.style.right);
|
|
83248
|
+
target.setAttribute('data--w', target.style.width);
|
|
83249
|
+
target.setAttribute('data--h', target.style.height);
|
|
83250
|
+
}
|
|
82968
83251
|
}
|
|
82969
83252
|
target.removeAttribute('data-prev'); // reset
|
|
82970
83253
|
target.removeAttribute('data-fluid');
|
|
@@ -83381,7 +83664,8 @@ class EditableBlocks {
|
|
|
83381
83664
|
// onMultipleSelect: () => {},
|
|
83382
83665
|
disableOnMobile: 0,
|
|
83383
83666
|
rotate: true,
|
|
83384
|
-
clone: true
|
|
83667
|
+
clone: true,
|
|
83668
|
+
zoom: 1
|
|
83385
83669
|
// onDelete: () = {}
|
|
83386
83670
|
};
|
|
83387
83671
|
|
|
@@ -83646,6 +83930,12 @@ class EditableBlocks {
|
|
|
83646
83930
|
win: this.win,
|
|
83647
83931
|
onDuplicate: this.onDuplicate
|
|
83648
83932
|
});
|
|
83933
|
+
this.setZoom(this.zoom);
|
|
83934
|
+
}
|
|
83935
|
+
setZoom(scale) {
|
|
83936
|
+
this.common.setZoom(scale);
|
|
83937
|
+
this.draggable.setZoom(scale);
|
|
83938
|
+
this.resizable.setZoom(scale);
|
|
83649
83939
|
}
|
|
83650
83940
|
duplicate() {
|
|
83651
83941
|
this.common.duplicate();
|
|
@@ -83741,32 +84031,58 @@ class BlockModal {
|
|
|
83741
84031
|
let html = `
|
|
83742
84032
|
<div class="is-modal is-modal-content editblock" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
83743
84033
|
<div class="is-modal-bar is-draggable">
|
|
83744
|
-
|
|
84034
|
+
<span class="modal-title"></span>
|
|
83745
84035
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
|
83746
84036
|
</div>
|
|
83747
|
-
<div class="modal-none" style="
|
|
83748
|
-
|
|
84037
|
+
<div class="modal-none" style="display:none;padding-bottom:28px;">
|
|
84038
|
+
|
|
84039
|
+
<div>${util.out('Please select a block or page.')}</div>
|
|
84040
|
+
|
|
84041
|
+
</div>
|
|
84042
|
+
|
|
84043
|
+
<div class="modal-page-content" style="display:none;padding-bottom:28px;">
|
|
84044
|
+
|
|
84045
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
|
84046
|
+
<div style="display:flex;">
|
|
84047
|
+
<button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
|
|
84048
|
+
<button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
|
84049
|
+
</div>
|
|
84050
|
+
|
|
84051
|
+
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
|
84052
|
+
<div>
|
|
84053
|
+
<div class="asset-page-preview" style="display:none"></div>
|
|
84054
|
+
<div style="display: flex">
|
|
84055
|
+
<button title="${util.out('Image')}" class="btn-page-bgimage">
|
|
84056
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
|
84057
|
+
<span>${util.out('Image')}</span>
|
|
84058
|
+
</button>
|
|
84059
|
+
<button title="${util.out('Select')}" class="btn-page-asset">${this.builder.opts.selectIcon}</button>
|
|
84060
|
+
<button title="${util.out('Remove')}" class="btn-page-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
84061
|
+
<button title="${util.out('Adjust')}" class="btn-page-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
84062
|
+
</div>
|
|
84063
|
+
</div>
|
|
84064
|
+
|
|
83749
84065
|
</div>
|
|
84066
|
+
|
|
83750
84067
|
<div class="modal-content">
|
|
83751
84068
|
|
|
83752
84069
|
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
|
83753
84070
|
<div style="display:flex;">
|
|
83754
84071
|
<button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
|
|
83755
|
-
<button title="${util.out('Gradient')}" class="btn-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
|
84072
|
+
<button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
|
83756
84073
|
</div>
|
|
83757
84074
|
|
|
83758
84075
|
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
|
83759
84076
|
<div>
|
|
83760
|
-
<div class="asset-preview" style="display:none"></div>
|
|
84077
|
+
<div class="asset-block-preview" style="display:none"></div>
|
|
83761
84078
|
<div style="display: flex">
|
|
83762
|
-
<
|
|
83763
|
-
<button title="${util.out('Image')}" class="btn-bgimage">
|
|
84079
|
+
<button title="${util.out('Image')}" class="btn-block-bgimage">
|
|
83764
84080
|
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
|
83765
84081
|
<span>${util.out('Image')}</span>
|
|
83766
84082
|
</button>
|
|
83767
|
-
<button title="${util.out('Select')}" class="btn-asset">${this.builder.opts.selectIcon}</button>
|
|
83768
|
-
<button title="${util.out('Remove')}" class="btn-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
|
83769
|
-
<button title="${util.out('Adjust')}" class="btn-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
|
84083
|
+
<button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
|
|
84084
|
+
<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>
|
|
84085
|
+
<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>
|
|
83770
84086
|
</div>
|
|
83771
84087
|
</div>
|
|
83772
84088
|
|
|
@@ -83888,9 +84204,49 @@ class BlockModal {
|
|
|
83888
84204
|
this.hide();
|
|
83889
84205
|
});
|
|
83890
84206
|
|
|
83891
|
-
// Background color
|
|
84207
|
+
// Page Background color
|
|
84208
|
+
|
|
84209
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
|
84210
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
|
84211
|
+
btnPageColorPick.addEventListener('click', () => {
|
|
84212
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
|
84213
|
+
|
|
84214
|
+
let page = this.getPage();
|
|
84215
|
+
let bgcolor = btnPageColorPick.style.backgroundColor;
|
|
84216
|
+
this.builder.colorPicker.open(s => {
|
|
84217
|
+
page.style.backgroundColor = s;
|
|
84218
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
|
84219
|
+
page.style.backgroundImage = ''; // remove gradient
|
|
84220
|
+
btnPageGradient.style.backgroundImage = ''; // preview
|
|
84221
|
+
}
|
|
84222
|
+
|
|
84223
|
+
btnPageColorPick.style.backgroundColor = s; // preview
|
|
84224
|
+
|
|
84225
|
+
this.builder.onChange();
|
|
84226
|
+
}, bgcolor, () => {
|
|
84227
|
+
btnPageColorPick.removeAttribute('data-focus');
|
|
84228
|
+
btnPageColorPick.focus();
|
|
84229
|
+
});
|
|
84230
|
+
btnPageColorPick.setAttribute('data-focus', true);
|
|
84231
|
+
});
|
|
84232
|
+
btnPageGradient.addEventListener('click', () => {
|
|
84233
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
|
83892
84234
|
|
|
83893
|
-
|
|
84235
|
+
let page = this.getPage();
|
|
84236
|
+
let gradientPicker = this.builder.gradientpicker();
|
|
84237
|
+
gradientPicker.open(page, () => {
|
|
84238
|
+
page.style.backgroundColor = '';
|
|
84239
|
+
btnPageColorPick.style.backgroundColor = ''; // preview
|
|
84240
|
+
|
|
84241
|
+
this.updatePanelImage('');
|
|
84242
|
+
this.builder.onChange();
|
|
84243
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage; // preview
|
|
84244
|
+
});
|
|
84245
|
+
});
|
|
84246
|
+
|
|
84247
|
+
// Block Background color
|
|
84248
|
+
|
|
84249
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
|
83894
84250
|
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
|
83895
84251
|
btnColorPick.addEventListener('click', () => {
|
|
83896
84252
|
this.builder.uo.saveForUndo(true); // checkLater = true
|
|
@@ -83928,10 +84284,63 @@ class BlockModal {
|
|
|
83928
84284
|
});
|
|
83929
84285
|
});
|
|
83930
84286
|
|
|
83931
|
-
// Background Image
|
|
84287
|
+
// Page Background Image
|
|
84288
|
+
|
|
84289
|
+
this.pageImagePreview = modal.querySelector('.asset-page-preview');
|
|
84290
|
+
const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
|
|
84291
|
+
if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
|
|
84292
|
+
// Background image
|
|
84293
|
+
const page = this.getPage();
|
|
84294
|
+
let src = '';
|
|
84295
|
+
if (page) if (page.style.backgroundImage) {
|
|
84296
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
|
84297
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
84298
|
+
}
|
|
84299
|
+
}
|
|
84300
|
+
this.openImagePicker(src, url => {
|
|
84301
|
+
const page = this.getPage();
|
|
84302
|
+
this.builder.uo.saveForUndo();
|
|
84303
|
+
page.style.backgroundImage = `url("${url}")`;
|
|
84304
|
+
page.style.backgroundSize = 'cover';
|
|
84305
|
+
page.style.backgroundRepeat = 'no-repeat';
|
|
84306
|
+
const div = this.pageImagePreview;
|
|
84307
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
|
84308
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
|
84309
|
+
btnPageAdjust.style.display = 'none';
|
|
84310
|
+
btnPageClear.style.display = 'none';
|
|
84311
|
+
if (url !== '') {
|
|
84312
|
+
div.innerHTML = `<img src="${url}">`;
|
|
84313
|
+
btnPageAdjust.style.display = 'flex';
|
|
84314
|
+
btnPageClear.style.display = 'flex';
|
|
84315
|
+
} else {
|
|
84316
|
+
div.innerHTML = '';
|
|
84317
|
+
}
|
|
84318
|
+
this.builder.onChange();
|
|
84319
|
+
}, btnPageBgImage);
|
|
84320
|
+
});
|
|
84321
|
+
const btnPageOpenAsset = modal.querySelector('.btn-page-asset');
|
|
84322
|
+
btnPageOpenAsset.addEventListener('click', () => {
|
|
84323
|
+
this.builder.openAssetSelect('image', src => {
|
|
84324
|
+
this.updatePageImage(src);
|
|
84325
|
+
}, btnPageOpenAsset);
|
|
84326
|
+
});
|
|
84327
|
+
|
|
84328
|
+
// Show/hide button
|
|
84329
|
+
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnPageOpenAsset.style.display = 'none';
|
|
84330
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
|
84331
|
+
btnPageClear.addEventListener('click', () => {
|
|
84332
|
+
this.updatePageImage('');
|
|
84333
|
+
});
|
|
84334
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
|
84335
|
+
btnPageAdjust.addEventListener('click', () => {
|
|
84336
|
+
let page = this.getPage();
|
|
84337
|
+
this.builder.colTool.openImageAdjust(page, btnPageAdjust);
|
|
84338
|
+
});
|
|
84339
|
+
|
|
84340
|
+
// Block Background Image
|
|
83932
84341
|
|
|
83933
|
-
this.imagePreview = modal.querySelector('.asset-preview');
|
|
83934
|
-
const btnBgImage = modal.querySelector('.btn-bgimage');
|
|
84342
|
+
this.imagePreview = modal.querySelector('.asset-block-preview');
|
|
84343
|
+
const btnBgImage = modal.querySelector('.btn-block-bgimage');
|
|
83935
84344
|
if (btnBgImage) dom.addEventListener(btnBgImage, 'click', () => {
|
|
83936
84345
|
// Background image
|
|
83937
84346
|
const blockOverlay = this.blockOverlay();
|
|
@@ -83948,8 +84357,8 @@ class BlockModal {
|
|
|
83948
84357
|
blockOverlay.style.backgroundSize = 'cover';
|
|
83949
84358
|
blockOverlay.style.backgroundRepeat = 'no-repeat';
|
|
83950
84359
|
const div = this.imagePreview;
|
|
83951
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
|
83952
|
-
const btnClear = modal.querySelector('.btn-clear');
|
|
84360
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
|
84361
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
|
83953
84362
|
btnAdjust.style.display = 'none';
|
|
83954
84363
|
btnClear.style.display = 'none';
|
|
83955
84364
|
if (url !== '') {
|
|
@@ -83962,7 +84371,7 @@ class BlockModal {
|
|
|
83962
84371
|
this.builder.onChange();
|
|
83963
84372
|
}, btnBgImage);
|
|
83964
84373
|
});
|
|
83965
|
-
const btnOpenAsset = modal.querySelector('.btn-asset');
|
|
84374
|
+
const btnOpenAsset = modal.querySelector('.btn-block-asset');
|
|
83966
84375
|
btnOpenAsset.addEventListener('click', () => {
|
|
83967
84376
|
this.builder.openAssetSelect('image', src => {
|
|
83968
84377
|
this.updateImage(src);
|
|
@@ -83971,11 +84380,11 @@ class BlockModal {
|
|
|
83971
84380
|
|
|
83972
84381
|
// Show/hide button
|
|
83973
84382
|
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none';
|
|
83974
|
-
const btnClear = modal.querySelector('.btn-clear');
|
|
84383
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
|
83975
84384
|
btnClear.addEventListener('click', () => {
|
|
83976
84385
|
this.updateImage('');
|
|
83977
84386
|
});
|
|
83978
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
|
84387
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
|
83979
84388
|
btnAdjust.addEventListener('click', () => {
|
|
83980
84389
|
let blockOverlay = this.blockOverlay();
|
|
83981
84390
|
this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
|
|
@@ -84178,6 +84587,7 @@ class BlockModal {
|
|
|
84178
84587
|
target.classList.add('locked');
|
|
84179
84588
|
this.builder.eb.draggable.disableDrag(target);
|
|
84180
84589
|
this.lock(target);
|
|
84590
|
+
this.realtime();
|
|
84181
84591
|
});
|
|
84182
84592
|
} else {
|
|
84183
84593
|
elms.forEach(target => {
|
|
@@ -84206,6 +84616,12 @@ class BlockModal {
|
|
|
84206
84616
|
}
|
|
84207
84617
|
});
|
|
84208
84618
|
}
|
|
84619
|
+
} // constructor
|
|
84620
|
+
|
|
84621
|
+
getPage() {
|
|
84622
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
84623
|
+
const page = docContainer.querySelector('.box-select');
|
|
84624
|
+
return page;
|
|
84209
84625
|
}
|
|
84210
84626
|
lock() {
|
|
84211
84627
|
// target
|
|
@@ -84247,66 +84663,82 @@ class BlockModal {
|
|
|
84247
84663
|
}
|
|
84248
84664
|
realtime() {
|
|
84249
84665
|
const modal = this.modal;
|
|
84666
|
+
const page = this.getPage();
|
|
84667
|
+
const block = this.blockSelected();
|
|
84668
|
+
if (block) {
|
|
84669
|
+
const btnClearBreakpoints = modal.querySelector('.btn-clear-breakpoint');
|
|
84670
|
+
let hasBreakpoints = false;
|
|
84671
|
+
var attributes = block.attributes;
|
|
84672
|
+
for (var i = 0; i < attributes.length; i++) {
|
|
84673
|
+
let item = attributes[i].name;
|
|
84674
|
+
if (item.includes('data--t-') || item.includes('data--b-' )) {
|
|
84675
|
+
// has breakpoints
|
|
84676
|
+
hasBreakpoints = true;
|
|
84677
|
+
}
|
|
84678
|
+
}
|
|
84679
|
+
if (hasBreakpoints) {
|
|
84680
|
+
btnClearBreakpoints.style.display = '';
|
|
84681
|
+
} else {
|
|
84682
|
+
btnClearBreakpoints.style.display = 'none';
|
|
84683
|
+
}
|
|
84250
84684
|
|
|
84251
|
-
|
|
84252
|
-
|
|
84253
|
-
|
|
84254
|
-
|
|
84255
|
-
|
|
84256
|
-
|
|
84685
|
+
// Background image
|
|
84686
|
+
const blockOverlay = this.blockOverlay();
|
|
84687
|
+
let src = '';
|
|
84688
|
+
if (blockOverlay) if (blockOverlay.style.backgroundImage) {
|
|
84689
|
+
if (blockOverlay.style.backgroundImage.indexOf('url(') !== -1) {
|
|
84690
|
+
src = blockOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
84691
|
+
}
|
|
84257
84692
|
}
|
|
84258
|
-
}
|
|
84259
84693
|
|
|
84260
|
-
|
|
84261
|
-
|
|
84694
|
+
// Update preview
|
|
84695
|
+
this.updatePanelImage(src);
|
|
84262
84696
|
|
|
84263
|
-
|
|
84264
|
-
|
|
84265
|
-
|
|
84266
|
-
|
|
84267
|
-
|
|
84268
|
-
|
|
84269
|
-
|
|
84270
|
-
|
|
84271
|
-
|
|
84697
|
+
// Show/hide grayscale
|
|
84698
|
+
const divGrayscale = modal.querySelector('.label.grayscale');
|
|
84699
|
+
if (src === '') {
|
|
84700
|
+
this.imagePreview.style.display = 'none';
|
|
84701
|
+
divGrayscale.style.display = 'none';
|
|
84702
|
+
} else {
|
|
84703
|
+
this.imagePreview.style.display = '';
|
|
84704
|
+
divGrayscale.style.display = '';
|
|
84705
|
+
}
|
|
84272
84706
|
|
|
84273
|
-
|
|
84274
|
-
|
|
84275
|
-
|
|
84276
|
-
|
|
84277
|
-
|
|
84278
|
-
|
|
84279
|
-
|
|
84707
|
+
// Grayscale
|
|
84708
|
+
const chkGrayscale = modal.querySelector('.chk-grayscale');
|
|
84709
|
+
chkGrayscale.checked = false;
|
|
84710
|
+
if (blockOverlay) {
|
|
84711
|
+
if (blockOverlay.style.filter) {
|
|
84712
|
+
if (blockOverlay.style.filter.indexOf('grayscale') !== -1) {
|
|
84713
|
+
chkGrayscale.checked = true;
|
|
84714
|
+
}
|
|
84280
84715
|
}
|
|
84281
84716
|
}
|
|
84282
|
-
}
|
|
84283
84717
|
|
|
84284
|
-
|
|
84285
|
-
|
|
84286
|
-
|
|
84287
|
-
|
|
84288
|
-
|
|
84289
|
-
|
|
84290
|
-
|
|
84291
|
-
|
|
84718
|
+
// Background color
|
|
84719
|
+
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
|
84720
|
+
if (blockOverlay) {
|
|
84721
|
+
let bgcolor = blockOverlay.style.backgroundColor;
|
|
84722
|
+
btnColorPick.style.backgroundColor = bgcolor; //preview
|
|
84723
|
+
} else {
|
|
84724
|
+
btnColorPick.style.backgroundColor = ''; //preview
|
|
84725
|
+
}
|
|
84292
84726
|
|
|
84293
|
-
|
|
84294
|
-
|
|
84295
|
-
|
|
84296
|
-
|
|
84297
|
-
|
|
84727
|
+
// Gradient
|
|
84728
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
|
84729
|
+
if (blockOverlay) {
|
|
84730
|
+
if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
|
|
84731
|
+
btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage;
|
|
84732
|
+
} else {
|
|
84733
|
+
btnGradient.style.backgroundImage = '';
|
|
84734
|
+
}
|
|
84298
84735
|
} else {
|
|
84299
84736
|
btnGradient.style.backgroundImage = '';
|
|
84300
84737
|
}
|
|
84301
|
-
|
|
84302
|
-
|
|
84303
|
-
|
|
84304
|
-
|
|
84305
|
-
btnClearText.style.display = 'none';
|
|
84306
|
-
const divContentColor = modal.querySelector('.div-content-textcolor');
|
|
84307
|
-
divContentColor.style.display = 'none';
|
|
84308
|
-
const block = this.blockSelected();
|
|
84309
|
-
if (block) {
|
|
84738
|
+
const btnClearText = modal.querySelector('.btn-clear-text');
|
|
84739
|
+
btnClearText.style.display = 'none';
|
|
84740
|
+
const divContentColor = modal.querySelector('.div-content-textcolor');
|
|
84741
|
+
divContentColor.style.display = 'none';
|
|
84310
84742
|
if (block.querySelector('.is-container')) {
|
|
84311
84743
|
btnClearText.style.display = '';
|
|
84312
84744
|
divContentColor.style.display = '';
|
|
@@ -84424,6 +84856,45 @@ class BlockModal {
|
|
|
84424
84856
|
inpHeight.value = '';
|
|
84425
84857
|
inpHeightUnit.value = '%';
|
|
84426
84858
|
}
|
|
84859
|
+
} else if (page) {
|
|
84860
|
+
// Background image
|
|
84861
|
+
let src = '';
|
|
84862
|
+
if (page) if (page.style.backgroundImage) {
|
|
84863
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
|
84864
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
|
84865
|
+
}
|
|
84866
|
+
}
|
|
84867
|
+
|
|
84868
|
+
// Update preview
|
|
84869
|
+
this.updatePanelPageImage(src);
|
|
84870
|
+
|
|
84871
|
+
// Show/hide
|
|
84872
|
+
if (src === '') {
|
|
84873
|
+
this.pageImagePreview.style.display = 'none';
|
|
84874
|
+
} else {
|
|
84875
|
+
this.pageImagePreview.style.display = '';
|
|
84876
|
+
}
|
|
84877
|
+
|
|
84878
|
+
// Background color
|
|
84879
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
|
84880
|
+
if (page) {
|
|
84881
|
+
let bgcolor = page.style.backgroundColor;
|
|
84882
|
+
btnPageColorPick.style.backgroundColor = bgcolor; //preview
|
|
84883
|
+
} else {
|
|
84884
|
+
btnPageColorPick.style.backgroundColor = ''; //preview
|
|
84885
|
+
}
|
|
84886
|
+
|
|
84887
|
+
// Gradient
|
|
84888
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
|
84889
|
+
if (page) {
|
|
84890
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
|
84891
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage;
|
|
84892
|
+
} else {
|
|
84893
|
+
btnPageGradient.style.backgroundImage = '';
|
|
84894
|
+
}
|
|
84895
|
+
} else {
|
|
84896
|
+
btnPageGradient.style.backgroundImage = '';
|
|
84897
|
+
}
|
|
84427
84898
|
}
|
|
84428
84899
|
}
|
|
84429
84900
|
openImagePicker(currentUrl, callback, btn) {
|
|
@@ -84445,6 +84916,43 @@ class BlockModal {
|
|
|
84445
84916
|
}, false, this.builder.assetPanelFullScreen);
|
|
84446
84917
|
if (btn) btn.setAttribute('data-focus', true);
|
|
84447
84918
|
}
|
|
84919
|
+
updatePageImage(src) {
|
|
84920
|
+
this.builder.uo.saveForUndo();
|
|
84921
|
+
let page = this.getPage();
|
|
84922
|
+
page.style.backgroundImage = 'url(\'' + src + '\')';
|
|
84923
|
+
|
|
84924
|
+
// Reset position & filter (grayscale)
|
|
84925
|
+
page.style.filter = '';
|
|
84926
|
+
page.style.backgroundSize = '';
|
|
84927
|
+
page.style.backgroundPosition = '50% 60%';
|
|
84928
|
+
page.removeAttribute('data-bg-xs');
|
|
84929
|
+
page.removeAttribute('data-bg-sm');
|
|
84930
|
+
page.removeAttribute('data-bg-md');
|
|
84931
|
+
page.removeAttribute('data-bg-lg');
|
|
84932
|
+
this.updatePanelPageImage(src);
|
|
84933
|
+
this.builder.onChange();
|
|
84934
|
+
}
|
|
84935
|
+
updatePanelPageImage(src) {
|
|
84936
|
+
const modal = this.modal;
|
|
84937
|
+
let previewHtml;
|
|
84938
|
+
if (!src) previewHtml = '';else previewHtml = `
|
|
84939
|
+
<img src="${src}">
|
|
84940
|
+
`;
|
|
84941
|
+
this.pageImagePreview.innerHTML = previewHtml;
|
|
84942
|
+
|
|
84943
|
+
// Show/hide image-related controls
|
|
84944
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
|
84945
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
|
84946
|
+
if (src === '') {
|
|
84947
|
+
btnPageClear.style.display = 'none';
|
|
84948
|
+
btnPageAdjust.style.display = 'none';
|
|
84949
|
+
} else {
|
|
84950
|
+
btnPageClear.style.display = '';
|
|
84951
|
+
btnPageAdjust.style.display = '';
|
|
84952
|
+
}
|
|
84953
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
|
84954
|
+
btnPageGradient.style.backgroundImage = '';
|
|
84955
|
+
}
|
|
84448
84956
|
updateImage(src) {
|
|
84449
84957
|
this.builder.uo.saveForUndo();
|
|
84450
84958
|
let blockOverlay = this.blockOverlay();
|
|
@@ -84470,8 +84978,8 @@ class BlockModal {
|
|
|
84470
84978
|
this.imagePreview.innerHTML = previewHtml;
|
|
84471
84979
|
|
|
84472
84980
|
// Show/hide image-related controls
|
|
84473
|
-
const btnClear = modal.querySelector('.btn-clear');
|
|
84474
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
|
84981
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
|
84982
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
|
84475
84983
|
if (src === '') {
|
|
84476
84984
|
btnClear.style.display = 'none';
|
|
84477
84985
|
btnAdjust.style.display = 'none';
|
|
@@ -84479,7 +84987,7 @@ class BlockModal {
|
|
|
84479
84987
|
btnClear.style.display = '';
|
|
84480
84988
|
btnAdjust.style.display = '';
|
|
84481
84989
|
}
|
|
84482
|
-
const btnGradient = modal.querySelector('.btn-gradient');
|
|
84990
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
|
84483
84991
|
btnGradient.style.backgroundImage = '';
|
|
84484
84992
|
}
|
|
84485
84993
|
show() {
|
|
@@ -84499,22 +85007,48 @@ class BlockModal {
|
|
|
84499
85007
|
}
|
|
84500
85008
|
this.util.showModal(modal);
|
|
84501
85009
|
this.realtime();
|
|
84502
|
-
this.handleBlockClick =
|
|
84503
|
-
|
|
84504
|
-
|
|
84505
|
-
|
|
84506
|
-
|
|
85010
|
+
this.handleBlockClick = () => {
|
|
85011
|
+
this.showHideControls();
|
|
85012
|
+
};
|
|
85013
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
85014
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
|
85015
|
+
if (this.builder.iframe) {
|
|
85016
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
|
85017
|
+
}
|
|
85018
|
+
this.showHideControls();
|
|
85019
|
+
}
|
|
85020
|
+
showHideControls() {
|
|
85021
|
+
const modal = this.modal;
|
|
85022
|
+
const content1 = modal.querySelector('.modal-none');
|
|
85023
|
+
const content2 = modal.querySelector('.modal-content');
|
|
85024
|
+
const content3 = modal.querySelector('.modal-page-content');
|
|
85025
|
+
const activeBlock = this.builder.doc.querySelector('.is-block.active');
|
|
85026
|
+
const page = this.getPage();
|
|
85027
|
+
const modalTitle = modal.querySelector('.modal-title');
|
|
85028
|
+
if (activeBlock) {
|
|
85029
|
+
if (!activeBlock.closest('.multi')) {
|
|
84507
85030
|
content1.style.display = 'none';
|
|
84508
85031
|
content2.style.display = '';
|
|
84509
|
-
|
|
85032
|
+
content3.style.display = 'none';
|
|
85033
|
+
modalTitle.innerHTML = this.util.out('Block');
|
|
85034
|
+
this.realtime();
|
|
84510
85035
|
} else {
|
|
84511
|
-
content1.style.display = '';
|
|
85036
|
+
content1.style.display = 'none';
|
|
84512
85037
|
content2.style.display = 'none';
|
|
85038
|
+
content3.style.display = '';
|
|
85039
|
+
modalTitle.innerHTML = this.util.out('Page');
|
|
85040
|
+
this.realtime();
|
|
84513
85041
|
}
|
|
84514
|
-
}
|
|
84515
|
-
|
|
84516
|
-
|
|
84517
|
-
|
|
85042
|
+
} else if (page) {
|
|
85043
|
+
content1.style.display = 'none';
|
|
85044
|
+
content2.style.display = 'none';
|
|
85045
|
+
content3.style.display = '';
|
|
85046
|
+
modalTitle.innerHTML = this.util.out('Page');
|
|
85047
|
+
this.realtime();
|
|
85048
|
+
} else {
|
|
85049
|
+
content1.style.display = '';
|
|
85050
|
+
content2.style.display = 'none';
|
|
85051
|
+
content3.style.display = 'none';
|
|
84518
85052
|
}
|
|
84519
85053
|
}
|
|
84520
85054
|
hide() {
|
|
@@ -84527,11 +85061,380 @@ class BlockModal {
|
|
|
84527
85061
|
}
|
|
84528
85062
|
}
|
|
84529
85063
|
|
|
85064
|
+
class PageSize {
|
|
85065
|
+
constructor(builder) {
|
|
85066
|
+
this.builder = builder;
|
|
85067
|
+
const util = this.builder.util;
|
|
85068
|
+
this.util = util;
|
|
85069
|
+
const builderStuff = this.builder.builderStuff;
|
|
85070
|
+
this.builderStuff = builderStuff;
|
|
85071
|
+
const dom = this.builder.dom;
|
|
85072
|
+
this.dom = dom;
|
|
85073
|
+
}
|
|
85074
|
+
open() {
|
|
85075
|
+
const builderStuff = this.builderStuff;
|
|
85076
|
+
const util = this.util;
|
|
85077
|
+
const dom = this.dom;
|
|
85078
|
+
let modal = builderStuff.querySelector('.is-modal.pagesize');
|
|
85079
|
+
if (!modal) {
|
|
85080
|
+
const html = `
|
|
85081
|
+
<div class="is-modal pagesize" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
85082
|
+
<div class="is-modal-content">
|
|
85083
|
+
|
|
85084
|
+
<div class="div-page-sizes">
|
|
85085
|
+
<button title="Web" data-pagesize="100%,100vh,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (full)</button>
|
|
85086
|
+
<button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
|
|
85087
|
+
<button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
|
|
85088
|
+
<button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
|
|
85089
|
+
<button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
|
|
85090
|
+
<button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
|
|
85091
|
+
<button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
|
|
85092
|
+
<button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
|
|
85093
|
+
<button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
|
|
85094
|
+
<button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
|
|
85095
|
+
<button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
|
|
85096
|
+
<button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
|
|
85097
|
+
<button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
|
|
85098
|
+
<button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
|
|
85099
|
+
<button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
|
|
85100
|
+
<button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
|
|
85101
|
+
<button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
|
|
85102
|
+
<button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
|
|
85103
|
+
</div>
|
|
85104
|
+
|
|
85105
|
+
<div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
|
|
85106
|
+
<div>
|
|
85107
|
+
<label for="inpPageWidth" style="display:block">${util.out('Width')}:</label>
|
|
85108
|
+
<input id="inpPageWidth" class="input-width" type="text">
|
|
85109
|
+
</div>
|
|
85110
|
+
<div>
|
|
85111
|
+
<label for="inpPageWidth" style="display:block">${util.out('Height')}:</label>
|
|
85112
|
+
<input id="inpPageHeight" class="input-height" type="text">
|
|
85113
|
+
</div>
|
|
85114
|
+
</div>
|
|
85115
|
+
|
|
85116
|
+
<div style="text-align:right;margin-top:20px;display:none">
|
|
85117
|
+
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
|
85118
|
+
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
|
85119
|
+
</div>
|
|
85120
|
+
|
|
85121
|
+
</div>
|
|
85122
|
+
</div>
|
|
85123
|
+
<div class="is-modal viewprint" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
85124
|
+
<div class="is-modal-content" style="width:100%;height:100vh;padding:0;">
|
|
85125
|
+
<iframe tabindex="0" style="width:100vw;height:100vh;border: none;display: block;" src="about:blank"></iframe>
|
|
85126
|
+
</div>
|
|
85127
|
+
</div>
|
|
85128
|
+
`;
|
|
85129
|
+
dom.appendHtml(builderStuff, html);
|
|
85130
|
+
modal = builderStuff.querySelector('.pagesize');
|
|
85131
|
+
this.modal = modal;
|
|
85132
|
+
const inpWidth = modal.querySelector('.input-width');
|
|
85133
|
+
const inpHeight = modal.querySelector('.input-height');
|
|
85134
|
+
const current = localStorage.getItem('_pagesize');
|
|
85135
|
+
if (current) {
|
|
85136
|
+
const arrCurrent = current.split(',');
|
|
85137
|
+
inpWidth.value = arrCurrent[0].trim();
|
|
85138
|
+
inpHeight.value = arrCurrent[1].trim();
|
|
85139
|
+
}
|
|
85140
|
+
const btnPageSize = modal.querySelectorAll('[data-pagesize]');
|
|
85141
|
+
btnPageSize.forEach(btn => {
|
|
85142
|
+
btn.addEventListener('click', () => {
|
|
85143
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
|
85144
|
+
if (elmCss) elmCss.remove();
|
|
85145
|
+
const s = btn.getAttribute('data-pagesize');
|
|
85146
|
+
this.setPageSize(s);
|
|
85147
|
+
inpWidth.value = '';
|
|
85148
|
+
inpHeight.value = '';
|
|
85149
|
+
const arr = s.split(',');
|
|
85150
|
+
inpWidth.value = arr[0].trim();
|
|
85151
|
+
inpHeight.value = arr[1].trim();
|
|
85152
|
+
});
|
|
85153
|
+
});
|
|
85154
|
+
let timer;
|
|
85155
|
+
inpWidth.addEventListener('input', () => {
|
|
85156
|
+
clearTimeout(timer);
|
|
85157
|
+
timer = setTimeout(() => {
|
|
85158
|
+
const current = localStorage.getItem('_pagesize');
|
|
85159
|
+
let isWeb = false;
|
|
85160
|
+
const arrCurrent = current.split(',');
|
|
85161
|
+
if (arrCurrent.length === 3) isWeb = true;
|
|
85162
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
|
85163
|
+
this.setPageSize(s);
|
|
85164
|
+
}, 600);
|
|
85165
|
+
});
|
|
85166
|
+
inpHeight.addEventListener('input', () => {
|
|
85167
|
+
clearTimeout(timer);
|
|
85168
|
+
timer = setTimeout(() => {
|
|
85169
|
+
const current = localStorage.getItem('_pagesize');
|
|
85170
|
+
let isWeb = false;
|
|
85171
|
+
const arrCurrent = current.split(',');
|
|
85172
|
+
if (arrCurrent.length === 3) isWeb = true;
|
|
85173
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
|
85174
|
+
this.setPageSize(s);
|
|
85175
|
+
}, 600);
|
|
85176
|
+
});
|
|
85177
|
+
const btnImageOk = modal.querySelector('.input-ok');
|
|
85178
|
+
dom.addEventListener(btnImageOk, 'click', () => {
|
|
85179
|
+
// const inpSrc = modal.querySelector('.input-src');
|
|
85180
|
+
// const url = inpSrc.value;
|
|
85181
|
+
|
|
85182
|
+
this.builder.hideModal(modal);
|
|
85183
|
+
});
|
|
85184
|
+
const btnImageCancel = modal.querySelector('.input-cancel');
|
|
85185
|
+
dom.addEventListener(btnImageCancel, 'click', () => {
|
|
85186
|
+
this.builder.hideModal(modal);
|
|
85187
|
+
});
|
|
85188
|
+
}
|
|
85189
|
+
this.util.showModal(modal, false);
|
|
85190
|
+
}
|
|
85191
|
+
setPageSize(s) {
|
|
85192
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
|
85193
|
+
localStorage.setItem('_pagesize', s);
|
|
85194
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
85195
|
+
const elms = docContainer.querySelectorAll('.is-box');
|
|
85196
|
+
elms.forEach(elm => {
|
|
85197
|
+
elm.setAttribute('data-pagesize', s);
|
|
85198
|
+
});
|
|
85199
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
|
85200
|
+
if (elmCss) elmCss.remove();
|
|
85201
|
+
let css = this.getPageCss();
|
|
85202
|
+
document.head.insertAdjacentHTML('beforeend', css);
|
|
85203
|
+
|
|
85204
|
+
// for the tools position
|
|
85205
|
+
const arr = s.split(',');
|
|
85206
|
+
// let w = arr[0].trim();
|
|
85207
|
+
// let h = arr[1].trim();
|
|
85208
|
+
if (arr.length === 3) {
|
|
85209
|
+
// web
|
|
85210
|
+
const docWidth = docContainer.offsetWidth;
|
|
85211
|
+
const viewportWidth = this.builder.win.innerWidth;
|
|
85212
|
+
if (docWidth < viewportWidth - 50) {
|
|
85213
|
+
// web (container)
|
|
85214
|
+
docContainer.classList.remove('page-web');
|
|
85215
|
+
docContainer.classList.add('page-web-container');
|
|
85216
|
+
} else {
|
|
85217
|
+
// web (full)
|
|
85218
|
+
docContainer.classList.remove('page-web-container');
|
|
85219
|
+
docContainer.classList.add('page-web');
|
|
85220
|
+
}
|
|
85221
|
+
} else {
|
|
85222
|
+
// print
|
|
85223
|
+
docContainer.classList.remove('page-web');
|
|
85224
|
+
docContainer.classList.remove('page-web-container');
|
|
85225
|
+
}
|
|
85226
|
+
} else {
|
|
85227
|
+
alert('This function works in Canvas mode only.');
|
|
85228
|
+
}
|
|
85229
|
+
}
|
|
85230
|
+
print() {
|
|
85231
|
+
const builderStuff = this.builderStuff;
|
|
85232
|
+
const dom = this.dom;
|
|
85233
|
+
let modalIframe = builderStuff.querySelector('.viewprint');
|
|
85234
|
+
if (!modalIframe) {
|
|
85235
|
+
let html = `
|
|
85236
|
+
<div class="viewprint" style="display:none">
|
|
85237
|
+
<iframe tabindex="0" style="width:2000px;height:2000px;border: none;display: block;" src="about:blank"></iframe>
|
|
85238
|
+
</div>`;
|
|
85239
|
+
dom.appendHtml(builderStuff, html);
|
|
85240
|
+
modalIframe = builderStuff.querySelector('.viewprint');
|
|
85241
|
+
}
|
|
85242
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
|
85243
|
+
const ifr = modalIframe.querySelector('iframe');
|
|
85244
|
+
ifr.srcdoc = this.getPrintHtml();
|
|
85245
|
+
} else {
|
|
85246
|
+
alert('This function works in Canvas mode only.');
|
|
85247
|
+
}
|
|
85248
|
+
}
|
|
85249
|
+
getPrintHtml() {
|
|
85250
|
+
let css = this.getPrintCss();
|
|
85251
|
+
let html = this.builder.html();
|
|
85252
|
+
return `
|
|
85253
|
+
<!DOCTYPE HTML>
|
|
85254
|
+
<html>
|
|
85255
|
+
<head>
|
|
85256
|
+
<meta charset="utf-8">
|
|
85257
|
+
<title></title>
|
|
85258
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
85259
|
+
<meta name="description" content="">
|
|
85260
|
+
|
|
85261
|
+
<link href="${this.builder.snippetPath}print.css" rel="stylesheet">
|
|
85262
|
+
|
|
85263
|
+
<style>
|
|
85264
|
+
|
|
85265
|
+
/* block.css */
|
|
85266
|
+
/* box-canvas */
|
|
85267
|
+
.is-box {
|
|
85268
|
+
position: relative;
|
|
85269
|
+
flex:none;
|
|
85270
|
+
}
|
|
85271
|
+
.is-block {
|
|
85272
|
+
position: absolute;
|
|
85273
|
+
box-sizing: border-box;
|
|
85274
|
+
padding: 0;
|
|
85275
|
+
}
|
|
85276
|
+
.is-block .is-container {
|
|
85277
|
+
max-width: unset !important;
|
|
85278
|
+
width: 100%;
|
|
85279
|
+
padding: 0;
|
|
85280
|
+
box-sizing: border-box;
|
|
85281
|
+
position: relative;
|
|
85282
|
+
z-index: 1;
|
|
85283
|
+
}
|
|
85284
|
+
.is-box.autolayout .is-block.block-steady.fluid {
|
|
85285
|
+
padding: 0;
|
|
85286
|
+
width: 100% !important;
|
|
85287
|
+
min-width: unset !important;
|
|
85288
|
+
left: auto !important
|
|
85289
|
+
}
|
|
85290
|
+
.is-block-overlay { background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; }
|
|
85291
|
+
|
|
85292
|
+
|
|
85293
|
+
body {
|
|
85294
|
+
background: #eee;
|
|
85295
|
+
}
|
|
85296
|
+
.is-page {
|
|
85297
|
+
position: relative;
|
|
85298
|
+
transform-origin: top;
|
|
85299
|
+
}
|
|
85300
|
+
.is-box {
|
|
85301
|
+
position: relative;
|
|
85302
|
+
flex:none;
|
|
85303
|
+
background: #fff;
|
|
85304
|
+
overflow: hidden;
|
|
85305
|
+
box-shadow: none;
|
|
85306
|
+
}
|
|
85307
|
+
${css}
|
|
85308
|
+
</style>
|
|
85309
|
+
</head>
|
|
85310
|
+
<body class="print">
|
|
85311
|
+
|
|
85312
|
+
<div class="is-page">${html}</div>
|
|
85313
|
+
|
|
85314
|
+
<script>
|
|
85315
|
+
window.print();
|
|
85316
|
+
</script>
|
|
85317
|
+
</body>
|
|
85318
|
+
</html>
|
|
85319
|
+
`;
|
|
85320
|
+
}
|
|
85321
|
+
getPageCss() {
|
|
85322
|
+
let s;
|
|
85323
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
|
85324
|
+
s = localStorage.getItem('_pagesize');
|
|
85325
|
+
} else {
|
|
85326
|
+
s = this.pageSize || '';
|
|
85327
|
+
}
|
|
85328
|
+
let w, h;
|
|
85329
|
+
let css;
|
|
85330
|
+
if (s) {
|
|
85331
|
+
const arr = s.split(',');
|
|
85332
|
+
w = arr[0].trim();
|
|
85333
|
+
h = arr[1].trim();
|
|
85334
|
+
if (arr.length === 3) {
|
|
85335
|
+
// web
|
|
85336
|
+
css = `
|
|
85337
|
+
<style id="__css_pagesize">
|
|
85338
|
+
.is-page {
|
|
85339
|
+
${(w === '100%' || w === '100vw') && (h === '100%' || h === '100vh') ? '' : 'margin-top: 150px;'}
|
|
85340
|
+
}
|
|
85341
|
+
.is-box {
|
|
85342
|
+
width: 100%;
|
|
85343
|
+
max-width: ${w};
|
|
85344
|
+
height: ${h};
|
|
85345
|
+
margin: 0 auto;
|
|
85346
|
+
}
|
|
85347
|
+
</style>
|
|
85348
|
+
`;
|
|
85349
|
+
} else {
|
|
85350
|
+
// print
|
|
85351
|
+
css = `
|
|
85352
|
+
<style id="__css_pagesize">
|
|
85353
|
+
.is-page {
|
|
85354
|
+
margin-top:150px;
|
|
85355
|
+
gap: 45px;
|
|
85356
|
+
}
|
|
85357
|
+
.is-box {
|
|
85358
|
+
width: ${w};
|
|
85359
|
+
height: ${h};
|
|
85360
|
+
}
|
|
85361
|
+
</style>
|
|
85362
|
+
`;
|
|
85363
|
+
}
|
|
85364
|
+
}
|
|
85365
|
+
return css;
|
|
85366
|
+
}
|
|
85367
|
+
getPrintCss() {
|
|
85368
|
+
let s;
|
|
85369
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
|
85370
|
+
s = localStorage.getItem('_pagesize');
|
|
85371
|
+
} else {
|
|
85372
|
+
s = this.pageSize || '';
|
|
85373
|
+
}
|
|
85374
|
+
let w, h;
|
|
85375
|
+
let css;
|
|
85376
|
+
if (s) {
|
|
85377
|
+
const arr = s.split(',');
|
|
85378
|
+
w = arr[0].trim();
|
|
85379
|
+
h = arr[1].trim();
|
|
85380
|
+
if (arr.length === 3) {
|
|
85381
|
+
// web
|
|
85382
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
|
85383
|
+
const box = docContainer.querySelector('.is-box');
|
|
85384
|
+
if (!box) return '';
|
|
85385
|
+
const docWidth = box.offsetWidth + 'px';
|
|
85386
|
+
const docHeight = box.offsetHeight + 'px';
|
|
85387
|
+
css = `
|
|
85388
|
+
<style id="__css_pagesize">
|
|
85389
|
+
.is-box {
|
|
85390
|
+
width: 100%;
|
|
85391
|
+
max-width: ${docWidth};
|
|
85392
|
+
height: ${docHeight};
|
|
85393
|
+
margin: 0 auto;
|
|
85394
|
+
}
|
|
85395
|
+
@media print {
|
|
85396
|
+
.is-box {
|
|
85397
|
+
width: ${docWidth};
|
|
85398
|
+
height: ${docHeight};
|
|
85399
|
+
}
|
|
85400
|
+
}
|
|
85401
|
+
@page {
|
|
85402
|
+
size:${docWidth} ${docHeight};;
|
|
85403
|
+
margin: 0;
|
|
85404
|
+
}
|
|
85405
|
+
</style>
|
|
85406
|
+
`;
|
|
85407
|
+
} else {
|
|
85408
|
+
// print
|
|
85409
|
+
css = `
|
|
85410
|
+
<style id="__css_pagesize">
|
|
85411
|
+
.is-box {
|
|
85412
|
+
width: ${w};
|
|
85413
|
+
height: ${h};
|
|
85414
|
+
}
|
|
85415
|
+
@media print {
|
|
85416
|
+
.is-box {
|
|
85417
|
+
width: ${w};
|
|
85418
|
+
height: ${h};
|
|
85419
|
+
}
|
|
85420
|
+
}
|
|
85421
|
+
@page {
|
|
85422
|
+
size:${w} ${h};
|
|
85423
|
+
margin: 0;
|
|
85424
|
+
}
|
|
85425
|
+
</style>
|
|
85426
|
+
`;
|
|
85427
|
+
}
|
|
85428
|
+
}
|
|
85429
|
+
return css;
|
|
85430
|
+
}
|
|
85431
|
+
}
|
|
85432
|
+
|
|
84530
85433
|
class ContentBuilder {
|
|
84531
85434
|
constructor(opts = {}) {
|
|
84532
85435
|
let defaults = {
|
|
84533
85436
|
page: '',
|
|
84534
|
-
container: '.container',
|
|
85437
|
+
container: '.is-container',
|
|
84535
85438
|
row: '',
|
|
84536
85439
|
cols: [],
|
|
84537
85440
|
colequal: [],
|
|
@@ -84773,6 +85676,8 @@ class ContentBuilder {
|
|
|
84773
85676
|
onUndo: function () {},
|
|
84774
85677
|
onRedo: function () {},
|
|
84775
85678
|
onBlockCanvasAdd: function () {},
|
|
85679
|
+
// docContainer: '.is-page',
|
|
85680
|
+
blockContainer: '.is-box',
|
|
84776
85681
|
/*
|
|
84777
85682
|
Deprecated:
|
|
84778
85683
|
snippetSampleImage: '',
|
|
@@ -85571,6 +86476,34 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
85571
86476
|
}
|
|
85572
86477
|
this.settings = this.opts; // Backward compatible
|
|
85573
86478
|
|
|
86479
|
+
// freeform
|
|
86480
|
+
if (this.canvas && !this.isContentBox) {
|
|
86481
|
+
/*
|
|
86482
|
+
blockContainer: '.is-box',
|
|
86483
|
+
imageResizeOnBlock: false,
|
|
86484
|
+
toolbarDisplay: 'always',
|
|
86485
|
+
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'],
|
|
86486
|
+
buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara'],
|
|
86487
|
+
elementButtons: ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete','left', 'center', 'right', 'full' , 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'],
|
|
86488
|
+
elementButtonsMore: [],
|
|
86489
|
+
iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'],
|
|
86490
|
+
iconButtonsMore: [],
|
|
86491
|
+
*/
|
|
86492
|
+
this.blockContainer = '.is-box';
|
|
86493
|
+
this.imageResizeOnBlock = false;
|
|
86494
|
+
this.toolbarDisplay = 'always';
|
|
86495
|
+
this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
|
86496
|
+
this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
|
|
86497
|
+
this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'];
|
|
86498
|
+
this.elementButtonsMore = [];
|
|
86499
|
+
this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'];
|
|
86500
|
+
this.iconButtonsMore = [];
|
|
86501
|
+
if (!this.docContainer && this.container !== '.is-container') {
|
|
86502
|
+
this.docContainer = this.container;
|
|
86503
|
+
this.container = '.is-container';
|
|
86504
|
+
this.opts.container = '.is-container';
|
|
86505
|
+
}
|
|
86506
|
+
}
|
|
85574
86507
|
if (this.opts.imageSelect !== '') {
|
|
85575
86508
|
this.opts.imageselect = this.opts.imageSelect;
|
|
85576
86509
|
} else if (this.opts.imageselect !== '') {
|
|
@@ -85709,6 +86642,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
85709
86642
|
this.win = win;
|
|
85710
86643
|
this.doc = doc;
|
|
85711
86644
|
this.doc.body.classList.add('data-editor');
|
|
86645
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
|
86646
|
+
const docContainer = document.querySelector(this.docContainer);
|
|
86647
|
+
docContainer.classList.add('is-page');
|
|
86648
|
+
}
|
|
85712
86649
|
|
|
85713
86650
|
// Disable on mobile
|
|
85714
86651
|
const viewportWidth = this.doc.body.clientWidth;
|
|
@@ -85956,6 +86893,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
85956
86893
|
|
|
85957
86894
|
// freeform
|
|
85958
86895
|
if (this.canvas && !this.isContentBox) this.blockmodal = new BlockModal(this);
|
|
86896
|
+
if (this.canvas) this.pageoption = new PageSize(this);
|
|
85959
86897
|
|
|
85960
86898
|
// freeform
|
|
85961
86899
|
if (this.canvas) this.eb = new EditableBlocks({
|
|
@@ -85966,6 +86904,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
85966
86904
|
parentSelector: '.box-canvas',
|
|
85967
86905
|
rotate: true,
|
|
85968
86906
|
// disableOnMobile: 760,
|
|
86907
|
+
zoom: this.opts.zoom,
|
|
85969
86908
|
onBeforeChange: () => {
|
|
85970
86909
|
this.uo.saveForUndo();
|
|
85971
86910
|
},
|
|
@@ -85973,15 +86912,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
85973
86912
|
this.opts.onChange();
|
|
85974
86913
|
},
|
|
85975
86914
|
onEditStart: (event, block) => {
|
|
86915
|
+
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
|
86916
|
+
if (!activeBlock) return;
|
|
86917
|
+
const container = activeBlock.querySelector('.is-container');
|
|
86918
|
+
if (!container) return;
|
|
85976
86919
|
block.classList.add('editable');
|
|
85977
86920
|
|
|
85978
86921
|
// get element to activate
|
|
85979
86922
|
let x = event.clientX;
|
|
85980
86923
|
let y = event.clientY;
|
|
85981
|
-
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
|
85982
|
-
if (!activeBlock) return;
|
|
85983
|
-
const container = activeBlock.querySelector('.is-container');
|
|
85984
|
-
if (!container) return;
|
|
85985
86924
|
const cols = this.getAllColumns(container);
|
|
85986
86925
|
let clickedElm;
|
|
85987
86926
|
let clickedCol;
|
|
@@ -86094,10 +87033,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86094
87033
|
Array.prototype.forEach.call(elms, elm => {
|
|
86095
87034
|
elm.style.display = '';
|
|
86096
87035
|
});
|
|
86097
|
-
elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
|
86098
|
-
Array.prototype.forEach.call(elms, elm => {
|
|
86099
|
-
|
|
86100
|
-
});
|
|
87036
|
+
// elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
|
87037
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
|
87038
|
+
// elm.style.display = '';
|
|
87039
|
+
// });
|
|
87040
|
+
|
|
86101
87041
|
const viewportWidth = this.doc.body.clientWidth;
|
|
86102
87042
|
if (viewportWidth <= 768) {
|
|
86103
87043
|
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
|
@@ -86157,6 +87097,74 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86157
87097
|
if (this.onUnselectBlock) this.onUnselectBlock();
|
|
86158
87098
|
}
|
|
86159
87099
|
});
|
|
87100
|
+
|
|
87101
|
+
// SHIFT + Right Clidk to Zoom In
|
|
87102
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
|
87103
|
+
//--- see loadHtml ---
|
|
87104
|
+
const docContainer = document.querySelector(this.docContainer);
|
|
87105
|
+
|
|
87106
|
+
// set page size
|
|
87107
|
+
let s;
|
|
87108
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
|
87109
|
+
if (elm) {
|
|
87110
|
+
s = elm.getAttribute('data-pagesize');
|
|
87111
|
+
} else {
|
|
87112
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
|
87113
|
+
s = localStorage.getItem('_pagesize');
|
|
87114
|
+
} else {
|
|
87115
|
+
s = this.pageSize || '';
|
|
87116
|
+
}
|
|
87117
|
+
}
|
|
87118
|
+
this.setPageSize(s);
|
|
87119
|
+
this.applyBehaviorCanvas();
|
|
87120
|
+
const builders = docContainer.querySelectorAll(this.container);
|
|
87121
|
+
builders.forEach(builder => {
|
|
87122
|
+
this.applyBehaviorOn(builder);
|
|
87123
|
+
});
|
|
87124
|
+
this.refresh();
|
|
87125
|
+
if (this.win.Block) {
|
|
87126
|
+
this.win.Block.render();
|
|
87127
|
+
}
|
|
87128
|
+
docContainer.style.opacity = '';
|
|
87129
|
+
//--- /see loadHtml ---
|
|
87130
|
+
|
|
87131
|
+
// docContainer.style.transform = '';
|
|
87132
|
+
// this.opts.zoom = 1;
|
|
87133
|
+
// this.eb.setZoom(1);
|
|
87134
|
+
|
|
87135
|
+
document.addEventListener('contextmenu', this.toggleEnlargePage = e => {
|
|
87136
|
+
if (e.shiftKey && e.button === 2) {
|
|
87137
|
+
e.preventDefault();
|
|
87138
|
+
if (docContainer.style.transform.includes('scale(1)')) {
|
|
87139
|
+
docContainer.style.transform = '';
|
|
87140
|
+
}
|
|
87141
|
+
if (docContainer.classList.contains('expand')) {
|
|
87142
|
+
// back (zoom-out)
|
|
87143
|
+
docContainer.classList.remove('expand');
|
|
87144
|
+
docContainer.style.transform = '';
|
|
87145
|
+
this.opts.zoom = 1;
|
|
87146
|
+
localStorage.setItem('_zoom', 1);
|
|
87147
|
+
this.eb.setZoom(1);
|
|
87148
|
+
this.setZoomOnControl(docContainer);
|
|
87149
|
+
} else {
|
|
87150
|
+
// expand (zoom-in)
|
|
87151
|
+
docContainer.classList.add('expand');
|
|
87152
|
+
const viewportWidth = document.body.clientWidth;
|
|
87153
|
+
const targetWidth = viewportWidth * 0.8;
|
|
87154
|
+
const box = docContainer.querySelector(this.blockContainer);
|
|
87155
|
+
if (box) {
|
|
87156
|
+
let scale = targetWidth / box.offsetWidth;
|
|
87157
|
+
if (scale > 1.4) scale = 1.4;
|
|
87158
|
+
docContainer.style.transform = `scale(${scale})`;
|
|
87159
|
+
this.opts.zoom = scale;
|
|
87160
|
+
localStorage.setItem('_zoom', scale);
|
|
87161
|
+
this.eb.setZoom(scale);
|
|
87162
|
+
this.setZoomOnControl(docContainer);
|
|
87163
|
+
}
|
|
87164
|
+
}
|
|
87165
|
+
}
|
|
87166
|
+
});
|
|
87167
|
+
}
|
|
86160
87168
|
let previousWidth = this.win.innerWidth;
|
|
86161
87169
|
let timer;
|
|
86162
87170
|
const debounce = (func, delay) => {
|
|
@@ -86223,7 +87231,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86223
87231
|
|
|
86224
87232
|
// console.log('resize');
|
|
86225
87233
|
setTimeout(() => {
|
|
86226
|
-
if
|
|
87234
|
+
// if(this.blockmodal) this.blockmodal.realtime(); // freeform
|
|
86227
87235
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
|
86228
87236
|
}, 300); // give time for block transition
|
|
86229
87237
|
}, 200);
|
|
@@ -86240,7 +87248,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86240
87248
|
const debouncedResizeHandler = debounce(() => {
|
|
86241
87249
|
// console.log('resize');
|
|
86242
87250
|
setTimeout(() => {
|
|
86243
|
-
if
|
|
87251
|
+
// if(this.blockmodal) this.blockmodal.realtime();
|
|
86244
87252
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
|
86245
87253
|
}, 300); // give time for block transition
|
|
86246
87254
|
}, 200);
|
|
@@ -86537,6 +87545,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86537
87545
|
.is-block.active.editable {
|
|
86538
87546
|
outline: none;
|
|
86539
87547
|
cursor: auto;
|
|
87548
|
+
z-index: 10;
|
|
86540
87549
|
}
|
|
86541
87550
|
.is-block.active.multi {
|
|
86542
87551
|
outline: var(--is-outline);
|
|
@@ -86946,9 +87955,27 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
86946
87955
|
rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`;
|
|
86947
87956
|
// rowtool.style.transformOrigin = 'top';
|
|
86948
87957
|
});
|
|
86949
|
-
}
|
|
86950
87958
|
|
|
87959
|
+
// freeform
|
|
87960
|
+
let tools = area.querySelectorAll('.is-canvas-tool');
|
|
87961
|
+
tools.forEach(tool => {
|
|
87962
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
|
87963
|
+
tool.style.transformOrigin = 'top';
|
|
87964
|
+
});
|
|
87965
|
+
tools = area.querySelectorAll('.is-canvasadd-tool');
|
|
87966
|
+
tools.forEach(tool => {
|
|
87967
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
|
87968
|
+
tool.style.transformOrigin = 'top';
|
|
87969
|
+
});
|
|
87970
|
+
}
|
|
86951
87971
|
setZoomOnArea() {
|
|
87972
|
+
if (this.canvas && !this.isContentBox && this.docContainer) {
|
|
87973
|
+
// freeform
|
|
87974
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
|
87975
|
+
docContainer.style.transform = `scale(${this.opts.zoom})`;
|
|
87976
|
+
if (this.eb) this.eb.setZoom(this.opts.zoom);
|
|
87977
|
+
return;
|
|
87978
|
+
}
|
|
86952
87979
|
if (this.opts.page !== '') {
|
|
86953
87980
|
const wrapper = this.doc.querySelector(this.opts.page);
|
|
86954
87981
|
wrapper.style.transform = `scale(${this.opts.zoom})`;
|
|
@@ -87473,9 +88500,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87473
88500
|
lang: this.opts.lang
|
|
87474
88501
|
});
|
|
87475
88502
|
}
|
|
87476
|
-
|
|
87477
|
-
|
|
87478
|
-
|
|
88503
|
+
|
|
88504
|
+
// simpleColorPicker(onPick,mode) {
|
|
88505
|
+
// return this.colorClassPicker.open(onPick,mode);
|
|
88506
|
+
// }
|
|
88507
|
+
|
|
87479
88508
|
openAIAssistant() {
|
|
87480
88509
|
this.dictation.openDictation();
|
|
87481
88510
|
}
|
|
@@ -87630,6 +88659,124 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87630
88659
|
if (!this.eb) return;
|
|
87631
88660
|
this.eb.quitEditable(target);
|
|
87632
88661
|
}
|
|
88662
|
+
addPage(box) {
|
|
88663
|
+
this.uo.saveForUndo();
|
|
88664
|
+
let s;
|
|
88665
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
|
88666
|
+
s = localStorage.getItem('_pagesize');
|
|
88667
|
+
} else {
|
|
88668
|
+
s = this.pageSize || '';
|
|
88669
|
+
}
|
|
88670
|
+
const html = `
|
|
88671
|
+
<div class="is-box box-canvas autolayout new-canvas" data-pagesize="${s}">
|
|
88672
|
+
`;
|
|
88673
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
|
88674
|
+
if (box) {
|
|
88675
|
+
box.insertAdjacentHTML('afterend', html);
|
|
88676
|
+
} else {
|
|
88677
|
+
docContainer.insertAdjacentHTML('beforeend', html);
|
|
88678
|
+
}
|
|
88679
|
+
const newBox = docContainer.querySelector('.new-canvas');
|
|
88680
|
+
newBox.scrollIntoView({
|
|
88681
|
+
behavior: 'smooth',
|
|
88682
|
+
block: 'center'
|
|
88683
|
+
});
|
|
88684
|
+
newBox.classList.remove('new-canvas');
|
|
88685
|
+
this.applyBehaviorCanvas();
|
|
88686
|
+
this.opts.onChange();
|
|
88687
|
+
}
|
|
88688
|
+
setPageSize(s) {
|
|
88689
|
+
this.pageoption.setPageSize(s);
|
|
88690
|
+
}
|
|
88691
|
+
applyBehaviorCanvas() {
|
|
88692
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
|
88693
|
+
let htmlTool = `
|
|
88694
|
+
<div class="is-tool is-canvas-tool" style="transform: scale(1); transform-origin: center top;">
|
|
88695
|
+
<button type="button" tabindex="-1" class="box-up" title="${this.util.out('Move Up')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-up"></use></svg></button>
|
|
88696
|
+
<button type="button" tabindex="-1" class="box-down" title="${this.util.out('Move Down')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-down"></use></svg></button>
|
|
88697
|
+
<!--
|
|
88698
|
+
<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>
|
|
88699
|
+
-->
|
|
88700
|
+
<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>
|
|
88701
|
+
</div>
|
|
88702
|
+
<div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
|
|
88703
|
+
<button type="button" tabindex="-1" class="box-add" title="${this.util.out('Add')}"><svg class="is-icon-flex"><use xlink:href="#icon-plus2"></use></svg></button>
|
|
88704
|
+
</div>
|
|
88705
|
+
`;
|
|
88706
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
|
88707
|
+
const boxes = this.dom.elementChildren(docContainer);
|
|
88708
|
+
boxes.forEach(box => {
|
|
88709
|
+
let tool1 = box.querySelector('.is-canvas-tool');
|
|
88710
|
+
let tool2 = box.querySelector('.is-canvasadd-tool');
|
|
88711
|
+
if (tool1) tool1.remove();
|
|
88712
|
+
if (tool2) tool2.remove();
|
|
88713
|
+
if (!box.querySelector('.is-canvas-tool')) {
|
|
88714
|
+
box.addEventListener('click', () => {
|
|
88715
|
+
boxes.forEach(elm => elm.classList.remove('box-select'));
|
|
88716
|
+
box.classList.add('box-select');
|
|
88717
|
+
|
|
88718
|
+
// onSelectPage (see onSelectBlock)
|
|
88719
|
+
|
|
88720
|
+
let elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
|
88721
|
+
Array.prototype.forEach.call(elms, elm => {
|
|
88722
|
+
elm.style.display = '';
|
|
88723
|
+
});
|
|
88724
|
+
});
|
|
88725
|
+
box.insertAdjacentHTML('afterbegin', htmlTool);
|
|
88726
|
+
const btnUp = box.querySelector('.is-canvas-tool .box-up');
|
|
88727
|
+
btnUp.addEventListener('click', e => {
|
|
88728
|
+
const box = e.target.closest('.is-box');
|
|
88729
|
+
this.uo.saveForUndo();
|
|
88730
|
+
let boxPrev = box.previousElementSibling;
|
|
88731
|
+
if (boxPrev) box.parentNode.insertBefore(box, boxPrev);
|
|
88732
|
+
box.scrollIntoView({
|
|
88733
|
+
behavior: 'smooth',
|
|
88734
|
+
block: 'center'
|
|
88735
|
+
});
|
|
88736
|
+
this.opts.onChange();
|
|
88737
|
+
});
|
|
88738
|
+
const btnDown = box.querySelector('.is-canvas-tool .box-down');
|
|
88739
|
+
btnDown.addEventListener('click', e => {
|
|
88740
|
+
const box = e.target.closest('.is-box');
|
|
88741
|
+
this.uo.saveForUndo();
|
|
88742
|
+
let boxNext = box.nextElementSibling;
|
|
88743
|
+
if (boxNext) box.parentNode.insertBefore(boxNext, box);
|
|
88744
|
+
box.scrollIntoView({
|
|
88745
|
+
behavior: 'smooth',
|
|
88746
|
+
block: 'center'
|
|
88747
|
+
});
|
|
88748
|
+
this.opts.onChange();
|
|
88749
|
+
});
|
|
88750
|
+
const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
|
|
88751
|
+
btnRemove.addEventListener('click', e => {
|
|
88752
|
+
const box = e.target.closest('.is-box');
|
|
88753
|
+
this.uo.saveForUndo();
|
|
88754
|
+
box.remove();
|
|
88755
|
+
this.blockmodal.showHideControls();
|
|
88756
|
+
if (!docContainer.querySelector('.is-box')) this.addPage();
|
|
88757
|
+
this.opts.onChange();
|
|
88758
|
+
});
|
|
88759
|
+
const btnAdd = box.querySelector('.is-canvasadd-tool .box-add');
|
|
88760
|
+
btnAdd.addEventListener('click', e => {
|
|
88761
|
+
const box = e.target.closest('.is-box');
|
|
88762
|
+
this.addPage(box);
|
|
88763
|
+
});
|
|
88764
|
+
}
|
|
88765
|
+
});
|
|
88766
|
+
if (localStorage.getItem('_zoom') !== null) {
|
|
88767
|
+
this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
|
|
88768
|
+
}
|
|
88769
|
+
|
|
88770
|
+
this.eb.setZoom(this.opts.zoom);
|
|
88771
|
+
this.setZoomOnControl(docContainer);
|
|
88772
|
+
}
|
|
88773
|
+
}
|
|
88774
|
+
openPageOptions() {
|
|
88775
|
+
this.pageoption.open();
|
|
88776
|
+
}
|
|
88777
|
+
print() {
|
|
88778
|
+
this.pageoption.print();
|
|
88779
|
+
}
|
|
87633
88780
|
destroy() {
|
|
87634
88781
|
if (this.eb) this.eb.destroy();
|
|
87635
88782
|
this.doc.body.classList.remove('data-editor');
|
|
@@ -87670,6 +88817,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87670
88817
|
builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
87671
88818
|
});
|
|
87672
88819
|
|
|
88820
|
+
if (this.canvas && !this.isContentBox) {
|
|
88821
|
+
let html = this.html();
|
|
88822
|
+
let range = this.doc.createRange();
|
|
88823
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
|
88824
|
+
docContainer.innerHTML = '';
|
|
88825
|
+
docContainer.appendChild(range.createContextualFragment(html));
|
|
88826
|
+
}
|
|
87673
88827
|
Array.prototype.forEach.call(builders, builder => {
|
|
87674
88828
|
builder.removeAttribute('data-sort');
|
|
87675
88829
|
this.dom.removeClass(builder, 'is-builder');
|
|
@@ -87787,13 +88941,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87787
88941
|
if (this.targetAssetType === 'all') {
|
|
87788
88942
|
ok = true;
|
|
87789
88943
|
} else if (this.targetAssetType === 'media') {
|
|
87790
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
88944
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
87791
88945
|
ok = true;
|
|
87792
88946
|
} else {
|
|
87793
88947
|
alert(this.util.out('Please select an image or video file.'));
|
|
87794
88948
|
}
|
|
87795
88949
|
} else if (this.targetAssetType === 'image') {
|
|
87796
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
88950
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
87797
88951
|
ok = true;
|
|
87798
88952
|
} else {
|
|
87799
88953
|
alert(this.util.out('Please select an image file.'));
|
|
@@ -87855,7 +89009,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87855
89009
|
let extension = filename.split('.').pop();
|
|
87856
89010
|
extension = extension.toLowerCase();
|
|
87857
89011
|
let ok = false;
|
|
87858
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
89012
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
87859
89013
|
ok = true;
|
|
87860
89014
|
} else {
|
|
87861
89015
|
alert(out('Please select an image file.'));
|
|
@@ -87884,13 +89038,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87884
89038
|
let ext = filename.split('.').pop();
|
|
87885
89039
|
ext = ext.toLowerCase();
|
|
87886
89040
|
let ok = false;
|
|
87887
|
-
if (targetAssetType === 'image' && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
|
89041
|
+
if (targetAssetType === 'image' && (s.includes('base64') || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
|
87888
89042
|
ok = true;
|
|
87889
89043
|
} else if (targetAssetType === 'video' && ext === 'mp4') {
|
|
87890
89044
|
ok = true;
|
|
87891
89045
|
} else if (targetAssetType === 'audio' && ext === 'mp3') {
|
|
87892
89046
|
ok = true;
|
|
87893
|
-
} else if (targetAssetType === 'media' && (ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
|
89047
|
+
} else if (targetAssetType === 'media' && (s.includes('base64') || ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
|
87894
89048
|
ok = true;
|
|
87895
89049
|
} else if (targetAssetType === 'all') {
|
|
87896
89050
|
ok = true;
|
|
@@ -87928,7 +89082,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87928
89082
|
if (targetAssetType === 'all') {
|
|
87929
89083
|
ok = true;
|
|
87930
89084
|
} else if (targetAssetType === 'media') {
|
|
87931
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
89085
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
|
87932
89086
|
ok = true;
|
|
87933
89087
|
} else {
|
|
87934
89088
|
alert(out('Please select an image or video file.'));
|
|
@@ -87940,7 +89094,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
87940
89094
|
alert(out('Please select an mp4 file.'));
|
|
87941
89095
|
}
|
|
87942
89096
|
} else if (targetAssetType === 'image') {
|
|
87943
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
89097
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
87944
89098
|
ok = true;
|
|
87945
89099
|
} else {
|
|
87946
89100
|
alert(out('Please select an image file.'));
|
|
@@ -88664,6 +89818,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88664
89818
|
docContainer.innerHTML = '';
|
|
88665
89819
|
docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
|
88666
89820
|
|
|
89821
|
+
// set page size
|
|
89822
|
+
let s;
|
|
89823
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
|
89824
|
+
if (elm) {
|
|
89825
|
+
s = elm.getAttribute('data-pagesize');
|
|
89826
|
+
} else {
|
|
89827
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
|
89828
|
+
s = localStorage.getItem('_pagesize');
|
|
89829
|
+
} else {
|
|
89830
|
+
s = this.pageSize || '';
|
|
89831
|
+
}
|
|
89832
|
+
}
|
|
89833
|
+
this.setPageSize(s);
|
|
89834
|
+
this.applyBehaviorCanvas();
|
|
88667
89835
|
const builders = docContainer.querySelectorAll(this.container);
|
|
88668
89836
|
builders.forEach(builder => {
|
|
88669
89837
|
this.applyBehaviorOn(builder);
|
|
@@ -88873,7 +90041,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
88873
90041
|
url = elm.getAttribute('data-modal-url');
|
|
88874
90042
|
let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
|
|
88875
90043
|
|
|
88876
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
90044
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
88877
90045
|
this.lightbox.openImage(url, theme, color);
|
|
88878
90046
|
} else if (extension === 'mp4') {
|
|
88879
90047
|
this.lightbox.openVideo(url, 'dark', color);
|
|
@@ -89203,7 +90371,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
89203
90371
|
let theme = link.getAttribute('data-modal-theme');
|
|
89204
90372
|
if (!theme) theme = 'light';
|
|
89205
90373
|
const color = elm.getAttribute('data-modal-color');
|
|
89206
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
90374
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
|
89207
90375
|
this.lightbox.openImage(url, theme, color);
|
|
89208
90376
|
e.preventDefault();
|
|
89209
90377
|
return false;
|
|
@@ -90202,6 +91370,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
90202
91370
|
});
|
|
90203
91371
|
var html = result[0].html;
|
|
90204
91372
|
var noedit = result[0].noedit;
|
|
91373
|
+
const occurrences = this.dom.countOccurrences(html, 'column');
|
|
90205
91374
|
var bSnippet;
|
|
90206
91375
|
if (html.indexOf('"row') === -1) {
|
|
90207
91376
|
bSnippet = true; // Just snippet (without row/column grid)
|
|
@@ -90255,8 +91424,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
90255
91424
|
// Clean snippet from sortable related code
|
|
90256
91425
|
itemEl.removeAttribute('draggable');
|
|
90257
91426
|
this.dom.removeClass(itemEl, 'snippet-item');
|
|
91427
|
+
let bw = '';
|
|
91428
|
+
if (this.page && this.page === '.is-wrapper') {
|
|
91429
|
+
bw = '800px';
|
|
91430
|
+
} else {
|
|
91431
|
+
if (occurrences === 2) {
|
|
91432
|
+
bw = '800px';
|
|
91433
|
+
} else if (occurrences >= 3) {
|
|
91434
|
+
bw = '800px';
|
|
91435
|
+
} else {
|
|
91436
|
+
bw = '540px';
|
|
91437
|
+
}
|
|
91438
|
+
}
|
|
90258
91439
|
const blockTemplate = `
|
|
90259
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
|
91440
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
|
90260
91441
|
<div class="is-container container-new leading-12 size-17">
|
|
90261
91442
|
[%CONTENT%]
|
|
90262
91443
|
</div>
|
|
@@ -90293,8 +91474,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
90293
91474
|
var range = document.createRange();
|
|
90294
91475
|
range.setStart(itemEl, 0);
|
|
90295
91476
|
itemEl.appendChild(range.createContextualFragment(html));
|
|
91477
|
+
let bw = '';
|
|
91478
|
+
if (this.page && this.page === '.is-wrapper') {
|
|
91479
|
+
bw = '800px';
|
|
91480
|
+
} else {
|
|
91481
|
+
if (occurrences === 2) {
|
|
91482
|
+
bw = '800px';
|
|
91483
|
+
} else if (occurrences >= 3) {
|
|
91484
|
+
bw = '800px';
|
|
91485
|
+
} else {
|
|
91486
|
+
bw = '540px';
|
|
91487
|
+
}
|
|
91488
|
+
}
|
|
90296
91489
|
const blockTemplate = `
|
|
90297
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
|
91490
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
|
90298
91491
|
<div class="is-container container-new leading-12 size-17">
|
|
90299
91492
|
[%CONTENT%]
|
|
90300
91493
|
</div>
|