@innovastudio/contentbuilder 1.4.138 → 1.4.139
Sign up to get free protection for your applications and to get access to all the features.
@@ -702,11 +702,14 @@ class Util {
|
|
702
702
|
const cell = this.cellSelected();
|
703
703
|
let row;
|
704
704
|
if (!cell) {
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
705
|
+
let elm = this.builder.activeElement;
|
706
|
+
if (elm && elm.closest('.is-block')) ; else {
|
707
|
+
// If no active cell, check if it is from .row-add-initial (empty info)
|
708
|
+
row = this.builder.doc.querySelector('.row-active');
|
709
|
+
if (!row) return;else {
|
710
|
+
// Empty content will always use 'row' mode to insert block.
|
711
|
+
mode = 'row';
|
712
|
+
}
|
710
713
|
}
|
711
714
|
} else {
|
712
715
|
row = cell.parentNode;
|
@@ -1853,9 +1856,9 @@ class Util {
|
|
1853
1856
|
getUIStyles() {
|
1854
1857
|
const dom = this.dom;
|
1855
1858
|
const html = `
|
1856
|
-
<input type="text" class="style-helper-input" style="display:none;">
|
1859
|
+
<input type="text" class="style-helper-input" id="__style_helper_input" style="display:none;">
|
1857
1860
|
<button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
|
1858
|
-
<select class="style-helper-select" style="display:none;"><option value=""></option></select>
|
1861
|
+
<select class="style-helper-select" id="__style_helper_select" style="display:none;"><option value=""></option></select>
|
1859
1862
|
|
1860
1863
|
<div class="style-helper modal-color"></div>
|
1861
1864
|
<div class="style-helper modal-background"></div>
|
@@ -2172,12 +2175,12 @@ class Util {
|
|
2172
2175
|
<li role="option" tabindex="0" data-provider="" data-font-family="" style="font-size:12px;padding:10px 7px;box-sizing:border-box;"><div></div>
|
2173
2176
|
<span style="z-index:1;position: relative;pointer-events: none;">${this.out('None')}</span>
|
2174
2177
|
</li>
|
2175
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="Arial, sans-serif"><div></div><img src="${path}arial.png"></li>
|
2176
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="
|
2177
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="Georgia, serif"><div></div><img src="${path}georgia.png"></li>
|
2178
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="monospace"><div></div><img src="${path}monospace.png"></li>
|
2179
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="sans-serif"><div></div><img src="${path}sans_serif.png"></li>
|
2180
|
-
<li role="option" tabindex="0" data-provider="" data-font-family="serif"><div></div><img src="${path}serif.png"></li>
|
2178
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif"><div></div><img src="${path}arial.png"></li>
|
2179
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="'Nimbus Mono PS', 'Courier New', monospace"><div></div><img src="${path}courier.png"></li>
|
2180
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif"><div></div><img src="${path}georgia.png"></li>
|
2181
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"><div></div><img src="${path}monospace.png"></li>
|
2182
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="system-ui, sans-serif"><div></div><img src="${path}sans_serif.png"></li>
|
2183
|
+
<li role="option" tabindex="0" data-provider="" data-font-family="Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"><div></div><img src="${path}serif.png"></li>
|
2181
2184
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Abel, sans-serif"><div></div><img src="${path}abel.png"></li>
|
2182
2185
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Abril Fatface"><div></div><img src="${path}abril_fatface.png"></li>
|
2183
2186
|
<li role="option" tabindex="0" data-provider="google" data-font-family="Advent Pro, sans-serif" data-font-style="wght@100;200;300;400;500;600;700"><div></div><img src="${path}advent_pro.png"></li>
|
@@ -10210,7 +10213,7 @@ class HtmlUtil {
|
|
10210
10213
|
*/
|
10211
10214
|
const html = `<div class="is-modal viewhtml" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
10212
10215
|
<div class="is-modal-content">
|
10213
|
-
<textarea class="tabSupport" style="width:100%;height:calc(100% - 50px);border:none;margin:0;box-sizing:border-box;"></textarea>
|
10216
|
+
<textarea class="tabSupport" id="__tabsupport" style="width:100%;height:calc(100% - 50px);border:none;margin:0;box-sizing:border-box;"></textarea>
|
10214
10217
|
<div class="is-modal-footer" style="border-top:1px solid ${this.builder.styleSeparatorColor};width:100%;height:50px;position:absolute;left:0;bottom:0;overflow:hidden;text-align:right">
|
10215
10218
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
10216
10219
|
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
@@ -10220,7 +10223,7 @@ class HtmlUtil {
|
|
10220
10223
|
|
10221
10224
|
<div class="is-modal viewhtmlmonaco" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
10222
10225
|
<div class="is-modal-content" style="width:${this.builder.blockCodeEditorWidth};max-width:${this.builder.blockCodeEditorMaxWidth};padding:0">
|
10223
|
-
<textarea style="position:absolute;display:none;"></textarea>
|
10226
|
+
<textarea id="__viewhtmlmonaco" style="position:absolute;display:none;"></textarea>
|
10224
10227
|
<div class="input-code-editor" style="width:100%;height:${this.builder.blockCodeEditorHeight};"></div>
|
10225
10228
|
<div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
|
10226
10229
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
@@ -10231,7 +10234,7 @@ class HtmlUtil {
|
|
10231
10234
|
|
10232
10235
|
<div class="is-modal viewhtmlexternal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
10233
10236
|
<div class="is-modal-content" style="width:${this.builder.codeEditorWidth};max-width:${this.builder.codeEditorMaxWidth};padding:0">
|
10234
|
-
<div class="input-code-editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
|
10237
|
+
<div class="input-code-editor" id="__input_code_editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
|
10235
10238
|
<div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
|
10236
10239
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
10237
10240
|
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
@@ -11063,6 +11066,23 @@ class HtmlUtil {
|
|
11063
11066
|
dom$k.removeElements(elms);
|
11064
11067
|
elms = tmp.querySelectorAll('.is-section-info');
|
11065
11068
|
dom$k.removeElements(elms);
|
11069
|
+
|
11070
|
+
// freeform
|
11071
|
+
elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
|
11072
|
+
dom$k.removeElements(elms);
|
11073
|
+
elms = tmp.querySelectorAll('.is-block');
|
11074
|
+
Array.prototype.forEach.call(elms, elm => {
|
11075
|
+
dom$k.removeClass(elm, 'active');
|
11076
|
+
dom$k.removeClass(elm, 'multi');
|
11077
|
+
dom$k.removeClass(elm, 'editable');
|
11078
|
+
dom$k.removeClass(elm, 'fluid');
|
11079
|
+
dom$k.removeClass(elm, 'cloned');
|
11080
|
+
elm.removeAttribute('data-fluid-val');
|
11081
|
+
elm.removeAttribute('data-fluid');
|
11082
|
+
});
|
11083
|
+
tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
11084
|
+
// tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
|
11085
|
+
|
11066
11086
|
var html_content = '';
|
11067
11087
|
var html_footer = '';
|
11068
11088
|
var html_others = '';
|
@@ -11289,6 +11309,22 @@ class UndoRedo {
|
|
11289
11309
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
11290
11310
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
11291
11311
|
|
11312
|
+
// freeform
|
11313
|
+
elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
|
11314
|
+
dom.removeElements(elms);
|
11315
|
+
elms = tmp.querySelectorAll('.is-block');
|
11316
|
+
Array.prototype.forEach.call(elms, elm => {
|
11317
|
+
dom.removeClass(elm, 'active');
|
11318
|
+
dom.removeClass(elm, 'multi');
|
11319
|
+
dom.removeClass(elm, 'editable');
|
11320
|
+
dom.removeClass(elm, 'fluid');
|
11321
|
+
dom.removeClass(elm, 'cloned');
|
11322
|
+
elm.removeAttribute('data-fluid-val');
|
11323
|
+
elm.removeAttribute('data-fluid');
|
11324
|
+
});
|
11325
|
+
tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
11326
|
+
// tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
|
11327
|
+
|
11292
11328
|
//ContentBox
|
11293
11329
|
elms = tmp.querySelectorAll('.is-section-tool');
|
11294
11330
|
dom.removeElements(elms);
|
@@ -11885,6 +11921,20 @@ const prepareSvgIcons = builder => {
|
|
11885
11921
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 15h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 9h4" />
|
11886
11922
|
</symbol>
|
11887
11923
|
|
11924
|
+
|
11925
|
+
<symbol id="icon-stack-forward" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
11926
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l-8 4l8 4l8 -4l-8 -4" fill="currentColor" /><path d="M10 12l-6 3l8 4l8 -4l-6 -3" />
|
11927
|
+
</symbol>
|
11928
|
+
<symbol id="icon-stack-backward" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
11929
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 12l6 -3l-8 -4l-8 4l6 3" /><path d="M10 12l-6 3l8 4l8 -4l-6 -3l-2 1z" fill="currentColor" />
|
11930
|
+
</symbol>
|
11931
|
+
<symbol id="icon-arrow-down" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
11932
|
+
<path d="M12 5l0 14" /><path d="M18 13l-6 6" /><path d="M6 13l6 6" />
|
11933
|
+
</symbol>
|
11934
|
+
<symbol id="icon-arrow-up" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
11935
|
+
<path d="M12 5l0 14" /><path d="M18 11l-6 -6" /><path d="M6 11l6 -6" />
|
11936
|
+
</symbol>
|
11937
|
+
|
11888
11938
|
</defs>
|
11889
11939
|
</svg>`;
|
11890
11940
|
builder.dom.appendHtml(builder.builderStuff, html);
|
@@ -13398,9 +13448,10 @@ const renderQuickAdd = builder => {
|
|
13398
13448
|
const ifr = modal.querySelector('iframe');
|
13399
13449
|
var doc = ifr.contentWindow.document;
|
13400
13450
|
if (doc.body.innerHTML === '') {
|
13401
|
-
doc.open();
|
13402
|
-
doc.write(snippets.getSnippetsHtml());
|
13403
|
-
doc.close();
|
13451
|
+
// doc.open();
|
13452
|
+
// doc.write(snippets.getSnippetsHtml());
|
13453
|
+
// doc.close();
|
13454
|
+
ifr.srcdoc = snippets.getSnippetsHtml();
|
13404
13455
|
}
|
13405
13456
|
|
13406
13457
|
// quickadd.style.display = '';
|
@@ -18141,6 +18192,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
18141
18192
|
// let safariAgent = false;
|
18142
18193
|
|
18143
18194
|
let activeBuilderArea;
|
18195
|
+
let itemHeight;
|
18144
18196
|
new Sortable(snippetlist, {
|
18145
18197
|
// forceFallback: safariAgent,
|
18146
18198
|
group: {
|
@@ -18151,7 +18203,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
18151
18203
|
|
18152
18204
|
sort: false,
|
18153
18205
|
animation: 150,
|
18154
|
-
onChoose:
|
18206
|
+
onChoose: evt => {
|
18155
18207
|
// Adjust temmporary
|
18156
18208
|
const newCss = `
|
18157
18209
|
<style id="css-scale">
|
@@ -18163,6 +18215,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
18163
18215
|
}
|
18164
18216
|
</style>
|
18165
18217
|
`;
|
18218
|
+
itemHeight = evt.item.offsetHeight;
|
18166
18219
|
if (builder.iframe) {
|
18167
18220
|
const oldCss = builder.contentStuff.querySelector('#css-scale');
|
18168
18221
|
if (oldCss) oldCss.parentNode.removeChild(oldCss);
|
@@ -18174,6 +18227,16 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
18174
18227
|
}
|
18175
18228
|
builder.sectionDropSetup();
|
18176
18229
|
},
|
18230
|
+
onClone: evt => {
|
18231
|
+
// fix broken image on cloned element
|
18232
|
+
var cloneEl = evt.clone;
|
18233
|
+
let img = cloneEl.querySelector('img');
|
18234
|
+
img.style.opacity = 0.0001;
|
18235
|
+
cloneEl.style.height = itemHeight + 'px';
|
18236
|
+
let timestamp = new Date().getTime();
|
18237
|
+
img.src = img.src + '?' + timestamp;
|
18238
|
+
img.style.opacity = '';
|
18239
|
+
},
|
18177
18240
|
onMove: () => {
|
18178
18241
|
let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
|
18179
18242
|
// if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
|
@@ -18211,6 +18274,13 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
18211
18274
|
if (activeBuilderArea) {
|
18212
18275
|
dom.addClass(activeBuilderArea, 'builder-active');
|
18213
18276
|
}
|
18277
|
+
|
18278
|
+
// destroy
|
18279
|
+
if (builder.sortableOnCanvas) builder.sortableOnCanvas.forEach(obj => {
|
18280
|
+
if (obj) {
|
18281
|
+
obj.destroy();
|
18282
|
+
}
|
18283
|
+
});
|
18214
18284
|
if (builder.sortableOnPage) builder.sortableOnPage.destroy();
|
18215
18285
|
}
|
18216
18286
|
});
|
@@ -45567,10 +45637,10 @@ class Image$1 {
|
|
45567
45637
|
</div>
|
45568
45638
|
|
45569
45639
|
<label style="display:block;margin-top:14px;">
|
45570
|
-
<input class="input-newwindow" type="checkbox" /> ${util.out('Open new window')}
|
45640
|
+
<input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open new window')}
|
45571
45641
|
</label>
|
45572
45642
|
<label id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? 'display:block' : 'display:none'};margin-top:5px;margin-bottom:14px;">
|
45573
|
-
<input class="input-openlightbox" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
|
45643
|
+
<input class="input-openlightbox" id="__input_openlightbox2" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
|
45574
45644
|
</label>
|
45575
45645
|
|
45576
45646
|
<div style="text-align:right;margin-top:14px;">
|
@@ -48803,10 +48873,10 @@ class Hyperlink {
|
|
48803
48873
|
</div>
|
48804
48874
|
</div>
|
48805
48875
|
<label style="display:block;margin-top:14px;">
|
48806
|
-
<input class="input-newwindow" type="checkbox" /> ${util.out('Open new window')}
|
48876
|
+
<input class="input-newwindow" id="__input_newwindow" type="checkbox" /> ${util.out('Open new window')}
|
48807
48877
|
</label>
|
48808
48878
|
<label id="lblOpenLightbox" style="${this.builder.useLightbox ? 'display:block' : 'display:none'};margin-top:5px;margin-bottom:14px;">
|
48809
|
-
<input class="input-openlightbox" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
|
48879
|
+
<input class="input-openlightbox" id="__input_openlightbox" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
|
48810
48880
|
</label>
|
48811
48881
|
|
48812
48882
|
<label id="lblCreateLinkText" for="inpCreateLinkText" style="margin-top:14px;display:block">${util.out('Text')}:</label>
|
@@ -50091,6 +50161,8 @@ class Module {
|
|
50091
50161
|
});
|
50092
50162
|
*/
|
50093
50163
|
if (module.getAttribute('data-panel') === 'side' && this.builder.controlPanel) ; else {
|
50164
|
+
let iframe = moduleModal.querySelector('iframe');
|
50165
|
+
iframe.style.opacity = 0.001;
|
50094
50166
|
this.util.showModal(moduleModal, true, () => {
|
50095
50167
|
if (btn) {
|
50096
50168
|
btn.removeAttribute('data-focus');
|
@@ -50102,14 +50174,19 @@ class Module {
|
|
50102
50174
|
// var d = new Date();
|
50103
50175
|
// moduleModal.querySelector('iframe').src = this.builder.opts.modulePath + modulename + '.html?' + d.getTime(); //always refreshed
|
50104
50176
|
|
50105
|
-
let iframe = moduleModal.querySelector('iframe');
|
50106
50177
|
let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
|
50107
50178
|
result = await result.text();
|
50108
50179
|
result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
|
50109
|
-
|
50110
|
-
doc.
|
50111
|
-
doc.
|
50112
|
-
doc.
|
50180
|
+
|
50181
|
+
// let doc = iframe.contentWindow.document;
|
50182
|
+
// doc.open();
|
50183
|
+
// doc.write(result);
|
50184
|
+
// doc.close();
|
50185
|
+
|
50186
|
+
iframe.srcdoc = result;
|
50187
|
+
setTimeout(() => {
|
50188
|
+
iframe.style.opacity = '';
|
50189
|
+
}, 300);
|
50113
50190
|
}
|
50114
50191
|
}
|
50115
50192
|
click(col) {
|
@@ -50337,8 +50414,8 @@ class Iframe {
|
|
50337
50414
|
|
50338
50415
|
<div class="is-modal iframelink" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
50339
50416
|
<div class="is-modal-content">
|
50340
|
-
<input class="input-src" type="text" placeholder="Source" style="width:100%;margin-bottom:12px;"/>
|
50341
|
-
<textarea class="input-embedcode" type="text" placeholder="Embed Code" style="width:100%;height:300px;margin-bottom:12px;display:none;"></textarea>
|
50417
|
+
<input class="input-src" id="__iframelink_input_src" type="text" placeholder="Source" style="width:100%;margin-bottom:12px;"/>
|
50418
|
+
<textarea class="input-embedcode" id="__iframelink_input_embedcode" type="text" placeholder="Embed Code" style="width:100%;height:300px;margin-bottom:12px;display:none;"></textarea>
|
50342
50419
|
<div style="text-align:right">
|
50343
50420
|
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
50344
50421
|
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
@@ -51047,13 +51124,13 @@ class Video {
|
|
51047
51124
|
</div>
|
51048
51125
|
|
51049
51126
|
<label style="display:block;margin-top:14px;">
|
51050
|
-
<input class="input-video-controls" type="checkbox" /> ${util.out('Show Controls')}
|
51127
|
+
<input class="input-video-controls" id="__input_video_controls" type="checkbox" /> ${util.out('Show Controls')}
|
51051
51128
|
</label>
|
51052
51129
|
<label style="display:block;margin-top:5px;">
|
51053
|
-
<input class="input-video-loop" type="checkbox" /> ${util.out('Loop')}
|
51130
|
+
<input class="input-video-loop" id="__input_video_loop" type="checkbox" /> ${util.out('Loop')}
|
51054
51131
|
</label>
|
51055
51132
|
<label style="display:block;margin-top:5px;">
|
51056
|
-
<input class="input-video-autoplay" type="checkbox" /> ${util.out('Autoplay')}
|
51133
|
+
<input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" /> ${util.out('Autoplay')}
|
51057
51134
|
</label>
|
51058
51135
|
|
51059
51136
|
<div style="text-align:right;margin-top:14px;">
|
@@ -51887,7 +51964,7 @@ class ColorPicker {
|
|
51887
51964
|
</div>
|
51888
51965
|
<button class="is-color-preview" tabindex="0" style="outline:none;cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;transition:none;"></button>
|
51889
51966
|
</div>
|
51890
|
-
<input class="input-text" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
|
51967
|
+
<input class="input-text" id="{id}" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
|
51891
51968
|
<button title="${this.out('Apply')}" class="input-ok" style="height:35px;margin-top:8px;"><svg class="is-icon-flex"><use xlink:href="#icon-ok"></use></svg></use></svg></svg></button>
|
51892
51969
|
</div>
|
51893
51970
|
</div>`;
|
@@ -51918,7 +51995,7 @@ class ColorPicker {
|
|
51918
51995
|
</div>
|
51919
51996
|
<button class="is-color-preview" tabindex="0" style="outline:none;cursor:default;position:absolute;top:0;left:0;width:100%;height:100%;transition:none;"></button>
|
51920
51997
|
</div>
|
51921
|
-
<input class="input-text" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
|
51998
|
+
<input class="input-text" id="{id}" type="text" style="width:209px;height:35px;margin-top:8px;font-size:13px;"/>
|
51922
51999
|
<button title="${this.out('Apply')}" class="input-ok" style="height:35px;margin-top:8px;"><svg class="is-icon-flex"><use xlink:href="#icon-ok"></use></svg></use></svg></svg></button>
|
51923
52000
|
</div>
|
51924
52001
|
|
@@ -51942,9 +52019,9 @@ class ColorPicker {
|
|
51942
52019
|
let pickcolor;
|
51943
52020
|
if (this.opts.renderOn !== '') {
|
51944
52021
|
pickcolor = document.querySelector(this.opts.renderOn);
|
51945
|
-
pickcolor.insertAdjacentHTML('beforeend', html);
|
52022
|
+
pickcolor.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
|
51946
52023
|
} else {
|
51947
|
-
objStuff.insertAdjacentHTML('beforeend', html_modal);
|
52024
|
+
objStuff.insertAdjacentHTML('beforeend', html_modal.replace(/{id}/g, this.makeId()));
|
51948
52025
|
pickcolor = objStuff.querySelector('.is-modal.pickcolor');
|
51949
52026
|
}
|
51950
52027
|
objStuff.insertAdjacentHTML('beforeend', html_more);
|
@@ -52223,6 +52300,15 @@ class ColorPicker {
|
|
52223
52300
|
});
|
52224
52301
|
} //constructor
|
52225
52302
|
|
52303
|
+
makeId() {
|
52304
|
+
let text = '';
|
52305
|
+
let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
52306
|
+
for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
|
52307
|
+
let text2 = '';
|
52308
|
+
let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
52309
|
+
for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
|
52310
|
+
return text + text2;
|
52311
|
+
}
|
52226
52312
|
out(s) {
|
52227
52313
|
if (this.opts.lang) {
|
52228
52314
|
let val = this.opts.lang[s];
|
@@ -52794,7 +52880,7 @@ class GradientPicker {
|
|
52794
52880
|
<div>
|
52795
52881
|
<button title="${this.out('Select Color')}" class="input-gradient-color1 is-btn-color" data-value="dark" style="border-right:none"></button>
|
52796
52882
|
<button title="${this.out('Select Color')}" class="input-gradient-color2 is-btn-color" data-value="dark"></button>
|
52797
|
-
<input type="text" class="input-gradient-deg" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
|
52883
|
+
<input type="text" class="input-gradient-deg" id="{id}" value="0" style="width:60px;height:35px;margin-left:7px;margin-right:5px;font-size:14px;"/> deg
|
52798
52884
|
</div>
|
52799
52885
|
</div>
|
52800
52886
|
<div class="is-settings" style="margin-bottom:0">
|
@@ -52804,7 +52890,7 @@ class GradientPicker {
|
|
52804
52890
|
</div>
|
52805
52891
|
</div>
|
52806
52892
|
`;
|
52807
|
-
objStuff.insertAdjacentHTML('beforeend', html);
|
52893
|
+
objStuff.insertAdjacentHTML('beforeend', html.replace(/{id}/g, this.makeId()));
|
52808
52894
|
const pickGradient = objStuff.querySelector('.is-modal.pickgradientcolor');
|
52809
52895
|
this.pickGradient = pickGradient;
|
52810
52896
|
const setupTabKeys = div => {
|
@@ -53032,6 +53118,15 @@ class GradientPicker {
|
|
53032
53118
|
});
|
53033
53119
|
} //constructor
|
53034
53120
|
|
53121
|
+
makeId() {
|
53122
|
+
let text = '';
|
53123
|
+
let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
53124
|
+
for (let i = 0; i < 2; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
|
53125
|
+
let text2 = '';
|
53126
|
+
let possible2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
53127
|
+
for (let i = 0; i < 5; i++) text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));
|
53128
|
+
return text + text2;
|
53129
|
+
}
|
53035
53130
|
out(s) {
|
53036
53131
|
if (this.opts.lang) {
|
53037
53132
|
let val = this.opts.lang[s];
|
@@ -53463,9 +53558,7 @@ class RowTool {
|
|
53463
53558
|
<div class="div-colsperline" style="flex-direction:column">
|
53464
53559
|
<label style="margin:20px 0 0;display:flex;flex-direction:column">
|
53465
53560
|
<span style="margin:0 4px 3px 0">${util.out('Columns per Line')}:</span>
|
53466
|
-
|
53467
|
-
|
53468
|
-
<select class="input-numofcols" style="width:50%;display:none">
|
53561
|
+
<select class="input-numofcols" id="__input_numofcols" style="width:50%;display:none">
|
53469
53562
|
<option value="">Default</option>
|
53470
53563
|
<option value="2">2 columns per row</option>
|
53471
53564
|
<option value="3">3 columns per row</option>
|
@@ -60121,14 +60214,21 @@ class ElementTextStyles {
|
|
60121
60214
|
});
|
60122
60215
|
if (!this.builder.renderIframeLater) {
|
60123
60216
|
let iframe = fontModal.querySelector('iframe');
|
60124
|
-
|
60125
|
-
doc.
|
60217
|
+
|
60218
|
+
// let doc = iframe.contentWindow.document;
|
60219
|
+
// doc.open();
|
60220
|
+
// if(!this.builder.opts.emailMode) {
|
60221
|
+
// doc.write(this.util.getFontFamilyHTML(true));
|
60222
|
+
// } else {
|
60223
|
+
// doc.write(this.util.getFontFamilyEmail(true));
|
60224
|
+
// }
|
60225
|
+
// doc.close();
|
60226
|
+
|
60126
60227
|
if (!this.builder.opts.emailMode) {
|
60127
|
-
|
60228
|
+
iframe.srcdoc = this.util.getFontFamilyHTML(true);
|
60128
60229
|
} else {
|
60129
|
-
|
60230
|
+
iframe.srcdoc = this.util.getFontFamilyEmail(true);
|
60130
60231
|
}
|
60131
|
-
doc.close();
|
60132
60232
|
}
|
60133
60233
|
let btn = panelStuff.querySelector('.input-elm-fontfamily');
|
60134
60234
|
btn.addEventListener('click', () => {
|
@@ -63066,7 +63166,7 @@ class Preferences {
|
|
63066
63166
|
this.dom = dom;
|
63067
63167
|
let htmlThemes = '';
|
63068
63168
|
if (this.builder.themes) {
|
63069
|
-
htmlThemes = '<div class="div-themes">';
|
63169
|
+
htmlThemes = '<div class="div-themes" style="margin-top:3px">';
|
63070
63170
|
let n = 0;
|
63071
63171
|
this.builder.themes.forEach(item => {
|
63072
63172
|
if (item[1] === '') {
|
@@ -63090,7 +63190,7 @@ class Preferences {
|
|
63090
63190
|
<div style="width:50%">
|
63091
63191
|
<label id="divBuilderMode" style="display:block;margin-top:10px;margin-bottom:5px;">
|
63092
63192
|
${util.out('Builder Mode')}:
|
63093
|
-
<select class="select-buildermode">
|
63193
|
+
<select class="select-buildermode" id="__select_builderode">
|
63094
63194
|
<option value="">${util.out('Default')}</option>
|
63095
63195
|
<option value="minimal">${util.out('Minimal')}</option>
|
63096
63196
|
<option value="clean">${util.out('Clean')}</option>
|
@@ -63099,7 +63199,7 @@ class Preferences {
|
|
63099
63199
|
|
63100
63200
|
<label id="divOutlineMode" style="display:block;margin-top:10px;margin-bottom:5px;">
|
63101
63201
|
${util.out('Outline Mode')}:
|
63102
|
-
<select class="select-outlinemode">
|
63202
|
+
<select class="select-outlinemode" id="__select_outlinemode">
|
63103
63203
|
<option value="">${util.out('Row & column')}</option>
|
63104
63204
|
<option value="row">${util.out('Row only')}</option>
|
63105
63205
|
</select>
|
@@ -63107,35 +63207,35 @@ class Preferences {
|
|
63107
63207
|
|
63108
63208
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63109
63209
|
${util.out('Outline Style')}:
|
63110
|
-
<select class="select-outlinestyle"
|
63210
|
+
<select class="select-outlinestyle" id="__select_outlinestyle">>
|
63111
63211
|
<option value="">${util.out('Colored')}</option>
|
63112
63212
|
<option value="grayoutline">${util.out('Gray')}</option>
|
63113
63213
|
</select>
|
63114
63214
|
</label>
|
63115
63215
|
|
63116
63216
|
<label style="display:block;margin-top:10px;margin-bottom:10px;">
|
63117
|
-
<input class="input-hiderowcoloutline" type="checkbox" /> ${util.out('Hide Outline')}
|
63217
|
+
<input class="input-hiderowcoloutline" id="__input_hiderowcoloutline" type="checkbox" /> ${util.out('Hide Outline')}
|
63118
63218
|
</label>
|
63119
63219
|
|
63120
63220
|
<label id="divHideCellTool" style="display:block;margin-top:10px;margin-bottom:10px;">
|
63121
|
-
<input class="input-hidecelltool" type="checkbox" /> ${util.out('Hide Column Tool')}
|
63221
|
+
<input class="input-hidecelltool" id="__input_hidecelltool" type="checkbox" /> ${util.out('Hide Column Tool')}
|
63122
63222
|
</label>
|
63123
63223
|
|
63124
63224
|
|
63125
63225
|
<label style="display:block;margin-top:10px;margin-bottom:10px;">
|
63126
|
-
<input class="input-hidesnippetaddtool" type="checkbox" /> ${util.out('Hide Snippet (+) Tool')}
|
63226
|
+
<input class="input-hidesnippetaddtool" id="__input_hidesnippetaddtool" type="checkbox" /> ${util.out('Hide Snippet (+) Tool')}
|
63127
63227
|
</label>
|
63128
63228
|
|
63129
63229
|
<label style="display:block;margin-top:10px;margin-bottom:10px;">
|
63130
|
-
<input class="input-hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}
|
63230
|
+
<input class="input-hideelementtool" id="__input_hideelementtool" type="checkbox" /> ${util.out('Hide element tool')}
|
63131
63231
|
</label>
|
63132
63232
|
|
63133
63233
|
<label style="display:block;margin-top:10px;margin-bottom:10px;">
|
63134
|
-
<input class="input-hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}
|
63234
|
+
<input class="input-hideelementhighlight" id="__input_hideelementhighlight" type="checkbox" /> ${util.out('Hide element highlight')}
|
63135
63235
|
</label>
|
63136
63236
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63137
63237
|
${util.out('Row Tool Position')}:
|
63138
|
-
<select class="select-rowtool">
|
63238
|
+
<select class="select-rowtool" id="__select_rowtool">
|
63139
63239
|
<option value="right">${util.out('Right')}</option>
|
63140
63240
|
<option value="left">${util.out('Left')}</option>
|
63141
63241
|
</select>
|
@@ -63143,7 +63243,7 @@ class Preferences {
|
|
63143
63243
|
|
63144
63244
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63145
63245
|
${util.out('Tool Style')}:
|
63146
|
-
<select class="select-toolstyle">
|
63246
|
+
<select class="select-toolstyle" id="__select_toolstyle">
|
63147
63247
|
<option value="">${util.out('Colored')}</option>
|
63148
63248
|
<option value="gray">${util.out('Mono')}</option>
|
63149
63249
|
</select>
|
@@ -63153,12 +63253,12 @@ class Preferences {
|
|
63153
63253
|
<div style="width:50%">
|
63154
63254
|
|
63155
63255
|
<label class="option-opensnippets" style="display:block;margin-top:10px;margin-bottom:10px;">
|
63156
|
-
<input class="input-opensnippets" type="checkbox" /> ${util.out('Open snippets sidebar on start')}
|
63256
|
+
<input class="input-opensnippets" id="__input_opensnippets" type="checkbox" /> ${util.out('Open snippets sidebar on start')}
|
63157
63257
|
</label>
|
63158
63258
|
|
63159
63259
|
<label style="display:${builder.opts.snippetList === '#divSnippetList' ? 'block' : 'none'};margin-top:10px;margin-bottom:5px;">
|
63160
63260
|
${util.out('Snippets sidebar visibility')}:
|
63161
|
-
<select class="select-snippetssidebardisplay">
|
63261
|
+
<select class="select-snippetssidebardisplay" id="__select_snippetssidebardisplay">
|
63162
63262
|
<option value="auto">${util.out('Auto')}</option>
|
63163
63263
|
<option value="always">${util.out('Always Visible')}</option>
|
63164
63264
|
</select>
|
@@ -63166,7 +63266,7 @@ class Preferences {
|
|
63166
63266
|
|
63167
63267
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63168
63268
|
${util.out('Toolbar visibility')}:
|
63169
|
-
<select class="select-editingtoolbardisplay">
|
63269
|
+
<select class="select-editingtoolbardisplay" id="__select_editingtoolbardisplay">
|
63170
63270
|
<option value="auto">${util.out('Auto')}</option>
|
63171
63271
|
<option value="always">${util.out('Always Visible')}</option>
|
63172
63272
|
</select>
|
@@ -63174,7 +63274,7 @@ class Preferences {
|
|
63174
63274
|
|
63175
63275
|
<label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
|
63176
63276
|
${util.out('Toolbar position')}:
|
63177
|
-
<select class="select-editingtoolbar">
|
63277
|
+
<select class="select-editingtoolbar" id="__select_editingtoolbar">
|
63178
63278
|
<option value="topfull">${util.out('Top (Full Width)')}</option>
|
63179
63279
|
<option value="top">${util.out('Top')}</option>
|
63180
63280
|
<option value="left">${util.out('Left')}</option>
|
@@ -63184,7 +63284,7 @@ class Preferences {
|
|
63184
63284
|
|
63185
63285
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63186
63286
|
${util.out('Paste result')}:
|
63187
|
-
<select class="select-pasteresult">
|
63287
|
+
<select class="select-pasteresult" id="__select_pasteresult">
|
63188
63288
|
<option value="html-without-styles">${util.out('HTML (without styles)')}</option>
|
63189
63289
|
<option value="html">${util.out('HTML (with styles)')}</option>
|
63190
63290
|
<option value="text">${util.out('Text only')}</option>
|
@@ -63193,7 +63293,7 @@ class Preferences {
|
|
63193
63293
|
|
63194
63294
|
<label style="display:block;margin-top:10px;margin-bottom:5px;">
|
63195
63295
|
${util.out('HTML View')}:
|
63196
|
-
<select class="select-htmlview">
|
63296
|
+
<select class="select-htmlview" id="__select_htmlview">
|
63197
63297
|
<option value="shorten">${util.out('Shorten HTML')}</option>
|
63198
63298
|
<option value="actual">${util.out('Actual')}</option>
|
63199
63299
|
</select>
|
@@ -63202,8 +63302,8 @@ class Preferences {
|
|
63202
63302
|
${this.builder.themes ? `
|
63203
63303
|
<label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
|
63204
63304
|
${util.out('Theme')}:
|
63305
|
+
${htmlThemes}
|
63205
63306
|
</label>
|
63206
|
-
${htmlThemes}
|
63207
63307
|
` : ''}
|
63208
63308
|
|
63209
63309
|
</div>
|
@@ -64856,14 +64956,19 @@ class Rte {
|
|
64856
64956
|
// See preferences.js 284, contentbuilder.js 1800
|
64857
64957
|
if (!this.builder.renderIframeLater) {
|
64858
64958
|
let iframe = rteFontFamilyOptions.querySelector('iframe');
|
64859
|
-
let doc = iframe.contentWindow.document;
|
64860
|
-
doc.open();
|
64959
|
+
// let doc = iframe.contentWindow.document;
|
64960
|
+
// doc.open();
|
64961
|
+
// if(!this.builder.opts.emailMode) {
|
64962
|
+
// doc.write(util.getFontFamilyHTML());
|
64963
|
+
// } else {
|
64964
|
+
// doc.write(util.getFontFamilyEmail());
|
64965
|
+
// }
|
64966
|
+
// doc.close();
|
64861
64967
|
if (!this.builder.opts.emailMode) {
|
64862
|
-
|
64968
|
+
iframe.srcdoc = util.getFontFamilyHTML();
|
64863
64969
|
} else {
|
64864
|
-
|
64970
|
+
iframe.srcdoc = util.getFontFamilyEmail();
|
64865
64971
|
}
|
64866
|
-
doc.close();
|
64867
64972
|
}
|
64868
64973
|
let btnRteFontFamily = builderStuff.querySelectorAll('button.rte-fontfamily');
|
64869
64974
|
btnRteFontFamily.forEach(btn => {
|
@@ -69303,7 +69408,18 @@ class Rte {
|
|
69303
69408
|
}
|
69304
69409
|
const viewportWidth = document.body.clientWidth; //window.innerWidth;
|
69305
69410
|
const viewportHeight = window.innerHeight;
|
69306
|
-
if (this.builder.opts.toolbar === '
|
69411
|
+
if (this.builder.opts.toolbar === 'right') {
|
69412
|
+
let h = this.rteTool.offsetHeight;
|
69413
|
+
let top = viewportHeight / 2 - h / 2;
|
69414
|
+
this.rteTool.style.left = '';
|
69415
|
+
this.rteTool.style.top = top + 'px';
|
69416
|
+
|
69417
|
+
// Element Toolbar
|
69418
|
+
h = this.elementRteTool.offsetHeight;
|
69419
|
+
top = viewportHeight / 2 - h / 2;
|
69420
|
+
this.elementRteTool.style.left = '';
|
69421
|
+
this.elementRteTool.style.top = top + 'px';
|
69422
|
+
} else if (this.builder.opts.toolbar === 'left') {
|
69307
69423
|
let h = this.rteTool.offsetHeight;
|
69308
69424
|
let top = viewportHeight / 2 - h / 2;
|
69309
69425
|
this.rteTool.style.left = leftSidebarAdj2 + 'px';
|
@@ -71487,12 +71603,12 @@ class ContentStuff {
|
|
71487
71603
|
}
|
71488
71604
|
}
|
71489
71605
|
|
71490
|
-
|
71606
|
+
/*
|
71491
71607
|
@media (min-width: 640px) {
|
71492
71608
|
.is-builder > div {
|
71493
71609
|
display:flex
|
71494
71610
|
}
|
71495
|
-
}
|
71611
|
+
}*/
|
71496
71612
|
|
71497
71613
|
/* sortable */
|
71498
71614
|
.sortable-drag {
|
@@ -71525,6 +71641,16 @@ class ContentStuff {
|
|
71525
71641
|
transform-origin: top left;
|
71526
71642
|
}
|
71527
71643
|
|
71644
|
+
/* Canvas Mode */
|
71645
|
+
.box-canvas > .sortable-ghost {
|
71646
|
+
background: transparent;
|
71647
|
+
outline: rgba(140, 140, 140, 0.5) 4px dashed !important;
|
71648
|
+
outline-offset: -15px;
|
71649
|
+
height:100% !important;
|
71650
|
+
transition: none !important;
|
71651
|
+
z-index:1;
|
71652
|
+
}
|
71653
|
+
|
71528
71654
|
/* Moveable (Image resizer) */
|
71529
71655
|
.moveable-control {
|
71530
71656
|
border: none !important;
|
@@ -73069,10 +73195,14 @@ class LivePreview {
|
|
73069
73195
|
let maxw = window.getComputedStyle(doc.querySelector('.is-builder')).getPropertyValue('max-width');
|
73070
73196
|
if (!isNaN(parseInt(maxw))) maxwidth = maxw;
|
73071
73197
|
let content = this.builder.html();
|
73072
|
-
|
73073
|
-
|
73074
|
-
doc
|
73075
|
-
doc.
|
73198
|
+
let html = '<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet">' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>';
|
73199
|
+
|
73200
|
+
// doc = iframe.contentWindow.document;
|
73201
|
+
// doc.open();
|
73202
|
+
// doc.write(html);
|
73203
|
+
// doc.close();
|
73204
|
+
|
73205
|
+
iframe.srcdoc = html;
|
73076
73206
|
}
|
73077
73207
|
}
|
73078
73208
|
|
@@ -74234,7 +74364,7 @@ class Dictation {
|
|
74234
74364
|
<button class="scope-image" title="${util.out('Image')}" data-value="image" style="display:none;margin-right:5px">${util.out('Image')}</button>
|
74235
74365
|
</div>
|
74236
74366
|
</div>
|
74237
|
-
<textarea class="inp-command"></textarea>
|
74367
|
+
<textarea class="inp-command" id="__inp_command"></textarea>
|
74238
74368
|
<div style="display:flex;">
|
74239
74369
|
<button title="${util.out('Settings')}" class="cmd-command-config classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
|
74240
74370
|
<svg class="is-icon-flex" style="width:15px;height:15px;flex:none;"><use xlink:href="#icon-settings"></use></svg>
|
@@ -74297,7 +74427,7 @@ class Dictation {
|
|
74297
74427
|
|
74298
74428
|
<label class="label-input-autosend-command" style="margin:18px 0 0 0;display:flex;align-items:center;letter-spacing:0">
|
74299
74429
|
<span>${util.out('Auto send command delay')}</soan>:
|
74300
|
-
<input class="input-autosend-delay" style="width:60px;text-align:center;padding-left:0;height:33px;margin-right:3px;" type="text" value="4000"> <span>ms</span>
|
74430
|
+
<input class="input-autosend-delay" id="__input_autosend_delay" style="width:60px;text-align:center;padding-left:0;height:33px;margin-right:3px;" type="text" value="4000"> <span>ms</span>
|
74301
74431
|
</label>
|
74302
74432
|
|
74303
74433
|
<div class="command-settings-info" style="display:none"></div>
|
@@ -74305,7 +74435,7 @@ class Dictation {
|
|
74305
74435
|
<label class="label-input-command-lang" style="display:none;flex-direction:column;letter-spacing:0;margin:18px 0 0 0;">
|
74306
74436
|
<span>${util.out('Language')}:</span>
|
74307
74437
|
<div style="display:flex; align-items: baseline;flex-direction: row;">
|
74308
|
-
<input class="input-command-lang" style="width:70px;text-align:center;padding-left:0;height:33px;margin-top:5px;margin-right:10px" type="text" value="en-us">
|
74438
|
+
<input class="input-command-lang" id="__input_command_lang" style="width:70px;text-align:center;padding-left:0;height:33px;margin-top:5px;margin-right:10px" type="text" value="en-us">
|
74309
74439
|
<span>(${util.out('BCP-47 format')})</span>
|
74310
74440
|
</div>
|
74311
74441
|
</label>
|
@@ -76459,7 +76589,7 @@ class ContentBuilder {
|
|
76459
76589
|
let rowClicked;
|
76460
76590
|
if (target.parentNode && target.parentNode.classList) rowClicked = target.parentNode.classList.contains('is-builder');
|
76461
76591
|
let containerClicked = target.classList.contains('is-builder');
|
76462
|
-
let a = target.closest('.is-builder');
|
76592
|
+
let a = target.closest('.is-builder') || target.closest('.is-block'); // freeform
|
76463
76593
|
let p = target.closest('.is-subblock');
|
76464
76594
|
let b = target.closest('.is-modal') || target.closest('.keep-selection');
|
76465
76595
|
let c = target.closest('.is-side') || target.closest('.is-sidebar');
|
@@ -77058,7 +77188,8 @@ class ContentBuilder {
|
|
77058
77188
|
if (oldCss) oldCss.parentNode.removeChild(oldCss);
|
77059
77189
|
this.builderStuff.insertAdjacentHTML('afterbegin', newCss);
|
77060
77190
|
}
|
77061
|
-
|
77191
|
+
|
77192
|
+
// this.sectionDropSetup(); // enable drop as section (ContentBox)
|
77062
77193
|
},
|
77063
77194
|
|
77064
77195
|
onStart: () => {
|
@@ -77069,7 +77200,7 @@ class ContentBuilder {
|
|
77069
77200
|
onEnd: () => {
|
77070
77201
|
this.util.checkEmpty(); // for multiple instances check
|
77071
77202
|
|
77072
|
-
if
|
77203
|
+
// if(this.sortableOnPage) this.sortableOnPage.destroy(); // enable drop as section (ContentBox)
|
77073
77204
|
|
77074
77205
|
if (this.controlPanel) {
|
77075
77206
|
// && document.body.classList.contains('controlpanel') (already opens)
|
@@ -77198,9 +77329,17 @@ class ContentBuilder {
|
|
77198
77329
|
|
77199
77330
|
// Hide element tool
|
77200
77331
|
this.elmTool.hide();
|
77332
|
+
if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
|
77333
|
+
if (obj) {
|
77334
|
+
obj.destroy();
|
77335
|
+
}
|
77336
|
+
});
|
77337
|
+
|
77338
|
+
// if(this.sortableOnPage) this.sortableOnPage.destroy();
|
77201
77339
|
}
|
77202
77340
|
}
|
77203
77341
|
});
|
77342
|
+
|
77204
77343
|
this.sortableObjects.push(sortableObject);
|
77205
77344
|
builder.setAttribute('data-sort', true);
|
77206
77345
|
}
|
@@ -78380,7 +78519,7 @@ class ContentBuilder {
|
|
78380
78519
|
//backward
|
78381
78520
|
this.loadHtml(html);
|
78382
78521
|
}
|
78383
|
-
setUIColor(mode, csslink) {
|
78522
|
+
async setUIColor(mode, csslink) {
|
78384
78523
|
// Get previous css
|
78385
78524
|
let cssLink = document.querySelector('[data-cb-color]');
|
78386
78525
|
if (cssLink) cssLink.setAttribute('data-cb-del', '');
|
@@ -78463,13 +78602,18 @@ class ContentBuilder {
|
|
78463
78602
|
|
78464
78603
|
// if(this.opts.onThemeChange) this.opts.onThemeChange();
|
78465
78604
|
|
78466
|
-
|
78467
|
-
|
78468
|
-
|
78469
|
-
|
78470
|
-
|
78605
|
+
await this.delay(1000);
|
78606
|
+
// setTimeout(()=>{
|
78607
|
+
util.getUIStyles();
|
78608
|
+
this.setUIColorRefresh();
|
78609
|
+
if (this.opts.onThemeChange) this.opts.onThemeChange();
|
78610
|
+
// }, 1000);
|
78471
78611
|
}
|
78472
78612
|
}
|
78613
|
+
|
78614
|
+
async delay(ms) {
|
78615
|
+
return new Promise(resolve => setTimeout(resolve, ms));
|
78616
|
+
}
|
78473
78617
|
setUIColorRefresh() {
|
78474
78618
|
// All related with iframe style
|
78475
78619
|
|
@@ -78491,13 +78635,18 @@ class ContentBuilder {
|
|
78491
78635
|
let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
|
78492
78636
|
let doc3 = iframeIcons.contentWindow.document;
|
78493
78637
|
if (doc1.body.innerHTML === '') {
|
78494
|
-
doc1.open();
|
78638
|
+
// doc1.open();
|
78639
|
+
// if(!this.opts.emailMode) {
|
78640
|
+
// doc1.write(util.getFontFamilyHTML());
|
78641
|
+
// } else {
|
78642
|
+
// doc1.write(util.getFontFamilyEmail());
|
78643
|
+
// }
|
78644
|
+
// doc1.close();
|
78495
78645
|
if (!this.opts.emailMode) {
|
78496
|
-
|
78646
|
+
iframeRte.srcdoc = util.getFontFamilyHTML();
|
78497
78647
|
} else {
|
78498
|
-
|
78648
|
+
iframeRte.srcdoc = util.getFontFamilyEmail();
|
78499
78649
|
}
|
78500
|
-
doc1.close();
|
78501
78650
|
} else {
|
78502
78651
|
this.util.refreshFontFamilyStyle1();
|
78503
78652
|
}
|
@@ -78506,21 +78655,27 @@ class ContentBuilder {
|
|
78506
78655
|
let iframePanel = fontModal.querySelector('iframe');
|
78507
78656
|
let doc2 = iframePanel.contentWindow.document;
|
78508
78657
|
if (doc2.body.innerHTML === '') {
|
78509
|
-
doc2.open();
|
78658
|
+
// doc2.open();
|
78659
|
+
// if(!this.opts.emailMode) {
|
78660
|
+
// doc2.write(util.getFontFamilyHTML(true));
|
78661
|
+
// } else {
|
78662
|
+
// doc2.write(util.getFontFamilyEmail(true));
|
78663
|
+
// }
|
78664
|
+
// doc2.close();
|
78510
78665
|
if (!this.opts.emailMode) {
|
78511
|
-
|
78666
|
+
iframePanel.srcdoc = util.getFontFamilyHTML(true);
|
78512
78667
|
} else {
|
78513
|
-
|
78668
|
+
iframePanel.srcdoc = util.getFontFamilyEmail(true);
|
78514
78669
|
}
|
78515
|
-
doc2.close();
|
78516
78670
|
} else {
|
78517
78671
|
this.util.refreshFontFamilyStyle2();
|
78518
78672
|
}
|
78519
78673
|
}
|
78520
78674
|
if (doc3.body.innerHTML === '') {
|
78521
|
-
doc3.open();
|
78522
|
-
doc3.write(this.rte.getIconsHTML());
|
78523
|
-
doc3.close();
|
78675
|
+
// doc3.open();
|
78676
|
+
// doc3.write(this.rte.getIconsHTML());
|
78677
|
+
// doc3.close();
|
78678
|
+
iframeIcons.srcdoc = this.rte.getIconsHTML();
|
78524
78679
|
} else {
|
78525
78680
|
this.rte.refreshIconsStyle();
|
78526
78681
|
}
|
@@ -79825,6 +79980,164 @@ class ContentBuilder {
|
|
79825
79980
|
if (this.page) {
|
79826
79981
|
if (this.page !== '.is-wrapper') return; // only for ContentBox
|
79827
79982
|
const wrapper = this.doc.querySelector(this.page);
|
79983
|
+
this.sortableOnCanvas = [];
|
79984
|
+
const sections = wrapper.querySelectorAll('.is-box.box-canvas');
|
79985
|
+
sections.forEach(section => {
|
79986
|
+
const obj = new Sortable(section, {
|
79987
|
+
scroll: true,
|
79988
|
+
group: 'shared',
|
79989
|
+
direction: 'horizontal',
|
79990
|
+
animation: 150,
|
79991
|
+
sort: true,
|
79992
|
+
onAdd: evt => {
|
79993
|
+
let itemEl = evt.item;
|
79994
|
+
if (itemEl.getAttribute('data-id')) {
|
79995
|
+
// If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
|
79996
|
+
|
79997
|
+
let snippetid = itemEl.getAttribute('data-id');
|
79998
|
+
let lastBlock;
|
79999
|
+
let elements = Array.from(section.querySelectorAll('.is-block')).filter(elm => !elm.parentNode.classList.contains('is-block')); // exclude child blocks
|
80000
|
+
if (elements.length > 0) {
|
80001
|
+
lastBlock = elements[elements.length - 1];
|
80002
|
+
}
|
80003
|
+
|
80004
|
+
// snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
|
80005
|
+
const result = this.opts.snippetJSON.snippets.filter(item => {
|
80006
|
+
if (item.id + '' === snippetid) return item;else return false;
|
80007
|
+
});
|
80008
|
+
var html = result[0].html;
|
80009
|
+
var noedit = result[0].noedit;
|
80010
|
+
var bSnippet;
|
80011
|
+
if (html.indexOf('"row') === -1) {
|
80012
|
+
bSnippet = true; // Just snippet (without row/column grid)
|
80013
|
+
} else {
|
80014
|
+
bSnippet = false; // Snippet is wrapped in row/colum
|
80015
|
+
}
|
80016
|
+
|
80017
|
+
if (this.opts.emailMode) bSnippet = false;
|
80018
|
+
|
80019
|
+
// Convert snippet into your defined 12 columns grid
|
80020
|
+
var rowClass = this.opts.row; //row
|
80021
|
+
var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
|
80022
|
+
if (rowClass !== '' && colClass.length === 12) {
|
80023
|
+
// html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
|
80024
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
|
80025
|
+
html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
|
80026
|
+
html = html.replace(new RegExp('column full', 'g'), colClass[11]);
|
80027
|
+
html = html.replace(new RegExp('column half', 'g'), colClass[5]);
|
80028
|
+
html = html.replace(new RegExp('column third', 'g'), colClass[3]);
|
80029
|
+
html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
|
80030
|
+
html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
|
80031
|
+
html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
|
80032
|
+
html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
|
80033
|
+
html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
|
80034
|
+
html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
|
80035
|
+
html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
|
80036
|
+
}
|
80037
|
+
html = html.replace(/{id}/g, this.util.makeId());
|
80038
|
+
if (this.opts.onAdd) {
|
80039
|
+
html = this.opts.onAdd(html);
|
80040
|
+
}
|
80041
|
+
if (this.opts.snippetPathReplace.length > 0) {
|
80042
|
+
// try {
|
80043
|
+
if (this.opts.snippetPathReplace[0] !== '') {
|
80044
|
+
var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
|
80045
|
+
html = html.replace(regex, this.opts.snippetPathReplace[1]);
|
80046
|
+
var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
|
80047
|
+
var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
|
80048
|
+
var regex2 = new RegExp(string1, 'g');
|
80049
|
+
html = html.replace(regex2, string2);
|
80050
|
+
}
|
80051
|
+
// } catch (e) { 1; }
|
80052
|
+
}
|
80053
|
+
|
80054
|
+
if (bSnippet) {
|
80055
|
+
// Just snippet (without row/column grid), ex. buttons, line, social, video, map.
|
80056
|
+
// Can be inserted after current row, column (cell), element, or last row.
|
80057
|
+
|
80058
|
+
html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`;
|
80059
|
+
|
80060
|
+
// Clean snippet from sortable related code
|
80061
|
+
itemEl.removeAttribute('draggable');
|
80062
|
+
this.dom.removeClass(itemEl, 'snippet-item');
|
80063
|
+
const blockTemplate = `
|
80064
|
+
<div class="is-block block-fixed" style="top: 20%; left: 20%; width: 800px;">
|
80065
|
+
<div class="is-container container-new leading-12 size-17">
|
80066
|
+
[%CONTENT%]
|
80067
|
+
</div>
|
80068
|
+
</div>
|
80069
|
+
`;
|
80070
|
+
itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
|
80071
|
+
} else {
|
80072
|
+
// Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
|
80073
|
+
// Can only be inserted after current row or last row (not on column or element).
|
80074
|
+
|
80075
|
+
let snippet = this.dom.createElement('div');
|
80076
|
+
snippet.innerHTML = html;
|
80077
|
+
let blocks = snippet.querySelectorAll('[data-html]');
|
80078
|
+
Array.prototype.forEach.call(blocks, block => {
|
80079
|
+
// Render custom code block
|
80080
|
+
html = decodeURIComponent(block.getAttribute('data-html'));
|
80081
|
+
html = html.replace(/{id}/g, this.util.makeId());
|
80082
|
+
html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
|
80083
|
+
for (var i = 1; i <= 20; i++) {
|
80084
|
+
html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
|
80085
|
+
}
|
80086
|
+
|
80087
|
+
block.innerHTML = html;
|
80088
|
+
});
|
80089
|
+
html = snippet.innerHTML;
|
80090
|
+
|
80091
|
+
// Clean snippet from sortable related code
|
80092
|
+
itemEl.removeAttribute('draggable');
|
80093
|
+
this.dom.removeClass(itemEl, 'snippet-item');
|
80094
|
+
itemEl.innerHTML = '';
|
80095
|
+
|
80096
|
+
// Use createContextualFragment() to make embedded script executable
|
80097
|
+
// https://ghinda.net/article/script-tags/
|
80098
|
+
var range = document.createRange();
|
80099
|
+
range.setStart(itemEl, 0);
|
80100
|
+
itemEl.appendChild(range.createContextualFragment(html));
|
80101
|
+
const blockTemplate = `
|
80102
|
+
<div class="is-block block-fixed" style="top: 20%; left: 20%; width: 800px;">
|
80103
|
+
<div class="is-container container-new leading-12 size-17">
|
80104
|
+
[%CONTENT%]
|
80105
|
+
</div>
|
80106
|
+
</div>
|
80107
|
+
`;
|
80108
|
+
itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', itemEl.innerHTML);
|
80109
|
+
}
|
80110
|
+
this.activeCol = null;
|
80111
|
+
const builders = section.querySelectorAll('.is-container.container-new');
|
80112
|
+
builders.forEach(builder => {
|
80113
|
+
const block = builder.parentNode;
|
80114
|
+
if (lastBlock) {
|
80115
|
+
lastBlock.insertAdjacentElement('afterend', block);
|
80116
|
+
} else {
|
80117
|
+
const ovarlay = section.querySelector('.is-overlay');
|
80118
|
+
ovarlay.insertAdjacentElement('afterend', block);
|
80119
|
+
}
|
80120
|
+
|
80121
|
+
// After snippet has been added, re-apply behavior on builder areas
|
80122
|
+
this.applyBehaviorOn(builder);
|
80123
|
+
builder.classList.remove('container-new');
|
80124
|
+
});
|
80125
|
+
if (this.opts.onBlockCanvasAdd) this.opts.onBlockCanvasAdd();
|
80126
|
+
this.opts.onChange();
|
80127
|
+
this.opts.onRender();
|
80128
|
+
}
|
80129
|
+
|
80130
|
+
// destroy
|
80131
|
+
if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
|
80132
|
+
if (obj) {
|
80133
|
+
obj.destroy();
|
80134
|
+
}
|
80135
|
+
});
|
80136
|
+
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
80137
|
+
}
|
80138
|
+
});
|
80139
|
+
this.sortableOnCanvas.push(obj);
|
80140
|
+
});
|
79828
80141
|
this.sortableOnPage = new Sortable(wrapper, {
|
79829
80142
|
scroll: true,
|
79830
80143
|
group: 'shared',
|
@@ -80022,7 +80335,14 @@ class ContentBuilder {
|
|
80022
80335
|
}
|
80023
80336
|
|
80024
80337
|
// this.sortableOnPage.option('draggable', '.dummy');
|
80025
|
-
|
80338
|
+
|
80339
|
+
// destroy
|
80340
|
+
if (this.sortableOnCanvas) this.sortableOnCanvas.forEach(obj => {
|
80341
|
+
if (obj) {
|
80342
|
+
obj.destroy();
|
80343
|
+
}
|
80344
|
+
});
|
80345
|
+
if (this.sortableOnPage) this.sortableOnPage.destroy();
|
80026
80346
|
}
|
80027
80347
|
});
|
80028
80348
|
}
|