@innovastudio/contentbuilder 1.5.3 → 1.5.4
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1215,15 +1215,16 @@ const renderQuickAdd = builder => {
|
|
1215
1215
|
<button title="${util.out('Heading 3')}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${util.out('Heading 3')}</button>
|
1216
1216
|
<button title="${util.out('Heading 4')}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${util.out('Heading 4')}</button>
|
1217
1217
|
<button title="${util.out('Quote')}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${util.out('Quote')}</button>
|
1218
|
-
<button title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>
|
1218
|
+
<button style="display:none" title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>
|
1219
1219
|
${builder.opts.emailMode ? '' : `<button title="${util.out('Button')}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Button')}</button>`}
|
1220
1220
|
${builder.opts.emailMode ? '' : `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`}
|
1221
|
+
<button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>
|
1221
1222
|
<button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>
|
1222
1223
|
<button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>
|
1223
1224
|
<button style="display:none" title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>
|
1224
|
-
<button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>
|
1225
|
-
<button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>
|
1226
1225
|
<button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>
|
1226
|
+
<button title="${util.out('SVG')}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${util.out('SVG')}</button>
|
1227
|
+
<button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>
|
1227
1228
|
<button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>
|
1228
1229
|
<button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>
|
1229
1230
|
<button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>
|
@@ -1438,6 +1439,19 @@ const renderQuickAdd = builder => {
|
|
1438
1439
|
</div>`;
|
1439
1440
|
util.addContent(html, mode);
|
1440
1441
|
});
|
1442
|
+
elm = quickadd.querySelector('.add-svg');
|
1443
|
+
dom.addEventListener(elm, 'click', () => {
|
1444
|
+
const mode = quickadd.getAttribute('data-mode');
|
1445
|
+
const html = `<div style="text-align: center;">
|
1446
|
+
<svg viewBox="0 0 259.25 969.39" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(100 177 45); width: 150px; height: 150px;">
|
1447
|
+
<g>
|
1448
|
+
<path d="M184,17.61S101.39,318.78,98.85,334,69.62,463.64,67.08,517s-16.52,141,19.06,202,86.41,110.56,151.21,75S320,675.85,320,675.85s16.52-179.17-58.45-414.26S184,17.61,184,17.61Z" transform="translate(-62.25 -17.61)"></path>
|
1449
|
+
<path d="M190.34,179l-7.63,319s-28-17.79-30.49-24.15-20.34-26.68-20.34-26.68,15.25,36.85,20.34,40.66,26.68,34.31,26.68,34.31l-1.27,181.72,1.27,274.47s11.44,17.79,14,2.54,3.81-305,3.81-305,34.31-78.79,41.94-95.3,12.7-39.4,12.7-39.4-45.74,87.68-50.83,94-6.35-231.28-6.35-231.28,11.44,6.36,22.87-33,7.63-52.1,7.63-52.1-14,45.74-20.33,55.91S190.34,179,190.34,179Z" transform="translate(-62.25 -17.61)" style="fill:#ededed"></path>
|
1450
|
+
</g>
|
1451
|
+
</svg>
|
1452
|
+
</div>`;
|
1453
|
+
util.addContent(html, mode);
|
1454
|
+
});
|
1441
1455
|
elm = quickadd.querySelector('.add-social');
|
1442
1456
|
dom.addEventListener(elm, 'click', () => {
|
1443
1457
|
const mode = quickadd.getAttribute('data-mode');
|
@@ -2681,10 +2695,7 @@ class Util {
|
|
2681
2695
|
this.builder.activeTd = null;
|
2682
2696
|
this.builder.activeTable = null;
|
2683
2697
|
this.builder.activeModule = null;
|
2684
|
-
|
2685
|
-
Array.prototype.forEach.call(icons, icon => {
|
2686
|
-
dom.removeClass(icon, 'icon-active');
|
2687
|
-
});
|
2698
|
+
this.builder.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
|
2688
2699
|
this.builder.activeIcon = null;
|
2689
2700
|
|
2690
2701
|
// RTE
|
@@ -2761,25 +2772,22 @@ class Util {
|
|
2761
2772
|
clearActiveElement(all) {
|
2762
2773
|
const dom = this.dom;
|
2763
2774
|
const builderStuff = this.builder.builderStuff;
|
2764
|
-
|
2765
|
-
|
2766
|
-
dom.removeClass(icon, 'icon-active');
|
2767
|
-
});
|
2775
|
+
this.builder.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
|
2776
|
+
this.builder.activeIcon = null;
|
2768
2777
|
let elms = this.builder.doc.querySelectorAll('.elm-inspected');
|
2769
2778
|
Array.prototype.forEach.call(elms, elm => {
|
2770
2779
|
dom.removeClass(elm, 'elm-inspected');
|
2771
2780
|
});
|
2781
|
+
this.builder.inspectedElement = null;
|
2772
2782
|
elms = this.builder.doc.querySelectorAll('.elm-active');
|
2773
2783
|
Array.prototype.forEach.call(elms, elm => {
|
2774
2784
|
dom.removeClass(elm, 'elm-active');
|
2775
2785
|
});
|
2786
|
+
this.builder.activeElement = null;
|
2776
2787
|
let elmTool = this.builder.doc.querySelector('.is-element-tool');
|
2777
2788
|
elmTool.style.display = '';
|
2778
2789
|
let linkTool = this.builder.doc.querySelector('#divLinkTool');
|
2779
2790
|
if (linkTool) linkTool.style.display = '';
|
2780
|
-
this.builder.activeIcon = null;
|
2781
|
-
this.builder.inspectedElement = null;
|
2782
|
-
this.builder.activeElement = null;
|
2783
2791
|
if (all && !this.builder.controlPanel) {
|
2784
2792
|
// RTE
|
2785
2793
|
let rtetool = builderStuff.querySelector('.is-rte-tool');
|
@@ -17654,6 +17662,8 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17654
17662
|
if (oldCss) oldCss.parentNode.removeChild(oldCss);
|
17655
17663
|
builder.builderStuff.insertAdjacentHTML('afterbegin', newCss);
|
17656
17664
|
}
|
17665
|
+
builder.uo.saveForUndo(true); // Must be called before sectionDropSetup() to prevent saving extra 'block-dummy' helpers.
|
17666
|
+
|
17657
17667
|
builder.sectionDropSetup();
|
17658
17668
|
builder.util.clearPops();
|
17659
17669
|
builder.hideElementTools();
|
@@ -17686,9 +17696,10 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17686
17696
|
const block = builder.doc.querySelector('[data-new-dummy]');
|
17687
17697
|
if (block) {
|
17688
17698
|
const docContainer = block.parentNode;
|
17699
|
+
const rectContainer = docContainer.getBoundingClientRect();
|
17689
17700
|
block.offsetWidth / 2;
|
17690
|
-
let x = (snippetX - block.offsetWidth / 2) / docContainer.offsetWidth * 100;
|
17691
|
-
let y = (snippetY - block.offsetHeight / 2) / docContainer.offsetHeight * 100;
|
17701
|
+
let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
|
17702
|
+
let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
|
17692
17703
|
block.style.top = y + '%';
|
17693
17704
|
block.style.left = x + '%';
|
17694
17705
|
block.removeAttribute('data-new-dummy');
|
@@ -17702,7 +17713,8 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
17702
17713
|
activeBuilderArea = area;
|
17703
17714
|
dom.removeClass(activeBuilderArea, 'builder-active');
|
17704
17715
|
}
|
17705
|
-
|
17716
|
+
|
17717
|
+
// builder.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change => commented (moved to onChoose).
|
17706
17718
|
|
17707
17719
|
let elm = document.querySelector('.is-sidebar-overlay');
|
17708
17720
|
if (elm) elm.style.display = 'none'; // LATER: ContentBox
|
@@ -64456,7 +64468,7 @@ class Rte {
|
|
64456
64468
|
let inpZoomSlider;
|
64457
64469
|
if (!rteTool) {
|
64458
64470
|
// if(builder.plugins.length>0) {
|
64459
|
-
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'];
|
64471
|
+
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'];
|
64460
64472
|
const filterButtons = myArray => {
|
64461
64473
|
let newArray = myArray;
|
64462
64474
|
myArray.forEach(item => {
|
@@ -64514,7 +64526,7 @@ class Rte {
|
|
64514
64526
|
let html_rtemore = '';
|
64515
64527
|
for (var j = 0; j < builder.opts.buttonsMore.length; j++) {
|
64516
64528
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
64517
|
-
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 === '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>`;
|
64529
|
+
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>`;
|
64518
64530
|
// 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>`;
|
64519
64531
|
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:19px;height:19px;"><use xlink:href="#icon-snippets"></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 === '|') {
|
64520
64532
|
html_rtemore += '<div class="rte-separator"></div>';
|
@@ -64526,7 +64538,7 @@ class Rte {
|
|
64526
64538
|
let html_rte = '';
|
64527
64539
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
64528
64540
|
btn = builder.opts.buttons[j].toLowerCase();
|
64529
|
-
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 === '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="margin-top:2px;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 === '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 === '|') {
|
64541
|
+
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="margin-top:2px;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 === '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 === '|') {
|
64530
64542
|
html_rte += '<div class="rte-separator"></div>';
|
64531
64543
|
} else {
|
64532
64544
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64574,7 +64586,7 @@ class Rte {
|
|
64574
64586
|
let html_iconrte = '';
|
64575
64587
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
64576
64588
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
64577
|
-
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 === '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:19px;height:19px;"><use xlink:href="#icon-snippets"></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 === '|') {
|
64589
|
+
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:19px;height:19px;"><use xlink:href="#icon-snippets"></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 === '|') {
|
64578
64590
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
64579
64591
|
} else {
|
64580
64592
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64583,7 +64595,7 @@ class Rte {
|
|
64583
64595
|
|
64584
64596
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
64585
64597
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
64586
|
-
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 === '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:19px;height:19px;"><use xlink:href="#icon-snippets"></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 === '|') {
|
64598
|
+
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:19px;height:19px;"><use xlink:href="#icon-snippets"></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 === '|') {
|
64587
64599
|
html_iconrte += '<div class="rte-separator"></div>';
|
64588
64600
|
} else {
|
64589
64601
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -65411,6 +65423,14 @@ class Rte {
|
|
65411
65423
|
});
|
65412
65424
|
});
|
65413
65425
|
});
|
65426
|
+
let btnRteSvgs = builderStuff.querySelectorAll('button.rte-svg');
|
65427
|
+
btnRteSvgs.forEach(btn => {
|
65428
|
+
btn.addEventListener('click', () => {
|
65429
|
+
//save selection
|
65430
|
+
util.saveSelection();
|
65431
|
+
this.builder.element.svg.edit();
|
65432
|
+
});
|
65433
|
+
});
|
65414
65434
|
|
65415
65435
|
// Color
|
65416
65436
|
let btnRteColor = builderStuff.querySelectorAll('button.rte-color');
|
@@ -66335,13 +66355,31 @@ class Rte {
|
|
66335
66355
|
if (this.builder.activeIcon) {
|
66336
66356
|
elm = this.builder.activeIcon;
|
66337
66357
|
}
|
66358
|
+
const command = rteColorPicker.getAttribute('data-command');
|
66338
66359
|
|
66339
66360
|
// If svg is selected
|
66340
66361
|
if (this.builder.activeSvg) {
|
66341
66362
|
elm = this.builder.activeSvg;
|
66363
|
+
if (command === 'forecolor') {
|
66364
|
+
if (elm.style.fill) {
|
66365
|
+
elm.style.fill = color;
|
66366
|
+
} else {
|
66367
|
+
elm.style.color = color;
|
66368
|
+
}
|
66369
|
+
} else {
|
66370
|
+
elm.style.backgroundColor = color;
|
66371
|
+
}
|
66372
|
+
|
66373
|
+
// if(!this.builder.isTouchSupport) {
|
66374
|
+
// util.saveSelection(); //Needed because after format, a tag is added (ex. <b>,<i>), so, make selection again.
|
66375
|
+
// }
|
66376
|
+
|
66377
|
+
this.builder.opts.onChange();
|
66378
|
+
if (this.builder.onTextChange) this.builder.onTextChange();
|
66379
|
+
if (this.builder.onIconChange) this.builder.onIconChange();
|
66380
|
+
return;
|
66342
66381
|
}
|
66343
|
-
|
66344
|
-
var text = dom.getSelected();
|
66382
|
+
let text = dom.getSelected();
|
66345
66383
|
if (text.trim() === '') {
|
66346
66384
|
if (command === 'forecolor') {
|
66347
66385
|
elm.style.color = color;
|
@@ -66363,9 +66401,9 @@ class Rte {
|
|
66363
66401
|
}
|
66364
66402
|
|
66365
66403
|
//Cleanup FONTs
|
66366
|
-
|
66367
|
-
for (
|
66368
|
-
|
66404
|
+
let fontElements = this.builder.doc.getElementsByTagName('font');
|
66405
|
+
for (let i = 0, len = fontElements.length; i < len; ++i) {
|
66406
|
+
let s = fontElements[i].color;
|
66369
66407
|
if (s !== '') {
|
66370
66408
|
if (command === 'forecolor') {
|
66371
66409
|
fontElements[i].removeAttribute('color');
|
@@ -82736,7 +82774,9 @@ class Resizable {
|
|
82736
82774
|
// defaultPoint = 1900;
|
82737
82775
|
// }
|
82738
82776
|
|
82739
|
-
|
82777
|
+
const largeScreenBreakpoint = 1920; //1920
|
82778
|
+
|
82779
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
82740
82780
|
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
82741
82781
|
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
82742
82782
|
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
@@ -82981,7 +83021,9 @@ class Draggable {
|
|
82981
83021
|
// defaultPoint = 1900;
|
82982
83022
|
// }
|
82983
83023
|
|
82984
|
-
|
83024
|
+
const largeScreenBreakpoint = 1920; //1920
|
83025
|
+
|
83026
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
82985
83027
|
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
82986
83028
|
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
82987
83029
|
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
@@ -83464,7 +83506,110 @@ class EditableBlocks {
|
|
83464
83506
|
setMultiSelect(multiSelect) {
|
83465
83507
|
if (multiSelect) this.doc.body.classList.add('multi-select');else this.doc.body.classList.remove('multi-select');
|
83466
83508
|
}
|
83509
|
+
generateRandom() {
|
83510
|
+
let text = '';
|
83511
|
+
let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
83512
|
+
for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
|
83513
|
+
let text2 = '';
|
83514
|
+
let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
83515
|
+
for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
|
83516
|
+
return text + text2;
|
83517
|
+
}
|
83518
|
+
getElmClass(elm) {
|
83519
|
+
let elmClassName = '';
|
83520
|
+
elm.classList.forEach(item => {
|
83521
|
+
if (item.includes('g-')) {
|
83522
|
+
elmClassName = item;
|
83523
|
+
}
|
83524
|
+
});
|
83525
|
+
if (elmClassName === '') {
|
83526
|
+
elmClassName = 'g-' + this.generateRandom();
|
83527
|
+
elm.classList.add(elmClassName);
|
83528
|
+
}
|
83529
|
+
return elmClassName;
|
83530
|
+
}
|
83531
|
+
readCss() {
|
83532
|
+
let css = '';
|
83533
|
+
const elms = this.doc.querySelectorAll(this.selector);
|
83534
|
+
elms.forEach(elm => {
|
83535
|
+
if (elm.classList.contains('clone')) return;
|
83536
|
+
const elmClassName = this.getElmClass(elm);
|
83537
|
+
const baseWidth = elm.getAttribute('data--w');
|
83538
|
+
const baseHeight = elm.getAttribute('data--h');
|
83539
|
+
const baseTop = elm.getAttribute('data--t');
|
83540
|
+
const baseLeft = elm.getAttribute('data--l');
|
83541
|
+
const baseBottom = elm.getAttribute('data--b');
|
83542
|
+
const baseRight = elm.getAttribute('data--r');
|
83543
|
+
const mediaQueries = [];
|
83544
|
+
let breakpoints = this.getBreakpoints(elm);
|
83545
|
+
breakpoints.sort(function (a, b) {
|
83546
|
+
return b - a;
|
83547
|
+
});
|
83548
|
+
for (let i = 0; i < breakpoints.length; i++) {
|
83549
|
+
const num = breakpoints[i];
|
83550
|
+
let s = '';
|
83551
|
+
const width = elm.getAttribute('data--w-' + num);
|
83552
|
+
if (width) s += `width: ${width};`;
|
83553
|
+
const height = elm.getAttribute('data--h-' + num);
|
83554
|
+
if (height) s += `height: ${height};`;
|
83555
|
+
const top = elm.getAttribute('data--t-' + num);
|
83556
|
+
if (top) s += `top: ${top};`;
|
83557
|
+
const left = elm.getAttribute('data--l-' + num);
|
83558
|
+
if (left) s += `left: ${left};`;
|
83559
|
+
const bottom = elm.getAttribute('data--b-' + num);
|
83560
|
+
if (bottom) s += `bottom: ${bottom};`;
|
83561
|
+
const right = elm.getAttribute('data--r-' + num);
|
83562
|
+
if (right) s += `right: ${right};`;
|
83563
|
+
mediaQueries.push(`@media (max-width: ${num}px) {
|
83564
|
+
.${elmClassName} {
|
83565
|
+
${s}
|
83566
|
+
}
|
83567
|
+
}`);
|
83568
|
+
}
|
83569
|
+
css += `
|
83570
|
+
.${elmClassName} {
|
83571
|
+
${baseWidth ? `width: ${baseWidth};` : ''}${baseHeight ? `height: ${baseHeight};` : ''}
|
83572
|
+
${baseTop ? `top: ${baseTop};` : ''}${baseBottom ? `bottom: ${baseBottom};` : ''}
|
83573
|
+
${baseLeft ? `left: ${baseLeft};` : ''}${baseRight ? `right: ${baseRight};` : ''}
|
83574
|
+
}
|
83575
|
+
${mediaQueries.join('\n')}
|
83576
|
+
`;
|
83577
|
+
});
|
83578
|
+
return css;
|
83579
|
+
}
|
83580
|
+
updateCss() {
|
83581
|
+
const css = this.readCss();
|
83582
|
+
localStorage.setItem('_cssblock', css);
|
83583
|
+
let cssBlock = this.doc.querySelector('#_cssBlock');
|
83584
|
+
if (!cssBlock) {
|
83585
|
+
this.doc.head.insertAdjacentHTML('beforeend', '<style id="_cssBlock"></style>');
|
83586
|
+
cssBlock = this.doc.querySelector('#_cssBlock');
|
83587
|
+
}
|
83588
|
+
if (cssBlock) {
|
83589
|
+
cssBlock.innerHTML = css; // apply css
|
83590
|
+
|
83591
|
+
// clear inline css
|
83592
|
+
const elms = this.doc.querySelectorAll(this.selector);
|
83593
|
+
elms.forEach(elm => {
|
83594
|
+
elm.style.width = '';
|
83595
|
+
elm.style.height = '';
|
83596
|
+
elm.style.top = '';
|
83597
|
+
elm.style.left = '';
|
83598
|
+
elm.style.bottom = '';
|
83599
|
+
elm.style.right = '';
|
83600
|
+
});
|
83601
|
+
}
|
83602
|
+
}
|
83467
83603
|
init() {
|
83604
|
+
// // load css
|
83605
|
+
// let css = localStorage.getItem('_cssblock');
|
83606
|
+
// let cssBlock = this.doc.querySelector('#_cssBlock');
|
83607
|
+
// if(!cssBlock) {
|
83608
|
+
// this.doc.head.insertAdjacentHTML('beforeend','<style id="_cssBlock"></style>');
|
83609
|
+
// cssBlock = this.doc.querySelector('#_cssBlock');
|
83610
|
+
// }
|
83611
|
+
// if(css) cssBlock.innerHTML = css;
|
83612
|
+
|
83468
83613
|
this.doc.body.classList.add('editableblocks');
|
83469
83614
|
this.draggable = new Draggable({
|
83470
83615
|
selector: this.selector,
|
@@ -83483,7 +83628,10 @@ class EditableBlocks {
|
|
83483
83628
|
},
|
83484
83629
|
onChange: () => {
|
83485
83630
|
if (this.onChange) this.onChange();
|
83631
|
+
|
83632
|
+
// this.updateCss();
|
83486
83633
|
},
|
83634
|
+
|
83487
83635
|
onMultipleSelect: this.onMultipleSelect,
|
83488
83636
|
onSelectStart: block => {
|
83489
83637
|
// for cloning
|
@@ -83506,8 +83654,11 @@ class EditableBlocks {
|
|
83506
83654
|
},
|
83507
83655
|
onChange: () => {
|
83508
83656
|
if (this.onChange) this.onChange();
|
83657
|
+
|
83658
|
+
// this.updateCss();
|
83509
83659
|
}
|
83510
83660
|
});
|
83661
|
+
|
83511
83662
|
if (this.rotate) {
|
83512
83663
|
this.rotatable = new Rotatable({
|
83513
83664
|
selector: this.selector,
|
@@ -84659,7 +84810,7 @@ class ContentBuilder {
|
|
84659
84810
|
// asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
|
84660
84811
|
customTags: [],
|
84661
84812
|
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'livepreview', 'aiassistant', 'snippets', 'more'],
|
84662
|
-
buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
|
84813
|
+
buttonsMore: ['icon', 'svg', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
|
84663
84814
|
elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'livepreview', 'aiassistant', 'snippets', 'more'],
|
84664
84815
|
elementButtonsMore: ['|', 'html', 'preferences'],
|
84665
84816
|
iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'livepreview', 'aiassistant', 'snippets', 'more'],
|