@innovastudio/contentbuilder 1.4.55 → 1.4.56
Sign up to get free protection for your applications and to get access to all the features.
@@ -8437,7 +8437,7 @@ class Dom {
|
|
8437
8437
|
|
8438
8438
|
var js$1 = {exports: {}};
|
8439
8439
|
|
8440
|
-
var src = {};
|
8440
|
+
var src$1 = {};
|
8441
8441
|
|
8442
8442
|
var javascript = {exports: {}};
|
8443
8443
|
|
@@ -13576,9 +13576,9 @@ function style_html(html_source, options, js, css) {
|
|
13576
13576
|
}
|
13577
13577
|
style_html.defaultOptions = html_beautify.defaultOptions;
|
13578
13578
|
|
13579
|
-
src.js = js_beautify;
|
13580
|
-
src.css = css_beautify;
|
13581
|
-
src.html = style_html;
|
13579
|
+
src$1.js = js_beautify;
|
13580
|
+
src$1.css = css_beautify;
|
13581
|
+
src$1.html = style_html;
|
13582
13582
|
|
13583
13583
|
/*jshint node:true */
|
13584
13584
|
|
@@ -13621,7 +13621,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
|
|
13621
13621
|
|
13622
13622
|
{
|
13623
13623
|
(function(mod) {
|
13624
|
-
var beautifier = src;
|
13624
|
+
var beautifier = src$1;
|
13625
13625
|
beautifier.js_beautify = beautifier.js;
|
13626
13626
|
beautifier.css_beautify = beautifier.css;
|
13627
13627
|
beautifier.html_beautify = beautifier.html;
|
@@ -14261,7 +14261,7 @@ var loader = {
|
|
14261
14261
|
__getMonacoInstance: __getMonacoInstance
|
14262
14262
|
};
|
14263
14263
|
|
14264
|
-
const dom$
|
14264
|
+
const dom$k = new Dom();
|
14265
14265
|
let hash$1 = {};
|
14266
14266
|
class HtmlUtil {
|
14267
14267
|
constructor(builder) {
|
@@ -14308,28 +14308,28 @@ class HtmlUtil {
|
|
14308
14308
|
</div>
|
14309
14309
|
|
14310
14310
|
`;
|
14311
|
-
dom$
|
14311
|
+
dom$k.appendHtml(builderStuff, html);
|
14312
14312
|
viewhtml = builderStuff.querySelector('.viewhtml');
|
14313
14313
|
let viewhtmlmonaco = builderStuff.querySelector('.viewhtmlmonaco');
|
14314
14314
|
let viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
|
14315
14315
|
let elm = viewhtml.querySelector('.input-ok');
|
14316
|
-
dom$
|
14316
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14317
14317
|
this.applyHtml(viewhtml);
|
14318
14318
|
});
|
14319
14319
|
elm = viewhtml.querySelector('.input-cancel');
|
14320
|
-
dom$
|
14320
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14321
14321
|
this.builder.hideModal(viewhtml);
|
14322
14322
|
});
|
14323
14323
|
elm = viewhtmlmonaco.querySelector('.input-ok');
|
14324
|
-
dom$
|
14324
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14325
14325
|
this.applyHtml(viewhtmlmonaco);
|
14326
14326
|
});
|
14327
14327
|
elm = viewhtmlmonaco.querySelector('.input-cancel');
|
14328
|
-
dom$
|
14328
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14329
14329
|
this.builder.hideModal(viewhtmlmonaco);
|
14330
14330
|
});
|
14331
14331
|
elm = viewhtmlexternal.querySelector('.input-ok');
|
14332
|
-
dom$
|
14332
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14333
14333
|
const source = document.querySelector('textarea[data-source-active]');
|
14334
14334
|
const selectorOk = source.getAttribute('data-source-ok');
|
14335
14335
|
source.removeAttribute('data-source-active');
|
@@ -14339,7 +14339,7 @@ class HtmlUtil {
|
|
14339
14339
|
this.builder.hideModal(viewhtmlexternal);
|
14340
14340
|
});
|
14341
14341
|
elm = viewhtmlexternal.querySelector('.input-cancel');
|
14342
|
-
dom$
|
14342
|
+
dom$k.addEventListener(elm, 'click', () => {
|
14343
14343
|
const source = document.querySelector('textarea[data-source-active]');
|
14344
14344
|
const selectorCancel = source.getAttribute('data-source-cancel');
|
14345
14345
|
source.removeAttribute('data-source-active');
|
@@ -14611,7 +14611,7 @@ class HtmlUtil {
|
|
14611
14611
|
this.builder.cleanHtmlFormatting = false;
|
14612
14612
|
|
14613
14613
|
//Change to row selection
|
14614
|
-
dom$
|
14614
|
+
dom$k.removeClass(row, 'row-outline');
|
14615
14615
|
}
|
14616
14616
|
if (mode === 'full') {
|
14617
14617
|
//
|
@@ -14845,10 +14845,10 @@ class HtmlUtil {
|
|
14845
14845
|
_builder.style.WebkitTransform = '';
|
14846
14846
|
_builder.style.MozTransform = '';
|
14847
14847
|
_builder.removeAttribute('data-sort');
|
14848
|
-
dom$
|
14849
|
-
const rows = dom$
|
14848
|
+
dom$k.removeClass(_builder, 'builder-active');
|
14849
|
+
const rows = dom$k.elementChildren(_builder);
|
14850
14850
|
rows.forEach(row => {
|
14851
|
-
const cols = dom$
|
14851
|
+
const cols = dom$k.elementChildren(row);
|
14852
14852
|
cols.forEach(col => {
|
14853
14853
|
col.style.cursor = '';
|
14854
14854
|
});
|
@@ -14856,95 +14856,95 @@ class HtmlUtil {
|
|
14856
14856
|
});
|
14857
14857
|
|
14858
14858
|
// cleanup cursor from drag to resize columns
|
14859
|
-
const rows = dom$
|
14859
|
+
const rows = dom$k.elementChildren(tmp);
|
14860
14860
|
rows.forEach(row => {
|
14861
14861
|
row.style.cursor = ''; //if tmp is row html, then this is a column
|
14862
|
-
const cols = dom$
|
14862
|
+
const cols = dom$k.elementChildren(row);
|
14863
14863
|
cols.forEach(col => {
|
14864
14864
|
col.style.cursor = '';
|
14865
14865
|
});
|
14866
14866
|
});
|
14867
14867
|
let elms = tmp.querySelectorAll('.sortable-chosen');
|
14868
|
-
dom$
|
14868
|
+
dom$k.removeClasses(elms, 'sortable-chosen');
|
14869
14869
|
elms = tmp.querySelectorAll('.sortable-ghost');
|
14870
|
-
dom$
|
14870
|
+
dom$k.removeClasses(elms, 'sortable-ghost');
|
14871
14871
|
elms = tmp.querySelectorAll('.elm-active');
|
14872
|
-
dom$
|
14872
|
+
dom$k.removeClasses(elms, 'elm-active');
|
14873
14873
|
elms = tmp.querySelectorAll('.elm-inspected');
|
14874
|
-
dom$
|
14874
|
+
dom$k.removeClasses(elms, 'elm-inspected');
|
14875
14875
|
elms = tmp.querySelectorAll('.cell-active');
|
14876
|
-
dom$
|
14876
|
+
dom$k.removeClasses(elms, 'cell-active');
|
14877
14877
|
elms = tmp.querySelectorAll('.row-active');
|
14878
|
-
dom$
|
14878
|
+
dom$k.removeClasses(elms, 'row-active');
|
14879
14879
|
elms = tmp.querySelectorAll('.row-outline');
|
14880
|
-
dom$
|
14880
|
+
dom$k.removeClasses(elms, 'row-outline');
|
14881
14881
|
elms = tmp.querySelectorAll('.is-builder');
|
14882
|
-
dom$
|
14882
|
+
dom$k.removeClasses(elms, 'is-builder');
|
14883
14883
|
elms = tmp.querySelectorAll('.row-outline');
|
14884
|
-
dom$
|
14884
|
+
dom$k.removeClasses(elms, 'row-outline');
|
14885
14885
|
elms = tmp.querySelectorAll('[data-click]');
|
14886
|
-
dom$
|
14886
|
+
dom$k.removeAttributes(elms, 'data-click');
|
14887
14887
|
elms = tmp.querySelectorAll('[contenteditable]');
|
14888
|
-
dom$
|
14888
|
+
dom$k.removeAttributes(elms, 'contenteditable');
|
14889
14889
|
elms = tmp.querySelectorAll('[draggridoutline]');
|
14890
|
-
dom$
|
14890
|
+
dom$k.removeAttributes(elms, 'draggridoutline');
|
14891
14891
|
elms = tmp.querySelectorAll('[between-blocks-left]');
|
14892
|
-
dom$
|
14892
|
+
dom$k.removeAttributes(elms, 'between-blocks-left');
|
14893
14893
|
elms = tmp.querySelectorAll('[between-blocks-center]');
|
14894
|
-
dom$
|
14894
|
+
dom$k.removeAttributes(elms, 'between-blocks-center');
|
14895
14895
|
elms = tmp.querySelectorAll('[hideelementhighlight]');
|
14896
|
-
dom$
|
14896
|
+
dom$k.removeAttributes(elms, 'hideelementhighlight');
|
14897
14897
|
elms = tmp.querySelectorAll('[data-module-active]');
|
14898
|
-
dom$
|
14898
|
+
dom$k.removeAttributes(elms, 'data-module-active');
|
14899
14899
|
elms = tmp.querySelectorAll('[draggable]');
|
14900
|
-
dom$
|
14900
|
+
dom$k.removeAttributes(elms, 'draggable');
|
14901
14901
|
elms = tmp.querySelectorAll('[data-animated]');
|
14902
|
-
dom$
|
14902
|
+
dom$k.removeAttributes(elms, 'data-animated');
|
14903
14903
|
elms = tmp.querySelectorAll('[data-saveforundo]');
|
14904
|
-
dom$
|
14904
|
+
dom$k.removeAttributes(elms, 'data-saveforundo');
|
14905
14905
|
elms = tmp.querySelectorAll('[hidesnippetaddtool]');
|
14906
|
-
dom$
|
14906
|
+
dom$k.removeAttributes(elms, 'hidesnippetaddtool');
|
14907
14907
|
elms = tmp.querySelectorAll('[gray]');
|
14908
|
-
dom$
|
14908
|
+
dom$k.removeAttributes(elms, 'gray');
|
14909
14909
|
elms = tmp.querySelectorAll('[rowoutline]');
|
14910
|
-
dom$
|
14910
|
+
dom$k.removeAttributes(elms, 'rowoutline');
|
14911
14911
|
elms = tmp.querySelectorAll('[hidecolumntool]');
|
14912
|
-
dom$
|
14912
|
+
dom$k.removeAttributes(elms, 'hidecolumntool');
|
14913
14913
|
elms = tmp.querySelectorAll('[grayoutline]');
|
14914
|
-
dom$
|
14914
|
+
dom$k.removeAttributes(elms, 'grayoutline');
|
14915
14915
|
elms = tmp.querySelectorAll('[hideoutline]');
|
14916
|
-
dom$
|
14916
|
+
dom$k.removeAttributes(elms, 'hideoutline');
|
14917
14917
|
elms = tmp.querySelectorAll('[leftrowtool]');
|
14918
|
-
dom$
|
14918
|
+
dom$k.removeAttributes(elms, 'leftrowtool');
|
14919
14919
|
elms = tmp.querySelectorAll('[minimal]');
|
14920
|
-
dom$
|
14920
|
+
dom$k.removeAttributes(elms, 'minimal');
|
14921
14921
|
elms = tmp.querySelectorAll('[clean]');
|
14922
|
-
dom$
|
14922
|
+
dom$k.removeAttributes(elms, 'clean');
|
14923
14923
|
elms = tmp.querySelectorAll('[grideditor]');
|
14924
|
-
dom$
|
14924
|
+
dom$k.removeAttributes(elms, 'grideditor');
|
14925
14925
|
elms = tmp.querySelectorAll('[gridoutline]');
|
14926
|
-
dom$
|
14927
|
-
dom$
|
14928
|
-
dom$
|
14929
|
-
dom$
|
14930
|
-
dom$
|
14931
|
-
dom$
|
14926
|
+
dom$k.removeAttributes(elms, 'gridoutline');
|
14927
|
+
dom$k.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
14928
|
+
dom$k.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
14929
|
+
dom$k.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
14930
|
+
dom$k.removeElements(tmp.querySelectorAll('.ovl'));
|
14931
|
+
dom$k.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
14932
14932
|
|
14933
14933
|
//Extra cleaning
|
14934
14934
|
elms = tmp.querySelectorAll('.aos-init');
|
14935
|
-
dom$
|
14935
|
+
dom$k.removeClasses(elms, 'aos-init');
|
14936
14936
|
elms = tmp.querySelectorAll('.aos-animate');
|
14937
|
-
dom$
|
14937
|
+
dom$k.removeClasses(elms, 'aos-animate');
|
14938
14938
|
elms = tmp.querySelectorAll('.skrollable');
|
14939
|
-
dom$
|
14939
|
+
dom$k.removeClasses(elms, 'skrollable');
|
14940
14940
|
elms = tmp.querySelectorAll('.skrollable-after');
|
14941
|
-
dom$
|
14941
|
+
dom$k.removeClasses(elms, 'skrollable-after');
|
14942
14942
|
elms = tmp.querySelectorAll('.skrollable-before');
|
14943
|
-
dom$
|
14943
|
+
dom$k.removeClasses(elms, 'skrollable-before');
|
14944
14944
|
elms = tmp.querySelectorAll('.skrollable-between');
|
14945
|
-
dom$
|
14945
|
+
dom$k.removeClasses(elms, 'skrollable-between');
|
14946
14946
|
elms = tmp.querySelectorAll('.is-inview');
|
14947
|
-
dom$
|
14947
|
+
dom$k.removeClasses(elms, 'is-inview');
|
14948
14948
|
let emptyclasses = tmp.querySelectorAll('[class=""]');
|
14949
14949
|
Array.prototype.forEach.call(emptyclasses, emptyclass => {
|
14950
14950
|
emptyclass.removeAttribute('class');
|
@@ -14953,9 +14953,9 @@ class HtmlUtil {
|
|
14953
14953
|
Array.prototype.forEach.call(unusedOverlays, unusedOverlay => {
|
14954
14954
|
if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
|
14955
14955
|
});
|
14956
|
-
dom$
|
14956
|
+
dom$k.removeEmptyStyle(tmp);
|
14957
14957
|
elms = tmp.querySelectorAll('[data-keep]');
|
14958
|
-
dom$
|
14958
|
+
dom$k.removeAttributes(elms, 'data-keep');
|
14959
14959
|
|
14960
14960
|
//Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
|
14961
14961
|
let links = tmp.querySelectorAll('a');
|
@@ -14972,76 +14972,76 @@ class HtmlUtil {
|
|
14972
14972
|
|
14973
14973
|
// Remove dummy DIV after last section
|
14974
14974
|
let elms = tmp.querySelectorAll('.is-dummy');
|
14975
|
-
dom$
|
14975
|
+
dom$k.removeElements(elms);
|
14976
14976
|
elms = tmp.querySelectorAll('[data-scroll]');
|
14977
|
-
dom$
|
14977
|
+
dom$k.removeAttributes(elms, 'data-scroll');
|
14978
14978
|
elms = tmp.querySelectorAll('[data-scroll-once]');
|
14979
|
-
dom$
|
14979
|
+
dom$k.removeAttributes(elms, 'data-scroll-once');
|
14980
14980
|
if (this.builder.shortenOutput) {
|
14981
14981
|
elms = tmp.querySelectorAll('[data-noedit]');
|
14982
|
-
dom$
|
14982
|
+
dom$k.removeAttributes(elms, 'data-noedit');
|
14983
14983
|
elms = tmp.querySelectorAll('[data-module]');
|
14984
|
-
dom$
|
14984
|
+
dom$k.removeAttributes(elms, 'data-module');
|
14985
14985
|
elms = tmp.querySelectorAll('[data-module-desc]');
|
14986
|
-
dom$
|
14986
|
+
dom$k.removeAttributes(elms, 'data-module-desc');
|
14987
14987
|
elms = tmp.querySelectorAll('[data-dialog-width]');
|
14988
|
-
dom$
|
14988
|
+
dom$k.removeAttributes(elms, 'data-dialog-width');
|
14989
14989
|
elms = tmp.querySelectorAll('[data-dialog-height]');
|
14990
|
-
dom$
|
14990
|
+
dom$k.removeAttributes(elms, 'data-dialog-height');
|
14991
14991
|
elms = tmp.querySelectorAll('[data-html]');
|
14992
|
-
dom$
|
14992
|
+
dom$k.removeAttributes(elms, 'data-html');
|
14993
14993
|
elms = tmp.querySelectorAll('[data-settings]');
|
14994
|
-
dom$
|
14994
|
+
dom$k.removeAttributes(elms, 'data-settings');
|
14995
14995
|
elms = tmp.querySelectorAll('[data-html-1]');
|
14996
|
-
dom$
|
14996
|
+
dom$k.removeAttributes(elms, 'data-html-1');
|
14997
14997
|
elms = tmp.querySelectorAll('[data-html-2]');
|
14998
|
-
dom$
|
14998
|
+
dom$k.removeAttributes(elms, 'data-html-2');
|
14999
14999
|
elms = tmp.querySelectorAll('[data-html-3]');
|
15000
|
-
dom$
|
15000
|
+
dom$k.removeAttributes(elms, 'data-html-3');
|
15001
15001
|
elms = tmp.querySelectorAll('[data-html-4]');
|
15002
|
-
dom$
|
15002
|
+
dom$k.removeAttributes(elms, 'data-html-4');
|
15003
15003
|
elms = tmp.querySelectorAll('[data-html-5]');
|
15004
|
-
dom$
|
15004
|
+
dom$k.removeAttributes(elms, 'data-html-5');
|
15005
15005
|
elms = tmp.querySelectorAll('[data-html-6]');
|
15006
|
-
dom$
|
15006
|
+
dom$k.removeAttributes(elms, 'data-html-6');
|
15007
15007
|
elms = tmp.querySelectorAll('[data-html-7]');
|
15008
|
-
dom$
|
15008
|
+
dom$k.removeAttributes(elms, 'data-html-7');
|
15009
15009
|
elms = tmp.querySelectorAll('[data-html-8]');
|
15010
|
-
dom$
|
15010
|
+
dom$k.removeAttributes(elms, 'data-html-8');
|
15011
15011
|
elms = tmp.querySelectorAll('[data-html-9]');
|
15012
|
-
dom$
|
15012
|
+
dom$k.removeAttributes(elms, 'data-html-9');
|
15013
15013
|
elms = tmp.querySelectorAll('[data-html-10]');
|
15014
|
-
dom$
|
15014
|
+
dom$k.removeAttributes(elms, 'data-html-10');
|
15015
15015
|
elms = tmp.querySelectorAll('[data-html-12]');
|
15016
|
-
dom$
|
15016
|
+
dom$k.removeAttributes(elms, 'data-html-12');
|
15017
15017
|
elms = tmp.querySelectorAll('[data-html-13]');
|
15018
|
-
dom$
|
15018
|
+
dom$k.removeAttributes(elms, 'data-html-13');
|
15019
15019
|
elms = tmp.querySelectorAll('[data-html-14]');
|
15020
|
-
dom$
|
15020
|
+
dom$k.removeAttributes(elms, 'data-html-14');
|
15021
15021
|
elms = tmp.querySelectorAll('[data-html-15]');
|
15022
|
-
dom$
|
15022
|
+
dom$k.removeAttributes(elms, 'data-html-15');
|
15023
15023
|
elms = tmp.querySelectorAll('[data-html-16]');
|
15024
|
-
dom$
|
15024
|
+
dom$k.removeAttributes(elms, 'data-html-16');
|
15025
15025
|
elms = tmp.querySelectorAll('[data-html-17]');
|
15026
|
-
dom$
|
15026
|
+
dom$k.removeAttributes(elms, 'data-html-17');
|
15027
15027
|
elms = tmp.querySelectorAll('[data-html-18]');
|
15028
|
-
dom$
|
15028
|
+
dom$k.removeAttributes(elms, 'data-html-18');
|
15029
15029
|
elms = tmp.querySelectorAll('[data-html-19]');
|
15030
|
-
dom$
|
15030
|
+
dom$k.removeAttributes(elms, 'data-html-19');
|
15031
15031
|
elms = tmp.querySelectorAll('[data-html-20]');
|
15032
|
-
dom$
|
15032
|
+
dom$k.removeAttributes(elms, 'data-html-20');
|
15033
15033
|
elms = tmp.querySelectorAll('[data-html-21]');
|
15034
|
-
dom$
|
15034
|
+
dom$k.removeAttributes(elms, 'data-html-21');
|
15035
15035
|
elms = tmp.querySelectorAll('[data-html-21]');
|
15036
|
-
dom$
|
15036
|
+
dom$k.removeAttributes(elms, 'data-html-21');
|
15037
15037
|
elms = tmp.querySelectorAll('[data-html-22]');
|
15038
|
-
dom$
|
15038
|
+
dom$k.removeAttributes(elms, 'data-html-22');
|
15039
15039
|
elms = tmp.querySelectorAll('[data-html-23]');
|
15040
|
-
dom$
|
15040
|
+
dom$k.removeAttributes(elms, 'data-html-23');
|
15041
15041
|
elms = tmp.querySelectorAll('[data-html-24]');
|
15042
|
-
dom$
|
15042
|
+
dom$k.removeAttributes(elms, 'data-html-24');
|
15043
15043
|
elms = tmp.querySelectorAll('[data-html-25]');
|
15044
|
-
dom$
|
15044
|
+
dom$k.removeAttributes(elms, 'data-html-25');
|
15045
15045
|
}
|
15046
15046
|
|
15047
15047
|
// cleaning
|
@@ -15057,22 +15057,22 @@ class HtmlUtil {
|
|
15057
15057
|
});
|
15058
15058
|
elms = tmp.querySelectorAll('.is-animated');
|
15059
15059
|
Array.prototype.forEach.call(elms, elm => {
|
15060
|
-
dom$
|
15061
|
-
dom$
|
15062
|
-
dom$
|
15063
|
-
dom$
|
15064
|
-
dom$
|
15065
|
-
dom$
|
15066
|
-
dom$
|
15067
|
-
dom$
|
15068
|
-
dom$
|
15069
|
-
dom$
|
15070
|
-
dom$
|
15071
|
-
dom$
|
15072
|
-
dom$
|
15073
|
-
dom$
|
15074
|
-
dom$
|
15075
|
-
dom$
|
15060
|
+
dom$k.removeClass(elm, 'animated');
|
15061
|
+
dom$k.removeClass(elm, 'pulse');
|
15062
|
+
dom$k.removeClass(elm, 'bounceIn');
|
15063
|
+
dom$k.removeClass(elm, 'fadeIn');
|
15064
|
+
dom$k.removeClass(elm, 'fadeOut'); //new
|
15065
|
+
dom$k.removeClass(elm, 'fadeInDown');
|
15066
|
+
dom$k.removeClass(elm, 'fadeInLeft');
|
15067
|
+
dom$k.removeClass(elm, 'fadeInRight');
|
15068
|
+
dom$k.removeClass(elm, 'fadeInUp');
|
15069
|
+
dom$k.removeClass(elm, 'flipInX');
|
15070
|
+
dom$k.removeClass(elm, 'flipInY');
|
15071
|
+
dom$k.removeClass(elm, 'slideInUp');
|
15072
|
+
dom$k.removeClass(elm, 'slideInDown');
|
15073
|
+
dom$k.removeClass(elm, 'slideInLeft');
|
15074
|
+
dom$k.removeClass(elm, 'slideInRight');
|
15075
|
+
dom$k.removeClass(elm, 'zoomIn');
|
15076
15076
|
elm.style.animationDelay = '';
|
15077
15077
|
elm.style.transitionDelay = '';
|
15078
15078
|
elm.style.transitionDuration = '';
|
@@ -15087,39 +15087,39 @@ class HtmlUtil {
|
|
15087
15087
|
//Cleanup utils
|
15088
15088
|
elms = tmp.querySelectorAll('.is-appeared');
|
15089
15089
|
Array.prototype.forEach.call(elms, elm => {
|
15090
|
-
dom$
|
15090
|
+
dom$k.removeClass(elm, 'is-appeared');
|
15091
15091
|
});
|
15092
15092
|
elms = tmp.querySelectorAll('.box-active');
|
15093
15093
|
Array.prototype.forEach.call(elms, elm => {
|
15094
|
-
dom$
|
15094
|
+
dom$k.removeClass(elm, 'box-active');
|
15095
15095
|
});
|
15096
15096
|
elms = tmp.querySelectorAll('.section-active');
|
15097
15097
|
Array.prototype.forEach.call(elms, elm => {
|
15098
|
-
dom$
|
15098
|
+
dom$k.removeClass(elm, 'section-active');
|
15099
15099
|
});
|
15100
15100
|
elms = tmp.querySelectorAll('.section-select');
|
15101
15101
|
Array.prototype.forEach.call(elms, elm => {
|
15102
|
-
dom$
|
15102
|
+
dom$k.removeClass(elm, 'section-select');
|
15103
15103
|
});
|
15104
15104
|
elms = tmp.querySelectorAll('.box-select');
|
15105
15105
|
Array.prototype.forEach.call(elms, elm => {
|
15106
|
-
dom$
|
15106
|
+
dom$k.removeClass(elm, 'box-select');
|
15107
15107
|
});
|
15108
15108
|
elms = tmp.querySelectorAll('.is-section-tool');
|
15109
|
-
dom$
|
15109
|
+
dom$k.removeElements(elms);
|
15110
15110
|
elms = tmp.querySelectorAll('.is-box-tool');
|
15111
|
-
dom$
|
15111
|
+
dom$k.removeElements(elms);
|
15112
15112
|
elms = tmp.querySelectorAll('.is-section-info');
|
15113
|
-
dom$
|
15113
|
+
dom$k.removeElements(elms);
|
15114
15114
|
var html_content = '';
|
15115
15115
|
var html_footer = '';
|
15116
15116
|
var html_others = '';
|
15117
15117
|
|
15118
15118
|
// Apply behavior on each row
|
15119
|
-
const sections = dom$
|
15119
|
+
const sections = dom$k.elementChildren(tmp);
|
15120
15120
|
sections.forEach(section => {
|
15121
15121
|
let currentSection = section;
|
15122
|
-
if (dom$
|
15122
|
+
if (dom$k.hasClass(currentSection, 'is-section')) {
|
15123
15123
|
var secclass = '';
|
15124
15124
|
// var secstyle = '';
|
15125
15125
|
if (currentSection.getAttribute('class')) secclass = ' class="' + currentSection.getAttribute('class') + '"';
|
@@ -15163,69 +15163,69 @@ class HtmlUtil {
|
|
15163
15163
|
});
|
15164
15164
|
if (this.builder.shortenOutput) {
|
15165
15165
|
elms = tmp.querySelectorAll('[data-noedit]');
|
15166
|
-
dom$
|
15166
|
+
dom$k.removeAttributes(elms, 'data-noedit');
|
15167
15167
|
elms = tmp.querySelectorAll('[data-module]');
|
15168
|
-
dom$
|
15168
|
+
dom$k.removeAttributes(elms, 'data-module');
|
15169
15169
|
elms = tmp.querySelectorAll('[data-module-desc]');
|
15170
|
-
dom$
|
15170
|
+
dom$k.removeAttributes(elms, 'data-module-desc');
|
15171
15171
|
elms = tmp.querySelectorAll('[data-dialog-width]');
|
15172
|
-
dom$
|
15172
|
+
dom$k.removeAttributes(elms, 'data-dialog-width');
|
15173
15173
|
elms = tmp.querySelectorAll('[data-dialog-height]');
|
15174
|
-
dom$
|
15174
|
+
dom$k.removeAttributes(elms, 'data-dialog-height');
|
15175
15175
|
elms = tmp.querySelectorAll('[data-html]');
|
15176
|
-
dom$
|
15176
|
+
dom$k.removeAttributes(elms, 'data-html');
|
15177
15177
|
elms = tmp.querySelectorAll('[data-settings]');
|
15178
|
-
dom$
|
15178
|
+
dom$k.removeAttributes(elms, 'data-settings');
|
15179
15179
|
elms = tmp.querySelectorAll('[data-html-1]');
|
15180
|
-
dom$
|
15180
|
+
dom$k.removeAttributes(elms, 'data-html-1');
|
15181
15181
|
elms = tmp.querySelectorAll('[data-html-2]');
|
15182
|
-
dom$
|
15182
|
+
dom$k.removeAttributes(elms, 'data-html-2');
|
15183
15183
|
elms = tmp.querySelectorAll('[data-html-3]');
|
15184
|
-
dom$
|
15184
|
+
dom$k.removeAttributes(elms, 'data-html-3');
|
15185
15185
|
elms = tmp.querySelectorAll('[data-html-4]');
|
15186
|
-
dom$
|
15186
|
+
dom$k.removeAttributes(elms, 'data-html-4');
|
15187
15187
|
elms = tmp.querySelectorAll('[data-html-5]');
|
15188
|
-
dom$
|
15188
|
+
dom$k.removeAttributes(elms, 'data-html-5');
|
15189
15189
|
elms = tmp.querySelectorAll('[data-html-6]');
|
15190
|
-
dom$
|
15190
|
+
dom$k.removeAttributes(elms, 'data-html-6');
|
15191
15191
|
elms = tmp.querySelectorAll('[data-html-7]');
|
15192
|
-
dom$
|
15192
|
+
dom$k.removeAttributes(elms, 'data-html-7');
|
15193
15193
|
elms = tmp.querySelectorAll('[data-html-8]');
|
15194
|
-
dom$
|
15194
|
+
dom$k.removeAttributes(elms, 'data-html-8');
|
15195
15195
|
elms = tmp.querySelectorAll('[data-html-9]');
|
15196
|
-
dom$
|
15196
|
+
dom$k.removeAttributes(elms, 'data-html-9');
|
15197
15197
|
elms = tmp.querySelectorAll('[data-html-10]');
|
15198
|
-
dom$
|
15198
|
+
dom$k.removeAttributes(elms, 'data-html-10');
|
15199
15199
|
elms = tmp.querySelectorAll('[data-html-12]');
|
15200
|
-
dom$
|
15200
|
+
dom$k.removeAttributes(elms, 'data-html-12');
|
15201
15201
|
elms = tmp.querySelectorAll('[data-html-13]');
|
15202
|
-
dom$
|
15202
|
+
dom$k.removeAttributes(elms, 'data-html-13');
|
15203
15203
|
elms = tmp.querySelectorAll('[data-html-14]');
|
15204
|
-
dom$
|
15204
|
+
dom$k.removeAttributes(elms, 'data-html-14');
|
15205
15205
|
elms = tmp.querySelectorAll('[data-html-15]');
|
15206
|
-
dom$
|
15206
|
+
dom$k.removeAttributes(elms, 'data-html-15');
|
15207
15207
|
elms = tmp.querySelectorAll('[data-html-16]');
|
15208
|
-
dom$
|
15208
|
+
dom$k.removeAttributes(elms, 'data-html-16');
|
15209
15209
|
elms = tmp.querySelectorAll('[data-html-17]');
|
15210
|
-
dom$
|
15210
|
+
dom$k.removeAttributes(elms, 'data-html-17');
|
15211
15211
|
elms = tmp.querySelectorAll('[data-html-18]');
|
15212
|
-
dom$
|
15212
|
+
dom$k.removeAttributes(elms, 'data-html-18');
|
15213
15213
|
elms = tmp.querySelectorAll('[data-html-19]');
|
15214
|
-
dom$
|
15214
|
+
dom$k.removeAttributes(elms, 'data-html-19');
|
15215
15215
|
elms = tmp.querySelectorAll('[data-html-20]');
|
15216
|
-
dom$
|
15216
|
+
dom$k.removeAttributes(elms, 'data-html-20');
|
15217
15217
|
elms = tmp.querySelectorAll('[data-html-21]');
|
15218
|
-
dom$
|
15218
|
+
dom$k.removeAttributes(elms, 'data-html-21');
|
15219
15219
|
elms = tmp.querySelectorAll('[data-html-21]');
|
15220
|
-
dom$
|
15220
|
+
dom$k.removeAttributes(elms, 'data-html-21');
|
15221
15221
|
elms = tmp.querySelectorAll('[data-html-22]');
|
15222
|
-
dom$
|
15222
|
+
dom$k.removeAttributes(elms, 'data-html-22');
|
15223
15223
|
elms = tmp.querySelectorAll('[data-html-23]');
|
15224
|
-
dom$
|
15224
|
+
dom$k.removeAttributes(elms, 'data-html-23');
|
15225
15225
|
elms = tmp.querySelectorAll('[data-html-24]');
|
15226
|
-
dom$
|
15226
|
+
dom$k.removeAttributes(elms, 'data-html-24');
|
15227
15227
|
elms = tmp.querySelectorAll('[data-html-25]');
|
15228
|
-
dom$
|
15228
|
+
dom$k.removeAttributes(elms, 'data-html-25');
|
15229
15229
|
}
|
15230
15230
|
html = tmp.innerHTML.trim();
|
15231
15231
|
html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
|
@@ -21768,7 +21768,7 @@ _extends(Remove, {
|
|
21768
21768
|
Sortable.mount(new AutoScrollPlugin());
|
21769
21769
|
Sortable.mount(Remove, Revert);
|
21770
21770
|
|
21771
|
-
const dom$
|
21771
|
+
const dom$j = new Dom();
|
21772
21772
|
class Select {
|
21773
21773
|
constructor(dropDown) {
|
21774
21774
|
const [toggler, menu] = dropDown.children;
|
@@ -21789,13 +21789,13 @@ class Select {
|
|
21789
21789
|
this.toggle(false);
|
21790
21790
|
dropDown.dispatchEvent(new Event('change'));
|
21791
21791
|
toggler.focus();
|
21792
|
-
let elms = dom$
|
21792
|
+
let elms = dom$j.elementChildren(menu);
|
21793
21793
|
elms.forEach(elm => {
|
21794
|
-
dom$
|
21794
|
+
dom$j.removeClass(elm, 'selected');
|
21795
21795
|
});
|
21796
21796
|
let optionselected = menu.querySelector('[data-value="' + val + '"]');
|
21797
21797
|
if (optionselected) {
|
21798
|
-
dom$
|
21798
|
+
dom$j.addClass(optionselected, 'selected');
|
21799
21799
|
}
|
21800
21800
|
};
|
21801
21801
|
const handleItemKeyDown = e => {
|
@@ -21845,7 +21845,7 @@ class Select {
|
|
21845
21845
|
// menu.children[0].focus();
|
21846
21846
|
let optionselected = menu.querySelector('[data-value="' + this.value + '"]');
|
21847
21847
|
if (optionselected) {
|
21848
|
-
dom$
|
21848
|
+
dom$j.addClass(optionselected, 'selected');
|
21849
21849
|
optionselected.focus();
|
21850
21850
|
}
|
21851
21851
|
document.addEventListener('click', handleClickOut);
|
@@ -60982,7 +60982,7 @@ class ColumnTool {
|
|
60982
60982
|
}
|
60983
60983
|
}
|
60984
60984
|
|
60985
|
-
const dom$
|
60985
|
+
const dom$i = new Dom();
|
60986
60986
|
class ELementStyleEditor {
|
60987
60987
|
constructor(builder) {
|
60988
60988
|
this.builder = builder;
|
@@ -61013,20 +61013,20 @@ class ELementStyleEditor {
|
|
61013
61013
|
</div>
|
61014
61014
|
</div>
|
61015
61015
|
`;
|
61016
|
-
dom$
|
61016
|
+
dom$i.appendHtml(builderStuff, html);
|
61017
61017
|
modalStyles = builderStuff.querySelector('.editstyles');
|
61018
61018
|
let btn = modalStyles.querySelector('.is-modal-close');
|
61019
|
-
dom$
|
61020
|
-
dom$
|
61019
|
+
dom$i.addEventListener(btn, 'click', () => {
|
61020
|
+
dom$i.removeClass(modalStyles, 'active');
|
61021
61021
|
var panel = this.builderStuff.querySelector('.is-side.elementstyles'); // if all close
|
61022
|
-
if (!dom$
|
61022
|
+
if (!dom$i.hasClass(panel, 'active')) {
|
61023
61023
|
let elms = document.querySelectorAll('[data-saveforundo]');
|
61024
61024
|
Array.prototype.forEach.call(elms, elm => {
|
61025
61025
|
elm.removeAttribute('data-saveforundo');
|
61026
61026
|
});
|
61027
61027
|
elms = document.querySelectorAll('.elm-inspected');
|
61028
61028
|
Array.prototype.forEach.call(elms, elm => {
|
61029
|
-
dom$
|
61029
|
+
dom$i.removeClass(elm, 'elm-inspected');
|
61030
61030
|
});
|
61031
61031
|
}
|
61032
61032
|
});
|
@@ -61037,24 +61037,24 @@ class ELementStyleEditor {
|
|
61037
61037
|
|
61038
61038
|
//builder classes
|
61039
61039
|
let bElmActive = false;
|
61040
|
-
if (dom$
|
61040
|
+
if (dom$i.hasClass(elm, 'elm-active')) {
|
61041
61041
|
bElmActive = true;
|
61042
61042
|
}
|
61043
61043
|
let bCellActive = false;
|
61044
|
-
if (dom$
|
61044
|
+
if (dom$i.hasClass(elm, 'elm-active')) {
|
61045
61045
|
bCellActive = true;
|
61046
61046
|
}
|
61047
61047
|
let bRowActive = false;
|
61048
|
-
if (dom$
|
61048
|
+
if (dom$i.hasClass(elm, 'row-active')) {
|
61049
61049
|
bRowActive = true;
|
61050
61050
|
}
|
61051
61051
|
elm.setAttribute('class', val); //update
|
61052
61052
|
|
61053
61053
|
//builder classes
|
61054
|
-
if (bElmActive) dom$
|
61055
|
-
if (bCellActive) dom$
|
61056
|
-
if (bRowActive) dom$
|
61057
|
-
dom$
|
61054
|
+
if (bElmActive) dom$i.addClass(elm, 'elm-active');
|
61055
|
+
if (bCellActive) dom$i.addClass(elm, 'cell-active');
|
61056
|
+
if (bRowActive) dom$i.addClass(elm, 'row-active');
|
61057
|
+
dom$i.addClass(elm, 'elm-inspected');
|
61058
61058
|
|
61059
61059
|
//Trigger Change event
|
61060
61060
|
this.builder.opts.onChange();
|
@@ -61070,10 +61070,10 @@ class ELementStyleEditor {
|
|
61070
61070
|
this.modalStyles = modalStyles;
|
61071
61071
|
}
|
61072
61072
|
toggleStyleEditor() {
|
61073
|
-
if (!dom$
|
61074
|
-
dom$
|
61073
|
+
if (!dom$i.hasClass(this.modalStyles, 'active')) {
|
61074
|
+
dom$i.addClass(this.modalStyles, 'active');
|
61075
61075
|
} else {
|
61076
|
-
dom$
|
61076
|
+
dom$i.removeClass(this.modalStyles, 'active');
|
61077
61077
|
}
|
61078
61078
|
}
|
61079
61079
|
refresh() {
|
@@ -61090,7 +61090,7 @@ class ELementStyleEditor {
|
|
61090
61090
|
}
|
61091
61091
|
}
|
61092
61092
|
|
61093
|
-
const dom$
|
61093
|
+
const dom$h = new Dom();
|
61094
61094
|
class ElementGeneralStyles {
|
61095
61095
|
constructor(builder) {
|
61096
61096
|
this.builder = builder;
|
@@ -61166,7 +61166,7 @@ class ElementGeneralStyles {
|
|
61166
61166
|
|
61167
61167
|
|
61168
61168
|
`;
|
61169
|
-
dom$
|
61169
|
+
dom$h.appendHtml(panelStuff, html);
|
61170
61170
|
|
61171
61171
|
// Background color
|
61172
61172
|
let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
|
@@ -61216,7 +61216,7 @@ class ElementGeneralStyles {
|
|
61216
61216
|
|
61217
61217
|
// Elm Background Image
|
61218
61218
|
const btnElmBgImage = panelStuff.querySelector('.input-elm-bgimage');
|
61219
|
-
if (btnElmBgImage) dom$
|
61219
|
+
if (btnElmBgImage) dom$h.addEventListener(btnElmBgImage, 'click', () => {
|
61220
61220
|
const elm = this.builder.inspectedElement;
|
61221
61221
|
|
61222
61222
|
//Get current value
|
@@ -61254,12 +61254,12 @@ class ElementGeneralStyles {
|
|
61254
61254
|
|
61255
61255
|
// Elm Background Image Adjust
|
61256
61256
|
const btnImageAdjust = panelStuff.querySelector('.input-elm-bgimageadjust');
|
61257
|
-
if (btnImageAdjust) dom$
|
61257
|
+
if (btnImageAdjust) dom$h.addEventListener(btnImageAdjust, 'click', () => {
|
61258
61258
|
const elm = this.builder.inspectedElement;
|
61259
61259
|
this.builder.colTool.openImageAdjust(elm, btnImageAdjust);
|
61260
61260
|
});
|
61261
61261
|
const btnImageRemove = panelStuff.querySelector('.input-elm-bgremove');
|
61262
|
-
if (btnImageRemove) dom$
|
61262
|
+
if (btnImageRemove) dom$h.addEventListener(btnImageRemove, 'click', () => {
|
61263
61263
|
const elm = this.builder.inspectedElement;
|
61264
61264
|
this.builder.uo.saveForUndo();
|
61265
61265
|
elm.style.backgroundImage = '';
|
@@ -61460,7 +61460,7 @@ class ElementGeneralStyles {
|
|
61460
61460
|
}
|
61461
61461
|
}
|
61462
61462
|
|
61463
|
-
const dom$
|
61463
|
+
const dom$g = new Dom();
|
61464
61464
|
class ElementBoxStyles {
|
61465
61465
|
constructor(builder) {
|
61466
61466
|
this.builder = builder;
|
@@ -61572,7 +61572,7 @@ class ElementBoxStyles {
|
|
61572
61572
|
</div>
|
61573
61573
|
</div>
|
61574
61574
|
`;
|
61575
|
-
dom$
|
61575
|
+
dom$g.appendHtml(panelStuff, html);
|
61576
61576
|
|
61577
61577
|
// Others
|
61578
61578
|
let inpElmMaxWidth = panelStuff.querySelector('#inpElmMaxWidth');
|
@@ -61913,7 +61913,7 @@ class ElementBoxStyles {
|
|
61913
61913
|
}
|
61914
61914
|
}
|
61915
61915
|
|
61916
|
-
const dom$
|
61916
|
+
const dom$f = new Dom();
|
61917
61917
|
class ElementSpacingStyles {
|
61918
61918
|
constructor(builder) {
|
61919
61919
|
this.builder = builder;
|
@@ -62054,7 +62054,7 @@ class ElementSpacingStyles {
|
|
62054
62054
|
</div>
|
62055
62055
|
</div>
|
62056
62056
|
`;
|
62057
|
-
dom$
|
62057
|
+
dom$f.appendHtml(panelStuff, html);
|
62058
62058
|
|
62059
62059
|
// Margin
|
62060
62060
|
let inpElmMarginLeft = panelStuff.querySelector('#inpElmMarginLeft');
|
@@ -62354,9 +62354,9 @@ class ElementSpacingStyles {
|
|
62354
62354
|
this.builder.uo.saveForUndo();
|
62355
62355
|
let elm = this.builder.inspectedElement;
|
62356
62356
|
if (chkResetMarginLeft.checked) {
|
62357
|
-
dom$
|
62357
|
+
dom$f.addClass(elm, 'margin-left-1024-reset');
|
62358
62358
|
} else {
|
62359
|
-
dom$
|
62359
|
+
dom$f.removeClass(elm, 'margin-left-1024-reset');
|
62360
62360
|
}
|
62361
62361
|
elementStyleEditor.refresh();
|
62362
62362
|
|
@@ -62368,9 +62368,9 @@ class ElementSpacingStyles {
|
|
62368
62368
|
this.builder.uo.saveForUndo();
|
62369
62369
|
let elm = this.builder.inspectedElement;
|
62370
62370
|
if (chkResetMarginRight.checked) {
|
62371
|
-
dom$
|
62371
|
+
dom$f.addClass(elm, 'margin-right-1024-reset');
|
62372
62372
|
} else {
|
62373
|
-
dom$
|
62373
|
+
dom$f.removeClass(elm, 'margin-right-1024-reset');
|
62374
62374
|
}
|
62375
62375
|
elementStyleEditor.refresh();
|
62376
62376
|
|
@@ -62519,12 +62519,12 @@ class ElementSpacingStyles {
|
|
62519
62519
|
}
|
62520
62520
|
|
62521
62521
|
// Responsive Positioning
|
62522
|
-
if (dom$
|
62522
|
+
if (dom$f.hasClass(elm, 'margin-left-1024-reset')) {
|
62523
62523
|
panelStuff.querySelector('#chkResetMarginLeft').checked = true;
|
62524
62524
|
} else {
|
62525
62525
|
panelStuff.querySelector('#chkResetMarginLeft').checked = false;
|
62526
62526
|
}
|
62527
|
-
if (dom$
|
62527
|
+
if (dom$f.hasClass(elm, 'margin-right-1024-reset')) {
|
62528
62528
|
panelStuff.querySelector('#chkResetMarginRight').checked = true;
|
62529
62529
|
} else {
|
62530
62530
|
panelStuff.querySelector('#chkResetMarginRight').checked = false;
|
@@ -62532,7 +62532,7 @@ class ElementSpacingStyles {
|
|
62532
62532
|
}
|
62533
62533
|
}
|
62534
62534
|
|
62535
|
-
const dom$
|
62535
|
+
const dom$e = new Dom();
|
62536
62536
|
class ElementBorderStyles {
|
62537
62537
|
constructor(builder) {
|
62538
62538
|
this.builder = builder;
|
@@ -62652,7 +62652,7 @@ class ElementBorderStyles {
|
|
62652
62652
|
</div>
|
62653
62653
|
</div>
|
62654
62654
|
`;
|
62655
|
-
dom$
|
62655
|
+
dom$e.appendHtml(panelStuff, html);
|
62656
62656
|
|
62657
62657
|
// Border color
|
62658
62658
|
let btnElmBorderColor = panelStuff.querySelector('.input-elm-bordercolor');
|
@@ -63232,7 +63232,7 @@ class ElementBorderStyles {
|
|
63232
63232
|
}
|
63233
63233
|
}
|
63234
63234
|
|
63235
|
-
const dom$
|
63235
|
+
const dom$d = new Dom();
|
63236
63236
|
class ElementTextStyles {
|
63237
63237
|
constructor(builder) {
|
63238
63238
|
this.builder = builder;
|
@@ -63373,7 +63373,7 @@ class ElementTextStyles {
|
|
63373
63373
|
</div>
|
63374
63374
|
</div>
|
63375
63375
|
`;
|
63376
|
-
dom$
|
63376
|
+
dom$d.appendHtml(panelStuff, html);
|
63377
63377
|
const htmlmodal = `
|
63378
63378
|
<div class="is-modal pickfontfamily" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
63379
63379
|
<div class="is-modal-content">
|
@@ -63384,7 +63384,7 @@ class ElementTextStyles {
|
|
63384
63384
|
</div>
|
63385
63385
|
</div>
|
63386
63386
|
`;
|
63387
|
-
dom$
|
63387
|
+
dom$d.appendHtml(builderStuff, htmlmodal);
|
63388
63388
|
const fontModal = builderStuff.querySelector('.is-modal.pickfontfamily');
|
63389
63389
|
|
63390
63390
|
// Text color
|
@@ -63493,8 +63493,8 @@ class ElementTextStyles {
|
|
63493
63493
|
// Get current class size & remove all class size from the element
|
63494
63494
|
const arrSizes = this.builder.opts.fontSizeClassValues;
|
63495
63495
|
for (var i = 0; i <= arrSizes.length - 1; i++) {
|
63496
|
-
if (dom$
|
63497
|
-
dom$
|
63496
|
+
if (dom$d.hasClass(elm, 'size-' + arrSizes[i])) {
|
63497
|
+
dom$d.removeClass(elm, 'size-' + arrSizes[i]);
|
63498
63498
|
}
|
63499
63499
|
}
|
63500
63500
|
elementStyleEditor.refresh();
|
@@ -63636,9 +63636,9 @@ class ElementTextStyles {
|
|
63636
63636
|
f = f.split(',')[0];
|
63637
63637
|
f = f.trim().toLowerCase();
|
63638
63638
|
if (f === fontname && f !== '') {
|
63639
|
-
dom$
|
63639
|
+
dom$d.addClass(e, 'on');
|
63640
63640
|
} else {
|
63641
|
-
dom$
|
63641
|
+
dom$d.removeClass(e, 'on');
|
63642
63642
|
}
|
63643
63643
|
});
|
63644
63644
|
|
@@ -63653,7 +63653,7 @@ class ElementTextStyles {
|
|
63653
63653
|
} else {
|
63654
63654
|
if (iframeDocument) {
|
63655
63655
|
[].forEach.call(iframeDocument.querySelectorAll('#divFontList > li'), e => {
|
63656
|
-
dom$
|
63656
|
+
dom$d.removeClass(e, 'on');
|
63657
63657
|
});
|
63658
63658
|
}
|
63659
63659
|
}
|
@@ -63752,7 +63752,7 @@ class ElementTextStyles {
|
|
63752
63752
|
}
|
63753
63753
|
}
|
63754
63754
|
|
63755
|
-
const dom$
|
63755
|
+
const dom$c = new Dom();
|
63756
63756
|
class ElementCornerStyles {
|
63757
63757
|
constructor(builder) {
|
63758
63758
|
this.builder = builder;
|
@@ -63803,7 +63803,7 @@ class ElementCornerStyles {
|
|
63803
63803
|
</div>
|
63804
63804
|
</div>
|
63805
63805
|
`;
|
63806
|
-
dom$
|
63806
|
+
dom$c.appendHtml(panelStuff, html);
|
63807
63807
|
const inpElmBorderRadius = panelStuff.querySelector('#inpElmBorderRadius');
|
63808
63808
|
inpElmBorderRadius.addEventListener('click', () => {
|
63809
63809
|
this.builder.uo.saveForUndo();
|
@@ -63930,7 +63930,7 @@ class ElementCornerStyles {
|
|
63930
63930
|
}
|
63931
63931
|
}
|
63932
63932
|
|
63933
|
-
const dom$
|
63933
|
+
const dom$b = new Dom();
|
63934
63934
|
class ElementShadowStyles {
|
63935
63935
|
constructor(builder) {
|
63936
63936
|
this.builder = builder;
|
@@ -64005,7 +64005,7 @@ class ElementShadowStyles {
|
|
64005
64005
|
</div>
|
64006
64006
|
</div>
|
64007
64007
|
`;
|
64008
|
-
dom$
|
64008
|
+
dom$b.appendHtml(panelStuff, html);
|
64009
64009
|
|
64010
64010
|
// Shadow color
|
64011
64011
|
let btnElmShadowColor = panelStuff.querySelector('.input-elm-shadowcolor');
|
@@ -64177,7 +64177,7 @@ class ElementShadowStyles {
|
|
64177
64177
|
}
|
64178
64178
|
}
|
64179
64179
|
|
64180
|
-
const dom$
|
64180
|
+
const dom$a = new Dom();
|
64181
64181
|
class ElementDisplayStyles {
|
64182
64182
|
constructor(builder) {
|
64183
64183
|
this.builder = builder;
|
@@ -64274,7 +64274,7 @@ class ElementDisplayStyles {
|
|
64274
64274
|
</div>
|
64275
64275
|
</div>
|
64276
64276
|
`;
|
64277
|
-
dom$
|
64277
|
+
dom$a.appendHtml(panelStuff, html);
|
64278
64278
|
const inpElmDisplay = panelStuff.querySelector('#inpElmDisplay');
|
64279
64279
|
inpElmDisplay.addEventListener('change', () => {
|
64280
64280
|
this.builder.uo.saveForUndo();
|
@@ -64371,7 +64371,7 @@ class ElementDisplayStyles {
|
|
64371
64371
|
}
|
64372
64372
|
}
|
64373
64373
|
|
64374
|
-
const dom$
|
64374
|
+
const dom$9 = new Dom();
|
64375
64375
|
class ElementPositionStyles {
|
64376
64376
|
constructor(builder) {
|
64377
64377
|
this.builder = builder;
|
@@ -64465,7 +64465,7 @@ class ElementPositionStyles {
|
|
64465
64465
|
</div>
|
64466
64466
|
</div>
|
64467
64467
|
`;
|
64468
|
-
dom$
|
64468
|
+
dom$9.appendHtml(panelStuff, html);
|
64469
64469
|
const inpElmPosition = panelStuff.querySelector('#inpElmPosition');
|
64470
64470
|
inpElmPosition.addEventListener('change', () => {
|
64471
64471
|
this.builder.uo.saveForUndo();
|
@@ -64694,7 +64694,7 @@ class ElementPositionStyles {
|
|
64694
64694
|
}
|
64695
64695
|
}
|
64696
64696
|
|
64697
|
-
const dom$
|
64697
|
+
const dom$8 = new Dom();
|
64698
64698
|
class ElementEffectStyles {
|
64699
64699
|
constructor(builder) {
|
64700
64700
|
this.builder = builder;
|
@@ -64773,7 +64773,7 @@ class ElementEffectStyles {
|
|
64773
64773
|
</div>
|
64774
64774
|
</div>
|
64775
64775
|
`;
|
64776
|
-
dom$
|
64776
|
+
dom$8.appendHtml(panelStuff, html);
|
64777
64777
|
const inpElmOpacity = panelStuff.querySelector('#inpElmOpacity');
|
64778
64778
|
inpElmOpacity.addEventListener('click', () => {
|
64779
64779
|
this.builder.uo.saveForUndo();
|
@@ -65191,7 +65191,7 @@ class ElementEffectStyles {
|
|
65191
65191
|
}
|
65192
65192
|
}
|
65193
65193
|
|
65194
|
-
const dom$
|
65194
|
+
const dom$7 = new Dom();
|
65195
65195
|
class ElementAttributeStyles {
|
65196
65196
|
constructor(builder) {
|
65197
65197
|
this.builder = builder;
|
@@ -65266,7 +65266,7 @@ class ElementAttributeStyles {
|
|
65266
65266
|
</div>
|
65267
65267
|
</div>
|
65268
65268
|
`;
|
65269
|
-
dom$
|
65269
|
+
dom$7.appendHtml(panelStuff, html);
|
65270
65270
|
let inps = panelStuff.querySelectorAll('#inpElmAttr1,#inpElmAttr2,#inpElmAttr3,#inpElmAttr4,#inpElmAttr5,#inpElmAttrVal1,#inpElmAttrVal2,#inpElmAttrVal3,#inpElmAttrVal4,#inpElmAttrVal5');
|
65271
65271
|
Array.prototype.forEach.call(inps, inp => {
|
65272
65272
|
inp.addEventListener('click', () => {
|
@@ -65331,7 +65331,7 @@ class ElementAttributeStyles {
|
|
65331
65331
|
}
|
65332
65332
|
}
|
65333
65333
|
|
65334
|
-
const dom$
|
65334
|
+
const dom$6 = new Dom();
|
65335
65335
|
class ElementMoreStyles {
|
65336
65336
|
constructor(builder) {
|
65337
65337
|
this.builder = builder;
|
@@ -65358,7 +65358,7 @@ class ElementMoreStyles {
|
|
65358
65358
|
</div>
|
65359
65359
|
|
65360
65360
|
`;
|
65361
|
-
dom$
|
65361
|
+
dom$6.appendHtml(panelStuff, html);
|
65362
65362
|
const inpElmId = panelStuff.querySelector('#inpElmId');
|
65363
65363
|
inpElmId.addEventListener('change', () => {
|
65364
65364
|
let elm = this.builder.inspectedElement;
|
@@ -65414,7 +65414,7 @@ class ElementMoreStyles {
|
|
65414
65414
|
}
|
65415
65415
|
}
|
65416
65416
|
|
65417
|
-
const dom$
|
65417
|
+
const dom$5 = new Dom();
|
65418
65418
|
class ElementAnimationStyles {
|
65419
65419
|
constructor(builder) {
|
65420
65420
|
this.builder = builder;
|
@@ -65554,7 +65554,7 @@ class ElementAnimationStyles {
|
|
65554
65554
|
</div>
|
65555
65555
|
</div>
|
65556
65556
|
`;
|
65557
|
-
dom$
|
65557
|
+
dom$5.appendHtml(panelStuff, html);
|
65558
65558
|
let inp = panelStuff.querySelector('#selElmAnim');
|
65559
65559
|
inp.addEventListener('change', () => {
|
65560
65560
|
this.builder.uo.saveForUndo();
|
@@ -65621,8 +65621,8 @@ class ElementAnimationStyles {
|
|
65621
65621
|
if (window.AOS) window.AOS.init({
|
65622
65622
|
duration: 1
|
65623
65623
|
});
|
65624
|
-
dom$
|
65625
|
-
dom$
|
65624
|
+
dom$5.removeClass(elm, 'aos-init');
|
65625
|
+
dom$5.removeClass(elm, 'aos-animate');
|
65626
65626
|
setTimeout(function () {
|
65627
65627
|
elm.style.visibility = '';
|
65628
65628
|
if (window.AOS) window.AOS.init({
|
@@ -65654,7 +65654,7 @@ class ElementAnimationStyles {
|
|
65654
65654
|
}
|
65655
65655
|
}
|
65656
65656
|
|
65657
|
-
const dom$
|
65657
|
+
const dom$4 = new Dom();
|
65658
65658
|
let arrElms = [];
|
65659
65659
|
class ElementPanel {
|
65660
65660
|
constructor(builder) {
|
@@ -65738,15 +65738,15 @@ class ElementPanel {
|
|
65738
65738
|
</div>
|
65739
65739
|
</div>
|
65740
65740
|
`;
|
65741
|
-
dom$
|
65741
|
+
dom$4.appendHtml(builderStuff, html);
|
65742
65742
|
this.elementStyleEditor = new ELementStyleEditor(builder);
|
65743
65743
|
panel = builderStuff.querySelector('.elementstyles');
|
65744
65744
|
let btn = panel.querySelector('.is-side-close');
|
65745
|
-
dom$
|
65745
|
+
dom$4.addEventListener(btn, 'click', () => {
|
65746
65746
|
this.hidePanel();
|
65747
65747
|
});
|
65748
65748
|
btn = panel.querySelector('.elm-editstyle');
|
65749
|
-
dom$
|
65749
|
+
dom$4.addEventListener(btn, 'click', () => {
|
65750
65750
|
this.elementStyleEditor.toggleStyleEditor();
|
65751
65751
|
});
|
65752
65752
|
}
|
@@ -65779,7 +65779,7 @@ class ElementPanel {
|
|
65779
65779
|
this.elementAnimationStyles = elementAnimationStyles;
|
65780
65780
|
}
|
65781
65781
|
click() {
|
65782
|
-
if (dom$
|
65782
|
+
if (dom$4.hasClass(this.panel, 'active') || dom$4.hasClass(this.elementStyleEditor.modalStyles, 'active')) {
|
65783
65783
|
this.inspect(this.builder.inspectedElement);
|
65784
65784
|
}
|
65785
65785
|
}
|
@@ -65805,16 +65805,16 @@ class ElementPanel {
|
|
65805
65805
|
elm.setAttribute('data-saveforundo', '');
|
65806
65806
|
elms = this.builder.doc.querySelectorAll('.elm-inspected');
|
65807
65807
|
Array.prototype.forEach.call(elms, elm => {
|
65808
|
-
dom$
|
65808
|
+
dom$4.removeClass(elm, 'elm-inspected');
|
65809
65809
|
});
|
65810
65810
|
setTimeout(() => {
|
65811
|
-
dom$
|
65811
|
+
dom$4.addClass(elm, 'elm-inspected');
|
65812
65812
|
}, 10);
|
65813
65813
|
panel.querySelector('.elm-list').innerHTML = '';
|
65814
65814
|
let element = elm;
|
65815
65815
|
let i = 0;
|
65816
65816
|
arrElms = [];
|
65817
|
-
while (!dom$
|
65817
|
+
while (!dom$4.hasClass(element, 'is-builder')) {
|
65818
65818
|
arrElms.push(element);
|
65819
65819
|
if (!element) {
|
65820
65820
|
// This should not happen. But on quick user click (ex. undo then redo quickly), an element can lost, so checking is needed
|
@@ -65824,13 +65824,13 @@ class ElementPanel {
|
|
65824
65824
|
break;
|
65825
65825
|
}
|
65826
65826
|
var tagName = element.tagName.toLowerCase();
|
65827
|
-
var a = dom$
|
65827
|
+
var a = dom$4.createElement('a');
|
65828
65828
|
a.setAttribute('data-index', i);
|
65829
65829
|
i++;
|
65830
65830
|
a.setAttribute('href', '#');
|
65831
65831
|
a.innerHTML = tagName;
|
65832
65832
|
if (panel.querySelector('.elm-list').innerHTML === '') {
|
65833
|
-
dom$
|
65833
|
+
dom$4.addClass(a, 'active');
|
65834
65834
|
panel.querySelector('.elm-list').insertAdjacentHTML('afterbegin', a.outerHTML);
|
65835
65835
|
} else {
|
65836
65836
|
panel.querySelector('.elm-list').insertAdjacentHTML('afterbegin', ' > ');
|
@@ -65840,7 +65840,7 @@ class ElementPanel {
|
|
65840
65840
|
}
|
65841
65841
|
const links = panel.querySelectorAll('.elm-list a');
|
65842
65842
|
Array.prototype.forEach.call(links, link => {
|
65843
|
-
dom$
|
65843
|
+
dom$4.addEventListener(link, 'click', e => {
|
65844
65844
|
let index = link.getAttribute('data-index');
|
65845
65845
|
this.builder.inspectedElement = arrElms[index];
|
65846
65846
|
this.inspect(arrElms[index]);
|
@@ -65861,10 +65861,10 @@ class ElementPanel {
|
|
65861
65861
|
|
65862
65862
|
let panels = this.builderStuff.querySelectorAll('.is-side');
|
65863
65863
|
Array.prototype.forEach.call(panels, panel => {
|
65864
|
-
dom$
|
65864
|
+
dom$4.removeClass(panel, 'active');
|
65865
65865
|
});
|
65866
65866
|
setTimeout(() => {
|
65867
|
-
dom$
|
65867
|
+
dom$4.addClass(panel, 'active'); // add 10ms delay after display is set 'block' for visible animation
|
65868
65868
|
|
65869
65869
|
// Focus
|
65870
65870
|
let content = panel.querySelector('.is-tab-content.active');
|
@@ -65882,14 +65882,14 @@ class ElementPanel {
|
|
65882
65882
|
}
|
65883
65883
|
hidePanel() {
|
65884
65884
|
var panel = this.builderStuff.querySelector('.is-side.elementstyles');
|
65885
|
-
dom$
|
65885
|
+
dom$4.removeClass(panel, 'active');
|
65886
65886
|
let elms = this.builder.doc.querySelectorAll('[data-saveforundo]');
|
65887
65887
|
Array.prototype.forEach.call(elms, elm => {
|
65888
65888
|
elm.removeAttribute('data-saveforundo');
|
65889
65889
|
});
|
65890
65890
|
elms = this.builder.doc.querySelectorAll('.elm-inspected');
|
65891
65891
|
Array.prototype.forEach.call(elms, elm => {
|
65892
|
-
dom$
|
65892
|
+
dom$4.removeClass(elm, 'elm-inspected');
|
65893
65893
|
});
|
65894
65894
|
}
|
65895
65895
|
}
|
@@ -67292,7 +67292,7 @@ class Preferences {
|
|
67292
67292
|
}
|
67293
67293
|
}
|
67294
67294
|
|
67295
|
-
const dom$
|
67295
|
+
const dom$3 = new Dom();
|
67296
67296
|
class ColorClassPicker {
|
67297
67297
|
constructor(opts = {}, mode) {
|
67298
67298
|
let defaults = {
|
@@ -67425,7 +67425,7 @@ class ColorClassPicker {
|
|
67425
67425
|
this.showColorGradient('gray');
|
67426
67426
|
let btns = document.querySelectorAll('.base-color');
|
67427
67427
|
Array.prototype.forEach.call(btns, btn => {
|
67428
|
-
dom$
|
67428
|
+
dom$3.addEventListener(btn, 'click', () => {
|
67429
67429
|
const base = btn.getAttribute('data-base');
|
67430
67430
|
this.showColorGradient(base);
|
67431
67431
|
let val = btn.getAttribute('data-value');
|
@@ -67435,7 +67435,7 @@ class ColorClassPicker {
|
|
67435
67435
|
});
|
67436
67436
|
btns = document.querySelectorAll('.quick-color');
|
67437
67437
|
Array.prototype.forEach.call(btns, btn => {
|
67438
|
-
dom$
|
67438
|
+
dom$3.addEventListener(btn, 'click', e => {
|
67439
67439
|
e.preventDefault();
|
67440
67440
|
let val = btn.getAttribute('data-value');
|
67441
67441
|
if (this.mode === 'text') val = val.replace('bg-', 'text-');
|
@@ -67456,7 +67456,7 @@ class ColorClassPicker {
|
|
67456
67456
|
divDetails.innerHTML = s;
|
67457
67457
|
const btns = document.querySelectorAll('.detail-color');
|
67458
67458
|
Array.prototype.forEach.call(btns, btn => {
|
67459
|
-
dom$
|
67459
|
+
dom$3.addEventListener(btn, 'click', () => {
|
67460
67460
|
let val = btn.getAttribute('data-value');
|
67461
67461
|
if (this.mode === 'text') val = val.replace('bg-', 'text-');
|
67462
67462
|
this.opts.onPick(val);
|
@@ -72858,7 +72858,7 @@ class SaveImages {
|
|
72858
72858
|
}
|
72859
72859
|
}
|
72860
72860
|
|
72861
|
-
const dom$
|
72861
|
+
const dom$2 = new Dom();
|
72862
72862
|
class Tooltip {
|
72863
72863
|
constructor(builder) {
|
72864
72864
|
this.builder = builder;
|
@@ -72869,7 +72869,7 @@ class Tooltip {
|
|
72869
72869
|
let tooltip = builderStuff.querySelector('.is-tooltip');
|
72870
72870
|
if (!tooltip) {
|
72871
72871
|
let html = '<div class="is-tooltip"></div>';
|
72872
|
-
dom$
|
72872
|
+
dom$2.appendHtml(builderStuff, html);
|
72873
72873
|
tooltip = builderStuff.querySelector('.is-tooltip');
|
72874
72874
|
}
|
72875
72875
|
this.tooltip = tooltip;
|
@@ -73797,7 +73797,7 @@ class ShortcutInfo {
|
|
73797
73797
|
}
|
73798
73798
|
}
|
73799
73799
|
|
73800
|
-
const dom = new Dom();
|
73800
|
+
const dom$1 = new Dom();
|
73801
73801
|
class Tabs {
|
73802
73802
|
constructor() {
|
73803
73803
|
// Close all dropdown
|
@@ -73832,7 +73832,7 @@ class Tabs {
|
|
73832
73832
|
}
|
73833
73833
|
return false;
|
73834
73834
|
}
|
73835
|
-
if (dom.hasClass(tab, 'active')) {
|
73835
|
+
if (dom$1.hasClass(tab, 'active')) {
|
73836
73836
|
return false;
|
73837
73837
|
}
|
73838
73838
|
const id = tab.getAttribute('data-content');
|
@@ -73843,21 +73843,21 @@ class Tabs {
|
|
73843
73843
|
// Highlight selected
|
73844
73844
|
let samegrouptabs = document.querySelectorAll('.is-tabs[data-group="' + group + '"] > a');
|
73845
73845
|
Array.prototype.forEach.call(samegrouptabs, samegrouptab => {
|
73846
|
-
dom.removeClass(samegrouptab, 'active');
|
73846
|
+
dom$1.removeClass(samegrouptab, 'active');
|
73847
73847
|
});
|
73848
73848
|
samegrouptabs = document.querySelectorAll('.is-tabs-more[data-group="' + group + '"] > li');
|
73849
73849
|
Array.prototype.forEach.call(samegrouptabs, samegrouptab => {
|
73850
|
-
dom.removeClass(samegrouptab, 'active');
|
73850
|
+
dom$1.removeClass(samegrouptab, 'active');
|
73851
73851
|
});
|
73852
|
-
dom.addClass(tab, 'active');
|
73852
|
+
dom$1.addClass(tab, 'active');
|
73853
73853
|
let samegroupcontents = document.querySelectorAll('.is-tab-content[data-group="' + group + '"]');
|
73854
73854
|
Array.prototype.forEach.call(samegroupcontents, samegroupcontent => {
|
73855
73855
|
samegroupcontent.style.display = 'none';
|
73856
|
-
dom.removeClass(samegroupcontent, 'active');
|
73856
|
+
dom$1.removeClass(samegroupcontent, 'active');
|
73857
73857
|
});
|
73858
73858
|
const content = document.querySelector('#' + id);
|
73859
73859
|
content.style.display = 'flex';
|
73860
|
-
dom.addClass(content, 'active');
|
73860
|
+
dom$1.addClass(content, 'active');
|
73861
73861
|
document.querySelector('.is-tabs-more').style.display = 'none';
|
73862
73862
|
|
73863
73863
|
// Close all dropdown
|
@@ -76346,6 +76346,1521 @@ class LivePreview {
|
|
76346
76346
|
}
|
76347
76347
|
}
|
76348
76348
|
|
76349
|
+
// Collection of common editing functions
|
76350
|
+
|
76351
|
+
class Lib {
|
76352
|
+
constructor(builder) {
|
76353
|
+
this.builder = builder;
|
76354
|
+
}
|
76355
|
+
|
76356
|
+
// Get complete/outer HTML of an element;
|
76357
|
+
getHtml(element) {
|
76358
|
+
const combineStrings = (outer, inner) => {
|
76359
|
+
// Find the opening tag of the first/parent element
|
76360
|
+
const openingTagRegex = /<([a-zA-Z]+\b[^>]*)>/;
|
76361
|
+
const openingTagMatch = outer.match(openingTagRegex);
|
76362
|
+
const openingTag = openingTagMatch[1];
|
76363
|
+
const combinedResult = `<${openingTag}>${inner}</div>`;
|
76364
|
+
return combinedResult;
|
76365
|
+
};
|
76366
|
+
let html = combineStrings(element.outerHTML, this.builder.readHtml(element, false, true));
|
76367
|
+
return html;
|
76368
|
+
}
|
76369
|
+
|
76370
|
+
// Run functions based on short command
|
76371
|
+
processShortCommand(command) {
|
76372
|
+
// Undo/Redo
|
76373
|
+
if (command === 'undo') {
|
76374
|
+
this.builder.undo();
|
76375
|
+
return false;
|
76376
|
+
}
|
76377
|
+
if (command === 'redo') {
|
76378
|
+
this.builder.redo();
|
76379
|
+
return false;
|
76380
|
+
}
|
76381
|
+
|
76382
|
+
// The process below needs active element
|
76383
|
+
let elm = this.builder.activeElement;
|
76384
|
+
if (!elm) return command;
|
76385
|
+
|
76386
|
+
// Size
|
76387
|
+
const isTextBlockElement = element => {
|
76388
|
+
const textBlockTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE'];
|
76389
|
+
const tagName = element.tagName.toUpperCase();
|
76390
|
+
return textBlockTags.includes(tagName);
|
76391
|
+
};
|
76392
|
+
if (command === 'bigger' || command === 'larger' || command === 'enlarge' || command === 'increase') {
|
76393
|
+
if (elm.classList.contains('spacer')) {
|
76394
|
+
this.builder.saveForUndo();
|
76395
|
+
this.builder.lib.increaseElementHeight(elm);
|
76396
|
+
return false;
|
76397
|
+
} else if (isTextBlockElement(elm)) {
|
76398
|
+
this.builder.saveForUndo();
|
76399
|
+
this.builder.lib.increaseFontSize(elm);
|
76400
|
+
return false;
|
76401
|
+
}
|
76402
|
+
}
|
76403
|
+
if (command === 'smaller' || command === 'decrease') {
|
76404
|
+
if (elm.classList.contains('spacer')) {
|
76405
|
+
this.builder.saveForUndo();
|
76406
|
+
this.builder.lib.decreaseElementHeight(elm);
|
76407
|
+
return false;
|
76408
|
+
} else if (isTextBlockElement(elm)) {
|
76409
|
+
this.builder.saveForUndo();
|
76410
|
+
this.builder.lib.decreaseFontSize(elm);
|
76411
|
+
return false;
|
76412
|
+
}
|
76413
|
+
}
|
76414
|
+
|
76415
|
+
// Text
|
76416
|
+
const formatText = s => {
|
76417
|
+
this.builder.saveForUndo();
|
76418
|
+
this.builder.util.restoreSelection();
|
76419
|
+
this.builder.formatTextNonToggle(s);
|
76420
|
+
this.builder.util.saveSelection();
|
76421
|
+
};
|
76422
|
+
if (command === 'bold') {
|
76423
|
+
formatText('bold');
|
76424
|
+
return false;
|
76425
|
+
}
|
76426
|
+
if (command === 'italic') {
|
76427
|
+
formatText('italic');
|
76428
|
+
return false;
|
76429
|
+
}
|
76430
|
+
if (command === 'underline') {
|
76431
|
+
formatText('underline');
|
76432
|
+
return false;
|
76433
|
+
}
|
76434
|
+
if (command === 'strikethrough') {
|
76435
|
+
formatText('strikethrough');
|
76436
|
+
return false;
|
76437
|
+
}
|
76438
|
+
if (command === 'superscript') {
|
76439
|
+
formatText('superscript');
|
76440
|
+
return false;
|
76441
|
+
}
|
76442
|
+
if (command === 'subscript') {
|
76443
|
+
formatText('subscript');
|
76444
|
+
return false;
|
76445
|
+
}
|
76446
|
+
if (command === 'uppercase') {
|
76447
|
+
formatText('uppercase');
|
76448
|
+
return false;
|
76449
|
+
}
|
76450
|
+
if (command === 'lowercase') {
|
76451
|
+
formatText('lowercase');
|
76452
|
+
return false;
|
76453
|
+
}
|
76454
|
+
if (command === 'capitalize') {
|
76455
|
+
formatText('capitalize');
|
76456
|
+
return false;
|
76457
|
+
}
|
76458
|
+
if (command === 'clean') {
|
76459
|
+
formatText('clean');
|
76460
|
+
return false;
|
76461
|
+
}
|
76462
|
+
return command;
|
76463
|
+
}
|
76464
|
+
getCurrentBackground(activeBox) {
|
76465
|
+
let currentImage = '';
|
76466
|
+
const overlayBgs = activeBox.querySelectorAll('.is-overlay-bg');
|
76467
|
+
overlayBgs.forEach(overlayBg => {
|
76468
|
+
if (overlayBg.style.backgroundImage) {
|
76469
|
+
if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
|
76470
|
+
let url = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
76471
|
+
// let filename = url.substring(url.lastIndexOf('/') + 1);
|
76472
|
+
if (currentImage !== '') currentImage = ', ';
|
76473
|
+
// currentImage+= `${filename}`;
|
76474
|
+
currentImage += `${url}`;
|
76475
|
+
}
|
76476
|
+
}
|
76477
|
+
});
|
76478
|
+
return currentImage;
|
76479
|
+
}
|
76480
|
+
clearBackgroundColor(activeBox) {
|
76481
|
+
let overlayBg = activeBox.querySelector('.is-overlay');
|
76482
|
+
if (overlayBg) {
|
76483
|
+
overlayBg.style.backgroundColor = '';
|
76484
|
+
}
|
76485
|
+
}
|
76486
|
+
clearBackgroundImage(activeBox) {
|
76487
|
+
let overlayBg = activeBox.querySelector('.is-overlay-bg');
|
76488
|
+
if (overlayBg) {
|
76489
|
+
overlayBg.parentNode.removeChild(overlayBg);
|
76490
|
+
}
|
76491
|
+
}
|
76492
|
+
updateBackgroundImage(activeBox, url) {
|
76493
|
+
let overlay = activeBox.querySelector('.is-overlay');
|
76494
|
+
if (!overlay) {
|
76495
|
+
activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
|
76496
|
+
overlay = activeBox.querySelector('.is-overlay');
|
76497
|
+
}
|
76498
|
+
if (activeBox.classList.contains('is-section')) {
|
76499
|
+
if (activeBox.classList.contains('min-height-20') || activeBox.classList.contains('min-height-25') || activeBox.classList.contains('min-height-30') || activeBox.classList.contains('min-height-40') || activeBox.classList.contains('min-height-50') || activeBox.classList.contains('min-height-60') || activeBox.classList.contains('min-height-70') || activeBox.classList.contains('min-height-75') || activeBox.classList.contains('min-height-80') || activeBox.classList.contains('min-height-90') || activeBox.classList.contains('min-height-100')) ; else {
|
76500
|
+
activeBox.classList.add('min-height-60');
|
76501
|
+
}
|
76502
|
+
}
|
76503
|
+
let overlayBg = overlay.querySelector('.is-overlay-bg');
|
76504
|
+
if (!overlayBg) {
|
76505
|
+
overlay.insertAdjacentHTML('beforeend', '<div class="is-overlay-bg"></div>');
|
76506
|
+
overlayBg = overlay.querySelector('.is-overlay-bg');
|
76507
|
+
}
|
76508
|
+
overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
|
76509
|
+
overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
|
76510
|
+
|
76511
|
+
// Reset position & filter (grayscale)
|
76512
|
+
overlayBg.style.filter = '';
|
76513
|
+
overlay.style.filter = '';
|
76514
|
+
}
|
76515
|
+
moveContent(activeBox, val) {
|
76516
|
+
const container = activeBox.querySelector('.is-container');
|
76517
|
+
if (val === 'left' || val === 'center' || val === 'right') {
|
76518
|
+
container.classList.remove('is-content-left');
|
76519
|
+
container.classList.remove('is-content-right');
|
76520
|
+
container.classList.remove('edge-x--1');
|
76521
|
+
container.classList.remove('edge-x--0-75');
|
76522
|
+
container.classList.remove('edge-x--0-5');
|
76523
|
+
container.classList.remove('edge-x--0-25');
|
76524
|
+
container.classList.remove('edge-x-0');
|
76525
|
+
container.classList.remove('edge-x-0-25');
|
76526
|
+
container.classList.remove('edge-x-0-5');
|
76527
|
+
container.classList.remove('edge-x-0-75');
|
76528
|
+
container.classList.remove('edge-x-1');
|
76529
|
+
container.classList.remove('edge-x-2');
|
76530
|
+
container.classList.remove('edge-x-3');
|
76531
|
+
container.classList.remove('edge-x-4');
|
76532
|
+
container.classList.remove('edge-x-5');
|
76533
|
+
container.classList.remove('edge-x-6');
|
76534
|
+
}
|
76535
|
+
if (val === 'left') {
|
76536
|
+
container.classList.add('is-content-left');
|
76537
|
+
container.classList.add('edge-x-2');
|
76538
|
+
}
|
76539
|
+
if (val === 'right') {
|
76540
|
+
container.classList.add('is-content-right');
|
76541
|
+
container.classList.add('edge-x-2');
|
76542
|
+
}
|
76543
|
+
if (val === 'top' || val === 'middle' || val === 'bottom') {
|
76544
|
+
activeBox.classList.remove('is-content-top');
|
76545
|
+
activeBox.classList.remove('is-content-bottom');
|
76546
|
+
activeBox.classList.remove('edge-y--5');
|
76547
|
+
activeBox.classList.remove('edge-y--4');
|
76548
|
+
activeBox.classList.remove('edge-y--3');
|
76549
|
+
activeBox.classList.remove('edge-y--2');
|
76550
|
+
activeBox.classList.remove('edge-y--1');
|
76551
|
+
activeBox.classList.remove('edge-y-0');
|
76552
|
+
activeBox.classList.remove('edge-y-0-25');
|
76553
|
+
activeBox.classList.remove('edge-y-0-5');
|
76554
|
+
activeBox.classList.remove('edge-y-0-75');
|
76555
|
+
activeBox.classList.remove('edge-y-1');
|
76556
|
+
activeBox.classList.remove('edge-y-2');
|
76557
|
+
activeBox.classList.remove('edge-y-3');
|
76558
|
+
activeBox.classList.remove('edge-y-4');
|
76559
|
+
activeBox.classList.remove('edge-y-5');
|
76560
|
+
activeBox.classList.remove('edge-y-6');
|
76561
|
+
activeBox.classList.remove('edge-y-7');
|
76562
|
+
activeBox.classList.remove('edge-y-8');
|
76563
|
+
}
|
76564
|
+
if (val === 'top') {
|
76565
|
+
activeBox.classList.add('is-content-top');
|
76566
|
+
activeBox.classList.add('edge-y-2');
|
76567
|
+
}
|
76568
|
+
if (val === 'bottom') {
|
76569
|
+
activeBox.classList.add('is-content-bottom');
|
76570
|
+
activeBox.classList.add('edge-y-2');
|
76571
|
+
}
|
76572
|
+
}
|
76573
|
+
updateContentSize(activeBox, val) {
|
76574
|
+
const container = activeBox.querySelector('.is-container');
|
76575
|
+
// const contentSizes = this.builder.contentSizes;
|
76576
|
+
const contentSizes = [300, 320, 360, 400, 440, 480, 520, 560, 600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080, 1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560, 1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040, 2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520, 2560, 2600, 2640, 2680, 2700];
|
76577
|
+
if (val === '') {
|
76578
|
+
container.style.maxWidth = '';
|
76579
|
+
container.classList.forEach(item => {
|
76580
|
+
if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
|
76581
|
+
container.classList.remove(item);
|
76582
|
+
}
|
76583
|
+
});
|
76584
|
+
container.classList.add('is-content-none');
|
76585
|
+
return;
|
76586
|
+
}
|
76587
|
+
let targetWidth;
|
76588
|
+
for (let i = 0; i < contentSizes.length; i++) {
|
76589
|
+
if (container.classList.contains(`is-content-${contentSizes[i]}`)) {
|
76590
|
+
if (val === '+') {
|
76591
|
+
if (i + 1 >= contentSizes.length) {
|
76592
|
+
targetWidth = contentSizes[i];
|
76593
|
+
} else {
|
76594
|
+
targetWidth = contentSizes[i + 1];
|
76595
|
+
}
|
76596
|
+
break;
|
76597
|
+
}
|
76598
|
+
if (val === '-') {
|
76599
|
+
if (i - 1 < 0) {
|
76600
|
+
targetWidth = contentSizes[i];
|
76601
|
+
} else {
|
76602
|
+
targetWidth = contentSizes[i - 1];
|
76603
|
+
}
|
76604
|
+
break;
|
76605
|
+
}
|
76606
|
+
}
|
76607
|
+
}
|
76608
|
+
if (!targetWidth) {
|
76609
|
+
const currentWidth = container.offsetWidth;
|
76610
|
+
// let targetWidth;
|
76611
|
+
|
76612
|
+
for (let i = 0; i < contentSizes.length; i++) {
|
76613
|
+
if (contentSizes[i] <= currentWidth && currentWidth < contentSizes[i + 1]) {
|
76614
|
+
if (val === '+') {
|
76615
|
+
targetWidth = contentSizes[i + 1];
|
76616
|
+
break;
|
76617
|
+
}
|
76618
|
+
}
|
76619
|
+
if (contentSizes[i] < currentWidth && currentWidth <= contentSizes[i + 1]) {
|
76620
|
+
if (val === '-') {
|
76621
|
+
targetWidth = contentSizes[i];
|
76622
|
+
break;
|
76623
|
+
}
|
76624
|
+
}
|
76625
|
+
}
|
76626
|
+
}
|
76627
|
+
if (!targetWidth) targetWidth = 800;
|
76628
|
+
container.style.maxWidth = ''; //remove inline style
|
76629
|
+
|
76630
|
+
container.classList.forEach(item => {
|
76631
|
+
if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
|
76632
|
+
container.classList.remove(item);
|
76633
|
+
}
|
76634
|
+
});
|
76635
|
+
container.classList.add('is-content-' + targetWidth);
|
76636
|
+
}
|
76637
|
+
updateContentColor(activeBox, val) {
|
76638
|
+
if (val == 'light') {
|
76639
|
+
activeBox.classList.remove('is-dark-text');
|
76640
|
+
activeBox.classList.add('is-light-text');
|
76641
|
+
}
|
76642
|
+
if (val == 'dark') {
|
76643
|
+
activeBox.classList.remove('is-light-text');
|
76644
|
+
activeBox.classList.add('is-dark-text');
|
76645
|
+
}
|
76646
|
+
if (val == '') {
|
76647
|
+
activeBox.classList.remove('is-light-text');
|
76648
|
+
activeBox.classList.remove('is-dark-text');
|
76649
|
+
}
|
76650
|
+
}
|
76651
|
+
chooseHeadline() {
|
76652
|
+
let list = ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', 'We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.', 'Creative and Inspiring'];
|
76653
|
+
if (this.builder.headlineList) list = this.builder.headlineList;
|
76654
|
+
let randomIndex = Math.floor(Math.random() * list.length);
|
76655
|
+
return list[randomIndex];
|
76656
|
+
}
|
76657
|
+
_addBlock(activeBox, html, pos) {
|
76658
|
+
/*
|
76659
|
+
let bSnippet = false;
|
76660
|
+
let attr;
|
76661
|
+
|
76662
|
+
if(activeBox.querySelector('.cell-active')) {
|
76663
|
+
// This is needed before calling addSnippet()
|
76664
|
+
const builderStuff = this.builder.builderStuff;
|
76665
|
+
let quickadd = builderStuff.querySelector('.quickadd');
|
76666
|
+
quickadd.setAttribute('data-mode','row');
|
76667
|
+
// ----
|
76668
|
+
if(html!=='') this.builder.addSnippet(html, bSnippet);
|
76669
|
+
return;
|
76670
|
+
}
|
76671
|
+
*/
|
76672
|
+
|
76673
|
+
let container = activeBox.querySelector('.is-container');
|
76674
|
+
if (activeBox.classList.contains('is-container')) container = activeBox;
|
76675
|
+
let row;
|
76676
|
+
if (activeBox.querySelector('.row-active')) {
|
76677
|
+
row = activeBox.querySelector('.row-active');
|
76678
|
+
} else {
|
76679
|
+
const rows = this.builder.dom.elementChildren(container);
|
76680
|
+
row = rows[rows.length - 1]; // last row
|
76681
|
+
}
|
76682
|
+
|
76683
|
+
let rowElement, cellElement;
|
76684
|
+
if (this.builder.opts.row === '') {
|
76685
|
+
rowElement = this.htmlToElement(this.builder.opts.rowFormat);
|
76686
|
+
let s = this.builder.opts.cellFormat;
|
76687
|
+
let pos = s.indexOf('</');
|
76688
|
+
html = s.substring(0, pos) + html + s.substring(pos);
|
76689
|
+
|
76690
|
+
// go to last deeper level
|
76691
|
+
let targetrow = this.builder.dom.elementChildren(rowElement);
|
76692
|
+
while (targetrow.length > 0) {
|
76693
|
+
targetrow = targetrow[0];
|
76694
|
+
if (this.builder.dom.elementChildren(targetrow).length > 0) {
|
76695
|
+
targetrow = this.builder.dom.elementChildren(targetrow);
|
76696
|
+
} else {
|
76697
|
+
break;
|
76698
|
+
}
|
76699
|
+
}
|
76700
|
+
targetrow.innerHTML = html;
|
76701
|
+
cellElement = targetrow.firstChild;
|
76702
|
+
// if(attr) {
|
76703
|
+
// cellElement.setAttribute(attr,'');
|
76704
|
+
// }
|
76705
|
+
} else {
|
76706
|
+
cellElement = document.createElement('div');
|
76707
|
+
cellElement.classList.add(this.builder.opts.cols[this.builder.opts.cols.length - 1]);
|
76708
|
+
cellElement.innerHTML = html;
|
76709
|
+
|
76710
|
+
// if(attr) {
|
76711
|
+
// cellElement.setAttribute(attr,'');
|
76712
|
+
// }
|
76713
|
+
|
76714
|
+
rowElement = document.createElement('div');
|
76715
|
+
rowElement.classList.add(this.builder.opts.row);
|
76716
|
+
rowElement.appendChild(cellElement);
|
76717
|
+
}
|
76718
|
+
row.parentNode.insertBefore(rowElement, row);
|
76719
|
+
if (pos === 'after') this.builder.dom.moveAfter(rowElement, row);
|
76720
|
+
this.builder.applyBehaviorOn(container);
|
76721
|
+
cellElement.click();
|
76722
|
+
}
|
76723
|
+
addBlock(activeBox, val, pos) {
|
76724
|
+
let html = '';
|
76725
|
+
// let bSnippet = true;
|
76726
|
+
|
76727
|
+
if (val === 'headline') {
|
76728
|
+
html = `
|
76729
|
+
<h1 class="font-normal leading-11 size-54">${this.chooseHeadline()}</h1>
|
76730
|
+
`;
|
76731
|
+
}
|
76732
|
+
if (val === 'paragraph') {
|
76733
|
+
html = `
|
76734
|
+
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
76735
|
+
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
|
76736
|
+
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
76737
|
+
`;
|
76738
|
+
}
|
76739
|
+
if (val === 'image') {
|
76740
|
+
html = `<img src="${this.builder.opts.snippetPath}example.png" alt="" />`;
|
76741
|
+
if (this.builder.opts.snippetSampleImage) {
|
76742
|
+
html = `<img src="${this.builder.opts.snippetSampleImage}" alt="" />`;
|
76743
|
+
}
|
76744
|
+
}
|
76745
|
+
if (val === 'space') {
|
76746
|
+
html = '<div class="spacer height-40"></div>';
|
76747
|
+
}
|
76748
|
+
if (val === 'button') {
|
76749
|
+
html = `
|
76750
|
+
<div>
|
76751
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
|
76752
|
+
</div>
|
76753
|
+
`;
|
76754
|
+
}
|
76755
|
+
if (val === 'twobuttons') {
|
76756
|
+
html = `
|
76757
|
+
<div>
|
76758
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
|
76759
|
+
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
|
76760
|
+
</div>
|
76761
|
+
`;
|
76762
|
+
}
|
76763
|
+
if (val === 'icon') {
|
76764
|
+
html = `
|
76765
|
+
<div class="text-center">
|
76766
|
+
<i class="icon ion-android-alarm-clock size-80"></i>
|
76767
|
+
</div>
|
76768
|
+
`;
|
76769
|
+
}
|
76770
|
+
if (val === 'youtube') {
|
76771
|
+
html = `
|
76772
|
+
<div class="embed-responsive embed-responsive-16by9">
|
76773
|
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
|
76774
|
+
</div>
|
76775
|
+
`;
|
76776
|
+
}
|
76777
|
+
if (val === 'video') {
|
76778
|
+
html = `<video style="width: 100%;" loop="" autoplay="">
|
76779
|
+
<source src="${this.builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
|
76780
|
+
if (this.builder.opts.snippetSampleVideo) {
|
76781
|
+
html = `<video style="width: 100%;" loop="" autoplay="">
|
76782
|
+
<source src="${this.builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
|
76783
|
+
}
|
76784
|
+
}
|
76785
|
+
if (val === 'audio') {
|
76786
|
+
html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
|
76787
|
+
<audio controls="" style="width:100%">
|
76788
|
+
<source src="${this.builder.opts.snippetPath}example.mp3" type="audio/mpeg">
|
76789
|
+
Your browser does not support the audio element.
|
76790
|
+
</audio>
|
76791
|
+
</div>`;
|
76792
|
+
if (this.builder.opts.snippetSampleAudio) {
|
76793
|
+
html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
|
76794
|
+
<audio controls="" style="width:100%">
|
76795
|
+
<source src="${this.builder.opts.snippetSampleAudio}" type="audio/mpeg">
|
76796
|
+
Your browser does not support the audio element.
|
76797
|
+
</audio>
|
76798
|
+
</div>`;
|
76799
|
+
}
|
76800
|
+
}
|
76801
|
+
if (val === 'map') {
|
76802
|
+
html = `<div class="embed-responsive embed-responsive-16by9">
|
76803
|
+
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&hl=en&sll=-7.981898,112.626504&sspn=0.009084,0.016512&oq=melbourne&hnear=Melbourne+Victoria,+Australia&t=m&z=10&output=embed"></iframe>
|
76804
|
+
</div>`;
|
76805
|
+
}
|
76806
|
+
if (val === 'social') {
|
76807
|
+
html = `<div class="is-social" style="text-align: center;">
|
76808
|
+
<a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>
|
76809
|
+
<a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>
|
76810
|
+
<a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>
|
76811
|
+
</div>`;
|
76812
|
+
}
|
76813
|
+
if (val === 'table') {
|
76814
|
+
html = `<table class="default" style="border-collapse:collapse;width:100%;">
|
76815
|
+
<thead>
|
76816
|
+
<tr>
|
76817
|
+
<td style="vertical-align:top;"><br></td>
|
76818
|
+
<td style="vertical-align:top;"><br></td>
|
76819
|
+
</tr>
|
76820
|
+
</thead>
|
76821
|
+
<tr>
|
76822
|
+
<td style="vertical-align:top;"><br></td>
|
76823
|
+
<td style="vertical-align:top;"><br></td>
|
76824
|
+
</tr>
|
76825
|
+
</table>`;
|
76826
|
+
}
|
76827
|
+
this._addBlock(activeBox, html, pos);
|
76828
|
+
}
|
76829
|
+
alignContent(activeBox, command) {
|
76830
|
+
activeBox.classList.remove('is-align-left');
|
76831
|
+
activeBox.classList.remove('is-align-center');
|
76832
|
+
activeBox.classList.remove('is-align-right');
|
76833
|
+
activeBox.classList.remove('is-align-justify');
|
76834
|
+
if (command === 'left') activeBox.classList.add('is-align-left');
|
76835
|
+
if (command === 'center') activeBox.classList.add('is-align-center');
|
76836
|
+
if (command === 'right') activeBox.classList.add('is-align-right');
|
76837
|
+
if (command === 'justify') activeBox.classList.add('is-align-justify');
|
76838
|
+
let elms = activeBox.querySelectorAll('.is-builder > div > div, .is-builder > div > div > *');
|
76839
|
+
elms.forEach(elm => {
|
76840
|
+
if (elm.closest('.is-section-tool') || elm.closest('.is-box-tool') || elm.closest('.is-tool') || elm.closest('.is-rowadd-tool')) return;
|
76841
|
+
elm.style.textAlign = '';
|
76842
|
+
elm.classList.remove('left');
|
76843
|
+
elm.classList.remove('right');
|
76844
|
+
elm.classList.remove('center');
|
76845
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.left);
|
76846
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.center);
|
76847
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.right);
|
76848
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.justify);
|
76849
|
+
this.builder.dom.doFunction(elm, theEl => {
|
76850
|
+
if (theEl.closest('.is-section-tool') || theEl.closest('.is-box-tool') || theEl.closest('.is-tool') || theEl.closest('.is-rowadd-tool')) return;
|
76851
|
+
theEl.style.textAlign = '';
|
76852
|
+
elm.classList.remove('left');
|
76853
|
+
elm.classList.remove('right');
|
76854
|
+
elm.classList.remove('center');
|
76855
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.left);
|
76856
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.center);
|
76857
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.right);
|
76858
|
+
elm.classList.remove(this.builder.cssClasses.textAlign.justify);
|
76859
|
+
}, true);
|
76860
|
+
});
|
76861
|
+
}
|
76862
|
+
alignText(element, command) {
|
76863
|
+
if (this.builder.useCssClasses) {
|
76864
|
+
element.style.textAlign = '';
|
76865
|
+
element.classList.remove(this.builder.cssClasses.textAlign.left);
|
76866
|
+
element.classList.remove(this.builder.cssClasses.textAlign.center);
|
76867
|
+
element.classList.remove(this.builder.cssClasses.textAlign.right);
|
76868
|
+
element.classList.remove(this.builder.cssClasses.textAlign.justify);
|
76869
|
+
if (command === 'left') element.classList.add(this.builder.cssClasses.textAlign.left);
|
76870
|
+
if (command === 'center') element.classList.add(this.builder.cssClasses.textAlign.center);
|
76871
|
+
if (command === 'right') element.classList.add(this.builder.cssClasses.textAlign.right);
|
76872
|
+
if (command === 'justify') element.classList.add(this.builder.cssClasses.textAlign.justify);
|
76873
|
+
} else {
|
76874
|
+
element.style.textAlign = command;
|
76875
|
+
}
|
76876
|
+
}
|
76877
|
+
increaseLineHeight(element, isContainer) {
|
76878
|
+
let lineHeightClasses = Object.values(this.builder.cssClasses.leading);
|
76879
|
+
if (isContainer) {
|
76880
|
+
const classList = this.builder.cssClasses.leading;
|
76881
|
+
lineHeightClasses = [classList.leading_10, classList.leading_11, classList.leading_12, classList.leading_13, classList.leading_14, 'leading-15', classList.leading_16, classList.leading_17, classList.leading_18, classList.leading_19, 'leading-20'];
|
76882
|
+
}
|
76883
|
+
const currentClass = this.getCurrentLineHeightClass(element, isContainer);
|
76884
|
+
const currentIndex = lineHeightClasses.indexOf(currentClass);
|
76885
|
+
if (currentIndex !== -1 && currentIndex < lineHeightClasses.length - 1) {
|
76886
|
+
const newClass = lineHeightClasses[currentIndex + 1];
|
76887
|
+
element.classList.remove(currentClass);
|
76888
|
+
element.classList.add(newClass);
|
76889
|
+
}
|
76890
|
+
}
|
76891
|
+
decreaseLineHeight(element, isContainer) {
|
76892
|
+
let lineHeightClasses = Object.values(this.builder.cssClasses.leading);
|
76893
|
+
if (isContainer) {
|
76894
|
+
const classList = this.builder.cssClasses.leading;
|
76895
|
+
lineHeightClasses = [classList.leading_10, classList.leading_11, classList.leading_12, classList.leading_13, classList.leading_14, 'leading-15', classList.leading_16, classList.leading_17, classList.leading_18, classList.leading_19, 'leading-20'];
|
76896
|
+
}
|
76897
|
+
const currentClass = this.getCurrentLineHeightClass(element, isContainer);
|
76898
|
+
const currentIndex = lineHeightClasses.indexOf(currentClass);
|
76899
|
+
if (currentIndex !== -1 && currentIndex > 0) {
|
76900
|
+
const newClass = lineHeightClasses[currentIndex - 1];
|
76901
|
+
element.classList.remove(currentClass);
|
76902
|
+
element.classList.add(newClass);
|
76903
|
+
}
|
76904
|
+
}
|
76905
|
+
getCurrentLineHeightClass(element, isContainer) {
|
76906
|
+
const classes = element.classList;
|
76907
|
+
for (let i = 0; i < classes.length; i++) {
|
76908
|
+
const classValue = classes[i];
|
76909
|
+
if (classValue.startsWith('leading-')) {
|
76910
|
+
return classValue;
|
76911
|
+
}
|
76912
|
+
}
|
76913
|
+
const computedStyle = window.getComputedStyle(element);
|
76914
|
+
let lineHeight = parseFloat(computedStyle.lineHeight);
|
76915
|
+
let fontSize = parseFloat(computedStyle.fontSize);
|
76916
|
+
let currentClassName = '';
|
76917
|
+
lineHeight = (lineHeight / fontSize).toFixed(1);
|
76918
|
+
const classList = this.builder.cssClasses.leading;
|
76919
|
+
if (isContainer) {
|
76920
|
+
if (lineHeight === '1') {
|
76921
|
+
currentClassName = classList.leading_10;
|
76922
|
+
} else if (lineHeight === '1.1') {
|
76923
|
+
currentClassName = classList.leading_11;
|
76924
|
+
} else if (lineHeight === '1.2') {
|
76925
|
+
currentClassName = classList.leading_12;
|
76926
|
+
} else if (lineHeight === '1.3') {
|
76927
|
+
currentClassName = classList.leading_13;
|
76928
|
+
} else if (lineHeight === '1.4') {
|
76929
|
+
currentClassName = classList.leading_14;
|
76930
|
+
} else if (lineHeight === '1.5') {
|
76931
|
+
currentClassName = 'leading-15';
|
76932
|
+
} else if (lineHeight === '1.6') {
|
76933
|
+
currentClassName = classList.leading_16;
|
76934
|
+
} else if (lineHeight === '1.7') {
|
76935
|
+
currentClassName = classList.leading_17;
|
76936
|
+
} else if (lineHeight === '1.8') {
|
76937
|
+
currentClassName = classList.leading_18;
|
76938
|
+
} else if (lineHeight === '1.9') {
|
76939
|
+
currentClassName = classList.leading_19;
|
76940
|
+
} else if (lineHeight === '2') {
|
76941
|
+
currentClassName = classList.leading_20;
|
76942
|
+
}
|
76943
|
+
} else {
|
76944
|
+
if (lineHeight === '0.5') {
|
76945
|
+
currentClassName = classList.leading_5;
|
76946
|
+
} else if (lineHeight === '0.6') {
|
76947
|
+
currentClassName = classList.leading_6;
|
76948
|
+
} else if (lineHeight === '0.7') {
|
76949
|
+
currentClassName = classList.leading_7;
|
76950
|
+
} else if (lineHeight === '0.8') {
|
76951
|
+
currentClassName = classList.leading_8;
|
76952
|
+
} else if (lineHeight === '0.9') {
|
76953
|
+
currentClassName = classList.leading_9;
|
76954
|
+
} else if (lineHeight === '1') {
|
76955
|
+
currentClassName = classList.leading_10;
|
76956
|
+
} else if (lineHeight === '1.1') {
|
76957
|
+
currentClassName = classList.leading_11;
|
76958
|
+
} else if (lineHeight === '1.2') {
|
76959
|
+
currentClassName = classList.leading_12;
|
76960
|
+
} else if (lineHeight === '1.3') {
|
76961
|
+
currentClassName = classList.leading_13;
|
76962
|
+
} else if (lineHeight === '1.4') {
|
76963
|
+
currentClassName = classList.leading_14;
|
76964
|
+
} else if (lineHeight === '1.5') {
|
76965
|
+
currentClassName = classList.leading_15;
|
76966
|
+
} else if (lineHeight === '1.6') {
|
76967
|
+
currentClassName = classList.leading_16;
|
76968
|
+
} else if (lineHeight === '1.7') {
|
76969
|
+
currentClassName = classList.leading_17;
|
76970
|
+
} else if (lineHeight === '1.8') {
|
76971
|
+
currentClassName = classList.leading_18;
|
76972
|
+
} else if (lineHeight === '1.9') {
|
76973
|
+
currentClassName = classList.leading_19;
|
76974
|
+
} else if (lineHeight === '2') {
|
76975
|
+
currentClassName = classList.leading_20;
|
76976
|
+
} else if (lineHeight === '2.1') {
|
76977
|
+
currentClassName = classList.leading_21;
|
76978
|
+
} else if (lineHeight === '2.2') {
|
76979
|
+
currentClassName = classList.leading_22;
|
76980
|
+
} else if (lineHeight === '2.3') {
|
76981
|
+
currentClassName = classList.leading_23;
|
76982
|
+
} else if (lineHeight === '2.4') {
|
76983
|
+
currentClassName = classList.leading_24;
|
76984
|
+
} else if (lineHeight === '2.5') {
|
76985
|
+
currentClassName = classList.leading_25;
|
76986
|
+
} else if (lineHeight === '2.6') {
|
76987
|
+
currentClassName = classList.leading_26;
|
76988
|
+
} else if (lineHeight === '2.7') {
|
76989
|
+
currentClassName = classList.leading_27;
|
76990
|
+
} else if (lineHeight === '2.8') {
|
76991
|
+
currentClassName = classList.leading_28;
|
76992
|
+
} else if (lineHeight === '2.9') {
|
76993
|
+
currentClassName = classList.leading_29;
|
76994
|
+
} else if (lineHeight === '3') {
|
76995
|
+
currentClassName = classList.leading_30;
|
76996
|
+
}
|
76997
|
+
}
|
76998
|
+
if (currentClassName !== '') return currentClassName;
|
76999
|
+
return classList.leading_14;
|
77000
|
+
}
|
77001
|
+
|
77002
|
+
// Font Size Stuff
|
77003
|
+
increaseFontSize(activeElement, isDefaultSize) {
|
77004
|
+
const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
|
77005
|
+
const currentFontSize = this.getCurrentFontSize(activeElement);
|
77006
|
+
const currentIndex = fontSizeClassValues.indexOf(currentFontSize);
|
77007
|
+
if (currentIndex < fontSizeClassValues.length - 1) {
|
77008
|
+
const nextFontSize = fontSizeClassValues[currentIndex + 1];
|
77009
|
+
const nextSizeClass = `size-${nextFontSize}`;
|
77010
|
+
if (isDefaultSize) if (nextSizeClass === 'size-24') return; // max for is-container font size is size-21
|
77011
|
+
|
77012
|
+
if (this.hasSizeClass(activeElement)) {
|
77013
|
+
activeElement.classList.remove(this.getSizeClass(activeElement));
|
77014
|
+
}
|
77015
|
+
activeElement.classList.add(nextSizeClass);
|
77016
|
+
}
|
77017
|
+
}
|
77018
|
+
decreaseFontSize(activeElement, isDefaultSize) {
|
77019
|
+
const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
|
77020
|
+
const currentFontSize = this.getCurrentFontSize(activeElement);
|
77021
|
+
const currentIndex = fontSizeClassValues.indexOf(currentFontSize);
|
77022
|
+
if (currentIndex > 0) {
|
77023
|
+
const previousFontSize = fontSizeClassValues[currentIndex - 1];
|
77024
|
+
const previousSizeClass = `size-${previousFontSize}`;
|
77025
|
+
if (isDefaultSize) if (previousFontSize === 'size-15') return; // min for is-container font size is size-15
|
77026
|
+
|
77027
|
+
if (this.hasSizeClass(activeElement)) {
|
77028
|
+
activeElement.classList.remove(this.getSizeClass(activeElement));
|
77029
|
+
}
|
77030
|
+
activeElement.classList.add(previousSizeClass);
|
77031
|
+
}
|
77032
|
+
}
|
77033
|
+
clearFontSize(activeElement) {
|
77034
|
+
activeElement.classList.remove(this.getSizeClass(activeElement));
|
77035
|
+
}
|
77036
|
+
|
77037
|
+
// Function to get the current font size dynamically
|
77038
|
+
getCurrentFontSize(activeElement) {
|
77039
|
+
const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
|
77040
|
+
if (this.hasSizeClass(activeElement)) {
|
77041
|
+
const sizeClass = this.getSizeClass(activeElement);
|
77042
|
+
const fontSizeString = sizeClass.split('-')[1];
|
77043
|
+
return Number(fontSizeString);
|
77044
|
+
} else {
|
77045
|
+
const computedStyle = window.getComputedStyle(activeElement);
|
77046
|
+
const fontSizeString = computedStyle.getPropertyValue('font-size');
|
77047
|
+
const currentFontSize = Number(fontSizeString.match(/\d+/)[0]);
|
77048
|
+
|
77049
|
+
// Check if the font size exists in the array
|
77050
|
+
if (fontSizeClassValues.includes(currentFontSize)) {
|
77051
|
+
return currentFontSize;
|
77052
|
+
} else {
|
77053
|
+
// Find the closest font size in the array
|
77054
|
+
const closestFontSize = this.findClosestFontSize(currentFontSize);
|
77055
|
+
return closestFontSize;
|
77056
|
+
}
|
77057
|
+
}
|
77058
|
+
}
|
77059
|
+
|
77060
|
+
// Function to check if paragraph has 'size-' class
|
77061
|
+
hasSizeClass(element) {
|
77062
|
+
if (Array.from(element.classList).some(value => value.startsWith('size-'))) {
|
77063
|
+
return true;
|
77064
|
+
}
|
77065
|
+
|
77066
|
+
// let currentElement = element.parentElement;
|
77067
|
+
|
77068
|
+
// while (currentElement) {
|
77069
|
+
// if (Array.from(currentElement.classList).some((value) => value.startsWith('size-'))) {
|
77070
|
+
// return true;
|
77071
|
+
// }
|
77072
|
+
// currentElement = currentElement.parentElement;
|
77073
|
+
// }
|
77074
|
+
return false;
|
77075
|
+
}
|
77076
|
+
|
77077
|
+
// Function to get the 'size-' class if present
|
77078
|
+
getSizeClass(activeElement) {
|
77079
|
+
return Array.from(activeElement.classList).find(value => value.startsWith('size-'));
|
77080
|
+
}
|
77081
|
+
// getSizeClass(activeElement) {
|
77082
|
+
// let sizeClass = Array.from(activeElement.classList).find((value) => value.startsWith('size-'));
|
77083
|
+
|
77084
|
+
// if (!sizeClass) {
|
77085
|
+
// let parentElement = activeElement.parentElement;
|
77086
|
+
|
77087
|
+
// while (parentElement) {
|
77088
|
+
// sizeClass = Array.from(parentElement.classList).find((value) => value.startsWith('size-'));
|
77089
|
+
// if (sizeClass) {
|
77090
|
+
// break;
|
77091
|
+
// }
|
77092
|
+
// parentElement = parentElement.parentElement;
|
77093
|
+
// }
|
77094
|
+
// }
|
77095
|
+
|
77096
|
+
// return sizeClass;
|
77097
|
+
// }
|
77098
|
+
|
77099
|
+
// Function to find the closest font size in the array
|
77100
|
+
findClosestFontSize(currentFontSize) {
|
77101
|
+
const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
|
77102
|
+
let closestFontSize = null;
|
77103
|
+
|
77104
|
+
// Find the closest font size smaller than currentFontSize
|
77105
|
+
for (let i = fontSizeClassValues.length - 1; i >= 0; i--) {
|
77106
|
+
if (fontSizeClassValues[i] < currentFontSize) {
|
77107
|
+
closestFontSize = fontSizeClassValues[i];
|
77108
|
+
break;
|
77109
|
+
}
|
77110
|
+
}
|
77111
|
+
|
77112
|
+
// If no smaller font size found, find the closest font size larger than currentFontSize
|
77113
|
+
if (closestFontSize === null) {
|
77114
|
+
for (let i = 0; i < fontSizeClassValues.length; i++) {
|
77115
|
+
if (fontSizeClassValues[i] > currentFontSize) {
|
77116
|
+
closestFontSize = fontSizeClassValues[i];
|
77117
|
+
break;
|
77118
|
+
}
|
77119
|
+
}
|
77120
|
+
}
|
77121
|
+
|
77122
|
+
// If no closest font size found, use the first font size in the array
|
77123
|
+
if (closestFontSize === null) {
|
77124
|
+
closestFontSize = fontSizeClassValues[0];
|
77125
|
+
}
|
77126
|
+
return closestFontSize;
|
77127
|
+
}
|
77128
|
+
|
77129
|
+
// Space Stuff
|
77130
|
+
|
77131
|
+
// Increase the height of an element
|
77132
|
+
increaseElementHeight(element) {
|
77133
|
+
const currentHeightClass = this.getCurrentHeightClass(element);
|
77134
|
+
const nextHeightClass = this.getNextHeightClass(currentHeightClass, true);
|
77135
|
+
if (nextHeightClass) {
|
77136
|
+
element.classList.remove(currentHeightClass);
|
77137
|
+
element.classList.add(nextHeightClass);
|
77138
|
+
}
|
77139
|
+
}
|
77140
|
+
|
77141
|
+
// Decrease the height of an element
|
77142
|
+
decreaseElementHeight(element) {
|
77143
|
+
const currentHeightClass = this.getCurrentHeightClass(element);
|
77144
|
+
const prevHeightClass = this.getNextHeightClass(currentHeightClass, false);
|
77145
|
+
if (prevHeightClass) {
|
77146
|
+
element.classList.remove(currentHeightClass);
|
77147
|
+
element.classList.add(prevHeightClass);
|
77148
|
+
}
|
77149
|
+
}
|
77150
|
+
|
77151
|
+
// Get the current height class of an element
|
77152
|
+
getCurrentHeightClass(element) {
|
77153
|
+
const classes = Array.from(element.classList);
|
77154
|
+
return classes.find(className => className.startsWith('height-'));
|
77155
|
+
}
|
77156
|
+
|
77157
|
+
// Get the next height class based on the current height class and direction
|
77158
|
+
getNextHeightClass(currentHeightClass, increase) {
|
77159
|
+
const heightClasses = ['height-20', 'height-40', 'height-60', 'height-80', 'height-100', 'height-120', 'height-140', 'height-160', 'height-180', 'height-200', 'height-220', 'height-240', 'height-260', 'height-280', 'height-300'];
|
77160
|
+
const currentIndex = heightClasses.indexOf(currentHeightClass);
|
77161
|
+
const nextIndex = increase ? currentIndex + 1 : currentIndex - 1;
|
77162
|
+
if (nextIndex >= 0 && nextIndex < heightClasses.length) {
|
77163
|
+
return heightClasses[nextIndex];
|
77164
|
+
}
|
77165
|
+
return null;
|
77166
|
+
}
|
77167
|
+
}
|
77168
|
+
|
77169
|
+
const dom = new Dom();
|
77170
|
+
class Dictation {
|
77171
|
+
constructor(opts = {}, builder) {
|
77172
|
+
let defaults = {
|
77173
|
+
send: command => {
|
77174
|
+
console.log('send: ' + command);
|
77175
|
+
},
|
77176
|
+
abort: () => {
|
77177
|
+
console.log('abort');
|
77178
|
+
}
|
77179
|
+
};
|
77180
|
+
this.opts = Object.assign(this, defaults, opts);
|
77181
|
+
this.builder = builder;
|
77182
|
+
const util = this.builder.util;
|
77183
|
+
this.util = util;
|
77184
|
+
const builderStuff = this.builder.builderStuff;
|
77185
|
+
this.builderStuff = builderStuff;
|
77186
|
+
let html = `
|
77187
|
+
<style>
|
77188
|
+
.is-modal.page-command {
|
77189
|
+
width: 300px !important;
|
77190
|
+
height: 200px !important;
|
77191
|
+
top: auto !important;
|
77192
|
+
bottom: 30px !important;
|
77193
|
+
left: auto !important;
|
77194
|
+
right: 30px !important;
|
77195
|
+
z-index: 10002 !important;
|
77196
|
+
font-size: 12px;
|
77197
|
+
}
|
77198
|
+
.page-command-overlay {
|
77199
|
+
background: rgb(148 148 148 / 22%);
|
77200
|
+
display: none;
|
77201
|
+
z-index: 10004;
|
77202
|
+
justify-content: center;
|
77203
|
+
align-items:center;
|
77204
|
+
}
|
77205
|
+
.is-modal.page-command {
|
77206
|
+
z-index: 10005 !important;
|
77207
|
+
}
|
77208
|
+
|
77209
|
+
.spinner {
|
77210
|
+
-webkit-animation: rotator 1.4s linear infinite;
|
77211
|
+
animation: rotator 1.4s linear infinite;
|
77212
|
+
}
|
77213
|
+
@-webkit-keyframes rotator {
|
77214
|
+
0% {
|
77215
|
+
transform: rotate(0deg);
|
77216
|
+
}
|
77217
|
+
100% {
|
77218
|
+
transform: rotate(270deg);
|
77219
|
+
}
|
77220
|
+
}
|
77221
|
+
@keyframes rotator {
|
77222
|
+
0% {
|
77223
|
+
transform: rotate(0deg);
|
77224
|
+
}
|
77225
|
+
100% {
|
77226
|
+
transform: rotate(270deg);
|
77227
|
+
}
|
77228
|
+
}
|
77229
|
+
.path {
|
77230
|
+
stroke: #b7b7b7;
|
77231
|
+
stroke-dasharray: 187;
|
77232
|
+
stroke-dashoffset: 0;
|
77233
|
+
transform-origin: center;
|
77234
|
+
-webkit-animation: dash 1.4s ease-in-out infinite;
|
77235
|
+
animation: dash 1.4s ease-in-out infinite;
|
77236
|
+
}
|
77237
|
+
@-webkit-keyframes dash {
|
77238
|
+
0% {
|
77239
|
+
stroke-dashoffset: 187;
|
77240
|
+
}
|
77241
|
+
50% {
|
77242
|
+
stroke-dashoffset: 46.75;
|
77243
|
+
transform: rotate(135deg);
|
77244
|
+
}
|
77245
|
+
100% {
|
77246
|
+
stroke-dashoffset: 187;
|
77247
|
+
transform: rotate(450deg);
|
77248
|
+
}
|
77249
|
+
}
|
77250
|
+
@keyframes dash {
|
77251
|
+
0% {
|
77252
|
+
stroke-dashoffset: 187;
|
77253
|
+
}
|
77254
|
+
50% {
|
77255
|
+
stroke-dashoffset: 46.75;
|
77256
|
+
transform: rotate(135deg);
|
77257
|
+
}
|
77258
|
+
100% {
|
77259
|
+
stroke-dashoffset: 187;
|
77260
|
+
transform: rotate(450deg);
|
77261
|
+
}
|
77262
|
+
}
|
77263
|
+
</style>
|
77264
|
+
<div class="is-overlay page-command-overlay">
|
77265
|
+
<svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
77266
|
+
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
77267
|
+
</svg>
|
77268
|
+
</div>
|
77269
|
+
<div class="is-modal is-modal-content page-command" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
77270
|
+
<div class="is-modal-bar is-draggable" draggable="">
|
77271
|
+
<span style="display: flex;
|
77272
|
+
justify-content: center;
|
77273
|
+
align-items: center;">
|
77274
|
+
${util.out('Send a Command')}</span>
|
77275
|
+
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
|
77276
|
+
<svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
|
77277
|
+
</button>
|
77278
|
+
</div>
|
77279
|
+
<div style="display:flex;flex-direction:column;justify-content:space-between;position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
|
77280
|
+
|
77281
|
+
<textarea class="inp-command" style="width:100%;height:121px;border:none;outline:none;background:transparent;line-height: 1.2;
|
77282
|
+
font-family: sans-serif;font-weight: 300;font-size: 17px;"></textarea>
|
77283
|
+
<div style="display:flex">
|
77284
|
+
<button title="${util.out('Mic')}" class="cmd-enable-dictation classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
|
77285
|
+
<svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-microphone"></use></svg>
|
77286
|
+
</button>
|
77287
|
+
<button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
|
77288
|
+
<svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-eraser"></use></svg>
|
77289
|
+
</button>
|
77290
|
+
<label for="chkAutoSendCommand" style="margin:0;display:flex;padding-left:10px;padding-right:10px;white-space:nowrap;width:100%;align-items:center;letter-spacing:0"><input id="chkAutoSendCommand" type="checkbox"> <span style="margin-left:3px">${util.out('Auto Send')}</span></label>
|
77291
|
+
<button title="${util.out('Send')}" class="cmd-send-command classic-primary" style="width:100%;padding-left:5px;padding-right:5px;height:43px;outline-offset:-2px;">Send</button>
|
77292
|
+
</div>
|
77293
|
+
</div>
|
77294
|
+
</div>
|
77295
|
+
`;
|
77296
|
+
dom.appendHtml(builderStuff, html);
|
77297
|
+
const modalCommand = builderStuff.querySelector('.page-command');
|
77298
|
+
this.modalCommand = modalCommand;
|
77299
|
+
this.builder.commandText = '';
|
77300
|
+
this.builder.autoSendCommand = false;
|
77301
|
+
|
77302
|
+
// this.modalCommand.classList.add('active');
|
77303
|
+
// this.startDictation();
|
77304
|
+
|
77305
|
+
this.modalCommand.addEventListener('focus', () => {
|
77306
|
+
util.saveSelection(); // must be called in case used by formatText()
|
77307
|
+
});
|
77308
|
+
|
77309
|
+
const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
|
77310
|
+
btnDictation.addEventListener('click', () => {
|
77311
|
+
if (this.aborted) {
|
77312
|
+
this.startDictation();
|
77313
|
+
btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone"></use></svg>';
|
77314
|
+
} else {
|
77315
|
+
this.stopDictation();
|
77316
|
+
btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
|
77317
|
+
}
|
77318
|
+
});
|
77319
|
+
const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
|
77320
|
+
chkAutoSend.addEventListener('change', () => {
|
77321
|
+
if (chkAutoSend.checked) {
|
77322
|
+
this.builder.autoSendCommand = true;
|
77323
|
+
} else {
|
77324
|
+
this.builder.autoSendCommand = false;
|
77325
|
+
}
|
77326
|
+
});
|
77327
|
+
const btnClear = builderStuff.querySelector('.cmd-clear-command');
|
77328
|
+
btnClear.addEventListener('click', () => {
|
77329
|
+
const inpCommand = this.builderStuff.querySelector('.inp-command');
|
77330
|
+
this.builder.commandText = '';
|
77331
|
+
inpCommand.value = '';
|
77332
|
+
});
|
77333
|
+
const btnSend = builderStuff.querySelector('.cmd-send-command');
|
77334
|
+
btnSend.addEventListener('click', async () => {
|
77335
|
+
if (this.builder.isInProgress) {
|
77336
|
+
// Abort
|
77337
|
+
|
77338
|
+
this.opts.abort();
|
77339
|
+
this.finish();
|
77340
|
+
return;
|
77341
|
+
}
|
77342
|
+
const inpCommand = this.modalCommand.querySelector('.inp-command');
|
77343
|
+
let question = inpCommand.value;
|
77344
|
+
question = question.trim();
|
77345
|
+
if (question === '') {
|
77346
|
+
return;
|
77347
|
+
}
|
77348
|
+
|
77349
|
+
// this.startSending();
|
77350
|
+
|
77351
|
+
this.opts.send(question);
|
77352
|
+
});
|
77353
|
+
const inpCommand = this.builderStuff.querySelector('.inp-command');
|
77354
|
+
inpCommand.addEventListener('keyup', e => {
|
77355
|
+
if (e.keyCode === 13 && !e.shiftKey) {
|
77356
|
+
btnSend.click();
|
77357
|
+
}
|
77358
|
+
this.builder.commandText = inpCommand.value;
|
77359
|
+
});
|
77360
|
+
const btnClose = this.modalCommand.querySelector('.is-modal-close');
|
77361
|
+
btnClose.addEventListener('click', () => {
|
77362
|
+
this.modalCommand.classList.remove('active');
|
77363
|
+
this.stopDictation();
|
77364
|
+
});
|
77365
|
+
}
|
77366
|
+
openDictation() {
|
77367
|
+
this.modalCommand.classList.add('active');
|
77368
|
+
this.startDictation();
|
77369
|
+
}
|
77370
|
+
stopDictation() {
|
77371
|
+
this.recognition.abort();
|
77372
|
+
this.aborted = true;
|
77373
|
+
}
|
77374
|
+
startDictation() {
|
77375
|
+
this.aborted = false;
|
77376
|
+
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
|
77377
|
+
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
77378
|
+
this.recognition = new SpeechRecognition();
|
77379
|
+
this.recognition.continuous = true;
|
77380
|
+
this.recognition.interimResults = true;
|
77381
|
+
let lang = 'en-US';
|
77382
|
+
if (this.builder.speechRecognitionLang) lang = this.builder.speechRecognitionLang;
|
77383
|
+
this.recognition.lang = lang;
|
77384
|
+
this.recognition.start();
|
77385
|
+
let speechTimeout;
|
77386
|
+
this.recognition.onresult = event => {
|
77387
|
+
clearTimeout(speechTimeout);
|
77388
|
+
if (this.builder.isInProgress) return;
|
77389
|
+
var interimTranscripts = '';
|
77390
|
+
var finalTranscripts = '';
|
77391
|
+
for (var i = event.resultIndex; i < event.results.length; ++i) {
|
77392
|
+
if (event.results[i].isFinal) {
|
77393
|
+
finalTranscripts += event.results[i][0].transcript;
|
77394
|
+
} else {
|
77395
|
+
interimTranscripts += event.results[i][0].transcript;
|
77396
|
+
}
|
77397
|
+
}
|
77398
|
+
if (interimTranscripts.indexOf('send') !== -1 || finalTranscripts.indexOf('send') !== -1) {
|
77399
|
+
const btnSend = this.modalCommand.querySelector('.cmd-send-command');
|
77400
|
+
btnSend.click();
|
77401
|
+
return;
|
77402
|
+
}
|
77403
|
+
this.builder.commandText += finalTranscripts; // + '<i style="color:#999">' + interimTranscripts + '</i>';
|
77404
|
+
|
77405
|
+
const inpCommand = this.modalCommand.querySelector('.inp-command');
|
77406
|
+
inpCommand.value = this.builder.commandText;
|
77407
|
+
if (this.builder.autoSendCommand) {
|
77408
|
+
speechTimeout = setTimeout(() => {
|
77409
|
+
if (inpCommand.value.trim() === '') return;
|
77410
|
+
const btnSend = this.modalCommand.querySelector('.cmd-send-command');
|
77411
|
+
btnSend.click();
|
77412
|
+
}, 1000);
|
77413
|
+
}
|
77414
|
+
};
|
77415
|
+
this.recognition.onend = () => {
|
77416
|
+
if (!this.aborted) this.startDictation();
|
77417
|
+
};
|
77418
|
+
this.recognition.onerror = () => {
|
77419
|
+
// console.log(e.error);
|
77420
|
+
};
|
77421
|
+
} else {
|
77422
|
+
// this.aborted = true;
|
77423
|
+
alert(this.util.out('Speech recognition not supported in this browser.'));
|
77424
|
+
}
|
77425
|
+
}
|
77426
|
+
startSending() {
|
77427
|
+
const btnSend = this.modalCommand.querySelector('.cmd-send-command');
|
77428
|
+
btnSend.innerHTML = `
|
77429
|
+
<svg class="spinner" width="14px" height="14px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
77430
|
+
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
77431
|
+
</svg>
|
77432
|
+
<span style="margin-left:5px">${this.util.out('Abort')}</span>
|
77433
|
+
`;
|
77434
|
+
const ovl = this.builderStuff.querySelector('.page-command-overlay');
|
77435
|
+
ovl.style.display = 'flex';
|
77436
|
+
this.builder.isInProgress = true;
|
77437
|
+
}
|
77438
|
+
finish() {
|
77439
|
+
const btnSend = this.modalCommand.querySelector('.cmd-send-command');
|
77440
|
+
btnSend.innerText = this.util.out('Send');
|
77441
|
+
const ovl = this.builderStuff.querySelector('.page-command-overlay');
|
77442
|
+
ovl.style.display = 'none';
|
77443
|
+
this.builder.isInProgress = false;
|
77444
|
+
if (this.builder.autoSendCommand) {
|
77445
|
+
// Clear
|
77446
|
+
const inpCommand = this.builderStuff.querySelector('.inp-command');
|
77447
|
+
this.builder.commandText = '';
|
77448
|
+
inpCommand.value = '';
|
77449
|
+
}
|
77450
|
+
const elmTool = this.builderStuff.querySelector('.is-element-tool');
|
77451
|
+
elmTool.style.display = '';
|
77452
|
+
}
|
77453
|
+
}
|
77454
|
+
|
77455
|
+
var src = {
|
77456
|
+
compareTwoStrings:compareTwoStrings,
|
77457
|
+
findBestMatch:findBestMatch
|
77458
|
+
};
|
77459
|
+
|
77460
|
+
function compareTwoStrings(first, second) {
|
77461
|
+
first = first.replace(/\s+/g, '');
|
77462
|
+
second = second.replace(/\s+/g, '');
|
77463
|
+
|
77464
|
+
if (first === second) return 1; // identical or empty
|
77465
|
+
if (first.length < 2 || second.length < 2) return 0; // if either is a 0-letter or 1-letter string
|
77466
|
+
|
77467
|
+
let firstBigrams = new Map();
|
77468
|
+
for (let i = 0; i < first.length - 1; i++) {
|
77469
|
+
const bigram = first.substring(i, i + 2);
|
77470
|
+
const count = firstBigrams.has(bigram)
|
77471
|
+
? firstBigrams.get(bigram) + 1
|
77472
|
+
: 1;
|
77473
|
+
|
77474
|
+
firstBigrams.set(bigram, count);
|
77475
|
+
}
|
77476
|
+
let intersectionSize = 0;
|
77477
|
+
for (let i = 0; i < second.length - 1; i++) {
|
77478
|
+
const bigram = second.substring(i, i + 2);
|
77479
|
+
const count = firstBigrams.has(bigram)
|
77480
|
+
? firstBigrams.get(bigram)
|
77481
|
+
: 0;
|
77482
|
+
|
77483
|
+
if (count > 0) {
|
77484
|
+
firstBigrams.set(bigram, count - 1);
|
77485
|
+
intersectionSize++;
|
77486
|
+
}
|
77487
|
+
}
|
77488
|
+
|
77489
|
+
return (2.0 * intersectionSize) / (first.length + second.length - 2);
|
77490
|
+
}
|
77491
|
+
|
77492
|
+
function findBestMatch(mainString, targetStrings) {
|
77493
|
+
if (!areArgsValid(mainString, targetStrings)) throw new Error('Bad arguments: First argument should be a string, second should be an array of strings');
|
77494
|
+
|
77495
|
+
const ratings = [];
|
77496
|
+
let bestMatchIndex = 0;
|
77497
|
+
|
77498
|
+
for (let i = 0; i < targetStrings.length; i++) {
|
77499
|
+
const currentTargetString = targetStrings[i];
|
77500
|
+
const currentRating = compareTwoStrings(mainString, currentTargetString);
|
77501
|
+
ratings.push({target: currentTargetString, rating: currentRating});
|
77502
|
+
if (currentRating > ratings[bestMatchIndex].rating) {
|
77503
|
+
bestMatchIndex = i;
|
77504
|
+
}
|
77505
|
+
}
|
77506
|
+
|
77507
|
+
|
77508
|
+
const bestMatch = ratings[bestMatchIndex];
|
77509
|
+
|
77510
|
+
return { ratings: ratings, bestMatch: bestMatch, bestMatchIndex: bestMatchIndex };
|
77511
|
+
}
|
77512
|
+
|
77513
|
+
function areArgsValid(mainString, targetStrings) {
|
77514
|
+
if (typeof mainString !== 'string') return false;
|
77515
|
+
if (!Array.isArray(targetStrings)) return false;
|
77516
|
+
if (!targetStrings.length) return false;
|
77517
|
+
if (targetStrings.find( function (s) { return typeof s !== 'string'})) return false;
|
77518
|
+
return true;
|
77519
|
+
}
|
77520
|
+
|
77521
|
+
class Similarity {
|
77522
|
+
constructor(settings = {}) {
|
77523
|
+
const defaults = {
|
77524
|
+
commandList: {
|
77525
|
+
add_bg_color: ['add a background color', 'add background color'],
|
77526
|
+
add_bg_image: ['add a background image', 'add background image', 'add a background', 'add background'],
|
77527
|
+
change_bg_color: ['change the background color', 'change background color'],
|
77528
|
+
change_bg_image: ['change the background image', 'change background image', 'change the background', 'change background'],
|
77529
|
+
remove_bg_color: ['remove background color', 'remove the background color', 'clear background color', 'clear the background color'],
|
77530
|
+
remove_bg: ['remove background', 'remove background image', 'remove the background', 'remove the background image', 'clear background', 'clear background image', 'clear the background', 'clear the background image'],
|
77531
|
+
increase_content_width: ['increase content width', 'enlarge content width'],
|
77532
|
+
decrease_content_width: ['decrease content width', 'reduce content width'],
|
77533
|
+
clear_content_width: ['clear content width', 'remove content width', 'make content full', 'full width content'],
|
77534
|
+
make_content_light: ['make the content white', 'make the content light', 'make the text white', 'make the text light', 'make content white', 'make content light', 'make text white', 'make text light', 'change the content white', 'change the content light', 'change the text white', 'change the text light', 'change to white content', 'change to light content', 'change to white text', 'change to light text'],
|
77535
|
+
make_content_dark: ['make the content black', 'make the content dark', 'make the text black', 'make the text dark', 'make content black', 'make content dark', 'make text black', 'make text dark', 'change the content black', 'change the content dark', 'change the text black', 'change the text dark', 'change to black content', 'change to dark content', 'change to black text', 'change to dark text'],
|
77536
|
+
make_section_height_10: ['make section height 10'],
|
77537
|
+
make_section_height_15: ['make section height 15'],
|
77538
|
+
make_section_height_20: ['make section height 20'],
|
77539
|
+
make_section_height_25: ['make section height 25'],
|
77540
|
+
make_section_height_30: ['make section height 30'],
|
77541
|
+
make_section_height_40: ['make section height 40'],
|
77542
|
+
make_section_height_50: ['make section height 50'],
|
77543
|
+
make_section_height_60: ['make section height 60'],
|
77544
|
+
make_section_height_70: ['make section height 70'],
|
77545
|
+
make_section_height_75: ['make section height 75'],
|
77546
|
+
make_section_height_80: ['make section height 80'],
|
77547
|
+
make_section_height_85: ['make section height 85'],
|
77548
|
+
make_section_height_90: ['make section height 90'],
|
77549
|
+
make_section_height_100: ['make section height 100'],
|
77550
|
+
make_section_height_auto: ['make section height auto'],
|
77551
|
+
suggest_headline: ['suggest a headline', 'suggest headline', 'suggest a header', 'suggest header', 'suggest a title', 'suggest title', 'write a headline', 'write headline', 'write a header', 'write header', 'write a title', 'write title'],
|
77552
|
+
add_headline: ['add a headline', 'add headline', 'add a header', 'add header', 'add a title', 'add title'],
|
77553
|
+
add_paragraph: ['add a paragraph', 'add paragraph'],
|
77554
|
+
add_image: ['add an image', 'add image'],
|
77555
|
+
add_youtube: ['add a youtube', 'add youtube'],
|
77556
|
+
add_video: ['add a video', 'add video', 'add an HTML5 video', 'add HTML5 video', 'add an mp4 video', 'add mp4 video'],
|
77557
|
+
add_audio: ['add an audio', 'add audio', 'add a music', 'add music', 'add an mp3', 'add mp3'],
|
77558
|
+
add_map: ['add a map', 'add map', 'add a google map', 'add google map'],
|
77559
|
+
add_table: ['add a table', 'add table'],
|
77560
|
+
add_social: ['add a social', 'add social'],
|
77561
|
+
add_icon: ['add an icon', 'add icon'],
|
77562
|
+
add_button: ['add a button', 'add button'],
|
77563
|
+
add_2buttons: ['add 2 button', 'add 2 button', 'add 2 buttons', 'add 2 buttons'],
|
77564
|
+
add_space: ['add a space', 'add space'],
|
77565
|
+
position_before: ['above', 'before'],
|
77566
|
+
increase_line_height: ['increase line height', 'increase line spacing', 'increase text spacing', 'increase the line height', 'increase the line spacing', 'increase the text spacing', 'enlarge line height', 'enlarge line spacing', 'enlarge text spacing', 'enlarge the line height', 'enlarge the line spacing', 'enlarge the text spacing', 'bigger line height', 'bigger line spacing', 'bigger text spacing', 'bigger the line height', 'bigger the line spacing', 'bigger the text spacing', 'make line height bigger', 'make line spacing bigger', 'make text spacing bigger', 'make the line height bigger', 'make the line spacing bigger', 'make the text spacing bigger'],
|
77567
|
+
increase_default_line_height: ['increase default line height', 'increase default line spacing', 'increase default text spacing', 'increase the default line height', 'increase the default line spacing', 'increase the default text spacing', 'enlarge default line height', 'enlarge default line spacing', 'enlarge default text spacing', 'enlarge the default line height', 'enlarge the default line spacing', 'enlarge the default text spacing', 'bigger default line height', 'bigger default line spacing', 'bigger default text spacing', 'bigger the default line height', 'bigger the default line spacing', 'bigger the default text spacing', 'make default line height bigger', 'make default line spacing bigger', 'make default text spacing bigger', 'make the default line height bigger', 'make the default line spacing bigger', 'make the default text spacing bigger'],
|
77568
|
+
decrease_line_height: ['decrease line height', 'decrease line spacing', 'decrease text spacing', 'decrease the line height', 'decrease the line spacing', 'decrease the text spacing', 'reduce line height', 'reduce line spacing', 'reduce text spacing', 'reduce the line height', 'reduce the line spacing', 'reduce the text spacing', 'smaller line height', 'smaller line spacing', 'smaller text spacing', 'smaller the line height', 'smaller the line spacing', 'smaller the text spacing', 'make line height smaller', 'make line spacing smaller', 'make text spacing smaller', 'make the line height smaller', 'make the line spacing smaller', 'make the text spacing smaller'],
|
77569
|
+
decrease_default_line_height: ['decrease default line height', 'decrease default line spacing', 'decrease default text spacing', 'decrease the default line height', 'decrease the default line spacing', 'decrease the default text spacing', 'reduce default line height', 'reduce default line spacing', 'reduce default text spacing', 'reduce the default line height', 'reduce the default line spacing', 'reduce the default text spacing', 'smaller default line height', 'smaller default line spacing', 'smaller default text spacing', 'smaller the default line height', 'smaller the default line spacing', 'smaller the default text spacing', 'make default line height smaller', 'make default line spacing smaller', 'make default text spacing smaller', 'make the default line height smaller', 'make the default line spacing smaller', 'make the default text spacing smaller'],
|
77570
|
+
increase_font_size: ['increase font', 'increase size', 'increase font size', 'increase the font', 'increase the size', 'increase the font size', 'increase text', 'increase size', 'increase text size', 'increase the text', 'increase the text size', 'enlarge font', 'enlarge size', 'enlarge font size', 'enlarge the font', 'enlarge the size', 'enlarge the font size', 'enlarge text', 'enlarge size', 'enlarge text size', 'enlarge the text', 'enlarge the text size', 'text bigger', 'font bigger', 'size bigger'],
|
77571
|
+
decrease_font_size: ['decrease font', 'decrease size', 'decrease font size', 'decrease the font', 'decrease the size', 'decrease the font size', 'decrease text', 'decrease size', 'decrease text size', 'decrease the text', 'decrease the text size', 'reduce font', 'reduce size', 'reduce font size', 'reduce the font', 'reduce the size', 'reduce the font size', 'reduce text', 'reduce size', 'reduce text size', 'reduce the text', 'reduce the text size', 'text smaller', 'font smaller', 'size smaller'],
|
77572
|
+
increase_default_font_size: ['increase default font', 'increase default size', 'increase default font size', 'increase the default font', 'increase the default size', 'increase the default font size', 'increase default text', 'increase default size', 'increase default text size', 'increase the default text', 'increase the default text size', 'enlarge default font', 'enlarge default size', 'enlarge default font size', 'enlarge the default font', 'enlarge the default size', 'enlarge the default font size', 'enlarge default text', 'enlarge default text size', 'enlarge the default text', 'enlarge the default text size', 'default text bigger', 'default font bigger', 'default size bigger', 'increase default content', 'increase default content size', 'increase the default content', 'increase the default content size', 'enlarge default content', 'enlarge default content size', 'enlarge the default content', 'enlarge the default content size'],
|
77573
|
+
decrease_default_font_size: ['decrease default font', 'decrease default size', 'decrease default font size', 'decrease the default font', 'decrease the default size', 'decrease the default font size', 'decrease default text', 'decrease default size', 'decrease default text size', 'decrease the default text', 'decrease the default text size', 'reduce default font', 'reduce default size', 'reduce default font size', 'reduce the default font', 'reduce the default size', 'reduce the default font size', 'reduce default text', 'reduce default text size', 'reduce the default text', 'reduce the default text size', 'default text smaller', 'default font smaller', 'default size smaller', 'decrease default content', 'decrease default content size', 'decrease the default content', 'decrease the default content size', 'reduce default content', 'reduce default content size', 'reduce the default content', 'reduce the default content size'],
|
77574
|
+
clear_font_size: ['clear font size', 'remove font size', 'clear text size', 'remove text size', 'use default font size', 'ude the default font size'],
|
77575
|
+
align_left: ['align left', 'align the text left', 'align text left', 'left aligned'],
|
77576
|
+
align_center: ['align center', 'align the text center', 'align text center', 'center aligned'],
|
77577
|
+
align_right: ['align right', 'align the text right', 'align text right', 'right aligned'],
|
77578
|
+
align_full: ['align full', 'align justify', 'justify', 'justify text', 'justify the text', 'justify full'],
|
77579
|
+
clear_alignment: ['clear alignment', 'remove alignment', 'clear the text alignment', 'remove the text alignment', 'clear text alignment', 'remove text alignment'],
|
77580
|
+
make_content_centered: ['make the content center', 'make the content centered'],
|
77581
|
+
move_content_left: ['move content left', 'move content to left', 'move the content left', 'move content to the left', 'move content to the left', 'place content on the left', 'move the content to the left', 'move the content to the left', 'place the content on the left'],
|
77582
|
+
move_content_center: ['move content center', 'move content to center', 'move the content center', 'move content to the center', 'move content to the center', 'place content on the center', 'move the content to the center', 'move the content to the center', 'place the content on the center'],
|
77583
|
+
move_content_right: ['move content right', 'move content to right', 'move the content right', 'move content to the right', 'move content to the right', 'place content on the right', 'move the content to the right', 'move the content to the right', 'place the content on the right'],
|
77584
|
+
move_content_top: ['move content top', 'move content to top', 'move the content top', 'move content to the top', 'move content to the top', 'place content on the top', 'move the content to the top', 'move the content to the top', 'place the content on the top'],
|
77585
|
+
move_content_middle: ['move content middle', 'move content to middle', 'move the content middle', 'move content to the middle', 'move content to the middle', 'place content on the middle', 'move the content to the middle', 'move the content to the middle', 'place the content on the middle'],
|
77586
|
+
move_content_bottom: ['move content bottom', 'move content to bottom', 'move the content bottom', 'move content to the bottom', 'move content to the bottom', 'place content on the bottom', 'move the content to the bottom', 'move the content to the bottom', 'place the content on the bottom'],
|
77587
|
+
increase_space: ['more space', 'increase space', 'increase the space', 'enlarge the space'],
|
77588
|
+
decrease_space: ['less space', 'decrease space', 'decrease the space', 'reduce the space'],
|
77589
|
+
move_row_up: ['move up', 'move row up'],
|
77590
|
+
move_row_down: ['move down', 'move row down'],
|
77591
|
+
duplicate_row: ['duplicate row', 'copy row'],
|
77592
|
+
remove_row: ['remove row', 'delete row'],
|
77593
|
+
move_col_left: ['move left', 'move column left'],
|
77594
|
+
move_col_right: ['move right', 'move column right'],
|
77595
|
+
duplicate_col: ['duplicate column', 'copy column'],
|
77596
|
+
remove_col: ['remove column', 'delete column'],
|
77597
|
+
move_column_up: ['move column up'],
|
77598
|
+
move_column_down: ['move column down']
|
77599
|
+
}
|
77600
|
+
};
|
77601
|
+
this.settings = Object.assign(this, defaults, settings);
|
77602
|
+
}
|
77603
|
+
check(command) {
|
77604
|
+
const {
|
77605
|
+
commandList
|
77606
|
+
} = this.settings;
|
77607
|
+
let maxSimilarity = 0;
|
77608
|
+
let maxKey = '';
|
77609
|
+
for (const [key, value] of Object.entries(commandList)) {
|
77610
|
+
const similarity = this.calculate(command, value);
|
77611
|
+
if (similarity > maxSimilarity) {
|
77612
|
+
maxSimilarity = similarity;
|
77613
|
+
maxKey = key;
|
77614
|
+
}
|
77615
|
+
}
|
77616
|
+
const similarityThreshold = 0.5;
|
77617
|
+
if (maxSimilarity >= similarityThreshold) {
|
77618
|
+
return maxKey;
|
77619
|
+
}
|
77620
|
+
return false;
|
77621
|
+
}
|
77622
|
+
calculate(command, list) {
|
77623
|
+
const normalizedCommand = command.toLowerCase();
|
77624
|
+
let maxSimilarity = 0;
|
77625
|
+
for (const cmd of list) {
|
77626
|
+
const similarity = src.compareTwoStrings(normalizedCommand, cmd);
|
77627
|
+
if (similarity > maxSimilarity) {
|
77628
|
+
// console.log(list)
|
77629
|
+
// console.log(similarity)
|
77630
|
+
maxSimilarity = similarity;
|
77631
|
+
}
|
77632
|
+
}
|
77633
|
+
return maxSimilarity;
|
77634
|
+
}
|
77635
|
+
}
|
77636
|
+
|
77637
|
+
class Command {
|
77638
|
+
constructor(builder) {
|
77639
|
+
this.builder = builder;
|
77640
|
+
const builderStuff = this.builder.builderStuff;
|
77641
|
+
this.builderStuff = builderStuff;
|
77642
|
+
const controller = new AbortController(); // Abort
|
77643
|
+
let signal = controller.signal;
|
77644
|
+
if (this.builder.commandList) {
|
77645
|
+
this.cp = new Similarity({
|
77646
|
+
commandList: this.builder.commandList
|
77647
|
+
});
|
77648
|
+
} else {
|
77649
|
+
this.cp = new Similarity();
|
77650
|
+
}
|
77651
|
+
|
77652
|
+
// Dictation Panel
|
77653
|
+
this.dictation = this.builder.dictation;
|
77654
|
+
this.dictation.opts.send = async question => {
|
77655
|
+
if (question === '') {
|
77656
|
+
return;
|
77657
|
+
}
|
77658
|
+
question = this.builder.lib.processShortCommand(question);
|
77659
|
+
if (!question) {
|
77660
|
+
this.dictation.finish(); // Must be called after finished
|
77661
|
+
return;
|
77662
|
+
}
|
77663
|
+
question = this.processPrompt(question);
|
77664
|
+
if (!question) {
|
77665
|
+
this.dictation.finish(); // Must be called after finished
|
77666
|
+
return;
|
77667
|
+
}
|
77668
|
+
let currentHtml = this.builder.html();
|
77669
|
+
|
77670
|
+
// Update prompt
|
77671
|
+
question = `${question}:
|
77672
|
+
|
77673
|
+
${currentHtml}`;
|
77674
|
+
const response = await fetch('http://localhost:8081/answer', {
|
77675
|
+
signal,
|
77676
|
+
// Abort
|
77677
|
+
method: 'POST',
|
77678
|
+
headers: {
|
77679
|
+
'Content-Type': 'application/json'
|
77680
|
+
},
|
77681
|
+
body: JSON.stringify({
|
77682
|
+
question
|
77683
|
+
})
|
77684
|
+
});
|
77685
|
+
if (!response.ok) {
|
77686
|
+
const error = await response.json();
|
77687
|
+
console.error('Error:', error.error);
|
77688
|
+
this.dictation.finish(); // Must be called after finished
|
77689
|
+
|
77690
|
+
return;
|
77691
|
+
}
|
77692
|
+
const data = await response.json();
|
77693
|
+
let html = this.getHtmlResult(data.answer);
|
77694
|
+
this.builder.saveForUndo();
|
77695
|
+
|
77696
|
+
// Update HTML
|
77697
|
+
this.builder.loadHtml(html);
|
77698
|
+
|
77699
|
+
//Trigger Change event
|
77700
|
+
this.builder.settings.onChange();
|
77701
|
+
this.dictation.finish(); // Must be called after finished
|
77702
|
+
};
|
77703
|
+
|
77704
|
+
this.dictation.opts.abort = () => {
|
77705
|
+
// console.log('abort');
|
77706
|
+
|
77707
|
+
controller.abort();
|
77708
|
+
this.dictation.finish(); // Must be called after finished
|
77709
|
+
};
|
77710
|
+
}
|
77711
|
+
|
77712
|
+
//-------------------
|
77713
|
+
|
77714
|
+
processPrompt(question) {
|
77715
|
+
const activeBox = this.builder.activeBox;
|
77716
|
+
let intent = this.cp.check(question);
|
77717
|
+
// console.log(intent);
|
77718
|
+
|
77719
|
+
if (!intent) return question;
|
77720
|
+
if (intent === 'add_bg_color' || intent === 'change_bg_color' || intent === 'suggest_headline') {
|
77721
|
+
return question; // Pass to ChatGPT
|
77722
|
+
}
|
77723
|
+
|
77724
|
+
this.builder.saveForUndo();
|
77725
|
+
if (intent === 'move_row_up') {
|
77726
|
+
this.builder.moveRowUp();
|
77727
|
+
} else if (intent === 'move_row_down') {
|
77728
|
+
this.builder.moveRowDown();
|
77729
|
+
} else if (intent === 'duplicate_row') {
|
77730
|
+
this.builder.duplicateRow();
|
77731
|
+
} else if (intent === 'remove_row') {
|
77732
|
+
this.builder.removeRow();
|
77733
|
+
} else if (intent === 'move_col_left') {
|
77734
|
+
this.builder.moveColumnLeft();
|
77735
|
+
} else if (intent === 'move_col_right') {
|
77736
|
+
this.builder.moveColumnRight();
|
77737
|
+
} else if (intent === 'duplicate_col') {
|
77738
|
+
this.builder.duplicateColumn();
|
77739
|
+
} else if (intent === 'remove_col') {
|
77740
|
+
this.builder.removeColumn();
|
77741
|
+
} else if (intent === 'move_column_up') {
|
77742
|
+
this.builder.moveColumnUp();
|
77743
|
+
} else if (intent === 'move_column_down') {
|
77744
|
+
this.builder.moveColumnDown();
|
77745
|
+
} else if (intent === 'add_headline') {
|
77746
|
+
this.builder.lib.addBlock(activeBox, 'headline', 'after');
|
77747
|
+
} else if (intent === 'add_paragraph') {
|
77748
|
+
this.builder.lib.addBlock(activeBox, 'paragraph', 'after');
|
77749
|
+
} else if (intent === 'add_image') {
|
77750
|
+
this.builder.lib.addBlock(activeBox, 'image', 'after');
|
77751
|
+
} else if (intent === 'add_youtube') {
|
77752
|
+
this.builder.lib.addBlock(activeBox, 'youtube', 'after');
|
77753
|
+
} else if (intent === 'add_video') {
|
77754
|
+
this.builder.lib.addBlock(activeBox, 'video', 'after');
|
77755
|
+
} else if (intent === 'add_audio') {
|
77756
|
+
this.builder.lib.addBlock(activeBox, 'audio', 'after');
|
77757
|
+
} else if (intent === 'add_map') {
|
77758
|
+
this.builder.lib.addBlock(activeBox, 'map', 'after');
|
77759
|
+
} else if (intent === 'add_table') {
|
77760
|
+
this.builder.lib.addBlock(activeBox, 'table', 'after');
|
77761
|
+
} else if (intent === 'add_social') {
|
77762
|
+
this.builder.lib.addBlock(activeBox, 'social', 'after');
|
77763
|
+
} else if (intent === 'add_icon') {
|
77764
|
+
this.builder.lib.addBlock(activeBox, 'icon', 'after');
|
77765
|
+
} else if (intent === 'add_button') {
|
77766
|
+
this.builder.lib.addBlock(activeBox, 'button', 'after');
|
77767
|
+
} else if (intent === 'add_2buttons') {
|
77768
|
+
this.builder.lib.addBlock(activeBox, 'twobuttons', 'after');
|
77769
|
+
} else if (intent === 'add_space') {
|
77770
|
+
this.builder.lib.addBlock(activeBox, 'space', 'after');
|
77771
|
+
} else if (intent === 'increase_font_size') {
|
77772
|
+
let elm = this.builder.activeElement;
|
77773
|
+
if (elm) {
|
77774
|
+
this.builder.lib.increaseFontSize(elm);
|
77775
|
+
}
|
77776
|
+
} else if (intent === 'decrease_font_size') {
|
77777
|
+
let elm = this.builder.activeElement;
|
77778
|
+
if (elm) {
|
77779
|
+
this.builder.lib.decreaseFontSize(elm);
|
77780
|
+
}
|
77781
|
+
} else if (intent === 'clear_font_size') {
|
77782
|
+
let elm = this.builder.activeElement;
|
77783
|
+
if (elm) {
|
77784
|
+
this.builder.lib.clearFontSize(elm);
|
77785
|
+
}
|
77786
|
+
} else if (intent === 'align_left') {
|
77787
|
+
let elm = this.builder.activeElement;
|
77788
|
+
if (elm) {
|
77789
|
+
this.builder.lib.alignText(elm, 'left');
|
77790
|
+
} else {
|
77791
|
+
this.builder.lib.alignContent(activeBox, 'left');
|
77792
|
+
}
|
77793
|
+
} else if (intent === 'align_center') {
|
77794
|
+
let elm = this.builder.activeElement;
|
77795
|
+
if (elm) {
|
77796
|
+
this.builder.lib.alignText(elm, 'center');
|
77797
|
+
} else {
|
77798
|
+
this.builder.lib.alignContent(activeBox, 'center');
|
77799
|
+
}
|
77800
|
+
} else if (intent === 'align_right') {
|
77801
|
+
let elm = this.builder.activeElement;
|
77802
|
+
if (elm) {
|
77803
|
+
this.builder.lib.alignText(elm, 'right');
|
77804
|
+
} else {
|
77805
|
+
this.builder.lib.alignContent(activeBox, 'right');
|
77806
|
+
}
|
77807
|
+
} else if (intent === 'align_full') {
|
77808
|
+
let elm = this.builder.activeElement;
|
77809
|
+
if (elm) {
|
77810
|
+
this.builder.lib.alignText(elm, 'justify');
|
77811
|
+
} else {
|
77812
|
+
this.builder.lib.alignContent(activeBox, 'justify');
|
77813
|
+
}
|
77814
|
+
} else if (intent === 'clear_alignment') {
|
77815
|
+
let elm = this.builder.activeElement;
|
77816
|
+
if (elm) {
|
77817
|
+
this.builder.lib.alignText(elm, '');
|
77818
|
+
} else {
|
77819
|
+
this.builder.lib.alignContent(activeBox, '');
|
77820
|
+
}
|
77821
|
+
} else if (intent === 'increase_space') {
|
77822
|
+
let elm = this.builder.activeElement;
|
77823
|
+
if (elm) {
|
77824
|
+
this.builder.lib.increaseElementHeight(elm);
|
77825
|
+
}
|
77826
|
+
} else if (intent === 'decrease_space') {
|
77827
|
+
let elm = this.builder.activeElement;
|
77828
|
+
if (elm) {
|
77829
|
+
this.builder.lib.decreaseElementHeight(elm);
|
77830
|
+
}
|
77831
|
+
} else if (intent === 'increase_line_height') {
|
77832
|
+
let elm = this.builder.activeElement;
|
77833
|
+
if (elm) {
|
77834
|
+
this.builder.lib.increaseLineHeight(elm);
|
77835
|
+
}
|
77836
|
+
} else if (intent === 'decrease_line_height') {
|
77837
|
+
let elm = this.builder.activeElement;
|
77838
|
+
if (elm) {
|
77839
|
+
this.builder.lib.decreaseLineHeight(elm);
|
77840
|
+
}
|
77841
|
+
}
|
77842
|
+
|
77843
|
+
//Trigger Change event
|
77844
|
+
this.builder.settings.onChange();
|
77845
|
+
return false;
|
77846
|
+
} // /processPrompt()
|
77847
|
+
|
77848
|
+
//-------------------
|
77849
|
+
|
77850
|
+
openDictation() {
|
77851
|
+
this.dictation.openDictation();
|
77852
|
+
}
|
77853
|
+
getHtmlResult(html) {
|
77854
|
+
if (html.indexOf('```') !== -1) {
|
77855
|
+
const regex = /<div[^>]*>[\s\S]*<\/div>/;
|
77856
|
+
const matches = html.match(regex);
|
77857
|
+
const extractedString = matches && matches[0];
|
77858
|
+
html = extractedString;
|
77859
|
+
}
|
77860
|
+
return html;
|
77861
|
+
}
|
77862
|
+
}
|
77863
|
+
|
76349
77864
|
class ContentBuilder {
|
76350
77865
|
constructor(opts = {}) {
|
76351
77866
|
let defaults = {
|
@@ -76589,6 +78104,7 @@ class ContentBuilder {
|
|
76589
78104
|
imageRenameOnEdit: true,
|
76590
78105
|
disableAutoEmbedVideo: false,
|
76591
78106
|
deleteConfirm: false,
|
78107
|
+
isContentBox: false,
|
76592
78108
|
sectionTemplate: `
|
76593
78109
|
<div class="is-section is-box is-section-100 type-opensans">
|
76594
78110
|
<div class="is-overlay"></div>
|
@@ -77244,6 +78760,13 @@ class ContentBuilder {
|
|
77244
78760
|
|
77245
78761
|
// Shortcut Info
|
77246
78762
|
this.ShortcutInfo = new ShortcutInfo(this);
|
78763
|
+
|
78764
|
+
// Prompt Stuff
|
78765
|
+
this.dictation = new Dictation({}, this); // Dictation Panel
|
78766
|
+
this.lib = new Lib(this); // Libraries of common editing functions
|
78767
|
+
if (!this.opts.isContentBox) {
|
78768
|
+
this.command = new Command(this);
|
78769
|
+
}
|
77247
78770
|
if (this.iframe) {
|
77248
78771
|
this.win.addEventListener('scroll', this.doWindowScroll = () => {
|
77249
78772
|
this.util.hidePops();
|