@innovastudio/contentbox 1.6.31 → 1.6.32
Sign up to get free protection for your applications and to get access to all the features.
@@ -1241,7 +1241,9 @@ class SideBar {
|
|
1241
1241
|
this.builder.editor.saveForUndo();
|
1242
1242
|
var html = builderStuff.querySelector('#inpViewHtml').value;
|
1243
1243
|
html = this.builder.editor.fromViewToActual(html);
|
1244
|
-
this.builder.loadHtml(html);
|
1244
|
+
this.builder.loadHtml(html);
|
1245
|
+
this.builder.editor.hideElementTools();
|
1246
|
+
if (this.builder.onSelectChange) this.builder.onSelectChange(); //Trigger Change event
|
1245
1247
|
|
1246
1248
|
this.builder.settings.onChange(); //Close sidebar
|
1247
1249
|
|
@@ -11220,6 +11222,15 @@ class PanelText {
|
|
11220
11222
|
|
11221
11223
|
if (elm && elm.closest('.' + config.textTransform.uppercase)) {
|
11222
11224
|
this.panel.querySelector('button[data-format=uppercase]').classList.add('on');
|
11225
|
+
}
|
11226
|
+
|
11227
|
+
this.panel.querySelector('button[data-action=insertUnorderedList]').classList.remove('on');
|
11228
|
+
this.panel.querySelector('button[data-action=insertOrderedList]').classList.remove('on');
|
11229
|
+
|
11230
|
+
if (elm && elm.closest('ul')) {
|
11231
|
+
this.panel.querySelector('button[data-action=insertUnorderedList]').classList.add('on');
|
11232
|
+
} else if (elm && elm.closest('ol')) {
|
11233
|
+
this.panel.querySelector('button[data-action=insertOrderedList]').classList.add('on');
|
11223
11234
|
} // Alignment
|
11224
11235
|
|
11225
11236
|
|
@@ -26739,7 +26750,7 @@ const renderQuickAdd = builder => {
|
|
26739
26750
|
elm = quickadd.querySelector('.add-list');
|
26740
26751
|
dom.addEventListener(elm, 'click', () => {
|
26741
26752
|
const mode = quickadd.getAttribute('data-mode');
|
26742
|
-
const html = `<ul
|
26753
|
+
const html = `<ul>
|
26743
26754
|
<li>Lorem Ipsum is simply dummy text</li>
|
26744
26755
|
<li>Lorem Ipsum is simply dummy text</li>
|
26745
26756
|
</ul>`;
|
@@ -27435,7 +27446,10 @@ class Util$1 {
|
|
27435
27446
|
const dom = this.dom;
|
27436
27447
|
dom.removeClass(modal, 'active');
|
27437
27448
|
modal.style.display = '';
|
27449
|
+
|
27450
|
+
// document.body.style.overflow = '';
|
27438
27451
|
}
|
27452
|
+
|
27439
27453
|
refreshModuleLayout(col) {
|
27440
27454
|
let savedHeight;
|
27441
27455
|
if (col.style.height) savedHeight = col.style.height;else col.style.height = `${col.offsetHeight}px`;
|
@@ -27791,13 +27805,27 @@ class Util$1 {
|
|
27791
27805
|
if (!elm) return;
|
27792
27806
|
this.builder.uo.saveForUndo();
|
27793
27807
|
let element = elm;
|
27794
|
-
|
27795
|
-
|
27796
|
-
|
27797
|
-
|
27808
|
+
let newelement;
|
27809
|
+
if (!element.nextElementSibling) {
|
27810
|
+
// active element is div.display > p.
|
27811
|
+
let activeCol = this.builder.activeCol;
|
27812
|
+
let current;
|
27813
|
+
const elms = dom.elementChildren(activeCol);
|
27814
|
+
elms.forEach(child => {
|
27815
|
+
if (child.contains(element)) {
|
27816
|
+
current = child;
|
27817
|
+
}
|
27818
|
+
});
|
27819
|
+
if (current) {
|
27820
|
+
current.insertAdjacentHTML('afterend', html); // add new element after div.display
|
27821
|
+
newelement = current.nextElementSibling;
|
27822
|
+
}
|
27823
|
+
} else {
|
27824
|
+
element.insertAdjacentHTML('afterend', html);
|
27825
|
+
newelement = element.nextElementSibling;
|
27826
|
+
}
|
27798
27827
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
27799
27828
|
if (builderActive) this.builder.applyBehaviorOn(builderActive);
|
27800
|
-
let newelement = element.nextElementSibling;
|
27801
27829
|
if (newelement.tagName.toLowerCase() === 'img') {
|
27802
27830
|
let checkLoad = setInterval(() => {
|
27803
27831
|
if (newelement.complete) {
|
@@ -30426,6 +30454,12 @@ class Dom {
|
|
30426
30454
|
}
|
30427
30455
|
});
|
30428
30456
|
}
|
30457
|
+
countOccurrences(text, word) {
|
30458
|
+
// match the word globally and case insensitively
|
30459
|
+
const regex = new RegExp(word, 'gi');
|
30460
|
+
const matches = text.match(regex);
|
30461
|
+
return matches ? matches.length : 0;
|
30462
|
+
}
|
30429
30463
|
}
|
30430
30464
|
|
30431
30465
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
@@ -36886,97 +36920,86 @@ class HtmlUtil {
|
|
36886
36920
|
col.style.cursor = '';
|
36887
36921
|
});
|
36888
36922
|
});
|
36889
|
-
let elms
|
36890
|
-
|
36891
|
-
elms
|
36892
|
-
|
36893
|
-
|
36894
|
-
|
36895
|
-
|
36896
|
-
|
36897
|
-
|
36898
|
-
|
36899
|
-
|
36900
|
-
|
36901
|
-
|
36902
|
-
|
36903
|
-
elms
|
36904
|
-
|
36905
|
-
|
36906
|
-
|
36907
|
-
|
36908
|
-
|
36909
|
-
|
36910
|
-
|
36911
|
-
|
36912
|
-
|
36913
|
-
elms = tmp.querySelectorAll('[
|
36914
|
-
|
36915
|
-
|
36916
|
-
|
36917
|
-
|
36918
|
-
|
36919
|
-
|
36920
|
-
|
36921
|
-
|
36922
|
-
|
36923
|
-
|
36924
|
-
|
36925
|
-
elms
|
36926
|
-
|
36927
|
-
|
36928
|
-
|
36929
|
-
|
36930
|
-
|
36931
|
-
|
36932
|
-
|
36933
|
-
elms
|
36934
|
-
|
36935
|
-
|
36936
|
-
|
36937
|
-
|
36938
|
-
|
36939
|
-
|
36940
|
-
|
36941
|
-
|
36942
|
-
|
36943
|
-
elms
|
36944
|
-
|
36945
|
-
|
36946
|
-
dom.removeAttributes(elms, 'clean');
|
36947
|
-
elms = tmp.querySelectorAll('[grideditor]');
|
36948
|
-
dom.removeAttributes(elms, 'grideditor');
|
36949
|
-
elms = tmp.querySelectorAll('[gridoutline]');
|
36950
|
-
dom.removeAttributes(elms, 'gridoutline');
|
36951
|
-
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
36952
|
-
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
36953
|
-
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
36954
|
-
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
36955
|
-
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
36923
|
+
let elms;
|
36924
|
+
elms = tmp.querySelectorAll('.sortable-chosen, .sortable-ghost, .elm-active, .icon-active, .elm-inspected, .cell-active, .row-active, .row-outline, .is-builder');
|
36925
|
+
elms.forEach(elm => {
|
36926
|
+
elm.classList.remove('sortable-chosen');
|
36927
|
+
elm.classList.remove('sortable-ghost');
|
36928
|
+
elm.classList.remove('elm-active');
|
36929
|
+
elm.classList.remove('icon-active');
|
36930
|
+
elm.classList.remove('elm-inspected');
|
36931
|
+
elm.classList.remove('cell-active');
|
36932
|
+
elm.classList.remove('row-active');
|
36933
|
+
elm.classList.remove('row-outline');
|
36934
|
+
elm.classList.remove('is-builder');
|
36935
|
+
});
|
36936
|
+
elms = tmp.querySelectorAll('[data-click], [contenteditable], [draggridoutline], [between-blocks-left], [between-blocks-center], [hideelementhighlight], [data-module-active], [draggable]');
|
36937
|
+
elms.forEach(elm => {
|
36938
|
+
elm.removeAttribute('data-click');
|
36939
|
+
elm.removeAttribute('contenteditable');
|
36940
|
+
elm.removeAttribute('draggridoutline');
|
36941
|
+
elm.removeAttribute('between-blocks-left');
|
36942
|
+
elm.removeAttribute('between-blocks-center');
|
36943
|
+
elm.removeAttribute('hideelementhighlight');
|
36944
|
+
elm.removeAttribute('data-module-active');
|
36945
|
+
elm.removeAttribute('draggable');
|
36946
|
+
});
|
36947
|
+
elms = tmp.querySelectorAll('[data-animated], [data-saveforundo], [hidesnippetaddtool], [gray], [rowoutline], [hidecolumntool], [grayoutline], [hideoutline]');
|
36948
|
+
elms.forEach(elm => {
|
36949
|
+
elm.removeAttribute('data-animated');
|
36950
|
+
elm.removeAttribute('data-saveforundo');
|
36951
|
+
elm.removeAttribute('hidesnippetaddtool');
|
36952
|
+
elm.removeAttribute('gray');
|
36953
|
+
elm.removeAttribute('rowoutline');
|
36954
|
+
elm.removeAttribute('hidecolumntool');
|
36955
|
+
elm.removeAttribute('grayoutline');
|
36956
|
+
elm.removeAttribute('hideoutline');
|
36957
|
+
});
|
36958
|
+
elms = tmp.querySelectorAll('[leftrowtool], [minimal], [clean], [grideditor], [gridoutline]');
|
36959
|
+
elms.forEach(elm => {
|
36960
|
+
elm.removeAttribute('leftrowtool');
|
36961
|
+
elm.removeAttribute('minimal');
|
36962
|
+
elm.removeAttribute('clean');
|
36963
|
+
elm.removeAttribute('grideditor');
|
36964
|
+
elm.removeAttribute('gridoutline');
|
36965
|
+
});
|
36966
|
+
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
|
36967
|
+
elms.forEach(elm => {
|
36968
|
+
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
36969
|
+
elm.previousSibling.remove();
|
36970
|
+
}
|
36971
|
+
if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
|
36972
|
+
elm.nextSibling.remove();
|
36973
|
+
}
|
36974
|
+
elm.remove();
|
36975
|
+
});
|
36976
|
+
elms = tmp.querySelectorAll('.ovl,.row-add-initial');
|
36977
|
+
elms.forEach(elm => {
|
36978
|
+
elm.remove();
|
36979
|
+
});
|
36956
36980
|
|
36957
36981
|
//Extra cleaning
|
36958
36982
|
if (this.builder.cleanAOS) {
|
36959
|
-
elms = tmp.querySelectorAll('.aos-init');
|
36960
|
-
|
36961
|
-
|
36962
|
-
|
36963
|
-
|
36964
|
-
|
36965
|
-
|
36966
|
-
elms
|
36967
|
-
|
36968
|
-
|
36969
|
-
|
36970
|
-
|
36971
|
-
|
36972
|
-
|
36973
|
-
dom.removeClasses(elms, 'is-inview');
|
36983
|
+
elms = tmp.querySelectorAll('.aos-init, .aos-animate');
|
36984
|
+
elms.forEach(elm => {
|
36985
|
+
elm.classList.remove('aos-init');
|
36986
|
+
elm.classList.remove('aos-animate');
|
36987
|
+
});
|
36988
|
+
}
|
36989
|
+
elms = tmp.querySelectorAll('.skrollable, .skrollable-after, .skrollable-before, .skrollable-between, .is-inview');
|
36990
|
+
elms.forEach(elm => {
|
36991
|
+
elm.classList.remove('skrollable');
|
36992
|
+
elm.classList.remove('skrollable-after');
|
36993
|
+
elm.classList.remove('skrollable-before');
|
36994
|
+
elm.classList.remove('skrollable-between');
|
36995
|
+
elm.classList.remove('is-inview');
|
36996
|
+
});
|
36974
36997
|
let emptyclasses = tmp.querySelectorAll('[class=""]');
|
36975
|
-
|
36998
|
+
emptyclasses.forEach(emptyclass => {
|
36976
36999
|
emptyclass.removeAttribute('class');
|
36977
37000
|
});
|
36978
37001
|
let unusedOverlays = tmp.querySelectorAll('.is-row-overlay');
|
36979
|
-
|
37002
|
+
unusedOverlays.forEach(unusedOverlay => {
|
36980
37003
|
if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
|
36981
37004
|
});
|
36982
37005
|
dom.removeEmptyStyle(tmp);
|
@@ -36985,7 +37008,7 @@ class HtmlUtil {
|
|
36985
37008
|
|
36986
37009
|
//Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
|
36987
37010
|
let links = tmp.querySelectorAll('a');
|
36988
|
-
|
37011
|
+
links.forEach(link => {
|
36989
37012
|
if (link.style.display === 'inline-block') {
|
36990
37013
|
if (link.parentNode.childElementCount === 1 && link.parentNode.tagName.toLowerCase() === 'span') {
|
36991
37014
|
link.parentNode.outerHTML = link.parentNode.innerHTML;
|
@@ -37003,85 +37026,44 @@ class HtmlUtil {
|
|
37003
37026
|
//ContentBox
|
37004
37027
|
|
37005
37028
|
// Remove dummy DIV after last section
|
37006
|
-
|
37007
|
-
|
37008
|
-
|
37009
|
-
|
37010
|
-
elms = tmp.querySelectorAll('[data-scroll-once]');
|
37011
|
-
|
37029
|
+
elms = tmp.querySelectorAll('.is-dummy');
|
37030
|
+
elms.forEach(elm => {
|
37031
|
+
elm.remove();
|
37032
|
+
});
|
37033
|
+
elms = tmp.querySelectorAll('[data-scroll], [data-scroll-once]');
|
37034
|
+
elms.forEach(elm => {
|
37035
|
+
elm.removeAttribute('data-scroll');
|
37036
|
+
elm.removeAttribute('data-scroll-once');
|
37037
|
+
});
|
37012
37038
|
if (this.builder.shortenOutput) {
|
37013
|
-
elms = tmp.querySelectorAll('[data-noedit]');
|
37014
|
-
|
37015
|
-
|
37016
|
-
|
37017
|
-
|
37018
|
-
|
37019
|
-
|
37020
|
-
|
37021
|
-
|
37022
|
-
|
37023
|
-
elms = tmp.querySelectorAll('[data-html]');
|
37024
|
-
|
37025
|
-
|
37026
|
-
|
37027
|
-
|
37028
|
-
|
37029
|
-
|
37030
|
-
|
37031
|
-
|
37032
|
-
|
37033
|
-
|
37034
|
-
|
37035
|
-
|
37036
|
-
dom.removeAttributes(elms, 'data-html-5');
|
37037
|
-
elms = tmp.querySelectorAll('[data-html-6]');
|
37038
|
-
dom.removeAttributes(elms, 'data-html-6');
|
37039
|
-
elms = tmp.querySelectorAll('[data-html-7]');
|
37040
|
-
dom.removeAttributes(elms, 'data-html-7');
|
37041
|
-
elms = tmp.querySelectorAll('[data-html-8]');
|
37042
|
-
dom.removeAttributes(elms, 'data-html-8');
|
37043
|
-
elms = tmp.querySelectorAll('[data-html-9]');
|
37044
|
-
dom.removeAttributes(elms, 'data-html-9');
|
37045
|
-
elms = tmp.querySelectorAll('[data-html-10]');
|
37046
|
-
dom.removeAttributes(elms, 'data-html-10');
|
37047
|
-
elms = tmp.querySelectorAll('[data-html-12]');
|
37048
|
-
dom.removeAttributes(elms, 'data-html-12');
|
37049
|
-
elms = tmp.querySelectorAll('[data-html-13]');
|
37050
|
-
dom.removeAttributes(elms, 'data-html-13');
|
37051
|
-
elms = tmp.querySelectorAll('[data-html-14]');
|
37052
|
-
dom.removeAttributes(elms, 'data-html-14');
|
37053
|
-
elms = tmp.querySelectorAll('[data-html-15]');
|
37054
|
-
dom.removeAttributes(elms, 'data-html-15');
|
37055
|
-
elms = tmp.querySelectorAll('[data-html-16]');
|
37056
|
-
dom.removeAttributes(elms, 'data-html-16');
|
37057
|
-
elms = tmp.querySelectorAll('[data-html-17]');
|
37058
|
-
dom.removeAttributes(elms, 'data-html-17');
|
37059
|
-
elms = tmp.querySelectorAll('[data-html-18]');
|
37060
|
-
dom.removeAttributes(elms, 'data-html-18');
|
37061
|
-
elms = tmp.querySelectorAll('[data-html-19]');
|
37062
|
-
dom.removeAttributes(elms, 'data-html-19');
|
37063
|
-
elms = tmp.querySelectorAll('[data-html-20]');
|
37064
|
-
dom.removeAttributes(elms, 'data-html-20');
|
37065
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
37066
|
-
dom.removeAttributes(elms, 'data-html-21');
|
37067
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
37068
|
-
dom.removeAttributes(elms, 'data-html-21');
|
37069
|
-
elms = tmp.querySelectorAll('[data-html-22]');
|
37070
|
-
dom.removeAttributes(elms, 'data-html-22');
|
37071
|
-
elms = tmp.querySelectorAll('[data-html-23]');
|
37072
|
-
dom.removeAttributes(elms, 'data-html-23');
|
37073
|
-
elms = tmp.querySelectorAll('[data-html-24]');
|
37074
|
-
dom.removeAttributes(elms, 'data-html-24');
|
37075
|
-
elms = tmp.querySelectorAll('[data-html-25]');
|
37076
|
-
dom.removeAttributes(elms, 'data-html-25');
|
37039
|
+
elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
|
37040
|
+
elms.forEach(elm => {
|
37041
|
+
elm.removeAttribute('data-noedit');
|
37042
|
+
elm.removeAttribute('data-module');
|
37043
|
+
elm.removeAttribute('data-module-desc');
|
37044
|
+
elm.removeAttribute('data-dialog-width');
|
37045
|
+
elm.removeAttribute('data-dialog-height');
|
37046
|
+
elm.removeAttribute('data-html');
|
37047
|
+
elm.removeAttribute('data-settings');
|
37048
|
+
});
|
37049
|
+
elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
|
37050
|
+
elms.forEach(elm => {
|
37051
|
+
elm.removeAttribute('data-html-1');
|
37052
|
+
elm.removeAttribute('data-html-2');
|
37053
|
+
elm.removeAttribute('data-html-3');
|
37054
|
+
elm.removeAttribute('data-html-4');
|
37055
|
+
elm.removeAttribute('data-html-5');
|
37056
|
+
elm.removeAttribute('data-html-6');
|
37057
|
+
elm.removeAttribute('data-html-7');
|
37058
|
+
elm.removeAttribute('data-html-8');
|
37059
|
+
elm.removeAttribute('data-html-9');
|
37060
|
+
elm.removeAttribute('data-html-10');
|
37061
|
+
});
|
37077
37062
|
}
|
37078
37063
|
|
37079
37064
|
// cleaning
|
37080
37065
|
|
37081
37066
|
elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
|
37082
|
-
// elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' +
|
37083
|
-
// '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' +
|
37084
|
-
// '[data-in],[data-in-150],[data-in-300],[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]');
|
37085
37067
|
Array.prototype.forEach.call(elms, elm => {
|
37086
37068
|
elm.style.transition = '';
|
37087
37069
|
elm.style.transform = '';
|
@@ -37117,34 +37099,24 @@ class HtmlUtil {
|
|
37117
37099
|
});
|
37118
37100
|
|
37119
37101
|
//Cleanup utils
|
37120
|
-
elms = tmp.querySelectorAll('.is-appeared');
|
37121
|
-
|
37122
|
-
|
37123
|
-
|
37124
|
-
|
37125
|
-
|
37126
|
-
|
37127
|
-
});
|
37128
|
-
elms = tmp.querySelectorAll('.section-active');
|
37129
|
-
Array.prototype.forEach.call(elms, elm => {
|
37130
|
-
dom.removeClass(elm, 'section-active');
|
37131
|
-
});
|
37132
|
-
elms = tmp.querySelectorAll('.section-select');
|
37133
|
-
Array.prototype.forEach.call(elms, elm => {
|
37134
|
-
dom.removeClass(elm, 'section-select');
|
37102
|
+
elms = tmp.querySelectorAll('.is-appeared, .box-active, .section-active, .section-select, .box-select');
|
37103
|
+
elms.forEach(elm => {
|
37104
|
+
elm.classList.remove('is-appeared');
|
37105
|
+
elm.classList.remove('box-active');
|
37106
|
+
elm.classList.remove('section-active');
|
37107
|
+
elm.classList.remove('section-select');
|
37108
|
+
elm.classList.remove('box-select');
|
37135
37109
|
});
|
37136
|
-
elms = tmp.querySelectorAll('.box-
|
37137
|
-
|
37138
|
-
|
37110
|
+
elms = tmp.querySelectorAll('.is-section-tool, .is-box-tool, .is-box-info, .is-section-info');
|
37111
|
+
elms.forEach(elm => {
|
37112
|
+
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
37113
|
+
elm.previousSibling.remove();
|
37114
|
+
}
|
37115
|
+
if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
|
37116
|
+
elm.nextSibling.remove();
|
37117
|
+
}
|
37118
|
+
elm.remove();
|
37139
37119
|
});
|
37140
|
-
elms = tmp.querySelectorAll('.is-section-tool');
|
37141
|
-
dom.removeElements(elms);
|
37142
|
-
elms = tmp.querySelectorAll('.is-box-tool');
|
37143
|
-
dom.removeElements(elms);
|
37144
|
-
elms = tmp.querySelectorAll('.is-box-info');
|
37145
|
-
dom.removeElements(elms);
|
37146
|
-
elms = tmp.querySelectorAll('.is-section-info');
|
37147
|
-
dom.removeElements(elms);
|
37148
37120
|
|
37149
37121
|
// freeform
|
37150
37122
|
elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
|
@@ -37161,8 +37133,6 @@ class HtmlUtil {
|
|
37161
37133
|
elm.removeAttribute('data-prev');
|
37162
37134
|
});
|
37163
37135
|
tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
37164
|
-
// tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
|
37165
|
-
|
37166
37136
|
var html_content = '';
|
37167
37137
|
var html_footer = '';
|
37168
37138
|
var html_others = '';
|
@@ -37216,70 +37186,29 @@ class HtmlUtil {
|
|
37216
37186
|
emptystyle.removeAttribute('style');
|
37217
37187
|
});
|
37218
37188
|
if (this.builder.shortenOutput) {
|
37219
|
-
elms = tmp.querySelectorAll('[data-noedit]');
|
37220
|
-
|
37221
|
-
|
37222
|
-
|
37223
|
-
|
37224
|
-
|
37225
|
-
|
37226
|
-
|
37227
|
-
|
37228
|
-
|
37229
|
-
elms = tmp.querySelectorAll('[data-html]');
|
37230
|
-
|
37231
|
-
|
37232
|
-
|
37233
|
-
|
37234
|
-
|
37235
|
-
|
37236
|
-
|
37237
|
-
|
37238
|
-
|
37239
|
-
|
37240
|
-
|
37241
|
-
|
37242
|
-
dom.removeAttributes(elms, 'data-html-5');
|
37243
|
-
elms = tmp.querySelectorAll('[data-html-6]');
|
37244
|
-
dom.removeAttributes(elms, 'data-html-6');
|
37245
|
-
elms = tmp.querySelectorAll('[data-html-7]');
|
37246
|
-
dom.removeAttributes(elms, 'data-html-7');
|
37247
|
-
elms = tmp.querySelectorAll('[data-html-8]');
|
37248
|
-
dom.removeAttributes(elms, 'data-html-8');
|
37249
|
-
elms = tmp.querySelectorAll('[data-html-9]');
|
37250
|
-
dom.removeAttributes(elms, 'data-html-9');
|
37251
|
-
elms = tmp.querySelectorAll('[data-html-10]');
|
37252
|
-
dom.removeAttributes(elms, 'data-html-10');
|
37253
|
-
elms = tmp.querySelectorAll('[data-html-12]');
|
37254
|
-
dom.removeAttributes(elms, 'data-html-12');
|
37255
|
-
elms = tmp.querySelectorAll('[data-html-13]');
|
37256
|
-
dom.removeAttributes(elms, 'data-html-13');
|
37257
|
-
elms = tmp.querySelectorAll('[data-html-14]');
|
37258
|
-
dom.removeAttributes(elms, 'data-html-14');
|
37259
|
-
elms = tmp.querySelectorAll('[data-html-15]');
|
37260
|
-
dom.removeAttributes(elms, 'data-html-15');
|
37261
|
-
elms = tmp.querySelectorAll('[data-html-16]');
|
37262
|
-
dom.removeAttributes(elms, 'data-html-16');
|
37263
|
-
elms = tmp.querySelectorAll('[data-html-17]');
|
37264
|
-
dom.removeAttributes(elms, 'data-html-17');
|
37265
|
-
elms = tmp.querySelectorAll('[data-html-18]');
|
37266
|
-
dom.removeAttributes(elms, 'data-html-18');
|
37267
|
-
elms = tmp.querySelectorAll('[data-html-19]');
|
37268
|
-
dom.removeAttributes(elms, 'data-html-19');
|
37269
|
-
elms = tmp.querySelectorAll('[data-html-20]');
|
37270
|
-
dom.removeAttributes(elms, 'data-html-20');
|
37271
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
37272
|
-
dom.removeAttributes(elms, 'data-html-21');
|
37273
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
37274
|
-
dom.removeAttributes(elms, 'data-html-21');
|
37275
|
-
elms = tmp.querySelectorAll('[data-html-22]');
|
37276
|
-
dom.removeAttributes(elms, 'data-html-22');
|
37277
|
-
elms = tmp.querySelectorAll('[data-html-23]');
|
37278
|
-
dom.removeAttributes(elms, 'data-html-23');
|
37279
|
-
elms = tmp.querySelectorAll('[data-html-24]');
|
37280
|
-
dom.removeAttributes(elms, 'data-html-24');
|
37281
|
-
elms = tmp.querySelectorAll('[data-html-25]');
|
37282
|
-
dom.removeAttributes(elms, 'data-html-25');
|
37189
|
+
elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
|
37190
|
+
elms.forEach(elm => {
|
37191
|
+
elm.removeAttribute('data-noedit');
|
37192
|
+
elm.removeAttribute('data-module');
|
37193
|
+
elm.removeAttribute('data-module-desc');
|
37194
|
+
elm.removeAttribute('data-dialog-width');
|
37195
|
+
elm.removeAttribute('data-dialog-height');
|
37196
|
+
elm.removeAttribute('data-html');
|
37197
|
+
elm.removeAttribute('data-settings');
|
37198
|
+
});
|
37199
|
+
elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
|
37200
|
+
elms.forEach(elm => {
|
37201
|
+
elm.removeAttribute('data-html-1');
|
37202
|
+
elm.removeAttribute('data-html-2');
|
37203
|
+
elm.removeAttribute('data-html-3');
|
37204
|
+
elm.removeAttribute('data-html-4');
|
37205
|
+
elm.removeAttribute('data-html-5');
|
37206
|
+
elm.removeAttribute('data-html-6');
|
37207
|
+
elm.removeAttribute('data-html-7');
|
37208
|
+
elm.removeAttribute('data-html-8');
|
37209
|
+
elm.removeAttribute('data-html-9');
|
37210
|
+
elm.removeAttribute('data-html-10');
|
37211
|
+
});
|
37283
37212
|
}
|
37284
37213
|
|
37285
37214
|
// freeform
|
@@ -37407,6 +37336,8 @@ class UndoRedo {
|
|
37407
37336
|
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
37408
37337
|
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
37409
37338
|
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
37339
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvas-tool'));
|
37340
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
|
37410
37341
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
37411
37342
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
37412
37343
|
|
@@ -37586,6 +37517,7 @@ class UndoRedo {
|
|
37586
37517
|
this.writeHtml(html);
|
37587
37518
|
}
|
37588
37519
|
this.builder.applyBehavior();
|
37520
|
+
this.builder.applyBehaviorCanvas();
|
37589
37521
|
this.builder.opts.onChange();
|
37590
37522
|
this.undoList[120] = this.undoList[121];
|
37591
37523
|
this.undoList[121] = this.undoList[122];
|
@@ -37675,6 +37607,7 @@ class UndoRedo {
|
|
37675
37607
|
this.writeHtml(html);
|
37676
37608
|
}
|
37677
37609
|
this.builder.applyBehavior();
|
37610
|
+
this.builder.applyBehaviorCanvas();
|
37678
37611
|
this.builder.opts.onChange();
|
37679
37612
|
this.undoList[119] = this.undoList[118];
|
37680
37613
|
this.undoList[118] = this.undoList[117];
|
@@ -38118,6 +38051,24 @@ const prepareSvgIcons = builder => {
|
|
38118
38051
|
<symbol id="icon-svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
38119
38052
|
<path d="M21 8h-2a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2v-4h-1" /><path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" /><path d="M10 8l1.5 8h1l1.5 -8" />
|
38120
38053
|
</symbol>
|
38054
|
+
|
38055
|
+
<symbol id="icon-pagesize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
38056
|
+
<path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M7 12v-3h3" /><path d="M17 12v3h-3" />
|
38057
|
+
</symbol>
|
38058
|
+
<symbol id="icon-print" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
38059
|
+
<path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
|
38060
|
+
</symbol>
|
38061
|
+
|
38062
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
38063
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
38064
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
38065
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
38066
|
+
</symbol>
|
38067
|
+
<symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
38068
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
38069
|
+
<path d="M12 5l0 14"></path>
|
38070
|
+
<path d="M5 12l14 0"></path>
|
38071
|
+
</symbol>
|
38121
38072
|
</svg>`;
|
38122
38073
|
builder.dom.appendHtml(builder.builderStuff, html);
|
38123
38074
|
};
|
@@ -87100,7 +87051,15 @@ class ElementTool {
|
|
87100
87051
|
}
|
87101
87052
|
}
|
87102
87053
|
*/
|
87103
|
-
|
87054
|
+
|
87055
|
+
// elm.parentNode.removeChild(elm);
|
87056
|
+
let elmParent = elm.parentNode;
|
87057
|
+
elm.remove();
|
87058
|
+
let childs = dom.elementChildren(elmParent);
|
87059
|
+
if (!elmParent.classList.contains('cell-active') && childs.length === 0) {
|
87060
|
+
elmParent.remove(); // remove empty div.display
|
87061
|
+
}
|
87062
|
+
|
87104
87063
|
this.elementTool.style.display = 'none';
|
87105
87064
|
let cell = this.builder.activeCol;
|
87106
87065
|
if (cell) {
|
@@ -87419,7 +87378,7 @@ class ElementTool {
|
|
87419
87378
|
if ((customcode || noedit || _protected) && !subblock) ; else {
|
87420
87379
|
const tagName = elm.tagName.toLowerCase();
|
87421
87380
|
// LATER: label, code, figcaption ?
|
87422
|
-
if (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe') {
|
87381
|
+
if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
|
87423
87382
|
activeElement = elm; //set active element
|
87424
87383
|
|
87425
87384
|
if (tagName === 'img') {
|
@@ -89897,8 +89856,14 @@ class Rte {
|
|
89897
89856
|
let rteZoomSlider;
|
89898
89857
|
let inpZoomSlider;
|
89899
89858
|
if (!rteTool) {
|
89859
|
+
let zoomMax = 100;
|
89860
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
89861
|
+
// freeform
|
89862
|
+
zoomMax = 200;
|
89863
|
+
}
|
89864
|
+
|
89900
89865
|
// if(builder.plugins.length>0) {
|
89901
|
-
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg'];
|
89866
|
+
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg', 'pageoptions', 'print'];
|
89902
89867
|
const filterButtons = myArray => {
|
89903
89868
|
let newArray = myArray;
|
89904
89869
|
myArray.forEach(item => {
|
@@ -89958,7 +89923,7 @@ class Rte {
|
|
89958
89923
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
89959
89924
|
if (btn === 'createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'removeformat') html_rtemore += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'bold') html_rtemore += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rtemore += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rtemore += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;
|
89960
89925
|
// else if(btn==='createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;
|
89961
|
-
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
89926
|
+
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_rtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
89962
89927
|
html_rtemore += '<div class="rte-separator"></div>';
|
89963
89928
|
} else {
|
89964
89929
|
html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -89968,7 +89933,7 @@ class Rte {
|
|
89968
89933
|
let html_rte = '';
|
89969
89934
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
89970
89935
|
btn = builder.opts.buttons[j].toLowerCase();
|
89971
|
-
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="
|
89936
|
+
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_rte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
89972
89937
|
html_rte += '<div class="rte-separator"></div>';
|
89973
89938
|
} else {
|
89974
89939
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -89986,7 +89951,7 @@ class Rte {
|
|
89986
89951
|
let html_elementrtemore = '';
|
89987
89952
|
for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
|
89988
89953
|
btn = builder.opts.elementButtonsMore[j].toLowerCase();
|
89989
|
-
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
89954
|
+
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
89990
89955
|
html_elementrtemore += '<div class="rte-separator"></div>';
|
89991
89956
|
} else {
|
89992
89957
|
html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -89996,7 +89961,7 @@ class Rte {
|
|
89996
89961
|
let html_elementrte = '';
|
89997
89962
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
89998
89963
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
89999
|
-
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings') html_elementrte += `<button
|
89964
|
+
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
90000
89965
|
html_elementrte += '<div class="rte-separator"></div>';
|
90001
89966
|
} else {
|
90002
89967
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -90016,7 +89981,7 @@ class Rte {
|
|
90016
89981
|
let html_iconrte = '';
|
90017
89982
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
90018
89983
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
90019
|
-
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
89984
|
+
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
90020
89985
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
90021
89986
|
} else {
|
90022
89987
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -90025,7 +89990,7 @@ class Rte {
|
|
90025
89990
|
|
90026
89991
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
90027
89992
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
90028
|
-
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
89993
|
+
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
|
90029
89994
|
html_iconrte += '<div class="rte-separator"></div>';
|
90030
89995
|
} else {
|
90031
89996
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -90170,7 +90135,7 @@ class Rte {
|
|
90170
90135
|
<div>
|
90171
90136
|
<div class="is-label">${util.out('Zoom')}</div>
|
90172
90137
|
<div style="padding-top:4px">
|
90173
|
-
<input type="range" min="50" max="
|
90138
|
+
<input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
|
90174
90139
|
</div>
|
90175
90140
|
</div>
|
90176
90141
|
</div>
|
@@ -91119,6 +91084,22 @@ class Rte {
|
|
91119
91084
|
});
|
91120
91085
|
});
|
91121
91086
|
|
91087
|
+
// Page Options
|
91088
|
+
let btnPageOptions = builderStuff.querySelectorAll('button.rte-pageoptions');
|
91089
|
+
btnPageOptions.forEach(btn => {
|
91090
|
+
btn.addEventListener('click', () => {
|
91091
|
+
this.builder.openPageOptions();
|
91092
|
+
});
|
91093
|
+
});
|
91094
|
+
|
91095
|
+
// Print
|
91096
|
+
let btnPrint = builderStuff.querySelectorAll('button.rte-print');
|
91097
|
+
btnPrint.forEach(btn => {
|
91098
|
+
btn.addEventListener('click', () => {
|
91099
|
+
this.builder.print();
|
91100
|
+
});
|
91101
|
+
});
|
91102
|
+
|
91122
91103
|
// Zoom Settings
|
91123
91104
|
let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
|
91124
91105
|
zoomButton.forEach(btn => {
|
@@ -91235,6 +91216,14 @@ class Rte {
|
|
91235
91216
|
tools.forEach(tool => {
|
91236
91217
|
tool.style.display = 'none';
|
91237
91218
|
});
|
91219
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
91220
|
+
tools.forEach(tool => {
|
91221
|
+
tool.style.display = 'none';
|
91222
|
+
});
|
91223
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
91224
|
+
tools.forEach(tool => {
|
91225
|
+
tool.style.display = 'none';
|
91226
|
+
});
|
91238
91227
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
91239
91228
|
tools.forEach(tool => {
|
91240
91229
|
tool.style.opacity = 0;
|
@@ -91256,6 +91245,14 @@ class Rte {
|
|
91256
91245
|
tools.forEach(tool => {
|
91257
91246
|
tool.style.display = '';
|
91258
91247
|
});
|
91248
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
91249
|
+
tools.forEach(tool => {
|
91250
|
+
tool.style.display = '';
|
91251
|
+
});
|
91252
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
91253
|
+
tools.forEach(tool => {
|
91254
|
+
tool.style.display = '';
|
91255
|
+
});
|
91259
91256
|
}, 350);
|
91260
91257
|
};
|
91261
91258
|
this.rteZoomSlider.value = this.builder.opts.zoom * 100;
|
@@ -91291,9 +91288,13 @@ class Rte {
|
|
91291
91288
|
this.rteZoomSlider.onchange = () => {
|
91292
91289
|
setTimeout(() => {
|
91293
91290
|
// setZoomOnControl
|
91294
|
-
if (this.builder.
|
91291
|
+
if (this.builder.isContentBox) {
|
91295
91292
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
91296
91293
|
this.builder.setZoomOnControl(wrapper);
|
91294
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
91295
|
+
// freeform
|
91296
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
91297
|
+
this.builder.setZoomOnControl(docContainer);
|
91297
91298
|
} else {
|
91298
91299
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
91299
91300
|
builders.forEach(builder => {
|
@@ -91344,9 +91345,13 @@ class Rte {
|
|
91344
91345
|
this.inpZoomSlider.onchange = () => {
|
91345
91346
|
setTimeout(() => {
|
91346
91347
|
// setZoomOnControl
|
91347
|
-
if (this.builder.
|
91348
|
+
if (this.builder.isContentBox) {
|
91348
91349
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
91349
91350
|
this.builder.setZoomOnControl(wrapper);
|
91351
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
91352
|
+
// freeform
|
91353
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
91354
|
+
this.builder.setZoomOnControl(docContainer);
|
91350
91355
|
} else {
|
91351
91356
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
91352
91357
|
builders.forEach(builder => {
|
@@ -91368,6 +91373,14 @@ class Rte {
|
|
91368
91373
|
tools.forEach(tool => {
|
91369
91374
|
tool.style.display = '';
|
91370
91375
|
});
|
91376
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
91377
|
+
tools.forEach(tool => {
|
91378
|
+
tool.style.display = '';
|
91379
|
+
});
|
91380
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
91381
|
+
tools.forEach(tool => {
|
91382
|
+
tool.style.display = '';
|
91383
|
+
});
|
91371
91384
|
if (this.builder.onZoomEnd) {
|
91372
91385
|
let val = this.rteZoomSlider.value;
|
91373
91386
|
let scale = val / 100;
|
@@ -92428,6 +92441,14 @@ class Rte {
|
|
92428
92441
|
tools.forEach(tool => {
|
92429
92442
|
tool.style.display = 'none';
|
92430
92443
|
});
|
92444
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
92445
|
+
tools.forEach(tool => {
|
92446
|
+
tool.style.display = 'none';
|
92447
|
+
});
|
92448
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
92449
|
+
tools.forEach(tool => {
|
92450
|
+
tool.style.display = 'none';
|
92451
|
+
});
|
92431
92452
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
92432
92453
|
tools.forEach(tool => {
|
92433
92454
|
tool.style.opacity = 0;
|
@@ -92441,9 +92462,13 @@ class Rte {
|
|
92441
92462
|
zoomEnd(inp) {
|
92442
92463
|
setTimeout(() => {
|
92443
92464
|
// setZoomOnControl
|
92444
|
-
if (this.builder.
|
92465
|
+
if (this.builder.isContentBox) {
|
92445
92466
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
92446
92467
|
this.builder.setZoomOnControl(wrapper);
|
92468
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
92469
|
+
// freeform
|
92470
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
92471
|
+
this.builder.setZoomOnControl(docContainer);
|
92447
92472
|
} else {
|
92448
92473
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
92449
92474
|
builders.forEach(builder => {
|
@@ -92465,6 +92490,14 @@ class Rte {
|
|
92465
92490
|
tools.forEach(tool => {
|
92466
92491
|
tool.style.display = '';
|
92467
92492
|
});
|
92493
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
92494
|
+
tools.forEach(tool => {
|
92495
|
+
tool.style.display = '';
|
92496
|
+
});
|
92497
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
92498
|
+
tools.forEach(tool => {
|
92499
|
+
tool.style.display = '';
|
92500
|
+
});
|
92468
92501
|
if (this.builder.onZoomEnd) {
|
92469
92502
|
let val = inp.value;
|
92470
92503
|
let scale = val / 100;
|
@@ -93253,11 +93286,12 @@ class Rte {
|
|
93253
93286
|
Array.prototype.forEach.call(elms, elm => {
|
93254
93287
|
elm.style.display = 'none';
|
93255
93288
|
});
|
93256
|
-
elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
93257
|
-
Array.prototype.forEach.call(elms, elm => {
|
93258
|
-
|
93259
|
-
});
|
93289
|
+
// elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
93290
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
93291
|
+
// elm.style.display = 'none';
|
93292
|
+
// });
|
93260
93293
|
}
|
93294
|
+
|
93261
93295
|
showAlignButtons() {
|
93262
93296
|
let separators = this.elementRteTool.querySelectorAll('.rte-separator');
|
93263
93297
|
Array.prototype.forEach.call(separators, separator => {
|
@@ -97242,7 +97276,39 @@ class SaveImages {
|
|
97242
97276
|
}
|
97243
97277
|
uploadImages(area) {
|
97244
97278
|
if (!area) return;
|
97279
|
+
|
97245
97280
|
//Check all images
|
97281
|
+
|
97282
|
+
const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
|
97283
|
+
divs.forEach(div => {
|
97284
|
+
let src = '';
|
97285
|
+
if (div.style.backgroundImage) {
|
97286
|
+
if (div.style.backgroundImage.indexOf('url(') !== -1) {
|
97287
|
+
src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
97288
|
+
}
|
97289
|
+
} else if (div.classList.contains('is-lightbox')) {
|
97290
|
+
src = div.getAttribute('href');
|
97291
|
+
} else if (div.classList.contains('block-click')) {
|
97292
|
+
src = div.getAttribute('data-modal-url');
|
97293
|
+
}
|
97294
|
+
if (src.includes('base64')) {
|
97295
|
+
if (this.opts.onBase64Upload) {
|
97296
|
+
let ext = 'jpg';
|
97297
|
+
if (src.includes('image/png')) {
|
97298
|
+
ext = 'png';
|
97299
|
+
}
|
97300
|
+
|
97301
|
+
//Read image (base64 string)
|
97302
|
+
let image = src;
|
97303
|
+
image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
|
97304
|
+
let filename = this.builder.util.makeId() + '.' + ext; //img.getAttribute('data-filename');
|
97305
|
+
|
97306
|
+
// console.log(div)
|
97307
|
+
this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
|
97308
|
+
}
|
97309
|
+
}
|
97310
|
+
});
|
97311
|
+
|
97246
97312
|
const images = area.querySelectorAll('img');
|
97247
97313
|
Array.prototype.forEach.call(images, img => {
|
97248
97314
|
let src = img.getAttribute('src');
|
@@ -105992,16 +106058,30 @@ ${answer}
|
|
105992
106058
|
}
|
105993
106059
|
|
105994
106060
|
getContainer() {
|
105995
|
-
let container, builderActive
|
106061
|
+
let container, builderActive;
|
105996
106062
|
builderActive = this.builder.doc.querySelector('.builder-active');
|
105997
106063
|
if (builderActive) container = builderActive;else {
|
105998
|
-
|
105999
|
-
|
106064
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
106065
|
+
// canvas mode
|
106000
106066
|
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
106001
106067
|
if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
|
106002
|
-
if (activeBlock)
|
106003
|
-
|
106068
|
+
if (activeBlock) {
|
106069
|
+
container = activeBlock.querySelector(this.builder.container);
|
106070
|
+
if (!container) container = this.builder.doc.querySelector(this.builder.container);
|
106071
|
+
} else {
|
106072
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106073
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
106074
|
+
if (!blockContainer) {
|
106075
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106076
|
+
}
|
106077
|
+
if (blockContainer) {
|
106078
|
+
container = blockContainer.querySelector(this.builder.container);
|
106079
|
+
} else {
|
106080
|
+
container = this.builder.doc.querySelector(this.builder.container);
|
106081
|
+
}
|
106082
|
+
}
|
106004
106083
|
} else {
|
106084
|
+
// standard mode
|
106005
106085
|
container = this.builder.doc.querySelector(this.builder.container);
|
106006
106086
|
}
|
106007
106087
|
}
|
@@ -106009,56 +106089,92 @@ ${answer}
|
|
106009
106089
|
}
|
106010
106090
|
renderImage(src) {
|
106011
106091
|
this.builder.saveForUndo();
|
106092
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
106093
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106094
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
106095
|
+
if (!blockContainer) {
|
106096
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106097
|
+
}
|
106098
|
+
if (!blockContainer) {
|
106099
|
+
this.builder.addPage();
|
106100
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106101
|
+
}
|
106102
|
+
let html = `
|
106103
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
106104
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
106105
|
+
</div>
|
106106
|
+
`;
|
106107
|
+
this.builder.addBlock(html, blockContainer);
|
106108
|
+
this.builder.settings.onChange();
|
106109
|
+
this.builder.settings.onRender();
|
106110
|
+
return;
|
106111
|
+
}
|
106012
106112
|
let container = this.getContainer();
|
106013
106113
|
if (!container) {
|
106014
|
-
|
106015
|
-
|
106016
|
-
|
106017
|
-
|
106018
|
-
|
106019
|
-
|
106020
|
-
<div class="is-
|
106021
|
-
|
106114
|
+
/*
|
106115
|
+
if(this.builder.canvas) {
|
106116
|
+
// Canvas Mode
|
106117
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106118
|
+
if(docContainer) {
|
106119
|
+
|
106120
|
+
// <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
106121
|
+
// <div class="is-container leading-12 size-17">
|
106122
|
+
// <div class="row"><div class="column"><img src="${src}"></div></div>
|
106123
|
+
// </div>
|
106124
|
+
// </div>
|
106125
|
+
let html = `
|
106126
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
106127
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
106022
106128
|
</div>
|
106023
|
-
|
106024
|
-
|
106025
|
-
|
106026
|
-
|
106027
|
-
|
106028
|
-
|
106029
|
-
|
106030
|
-
|
106031
|
-
this.builder.addBlock(html, blockContainer);
|
106032
|
-
}
|
106033
|
-
} else {
|
106034
|
-
this.util.showMessage(this.util.out('No text container found.'));
|
106035
|
-
this.dictation.finish(); // Must be called after finished
|
106036
|
-
return;
|
106129
|
+
`;
|
106130
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106131
|
+
this.builder.addBlock(html, blockContainer);
|
106132
|
+
}
|
106133
|
+
} else {
|
106134
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
106135
|
+
this.dictation.finish(); // Must be called after finished
|
106136
|
+
return;
|
106037
106137
|
}
|
106138
|
+
*/
|
106139
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
106140
|
+
this.dictation.finish(); // Must be called after finished
|
106141
|
+
return;
|
106038
106142
|
} else {
|
106039
|
-
|
106040
|
-
|
106041
|
-
|
106042
|
-
|
106143
|
+
/*
|
106144
|
+
if(this.builder.canvas) {
|
106145
|
+
// Canvas Mode
|
106146
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106147
|
+
if(docContainer) {
|
106148
|
+
|
106149
|
+
let html = `
|
106150
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
106151
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
106152
|
+
</div>
|
106153
|
+
`;
|
106154
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106155
|
+
this.builder.addBlock(html, blockContainer);
|
106156
|
+
}
|
106157
|
+
} else {
|
106158
|
+
// Normal
|
106043
106159
|
let html = `
|
106044
|
-
|
106045
|
-
|
106046
|
-
|
106047
|
-
|
106048
|
-
|
106049
|
-
|
106050
|
-
|
106051
|
-
} else {
|
106052
|
-
// Normal
|
106053
|
-
let html = `
|
106054
|
-
<div class="row"><div class="column"><img src="${src}"></div></div>
|
106055
|
-
`;
|
106056
|
-
container.insertAdjacentHTML('afterBegin', html);
|
106057
|
-
setTimeout(() => {
|
106058
|
-
container.firstElementChild.click();
|
106059
|
-
}, 300);
|
106060
|
-
this.builder.applyBehaviorOn(container);
|
106160
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
106161
|
+
`;
|
106162
|
+
container.insertAdjacentHTML('afterBegin', html);
|
106163
|
+
setTimeout(()=>{
|
106164
|
+
container.firstElementChild.click();
|
106165
|
+
}, 300);
|
106166
|
+
this.builder.applyBehaviorOn(container);
|
106061
106167
|
}
|
106168
|
+
*/
|
106169
|
+
// Normal
|
106170
|
+
let html = `
|
106171
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
106172
|
+
`;
|
106173
|
+
container.insertAdjacentHTML('afterBegin', html);
|
106174
|
+
setTimeout(() => {
|
106175
|
+
container.firstElementChild.click();
|
106176
|
+
}, 300);
|
106177
|
+
this.builder.applyBehaviorOn(container);
|
106062
106178
|
}
|
106063
106179
|
this.builder.settings.onChange();
|
106064
106180
|
this.builder.settings.onRender();
|
@@ -106071,50 +106187,87 @@ ${answer}
|
|
106071
106187
|
if (elm) {
|
106072
106188
|
html = elm.innerHTML;
|
106073
106189
|
}
|
106190
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
106191
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106192
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
106193
|
+
if (!blockContainer) {
|
106194
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106195
|
+
}
|
106196
|
+
if (!blockContainer) {
|
106197
|
+
this.builder.addPage();
|
106198
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106199
|
+
}
|
106200
|
+
html = `
|
106201
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
106202
|
+
<div class="is-container leading-12 size-17">
|
106203
|
+
${html}
|
106204
|
+
</div>
|
106205
|
+
</div>
|
106206
|
+
`;
|
106207
|
+
this.builder.addBlock(html, blockContainer);
|
106208
|
+
this.builder.settings.onChange();
|
106209
|
+
this.builder.settings.onRender();
|
106210
|
+
return;
|
106211
|
+
}
|
106074
106212
|
let container = this.getContainer();
|
106075
106213
|
if (!container) {
|
106076
|
-
|
106077
|
-
|
106078
|
-
|
106079
|
-
|
106080
|
-
|
106081
|
-
|
106082
|
-
|
106083
|
-
|
106084
|
-
|
106085
|
-
|
106086
|
-
|
106087
|
-
|
106088
|
-
|
106089
|
-
|
106090
|
-
|
106091
|
-
|
106092
|
-
|
106093
|
-
|
106214
|
+
/*
|
106215
|
+
if(this.builder.canvas) {
|
106216
|
+
// Canvas Mode
|
106217
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106218
|
+
if(docContainer) {
|
106219
|
+
|
106220
|
+
html = `
|
106221
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
106222
|
+
<div class="is-container leading-12 size-17">
|
106223
|
+
${html}
|
106224
|
+
</div>
|
106225
|
+
</div>
|
106226
|
+
`;
|
106227
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106228
|
+
this.builder.addBlock(html, blockContainer);
|
106229
|
+
}
|
106230
|
+
} else {
|
106231
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
106232
|
+
this.dictation.finish(); // Must be called after finished
|
106233
|
+
return;
|
106094
106234
|
}
|
106235
|
+
*/
|
106236
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
106237
|
+
this.dictation.finish(); // Must be called after finished
|
106238
|
+
return;
|
106095
106239
|
} else {
|
106096
|
-
|
106097
|
-
|
106098
|
-
|
106099
|
-
|
106100
|
-
|
106101
|
-
|
106102
|
-
|
106103
|
-
|
106104
|
-
|
106105
|
-
|
106106
|
-
|
106107
|
-
|
106108
|
-
|
106109
|
-
|
106110
|
-
|
106111
|
-
|
106112
|
-
|
106113
|
-
|
106114
|
-
container.
|
106115
|
-
|
106116
|
-
|
106240
|
+
/*
|
106241
|
+
if(this.builder.canvas) {
|
106242
|
+
// Canvas Mode
|
106243
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
106244
|
+
if(docContainer) {
|
106245
|
+
|
106246
|
+
html = `
|
106247
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
106248
|
+
<div class="is-container leading-12 size-17">
|
106249
|
+
${html}
|
106250
|
+
</div>
|
106251
|
+
</div>
|
106252
|
+
`;
|
106253
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
106254
|
+
this.builder.addBlock(html, blockContainer);
|
106255
|
+
}
|
106256
|
+
} else {
|
106257
|
+
// Normal
|
106258
|
+
container.insertAdjacentHTML('afterBegin', html);
|
106259
|
+
setTimeout(()=>{
|
106260
|
+
container.firstElementChild.click();
|
106261
|
+
}, 300);
|
106262
|
+
this.builder.applyBehaviorOn(container);
|
106117
106263
|
}
|
106264
|
+
*/
|
106265
|
+
// Normal
|
106266
|
+
container.insertAdjacentHTML('afterBegin', html);
|
106267
|
+
setTimeout(() => {
|
106268
|
+
container.firstElementChild.click();
|
106269
|
+
}, 300);
|
106270
|
+
this.builder.applyBehaviorOn(container);
|
106118
106271
|
}
|
106119
106272
|
this.builder.settings.onChange();
|
106120
106273
|
this.builder.settings.onRender();
|
@@ -107031,7 +107184,11 @@ class Common {
|
|
107031
107184
|
this.matrix3d = new Matrix3D();
|
107032
107185
|
return this.matrix3d.transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4);
|
107033
107186
|
}
|
107187
|
+
setZoom(scale) {
|
107188
|
+
this.zoom = scale;
|
107189
|
+
}
|
107034
107190
|
applyPercentage(block) {
|
107191
|
+
const zoom = this.zoom;
|
107035
107192
|
const rect = this.getRect(block);
|
107036
107193
|
const container = block.parentNode;
|
107037
107194
|
let isChildBlock = false;
|
@@ -107042,11 +107199,11 @@ class Common {
|
|
107042
107199
|
|
107043
107200
|
// const containerRect = container.getBoundingClientRect(); // if container has top/left
|
107044
107201
|
const containerRect = this.getRect(container); // if container has top/left
|
107045
|
-
|
107046
|
-
|
107202
|
+
let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
|
107203
|
+
let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
|
107047
107204
|
let isBlockFixed = block.classList.contains('block-steady');
|
107048
107205
|
if (isBlockFixed) {
|
107049
|
-
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top);
|
107206
|
+
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top) * zoom;
|
107050
107207
|
if (isNaN(dividerTop)) {
|
107051
107208
|
// there is possibility of 0/0
|
107052
107209
|
dividerTop = 1;
|
@@ -107055,7 +107212,7 @@ class Common {
|
|
107055
107212
|
if (isChildBlock) {
|
107056
107213
|
block.style.top = top + '%';
|
107057
107214
|
}
|
107058
|
-
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left);
|
107215
|
+
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left) * zoom;
|
107059
107216
|
if (isNaN(dividerLeft)) {
|
107060
107217
|
// there is possibility of 0/0
|
107061
107218
|
dividerLeft = 1;
|
@@ -107076,16 +107233,17 @@ class Common {
|
|
107076
107233
|
const height = block.offsetHeight / container.offsetHeight * 100;
|
107077
107234
|
block.style.width = width + '%';
|
107078
107235
|
block.style.height = height + '%';
|
107079
|
-
block.style.top = top + '%';
|
107080
|
-
block.style.left = left + '%';
|
107236
|
+
block.style.top = top / zoom + '%';
|
107237
|
+
block.style.left = left / zoom + '%';
|
107081
107238
|
if (block.classList.contains('height-auto')) block.style.height = '';
|
107082
107239
|
}
|
107083
107240
|
}
|
107084
107241
|
applyPixels(block) {
|
107242
|
+
const zoom = this.zoom;
|
107085
107243
|
const rect = this.getRect(block);
|
107086
107244
|
const containerRect = this.getRect(block.parentNode); // if container has top/left
|
107087
|
-
block.style.left = rect.left - containerRect.left + 'px';
|
107088
|
-
block.style.top = rect.top - containerRect.top + 'px';
|
107245
|
+
block.style.left = (rect.left - containerRect.left) / zoom + 'px';
|
107246
|
+
block.style.top = (rect.top - containerRect.top) / zoom + 'px';
|
107089
107247
|
block.style.width = block.offsetWidth + 'px';
|
107090
107248
|
}
|
107091
107249
|
updateHeight(block) {
|
@@ -107521,6 +107679,9 @@ class Ruler {
|
|
107521
107679
|
this.verticalRulerCenter = this.doc.getElementById('vertical-ruler-center');
|
107522
107680
|
this.setup();
|
107523
107681
|
}
|
107682
|
+
setZoom(scale) {
|
107683
|
+
this.zoom = scale;
|
107684
|
+
}
|
107524
107685
|
setup() {
|
107525
107686
|
this.elements = this.doc.querySelectorAll(this.selector);
|
107526
107687
|
}
|
@@ -107550,6 +107711,8 @@ class Ruler {
|
|
107550
107711
|
if (transform.includes('rotate') || transform.includes('matrix3d')) return;
|
107551
107712
|
let parentTransform = block.parentNode.style.transform;
|
107552
107713
|
if (parentTransform.includes('rotate')) return;
|
107714
|
+
if (this.zoom * 1 !== 1) return; // disable rulers on zoomed page
|
107715
|
+
|
107553
107716
|
this.hideRulers();
|
107554
107717
|
const rect = block.getBoundingClientRect();
|
107555
107718
|
const top = rect.top;
|
@@ -107911,6 +108074,11 @@ class Resizable {
|
|
107911
108074
|
win: this.win
|
107912
108075
|
});
|
107913
108076
|
}
|
108077
|
+
setZoom(scale) {
|
108078
|
+
this.zoom = scale;
|
108079
|
+
this.common.setZoom(scale);
|
108080
|
+
this.ruler.setZoom(scale);
|
108081
|
+
}
|
107914
108082
|
setup() {
|
107915
108083
|
this.elements.forEach(element => {
|
107916
108084
|
element.querySelectorAll('.handle').forEach(elm => elm.parentNode.removeChild(elm));
|
@@ -108080,35 +108248,38 @@ class Resizable {
|
|
108080
108248
|
this.ruler.hideRulers();
|
108081
108249
|
}
|
108082
108250
|
resizeTopLeft(deltaX, deltaY) {
|
108083
|
-
|
108084
|
-
this.target.style.
|
108251
|
+
const zoom = this.zoom;
|
108252
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108253
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
108085
108254
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
108086
108255
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
108087
108256
|
if (this.clonedTarget) {
|
108088
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
108089
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
108257
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108258
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
108090
108259
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
108091
108260
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
108092
108261
|
}
|
108093
108262
|
}
|
108094
108263
|
resizeTopRight(deltaX, deltaY) {
|
108264
|
+
const zoom = this.zoom;
|
108095
108265
|
this.target.style.width = this.initialWidth + deltaX + 'px';
|
108096
|
-
this.target.style.top = this.initialTop + deltaY + 'px';
|
108266
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
108097
108267
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
108098
108268
|
if (this.clonedTarget) {
|
108099
108269
|
this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
|
108100
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
108270
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
108101
108271
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
108102
108272
|
}
|
108103
108273
|
}
|
108104
108274
|
resizeBottomLeft(deltaX, deltaY) {
|
108275
|
+
const zoom = this.zoom;
|
108105
108276
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
108106
108277
|
this.target.style.height = this.initialHeight + deltaY + 'px';
|
108107
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
108278
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108108
108279
|
if (this.clonedTarget) {
|
108109
108280
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
108110
108281
|
this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
|
108111
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
108282
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108112
108283
|
}
|
108113
108284
|
}
|
108114
108285
|
resizeBottomRight(deltaX, deltaY) {
|
@@ -108120,10 +108291,11 @@ class Resizable {
|
|
108120
108291
|
}
|
108121
108292
|
}
|
108122
108293
|
resizeTop(deltaY) {
|
108123
|
-
|
108294
|
+
const zoom = this.zoom;
|
108295
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
108124
108296
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
108125
108297
|
if (this.clonedTarget) {
|
108126
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
108298
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
108127
108299
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
108128
108300
|
}
|
108129
108301
|
}
|
@@ -108134,11 +108306,12 @@ class Resizable {
|
|
108134
108306
|
}
|
108135
108307
|
}
|
108136
108308
|
resizeLeft(deltaX) {
|
108309
|
+
const zoom = this.zoom;
|
108137
108310
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
108138
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
108311
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108139
108312
|
if (this.clonedTarget) {
|
108140
108313
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
108141
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
108314
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
108142
108315
|
}
|
108143
108316
|
}
|
108144
108317
|
resizeRight(deltaX) {
|
@@ -108213,20 +108386,36 @@ class Resizable {
|
|
108213
108386
|
|
108214
108387
|
const largeScreenBreakpoint = 1920; //1920
|
108215
108388
|
|
108216
|
-
|
108217
|
-
|
108218
|
-
|
108219
|
-
|
108220
|
-
|
108221
|
-
|
108222
|
-
|
108223
|
-
|
108389
|
+
let isPrint = false;
|
108390
|
+
let elmBox = target.closest('[data-pagesize]');
|
108391
|
+
if (elmBox) {
|
108392
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
108393
|
+
isPrint = true;
|
108394
|
+
}
|
108395
|
+
}
|
108396
|
+
if (isPrint) {
|
108224
108397
|
target.setAttribute('data--t', target.style.top);
|
108225
108398
|
target.setAttribute('data--l', target.style.left);
|
108226
108399
|
target.setAttribute('data--b', target.style.bottom);
|
108227
108400
|
target.setAttribute('data--r', target.style.right);
|
108228
108401
|
target.setAttribute('data--w', target.style.width);
|
108229
108402
|
target.setAttribute('data--h', target.style.height);
|
108403
|
+
} else {
|
108404
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
108405
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
108406
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
108407
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
108408
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
108409
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
108410
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
108411
|
+
} else {
|
108412
|
+
target.setAttribute('data--t', target.style.top);
|
108413
|
+
target.setAttribute('data--l', target.style.left);
|
108414
|
+
target.setAttribute('data--b', target.style.bottom);
|
108415
|
+
target.setAttribute('data--r', target.style.right);
|
108416
|
+
target.setAttribute('data--w', target.style.width);
|
108417
|
+
target.setAttribute('data--h', target.style.height);
|
108418
|
+
}
|
108230
108419
|
}
|
108231
108420
|
target.removeAttribute('data-prev'); // reset
|
108232
108421
|
target.removeAttribute('data-fluid');
|
@@ -108269,6 +108458,11 @@ class Draggable {
|
|
108269
108458
|
win: this.win
|
108270
108459
|
});
|
108271
108460
|
}
|
108461
|
+
setZoom(scale) {
|
108462
|
+
this.zoom = scale;
|
108463
|
+
this.common.setZoom(scale);
|
108464
|
+
this.ruler.setZoom(scale);
|
108465
|
+
}
|
108272
108466
|
setup() {
|
108273
108467
|
this.elements = this.doc.querySelectorAll(this.selector);
|
108274
108468
|
this.elements.forEach(element => {
|
@@ -108409,8 +108603,9 @@ class Draggable {
|
|
108409
108603
|
const startY = target.getAttribute('data-starty');
|
108410
108604
|
const newX = x - startX;
|
108411
108605
|
const newY = y - startY;
|
108412
|
-
|
108413
|
-
target.style.
|
108606
|
+
const zoom = this.zoom;
|
108607
|
+
target.style.left = newX / zoom + 'px';
|
108608
|
+
target.style.top = newY / zoom + 'px';
|
108414
108609
|
}
|
108415
108610
|
}
|
108416
108611
|
handleDragEnd() {
|
@@ -108460,20 +108655,36 @@ class Draggable {
|
|
108460
108655
|
|
108461
108656
|
const largeScreenBreakpoint = 1920; //1920
|
108462
108657
|
|
108463
|
-
|
108464
|
-
|
108465
|
-
|
108466
|
-
|
108467
|
-
|
108468
|
-
|
108469
|
-
|
108470
|
-
|
108658
|
+
let isPrint = false;
|
108659
|
+
let elmBox = target.closest('[data-pagesize]');
|
108660
|
+
if (elmBox) {
|
108661
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
108662
|
+
isPrint = true;
|
108663
|
+
}
|
108664
|
+
}
|
108665
|
+
if (isPrint) {
|
108471
108666
|
target.setAttribute('data--t', target.style.top);
|
108472
108667
|
target.setAttribute('data--l', target.style.left);
|
108473
108668
|
target.setAttribute('data--b', target.style.bottom);
|
108474
108669
|
target.setAttribute('data--r', target.style.right);
|
108475
108670
|
target.setAttribute('data--w', target.style.width);
|
108476
108671
|
target.setAttribute('data--h', target.style.height);
|
108672
|
+
} else {
|
108673
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
108674
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
108675
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
108676
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
108677
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
108678
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
108679
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
108680
|
+
} else {
|
108681
|
+
target.setAttribute('data--t', target.style.top);
|
108682
|
+
target.setAttribute('data--l', target.style.left);
|
108683
|
+
target.setAttribute('data--b', target.style.bottom);
|
108684
|
+
target.setAttribute('data--r', target.style.right);
|
108685
|
+
target.setAttribute('data--w', target.style.width);
|
108686
|
+
target.setAttribute('data--h', target.style.height);
|
108687
|
+
}
|
108477
108688
|
}
|
108478
108689
|
target.removeAttribute('data-prev'); // reset
|
108479
108690
|
target.removeAttribute('data-fluid');
|
@@ -108890,7 +109101,8 @@ class EditableBlocks {
|
|
108890
109101
|
// onMultipleSelect: () => {},
|
108891
109102
|
disableOnMobile: 0,
|
108892
109103
|
rotate: true,
|
108893
|
-
clone: true
|
109104
|
+
clone: true,
|
109105
|
+
zoom: 1
|
108894
109106
|
// onDelete: () = {}
|
108895
109107
|
};
|
108896
109108
|
|
@@ -109155,6 +109367,12 @@ class EditableBlocks {
|
|
109155
109367
|
win: this.win,
|
109156
109368
|
onDuplicate: this.onDuplicate
|
109157
109369
|
});
|
109370
|
+
this.setZoom(this.zoom);
|
109371
|
+
}
|
109372
|
+
setZoom(scale) {
|
109373
|
+
this.common.setZoom(scale);
|
109374
|
+
this.draggable.setZoom(scale);
|
109375
|
+
this.resizable.setZoom(scale);
|
109158
109376
|
}
|
109159
109377
|
duplicate() {
|
109160
109378
|
this.common.duplicate();
|
@@ -109250,32 +109468,58 @@ class BlockModal {
|
|
109250
109468
|
let html = `
|
109251
109469
|
<div class="is-modal is-modal-content editblock" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
109252
109470
|
<div class="is-modal-bar is-draggable">
|
109253
|
-
|
109471
|
+
<span class="modal-title"></span>
|
109254
109472
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
109255
109473
|
</div>
|
109256
|
-
<div class="modal-none" style="
|
109257
|
-
|
109474
|
+
<div class="modal-none" style="display:none;padding-bottom:28px;">
|
109475
|
+
|
109476
|
+
<div>${util.out('Please select a block or page.')}</div>
|
109477
|
+
|
109258
109478
|
</div>
|
109479
|
+
|
109480
|
+
<div class="modal-page-content" style="display:none;padding-bottom:28px;">
|
109481
|
+
|
109482
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
109483
|
+
<div style="display:flex;">
|
109484
|
+
<button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
|
109485
|
+
<button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
109486
|
+
</div>
|
109487
|
+
|
109488
|
+
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
109489
|
+
<div>
|
109490
|
+
<div class="asset-page-preview" style="display:none"></div>
|
109491
|
+
<div style="display: flex">
|
109492
|
+
<button title="${util.out('Image')}" class="btn-page-bgimage">
|
109493
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
109494
|
+
<span>${util.out('Image')}</span>
|
109495
|
+
</button>
|
109496
|
+
<button title="${util.out('Select')}" class="btn-page-asset">${this.builder.opts.selectIcon}</button>
|
109497
|
+
<button title="${util.out('Remove')}" class="btn-page-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
109498
|
+
<button title="${util.out('Adjust')}" class="btn-page-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
109499
|
+
</div>
|
109500
|
+
</div>
|
109501
|
+
|
109502
|
+
</div>
|
109503
|
+
|
109259
109504
|
<div class="modal-content">
|
109260
109505
|
|
109261
109506
|
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
109262
109507
|
<div style="display:flex;">
|
109263
109508
|
<button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
|
109264
|
-
<button title="${util.out('Gradient')}" class="btn-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
109509
|
+
<button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
109265
109510
|
</div>
|
109266
109511
|
|
109267
109512
|
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
109268
109513
|
<div>
|
109269
|
-
<div class="asset-preview" style="display:none"></div>
|
109514
|
+
<div class="asset-block-preview" style="display:none"></div>
|
109270
109515
|
<div style="display: flex">
|
109271
|
-
<
|
109272
|
-
<button title="${util.out('Image')}" class="btn-bgimage">
|
109516
|
+
<button title="${util.out('Image')}" class="btn-block-bgimage">
|
109273
109517
|
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
109274
109518
|
<span>${util.out('Image')}</span>
|
109275
109519
|
</button>
|
109276
|
-
<button title="${util.out('Select')}" class="btn-asset">${this.builder.opts.selectIcon}</button>
|
109277
|
-
<button title="${util.out('Remove')}" class="btn-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
109278
|
-
<button title="${util.out('Adjust')}" class="btn-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
109520
|
+
<button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
|
109521
|
+
<button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
109522
|
+
<button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
109279
109523
|
</div>
|
109280
109524
|
</div>
|
109281
109525
|
|
@@ -109397,9 +109641,49 @@ class BlockModal {
|
|
109397
109641
|
this.hide();
|
109398
109642
|
});
|
109399
109643
|
|
109400
|
-
// Background color
|
109644
|
+
// Page Background color
|
109645
|
+
|
109646
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
109647
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
109648
|
+
btnPageColorPick.addEventListener('click', () => {
|
109649
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
109650
|
+
|
109651
|
+
let page = this.getPage();
|
109652
|
+
let bgcolor = btnPageColorPick.style.backgroundColor;
|
109653
|
+
this.builder.colorPicker.open(s => {
|
109654
|
+
page.style.backgroundColor = s;
|
109655
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
109656
|
+
page.style.backgroundImage = ''; // remove gradient
|
109657
|
+
btnPageGradient.style.backgroundImage = ''; // preview
|
109658
|
+
}
|
109401
109659
|
|
109402
|
-
|
109660
|
+
btnPageColorPick.style.backgroundColor = s; // preview
|
109661
|
+
|
109662
|
+
this.builder.onChange();
|
109663
|
+
}, bgcolor, () => {
|
109664
|
+
btnPageColorPick.removeAttribute('data-focus');
|
109665
|
+
btnPageColorPick.focus();
|
109666
|
+
});
|
109667
|
+
btnPageColorPick.setAttribute('data-focus', true);
|
109668
|
+
});
|
109669
|
+
btnPageGradient.addEventListener('click', () => {
|
109670
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
109671
|
+
|
109672
|
+
let page = this.getPage();
|
109673
|
+
let gradientPicker = this.builder.gradientpicker();
|
109674
|
+
gradientPicker.open(page, () => {
|
109675
|
+
page.style.backgroundColor = '';
|
109676
|
+
btnPageColorPick.style.backgroundColor = ''; // preview
|
109677
|
+
|
109678
|
+
this.updatePanelImage('');
|
109679
|
+
this.builder.onChange();
|
109680
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage; // preview
|
109681
|
+
});
|
109682
|
+
});
|
109683
|
+
|
109684
|
+
// Block Background color
|
109685
|
+
|
109686
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
109403
109687
|
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
109404
109688
|
btnColorPick.addEventListener('click', () => {
|
109405
109689
|
this.builder.uo.saveForUndo(true); // checkLater = true
|
@@ -109437,10 +109721,63 @@ class BlockModal {
|
|
109437
109721
|
});
|
109438
109722
|
});
|
109439
109723
|
|
109440
|
-
// Background Image
|
109724
|
+
// Page Background Image
|
109725
|
+
|
109726
|
+
this.pageImagePreview = modal.querySelector('.asset-page-preview');
|
109727
|
+
const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
|
109728
|
+
if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
|
109729
|
+
// Background image
|
109730
|
+
const page = this.getPage();
|
109731
|
+
let src = '';
|
109732
|
+
if (page) if (page.style.backgroundImage) {
|
109733
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
109734
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
109735
|
+
}
|
109736
|
+
}
|
109737
|
+
this.openImagePicker(src, url => {
|
109738
|
+
const page = this.getPage();
|
109739
|
+
this.builder.uo.saveForUndo();
|
109740
|
+
page.style.backgroundImage = `url("${url}")`;
|
109741
|
+
page.style.backgroundSize = 'cover';
|
109742
|
+
page.style.backgroundRepeat = 'no-repeat';
|
109743
|
+
const div = this.pageImagePreview;
|
109744
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
109745
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
109746
|
+
btnPageAdjust.style.display = 'none';
|
109747
|
+
btnPageClear.style.display = 'none';
|
109748
|
+
if (url !== '') {
|
109749
|
+
div.innerHTML = `<img src="${url}">`;
|
109750
|
+
btnPageAdjust.style.display = 'flex';
|
109751
|
+
btnPageClear.style.display = 'flex';
|
109752
|
+
} else {
|
109753
|
+
div.innerHTML = '';
|
109754
|
+
}
|
109755
|
+
this.builder.onChange();
|
109756
|
+
}, btnPageBgImage);
|
109757
|
+
});
|
109758
|
+
const btnPageOpenAsset = modal.querySelector('.btn-page-asset');
|
109759
|
+
btnPageOpenAsset.addEventListener('click', () => {
|
109760
|
+
this.builder.openAssetSelect('image', src => {
|
109761
|
+
this.updatePageImage(src);
|
109762
|
+
}, btnPageOpenAsset);
|
109763
|
+
});
|
109764
|
+
|
109765
|
+
// Show/hide button
|
109766
|
+
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnPageOpenAsset.style.display = 'none';
|
109767
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
109768
|
+
btnPageClear.addEventListener('click', () => {
|
109769
|
+
this.updatePageImage('');
|
109770
|
+
});
|
109771
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
109772
|
+
btnPageAdjust.addEventListener('click', () => {
|
109773
|
+
let page = this.getPage();
|
109774
|
+
this.builder.colTool.openImageAdjust(page, btnPageAdjust);
|
109775
|
+
});
|
109776
|
+
|
109777
|
+
// Block Background Image
|
109441
109778
|
|
109442
|
-
this.imagePreview = modal.querySelector('.asset-preview');
|
109443
|
-
const btnBgImage = modal.querySelector('.btn-bgimage');
|
109779
|
+
this.imagePreview = modal.querySelector('.asset-block-preview');
|
109780
|
+
const btnBgImage = modal.querySelector('.btn-block-bgimage');
|
109444
109781
|
if (btnBgImage) dom.addEventListener(btnBgImage, 'click', () => {
|
109445
109782
|
// Background image
|
109446
109783
|
const blockOverlay = this.blockOverlay();
|
@@ -109457,8 +109794,8 @@ class BlockModal {
|
|
109457
109794
|
blockOverlay.style.backgroundSize = 'cover';
|
109458
109795
|
blockOverlay.style.backgroundRepeat = 'no-repeat';
|
109459
109796
|
const div = this.imagePreview;
|
109460
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
109461
|
-
const btnClear = modal.querySelector('.btn-clear');
|
109797
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
109798
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
109462
109799
|
btnAdjust.style.display = 'none';
|
109463
109800
|
btnClear.style.display = 'none';
|
109464
109801
|
if (url !== '') {
|
@@ -109471,7 +109808,7 @@ class BlockModal {
|
|
109471
109808
|
this.builder.onChange();
|
109472
109809
|
}, btnBgImage);
|
109473
109810
|
});
|
109474
|
-
const btnOpenAsset = modal.querySelector('.btn-asset');
|
109811
|
+
const btnOpenAsset = modal.querySelector('.btn-block-asset');
|
109475
109812
|
btnOpenAsset.addEventListener('click', () => {
|
109476
109813
|
this.builder.openAssetSelect('image', src => {
|
109477
109814
|
this.updateImage(src);
|
@@ -109480,11 +109817,11 @@ class BlockModal {
|
|
109480
109817
|
|
109481
109818
|
// Show/hide button
|
109482
109819
|
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none';
|
109483
|
-
const btnClear = modal.querySelector('.btn-clear');
|
109820
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
109484
109821
|
btnClear.addEventListener('click', () => {
|
109485
109822
|
this.updateImage('');
|
109486
109823
|
});
|
109487
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
109824
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
109488
109825
|
btnAdjust.addEventListener('click', () => {
|
109489
109826
|
let blockOverlay = this.blockOverlay();
|
109490
109827
|
this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
|
@@ -109687,6 +110024,7 @@ class BlockModal {
|
|
109687
110024
|
target.classList.add('locked');
|
109688
110025
|
this.builder.eb.draggable.disableDrag(target);
|
109689
110026
|
this.lock(target);
|
110027
|
+
this.realtime();
|
109690
110028
|
});
|
109691
110029
|
} else {
|
109692
110030
|
elms.forEach(target => {
|
@@ -109715,6 +110053,12 @@ class BlockModal {
|
|
109715
110053
|
}
|
109716
110054
|
});
|
109717
110055
|
}
|
110056
|
+
} // constructor
|
110057
|
+
|
110058
|
+
getPage() {
|
110059
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
110060
|
+
const page = docContainer.querySelector('.box-select');
|
110061
|
+
return page;
|
109718
110062
|
}
|
109719
110063
|
lock() {
|
109720
110064
|
// target
|
@@ -109756,66 +110100,82 @@ class BlockModal {
|
|
109756
110100
|
}
|
109757
110101
|
realtime() {
|
109758
110102
|
const modal = this.modal;
|
110103
|
+
const page = this.getPage();
|
110104
|
+
const block = this.blockSelected();
|
110105
|
+
if (block) {
|
110106
|
+
const btnClearBreakpoints = modal.querySelector('.btn-clear-breakpoint');
|
110107
|
+
let hasBreakpoints = false;
|
110108
|
+
var attributes = block.attributes;
|
110109
|
+
for (var i = 0; i < attributes.length; i++) {
|
110110
|
+
let item = attributes[i].name;
|
110111
|
+
if (item.includes('data--t-') || item.includes('data--b-' )) {
|
110112
|
+
// has breakpoints
|
110113
|
+
hasBreakpoints = true;
|
110114
|
+
}
|
110115
|
+
}
|
110116
|
+
if (hasBreakpoints) {
|
110117
|
+
btnClearBreakpoints.style.display = '';
|
110118
|
+
} else {
|
110119
|
+
btnClearBreakpoints.style.display = 'none';
|
110120
|
+
}
|
109759
110121
|
|
109760
|
-
|
109761
|
-
|
109762
|
-
|
109763
|
-
|
109764
|
-
|
109765
|
-
|
110122
|
+
// Background image
|
110123
|
+
const blockOverlay = this.blockOverlay();
|
110124
|
+
let src = '';
|
110125
|
+
if (blockOverlay) if (blockOverlay.style.backgroundImage) {
|
110126
|
+
if (blockOverlay.style.backgroundImage.indexOf('url(') !== -1) {
|
110127
|
+
src = blockOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
110128
|
+
}
|
109766
110129
|
}
|
109767
|
-
}
|
109768
110130
|
|
109769
|
-
|
109770
|
-
|
110131
|
+
// Update preview
|
110132
|
+
this.updatePanelImage(src);
|
109771
110133
|
|
109772
|
-
|
109773
|
-
|
109774
|
-
|
109775
|
-
|
109776
|
-
|
109777
|
-
|
109778
|
-
|
109779
|
-
|
109780
|
-
|
110134
|
+
// Show/hide grayscale
|
110135
|
+
const divGrayscale = modal.querySelector('.label.grayscale');
|
110136
|
+
if (src === '') {
|
110137
|
+
this.imagePreview.style.display = 'none';
|
110138
|
+
divGrayscale.style.display = 'none';
|
110139
|
+
} else {
|
110140
|
+
this.imagePreview.style.display = '';
|
110141
|
+
divGrayscale.style.display = '';
|
110142
|
+
}
|
109781
110143
|
|
109782
|
-
|
109783
|
-
|
109784
|
-
|
109785
|
-
|
109786
|
-
|
109787
|
-
|
109788
|
-
|
110144
|
+
// Grayscale
|
110145
|
+
const chkGrayscale = modal.querySelector('.chk-grayscale');
|
110146
|
+
chkGrayscale.checked = false;
|
110147
|
+
if (blockOverlay) {
|
110148
|
+
if (blockOverlay.style.filter) {
|
110149
|
+
if (blockOverlay.style.filter.indexOf('grayscale') !== -1) {
|
110150
|
+
chkGrayscale.checked = true;
|
110151
|
+
}
|
109789
110152
|
}
|
109790
110153
|
}
|
109791
|
-
}
|
109792
110154
|
|
109793
|
-
|
109794
|
-
|
109795
|
-
|
109796
|
-
|
109797
|
-
|
109798
|
-
|
109799
|
-
|
109800
|
-
|
110155
|
+
// Background color
|
110156
|
+
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
110157
|
+
if (blockOverlay) {
|
110158
|
+
let bgcolor = blockOverlay.style.backgroundColor;
|
110159
|
+
btnColorPick.style.backgroundColor = bgcolor; //preview
|
110160
|
+
} else {
|
110161
|
+
btnColorPick.style.backgroundColor = ''; //preview
|
110162
|
+
}
|
109801
110163
|
|
109802
|
-
|
109803
|
-
|
109804
|
-
|
109805
|
-
|
109806
|
-
|
110164
|
+
// Gradient
|
110165
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
110166
|
+
if (blockOverlay) {
|
110167
|
+
if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
|
110168
|
+
btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage;
|
110169
|
+
} else {
|
110170
|
+
btnGradient.style.backgroundImage = '';
|
110171
|
+
}
|
109807
110172
|
} else {
|
109808
110173
|
btnGradient.style.backgroundImage = '';
|
109809
110174
|
}
|
109810
|
-
|
109811
|
-
|
109812
|
-
|
109813
|
-
|
109814
|
-
btnClearText.style.display = 'none';
|
109815
|
-
const divContentColor = modal.querySelector('.div-content-textcolor');
|
109816
|
-
divContentColor.style.display = 'none';
|
109817
|
-
const block = this.blockSelected();
|
109818
|
-
if (block) {
|
110175
|
+
const btnClearText = modal.querySelector('.btn-clear-text');
|
110176
|
+
btnClearText.style.display = 'none';
|
110177
|
+
const divContentColor = modal.querySelector('.div-content-textcolor');
|
110178
|
+
divContentColor.style.display = 'none';
|
109819
110179
|
if (block.querySelector('.is-container')) {
|
109820
110180
|
btnClearText.style.display = '';
|
109821
110181
|
divContentColor.style.display = '';
|
@@ -109933,6 +110293,45 @@ class BlockModal {
|
|
109933
110293
|
inpHeight.value = '';
|
109934
110294
|
inpHeightUnit.value = '%';
|
109935
110295
|
}
|
110296
|
+
} else if (page) {
|
110297
|
+
// Background image
|
110298
|
+
let src = '';
|
110299
|
+
if (page) if (page.style.backgroundImage) {
|
110300
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
110301
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
110302
|
+
}
|
110303
|
+
}
|
110304
|
+
|
110305
|
+
// Update preview
|
110306
|
+
this.updatePanelPageImage(src);
|
110307
|
+
|
110308
|
+
// Show/hide
|
110309
|
+
if (src === '') {
|
110310
|
+
this.pageImagePreview.style.display = 'none';
|
110311
|
+
} else {
|
110312
|
+
this.pageImagePreview.style.display = '';
|
110313
|
+
}
|
110314
|
+
|
110315
|
+
// Background color
|
110316
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
110317
|
+
if (page) {
|
110318
|
+
let bgcolor = page.style.backgroundColor;
|
110319
|
+
btnPageColorPick.style.backgroundColor = bgcolor; //preview
|
110320
|
+
} else {
|
110321
|
+
btnPageColorPick.style.backgroundColor = ''; //preview
|
110322
|
+
}
|
110323
|
+
|
110324
|
+
// Gradient
|
110325
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
110326
|
+
if (page) {
|
110327
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
110328
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage;
|
110329
|
+
} else {
|
110330
|
+
btnPageGradient.style.backgroundImage = '';
|
110331
|
+
}
|
110332
|
+
} else {
|
110333
|
+
btnPageGradient.style.backgroundImage = '';
|
110334
|
+
}
|
109936
110335
|
}
|
109937
110336
|
}
|
109938
110337
|
openImagePicker(currentUrl, callback, btn) {
|
@@ -109954,6 +110353,43 @@ class BlockModal {
|
|
109954
110353
|
}, false, this.builder.assetPanelFullScreen);
|
109955
110354
|
if (btn) btn.setAttribute('data-focus', true);
|
109956
110355
|
}
|
110356
|
+
updatePageImage(src) {
|
110357
|
+
this.builder.uo.saveForUndo();
|
110358
|
+
let page = this.getPage();
|
110359
|
+
page.style.backgroundImage = 'url(\'' + src + '\')';
|
110360
|
+
|
110361
|
+
// Reset position & filter (grayscale)
|
110362
|
+
page.style.filter = '';
|
110363
|
+
page.style.backgroundSize = '';
|
110364
|
+
page.style.backgroundPosition = '50% 60%';
|
110365
|
+
page.removeAttribute('data-bg-xs');
|
110366
|
+
page.removeAttribute('data-bg-sm');
|
110367
|
+
page.removeAttribute('data-bg-md');
|
110368
|
+
page.removeAttribute('data-bg-lg');
|
110369
|
+
this.updatePanelPageImage(src);
|
110370
|
+
this.builder.onChange();
|
110371
|
+
}
|
110372
|
+
updatePanelPageImage(src) {
|
110373
|
+
const modal = this.modal;
|
110374
|
+
let previewHtml;
|
110375
|
+
if (!src) previewHtml = '';else previewHtml = `
|
110376
|
+
<img src="${src}">
|
110377
|
+
`;
|
110378
|
+
this.pageImagePreview.innerHTML = previewHtml;
|
110379
|
+
|
110380
|
+
// Show/hide image-related controls
|
110381
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
110382
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
110383
|
+
if (src === '') {
|
110384
|
+
btnPageClear.style.display = 'none';
|
110385
|
+
btnPageAdjust.style.display = 'none';
|
110386
|
+
} else {
|
110387
|
+
btnPageClear.style.display = '';
|
110388
|
+
btnPageAdjust.style.display = '';
|
110389
|
+
}
|
110390
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
110391
|
+
btnPageGradient.style.backgroundImage = '';
|
110392
|
+
}
|
109957
110393
|
updateImage(src) {
|
109958
110394
|
this.builder.uo.saveForUndo();
|
109959
110395
|
let blockOverlay = this.blockOverlay();
|
@@ -109979,8 +110415,8 @@ class BlockModal {
|
|
109979
110415
|
this.imagePreview.innerHTML = previewHtml;
|
109980
110416
|
|
109981
110417
|
// Show/hide image-related controls
|
109982
|
-
const btnClear = modal.querySelector('.btn-clear');
|
109983
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
110418
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
110419
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
109984
110420
|
if (src === '') {
|
109985
110421
|
btnClear.style.display = 'none';
|
109986
110422
|
btnAdjust.style.display = 'none';
|
@@ -109988,7 +110424,7 @@ class BlockModal {
|
|
109988
110424
|
btnClear.style.display = '';
|
109989
110425
|
btnAdjust.style.display = '';
|
109990
110426
|
}
|
109991
|
-
const btnGradient = modal.querySelector('.btn-gradient');
|
110427
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
109992
110428
|
btnGradient.style.backgroundImage = '';
|
109993
110429
|
}
|
109994
110430
|
show() {
|
@@ -110008,22 +110444,48 @@ class BlockModal {
|
|
110008
110444
|
}
|
110009
110445
|
this.util.showModal(modal);
|
110010
110446
|
this.realtime();
|
110011
|
-
this.handleBlockClick =
|
110012
|
-
|
110013
|
-
|
110014
|
-
|
110015
|
-
|
110447
|
+
this.handleBlockClick = () => {
|
110448
|
+
this.showHideControls();
|
110449
|
+
};
|
110450
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
110451
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
110452
|
+
if (this.builder.iframe) {
|
110453
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
110454
|
+
}
|
110455
|
+
this.showHideControls();
|
110456
|
+
}
|
110457
|
+
showHideControls() {
|
110458
|
+
const modal = this.modal;
|
110459
|
+
const content1 = modal.querySelector('.modal-none');
|
110460
|
+
const content2 = modal.querySelector('.modal-content');
|
110461
|
+
const content3 = modal.querySelector('.modal-page-content');
|
110462
|
+
const activeBlock = this.builder.doc.querySelector('.is-block.active');
|
110463
|
+
const page = this.getPage();
|
110464
|
+
const modalTitle = modal.querySelector('.modal-title');
|
110465
|
+
if (activeBlock) {
|
110466
|
+
if (!activeBlock.closest('.multi')) {
|
110016
110467
|
content1.style.display = 'none';
|
110017
110468
|
content2.style.display = '';
|
110018
|
-
|
110469
|
+
content3.style.display = 'none';
|
110470
|
+
modalTitle.innerHTML = this.util.out('Block');
|
110471
|
+
this.realtime();
|
110019
110472
|
} else {
|
110020
|
-
content1.style.display = '';
|
110473
|
+
content1.style.display = 'none';
|
110021
110474
|
content2.style.display = 'none';
|
110475
|
+
content3.style.display = '';
|
110476
|
+
modalTitle.innerHTML = this.util.out('Page');
|
110477
|
+
this.realtime();
|
110022
110478
|
}
|
110023
|
-
}
|
110024
|
-
|
110025
|
-
|
110026
|
-
|
110479
|
+
} else if (page) {
|
110480
|
+
content1.style.display = 'none';
|
110481
|
+
content2.style.display = 'none';
|
110482
|
+
content3.style.display = '';
|
110483
|
+
modalTitle.innerHTML = this.util.out('Page');
|
110484
|
+
this.realtime();
|
110485
|
+
} else {
|
110486
|
+
content1.style.display = '';
|
110487
|
+
content2.style.display = 'none';
|
110488
|
+
content3.style.display = 'none';
|
110027
110489
|
}
|
110028
110490
|
}
|
110029
110491
|
hide() {
|
@@ -110036,11 +110498,380 @@ class BlockModal {
|
|
110036
110498
|
}
|
110037
110499
|
}
|
110038
110500
|
|
110501
|
+
class PageSize {
|
110502
|
+
constructor(builder) {
|
110503
|
+
this.builder = builder;
|
110504
|
+
const util = this.builder.util;
|
110505
|
+
this.util = util;
|
110506
|
+
const builderStuff = this.builder.builderStuff;
|
110507
|
+
this.builderStuff = builderStuff;
|
110508
|
+
const dom = this.builder.dom;
|
110509
|
+
this.dom = dom;
|
110510
|
+
}
|
110511
|
+
open() {
|
110512
|
+
const builderStuff = this.builderStuff;
|
110513
|
+
const util = this.util;
|
110514
|
+
const dom = this.dom;
|
110515
|
+
let modal = builderStuff.querySelector('.is-modal.pagesize');
|
110516
|
+
if (!modal) {
|
110517
|
+
const html = `
|
110518
|
+
<div class="is-modal pagesize" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
110519
|
+
<div class="is-modal-content">
|
110520
|
+
|
110521
|
+
<div class="div-page-sizes">
|
110522
|
+
<button title="Web" data-pagesize="100%,100vh,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (full)</button>
|
110523
|
+
<button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
|
110524
|
+
<button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
|
110525
|
+
<button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
|
110526
|
+
<button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
|
110527
|
+
<button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
|
110528
|
+
<button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
|
110529
|
+
<button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
|
110530
|
+
<button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
|
110531
|
+
<button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
|
110532
|
+
<button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
|
110533
|
+
<button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
|
110534
|
+
<button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
|
110535
|
+
<button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
|
110536
|
+
<button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
|
110537
|
+
<button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
|
110538
|
+
<button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
|
110539
|
+
<button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
|
110540
|
+
</div>
|
110541
|
+
|
110542
|
+
<div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
|
110543
|
+
<div>
|
110544
|
+
<label for="inpPageWidth" style="display:block">${util.out('Width')}:</label>
|
110545
|
+
<input id="inpPageWidth" class="input-width" type="text">
|
110546
|
+
</div>
|
110547
|
+
<div>
|
110548
|
+
<label for="inpPageWidth" style="display:block">${util.out('Height')}:</label>
|
110549
|
+
<input id="inpPageHeight" class="input-height" type="text">
|
110550
|
+
</div>
|
110551
|
+
</div>
|
110552
|
+
|
110553
|
+
<div style="text-align:right;margin-top:20px;display:none">
|
110554
|
+
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
110555
|
+
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
110556
|
+
</div>
|
110557
|
+
|
110558
|
+
</div>
|
110559
|
+
</div>
|
110560
|
+
<div class="is-modal viewprint" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
110561
|
+
<div class="is-modal-content" style="width:100%;height:100vh;padding:0;">
|
110562
|
+
<iframe tabindex="0" style="width:100vw;height:100vh;border: none;display: block;" src="about:blank"></iframe>
|
110563
|
+
</div>
|
110564
|
+
</div>
|
110565
|
+
`;
|
110566
|
+
dom.appendHtml(builderStuff, html);
|
110567
|
+
modal = builderStuff.querySelector('.pagesize');
|
110568
|
+
this.modal = modal;
|
110569
|
+
const inpWidth = modal.querySelector('.input-width');
|
110570
|
+
const inpHeight = modal.querySelector('.input-height');
|
110571
|
+
const current = localStorage.getItem('_pagesize');
|
110572
|
+
if (current) {
|
110573
|
+
const arrCurrent = current.split(',');
|
110574
|
+
inpWidth.value = arrCurrent[0].trim();
|
110575
|
+
inpHeight.value = arrCurrent[1].trim();
|
110576
|
+
}
|
110577
|
+
const btnPageSize = modal.querySelectorAll('[data-pagesize]');
|
110578
|
+
btnPageSize.forEach(btn => {
|
110579
|
+
btn.addEventListener('click', () => {
|
110580
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
110581
|
+
if (elmCss) elmCss.remove();
|
110582
|
+
const s = btn.getAttribute('data-pagesize');
|
110583
|
+
this.setPageSize(s);
|
110584
|
+
inpWidth.value = '';
|
110585
|
+
inpHeight.value = '';
|
110586
|
+
const arr = s.split(',');
|
110587
|
+
inpWidth.value = arr[0].trim();
|
110588
|
+
inpHeight.value = arr[1].trim();
|
110589
|
+
});
|
110590
|
+
});
|
110591
|
+
let timer;
|
110592
|
+
inpWidth.addEventListener('input', () => {
|
110593
|
+
clearTimeout(timer);
|
110594
|
+
timer = setTimeout(() => {
|
110595
|
+
const current = localStorage.getItem('_pagesize');
|
110596
|
+
let isWeb = false;
|
110597
|
+
const arrCurrent = current.split(',');
|
110598
|
+
if (arrCurrent.length === 3) isWeb = true;
|
110599
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
110600
|
+
this.setPageSize(s);
|
110601
|
+
}, 600);
|
110602
|
+
});
|
110603
|
+
inpHeight.addEventListener('input', () => {
|
110604
|
+
clearTimeout(timer);
|
110605
|
+
timer = setTimeout(() => {
|
110606
|
+
const current = localStorage.getItem('_pagesize');
|
110607
|
+
let isWeb = false;
|
110608
|
+
const arrCurrent = current.split(',');
|
110609
|
+
if (arrCurrent.length === 3) isWeb = true;
|
110610
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
110611
|
+
this.setPageSize(s);
|
110612
|
+
}, 600);
|
110613
|
+
});
|
110614
|
+
const btnImageOk = modal.querySelector('.input-ok');
|
110615
|
+
dom.addEventListener(btnImageOk, 'click', () => {
|
110616
|
+
// const inpSrc = modal.querySelector('.input-src');
|
110617
|
+
// const url = inpSrc.value;
|
110618
|
+
|
110619
|
+
this.builder.hideModal(modal);
|
110620
|
+
});
|
110621
|
+
const btnImageCancel = modal.querySelector('.input-cancel');
|
110622
|
+
dom.addEventListener(btnImageCancel, 'click', () => {
|
110623
|
+
this.builder.hideModal(modal);
|
110624
|
+
});
|
110625
|
+
}
|
110626
|
+
this.util.showModal(modal, false);
|
110627
|
+
}
|
110628
|
+
setPageSize(s) {
|
110629
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
110630
|
+
localStorage.setItem('_pagesize', s);
|
110631
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
110632
|
+
const elms = docContainer.querySelectorAll('.is-box');
|
110633
|
+
elms.forEach(elm => {
|
110634
|
+
elm.setAttribute('data-pagesize', s);
|
110635
|
+
});
|
110636
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
110637
|
+
if (elmCss) elmCss.remove();
|
110638
|
+
let css = this.getPageCss();
|
110639
|
+
document.head.insertAdjacentHTML('beforeend', css);
|
110640
|
+
|
110641
|
+
// for the tools position
|
110642
|
+
const arr = s.split(',');
|
110643
|
+
// let w = arr[0].trim();
|
110644
|
+
// let h = arr[1].trim();
|
110645
|
+
if (arr.length === 3) {
|
110646
|
+
// web
|
110647
|
+
const docWidth = docContainer.offsetWidth;
|
110648
|
+
const viewportWidth = this.builder.win.innerWidth;
|
110649
|
+
if (docWidth < viewportWidth - 50) {
|
110650
|
+
// web (container)
|
110651
|
+
docContainer.classList.remove('page-web');
|
110652
|
+
docContainer.classList.add('page-web-container');
|
110653
|
+
} else {
|
110654
|
+
// web (full)
|
110655
|
+
docContainer.classList.remove('page-web-container');
|
110656
|
+
docContainer.classList.add('page-web');
|
110657
|
+
}
|
110658
|
+
} else {
|
110659
|
+
// print
|
110660
|
+
docContainer.classList.remove('page-web');
|
110661
|
+
docContainer.classList.remove('page-web-container');
|
110662
|
+
}
|
110663
|
+
} else {
|
110664
|
+
alert('This function works in Canvas mode only.');
|
110665
|
+
}
|
110666
|
+
}
|
110667
|
+
print() {
|
110668
|
+
const builderStuff = this.builderStuff;
|
110669
|
+
const dom = this.dom;
|
110670
|
+
let modalIframe = builderStuff.querySelector('.viewprint');
|
110671
|
+
if (!modalIframe) {
|
110672
|
+
let html = `
|
110673
|
+
<div class="viewprint" style="display:none">
|
110674
|
+
<iframe tabindex="0" style="width:2000px;height:2000px;border: none;display: block;" src="about:blank"></iframe>
|
110675
|
+
</div>`;
|
110676
|
+
dom.appendHtml(builderStuff, html);
|
110677
|
+
modalIframe = builderStuff.querySelector('.viewprint');
|
110678
|
+
}
|
110679
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
110680
|
+
const ifr = modalIframe.querySelector('iframe');
|
110681
|
+
ifr.srcdoc = this.getPrintHtml();
|
110682
|
+
} else {
|
110683
|
+
alert('This function works in Canvas mode only.');
|
110684
|
+
}
|
110685
|
+
}
|
110686
|
+
getPrintHtml() {
|
110687
|
+
let css = this.getPrintCss();
|
110688
|
+
let html = this.builder.html();
|
110689
|
+
return `
|
110690
|
+
<!DOCTYPE HTML>
|
110691
|
+
<html>
|
110692
|
+
<head>
|
110693
|
+
<meta charset="utf-8">
|
110694
|
+
<title></title>
|
110695
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
110696
|
+
<meta name="description" content="">
|
110697
|
+
|
110698
|
+
<link href="${this.builder.snippetPath}print.css" rel="stylesheet">
|
110699
|
+
|
110700
|
+
<style>
|
110701
|
+
|
110702
|
+
/* block.css */
|
110703
|
+
/* box-canvas */
|
110704
|
+
.is-box {
|
110705
|
+
position: relative;
|
110706
|
+
flex:none;
|
110707
|
+
}
|
110708
|
+
.is-block {
|
110709
|
+
position: absolute;
|
110710
|
+
box-sizing: border-box;
|
110711
|
+
padding: 0;
|
110712
|
+
}
|
110713
|
+
.is-block .is-container {
|
110714
|
+
max-width: unset !important;
|
110715
|
+
width: 100%;
|
110716
|
+
padding: 0;
|
110717
|
+
box-sizing: border-box;
|
110718
|
+
position: relative;
|
110719
|
+
z-index: 1;
|
110720
|
+
}
|
110721
|
+
.is-box.autolayout .is-block.block-steady.fluid {
|
110722
|
+
padding: 0;
|
110723
|
+
width: 100% !important;
|
110724
|
+
min-width: unset !important;
|
110725
|
+
left: auto !important
|
110726
|
+
}
|
110727
|
+
.is-block-overlay { background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; }
|
110728
|
+
|
110729
|
+
|
110730
|
+
body {
|
110731
|
+
background: #eee;
|
110732
|
+
}
|
110733
|
+
.is-page {
|
110734
|
+
position: relative;
|
110735
|
+
transform-origin: top;
|
110736
|
+
}
|
110737
|
+
.is-box {
|
110738
|
+
position: relative;
|
110739
|
+
flex:none;
|
110740
|
+
background: #fff;
|
110741
|
+
overflow: hidden;
|
110742
|
+
box-shadow: none;
|
110743
|
+
}
|
110744
|
+
${css}
|
110745
|
+
</style>
|
110746
|
+
</head>
|
110747
|
+
<body class="print">
|
110748
|
+
|
110749
|
+
<div class="is-page">${html}</div>
|
110750
|
+
|
110751
|
+
<script>
|
110752
|
+
window.print();
|
110753
|
+
</script>
|
110754
|
+
</body>
|
110755
|
+
</html>
|
110756
|
+
`;
|
110757
|
+
}
|
110758
|
+
getPageCss() {
|
110759
|
+
let s;
|
110760
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
110761
|
+
s = localStorage.getItem('_pagesize');
|
110762
|
+
} else {
|
110763
|
+
s = this.pageSize || '';
|
110764
|
+
}
|
110765
|
+
let w, h;
|
110766
|
+
let css;
|
110767
|
+
if (s) {
|
110768
|
+
const arr = s.split(',');
|
110769
|
+
w = arr[0].trim();
|
110770
|
+
h = arr[1].trim();
|
110771
|
+
if (arr.length === 3) {
|
110772
|
+
// web
|
110773
|
+
css = `
|
110774
|
+
<style id="__css_pagesize">
|
110775
|
+
.is-page {
|
110776
|
+
${(w === '100%' || w === '100vw') && (h === '100%' || h === '100vh') ? '' : 'margin-top: 150px;'}
|
110777
|
+
}
|
110778
|
+
.is-box {
|
110779
|
+
width: 100%;
|
110780
|
+
max-width: ${w};
|
110781
|
+
height: ${h};
|
110782
|
+
margin: 0 auto;
|
110783
|
+
}
|
110784
|
+
</style>
|
110785
|
+
`;
|
110786
|
+
} else {
|
110787
|
+
// print
|
110788
|
+
css = `
|
110789
|
+
<style id="__css_pagesize">
|
110790
|
+
.is-page {
|
110791
|
+
margin-top:150px;
|
110792
|
+
gap: 45px;
|
110793
|
+
}
|
110794
|
+
.is-box {
|
110795
|
+
width: ${w};
|
110796
|
+
height: ${h};
|
110797
|
+
}
|
110798
|
+
</style>
|
110799
|
+
`;
|
110800
|
+
}
|
110801
|
+
}
|
110802
|
+
return css;
|
110803
|
+
}
|
110804
|
+
getPrintCss() {
|
110805
|
+
let s;
|
110806
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
110807
|
+
s = localStorage.getItem('_pagesize');
|
110808
|
+
} else {
|
110809
|
+
s = this.pageSize || '';
|
110810
|
+
}
|
110811
|
+
let w, h;
|
110812
|
+
let css;
|
110813
|
+
if (s) {
|
110814
|
+
const arr = s.split(',');
|
110815
|
+
w = arr[0].trim();
|
110816
|
+
h = arr[1].trim();
|
110817
|
+
if (arr.length === 3) {
|
110818
|
+
// web
|
110819
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
110820
|
+
const box = docContainer.querySelector('.is-box');
|
110821
|
+
if (!box) return '';
|
110822
|
+
const docWidth = box.offsetWidth + 'px';
|
110823
|
+
const docHeight = box.offsetHeight + 'px';
|
110824
|
+
css = `
|
110825
|
+
<style id="__css_pagesize">
|
110826
|
+
.is-box {
|
110827
|
+
width: 100%;
|
110828
|
+
max-width: ${docWidth};
|
110829
|
+
height: ${docHeight};
|
110830
|
+
margin: 0 auto;
|
110831
|
+
}
|
110832
|
+
@media print {
|
110833
|
+
.is-box {
|
110834
|
+
width: ${docWidth};
|
110835
|
+
height: ${docHeight};
|
110836
|
+
}
|
110837
|
+
}
|
110838
|
+
@page {
|
110839
|
+
size:${docWidth} ${docHeight};;
|
110840
|
+
margin: 0;
|
110841
|
+
}
|
110842
|
+
</style>
|
110843
|
+
`;
|
110844
|
+
} else {
|
110845
|
+
// print
|
110846
|
+
css = `
|
110847
|
+
<style id="__css_pagesize">
|
110848
|
+
.is-box {
|
110849
|
+
width: ${w};
|
110850
|
+
height: ${h};
|
110851
|
+
}
|
110852
|
+
@media print {
|
110853
|
+
.is-box {
|
110854
|
+
width: ${w};
|
110855
|
+
height: ${h};
|
110856
|
+
}
|
110857
|
+
}
|
110858
|
+
@page {
|
110859
|
+
size:${w} ${h};
|
110860
|
+
margin: 0;
|
110861
|
+
}
|
110862
|
+
</style>
|
110863
|
+
`;
|
110864
|
+
}
|
110865
|
+
}
|
110866
|
+
return css;
|
110867
|
+
}
|
110868
|
+
}
|
110869
|
+
|
110039
110870
|
class ContentBuilder {
|
110040
110871
|
constructor(opts = {}) {
|
110041
110872
|
let defaults = {
|
110042
110873
|
page: '',
|
110043
|
-
container: '.container',
|
110874
|
+
container: '.is-container',
|
110044
110875
|
row: '',
|
110045
110876
|
cols: [],
|
110046
110877
|
colequal: [],
|
@@ -110282,6 +111113,8 @@ class ContentBuilder {
|
|
110282
111113
|
onUndo: function () {},
|
110283
111114
|
onRedo: function () {},
|
110284
111115
|
onBlockCanvasAdd: function () {},
|
111116
|
+
// docContainer: '.is-page',
|
111117
|
+
blockContainer: '.is-box',
|
110285
111118
|
/*
|
110286
111119
|
Deprecated:
|
110287
111120
|
snippetSampleImage: '',
|
@@ -111080,6 +111913,34 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111080
111913
|
}
|
111081
111914
|
this.settings = this.opts; // Backward compatible
|
111082
111915
|
|
111916
|
+
// freeform
|
111917
|
+
if (this.canvas && !this.isContentBox) {
|
111918
|
+
/*
|
111919
|
+
blockContainer: '.is-box',
|
111920
|
+
imageResizeOnBlock: false,
|
111921
|
+
toolbarDisplay: 'always',
|
111922
|
+
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'],
|
111923
|
+
buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara'],
|
111924
|
+
elementButtons: ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete','left', 'center', 'right', 'full' , 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'],
|
111925
|
+
elementButtonsMore: [],
|
111926
|
+
iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'],
|
111927
|
+
iconButtonsMore: [],
|
111928
|
+
*/
|
111929
|
+
this.blockContainer = '.is-box';
|
111930
|
+
this.imageResizeOnBlock = false;
|
111931
|
+
this.toolbarDisplay = 'always';
|
111932
|
+
this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
111933
|
+
this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
|
111934
|
+
this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'];
|
111935
|
+
this.elementButtonsMore = [];
|
111936
|
+
this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'];
|
111937
|
+
this.iconButtonsMore = [];
|
111938
|
+
if (!this.docContainer && this.container !== '.is-container') {
|
111939
|
+
this.docContainer = this.container;
|
111940
|
+
this.container = '.is-container';
|
111941
|
+
this.opts.container = '.is-container';
|
111942
|
+
}
|
111943
|
+
}
|
111083
111944
|
if (this.opts.imageSelect !== '') {
|
111084
111945
|
this.opts.imageselect = this.opts.imageSelect;
|
111085
111946
|
} else if (this.opts.imageselect !== '') {
|
@@ -111218,6 +112079,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111218
112079
|
this.win = win;
|
111219
112080
|
this.doc = doc;
|
111220
112081
|
this.doc.body.classList.add('data-editor');
|
112082
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
112083
|
+
const docContainer = document.querySelector(this.docContainer);
|
112084
|
+
docContainer.classList.add('is-page');
|
112085
|
+
}
|
111221
112086
|
|
111222
112087
|
// Disable on mobile
|
111223
112088
|
const viewportWidth = this.doc.body.clientWidth;
|
@@ -111465,6 +112330,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111465
112330
|
|
111466
112331
|
// freeform
|
111467
112332
|
if (this.canvas && !this.isContentBox) this.blockmodal = new BlockModal(this);
|
112333
|
+
if (this.canvas) this.pageoption = new PageSize(this);
|
111468
112334
|
|
111469
112335
|
// freeform
|
111470
112336
|
if (this.canvas) this.eb = new EditableBlocks({
|
@@ -111475,6 +112341,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111475
112341
|
parentSelector: '.box-canvas',
|
111476
112342
|
rotate: true,
|
111477
112343
|
// disableOnMobile: 760,
|
112344
|
+
zoom: this.opts.zoom,
|
111478
112345
|
onBeforeChange: () => {
|
111479
112346
|
this.uo.saveForUndo();
|
111480
112347
|
},
|
@@ -111482,15 +112349,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111482
112349
|
this.opts.onChange();
|
111483
112350
|
},
|
111484
112351
|
onEditStart: (event, block) => {
|
112352
|
+
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
112353
|
+
if (!activeBlock) return;
|
112354
|
+
const container = activeBlock.querySelector('.is-container');
|
112355
|
+
if (!container) return;
|
111485
112356
|
block.classList.add('editable');
|
111486
112357
|
|
111487
112358
|
// get element to activate
|
111488
112359
|
let x = event.clientX;
|
111489
112360
|
let y = event.clientY;
|
111490
|
-
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
111491
|
-
if (!activeBlock) return;
|
111492
|
-
const container = activeBlock.querySelector('.is-container');
|
111493
|
-
if (!container) return;
|
111494
112361
|
const cols = this.getAllColumns(container);
|
111495
112362
|
let clickedElm;
|
111496
112363
|
let clickedCol;
|
@@ -111603,10 +112470,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111603
112470
|
Array.prototype.forEach.call(elms, elm => {
|
111604
112471
|
elm.style.display = '';
|
111605
112472
|
});
|
111606
|
-
elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
111607
|
-
Array.prototype.forEach.call(elms, elm => {
|
111608
|
-
|
111609
|
-
});
|
112473
|
+
// elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
112474
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
112475
|
+
// elm.style.display = '';
|
112476
|
+
// });
|
112477
|
+
|
111610
112478
|
const viewportWidth = this.doc.body.clientWidth;
|
111611
112479
|
if (viewportWidth <= 768) {
|
111612
112480
|
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
@@ -111666,6 +112534,74 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111666
112534
|
if (this.onUnselectBlock) this.onUnselectBlock();
|
111667
112535
|
}
|
111668
112536
|
});
|
112537
|
+
|
112538
|
+
// SHIFT + Right Clidk to Zoom In
|
112539
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
112540
|
+
//--- see loadHtml ---
|
112541
|
+
const docContainer = document.querySelector(this.docContainer);
|
112542
|
+
|
112543
|
+
// set page size
|
112544
|
+
let s;
|
112545
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
112546
|
+
if (elm) {
|
112547
|
+
s = elm.getAttribute('data-pagesize');
|
112548
|
+
} else {
|
112549
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
112550
|
+
s = localStorage.getItem('_pagesize');
|
112551
|
+
} else {
|
112552
|
+
s = this.pageSize || '';
|
112553
|
+
}
|
112554
|
+
}
|
112555
|
+
this.setPageSize(s);
|
112556
|
+
this.applyBehaviorCanvas();
|
112557
|
+
const builders = docContainer.querySelectorAll(this.container);
|
112558
|
+
builders.forEach(builder => {
|
112559
|
+
this.applyBehaviorOn(builder);
|
112560
|
+
});
|
112561
|
+
this.refresh();
|
112562
|
+
if (this.win.Block) {
|
112563
|
+
this.win.Block.render();
|
112564
|
+
}
|
112565
|
+
docContainer.style.opacity = '';
|
112566
|
+
//--- /see loadHtml ---
|
112567
|
+
|
112568
|
+
// docContainer.style.transform = '';
|
112569
|
+
// this.opts.zoom = 1;
|
112570
|
+
// this.eb.setZoom(1);
|
112571
|
+
|
112572
|
+
document.addEventListener('contextmenu', this.toggleEnlargePage = e => {
|
112573
|
+
if (e.shiftKey && e.button === 2) {
|
112574
|
+
e.preventDefault();
|
112575
|
+
if (docContainer.style.transform.includes('scale(1)')) {
|
112576
|
+
docContainer.style.transform = '';
|
112577
|
+
}
|
112578
|
+
if (docContainer.classList.contains('expand')) {
|
112579
|
+
// back (zoom-out)
|
112580
|
+
docContainer.classList.remove('expand');
|
112581
|
+
docContainer.style.transform = '';
|
112582
|
+
this.opts.zoom = 1;
|
112583
|
+
localStorage.setItem('_zoom', 1);
|
112584
|
+
this.eb.setZoom(1);
|
112585
|
+
this.setZoomOnControl(docContainer);
|
112586
|
+
} else {
|
112587
|
+
// expand (zoom-in)
|
112588
|
+
docContainer.classList.add('expand');
|
112589
|
+
const viewportWidth = document.body.clientWidth;
|
112590
|
+
const targetWidth = viewportWidth * 0.8;
|
112591
|
+
const box = docContainer.querySelector(this.blockContainer);
|
112592
|
+
if (box) {
|
112593
|
+
let scale = targetWidth / box.offsetWidth;
|
112594
|
+
if (scale > 1.4) scale = 1.4;
|
112595
|
+
docContainer.style.transform = `scale(${scale})`;
|
112596
|
+
this.opts.zoom = scale;
|
112597
|
+
localStorage.setItem('_zoom', scale);
|
112598
|
+
this.eb.setZoom(scale);
|
112599
|
+
this.setZoomOnControl(docContainer);
|
112600
|
+
}
|
112601
|
+
}
|
112602
|
+
}
|
112603
|
+
});
|
112604
|
+
}
|
111669
112605
|
let previousWidth = this.win.innerWidth;
|
111670
112606
|
let timer;
|
111671
112607
|
const debounce = (func, delay) => {
|
@@ -111732,7 +112668,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111732
112668
|
|
111733
112669
|
// console.log('resize');
|
111734
112670
|
setTimeout(() => {
|
111735
|
-
if
|
112671
|
+
// if(this.blockmodal) this.blockmodal.realtime(); // freeform
|
111736
112672
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
111737
112673
|
}, 300); // give time for block transition
|
111738
112674
|
}, 200);
|
@@ -111749,7 +112685,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
111749
112685
|
const debouncedResizeHandler = debounce(() => {
|
111750
112686
|
// console.log('resize');
|
111751
112687
|
setTimeout(() => {
|
111752
|
-
if
|
112688
|
+
// if(this.blockmodal) this.blockmodal.realtime();
|
111753
112689
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
111754
112690
|
}, 300); // give time for block transition
|
111755
112691
|
}, 200);
|
@@ -112046,6 +112982,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
112046
112982
|
.is-block.active.editable {
|
112047
112983
|
outline: none;
|
112048
112984
|
cursor: auto;
|
112985
|
+
z-index: 10;
|
112049
112986
|
}
|
112050
112987
|
.is-block.active.multi {
|
112051
112988
|
outline: var(--is-outline);
|
@@ -112455,9 +113392,27 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
112455
113392
|
rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`;
|
112456
113393
|
// rowtool.style.transformOrigin = 'top';
|
112457
113394
|
});
|
112458
|
-
}
|
112459
113395
|
|
113396
|
+
// freeform
|
113397
|
+
let tools = area.querySelectorAll('.is-canvas-tool');
|
113398
|
+
tools.forEach(tool => {
|
113399
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
113400
|
+
tool.style.transformOrigin = 'top';
|
113401
|
+
});
|
113402
|
+
tools = area.querySelectorAll('.is-canvasadd-tool');
|
113403
|
+
tools.forEach(tool => {
|
113404
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
113405
|
+
tool.style.transformOrigin = 'top';
|
113406
|
+
});
|
113407
|
+
}
|
112460
113408
|
setZoomOnArea() {
|
113409
|
+
if (this.canvas && !this.isContentBox && this.docContainer) {
|
113410
|
+
// freeform
|
113411
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
113412
|
+
docContainer.style.transform = `scale(${this.opts.zoom})`;
|
113413
|
+
if (this.eb) this.eb.setZoom(this.opts.zoom);
|
113414
|
+
return;
|
113415
|
+
}
|
112461
113416
|
if (this.opts.page !== '') {
|
112462
113417
|
const wrapper = this.doc.querySelector(this.opts.page);
|
112463
113418
|
wrapper.style.transform = `scale(${this.opts.zoom})`;
|
@@ -112982,9 +113937,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
112982
113937
|
lang: this.opts.lang
|
112983
113938
|
});
|
112984
113939
|
}
|
112985
|
-
|
112986
|
-
|
112987
|
-
|
113940
|
+
|
113941
|
+
// simpleColorPicker(onPick,mode) {
|
113942
|
+
// return this.colorClassPicker.open(onPick,mode);
|
113943
|
+
// }
|
113944
|
+
|
112988
113945
|
openAIAssistant() {
|
112989
113946
|
this.dictation.openDictation();
|
112990
113947
|
}
|
@@ -113139,6 +114096,124 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113139
114096
|
if (!this.eb) return;
|
113140
114097
|
this.eb.quitEditable(target);
|
113141
114098
|
}
|
114099
|
+
addPage(box) {
|
114100
|
+
this.uo.saveForUndo();
|
114101
|
+
let s;
|
114102
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
114103
|
+
s = localStorage.getItem('_pagesize');
|
114104
|
+
} else {
|
114105
|
+
s = this.pageSize || '';
|
114106
|
+
}
|
114107
|
+
const html = `
|
114108
|
+
<div class="is-box box-canvas autolayout new-canvas" data-pagesize="${s}">
|
114109
|
+
`;
|
114110
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
114111
|
+
if (box) {
|
114112
|
+
box.insertAdjacentHTML('afterend', html);
|
114113
|
+
} else {
|
114114
|
+
docContainer.insertAdjacentHTML('beforeend', html);
|
114115
|
+
}
|
114116
|
+
const newBox = docContainer.querySelector('.new-canvas');
|
114117
|
+
newBox.scrollIntoView({
|
114118
|
+
behavior: 'smooth',
|
114119
|
+
block: 'center'
|
114120
|
+
});
|
114121
|
+
newBox.classList.remove('new-canvas');
|
114122
|
+
this.applyBehaviorCanvas();
|
114123
|
+
this.opts.onChange();
|
114124
|
+
}
|
114125
|
+
setPageSize(s) {
|
114126
|
+
this.pageoption.setPageSize(s);
|
114127
|
+
}
|
114128
|
+
applyBehaviorCanvas() {
|
114129
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
114130
|
+
let htmlTool = `
|
114131
|
+
<div class="is-tool is-canvas-tool" style="transform: scale(1); transform-origin: center top;">
|
114132
|
+
<button type="button" tabindex="-1" class="box-up" title="${this.util.out('Move Up')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-up"></use></svg></button>
|
114133
|
+
<button type="button" tabindex="-1" class="box-down" title="${this.util.out('Move Down')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-down"></use></svg></button>
|
114134
|
+
<!--
|
114135
|
+
<button type="button" tabindex="-1" class="box-settings" title="${this.util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
114136
|
+
-->
|
114137
|
+
<button type="button" tabindex="-1" class="box-remove" title="${this.util.out('Remove')}"><svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg></button>
|
114138
|
+
</div>
|
114139
|
+
<div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
|
114140
|
+
<button type="button" tabindex="-1" class="box-add" title="${this.util.out('Add')}"><svg class="is-icon-flex"><use xlink:href="#icon-plus2"></use></svg></button>
|
114141
|
+
</div>
|
114142
|
+
`;
|
114143
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
114144
|
+
const boxes = this.dom.elementChildren(docContainer);
|
114145
|
+
boxes.forEach(box => {
|
114146
|
+
let tool1 = box.querySelector('.is-canvas-tool');
|
114147
|
+
let tool2 = box.querySelector('.is-canvasadd-tool');
|
114148
|
+
if (tool1) tool1.remove();
|
114149
|
+
if (tool2) tool2.remove();
|
114150
|
+
if (!box.querySelector('.is-canvas-tool')) {
|
114151
|
+
box.addEventListener('click', () => {
|
114152
|
+
boxes.forEach(elm => elm.classList.remove('box-select'));
|
114153
|
+
box.classList.add('box-select');
|
114154
|
+
|
114155
|
+
// onSelectPage (see onSelectBlock)
|
114156
|
+
|
114157
|
+
let elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
114158
|
+
Array.prototype.forEach.call(elms, elm => {
|
114159
|
+
elm.style.display = '';
|
114160
|
+
});
|
114161
|
+
});
|
114162
|
+
box.insertAdjacentHTML('afterbegin', htmlTool);
|
114163
|
+
const btnUp = box.querySelector('.is-canvas-tool .box-up');
|
114164
|
+
btnUp.addEventListener('click', e => {
|
114165
|
+
const box = e.target.closest('.is-box');
|
114166
|
+
this.uo.saveForUndo();
|
114167
|
+
let boxPrev = box.previousElementSibling;
|
114168
|
+
if (boxPrev) box.parentNode.insertBefore(box, boxPrev);
|
114169
|
+
box.scrollIntoView({
|
114170
|
+
behavior: 'smooth',
|
114171
|
+
block: 'center'
|
114172
|
+
});
|
114173
|
+
this.opts.onChange();
|
114174
|
+
});
|
114175
|
+
const btnDown = box.querySelector('.is-canvas-tool .box-down');
|
114176
|
+
btnDown.addEventListener('click', e => {
|
114177
|
+
const box = e.target.closest('.is-box');
|
114178
|
+
this.uo.saveForUndo();
|
114179
|
+
let boxNext = box.nextElementSibling;
|
114180
|
+
if (boxNext) box.parentNode.insertBefore(boxNext, box);
|
114181
|
+
box.scrollIntoView({
|
114182
|
+
behavior: 'smooth',
|
114183
|
+
block: 'center'
|
114184
|
+
});
|
114185
|
+
this.opts.onChange();
|
114186
|
+
});
|
114187
|
+
const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
|
114188
|
+
btnRemove.addEventListener('click', e => {
|
114189
|
+
const box = e.target.closest('.is-box');
|
114190
|
+
this.uo.saveForUndo();
|
114191
|
+
box.remove();
|
114192
|
+
this.blockmodal.showHideControls();
|
114193
|
+
if (!docContainer.querySelector('.is-box')) this.addPage();
|
114194
|
+
this.opts.onChange();
|
114195
|
+
});
|
114196
|
+
const btnAdd = box.querySelector('.is-canvasadd-tool .box-add');
|
114197
|
+
btnAdd.addEventListener('click', e => {
|
114198
|
+
const box = e.target.closest('.is-box');
|
114199
|
+
this.addPage(box);
|
114200
|
+
});
|
114201
|
+
}
|
114202
|
+
});
|
114203
|
+
if (localStorage.getItem('_zoom') !== null) {
|
114204
|
+
this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
|
114205
|
+
}
|
114206
|
+
|
114207
|
+
this.eb.setZoom(this.opts.zoom);
|
114208
|
+
this.setZoomOnControl(docContainer);
|
114209
|
+
}
|
114210
|
+
}
|
114211
|
+
openPageOptions() {
|
114212
|
+
this.pageoption.open();
|
114213
|
+
}
|
114214
|
+
print() {
|
114215
|
+
this.pageoption.print();
|
114216
|
+
}
|
113142
114217
|
destroy() {
|
113143
114218
|
if (this.eb) this.eb.destroy();
|
113144
114219
|
this.doc.body.classList.remove('data-editor');
|
@@ -113179,6 +114254,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113179
114254
|
builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
|
113180
114255
|
});
|
113181
114256
|
|
114257
|
+
if (this.canvas && !this.isContentBox) {
|
114258
|
+
let html = this.html();
|
114259
|
+
let range = this.doc.createRange();
|
114260
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
114261
|
+
docContainer.innerHTML = '';
|
114262
|
+
docContainer.appendChild(range.createContextualFragment(html));
|
114263
|
+
}
|
113182
114264
|
Array.prototype.forEach.call(builders, builder => {
|
113183
114265
|
builder.removeAttribute('data-sort');
|
113184
114266
|
this.dom.removeClass(builder, 'is-builder');
|
@@ -113296,13 +114378,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113296
114378
|
if (this.targetAssetType === 'all') {
|
113297
114379
|
ok = true;
|
113298
114380
|
} else if (this.targetAssetType === 'media') {
|
113299
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
114381
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
113300
114382
|
ok = true;
|
113301
114383
|
} else {
|
113302
114384
|
alert(this.util.out('Please select an image or video file.'));
|
113303
114385
|
}
|
113304
114386
|
} else if (this.targetAssetType === 'image') {
|
113305
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
114387
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
113306
114388
|
ok = true;
|
113307
114389
|
} else {
|
113308
114390
|
alert(this.util.out('Please select an image file.'));
|
@@ -113364,7 +114446,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113364
114446
|
let extension = filename.split('.').pop();
|
113365
114447
|
extension = extension.toLowerCase();
|
113366
114448
|
let ok = false;
|
113367
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
114449
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
113368
114450
|
ok = true;
|
113369
114451
|
} else {
|
113370
114452
|
alert(out('Please select an image file.'));
|
@@ -113393,13 +114475,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113393
114475
|
let ext = filename.split('.').pop();
|
113394
114476
|
ext = ext.toLowerCase();
|
113395
114477
|
let ok = false;
|
113396
|
-
if (targetAssetType === 'image' && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
114478
|
+
if (targetAssetType === 'image' && (s.includes('base64') || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
113397
114479
|
ok = true;
|
113398
114480
|
} else if (targetAssetType === 'video' && ext === 'mp4') {
|
113399
114481
|
ok = true;
|
113400
114482
|
} else if (targetAssetType === 'audio' && ext === 'mp3') {
|
113401
114483
|
ok = true;
|
113402
|
-
} else if (targetAssetType === 'media' && (ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
114484
|
+
} else if (targetAssetType === 'media' && (s.includes('base64') || ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
113403
114485
|
ok = true;
|
113404
114486
|
} else if (targetAssetType === 'all') {
|
113405
114487
|
ok = true;
|
@@ -113437,7 +114519,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113437
114519
|
if (targetAssetType === 'all') {
|
113438
114520
|
ok = true;
|
113439
114521
|
} else if (targetAssetType === 'media') {
|
113440
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
114522
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
113441
114523
|
ok = true;
|
113442
114524
|
} else {
|
113443
114525
|
alert(out('Please select an image or video file.'));
|
@@ -113449,7 +114531,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
113449
114531
|
alert(out('Please select an mp4 file.'));
|
113450
114532
|
}
|
113451
114533
|
} else if (targetAssetType === 'image') {
|
113452
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
114534
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
113453
114535
|
ok = true;
|
113454
114536
|
} else {
|
113455
114537
|
alert(out('Please select an image file.'));
|
@@ -114173,6 +115255,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114173
115255
|
docContainer.innerHTML = '';
|
114174
115256
|
docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
114175
115257
|
|
115258
|
+
// set page size
|
115259
|
+
let s;
|
115260
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
115261
|
+
if (elm) {
|
115262
|
+
s = elm.getAttribute('data-pagesize');
|
115263
|
+
} else {
|
115264
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
115265
|
+
s = localStorage.getItem('_pagesize');
|
115266
|
+
} else {
|
115267
|
+
s = this.pageSize || '';
|
115268
|
+
}
|
115269
|
+
}
|
115270
|
+
this.setPageSize(s);
|
115271
|
+
this.applyBehaviorCanvas();
|
114176
115272
|
const builders = docContainer.querySelectorAll(this.container);
|
114177
115273
|
builders.forEach(builder => {
|
114178
115274
|
this.applyBehaviorOn(builder);
|
@@ -114382,7 +115478,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114382
115478
|
url = elm.getAttribute('data-modal-url');
|
114383
115479
|
let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
|
114384
115480
|
|
114385
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
115481
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
114386
115482
|
this.lightbox.openImage(url, theme, color);
|
114387
115483
|
} else if (extension === 'mp4') {
|
114388
115484
|
this.lightbox.openVideo(url, 'dark', color);
|
@@ -114712,7 +115808,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114712
115808
|
let theme = link.getAttribute('data-modal-theme');
|
114713
115809
|
if (!theme) theme = 'light';
|
114714
115810
|
const color = elm.getAttribute('data-modal-color');
|
114715
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
115811
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
114716
115812
|
this.lightbox.openImage(url, theme, color);
|
114717
115813
|
e.preventDefault();
|
114718
115814
|
return false;
|
@@ -114823,6 +115919,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
114823
115919
|
if (this.activeImage) {
|
114824
115920
|
this.util.hideControls(); //deleting an image should also clear the visible image tool (and resizer).
|
114825
115921
|
}
|
115922
|
+
|
115923
|
+
col.querySelectorAll('.is-social').forEach(elm => {
|
115924
|
+
elm.removeAttribute('contentEditable'); // Return back the div.is-social (See: Prevent div.is-social gets deleted)
|
115925
|
+
});
|
114826
115926
|
}
|
114827
115927
|
|
114828
115928
|
this.oriLen = col.textContent.length; // get character length
|
@@ -115146,6 +116246,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
115146
116246
|
}
|
115147
116247
|
}
|
115148
116248
|
handleCellKeyup(col, e) {
|
116249
|
+
if (e.which === 46 || e.which === 8) {
|
116250
|
+
col.querySelectorAll('.is-social').forEach(elm => {
|
116251
|
+
elm.contentEditable = false; // Prevent div.is-social gets deleted while deleting its next element
|
116252
|
+
});
|
116253
|
+
}
|
116254
|
+
|
115149
116255
|
if (this.dom.textSelection()) {
|
115150
116256
|
if (e.keyCode === '38') {
|
115151
116257
|
// Up arrow
|
@@ -115701,6 +116807,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
115701
116807
|
});
|
115702
116808
|
var html = result[0].html;
|
115703
116809
|
var noedit = result[0].noedit;
|
116810
|
+
const occurrences = this.dom.countOccurrences(html, 'column');
|
115704
116811
|
var bSnippet;
|
115705
116812
|
if (html.indexOf('"row') === -1) {
|
115706
116813
|
bSnippet = true; // Just snippet (without row/column grid)
|
@@ -115754,8 +116861,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
115754
116861
|
// Clean snippet from sortable related code
|
115755
116862
|
itemEl.removeAttribute('draggable');
|
115756
116863
|
this.dom.removeClass(itemEl, 'snippet-item');
|
116864
|
+
let bw = '';
|
116865
|
+
if (this.page && this.page === '.is-wrapper') {
|
116866
|
+
bw = '800px';
|
116867
|
+
} else {
|
116868
|
+
if (occurrences === 2) {
|
116869
|
+
bw = '800px';
|
116870
|
+
} else if (occurrences >= 3) {
|
116871
|
+
bw = '800px';
|
116872
|
+
} else {
|
116873
|
+
bw = '540px';
|
116874
|
+
}
|
116875
|
+
}
|
115757
116876
|
const blockTemplate = `
|
115758
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
116877
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
115759
116878
|
<div class="is-container container-new leading-12 size-17">
|
115760
116879
|
[%CONTENT%]
|
115761
116880
|
</div>
|
@@ -115792,8 +116911,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
115792
116911
|
var range = document.createRange();
|
115793
116912
|
range.setStart(itemEl, 0);
|
115794
116913
|
itemEl.appendChild(range.createContextualFragment(html));
|
116914
|
+
let bw = '';
|
116915
|
+
if (this.page && this.page === '.is-wrapper') {
|
116916
|
+
bw = '800px';
|
116917
|
+
} else {
|
116918
|
+
if (occurrences === 2) {
|
116919
|
+
bw = '800px';
|
116920
|
+
} else if (occurrences >= 3) {
|
116921
|
+
bw = '800px';
|
116922
|
+
} else {
|
116923
|
+
bw = '540px';
|
116924
|
+
}
|
116925
|
+
}
|
115795
116926
|
const blockTemplate = `
|
115796
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
116927
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
115797
116928
|
<div class="is-container container-new leading-12 size-17">
|
115798
116929
|
[%CONTENT%]
|
115799
116930
|
</div>
|
@@ -147334,7 +148465,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
147334
148465
|
}
|
147335
148466
|
.is-block.active.editable {
|
147336
148467
|
outline: none;
|
147337
|
-
cursor: auto;
|
148468
|
+
cursor: auto;
|
148469
|
+
z-index: 10;
|
147338
148470
|
}
|
147339
148471
|
.is-block.active.multi {
|
147340
148472
|
outline: var(--is-outline);
|