@innovastudio/contentbox 1.6.24 → 1.6.26
Sign up to get free protection for your applications and to get access to all the features.
@@ -10902,8 +10902,9 @@ class PanelText {
|
|
10902
10902
|
colorpicker.open(color => {
|
10903
10903
|
this.text.setTextColor(color);
|
10904
10904
|
btnColor.style.backgroundColor = color; // preview
|
10905
|
+
// this.builder.onChange();
|
10905
10906
|
|
10906
|
-
this.builder.onChange();
|
10907
|
+
this.builder.editor.onChange();
|
10907
10908
|
}, currentColor);
|
10908
10909
|
});
|
10909
10910
|
const btnBackColor = panel.querySelector('.btn-backcolor');
|
@@ -10914,8 +10915,9 @@ class PanelText {
|
|
10914
10915
|
colorpicker.open(color => {
|
10915
10916
|
this.text.setTextBg(color);
|
10916
10917
|
btnBackColor.style.backgroundColor = color; // preview
|
10918
|
+
// this.builder.onChange();
|
10917
10919
|
|
10918
|
-
this.builder.onChange();
|
10920
|
+
this.builder.editor.onChange();
|
10919
10921
|
}, currentColor);
|
10920
10922
|
});
|
10921
10923
|
const btnFormats = panel.querySelectorAll('[data-format]');
|
@@ -10924,8 +10926,9 @@ class PanelText {
|
|
10924
10926
|
this.saveForUndo();
|
10925
10927
|
const command = btn.getAttribute('data-format');
|
10926
10928
|
this.text.formatText(command);
|
10927
|
-
this.getState();
|
10928
|
-
|
10929
|
+
this.getState(); // this.builder.onChange();
|
10930
|
+
|
10931
|
+
this.builder.editor.onChange();
|
10929
10932
|
});
|
10930
10933
|
});
|
10931
10934
|
const btnAligns = panel.querySelectorAll('[data-align]');
|
@@ -10934,8 +10937,9 @@ class PanelText {
|
|
10934
10937
|
this.saveForUndo();
|
10935
10938
|
const command = btn.getAttribute('data-align');
|
10936
10939
|
this.text.setTextAlign(command);
|
10937
|
-
this.getState();
|
10938
|
-
|
10940
|
+
this.getState(); // this.builder.onChange();
|
10941
|
+
|
10942
|
+
this.builder.editor.onChange();
|
10939
10943
|
});
|
10940
10944
|
});
|
10941
10945
|
const btnActions = panel.querySelectorAll('[data-action]');
|
@@ -10945,8 +10949,9 @@ class PanelText {
|
|
10945
10949
|
const command = btn.getAttribute('data-action');
|
10946
10950
|
this.text.setAction(command, () => {
|
10947
10951
|
// on finish
|
10948
|
-
this.getState();
|
10949
|
-
|
10952
|
+
this.getState(); // this.builder.onChange();
|
10953
|
+
|
10954
|
+
this.builder.editor.onChange();
|
10950
10955
|
});
|
10951
10956
|
});
|
10952
10957
|
});
|
@@ -10955,8 +10960,9 @@ class PanelText {
|
|
10955
10960
|
btn.addEventListener('click', () => {
|
10956
10961
|
this.saveForUndo();
|
10957
10962
|
const tag = btn.getAttribute('data-tag');
|
10958
|
-
this.text.pasteHtmlAtCaret(tag, true);
|
10959
|
-
|
10963
|
+
this.text.pasteHtmlAtCaret(tag, true); // this.builder.onChange();
|
10964
|
+
|
10965
|
+
this.builder.editor.onChange();
|
10960
10966
|
});
|
10961
10967
|
});
|
10962
10968
|
if (builder.customTags.length === 0) panel.querySelector('.customtags').style.display = 'none';
|
@@ -10977,8 +10983,9 @@ class PanelText {
|
|
10977
10983
|
this.text.applyClassFontSize(container, num);
|
10978
10984
|
}
|
10979
10985
|
});
|
10980
|
-
this.getState();
|
10981
|
-
|
10986
|
+
this.getState(); // this.builder.onChange();
|
10987
|
+
|
10988
|
+
this.builder.editor.onChange();
|
10982
10989
|
});
|
10983
10990
|
});
|
10984
10991
|
const btnWeight = panel.querySelectorAll('.group.fontweight button');
|
@@ -10991,8 +10998,9 @@ class PanelText {
|
|
10991
10998
|
this.text.applyClassFontWeight(container, num);
|
10992
10999
|
}
|
10993
11000
|
});
|
10994
|
-
this.getState();
|
10995
|
-
|
11001
|
+
this.getState(); // this.builder.onChange();
|
11002
|
+
|
11003
|
+
this.builder.editor.onChange();
|
10996
11004
|
});
|
10997
11005
|
});
|
10998
11006
|
const btnLineSpacing = panel.querySelectorAll('.group.linespacing button');
|
@@ -11001,8 +11009,9 @@ class PanelText {
|
|
11001
11009
|
this.saveForUndo();
|
11002
11010
|
const num = btn.getAttribute('data-value');
|
11003
11011
|
this.text.setLineHeight(num);
|
11004
|
-
this.getState();
|
11005
|
-
|
11012
|
+
this.getState(); // this.builder.onChange();
|
11013
|
+
|
11014
|
+
this.builder.editor.onChange();
|
11006
11015
|
});
|
11007
11016
|
});
|
11008
11017
|
const btnLetterSpacing = panel.querySelectorAll('.group.letterspacing button');
|
@@ -11011,8 +11020,9 @@ class PanelText {
|
|
11011
11020
|
this.saveForUndo();
|
11012
11021
|
const num = btn.getAttribute('data-value');
|
11013
11022
|
this.text.setLetterSpacing(num);
|
11014
|
-
this.getState();
|
11015
|
-
|
11023
|
+
this.getState(); // this.builder.onChange();
|
11024
|
+
|
11025
|
+
this.builder.editor.onChange();
|
11016
11026
|
});
|
11017
11027
|
});
|
11018
11028
|
let path = this.builder.fontAssetPath;
|
@@ -11029,8 +11039,9 @@ class PanelText {
|
|
11029
11039
|
let provider = selected.provider;
|
11030
11040
|
this.saveForUndo();
|
11031
11041
|
this.text.setFont(fontFamily, fontStyle, fontDisplay, provider);
|
11032
|
-
this.getState();
|
11033
|
-
|
11042
|
+
this.getState(); // this.builder.onChange();
|
11043
|
+
|
11044
|
+
this.builder.editor.onChange();
|
11034
11045
|
}
|
11035
11046
|
});
|
11036
11047
|
const headingList = [{
|
@@ -11069,8 +11080,9 @@ class PanelText {
|
|
11069
11080
|
onChange: value => {
|
11070
11081
|
this.saveForUndo();
|
11071
11082
|
this.text.setParagraph(value);
|
11072
|
-
this.getState();
|
11073
|
-
|
11083
|
+
this.getState(); // this.builder.onChange();
|
11084
|
+
|
11085
|
+
this.builder.editor.onChange();
|
11074
11086
|
},
|
11075
11087
|
search: false
|
11076
11088
|
});
|
@@ -34369,7 +34381,6 @@ const prepareSvgIcons = builder => {
|
|
34369
34381
|
<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" />
|
34370
34382
|
</symbol>
|
34371
34383
|
|
34372
|
-
|
34373
34384
|
<symbol id="icon-stack-forward" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34374
34385
|
<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" />
|
34375
34386
|
</symbol>
|
@@ -34383,7 +34394,45 @@ const prepareSvgIcons = builder => {
|
|
34383
34394
|
<path d="M12 5l0 14" /><path d="M18 11l-6 -6" /><path d="M6 11l6 -6" />
|
34384
34395
|
</symbol>
|
34385
34396
|
|
34386
|
-
|
34397
|
+
<symbol id="icon-group" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34398
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" />
|
34399
|
+
</symbol>
|
34400
|
+
<symbol id="icon-ungroup" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34401
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 4m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M4 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
|
34402
|
+
</symbol>
|
34403
|
+
|
34404
|
+
<symbol id="icon-group2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34405
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1m-5 0h-2m-5 0h-1a1 1 0 0 1 -1 -1v-1m0 -5v-2" />
|
34406
|
+
</symbol>
|
34407
|
+
<symbol id="icon-group3" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34408
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" /><path d="M10 8l-2 0l0 2" /><path d="M8 14l0 2l2 0" /><path d="M14 8l2 0l0 2" /><path d="M16 14l0 2l-2 0" />
|
34409
|
+
</symbol>
|
34410
|
+
<symbol id="icon-group4" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34411
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 19a2 2 0 0 1 -2 -2" /><path d="M5 13v-2" /><path d="M5 7a2 2 0 0 1 2 -2" /><path d="M11 5h2" /><path d="M17 5a2 2 0 0 1 2 2" /><path d="M19 11v2" /><path d="M19 17v4" /><path d="M21 19h-4" /><path d="M13 19h-2" />
|
34412
|
+
</symbol>
|
34413
|
+
<symbol id="icon-ungroup2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34414
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6c0 -.556 .227 -1.059 .593 -1.421" /><path d="M9 4h1.5" /><path d="M13.5 4h1.5" /><path d="M18 4a2 2 0 0 1 2 2" /><path d="M20 9v1.5" /><path d="M20 13.5v1.5" /><path d="M19.402 19.426a1.993 1.993 0 0 1 -1.402 .574" /><path d="M15 20h-1.5" /><path d="M10.5 20h-1.5" /><path d="M6 20a2 2 0 0 1 -2 -2" /><path d="M4 15v-1.5" /><path d="M4 10.5v-1.5" /><path d="M3 3l18 18" />
|
34415
|
+
</symbol>
|
34416
|
+
<symbol id="icon-ungroup3" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34417
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
|
34418
|
+
</symbol>
|
34419
|
+
|
34420
|
+
<symbol id="icon-duplicate" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34421
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 16.572v2.42a2.01 2.01 0 0 1 -2.009 2.008h-7.981a2.01 2.01 0 0 1 -2.01 -2.009v-7.981a2.01 2.01 0 0 1 2.009 -2.01h2.954" /><path d="M9.167 4.511a2.04 2.04 0 0 1 2.496 -1.441l7.826 2.097a2.04 2.04 0 0 1 1.441 2.496l-2.097 7.826a2.04 2.04 0 0 1 -2.496 1.441l-7.827 -2.097a2.04 2.04 0 0 1 -1.441 -2.496l2.098 -7.827z" />
|
34422
|
+
</symbol>
|
34423
|
+
<symbol id="icon-duplicate2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34424
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
|
34425
|
+
</symbol>
|
34426
|
+
|
34427
|
+
<symbol id="icon-trash" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
34428
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
34429
|
+
<path d="M4 7l16 0"></path>
|
34430
|
+
<path d="M10 11l0 6"></path>
|
34431
|
+
<path d="M14 11l0 6"></path>
|
34432
|
+
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
|
34433
|
+
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
|
34434
|
+
</symbol>
|
34435
|
+
|
34387
34436
|
</svg>`;
|
34388
34437
|
builder.dom.appendHtml(builder.builderStuff, html);
|
34389
34438
|
};
|
@@ -40696,6 +40745,21 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
40696
40745
|
// }
|
40697
40746
|
},
|
40698
40747
|
|
40748
|
+
onSort: evt => {
|
40749
|
+
if (!builder.canvas) return;
|
40750
|
+
let snippetX = evt.originalEvent.clientX;
|
40751
|
+
let snippetY = evt.originalEvent.clientY;
|
40752
|
+
const block = builder.doc.querySelector('[data-new-dummy]');
|
40753
|
+
if (block) {
|
40754
|
+
const docContainer = block.parentNode;
|
40755
|
+
block.offsetWidth / 2;
|
40756
|
+
let x = (snippetX - block.offsetWidth / 2) / docContainer.offsetWidth * 100;
|
40757
|
+
let y = (snippetY - block.offsetHeight / 2) / docContainer.offsetHeight * 100;
|
40758
|
+
block.style.top = y + '%';
|
40759
|
+
block.style.left = x + '%';
|
40760
|
+
block.removeAttribute('data-new-dummy');
|
40761
|
+
}
|
40762
|
+
},
|
40699
40763
|
onStart: () => {
|
40700
40764
|
// Remove .builder-active during dragging (because this class makes rows have border-right/left 120px)
|
40701
40765
|
activeBuilderArea = null;
|
@@ -69399,13 +69463,15 @@ class Image$1 {
|
|
69399
69463
|
const movControlBox = document.querySelector('.moveable-control-box');
|
69400
69464
|
if (movControlBox) movControlBox.style.display = 'none';
|
69401
69465
|
}
|
69402
|
-
|
69403
|
-
|
69404
|
-
|
69405
|
-
|
69406
|
-
|
69407
|
-
|
69408
|
-
|
69466
|
+
if (this.builder.canvas) ; else {
|
69467
|
+
let prog = false;
|
69468
|
+
if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) ; else {
|
69469
|
+
// console.log('Programmatically');
|
69470
|
+
prog = true;
|
69471
|
+
}
|
69472
|
+
if (prog) {
|
69473
|
+
this.hideImageTool();
|
69474
|
+
}
|
69409
69475
|
}
|
69410
69476
|
|
69411
69477
|
// NOTE:
|
@@ -86654,7 +86720,7 @@ class Rte {
|
|
86654
86720
|
let inpZoomSlider;
|
86655
86721
|
if (!rteTool) {
|
86656
86722
|
if (builder.plugins.length > 0) {
|
86657
|
-
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'];
|
86723
|
+
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'];
|
86658
86724
|
const filterButtons = myArray => {
|
86659
86725
|
let newArray = myArray;
|
86660
86726
|
myArray.forEach(item => {
|
@@ -86741,7 +86807,7 @@ class Rte {
|
|
86741
86807
|
let html_elementrte = '';
|
86742
86808
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
86743
86809
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
86744
|
-
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
86810
|
+
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
86745
86811
|
html_elementrte += '<div class="rte-separator"></div>';
|
86746
86812
|
} else {
|
86747
86813
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -89049,6 +89115,71 @@ class Rte {
|
|
89049
89115
|
});
|
89050
89116
|
});
|
89051
89117
|
|
89118
|
+
// freeform
|
89119
|
+
|
89120
|
+
let btnGroup = builderStuff.querySelectorAll('button.rte-group');
|
89121
|
+
btnGroup.forEach(btn => {
|
89122
|
+
btn.addEventListener('click', () => {
|
89123
|
+
this.builder.group();
|
89124
|
+
builderStuff.querySelectorAll('button.rte-group').forEach(elm => elm.style.display = 'none');
|
89125
|
+
builderStuff.querySelectorAll('button.rte-ungroup').forEach(elm => elm.style.display = '');
|
89126
|
+
});
|
89127
|
+
});
|
89128
|
+
let btnUnGroup = builderStuff.querySelectorAll('button.rte-ungroup');
|
89129
|
+
btnUnGroup.forEach(btn => {
|
89130
|
+
btn.addEventListener('click', () => {
|
89131
|
+
this.builder.unGroup();
|
89132
|
+
builderStuff.querySelectorAll('button.rte-group').forEach(elm => elm.style.display = '');
|
89133
|
+
builderStuff.querySelectorAll('button.rte-ungroup').forEach(elm => elm.style.display = 'none');
|
89134
|
+
});
|
89135
|
+
});
|
89136
|
+
let btnDelete = builderStuff.querySelectorAll('button.rte-delete');
|
89137
|
+
btnDelete.forEach(btn => {
|
89138
|
+
btn.addEventListener('click', () => {
|
89139
|
+
this.builder.delete();
|
89140
|
+
});
|
89141
|
+
});
|
89142
|
+
let btnFront = builderStuff.querySelectorAll('button.rte-front');
|
89143
|
+
btnFront.forEach(btn => {
|
89144
|
+
btn.addEventListener('click', () => {
|
89145
|
+
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
89146
|
+
if (!activeBlock) return;
|
89147
|
+
this.builder.forward(activeBlock);
|
89148
|
+
});
|
89149
|
+
});
|
89150
|
+
let btnBackward = builderStuff.querySelectorAll('button.rte-backward');
|
89151
|
+
btnBackward.forEach(btn => {
|
89152
|
+
btn.addEventListener('click', () => {
|
89153
|
+
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
89154
|
+
if (!activeBlock) return;
|
89155
|
+
this.builder.backward(activeBlock);
|
89156
|
+
});
|
89157
|
+
});
|
89158
|
+
let btnMoveUp = builderStuff.querySelectorAll('button.rte-moveup');
|
89159
|
+
btnMoveUp.forEach(btn => {
|
89160
|
+
btn.addEventListener('click', () => {
|
89161
|
+
let activeBlock = this.builder.doc.querySelector('.is-block.active');
|
89162
|
+
if (!activeBlock) return;
|
89163
|
+
this.builder.moveUp(activeBlock);
|
89164
|
+
});
|
89165
|
+
});
|
89166
|
+
let btnMoveDown = builderStuff.querySelectorAll('button.rte-movedown');
|
89167
|
+
btnMoveDown.forEach(btn => {
|
89168
|
+
btn.addEventListener('click', () => {
|
89169
|
+
let activeBlock = this.builder.doc.querySelector('.is-block.active');
|
89170
|
+
if (!activeBlock) return;
|
89171
|
+
this.builder.moveDown(activeBlock);
|
89172
|
+
});
|
89173
|
+
});
|
89174
|
+
let btnDuplicate = builderStuff.querySelectorAll('button.rte-duplicate');
|
89175
|
+
btnDuplicate.forEach(btn => {
|
89176
|
+
btn.addEventListener('click', () => {
|
89177
|
+
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
89178
|
+
if (!activeBlock) return;
|
89179
|
+
this.builder.duplicate(activeBlock);
|
89180
|
+
});
|
89181
|
+
});
|
89182
|
+
|
89052
89183
|
// -----------------------------
|
89053
89184
|
|
89054
89185
|
// Click anywhere will hide Column tool
|
@@ -89981,6 +90112,40 @@ class Rte {
|
|
89981
90112
|
btn.style.display = 'none';
|
89982
90113
|
});
|
89983
90114
|
}
|
90115
|
+
hideBlockButtons() {
|
90116
|
+
let elms = this.elementRteTool.querySelectorAll('.rte-group');
|
90117
|
+
Array.prototype.forEach.call(elms, elm => {
|
90118
|
+
elm.style.display = 'none';
|
90119
|
+
});
|
90120
|
+
elms = this.elementRteTool.querySelectorAll('.rte-ungroup');
|
90121
|
+
Array.prototype.forEach.call(elms, elm => {
|
90122
|
+
elm.style.display = 'none';
|
90123
|
+
});
|
90124
|
+
elms = this.elementRteTool.querySelectorAll('.rte-duplicate');
|
90125
|
+
Array.prototype.forEach.call(elms, elm => {
|
90126
|
+
elm.style.display = 'none';
|
90127
|
+
});
|
90128
|
+
elms = this.elementRteTool.querySelectorAll('.rte-front');
|
90129
|
+
Array.prototype.forEach.call(elms, elm => {
|
90130
|
+
elm.style.display = 'none';
|
90131
|
+
});
|
90132
|
+
elms = this.elementRteTool.querySelectorAll('.rte-backward');
|
90133
|
+
Array.prototype.forEach.call(elms, elm => {
|
90134
|
+
elm.style.display = 'none';
|
90135
|
+
});
|
90136
|
+
elms = this.elementRteTool.querySelectorAll('.rte-moveup');
|
90137
|
+
Array.prototype.forEach.call(elms, elm => {
|
90138
|
+
elm.style.display = 'none';
|
90139
|
+
});
|
90140
|
+
elms = this.elementRteTool.querySelectorAll('.rte-movedown');
|
90141
|
+
Array.prototype.forEach.call(elms, elm => {
|
90142
|
+
elm.style.display = 'none';
|
90143
|
+
});
|
90144
|
+
elms = this.elementRteTool.querySelectorAll('.rte-delete');
|
90145
|
+
Array.prototype.forEach.call(elms, elm => {
|
90146
|
+
elm.style.display = 'none';
|
90147
|
+
});
|
90148
|
+
}
|
89984
90149
|
showAlignButtons() {
|
89985
90150
|
let separators = this.elementRteTool.querySelectorAll('.rte-separator');
|
89986
90151
|
Array.prototype.forEach.call(separators, separator => {
|
@@ -90030,6 +90195,7 @@ class Rte {
|
|
90030
90195
|
subblock = true;
|
90031
90196
|
}
|
90032
90197
|
}
|
90198
|
+
if (this.builder.canvas) this.hideBlockButtons();
|
90033
90199
|
this.rteTool.querySelector('.rte-for-text').style.display = 'flex';
|
90034
90200
|
this.rteTool.querySelector('.rte-for-icon').style.display = 'none';
|
90035
90201
|
this.rteMoreOptions.querySelector('.rte-for-text').style.display = 'flex';
|
@@ -99064,6 +99230,7 @@ class Draggable {
|
|
99064
99230
|
this.selector = options && options.selector || '.is-block';
|
99065
99231
|
this.doc = options && options.doc || document;
|
99066
99232
|
this.win = options && options.win || window;
|
99233
|
+
this.controlSelector = options && options.controlSelector || null;
|
99067
99234
|
this.onDelete = options && options.onDelete || null;
|
99068
99235
|
this.onBeforeChange = options && options.onBeforeChange || null;
|
99069
99236
|
this.onChange = options && options.onChange || null;
|
@@ -99333,7 +99500,7 @@ class Draggable {
|
|
99333
99500
|
this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
|
99334
99501
|
}
|
99335
99502
|
} else {
|
99336
|
-
if (event.target.closest('.keep-selection')) return;
|
99503
|
+
if (event.target.closest('.keep-selection') || this.controlSelector && event.target.closest(this.controlSelector)) return;
|
99337
99504
|
|
99338
99505
|
// // Make empty height set with value
|
99339
99506
|
// // if(this.clickedBlock) this.common.updateHeight(this.clickedBlock);
|
@@ -99465,7 +99632,7 @@ class Editable {
|
|
99465
99632
|
this.doc.addEventListener('touchstart', this.handleMouseClick, {
|
99466
99633
|
passive: false
|
99467
99634
|
});
|
99468
|
-
if (this.onEditStart) this.onEditStart(currentTarget);
|
99635
|
+
if (this.onEditStart) this.onEditStart(event, currentTarget);
|
99469
99636
|
}
|
99470
99637
|
handleTouchStart(event) {
|
99471
99638
|
// Handle Double Tab
|
@@ -99764,6 +99931,7 @@ class EditableBlocks {
|
|
99764
99931
|
disableOnMobile: this.disableOnMobile,
|
99765
99932
|
doc: this.doc,
|
99766
99933
|
win: this.win,
|
99934
|
+
controlSelector: this.controlSelector,
|
99767
99935
|
onDelete: element => {
|
99768
99936
|
if (this.rotatable) this.rotatable.destroy(element);
|
99769
99937
|
this.resizable.destroy(element);
|
@@ -99820,10 +99988,10 @@ class EditableBlocks {
|
|
99820
99988
|
doc: this.doc,
|
99821
99989
|
win: this.win,
|
99822
99990
|
onContentClick: this.onContentClick,
|
99823
|
-
onEditStart: block => {
|
99991
|
+
onEditStart: (event, block) => {
|
99824
99992
|
if (block.classList.contains('clone')) {
|
99825
99993
|
const clonedTarget = this.doc.querySelector(this.selector + '.cloned');
|
99826
|
-
this.onEditStart(clonedTarget);
|
99994
|
+
this.onEditStart(event, clonedTarget);
|
99827
99995
|
this.selectClear();
|
99828
99996
|
|
99829
99997
|
// Disable drag during editing
|
@@ -99831,7 +99999,7 @@ class EditableBlocks {
|
|
99831
99999
|
this.draggable.disableDrag(clonedTarget);
|
99832
100000
|
return;
|
99833
100001
|
}
|
99834
|
-
this.onEditStart(block);
|
100002
|
+
this.onEditStart(event, block);
|
99835
100003
|
|
99836
100004
|
// Disable drag during editing
|
99837
100005
|
if (!this.draggable) return;
|
@@ -101076,13 +101244,21 @@ class ContentBuilder {
|
|
101076
101244
|
let oldOnUndo = this.opts.onUndo;
|
101077
101245
|
this.opts.onUndo = () => {
|
101078
101246
|
let ret = oldOnUndo.apply(this, arguments);
|
101079
|
-
if (this.eb)
|
101247
|
+
if (this.eb) {
|
101248
|
+
this.eb.refresh();
|
101249
|
+
this.rte.hideBlockButtons();
|
101250
|
+
this.rte.positionToolbar();
|
101251
|
+
}
|
101080
101252
|
return ret;
|
101081
101253
|
};
|
101082
101254
|
let oldOnRedo = this.opts.onRedo;
|
101083
101255
|
this.opts.onRedo = () => {
|
101084
101256
|
let ret = oldOnRedo.apply(this, arguments);
|
101085
|
-
if (this.eb)
|
101257
|
+
if (this.eb) {
|
101258
|
+
this.eb.refresh();
|
101259
|
+
this.rte.hideBlockButtons();
|
101260
|
+
this.rte.positionToolbar();
|
101261
|
+
}
|
101086
101262
|
return ret;
|
101087
101263
|
};
|
101088
101264
|
this.elmTool = new ElementTool(this); // Render Element Tool
|
@@ -101157,7 +101333,7 @@ class ContentBuilder {
|
|
101157
101333
|
doc: this.doc,
|
101158
101334
|
win: this.win,
|
101159
101335
|
selector: '.is-block',
|
101160
|
-
controlSelector: '.is-tool,.is-pop,.is-modal,#divImageResizer,.is-rte-tool
|
101336
|
+
controlSelector: '.is-tool,.is-pop,.is-modal,#divImageResizer,.is-rte-tool,.is-elementrte-tool,.is-rte-pop,.keep-selection',
|
101161
101337
|
parentSelector: '.box-canvas',
|
101162
101338
|
rotate: true,
|
101163
101339
|
// disableOnMobile: 760,
|
@@ -101167,12 +101343,40 @@ class ContentBuilder {
|
|
101167
101343
|
onChange: () => {
|
101168
101344
|
this.opts.onChange();
|
101169
101345
|
},
|
101170
|
-
onEditStart: block => {
|
101346
|
+
onEditStart: (event, block) => {
|
101171
101347
|
block.classList.add('editable');
|
101172
|
-
|
101173
|
-
|
101174
|
-
|
101175
|
-
|
101348
|
+
|
101349
|
+
// get element to activate
|
101350
|
+
let x = event.clientX;
|
101351
|
+
let y = event.clientY;
|
101352
|
+
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
101353
|
+
if (!activeBlock) return;
|
101354
|
+
const container = activeBlock.querySelector('.is-container');
|
101355
|
+
if (!container) return;
|
101356
|
+
const cols = this.getAllColumns(container);
|
101357
|
+
let clickedElm;
|
101358
|
+
let clickedCol;
|
101359
|
+
cols.forEach(col => {
|
101360
|
+
let elms = col.children;
|
101361
|
+
for (let i = 0; i < elms.length; i++) {
|
101362
|
+
let rect = elms[i].getBoundingClientRect();
|
101363
|
+
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
|
101364
|
+
clickedElm = elms[i];
|
101365
|
+
}
|
101366
|
+
}
|
101367
|
+
let rect = col.getBoundingClientRect();
|
101368
|
+
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
|
101369
|
+
clickedCol = col;
|
101370
|
+
}
|
101371
|
+
});
|
101372
|
+
if (clickedElm) {
|
101373
|
+
const tagName = clickedElm.tagName.toLowerCase();
|
101374
|
+
if (tagName !== 'img') this.eb.placeCursorAtEnd(clickedElm);
|
101375
|
+
setTimeout(() => {
|
101376
|
+
clickedElm.click();
|
101377
|
+
}, 1); // give time for the placeCursorAtEnd
|
101378
|
+
} else if (clickedCol) {
|
101379
|
+
clickedCol.click();
|
101176
101380
|
}
|
101177
101381
|
},
|
101178
101382
|
onEditEnd: block => {
|
@@ -101209,10 +101413,108 @@ class ContentBuilder {
|
|
101209
101413
|
const builder = block.querySelector(this.container);
|
101210
101414
|
this.applyBehaviorOn(builder);
|
101211
101415
|
},
|
101212
|
-
onMultipleSelect:
|
101213
|
-
|
101214
|
-
|
101215
|
-
|
101416
|
+
onMultipleSelect: () => {
|
101417
|
+
if (this.onMultipleSelect) this.onMultipleSelect();
|
101418
|
+
setTimeout(() => {
|
101419
|
+
this.rte.rteTool.style.display = 'none';
|
101420
|
+
this.rte.elementRteTool.style.display = 'flex';
|
101421
|
+
this.rte.hideAlignButtons();
|
101422
|
+
this.rte.hideBlockButtons();
|
101423
|
+
|
101424
|
+
// group/ungroup
|
101425
|
+
let elms = this.rte.elementRteTool.querySelectorAll('.rte-group');
|
101426
|
+
Array.prototype.forEach.call(elms, elm => {
|
101427
|
+
elm.style.display = '';
|
101428
|
+
});
|
101429
|
+
this.rte.positionToolbar();
|
101430
|
+
}, 10);
|
101431
|
+
},
|
101432
|
+
onDelete: () => {
|
101433
|
+
if (this.onDelete) this.onDelete();
|
101434
|
+
this.rte.hideBlockButtons();
|
101435
|
+
this.rte.positionToolbar();
|
101436
|
+
},
|
101437
|
+
onSelectBlock: block => {
|
101438
|
+
if (this.onSelectBlock) this.onSelectBlock(block);
|
101439
|
+
if (block.classList.contains('editable')) return;
|
101440
|
+
if (this.controlPanel) return;
|
101441
|
+
this.rte.rteTool.style.display = 'none';
|
101442
|
+
this.rte.elementRteTool.style.display = 'flex';
|
101443
|
+
this.rte.hideAlignButtons();
|
101444
|
+
let elms = this.rte.elementRteTool.querySelectorAll('.rte-duplicate');
|
101445
|
+
Array.prototype.forEach.call(elms, elm => {
|
101446
|
+
elm.style.display = '';
|
101447
|
+
});
|
101448
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
101449
|
+
Array.prototype.forEach.call(elms, elm => {
|
101450
|
+
elm.style.display = '';
|
101451
|
+
});
|
101452
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
|
101453
|
+
Array.prototype.forEach.call(elms, elm => {
|
101454
|
+
elm.style.display = '';
|
101455
|
+
});
|
101456
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-delete');
|
101457
|
+
Array.prototype.forEach.call(elms, elm => {
|
101458
|
+
elm.style.display = '';
|
101459
|
+
});
|
101460
|
+
const viewportWidth = this.doc.body.clientWidth;
|
101461
|
+
if (viewportWidth <= 768) {
|
101462
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
101463
|
+
Array.prototype.forEach.call(elms, elm => {
|
101464
|
+
elm.style.display = '';
|
101465
|
+
});
|
101466
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
|
101467
|
+
Array.prototype.forEach.call(elms, elm => {
|
101468
|
+
elm.style.display = '';
|
101469
|
+
});
|
101470
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-front');
|
101471
|
+
Array.prototype.forEach.call(elms, elm => {
|
101472
|
+
elm.style.display = 'none';
|
101473
|
+
});
|
101474
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-backward');
|
101475
|
+
Array.prototype.forEach.call(elms, elm => {
|
101476
|
+
elm.style.display = 'none';
|
101477
|
+
});
|
101478
|
+
} else {
|
101479
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
101480
|
+
Array.prototype.forEach.call(elms, elm => {
|
101481
|
+
elm.style.display = 'none';
|
101482
|
+
});
|
101483
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-movedown');
|
101484
|
+
Array.prototype.forEach.call(elms, elm => {
|
101485
|
+
elm.style.display = 'none';
|
101486
|
+
});
|
101487
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-front');
|
101488
|
+
Array.prototype.forEach.call(elms, elm => {
|
101489
|
+
elm.style.display = '';
|
101490
|
+
});
|
101491
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-backward');
|
101492
|
+
Array.prototype.forEach.call(elms, elm => {
|
101493
|
+
elm.style.display = '';
|
101494
|
+
});
|
101495
|
+
}
|
101496
|
+
|
101497
|
+
// group/ungroup
|
101498
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-group');
|
101499
|
+
Array.prototype.forEach.call(elms, elm => {
|
101500
|
+
elm.style.display = 'none';
|
101501
|
+
});
|
101502
|
+
if (block.classList.contains('is-group')) {
|
101503
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-ungroup');
|
101504
|
+
Array.prototype.forEach.call(elms, elm => {
|
101505
|
+
elm.style.display = '';
|
101506
|
+
});
|
101507
|
+
} else {
|
101508
|
+
elms = this.rte.elementRteTool.querySelectorAll('.rte-ungroup');
|
101509
|
+
Array.prototype.forEach.call(elms, elm => {
|
101510
|
+
elm.style.display = 'none';
|
101511
|
+
});
|
101512
|
+
}
|
101513
|
+
this.rte.positionToolbar();
|
101514
|
+
},
|
101515
|
+
onUnselectBlock: () => {
|
101516
|
+
if (this.onUnselectBlock) this.onUnselectBlock();
|
101517
|
+
}
|
101216
101518
|
});
|
101217
101519
|
if (this.iframe) {
|
101218
101520
|
this.win.addEventListener('scroll', this.doWindowScroll = () => {
|
@@ -101313,6 +101615,8 @@ class ContentBuilder {
|
|
101313
101615
|
|
101314
101616
|
util.clearActiveCell();
|
101315
101617
|
util.clearControls();
|
101618
|
+
if (!target.closest('.is-block')) this.rte.hideBlockButtons(); // freeform
|
101619
|
+
|
101316
101620
|
if (!this.controlPanel) if (this.toolbarDisplay !== 'auto') {
|
101317
101621
|
this.rte.showDefaultToolbar();
|
101318
101622
|
}
|
@@ -101422,6 +101726,20 @@ class ContentBuilder {
|
|
101422
101726
|
static run(opts = {}) {
|
101423
101727
|
return new ContentBuilder(opts);
|
101424
101728
|
}
|
101729
|
+
getAllColumns(container) {
|
101730
|
+
let arrCells = [];
|
101731
|
+
let rows = container.children;
|
101732
|
+
for (let i = 0; i < rows.length; i++) {
|
101733
|
+
let cols = rows[i].children;
|
101734
|
+
for (let j = 0; j < cols.length; j++) {
|
101735
|
+
let col = cols[j];
|
101736
|
+
if (col.classList.contains('is-row-tool') || col.classList.contains('is-col-tool') || col.classList.contains('is-rowadd-tool') || col.classList.contains('is-row-overlay')) ; else {
|
101737
|
+
arrCells.push(col);
|
101738
|
+
}
|
101739
|
+
}
|
101740
|
+
}
|
101741
|
+
return arrCells;
|
101742
|
+
}
|
101425
101743
|
setZoom() {
|
101426
101744
|
// Complete (On Area + On Control)
|
101427
101745
|
|
@@ -102142,6 +102460,47 @@ class ContentBuilder {
|
|
102142
102460
|
this.eb.backward(target);
|
102143
102461
|
this.opts.onChange();
|
102144
102462
|
}
|
102463
|
+
moveUp(target) {
|
102464
|
+
let arrBlocks = [];
|
102465
|
+
const container = target.parentNode;
|
102466
|
+
let elms = container.querySelectorAll('.is-block');
|
102467
|
+
elms.forEach(elm => {
|
102468
|
+
arrBlocks.push(elm);
|
102469
|
+
});
|
102470
|
+
let previousBlock; //, nextBlock;
|
102471
|
+
for (let i = 0; i < arrBlocks.length; i++) {
|
102472
|
+
if (arrBlocks[i] === target) {
|
102473
|
+
if (i - 1 >= 0) previousBlock = arrBlocks[i - 1];
|
102474
|
+
// if(i+1<arrBlocks.length) nextBlock = arrBlocks[i+1];
|
102475
|
+
}
|
102476
|
+
}
|
102477
|
+
|
102478
|
+
if (previousBlock) {
|
102479
|
+
this.uo.saveForUndo();
|
102480
|
+
container.insertBefore(target, previousBlock);
|
102481
|
+
this.opts.onChange();
|
102482
|
+
}
|
102483
|
+
}
|
102484
|
+
moveDown(target) {
|
102485
|
+
let arrBlocks = [];
|
102486
|
+
const container = target.parentNode;
|
102487
|
+
let elms = container.querySelectorAll('.is-block');
|
102488
|
+
elms.forEach(elm => {
|
102489
|
+
arrBlocks.push(elm);
|
102490
|
+
});
|
102491
|
+
let nextBlock; //, previousBlock;
|
102492
|
+
for (let i = 0; i < arrBlocks.length; i++) {
|
102493
|
+
if (arrBlocks[i] === target) {
|
102494
|
+
// if(i-1>=0) previousBlock = arrBlocks[i-1];
|
102495
|
+
if (i + 1 < arrBlocks.length) nextBlock = arrBlocks[i + 1];
|
102496
|
+
}
|
102497
|
+
}
|
102498
|
+
if (nextBlock) {
|
102499
|
+
this.uo.saveForUndo();
|
102500
|
+
container.insertBefore(nextBlock, target);
|
102501
|
+
this.opts.onChange();
|
102502
|
+
}
|
102503
|
+
}
|
102145
102504
|
enableShape() {
|
102146
102505
|
if (!this.eb) return;
|
102147
102506
|
this.uo.saveForUndo();
|
@@ -104758,14 +105117,18 @@ class ContentBuilder {
|
|
104758
105117
|
}
|
104759
105118
|
boxes.forEach(box => {
|
104760
105119
|
box.insertAdjacentHTML('afterbegin', `
|
104761
|
-
<div class="is-block block-dummy" style="top:
|
104762
|
-
|
105120
|
+
<div class="is-block block-dummy" style="top: 0%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
105121
|
+
<div class="is-block block-dummy" style="top: 20%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
105122
|
+
<div class="is-block block-dummy" style="top: 40%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
105123
|
+
<div class="is-block block-dummy" style="top: 60%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
105124
|
+
<div class="is-block block-dummy" style="top: 80%; left: 0%; width: 100%; height: 20%;background:#eee;opacity:0"></div>
|
105125
|
+
`);
|
104763
105126
|
const obj = new Sortable(box, {
|
104764
105127
|
scroll: true,
|
104765
105128
|
group: 'shared',
|
104766
105129
|
direction: 'horizontal',
|
104767
105130
|
animation: 150,
|
104768
|
-
sort: true,
|
105131
|
+
// sort: true,
|
104769
105132
|
onAdd: evt => {
|
104770
105133
|
let itemEl = evt.item;
|
104771
105134
|
if (itemEl.getAttribute('data-id')) {
|
@@ -104838,12 +105201,12 @@ class ContentBuilder {
|
|
104838
105201
|
itemEl.removeAttribute('draggable');
|
104839
105202
|
this.dom.removeClass(itemEl, 'snippet-item');
|
104840
105203
|
const blockTemplate = `
|
104841
|
-
<div class="is-block block-steady height-auto" style="top: 20%; left: 20%; width: 800px;">
|
105204
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
|
104842
105205
|
<div class="is-container container-new leading-12 size-17">
|
104843
105206
|
[%CONTENT%]
|
104844
105207
|
</div>
|
104845
105208
|
</div>
|
104846
|
-
`;
|
105209
|
+
`; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
|
104847
105210
|
itemEl.outerHTML = blockTemplate.replace('[%CONTENT%]', html);
|
104848
105211
|
} else {
|
104849
105212
|
// Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
|
@@ -104876,7 +105239,7 @@ class ContentBuilder {
|
|
104876
105239
|
range.setStart(itemEl, 0);
|
104877
105240
|
itemEl.appendChild(range.createContextualFragment(html));
|
104878
105241
|
const blockTemplate = `
|
104879
|
-
<div class="is-block block-steady height-auto" style="top: 20%; left: 20%; width: 800px;">
|
105242
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
|
104880
105243
|
<div class="is-container container-new leading-12 size-17">
|
104881
105244
|
[%CONTENT%]
|
104882
105245
|
</div>
|