@innovastudio/contentbuilder 1.5.9 → 1.5.11
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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>
|