@innovastudio/contentbuilder 1.5.8 → 1.5.10
Sign up to get free protection for your applications and to get access to all the features.
@@ -1313,7 +1313,7 @@ const renderQuickAdd = builder => {
|
|
1313
1313
|
elm = quickadd.querySelector('.add-list');
|
1314
1314
|
dom.addEventListener(elm, 'click', () => {
|
1315
1315
|
const mode = quickadd.getAttribute('data-mode');
|
1316
|
-
const html = `<ul
|
1316
|
+
const html = `<ul>
|
1317
1317
|
<li>Lorem Ipsum is simply dummy text</li>
|
1318
1318
|
<li>Lorem Ipsum is simply dummy text</li>
|
1319
1319
|
</ul>`;
|
@@ -2009,7 +2009,10 @@ class Util {
|
|
2009
2009
|
const dom = this.dom;
|
2010
2010
|
dom.removeClass(modal, 'active');
|
2011
2011
|
modal.style.display = '';
|
2012
|
+
|
2013
|
+
// document.body.style.overflow = '';
|
2012
2014
|
}
|
2015
|
+
|
2013
2016
|
refreshModuleLayout(col) {
|
2014
2017
|
let savedHeight;
|
2015
2018
|
if (col.style.height) savedHeight = col.style.height;else col.style.height = `${col.offsetHeight}px`;
|
@@ -2365,13 +2368,27 @@ class Util {
|
|
2365
2368
|
if (!elm) return;
|
2366
2369
|
this.builder.uo.saveForUndo();
|
2367
2370
|
let element = elm;
|
2368
|
-
|
2369
|
-
|
2370
|
-
|
2371
|
-
|
2371
|
+
let newelement;
|
2372
|
+
if (!element.nextElementSibling) {
|
2373
|
+
// active element is div.display > p.
|
2374
|
+
let activeCol = this.builder.activeCol;
|
2375
|
+
let current;
|
2376
|
+
const elms = dom.elementChildren(activeCol);
|
2377
|
+
elms.forEach(child => {
|
2378
|
+
if (child.contains(element)) {
|
2379
|
+
current = child;
|
2380
|
+
}
|
2381
|
+
});
|
2382
|
+
if (current) {
|
2383
|
+
current.insertAdjacentHTML('afterend', html); // add new element after div.display
|
2384
|
+
newelement = current.nextElementSibling;
|
2385
|
+
}
|
2386
|
+
} else {
|
2387
|
+
element.insertAdjacentHTML('afterend', html);
|
2388
|
+
newelement = element.nextElementSibling;
|
2389
|
+
}
|
2372
2390
|
let builderActive = this.builder.doc.querySelector('.builder-active');
|
2373
2391
|
if (builderActive) this.builder.applyBehaviorOn(builderActive);
|
2374
|
-
let newelement = element.nextElementSibling;
|
2375
2392
|
if (newelement.tagName.toLowerCase() === 'img') {
|
2376
2393
|
let checkLoad = setInterval(() => {
|
2377
2394
|
if (newelement.complete) {
|
@@ -5000,6 +5017,12 @@ class Dom {
|
|
5000
5017
|
}
|
5001
5018
|
});
|
5002
5019
|
}
|
5020
|
+
countOccurrences(text, word) {
|
5021
|
+
// match the word globally and case insensitively
|
5022
|
+
const regex = new RegExp(word, 'gi');
|
5023
|
+
const matches = text.match(regex);
|
5024
|
+
return matches ? matches.length : 0;
|
5025
|
+
}
|
5003
5026
|
}
|
5004
5027
|
|
5005
5028
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
@@ -11460,97 +11483,86 @@ class HtmlUtil {
|
|
11460
11483
|
col.style.cursor = '';
|
11461
11484
|
});
|
11462
11485
|
});
|
11463
|
-
let elms
|
11464
|
-
|
11465
|
-
elms
|
11466
|
-
|
11467
|
-
|
11468
|
-
|
11469
|
-
|
11470
|
-
|
11471
|
-
|
11472
|
-
|
11473
|
-
|
11474
|
-
|
11475
|
-
|
11476
|
-
|
11477
|
-
elms
|
11478
|
-
|
11479
|
-
|
11480
|
-
|
11481
|
-
|
11482
|
-
|
11483
|
-
|
11484
|
-
|
11485
|
-
|
11486
|
-
|
11487
|
-
elms = tmp.querySelectorAll('[
|
11488
|
-
|
11489
|
-
|
11490
|
-
|
11491
|
-
|
11492
|
-
|
11493
|
-
|
11494
|
-
|
11495
|
-
|
11496
|
-
|
11497
|
-
|
11498
|
-
|
11499
|
-
elms
|
11500
|
-
|
11501
|
-
|
11502
|
-
|
11503
|
-
|
11504
|
-
|
11505
|
-
|
11506
|
-
|
11507
|
-
elms
|
11508
|
-
|
11509
|
-
|
11510
|
-
|
11511
|
-
|
11512
|
-
|
11513
|
-
|
11514
|
-
|
11515
|
-
|
11516
|
-
|
11517
|
-
elms
|
11518
|
-
|
11519
|
-
|
11520
|
-
dom.removeAttributes(elms, 'clean');
|
11521
|
-
elms = tmp.querySelectorAll('[grideditor]');
|
11522
|
-
dom.removeAttributes(elms, 'grideditor');
|
11523
|
-
elms = tmp.querySelectorAll('[gridoutline]');
|
11524
|
-
dom.removeAttributes(elms, 'gridoutline');
|
11525
|
-
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
11526
|
-
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
11527
|
-
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
11528
|
-
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
11529
|
-
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
11486
|
+
let elms;
|
11487
|
+
elms = tmp.querySelectorAll('.sortable-chosen, .sortable-ghost, .elm-active, .icon-active, .elm-inspected, .cell-active, .row-active, .row-outline, .is-builder');
|
11488
|
+
elms.forEach(elm => {
|
11489
|
+
elm.classList.remove('sortable-chosen');
|
11490
|
+
elm.classList.remove('sortable-ghost');
|
11491
|
+
elm.classList.remove('elm-active');
|
11492
|
+
elm.classList.remove('icon-active');
|
11493
|
+
elm.classList.remove('elm-inspected');
|
11494
|
+
elm.classList.remove('cell-active');
|
11495
|
+
elm.classList.remove('row-active');
|
11496
|
+
elm.classList.remove('row-outline');
|
11497
|
+
elm.classList.remove('is-builder');
|
11498
|
+
});
|
11499
|
+
elms = tmp.querySelectorAll('[data-click], [contenteditable], [draggridoutline], [between-blocks-left], [between-blocks-center], [hideelementhighlight], [data-module-active], [draggable]');
|
11500
|
+
elms.forEach(elm => {
|
11501
|
+
elm.removeAttribute('data-click');
|
11502
|
+
elm.removeAttribute('contenteditable');
|
11503
|
+
elm.removeAttribute('draggridoutline');
|
11504
|
+
elm.removeAttribute('between-blocks-left');
|
11505
|
+
elm.removeAttribute('between-blocks-center');
|
11506
|
+
elm.removeAttribute('hideelementhighlight');
|
11507
|
+
elm.removeAttribute('data-module-active');
|
11508
|
+
elm.removeAttribute('draggable');
|
11509
|
+
});
|
11510
|
+
elms = tmp.querySelectorAll('[data-animated], [data-saveforundo], [hidesnippetaddtool], [gray], [rowoutline], [hidecolumntool], [grayoutline], [hideoutline]');
|
11511
|
+
elms.forEach(elm => {
|
11512
|
+
elm.removeAttribute('data-animated');
|
11513
|
+
elm.removeAttribute('data-saveforundo');
|
11514
|
+
elm.removeAttribute('hidesnippetaddtool');
|
11515
|
+
elm.removeAttribute('gray');
|
11516
|
+
elm.removeAttribute('rowoutline');
|
11517
|
+
elm.removeAttribute('hidecolumntool');
|
11518
|
+
elm.removeAttribute('grayoutline');
|
11519
|
+
elm.removeAttribute('hideoutline');
|
11520
|
+
});
|
11521
|
+
elms = tmp.querySelectorAll('[leftrowtool], [minimal], [clean], [grideditor], [gridoutline]');
|
11522
|
+
elms.forEach(elm => {
|
11523
|
+
elm.removeAttribute('leftrowtool');
|
11524
|
+
elm.removeAttribute('minimal');
|
11525
|
+
elm.removeAttribute('clean');
|
11526
|
+
elm.removeAttribute('grideditor');
|
11527
|
+
elm.removeAttribute('gridoutline');
|
11528
|
+
});
|
11529
|
+
elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
|
11530
|
+
elms.forEach(elm => {
|
11531
|
+
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
11532
|
+
elm.previousSibling.remove();
|
11533
|
+
}
|
11534
|
+
if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
|
11535
|
+
elm.nextSibling.remove();
|
11536
|
+
}
|
11537
|
+
elm.remove();
|
11538
|
+
});
|
11539
|
+
elms = tmp.querySelectorAll('.ovl,.row-add-initial');
|
11540
|
+
elms.forEach(elm => {
|
11541
|
+
elm.remove();
|
11542
|
+
});
|
11530
11543
|
|
11531
11544
|
//Extra cleaning
|
11532
11545
|
if (this.builder.cleanAOS) {
|
11533
|
-
elms = tmp.querySelectorAll('.aos-init');
|
11534
|
-
|
11535
|
-
|
11536
|
-
|
11537
|
-
|
11538
|
-
|
11539
|
-
|
11540
|
-
elms
|
11541
|
-
|
11542
|
-
|
11543
|
-
|
11544
|
-
|
11545
|
-
|
11546
|
-
|
11547
|
-
dom.removeClasses(elms, 'is-inview');
|
11546
|
+
elms = tmp.querySelectorAll('.aos-init, .aos-animate');
|
11547
|
+
elms.forEach(elm => {
|
11548
|
+
elm.classList.remove('aos-init');
|
11549
|
+
elm.classList.remove('aos-animate');
|
11550
|
+
});
|
11551
|
+
}
|
11552
|
+
elms = tmp.querySelectorAll('.skrollable, .skrollable-after, .skrollable-before, .skrollable-between, .is-inview');
|
11553
|
+
elms.forEach(elm => {
|
11554
|
+
elm.classList.remove('skrollable');
|
11555
|
+
elm.classList.remove('skrollable-after');
|
11556
|
+
elm.classList.remove('skrollable-before');
|
11557
|
+
elm.classList.remove('skrollable-between');
|
11558
|
+
elm.classList.remove('is-inview');
|
11559
|
+
});
|
11548
11560
|
let emptyclasses = tmp.querySelectorAll('[class=""]');
|
11549
|
-
|
11561
|
+
emptyclasses.forEach(emptyclass => {
|
11550
11562
|
emptyclass.removeAttribute('class');
|
11551
11563
|
});
|
11552
11564
|
let unusedOverlays = tmp.querySelectorAll('.is-row-overlay');
|
11553
|
-
|
11565
|
+
unusedOverlays.forEach(unusedOverlay => {
|
11554
11566
|
if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
|
11555
11567
|
});
|
11556
11568
|
dom.removeEmptyStyle(tmp);
|
@@ -11559,7 +11571,7 @@ class HtmlUtil {
|
|
11559
11571
|
|
11560
11572
|
//Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
|
11561
11573
|
let links = tmp.querySelectorAll('a');
|
11562
|
-
|
11574
|
+
links.forEach(link => {
|
11563
11575
|
if (link.style.display === 'inline-block') {
|
11564
11576
|
if (link.parentNode.childElementCount === 1 && link.parentNode.tagName.toLowerCase() === 'span') {
|
11565
11577
|
link.parentNode.outerHTML = link.parentNode.innerHTML;
|
@@ -11577,85 +11589,44 @@ class HtmlUtil {
|
|
11577
11589
|
//ContentBox
|
11578
11590
|
|
11579
11591
|
// Remove dummy DIV after last section
|
11580
|
-
|
11581
|
-
|
11582
|
-
|
11583
|
-
|
11584
|
-
elms = tmp.querySelectorAll('[data-scroll-once]');
|
11585
|
-
|
11592
|
+
elms = tmp.querySelectorAll('.is-dummy');
|
11593
|
+
elms.forEach(elm => {
|
11594
|
+
elm.remove();
|
11595
|
+
});
|
11596
|
+
elms = tmp.querySelectorAll('[data-scroll], [data-scroll-once]');
|
11597
|
+
elms.forEach(elm => {
|
11598
|
+
elm.removeAttribute('data-scroll');
|
11599
|
+
elm.removeAttribute('data-scroll-once');
|
11600
|
+
});
|
11586
11601
|
if (this.builder.shortenOutput) {
|
11587
|
-
elms = tmp.querySelectorAll('[data-noedit]');
|
11588
|
-
|
11589
|
-
|
11590
|
-
|
11591
|
-
|
11592
|
-
|
11593
|
-
|
11594
|
-
|
11595
|
-
|
11596
|
-
|
11597
|
-
elms = tmp.querySelectorAll('[data-html]');
|
11598
|
-
|
11599
|
-
|
11600
|
-
|
11601
|
-
|
11602
|
-
|
11603
|
-
|
11604
|
-
|
11605
|
-
|
11606
|
-
|
11607
|
-
|
11608
|
-
|
11609
|
-
|
11610
|
-
dom.removeAttributes(elms, 'data-html-5');
|
11611
|
-
elms = tmp.querySelectorAll('[data-html-6]');
|
11612
|
-
dom.removeAttributes(elms, 'data-html-6');
|
11613
|
-
elms = tmp.querySelectorAll('[data-html-7]');
|
11614
|
-
dom.removeAttributes(elms, 'data-html-7');
|
11615
|
-
elms = tmp.querySelectorAll('[data-html-8]');
|
11616
|
-
dom.removeAttributes(elms, 'data-html-8');
|
11617
|
-
elms = tmp.querySelectorAll('[data-html-9]');
|
11618
|
-
dom.removeAttributes(elms, 'data-html-9');
|
11619
|
-
elms = tmp.querySelectorAll('[data-html-10]');
|
11620
|
-
dom.removeAttributes(elms, 'data-html-10');
|
11621
|
-
elms = tmp.querySelectorAll('[data-html-12]');
|
11622
|
-
dom.removeAttributes(elms, 'data-html-12');
|
11623
|
-
elms = tmp.querySelectorAll('[data-html-13]');
|
11624
|
-
dom.removeAttributes(elms, 'data-html-13');
|
11625
|
-
elms = tmp.querySelectorAll('[data-html-14]');
|
11626
|
-
dom.removeAttributes(elms, 'data-html-14');
|
11627
|
-
elms = tmp.querySelectorAll('[data-html-15]');
|
11628
|
-
dom.removeAttributes(elms, 'data-html-15');
|
11629
|
-
elms = tmp.querySelectorAll('[data-html-16]');
|
11630
|
-
dom.removeAttributes(elms, 'data-html-16');
|
11631
|
-
elms = tmp.querySelectorAll('[data-html-17]');
|
11632
|
-
dom.removeAttributes(elms, 'data-html-17');
|
11633
|
-
elms = tmp.querySelectorAll('[data-html-18]');
|
11634
|
-
dom.removeAttributes(elms, 'data-html-18');
|
11635
|
-
elms = tmp.querySelectorAll('[data-html-19]');
|
11636
|
-
dom.removeAttributes(elms, 'data-html-19');
|
11637
|
-
elms = tmp.querySelectorAll('[data-html-20]');
|
11638
|
-
dom.removeAttributes(elms, 'data-html-20');
|
11639
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
11640
|
-
dom.removeAttributes(elms, 'data-html-21');
|
11641
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
11642
|
-
dom.removeAttributes(elms, 'data-html-21');
|
11643
|
-
elms = tmp.querySelectorAll('[data-html-22]');
|
11644
|
-
dom.removeAttributes(elms, 'data-html-22');
|
11645
|
-
elms = tmp.querySelectorAll('[data-html-23]');
|
11646
|
-
dom.removeAttributes(elms, 'data-html-23');
|
11647
|
-
elms = tmp.querySelectorAll('[data-html-24]');
|
11648
|
-
dom.removeAttributes(elms, 'data-html-24');
|
11649
|
-
elms = tmp.querySelectorAll('[data-html-25]');
|
11650
|
-
dom.removeAttributes(elms, 'data-html-25');
|
11602
|
+
elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
|
11603
|
+
elms.forEach(elm => {
|
11604
|
+
elm.removeAttribute('data-noedit');
|
11605
|
+
elm.removeAttribute('data-module');
|
11606
|
+
elm.removeAttribute('data-module-desc');
|
11607
|
+
elm.removeAttribute('data-dialog-width');
|
11608
|
+
elm.removeAttribute('data-dialog-height');
|
11609
|
+
elm.removeAttribute('data-html');
|
11610
|
+
elm.removeAttribute('data-settings');
|
11611
|
+
});
|
11612
|
+
elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
|
11613
|
+
elms.forEach(elm => {
|
11614
|
+
elm.removeAttribute('data-html-1');
|
11615
|
+
elm.removeAttribute('data-html-2');
|
11616
|
+
elm.removeAttribute('data-html-3');
|
11617
|
+
elm.removeAttribute('data-html-4');
|
11618
|
+
elm.removeAttribute('data-html-5');
|
11619
|
+
elm.removeAttribute('data-html-6');
|
11620
|
+
elm.removeAttribute('data-html-7');
|
11621
|
+
elm.removeAttribute('data-html-8');
|
11622
|
+
elm.removeAttribute('data-html-9');
|
11623
|
+
elm.removeAttribute('data-html-10');
|
11624
|
+
});
|
11651
11625
|
}
|
11652
11626
|
|
11653
11627
|
// cleaning
|
11654
11628
|
|
11655
11629
|
elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
|
11656
|
-
// elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' +
|
11657
|
-
// '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' +
|
11658
|
-
// '[data-in],[data-in-150],[data-in-300],[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]');
|
11659
11630
|
Array.prototype.forEach.call(elms, elm => {
|
11660
11631
|
elm.style.transition = '';
|
11661
11632
|
elm.style.transform = '';
|
@@ -11691,34 +11662,24 @@ class HtmlUtil {
|
|
11691
11662
|
});
|
11692
11663
|
|
11693
11664
|
//Cleanup utils
|
11694
|
-
elms = tmp.querySelectorAll('.is-appeared');
|
11695
|
-
|
11696
|
-
|
11697
|
-
|
11698
|
-
|
11699
|
-
|
11700
|
-
|
11701
|
-
});
|
11702
|
-
elms = tmp.querySelectorAll('.section-active');
|
11703
|
-
Array.prototype.forEach.call(elms, elm => {
|
11704
|
-
dom.removeClass(elm, 'section-active');
|
11705
|
-
});
|
11706
|
-
elms = tmp.querySelectorAll('.section-select');
|
11707
|
-
Array.prototype.forEach.call(elms, elm => {
|
11708
|
-
dom.removeClass(elm, 'section-select');
|
11665
|
+
elms = tmp.querySelectorAll('.is-appeared, .box-active, .section-active, .section-select, .box-select');
|
11666
|
+
elms.forEach(elm => {
|
11667
|
+
elm.classList.remove('is-appeared');
|
11668
|
+
elm.classList.remove('box-active');
|
11669
|
+
elm.classList.remove('section-active');
|
11670
|
+
elm.classList.remove('section-select');
|
11671
|
+
elm.classList.remove('box-select');
|
11709
11672
|
});
|
11710
|
-
elms = tmp.querySelectorAll('.box-
|
11711
|
-
|
11712
|
-
|
11673
|
+
elms = tmp.querySelectorAll('.is-section-tool, .is-box-tool, .is-box-info, .is-section-info');
|
11674
|
+
elms.forEach(elm => {
|
11675
|
+
if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
|
11676
|
+
elm.previousSibling.remove();
|
11677
|
+
}
|
11678
|
+
if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
|
11679
|
+
elm.nextSibling.remove();
|
11680
|
+
}
|
11681
|
+
elm.remove();
|
11713
11682
|
});
|
11714
|
-
elms = tmp.querySelectorAll('.is-section-tool');
|
11715
|
-
dom.removeElements(elms);
|
11716
|
-
elms = tmp.querySelectorAll('.is-box-tool');
|
11717
|
-
dom.removeElements(elms);
|
11718
|
-
elms = tmp.querySelectorAll('.is-box-info');
|
11719
|
-
dom.removeElements(elms);
|
11720
|
-
elms = tmp.querySelectorAll('.is-section-info');
|
11721
|
-
dom.removeElements(elms);
|
11722
11683
|
|
11723
11684
|
// freeform
|
11724
11685
|
elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
|
@@ -11735,8 +11696,6 @@ class HtmlUtil {
|
|
11735
11696
|
elm.removeAttribute('data-prev');
|
11736
11697
|
});
|
11737
11698
|
tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
|
11738
|
-
// tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
|
11739
|
-
|
11740
11699
|
var html_content = '';
|
11741
11700
|
var html_footer = '';
|
11742
11701
|
var html_others = '';
|
@@ -11790,70 +11749,29 @@ class HtmlUtil {
|
|
11790
11749
|
emptystyle.removeAttribute('style');
|
11791
11750
|
});
|
11792
11751
|
if (this.builder.shortenOutput) {
|
11793
|
-
elms = tmp.querySelectorAll('[data-noedit]');
|
11794
|
-
|
11795
|
-
|
11796
|
-
|
11797
|
-
|
11798
|
-
|
11799
|
-
|
11800
|
-
|
11801
|
-
|
11802
|
-
|
11803
|
-
elms = tmp.querySelectorAll('[data-html]');
|
11804
|
-
|
11805
|
-
|
11806
|
-
|
11807
|
-
|
11808
|
-
|
11809
|
-
|
11810
|
-
|
11811
|
-
|
11812
|
-
|
11813
|
-
|
11814
|
-
|
11815
|
-
|
11816
|
-
dom.removeAttributes(elms, 'data-html-5');
|
11817
|
-
elms = tmp.querySelectorAll('[data-html-6]');
|
11818
|
-
dom.removeAttributes(elms, 'data-html-6');
|
11819
|
-
elms = tmp.querySelectorAll('[data-html-7]');
|
11820
|
-
dom.removeAttributes(elms, 'data-html-7');
|
11821
|
-
elms = tmp.querySelectorAll('[data-html-8]');
|
11822
|
-
dom.removeAttributes(elms, 'data-html-8');
|
11823
|
-
elms = tmp.querySelectorAll('[data-html-9]');
|
11824
|
-
dom.removeAttributes(elms, 'data-html-9');
|
11825
|
-
elms = tmp.querySelectorAll('[data-html-10]');
|
11826
|
-
dom.removeAttributes(elms, 'data-html-10');
|
11827
|
-
elms = tmp.querySelectorAll('[data-html-12]');
|
11828
|
-
dom.removeAttributes(elms, 'data-html-12');
|
11829
|
-
elms = tmp.querySelectorAll('[data-html-13]');
|
11830
|
-
dom.removeAttributes(elms, 'data-html-13');
|
11831
|
-
elms = tmp.querySelectorAll('[data-html-14]');
|
11832
|
-
dom.removeAttributes(elms, 'data-html-14');
|
11833
|
-
elms = tmp.querySelectorAll('[data-html-15]');
|
11834
|
-
dom.removeAttributes(elms, 'data-html-15');
|
11835
|
-
elms = tmp.querySelectorAll('[data-html-16]');
|
11836
|
-
dom.removeAttributes(elms, 'data-html-16');
|
11837
|
-
elms = tmp.querySelectorAll('[data-html-17]');
|
11838
|
-
dom.removeAttributes(elms, 'data-html-17');
|
11839
|
-
elms = tmp.querySelectorAll('[data-html-18]');
|
11840
|
-
dom.removeAttributes(elms, 'data-html-18');
|
11841
|
-
elms = tmp.querySelectorAll('[data-html-19]');
|
11842
|
-
dom.removeAttributes(elms, 'data-html-19');
|
11843
|
-
elms = tmp.querySelectorAll('[data-html-20]');
|
11844
|
-
dom.removeAttributes(elms, 'data-html-20');
|
11845
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
11846
|
-
dom.removeAttributes(elms, 'data-html-21');
|
11847
|
-
elms = tmp.querySelectorAll('[data-html-21]');
|
11848
|
-
dom.removeAttributes(elms, 'data-html-21');
|
11849
|
-
elms = tmp.querySelectorAll('[data-html-22]');
|
11850
|
-
dom.removeAttributes(elms, 'data-html-22');
|
11851
|
-
elms = tmp.querySelectorAll('[data-html-23]');
|
11852
|
-
dom.removeAttributes(elms, 'data-html-23');
|
11853
|
-
elms = tmp.querySelectorAll('[data-html-24]');
|
11854
|
-
dom.removeAttributes(elms, 'data-html-24');
|
11855
|
-
elms = tmp.querySelectorAll('[data-html-25]');
|
11856
|
-
dom.removeAttributes(elms, 'data-html-25');
|
11752
|
+
elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
|
11753
|
+
elms.forEach(elm => {
|
11754
|
+
elm.removeAttribute('data-noedit');
|
11755
|
+
elm.removeAttribute('data-module');
|
11756
|
+
elm.removeAttribute('data-module-desc');
|
11757
|
+
elm.removeAttribute('data-dialog-width');
|
11758
|
+
elm.removeAttribute('data-dialog-height');
|
11759
|
+
elm.removeAttribute('data-html');
|
11760
|
+
elm.removeAttribute('data-settings');
|
11761
|
+
});
|
11762
|
+
elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
|
11763
|
+
elms.forEach(elm => {
|
11764
|
+
elm.removeAttribute('data-html-1');
|
11765
|
+
elm.removeAttribute('data-html-2');
|
11766
|
+
elm.removeAttribute('data-html-3');
|
11767
|
+
elm.removeAttribute('data-html-4');
|
11768
|
+
elm.removeAttribute('data-html-5');
|
11769
|
+
elm.removeAttribute('data-html-6');
|
11770
|
+
elm.removeAttribute('data-html-7');
|
11771
|
+
elm.removeAttribute('data-html-8');
|
11772
|
+
elm.removeAttribute('data-html-9');
|
11773
|
+
elm.removeAttribute('data-html-10');
|
11774
|
+
});
|
11857
11775
|
}
|
11858
11776
|
|
11859
11777
|
// freeform
|
@@ -11981,6 +11899,8 @@ class UndoRedo {
|
|
11981
11899
|
dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
|
11982
11900
|
dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
|
11983
11901
|
dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
|
11902
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvas-tool'));
|
11903
|
+
dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
|
11984
11904
|
dom.removeElements(tmp.querySelectorAll('.ovl'));
|
11985
11905
|
dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
|
11986
11906
|
|
@@ -12160,6 +12080,7 @@ class UndoRedo {
|
|
12160
12080
|
this.writeHtml(html);
|
12161
12081
|
}
|
12162
12082
|
this.builder.applyBehavior();
|
12083
|
+
this.builder.applyBehaviorCanvas();
|
12163
12084
|
this.builder.opts.onChange();
|
12164
12085
|
this.undoList[120] = this.undoList[121];
|
12165
12086
|
this.undoList[121] = this.undoList[122];
|
@@ -12249,6 +12170,7 @@ class UndoRedo {
|
|
12249
12170
|
this.writeHtml(html);
|
12250
12171
|
}
|
12251
12172
|
this.builder.applyBehavior();
|
12173
|
+
this.builder.applyBehaviorCanvas();
|
12252
12174
|
this.builder.opts.onChange();
|
12253
12175
|
this.undoList[119] = this.undoList[118];
|
12254
12176
|
this.undoList[118] = this.undoList[117];
|
@@ -12692,6 +12614,24 @@ const prepareSvgIcons = builder => {
|
|
12692
12614
|
<symbol id="icon-svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
12693
12615
|
<path d="M21 8h-2a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2v-4h-1" /><path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" /><path d="M10 8l1.5 8h1l1.5 -8" />
|
12694
12616
|
</symbol>
|
12617
|
+
|
12618
|
+
<symbol id="icon-pagesize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
12619
|
+
<path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M7 12v-3h3" /><path d="M17 12v3h-3" />
|
12620
|
+
</symbol>
|
12621
|
+
<symbol id="icon-print" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
12622
|
+
<path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
|
12623
|
+
</symbol>
|
12624
|
+
|
12625
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
12626
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
12627
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
12628
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
12629
|
+
</symbol>
|
12630
|
+
<symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
12631
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
12632
|
+
<path d="M12 5l0 14"></path>
|
12633
|
+
<path d="M5 12l14 0"></path>
|
12634
|
+
</symbol>
|
12695
12635
|
</svg>`;
|
12696
12636
|
builder.dom.appendHtml(builder.builderStuff, html);
|
12697
12637
|
};
|
@@ -61674,7 +61614,15 @@ class ElementTool {
|
|
61674
61614
|
}
|
61675
61615
|
}
|
61676
61616
|
*/
|
61677
|
-
|
61617
|
+
|
61618
|
+
// elm.parentNode.removeChild(elm);
|
61619
|
+
let elmParent = elm.parentNode;
|
61620
|
+
elm.remove();
|
61621
|
+
let childs = dom.elementChildren(elmParent);
|
61622
|
+
if (!elmParent.classList.contains('cell-active') && childs.length === 0) {
|
61623
|
+
elmParent.remove(); // remove empty div.display
|
61624
|
+
}
|
61625
|
+
|
61678
61626
|
this.elementTool.style.display = 'none';
|
61679
61627
|
let cell = this.builder.activeCol;
|
61680
61628
|
if (cell) {
|
@@ -61993,7 +61941,7 @@ class ElementTool {
|
|
61993
61941
|
if ((customcode || noedit || _protected) && !subblock) ; else {
|
61994
61942
|
const tagName = elm.tagName.toLowerCase();
|
61995
61943
|
// LATER: label, code, figcaption ?
|
61996
|
-
if (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe') {
|
61944
|
+
if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
|
61997
61945
|
activeElement = elm; //set active element
|
61998
61946
|
|
61999
61947
|
if (tagName === 'img') {
|
@@ -64471,8 +64419,14 @@ class Rte {
|
|
64471
64419
|
let rteZoomSlider;
|
64472
64420
|
let inpZoomSlider;
|
64473
64421
|
if (!rteTool) {
|
64422
|
+
let zoomMax = 100;
|
64423
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
64424
|
+
// freeform
|
64425
|
+
zoomMax = 200;
|
64426
|
+
}
|
64427
|
+
|
64474
64428
|
// if(builder.plugins.length>0) {
|
64475
|
-
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg'];
|
64429
|
+
let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg', 'pageoptions', 'print'];
|
64476
64430
|
const filterButtons = myArray => {
|
64477
64431
|
let newArray = myArray;
|
64478
64432
|
myArray.forEach(item => {
|
@@ -64532,7 +64486,7 @@ class Rte {
|
|
64532
64486
|
var btn = builder.opts.buttonsMore[j].toLowerCase();
|
64533
64487
|
if (btn === 'createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'removeformat') html_rtemore += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'bold') html_rtemore += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rtemore += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rtemore += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;
|
64534
64488
|
// else if(btn==='createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;
|
64535
|
-
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
64489
|
+
else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_rtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
64536
64490
|
html_rtemore += '<div class="rte-separator"></div>';
|
64537
64491
|
} else {
|
64538
64492
|
html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64542,7 +64496,7 @@ class Rte {
|
|
64542
64496
|
let html_rte = '';
|
64543
64497
|
for (j = 0; j < builder.opts.buttons.length; j++) {
|
64544
64498
|
btn = builder.opts.buttons[j].toLowerCase();
|
64545
|
-
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="
|
64499
|
+
if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_rte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
64546
64500
|
html_rte += '<div class="rte-separator"></div>';
|
64547
64501
|
} else {
|
64548
64502
|
html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64560,7 +64514,7 @@ class Rte {
|
|
64560
64514
|
let html_elementrtemore = '';
|
64561
64515
|
for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
|
64562
64516
|
btn = builder.opts.elementButtonsMore[j].toLowerCase();
|
64563
|
-
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
64517
|
+
if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
64564
64518
|
html_elementrtemore += '<div class="rte-separator"></div>';
|
64565
64519
|
} else {
|
64566
64520
|
html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64570,7 +64524,7 @@ class Rte {
|
|
64570
64524
|
let html_elementrte = '';
|
64571
64525
|
for (j = 0; j < builder.opts.elementButtons.length; j++) {
|
64572
64526
|
btn = builder.opts.elementButtons[j].toLowerCase();
|
64573
|
-
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings') html_elementrte += `<button
|
64527
|
+
if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
64574
64528
|
html_elementrte += '<div class="rte-separator"></div>';
|
64575
64529
|
} else {
|
64576
64530
|
html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64590,7 +64544,7 @@ class Rte {
|
|
64590
64544
|
let html_iconrte = '';
|
64591
64545
|
for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
|
64592
64546
|
btn = builder.opts.iconButtonsMore[j].toLowerCase();
|
64593
|
-
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
64547
|
+
if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
|
64594
64548
|
html_iconrtemore += '<div class="rte-separator"></div>';
|
64595
64549
|
} else {
|
64596
64550
|
html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64599,7 +64553,7 @@ class Rte {
|
|
64599
64553
|
|
64600
64554
|
for (j = 0; j < builder.opts.iconButtons.length; j++) {
|
64601
64555
|
btn = builder.opts.iconButtons[j].toLowerCase();
|
64602
|
-
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:
|
64556
|
+
if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
|
64603
64557
|
html_iconrte += '<div class="rte-separator"></div>';
|
64604
64558
|
} else {
|
64605
64559
|
html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
|
@@ -64744,7 +64698,7 @@ class Rte {
|
|
64744
64698
|
<div>
|
64745
64699
|
<div class="is-label">${util.out('Zoom')}</div>
|
64746
64700
|
<div style="padding-top:4px">
|
64747
|
-
<input type="range" min="50" max="
|
64701
|
+
<input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
|
64748
64702
|
</div>
|
64749
64703
|
</div>
|
64750
64704
|
</div>
|
@@ -65693,6 +65647,22 @@ class Rte {
|
|
65693
65647
|
});
|
65694
65648
|
});
|
65695
65649
|
|
65650
|
+
// Page Options
|
65651
|
+
let btnPageOptions = builderStuff.querySelectorAll('button.rte-pageoptions');
|
65652
|
+
btnPageOptions.forEach(btn => {
|
65653
|
+
btn.addEventListener('click', () => {
|
65654
|
+
this.builder.openPageOptions();
|
65655
|
+
});
|
65656
|
+
});
|
65657
|
+
|
65658
|
+
// Print
|
65659
|
+
let btnPrint = builderStuff.querySelectorAll('button.rte-print');
|
65660
|
+
btnPrint.forEach(btn => {
|
65661
|
+
btn.addEventListener('click', () => {
|
65662
|
+
this.builder.print();
|
65663
|
+
});
|
65664
|
+
});
|
65665
|
+
|
65696
65666
|
// Zoom Settings
|
65697
65667
|
let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
|
65698
65668
|
zoomButton.forEach(btn => {
|
@@ -65809,6 +65779,14 @@ class Rte {
|
|
65809
65779
|
tools.forEach(tool => {
|
65810
65780
|
tool.style.display = 'none';
|
65811
65781
|
});
|
65782
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
65783
|
+
tools.forEach(tool => {
|
65784
|
+
tool.style.display = 'none';
|
65785
|
+
});
|
65786
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
65787
|
+
tools.forEach(tool => {
|
65788
|
+
tool.style.display = 'none';
|
65789
|
+
});
|
65812
65790
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
65813
65791
|
tools.forEach(tool => {
|
65814
65792
|
tool.style.opacity = 0;
|
@@ -65830,6 +65808,14 @@ class Rte {
|
|
65830
65808
|
tools.forEach(tool => {
|
65831
65809
|
tool.style.display = '';
|
65832
65810
|
});
|
65811
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
65812
|
+
tools.forEach(tool => {
|
65813
|
+
tool.style.display = '';
|
65814
|
+
});
|
65815
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
65816
|
+
tools.forEach(tool => {
|
65817
|
+
tool.style.display = '';
|
65818
|
+
});
|
65833
65819
|
}, 350);
|
65834
65820
|
};
|
65835
65821
|
this.rteZoomSlider.value = this.builder.opts.zoom * 100;
|
@@ -65865,9 +65851,13 @@ class Rte {
|
|
65865
65851
|
this.rteZoomSlider.onchange = () => {
|
65866
65852
|
setTimeout(() => {
|
65867
65853
|
// setZoomOnControl
|
65868
|
-
if (this.builder.
|
65854
|
+
if (this.builder.isContentBox) {
|
65869
65855
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
65870
65856
|
this.builder.setZoomOnControl(wrapper);
|
65857
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
65858
|
+
// freeform
|
65859
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
65860
|
+
this.builder.setZoomOnControl(docContainer);
|
65871
65861
|
} else {
|
65872
65862
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
65873
65863
|
builders.forEach(builder => {
|
@@ -65918,9 +65908,13 @@ class Rte {
|
|
65918
65908
|
this.inpZoomSlider.onchange = () => {
|
65919
65909
|
setTimeout(() => {
|
65920
65910
|
// setZoomOnControl
|
65921
|
-
if (this.builder.
|
65911
|
+
if (this.builder.isContentBox) {
|
65922
65912
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
65923
65913
|
this.builder.setZoomOnControl(wrapper);
|
65914
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
65915
|
+
// freeform
|
65916
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
65917
|
+
this.builder.setZoomOnControl(docContainer);
|
65924
65918
|
} else {
|
65925
65919
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
65926
65920
|
builders.forEach(builder => {
|
@@ -65942,6 +65936,14 @@ class Rte {
|
|
65942
65936
|
tools.forEach(tool => {
|
65943
65937
|
tool.style.display = '';
|
65944
65938
|
});
|
65939
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
65940
|
+
tools.forEach(tool => {
|
65941
|
+
tool.style.display = '';
|
65942
|
+
});
|
65943
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
65944
|
+
tools.forEach(tool => {
|
65945
|
+
tool.style.display = '';
|
65946
|
+
});
|
65945
65947
|
if (this.builder.onZoomEnd) {
|
65946
65948
|
let val = this.rteZoomSlider.value;
|
65947
65949
|
let scale = val / 100;
|
@@ -67002,6 +67004,14 @@ class Rte {
|
|
67002
67004
|
tools.forEach(tool => {
|
67003
67005
|
tool.style.display = 'none';
|
67004
67006
|
});
|
67007
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
67008
|
+
tools.forEach(tool => {
|
67009
|
+
tool.style.display = 'none';
|
67010
|
+
});
|
67011
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
67012
|
+
tools.forEach(tool => {
|
67013
|
+
tool.style.display = 'none';
|
67014
|
+
});
|
67005
67015
|
tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
|
67006
67016
|
tools.forEach(tool => {
|
67007
67017
|
tool.style.opacity = 0;
|
@@ -67015,9 +67025,13 @@ class Rte {
|
|
67015
67025
|
zoomEnd(inp) {
|
67016
67026
|
setTimeout(() => {
|
67017
67027
|
// setZoomOnControl
|
67018
|
-
if (this.builder.
|
67028
|
+
if (this.builder.isContentBox) {
|
67019
67029
|
const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
|
67020
67030
|
this.builder.setZoomOnControl(wrapper);
|
67031
|
+
} else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
67032
|
+
// freeform
|
67033
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
67034
|
+
this.builder.setZoomOnControl(docContainer);
|
67021
67035
|
} else {
|
67022
67036
|
const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
|
67023
67037
|
builders.forEach(builder => {
|
@@ -67039,6 +67053,14 @@ class Rte {
|
|
67039
67053
|
tools.forEach(tool => {
|
67040
67054
|
tool.style.display = '';
|
67041
67055
|
});
|
67056
|
+
tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
|
67057
|
+
tools.forEach(tool => {
|
67058
|
+
tool.style.display = '';
|
67059
|
+
});
|
67060
|
+
tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
|
67061
|
+
tools.forEach(tool => {
|
67062
|
+
tool.style.display = '';
|
67063
|
+
});
|
67042
67064
|
if (this.builder.onZoomEnd) {
|
67043
67065
|
let val = inp.value;
|
67044
67066
|
let scale = val / 100;
|
@@ -67827,11 +67849,12 @@ class Rte {
|
|
67827
67849
|
Array.prototype.forEach.call(elms, elm => {
|
67828
67850
|
elm.style.display = 'none';
|
67829
67851
|
});
|
67830
|
-
elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
67831
|
-
Array.prototype.forEach.call(elms, elm => {
|
67832
|
-
|
67833
|
-
});
|
67852
|
+
// elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
|
67853
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
67854
|
+
// elm.style.display = 'none';
|
67855
|
+
// });
|
67834
67856
|
}
|
67857
|
+
|
67835
67858
|
showAlignButtons() {
|
67836
67859
|
let separators = this.elementRteTool.querySelectorAll('.rte-separator');
|
67837
67860
|
Array.prototype.forEach.call(separators, separator => {
|
@@ -71816,7 +71839,39 @@ class SaveImages {
|
|
71816
71839
|
}
|
71817
71840
|
uploadImages(area) {
|
71818
71841
|
if (!area) return;
|
71842
|
+
|
71819
71843
|
//Check all images
|
71844
|
+
|
71845
|
+
const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
|
71846
|
+
divs.forEach(div => {
|
71847
|
+
let src = '';
|
71848
|
+
if (div.style.backgroundImage) {
|
71849
|
+
if (div.style.backgroundImage.indexOf('url(') !== -1) {
|
71850
|
+
src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
71851
|
+
}
|
71852
|
+
} else if (div.classList.contains('is-lightbox')) {
|
71853
|
+
src = div.getAttribute('href');
|
71854
|
+
} else if (div.classList.contains('block-click')) {
|
71855
|
+
src = div.getAttribute('data-modal-url');
|
71856
|
+
}
|
71857
|
+
if (src.includes('base64')) {
|
71858
|
+
if (this.opts.onBase64Upload) {
|
71859
|
+
let ext = 'jpg';
|
71860
|
+
if (src.includes('image/png')) {
|
71861
|
+
ext = 'png';
|
71862
|
+
}
|
71863
|
+
|
71864
|
+
//Read image (base64 string)
|
71865
|
+
let image = src;
|
71866
|
+
image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
|
71867
|
+
let filename = this.builder.util.makeId() + '.' + ext; //img.getAttribute('data-filename');
|
71868
|
+
|
71869
|
+
// console.log(div)
|
71870
|
+
this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
|
71871
|
+
}
|
71872
|
+
}
|
71873
|
+
});
|
71874
|
+
|
71820
71875
|
const images = area.querySelectorAll('img');
|
71821
71876
|
Array.prototype.forEach.call(images, img => {
|
71822
71877
|
let src = img.getAttribute('src');
|
@@ -80566,16 +80621,30 @@ ${answer}
|
|
80566
80621
|
}
|
80567
80622
|
|
80568
80623
|
getContainer() {
|
80569
|
-
let container, builderActive
|
80624
|
+
let container, builderActive;
|
80570
80625
|
builderActive = this.builder.doc.querySelector('.builder-active');
|
80571
80626
|
if (builderActive) container = builderActive;else {
|
80572
|
-
|
80573
|
-
|
80627
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
80628
|
+
// canvas mode
|
80574
80629
|
let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
|
80575
80630
|
if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
|
80576
|
-
if (activeBlock)
|
80577
|
-
|
80631
|
+
if (activeBlock) {
|
80632
|
+
container = activeBlock.querySelector(this.builder.container);
|
80633
|
+
if (!container) container = this.builder.doc.querySelector(this.builder.container);
|
80634
|
+
} else {
|
80635
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80636
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
80637
|
+
if (!blockContainer) {
|
80638
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80639
|
+
}
|
80640
|
+
if (blockContainer) {
|
80641
|
+
container = blockContainer.querySelector(this.builder.container);
|
80642
|
+
} else {
|
80643
|
+
container = this.builder.doc.querySelector(this.builder.container);
|
80644
|
+
}
|
80645
|
+
}
|
80578
80646
|
} else {
|
80647
|
+
// standard mode
|
80579
80648
|
container = this.builder.doc.querySelector(this.builder.container);
|
80580
80649
|
}
|
80581
80650
|
}
|
@@ -80583,56 +80652,92 @@ ${answer}
|
|
80583
80652
|
}
|
80584
80653
|
renderImage(src) {
|
80585
80654
|
this.builder.saveForUndo();
|
80655
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
80656
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80657
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
80658
|
+
if (!blockContainer) {
|
80659
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80660
|
+
}
|
80661
|
+
if (!blockContainer) {
|
80662
|
+
this.builder.addPage();
|
80663
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80664
|
+
}
|
80665
|
+
let html = `
|
80666
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
80667
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
80668
|
+
</div>
|
80669
|
+
`;
|
80670
|
+
this.builder.addBlock(html, blockContainer);
|
80671
|
+
this.builder.settings.onChange();
|
80672
|
+
this.builder.settings.onRender();
|
80673
|
+
return;
|
80674
|
+
}
|
80586
80675
|
let container = this.getContainer();
|
80587
80676
|
if (!container) {
|
80588
|
-
|
80589
|
-
|
80590
|
-
|
80591
|
-
|
80592
|
-
|
80593
|
-
|
80594
|
-
<div class="is-
|
80595
|
-
|
80677
|
+
/*
|
80678
|
+
if(this.builder.canvas) {
|
80679
|
+
// Canvas Mode
|
80680
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80681
|
+
if(docContainer) {
|
80682
|
+
|
80683
|
+
// <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
80684
|
+
// <div class="is-container leading-12 size-17">
|
80685
|
+
// <div class="row"><div class="column"><img src="${src}"></div></div>
|
80686
|
+
// </div>
|
80687
|
+
// </div>
|
80688
|
+
let html = `
|
80689
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
80690
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
80596
80691
|
</div>
|
80597
|
-
|
80598
|
-
|
80599
|
-
|
80600
|
-
|
80601
|
-
|
80602
|
-
|
80603
|
-
|
80604
|
-
|
80605
|
-
this.builder.addBlock(html, blockContainer);
|
80606
|
-
}
|
80607
|
-
} else {
|
80608
|
-
this.util.showMessage(this.util.out('No text container found.'));
|
80609
|
-
this.dictation.finish(); // Must be called after finished
|
80610
|
-
return;
|
80692
|
+
`;
|
80693
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80694
|
+
this.builder.addBlock(html, blockContainer);
|
80695
|
+
}
|
80696
|
+
} else {
|
80697
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
80698
|
+
this.dictation.finish(); // Must be called after finished
|
80699
|
+
return;
|
80611
80700
|
}
|
80701
|
+
*/
|
80702
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
80703
|
+
this.dictation.finish(); // Must be called after finished
|
80704
|
+
return;
|
80612
80705
|
} else {
|
80613
|
-
|
80614
|
-
|
80615
|
-
|
80616
|
-
|
80706
|
+
/*
|
80707
|
+
if(this.builder.canvas) {
|
80708
|
+
// Canvas Mode
|
80709
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80710
|
+
if(docContainer) {
|
80711
|
+
|
80712
|
+
let html = `
|
80713
|
+
<div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
|
80714
|
+
<div class="is-block-overlay" style="background-image: url("${src}");"></div>
|
80715
|
+
</div>
|
80716
|
+
`;
|
80717
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80718
|
+
this.builder.addBlock(html, blockContainer);
|
80719
|
+
}
|
80720
|
+
} else {
|
80721
|
+
// Normal
|
80617
80722
|
let html = `
|
80618
|
-
|
80619
|
-
|
80620
|
-
|
80621
|
-
|
80622
|
-
|
80623
|
-
|
80624
|
-
|
80625
|
-
} else {
|
80626
|
-
// Normal
|
80627
|
-
let html = `
|
80628
|
-
<div class="row"><div class="column"><img src="${src}"></div></div>
|
80629
|
-
`;
|
80630
|
-
container.insertAdjacentHTML('afterBegin', html);
|
80631
|
-
setTimeout(() => {
|
80632
|
-
container.firstElementChild.click();
|
80633
|
-
}, 300);
|
80634
|
-
this.builder.applyBehaviorOn(container);
|
80723
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
80724
|
+
`;
|
80725
|
+
container.insertAdjacentHTML('afterBegin', html);
|
80726
|
+
setTimeout(()=>{
|
80727
|
+
container.firstElementChild.click();
|
80728
|
+
}, 300);
|
80729
|
+
this.builder.applyBehaviorOn(container);
|
80635
80730
|
}
|
80731
|
+
*/
|
80732
|
+
// Normal
|
80733
|
+
let html = `
|
80734
|
+
<div class="row"><div class="column"><img src="${src}"></div></div>
|
80735
|
+
`;
|
80736
|
+
container.insertAdjacentHTML('afterBegin', html);
|
80737
|
+
setTimeout(() => {
|
80738
|
+
container.firstElementChild.click();
|
80739
|
+
}, 300);
|
80740
|
+
this.builder.applyBehaviorOn(container);
|
80636
80741
|
}
|
80637
80742
|
this.builder.settings.onChange();
|
80638
80743
|
this.builder.settings.onRender();
|
@@ -80645,50 +80750,87 @@ ${answer}
|
|
80645
80750
|
if (elm) {
|
80646
80751
|
html = elm.innerHTML;
|
80647
80752
|
}
|
80753
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
|
80754
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80755
|
+
let blockContainer = docContainer.querySelector('.box-select');
|
80756
|
+
if (!blockContainer) {
|
80757
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80758
|
+
}
|
80759
|
+
if (!blockContainer) {
|
80760
|
+
this.builder.addPage();
|
80761
|
+
blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80762
|
+
}
|
80763
|
+
html = `
|
80764
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
80765
|
+
<div class="is-container leading-12 size-17">
|
80766
|
+
${html}
|
80767
|
+
</div>
|
80768
|
+
</div>
|
80769
|
+
`;
|
80770
|
+
this.builder.addBlock(html, blockContainer);
|
80771
|
+
this.builder.settings.onChange();
|
80772
|
+
this.builder.settings.onRender();
|
80773
|
+
return;
|
80774
|
+
}
|
80648
80775
|
let container = this.getContainer();
|
80649
80776
|
if (!container) {
|
80650
|
-
|
80651
|
-
|
80652
|
-
|
80653
|
-
|
80654
|
-
|
80655
|
-
|
80656
|
-
|
80657
|
-
|
80658
|
-
|
80659
|
-
|
80660
|
-
|
80661
|
-
|
80662
|
-
|
80663
|
-
|
80664
|
-
|
80665
|
-
|
80666
|
-
|
80667
|
-
|
80777
|
+
/*
|
80778
|
+
if(this.builder.canvas) {
|
80779
|
+
// Canvas Mode
|
80780
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80781
|
+
if(docContainer) {
|
80782
|
+
|
80783
|
+
html = `
|
80784
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
80785
|
+
<div class="is-container leading-12 size-17">
|
80786
|
+
${html}
|
80787
|
+
</div>
|
80788
|
+
</div>
|
80789
|
+
`;
|
80790
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80791
|
+
this.builder.addBlock(html, blockContainer);
|
80792
|
+
}
|
80793
|
+
} else {
|
80794
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
80795
|
+
this.dictation.finish(); // Must be called after finished
|
80796
|
+
return;
|
80668
80797
|
}
|
80798
|
+
*/
|
80799
|
+
this.util.showMessage(this.util.out('No text container found.'));
|
80800
|
+
this.dictation.finish(); // Must be called after finished
|
80801
|
+
return;
|
80669
80802
|
} else {
|
80670
|
-
|
80671
|
-
|
80672
|
-
|
80673
|
-
|
80674
|
-
|
80675
|
-
|
80676
|
-
|
80677
|
-
|
80678
|
-
|
80679
|
-
|
80680
|
-
|
80681
|
-
|
80682
|
-
|
80683
|
-
|
80684
|
-
|
80685
|
-
|
80686
|
-
|
80687
|
-
|
80688
|
-
container.
|
80689
|
-
|
80690
|
-
|
80803
|
+
/*
|
80804
|
+
if(this.builder.canvas) {
|
80805
|
+
// Canvas Mode
|
80806
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
80807
|
+
if(docContainer) {
|
80808
|
+
|
80809
|
+
html = `
|
80810
|
+
<div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
|
80811
|
+
<div class="is-container leading-12 size-17">
|
80812
|
+
${html}
|
80813
|
+
</div>
|
80814
|
+
</div>
|
80815
|
+
`;
|
80816
|
+
const blockContainer = docContainer.querySelector(this.builder.blockContainer);
|
80817
|
+
this.builder.addBlock(html, blockContainer);
|
80818
|
+
}
|
80819
|
+
} else {
|
80820
|
+
// Normal
|
80821
|
+
container.insertAdjacentHTML('afterBegin', html);
|
80822
|
+
setTimeout(()=>{
|
80823
|
+
container.firstElementChild.click();
|
80824
|
+
}, 300);
|
80825
|
+
this.builder.applyBehaviorOn(container);
|
80691
80826
|
}
|
80827
|
+
*/
|
80828
|
+
// Normal
|
80829
|
+
container.insertAdjacentHTML('afterBegin', html);
|
80830
|
+
setTimeout(() => {
|
80831
|
+
container.firstElementChild.click();
|
80832
|
+
}, 300);
|
80833
|
+
this.builder.applyBehaviorOn(container);
|
80692
80834
|
}
|
80693
80835
|
this.builder.settings.onChange();
|
80694
80836
|
this.builder.settings.onRender();
|
@@ -81605,7 +81747,11 @@ class Common {
|
|
81605
81747
|
this.matrix3d = new Matrix3D();
|
81606
81748
|
return this.matrix3d.transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4);
|
81607
81749
|
}
|
81750
|
+
setZoom(scale) {
|
81751
|
+
this.zoom = scale;
|
81752
|
+
}
|
81608
81753
|
applyPercentage(block) {
|
81754
|
+
const zoom = this.zoom;
|
81609
81755
|
const rect = this.getRect(block);
|
81610
81756
|
const container = block.parentNode;
|
81611
81757
|
let isChildBlock = false;
|
@@ -81616,11 +81762,11 @@ class Common {
|
|
81616
81762
|
|
81617
81763
|
// const containerRect = container.getBoundingClientRect(); // if container has top/left
|
81618
81764
|
const containerRect = this.getRect(container); // if container has top/left
|
81619
|
-
|
81620
|
-
|
81765
|
+
let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
|
81766
|
+
let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
|
81621
81767
|
let isBlockFixed = block.classList.contains('block-steady');
|
81622
81768
|
if (isBlockFixed) {
|
81623
|
-
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top);
|
81769
|
+
let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top) * zoom;
|
81624
81770
|
if (isNaN(dividerTop)) {
|
81625
81771
|
// there is possibility of 0/0
|
81626
81772
|
dividerTop = 1;
|
@@ -81629,7 +81775,7 @@ class Common {
|
|
81629
81775
|
if (isChildBlock) {
|
81630
81776
|
block.style.top = top + '%';
|
81631
81777
|
}
|
81632
|
-
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left);
|
81778
|
+
let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left) * zoom;
|
81633
81779
|
if (isNaN(dividerLeft)) {
|
81634
81780
|
// there is possibility of 0/0
|
81635
81781
|
dividerLeft = 1;
|
@@ -81650,16 +81796,17 @@ class Common {
|
|
81650
81796
|
const height = block.offsetHeight / container.offsetHeight * 100;
|
81651
81797
|
block.style.width = width + '%';
|
81652
81798
|
block.style.height = height + '%';
|
81653
|
-
block.style.top = top + '%';
|
81654
|
-
block.style.left = left + '%';
|
81799
|
+
block.style.top = top / zoom + '%';
|
81800
|
+
block.style.left = left / zoom + '%';
|
81655
81801
|
if (block.classList.contains('height-auto')) block.style.height = '';
|
81656
81802
|
}
|
81657
81803
|
}
|
81658
81804
|
applyPixels(block) {
|
81805
|
+
const zoom = this.zoom;
|
81659
81806
|
const rect = this.getRect(block);
|
81660
81807
|
const containerRect = this.getRect(block.parentNode); // if container has top/left
|
81661
|
-
block.style.left = rect.left - containerRect.left + 'px';
|
81662
|
-
block.style.top = rect.top - containerRect.top + 'px';
|
81808
|
+
block.style.left = (rect.left - containerRect.left) / zoom + 'px';
|
81809
|
+
block.style.top = (rect.top - containerRect.top) / zoom + 'px';
|
81663
81810
|
block.style.width = block.offsetWidth + 'px';
|
81664
81811
|
}
|
81665
81812
|
updateHeight(block) {
|
@@ -82095,6 +82242,9 @@ class Ruler {
|
|
82095
82242
|
this.verticalRulerCenter = this.doc.getElementById('vertical-ruler-center');
|
82096
82243
|
this.setup();
|
82097
82244
|
}
|
82245
|
+
setZoom(scale) {
|
82246
|
+
this.zoom = scale;
|
82247
|
+
}
|
82098
82248
|
setup() {
|
82099
82249
|
this.elements = this.doc.querySelectorAll(this.selector);
|
82100
82250
|
}
|
@@ -82124,6 +82274,8 @@ class Ruler {
|
|
82124
82274
|
if (transform.includes('rotate') || transform.includes('matrix3d')) return;
|
82125
82275
|
let parentTransform = block.parentNode.style.transform;
|
82126
82276
|
if (parentTransform.includes('rotate')) return;
|
82277
|
+
if (this.zoom * 1 !== 1) return; // disable rulers on zoomed page
|
82278
|
+
|
82127
82279
|
this.hideRulers();
|
82128
82280
|
const rect = block.getBoundingClientRect();
|
82129
82281
|
const top = rect.top;
|
@@ -82485,6 +82637,11 @@ class Resizable {
|
|
82485
82637
|
win: this.win
|
82486
82638
|
});
|
82487
82639
|
}
|
82640
|
+
setZoom(scale) {
|
82641
|
+
this.zoom = scale;
|
82642
|
+
this.common.setZoom(scale);
|
82643
|
+
this.ruler.setZoom(scale);
|
82644
|
+
}
|
82488
82645
|
setup() {
|
82489
82646
|
this.elements.forEach(element => {
|
82490
82647
|
element.querySelectorAll('.handle').forEach(elm => elm.parentNode.removeChild(elm));
|
@@ -82654,35 +82811,38 @@ class Resizable {
|
|
82654
82811
|
this.ruler.hideRulers();
|
82655
82812
|
}
|
82656
82813
|
resizeTopLeft(deltaX, deltaY) {
|
82657
|
-
|
82658
|
-
this.target.style.
|
82814
|
+
const zoom = this.zoom;
|
82815
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82816
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
82659
82817
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
82660
82818
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
82661
82819
|
if (this.clonedTarget) {
|
82662
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
82663
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
82820
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82821
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
82664
82822
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
82665
82823
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
82666
82824
|
}
|
82667
82825
|
}
|
82668
82826
|
resizeTopRight(deltaX, deltaY) {
|
82827
|
+
const zoom = this.zoom;
|
82669
82828
|
this.target.style.width = this.initialWidth + deltaX + 'px';
|
82670
|
-
this.target.style.top = this.initialTop + deltaY + 'px';
|
82829
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
82671
82830
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
82672
82831
|
if (this.clonedTarget) {
|
82673
82832
|
this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
|
82674
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
82833
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
82675
82834
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
82676
82835
|
}
|
82677
82836
|
}
|
82678
82837
|
resizeBottomLeft(deltaX, deltaY) {
|
82838
|
+
const zoom = this.zoom;
|
82679
82839
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
82680
82840
|
this.target.style.height = this.initialHeight + deltaY + 'px';
|
82681
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
82841
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82682
82842
|
if (this.clonedTarget) {
|
82683
82843
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
82684
82844
|
this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
|
82685
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
82845
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82686
82846
|
}
|
82687
82847
|
}
|
82688
82848
|
resizeBottomRight(deltaX, deltaY) {
|
@@ -82694,10 +82854,11 @@ class Resizable {
|
|
82694
82854
|
}
|
82695
82855
|
}
|
82696
82856
|
resizeTop(deltaY) {
|
82697
|
-
|
82857
|
+
const zoom = this.zoom;
|
82858
|
+
this.target.style.top = this.initialTop / zoom + deltaY + 'px';
|
82698
82859
|
this.target.style.height = this.initialHeight - deltaY + 'px';
|
82699
82860
|
if (this.clonedTarget) {
|
82700
|
-
this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
|
82861
|
+
this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
|
82701
82862
|
this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
|
82702
82863
|
}
|
82703
82864
|
}
|
@@ -82708,11 +82869,12 @@ class Resizable {
|
|
82708
82869
|
}
|
82709
82870
|
}
|
82710
82871
|
resizeLeft(deltaX) {
|
82872
|
+
const zoom = this.zoom;
|
82711
82873
|
this.target.style.width = this.initialWidth - deltaX + 'px';
|
82712
|
-
this.target.style.left = this.initialLeft + deltaX + 'px';
|
82874
|
+
this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82713
82875
|
if (this.clonedTarget) {
|
82714
82876
|
this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
|
82715
|
-
this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
|
82877
|
+
this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
|
82716
82878
|
}
|
82717
82879
|
}
|
82718
82880
|
resizeRight(deltaX) {
|
@@ -82787,20 +82949,36 @@ class Resizable {
|
|
82787
82949
|
|
82788
82950
|
const largeScreenBreakpoint = 1920; //1920
|
82789
82951
|
|
82790
|
-
|
82791
|
-
|
82792
|
-
|
82793
|
-
|
82794
|
-
|
82795
|
-
|
82796
|
-
|
82797
|
-
|
82952
|
+
let isPrint = false;
|
82953
|
+
let elmBox = target.closest('[data-pagesize]');
|
82954
|
+
if (elmBox) {
|
82955
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
82956
|
+
isPrint = true;
|
82957
|
+
}
|
82958
|
+
}
|
82959
|
+
if (isPrint) {
|
82798
82960
|
target.setAttribute('data--t', target.style.top);
|
82799
82961
|
target.setAttribute('data--l', target.style.left);
|
82800
82962
|
target.setAttribute('data--b', target.style.bottom);
|
82801
82963
|
target.setAttribute('data--r', target.style.right);
|
82802
82964
|
target.setAttribute('data--w', target.style.width);
|
82803
82965
|
target.setAttribute('data--h', target.style.height);
|
82966
|
+
} else {
|
82967
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
82968
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
82969
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
82970
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
82971
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
82972
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
82973
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
82974
|
+
} else {
|
82975
|
+
target.setAttribute('data--t', target.style.top);
|
82976
|
+
target.setAttribute('data--l', target.style.left);
|
82977
|
+
target.setAttribute('data--b', target.style.bottom);
|
82978
|
+
target.setAttribute('data--r', target.style.right);
|
82979
|
+
target.setAttribute('data--w', target.style.width);
|
82980
|
+
target.setAttribute('data--h', target.style.height);
|
82981
|
+
}
|
82804
82982
|
}
|
82805
82983
|
target.removeAttribute('data-prev'); // reset
|
82806
82984
|
target.removeAttribute('data-fluid');
|
@@ -82843,6 +83021,11 @@ class Draggable {
|
|
82843
83021
|
win: this.win
|
82844
83022
|
});
|
82845
83023
|
}
|
83024
|
+
setZoom(scale) {
|
83025
|
+
this.zoom = scale;
|
83026
|
+
this.common.setZoom(scale);
|
83027
|
+
this.ruler.setZoom(scale);
|
83028
|
+
}
|
82846
83029
|
setup() {
|
82847
83030
|
this.elements = this.doc.querySelectorAll(this.selector);
|
82848
83031
|
this.elements.forEach(element => {
|
@@ -82983,8 +83166,9 @@ class Draggable {
|
|
82983
83166
|
const startY = target.getAttribute('data-starty');
|
82984
83167
|
const newX = x - startX;
|
82985
83168
|
const newY = y - startY;
|
82986
|
-
|
82987
|
-
target.style.
|
83169
|
+
const zoom = this.zoom;
|
83170
|
+
target.style.left = newX / zoom + 'px';
|
83171
|
+
target.style.top = newY / zoom + 'px';
|
82988
83172
|
}
|
82989
83173
|
}
|
82990
83174
|
handleDragEnd() {
|
@@ -83034,20 +83218,36 @@ class Draggable {
|
|
83034
83218
|
|
83035
83219
|
const largeScreenBreakpoint = 1920; //1920
|
83036
83220
|
|
83037
|
-
|
83038
|
-
|
83039
|
-
|
83040
|
-
|
83041
|
-
|
83042
|
-
|
83043
|
-
|
83044
|
-
|
83221
|
+
let isPrint = false;
|
83222
|
+
let elmBox = target.closest('[data-pagesize]');
|
83223
|
+
if (elmBox) {
|
83224
|
+
if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
|
83225
|
+
isPrint = true;
|
83226
|
+
}
|
83227
|
+
}
|
83228
|
+
if (isPrint) {
|
83045
83229
|
target.setAttribute('data--t', target.style.top);
|
83046
83230
|
target.setAttribute('data--l', target.style.left);
|
83047
83231
|
target.setAttribute('data--b', target.style.bottom);
|
83048
83232
|
target.setAttribute('data--r', target.style.right);
|
83049
83233
|
target.setAttribute('data--w', target.style.width);
|
83050
83234
|
target.setAttribute('data--h', target.style.height);
|
83235
|
+
} else {
|
83236
|
+
if (breakpoint && breakpoint < largeScreenBreakpoint) {
|
83237
|
+
target.setAttribute('data--t-' + breakpoint, target.style.top);
|
83238
|
+
target.setAttribute('data--l-' + breakpoint, target.style.left);
|
83239
|
+
target.setAttribute('data--b-' + breakpoint, target.style.bottom);
|
83240
|
+
target.setAttribute('data--r-' + breakpoint, target.style.right);
|
83241
|
+
if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
|
83242
|
+
target.setAttribute('data--h-' + breakpoint, target.style.height);
|
83243
|
+
} else {
|
83244
|
+
target.setAttribute('data--t', target.style.top);
|
83245
|
+
target.setAttribute('data--l', target.style.left);
|
83246
|
+
target.setAttribute('data--b', target.style.bottom);
|
83247
|
+
target.setAttribute('data--r', target.style.right);
|
83248
|
+
target.setAttribute('data--w', target.style.width);
|
83249
|
+
target.setAttribute('data--h', target.style.height);
|
83250
|
+
}
|
83051
83251
|
}
|
83052
83252
|
target.removeAttribute('data-prev'); // reset
|
83053
83253
|
target.removeAttribute('data-fluid');
|
@@ -83464,7 +83664,8 @@ class EditableBlocks {
|
|
83464
83664
|
// onMultipleSelect: () => {},
|
83465
83665
|
disableOnMobile: 0,
|
83466
83666
|
rotate: true,
|
83467
|
-
clone: true
|
83667
|
+
clone: true,
|
83668
|
+
zoom: 1
|
83468
83669
|
// onDelete: () = {}
|
83469
83670
|
};
|
83470
83671
|
|
@@ -83729,6 +83930,12 @@ class EditableBlocks {
|
|
83729
83930
|
win: this.win,
|
83730
83931
|
onDuplicate: this.onDuplicate
|
83731
83932
|
});
|
83933
|
+
this.setZoom(this.zoom);
|
83934
|
+
}
|
83935
|
+
setZoom(scale) {
|
83936
|
+
this.common.setZoom(scale);
|
83937
|
+
this.draggable.setZoom(scale);
|
83938
|
+
this.resizable.setZoom(scale);
|
83732
83939
|
}
|
83733
83940
|
duplicate() {
|
83734
83941
|
this.common.duplicate();
|
@@ -83824,32 +84031,58 @@ class BlockModal {
|
|
83824
84031
|
let html = `
|
83825
84032
|
<div class="is-modal is-modal-content editblock" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
83826
84033
|
<div class="is-modal-bar is-draggable">
|
83827
|
-
|
84034
|
+
<span class="modal-title"></span>
|
83828
84035
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
83829
84036
|
</div>
|
83830
|
-
<div class="modal-none" style="
|
83831
|
-
|
84037
|
+
<div class="modal-none" style="display:none;padding-bottom:28px;">
|
84038
|
+
|
84039
|
+
<div>${util.out('Please select a block or page.')}</div>
|
84040
|
+
|
83832
84041
|
</div>
|
84042
|
+
|
84043
|
+
<div class="modal-page-content" style="display:none;padding-bottom:28px;">
|
84044
|
+
|
84045
|
+
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
84046
|
+
<div style="display:flex;">
|
84047
|
+
<button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
|
84048
|
+
<button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
84049
|
+
</div>
|
84050
|
+
|
84051
|
+
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
84052
|
+
<div>
|
84053
|
+
<div class="asset-page-preview" style="display:none"></div>
|
84054
|
+
<div style="display: flex">
|
84055
|
+
<button title="${util.out('Image')}" class="btn-page-bgimage">
|
84056
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
84057
|
+
<span>${util.out('Image')}</span>
|
84058
|
+
</button>
|
84059
|
+
<button title="${util.out('Select')}" class="btn-page-asset">${this.builder.opts.selectIcon}</button>
|
84060
|
+
<button title="${util.out('Remove')}" class="btn-page-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
84061
|
+
<button title="${util.out('Adjust')}" class="btn-page-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
84062
|
+
</div>
|
84063
|
+
</div>
|
84064
|
+
|
84065
|
+
</div>
|
84066
|
+
|
83833
84067
|
<div class="modal-content">
|
83834
84068
|
|
83835
84069
|
<div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
|
83836
84070
|
<div style="display:flex;">
|
83837
84071
|
<button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
|
83838
|
-
<button title="${util.out('Gradient')}" class="btn-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
84072
|
+
<button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
|
83839
84073
|
</div>
|
83840
84074
|
|
83841
84075
|
<div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
|
83842
84076
|
<div>
|
83843
|
-
<div class="asset-preview" style="display:none"></div>
|
84077
|
+
<div class="asset-block-preview" style="display:none"></div>
|
83844
84078
|
<div style="display: flex">
|
83845
|
-
<
|
83846
|
-
<button title="${util.out('Image')}" class="btn-bgimage">
|
84079
|
+
<button title="${util.out('Image')}" class="btn-block-bgimage">
|
83847
84080
|
<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
|
83848
84081
|
<span>${util.out('Image')}</span>
|
83849
84082
|
</button>
|
83850
|
-
<button title="${util.out('Select')}" class="btn-asset">${this.builder.opts.selectIcon}</button>
|
83851
|
-
<button title="${util.out('Remove')}" class="btn-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
83852
|
-
<button title="${util.out('Adjust')}" class="btn-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
84083
|
+
<button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
|
84084
|
+
<button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
|
84085
|
+
<button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
|
83853
84086
|
</div>
|
83854
84087
|
</div>
|
83855
84088
|
|
@@ -83971,9 +84204,49 @@ class BlockModal {
|
|
83971
84204
|
this.hide();
|
83972
84205
|
});
|
83973
84206
|
|
83974
|
-
// Background color
|
84207
|
+
// Page Background color
|
84208
|
+
|
84209
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
84210
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
84211
|
+
btnPageColorPick.addEventListener('click', () => {
|
84212
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
84213
|
+
|
84214
|
+
let page = this.getPage();
|
84215
|
+
let bgcolor = btnPageColorPick.style.backgroundColor;
|
84216
|
+
this.builder.colorPicker.open(s => {
|
84217
|
+
page.style.backgroundColor = s;
|
84218
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
84219
|
+
page.style.backgroundImage = ''; // remove gradient
|
84220
|
+
btnPageGradient.style.backgroundImage = ''; // preview
|
84221
|
+
}
|
84222
|
+
|
84223
|
+
btnPageColorPick.style.backgroundColor = s; // preview
|
83975
84224
|
|
83976
|
-
|
84225
|
+
this.builder.onChange();
|
84226
|
+
}, bgcolor, () => {
|
84227
|
+
btnPageColorPick.removeAttribute('data-focus');
|
84228
|
+
btnPageColorPick.focus();
|
84229
|
+
});
|
84230
|
+
btnPageColorPick.setAttribute('data-focus', true);
|
84231
|
+
});
|
84232
|
+
btnPageGradient.addEventListener('click', () => {
|
84233
|
+
this.builder.uo.saveForUndo(true); // checkLater = true
|
84234
|
+
|
84235
|
+
let page = this.getPage();
|
84236
|
+
let gradientPicker = this.builder.gradientpicker();
|
84237
|
+
gradientPicker.open(page, () => {
|
84238
|
+
page.style.backgroundColor = '';
|
84239
|
+
btnPageColorPick.style.backgroundColor = ''; // preview
|
84240
|
+
|
84241
|
+
this.updatePanelImage('');
|
84242
|
+
this.builder.onChange();
|
84243
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage; // preview
|
84244
|
+
});
|
84245
|
+
});
|
84246
|
+
|
84247
|
+
// Block Background color
|
84248
|
+
|
84249
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
83977
84250
|
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
83978
84251
|
btnColorPick.addEventListener('click', () => {
|
83979
84252
|
this.builder.uo.saveForUndo(true); // checkLater = true
|
@@ -84011,10 +84284,63 @@ class BlockModal {
|
|
84011
84284
|
});
|
84012
84285
|
});
|
84013
84286
|
|
84014
|
-
// Background Image
|
84287
|
+
// Page Background Image
|
84288
|
+
|
84289
|
+
this.pageImagePreview = modal.querySelector('.asset-page-preview');
|
84290
|
+
const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
|
84291
|
+
if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
|
84292
|
+
// Background image
|
84293
|
+
const page = this.getPage();
|
84294
|
+
let src = '';
|
84295
|
+
if (page) if (page.style.backgroundImage) {
|
84296
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
84297
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
84298
|
+
}
|
84299
|
+
}
|
84300
|
+
this.openImagePicker(src, url => {
|
84301
|
+
const page = this.getPage();
|
84302
|
+
this.builder.uo.saveForUndo();
|
84303
|
+
page.style.backgroundImage = `url("${url}")`;
|
84304
|
+
page.style.backgroundSize = 'cover';
|
84305
|
+
page.style.backgroundRepeat = 'no-repeat';
|
84306
|
+
const div = this.pageImagePreview;
|
84307
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
84308
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
84309
|
+
btnPageAdjust.style.display = 'none';
|
84310
|
+
btnPageClear.style.display = 'none';
|
84311
|
+
if (url !== '') {
|
84312
|
+
div.innerHTML = `<img src="${url}">`;
|
84313
|
+
btnPageAdjust.style.display = 'flex';
|
84314
|
+
btnPageClear.style.display = 'flex';
|
84315
|
+
} else {
|
84316
|
+
div.innerHTML = '';
|
84317
|
+
}
|
84318
|
+
this.builder.onChange();
|
84319
|
+
}, btnPageBgImage);
|
84320
|
+
});
|
84321
|
+
const btnPageOpenAsset = modal.querySelector('.btn-page-asset');
|
84322
|
+
btnPageOpenAsset.addEventListener('click', () => {
|
84323
|
+
this.builder.openAssetSelect('image', src => {
|
84324
|
+
this.updatePageImage(src);
|
84325
|
+
}, btnPageOpenAsset);
|
84326
|
+
});
|
84327
|
+
|
84328
|
+
// Show/hide button
|
84329
|
+
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnPageOpenAsset.style.display = 'none';
|
84330
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
84331
|
+
btnPageClear.addEventListener('click', () => {
|
84332
|
+
this.updatePageImage('');
|
84333
|
+
});
|
84334
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
84335
|
+
btnPageAdjust.addEventListener('click', () => {
|
84336
|
+
let page = this.getPage();
|
84337
|
+
this.builder.colTool.openImageAdjust(page, btnPageAdjust);
|
84338
|
+
});
|
84339
|
+
|
84340
|
+
// Block Background Image
|
84015
84341
|
|
84016
|
-
this.imagePreview = modal.querySelector('.asset-preview');
|
84017
|
-
const btnBgImage = modal.querySelector('.btn-bgimage');
|
84342
|
+
this.imagePreview = modal.querySelector('.asset-block-preview');
|
84343
|
+
const btnBgImage = modal.querySelector('.btn-block-bgimage');
|
84018
84344
|
if (btnBgImage) dom.addEventListener(btnBgImage, 'click', () => {
|
84019
84345
|
// Background image
|
84020
84346
|
const blockOverlay = this.blockOverlay();
|
@@ -84031,8 +84357,8 @@ class BlockModal {
|
|
84031
84357
|
blockOverlay.style.backgroundSize = 'cover';
|
84032
84358
|
blockOverlay.style.backgroundRepeat = 'no-repeat';
|
84033
84359
|
const div = this.imagePreview;
|
84034
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
84035
|
-
const btnClear = modal.querySelector('.btn-clear');
|
84360
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
84361
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
84036
84362
|
btnAdjust.style.display = 'none';
|
84037
84363
|
btnClear.style.display = 'none';
|
84038
84364
|
if (url !== '') {
|
@@ -84045,7 +84371,7 @@ class BlockModal {
|
|
84045
84371
|
this.builder.onChange();
|
84046
84372
|
}, btnBgImage);
|
84047
84373
|
});
|
84048
|
-
const btnOpenAsset = modal.querySelector('.btn-asset');
|
84374
|
+
const btnOpenAsset = modal.querySelector('.btn-block-asset');
|
84049
84375
|
btnOpenAsset.addEventListener('click', () => {
|
84050
84376
|
this.builder.openAssetSelect('image', src => {
|
84051
84377
|
this.updateImage(src);
|
@@ -84054,11 +84380,11 @@ class BlockModal {
|
|
84054
84380
|
|
84055
84381
|
// Show/hide button
|
84056
84382
|
if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none';
|
84057
|
-
const btnClear = modal.querySelector('.btn-clear');
|
84383
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
84058
84384
|
btnClear.addEventListener('click', () => {
|
84059
84385
|
this.updateImage('');
|
84060
84386
|
});
|
84061
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
84387
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
84062
84388
|
btnAdjust.addEventListener('click', () => {
|
84063
84389
|
let blockOverlay = this.blockOverlay();
|
84064
84390
|
this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
|
@@ -84261,6 +84587,7 @@ class BlockModal {
|
|
84261
84587
|
target.classList.add('locked');
|
84262
84588
|
this.builder.eb.draggable.disableDrag(target);
|
84263
84589
|
this.lock(target);
|
84590
|
+
this.realtime();
|
84264
84591
|
});
|
84265
84592
|
} else {
|
84266
84593
|
elms.forEach(target => {
|
@@ -84289,6 +84616,12 @@ class BlockModal {
|
|
84289
84616
|
}
|
84290
84617
|
});
|
84291
84618
|
}
|
84619
|
+
} // constructor
|
84620
|
+
|
84621
|
+
getPage() {
|
84622
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
84623
|
+
const page = docContainer.querySelector('.box-select');
|
84624
|
+
return page;
|
84292
84625
|
}
|
84293
84626
|
lock() {
|
84294
84627
|
// target
|
@@ -84330,66 +84663,82 @@ class BlockModal {
|
|
84330
84663
|
}
|
84331
84664
|
realtime() {
|
84332
84665
|
const modal = this.modal;
|
84666
|
+
const page = this.getPage();
|
84667
|
+
const block = this.blockSelected();
|
84668
|
+
if (block) {
|
84669
|
+
const btnClearBreakpoints = modal.querySelector('.btn-clear-breakpoint');
|
84670
|
+
let hasBreakpoints = false;
|
84671
|
+
var attributes = block.attributes;
|
84672
|
+
for (var i = 0; i < attributes.length; i++) {
|
84673
|
+
let item = attributes[i].name;
|
84674
|
+
if (item.includes('data--t-') || item.includes('data--b-' )) {
|
84675
|
+
// has breakpoints
|
84676
|
+
hasBreakpoints = true;
|
84677
|
+
}
|
84678
|
+
}
|
84679
|
+
if (hasBreakpoints) {
|
84680
|
+
btnClearBreakpoints.style.display = '';
|
84681
|
+
} else {
|
84682
|
+
btnClearBreakpoints.style.display = 'none';
|
84683
|
+
}
|
84333
84684
|
|
84334
|
-
|
84335
|
-
|
84336
|
-
|
84337
|
-
|
84338
|
-
|
84339
|
-
|
84685
|
+
// Background image
|
84686
|
+
const blockOverlay = this.blockOverlay();
|
84687
|
+
let src = '';
|
84688
|
+
if (blockOverlay) if (blockOverlay.style.backgroundImage) {
|
84689
|
+
if (blockOverlay.style.backgroundImage.indexOf('url(') !== -1) {
|
84690
|
+
src = blockOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
84691
|
+
}
|
84340
84692
|
}
|
84341
|
-
}
|
84342
84693
|
|
84343
|
-
|
84344
|
-
|
84694
|
+
// Update preview
|
84695
|
+
this.updatePanelImage(src);
|
84345
84696
|
|
84346
|
-
|
84347
|
-
|
84348
|
-
|
84349
|
-
|
84350
|
-
|
84351
|
-
|
84352
|
-
|
84353
|
-
|
84354
|
-
|
84697
|
+
// Show/hide grayscale
|
84698
|
+
const divGrayscale = modal.querySelector('.label.grayscale');
|
84699
|
+
if (src === '') {
|
84700
|
+
this.imagePreview.style.display = 'none';
|
84701
|
+
divGrayscale.style.display = 'none';
|
84702
|
+
} else {
|
84703
|
+
this.imagePreview.style.display = '';
|
84704
|
+
divGrayscale.style.display = '';
|
84705
|
+
}
|
84355
84706
|
|
84356
|
-
|
84357
|
-
|
84358
|
-
|
84359
|
-
|
84360
|
-
|
84361
|
-
|
84362
|
-
|
84707
|
+
// Grayscale
|
84708
|
+
const chkGrayscale = modal.querySelector('.chk-grayscale');
|
84709
|
+
chkGrayscale.checked = false;
|
84710
|
+
if (blockOverlay) {
|
84711
|
+
if (blockOverlay.style.filter) {
|
84712
|
+
if (blockOverlay.style.filter.indexOf('grayscale') !== -1) {
|
84713
|
+
chkGrayscale.checked = true;
|
84714
|
+
}
|
84363
84715
|
}
|
84364
84716
|
}
|
84365
|
-
}
|
84366
84717
|
|
84367
|
-
|
84368
|
-
|
84369
|
-
|
84370
|
-
|
84371
|
-
|
84372
|
-
|
84373
|
-
|
84374
|
-
|
84718
|
+
// Background color
|
84719
|
+
const btnColorPick = modal.querySelector('.input-block-bgcolor');
|
84720
|
+
if (blockOverlay) {
|
84721
|
+
let bgcolor = blockOverlay.style.backgroundColor;
|
84722
|
+
btnColorPick.style.backgroundColor = bgcolor; //preview
|
84723
|
+
} else {
|
84724
|
+
btnColorPick.style.backgroundColor = ''; //preview
|
84725
|
+
}
|
84375
84726
|
|
84376
|
-
|
84377
|
-
|
84378
|
-
|
84379
|
-
|
84380
|
-
|
84727
|
+
// Gradient
|
84728
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
84729
|
+
if (blockOverlay) {
|
84730
|
+
if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
|
84731
|
+
btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage;
|
84732
|
+
} else {
|
84733
|
+
btnGradient.style.backgroundImage = '';
|
84734
|
+
}
|
84381
84735
|
} else {
|
84382
84736
|
btnGradient.style.backgroundImage = '';
|
84383
84737
|
}
|
84384
|
-
|
84385
|
-
|
84386
|
-
|
84387
|
-
|
84388
|
-
btnClearText.style.display = 'none';
|
84389
|
-
const divContentColor = modal.querySelector('.div-content-textcolor');
|
84390
|
-
divContentColor.style.display = 'none';
|
84391
|
-
const block = this.blockSelected();
|
84392
|
-
if (block) {
|
84738
|
+
const btnClearText = modal.querySelector('.btn-clear-text');
|
84739
|
+
btnClearText.style.display = 'none';
|
84740
|
+
const divContentColor = modal.querySelector('.div-content-textcolor');
|
84741
|
+
divContentColor.style.display = 'none';
|
84393
84742
|
if (block.querySelector('.is-container')) {
|
84394
84743
|
btnClearText.style.display = '';
|
84395
84744
|
divContentColor.style.display = '';
|
@@ -84507,6 +84856,45 @@ class BlockModal {
|
|
84507
84856
|
inpHeight.value = '';
|
84508
84857
|
inpHeightUnit.value = '%';
|
84509
84858
|
}
|
84859
|
+
} else if (page) {
|
84860
|
+
// Background image
|
84861
|
+
let src = '';
|
84862
|
+
if (page) if (page.style.backgroundImage) {
|
84863
|
+
if (page.style.backgroundImage.indexOf('url(') !== -1) {
|
84864
|
+
src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
|
84865
|
+
}
|
84866
|
+
}
|
84867
|
+
|
84868
|
+
// Update preview
|
84869
|
+
this.updatePanelPageImage(src);
|
84870
|
+
|
84871
|
+
// Show/hide
|
84872
|
+
if (src === '') {
|
84873
|
+
this.pageImagePreview.style.display = 'none';
|
84874
|
+
} else {
|
84875
|
+
this.pageImagePreview.style.display = '';
|
84876
|
+
}
|
84877
|
+
|
84878
|
+
// Background color
|
84879
|
+
const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
|
84880
|
+
if (page) {
|
84881
|
+
let bgcolor = page.style.backgroundColor;
|
84882
|
+
btnPageColorPick.style.backgroundColor = bgcolor; //preview
|
84883
|
+
} else {
|
84884
|
+
btnPageColorPick.style.backgroundColor = ''; //preview
|
84885
|
+
}
|
84886
|
+
|
84887
|
+
// Gradient
|
84888
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
84889
|
+
if (page) {
|
84890
|
+
if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
|
84891
|
+
btnPageGradient.style.backgroundImage = page.style.backgroundImage;
|
84892
|
+
} else {
|
84893
|
+
btnPageGradient.style.backgroundImage = '';
|
84894
|
+
}
|
84895
|
+
} else {
|
84896
|
+
btnPageGradient.style.backgroundImage = '';
|
84897
|
+
}
|
84510
84898
|
}
|
84511
84899
|
}
|
84512
84900
|
openImagePicker(currentUrl, callback, btn) {
|
@@ -84528,6 +84916,43 @@ class BlockModal {
|
|
84528
84916
|
}, false, this.builder.assetPanelFullScreen);
|
84529
84917
|
if (btn) btn.setAttribute('data-focus', true);
|
84530
84918
|
}
|
84919
|
+
updatePageImage(src) {
|
84920
|
+
this.builder.uo.saveForUndo();
|
84921
|
+
let page = this.getPage();
|
84922
|
+
page.style.backgroundImage = 'url(\'' + src + '\')';
|
84923
|
+
|
84924
|
+
// Reset position & filter (grayscale)
|
84925
|
+
page.style.filter = '';
|
84926
|
+
page.style.backgroundSize = '';
|
84927
|
+
page.style.backgroundPosition = '50% 60%';
|
84928
|
+
page.removeAttribute('data-bg-xs');
|
84929
|
+
page.removeAttribute('data-bg-sm');
|
84930
|
+
page.removeAttribute('data-bg-md');
|
84931
|
+
page.removeAttribute('data-bg-lg');
|
84932
|
+
this.updatePanelPageImage(src);
|
84933
|
+
this.builder.onChange();
|
84934
|
+
}
|
84935
|
+
updatePanelPageImage(src) {
|
84936
|
+
const modal = this.modal;
|
84937
|
+
let previewHtml;
|
84938
|
+
if (!src) previewHtml = '';else previewHtml = `
|
84939
|
+
<img src="${src}">
|
84940
|
+
`;
|
84941
|
+
this.pageImagePreview.innerHTML = previewHtml;
|
84942
|
+
|
84943
|
+
// Show/hide image-related controls
|
84944
|
+
const btnPageClear = modal.querySelector('.btn-page-clear');
|
84945
|
+
const btnPageAdjust = modal.querySelector('.btn-page-adjust');
|
84946
|
+
if (src === '') {
|
84947
|
+
btnPageClear.style.display = 'none';
|
84948
|
+
btnPageAdjust.style.display = 'none';
|
84949
|
+
} else {
|
84950
|
+
btnPageClear.style.display = '';
|
84951
|
+
btnPageAdjust.style.display = '';
|
84952
|
+
}
|
84953
|
+
const btnPageGradient = modal.querySelector('.btn-page-gradient');
|
84954
|
+
btnPageGradient.style.backgroundImage = '';
|
84955
|
+
}
|
84531
84956
|
updateImage(src) {
|
84532
84957
|
this.builder.uo.saveForUndo();
|
84533
84958
|
let blockOverlay = this.blockOverlay();
|
@@ -84553,8 +84978,8 @@ class BlockModal {
|
|
84553
84978
|
this.imagePreview.innerHTML = previewHtml;
|
84554
84979
|
|
84555
84980
|
// Show/hide image-related controls
|
84556
|
-
const btnClear = modal.querySelector('.btn-clear');
|
84557
|
-
const btnAdjust = modal.querySelector('.btn-adjust');
|
84981
|
+
const btnClear = modal.querySelector('.btn-block-clear');
|
84982
|
+
const btnAdjust = modal.querySelector('.btn-block-adjust');
|
84558
84983
|
if (src === '') {
|
84559
84984
|
btnClear.style.display = 'none';
|
84560
84985
|
btnAdjust.style.display = 'none';
|
@@ -84562,7 +84987,7 @@ class BlockModal {
|
|
84562
84987
|
btnClear.style.display = '';
|
84563
84988
|
btnAdjust.style.display = '';
|
84564
84989
|
}
|
84565
|
-
const btnGradient = modal.querySelector('.btn-gradient');
|
84990
|
+
const btnGradient = modal.querySelector('.btn-block-gradient');
|
84566
84991
|
btnGradient.style.backgroundImage = '';
|
84567
84992
|
}
|
84568
84993
|
show() {
|
@@ -84582,22 +85007,48 @@ class BlockModal {
|
|
84582
85007
|
}
|
84583
85008
|
this.util.showModal(modal);
|
84584
85009
|
this.realtime();
|
84585
|
-
this.handleBlockClick =
|
84586
|
-
|
84587
|
-
|
84588
|
-
|
84589
|
-
|
85010
|
+
this.handleBlockClick = () => {
|
85011
|
+
this.showHideControls();
|
85012
|
+
};
|
85013
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
85014
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
85015
|
+
if (this.builder.iframe) {
|
85016
|
+
docContainer.addEventListener('click', this.handleBlockClick);
|
85017
|
+
}
|
85018
|
+
this.showHideControls();
|
85019
|
+
}
|
85020
|
+
showHideControls() {
|
85021
|
+
const modal = this.modal;
|
85022
|
+
const content1 = modal.querySelector('.modal-none');
|
85023
|
+
const content2 = modal.querySelector('.modal-content');
|
85024
|
+
const content3 = modal.querySelector('.modal-page-content');
|
85025
|
+
const activeBlock = this.builder.doc.querySelector('.is-block.active');
|
85026
|
+
const page = this.getPage();
|
85027
|
+
const modalTitle = modal.querySelector('.modal-title');
|
85028
|
+
if (activeBlock) {
|
85029
|
+
if (!activeBlock.closest('.multi')) {
|
84590
85030
|
content1.style.display = 'none';
|
84591
85031
|
content2.style.display = '';
|
84592
|
-
|
85032
|
+
content3.style.display = 'none';
|
85033
|
+
modalTitle.innerHTML = this.util.out('Block');
|
85034
|
+
this.realtime();
|
84593
85035
|
} else {
|
84594
|
-
content1.style.display = '';
|
85036
|
+
content1.style.display = 'none';
|
84595
85037
|
content2.style.display = 'none';
|
85038
|
+
content3.style.display = '';
|
85039
|
+
modalTitle.innerHTML = this.util.out('Page');
|
85040
|
+
this.realtime();
|
84596
85041
|
}
|
84597
|
-
}
|
84598
|
-
|
84599
|
-
|
84600
|
-
|
85042
|
+
} else if (page) {
|
85043
|
+
content1.style.display = 'none';
|
85044
|
+
content2.style.display = 'none';
|
85045
|
+
content3.style.display = '';
|
85046
|
+
modalTitle.innerHTML = this.util.out('Page');
|
85047
|
+
this.realtime();
|
85048
|
+
} else {
|
85049
|
+
content1.style.display = '';
|
85050
|
+
content2.style.display = 'none';
|
85051
|
+
content3.style.display = 'none';
|
84601
85052
|
}
|
84602
85053
|
}
|
84603
85054
|
hide() {
|
@@ -84610,11 +85061,380 @@ class BlockModal {
|
|
84610
85061
|
}
|
84611
85062
|
}
|
84612
85063
|
|
85064
|
+
class PageSize {
|
85065
|
+
constructor(builder) {
|
85066
|
+
this.builder = builder;
|
85067
|
+
const util = this.builder.util;
|
85068
|
+
this.util = util;
|
85069
|
+
const builderStuff = this.builder.builderStuff;
|
85070
|
+
this.builderStuff = builderStuff;
|
85071
|
+
const dom = this.builder.dom;
|
85072
|
+
this.dom = dom;
|
85073
|
+
}
|
85074
|
+
open() {
|
85075
|
+
const builderStuff = this.builderStuff;
|
85076
|
+
const util = this.util;
|
85077
|
+
const dom = this.dom;
|
85078
|
+
let modal = builderStuff.querySelector('.is-modal.pagesize');
|
85079
|
+
if (!modal) {
|
85080
|
+
const html = `
|
85081
|
+
<div class="is-modal pagesize" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
85082
|
+
<div class="is-modal-content">
|
85083
|
+
|
85084
|
+
<div class="div-page-sizes">
|
85085
|
+
<button title="Web" data-pagesize="100%,100vh,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (full)</button>
|
85086
|
+
<button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
|
85087
|
+
<button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
|
85088
|
+
<button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
|
85089
|
+
<button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
|
85090
|
+
<button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
|
85091
|
+
<button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
|
85092
|
+
<button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
|
85093
|
+
<button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
|
85094
|
+
<button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
|
85095
|
+
<button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
|
85096
|
+
<button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
|
85097
|
+
<button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
|
85098
|
+
<button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
|
85099
|
+
<button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
|
85100
|
+
<button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
|
85101
|
+
<button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
|
85102
|
+
<button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
|
85103
|
+
</div>
|
85104
|
+
|
85105
|
+
<div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
|
85106
|
+
<div>
|
85107
|
+
<label for="inpPageWidth" style="display:block">${util.out('Width')}:</label>
|
85108
|
+
<input id="inpPageWidth" class="input-width" type="text">
|
85109
|
+
</div>
|
85110
|
+
<div>
|
85111
|
+
<label for="inpPageWidth" style="display:block">${util.out('Height')}:</label>
|
85112
|
+
<input id="inpPageHeight" class="input-height" type="text">
|
85113
|
+
</div>
|
85114
|
+
</div>
|
85115
|
+
|
85116
|
+
<div style="text-align:right;margin-top:20px;display:none">
|
85117
|
+
<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
|
85118
|
+
<button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
|
85119
|
+
</div>
|
85120
|
+
|
85121
|
+
</div>
|
85122
|
+
</div>
|
85123
|
+
<div class="is-modal viewprint" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
85124
|
+
<div class="is-modal-content" style="width:100%;height:100vh;padding:0;">
|
85125
|
+
<iframe tabindex="0" style="width:100vw;height:100vh;border: none;display: block;" src="about:blank"></iframe>
|
85126
|
+
</div>
|
85127
|
+
</div>
|
85128
|
+
`;
|
85129
|
+
dom.appendHtml(builderStuff, html);
|
85130
|
+
modal = builderStuff.querySelector('.pagesize');
|
85131
|
+
this.modal = modal;
|
85132
|
+
const inpWidth = modal.querySelector('.input-width');
|
85133
|
+
const inpHeight = modal.querySelector('.input-height');
|
85134
|
+
const current = localStorage.getItem('_pagesize');
|
85135
|
+
if (current) {
|
85136
|
+
const arrCurrent = current.split(',');
|
85137
|
+
inpWidth.value = arrCurrent[0].trim();
|
85138
|
+
inpHeight.value = arrCurrent[1].trim();
|
85139
|
+
}
|
85140
|
+
const btnPageSize = modal.querySelectorAll('[data-pagesize]');
|
85141
|
+
btnPageSize.forEach(btn => {
|
85142
|
+
btn.addEventListener('click', () => {
|
85143
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
85144
|
+
if (elmCss) elmCss.remove();
|
85145
|
+
const s = btn.getAttribute('data-pagesize');
|
85146
|
+
this.setPageSize(s);
|
85147
|
+
inpWidth.value = '';
|
85148
|
+
inpHeight.value = '';
|
85149
|
+
const arr = s.split(',');
|
85150
|
+
inpWidth.value = arr[0].trim();
|
85151
|
+
inpHeight.value = arr[1].trim();
|
85152
|
+
});
|
85153
|
+
});
|
85154
|
+
let timer;
|
85155
|
+
inpWidth.addEventListener('input', () => {
|
85156
|
+
clearTimeout(timer);
|
85157
|
+
timer = setTimeout(() => {
|
85158
|
+
const current = localStorage.getItem('_pagesize');
|
85159
|
+
let isWeb = false;
|
85160
|
+
const arrCurrent = current.split(',');
|
85161
|
+
if (arrCurrent.length === 3) isWeb = true;
|
85162
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
85163
|
+
this.setPageSize(s);
|
85164
|
+
}, 600);
|
85165
|
+
});
|
85166
|
+
inpHeight.addEventListener('input', () => {
|
85167
|
+
clearTimeout(timer);
|
85168
|
+
timer = setTimeout(() => {
|
85169
|
+
const current = localStorage.getItem('_pagesize');
|
85170
|
+
let isWeb = false;
|
85171
|
+
const arrCurrent = current.split(',');
|
85172
|
+
if (arrCurrent.length === 3) isWeb = true;
|
85173
|
+
let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
|
85174
|
+
this.setPageSize(s);
|
85175
|
+
}, 600);
|
85176
|
+
});
|
85177
|
+
const btnImageOk = modal.querySelector('.input-ok');
|
85178
|
+
dom.addEventListener(btnImageOk, 'click', () => {
|
85179
|
+
// const inpSrc = modal.querySelector('.input-src');
|
85180
|
+
// const url = inpSrc.value;
|
85181
|
+
|
85182
|
+
this.builder.hideModal(modal);
|
85183
|
+
});
|
85184
|
+
const btnImageCancel = modal.querySelector('.input-cancel');
|
85185
|
+
dom.addEventListener(btnImageCancel, 'click', () => {
|
85186
|
+
this.builder.hideModal(modal);
|
85187
|
+
});
|
85188
|
+
}
|
85189
|
+
this.util.showModal(modal, false);
|
85190
|
+
}
|
85191
|
+
setPageSize(s) {
|
85192
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
85193
|
+
localStorage.setItem('_pagesize', s);
|
85194
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
85195
|
+
const elms = docContainer.querySelectorAll('.is-box');
|
85196
|
+
elms.forEach(elm => {
|
85197
|
+
elm.setAttribute('data-pagesize', s);
|
85198
|
+
});
|
85199
|
+
const elmCss = document.querySelector('#__css_pagesize');
|
85200
|
+
if (elmCss) elmCss.remove();
|
85201
|
+
let css = this.getPageCss();
|
85202
|
+
document.head.insertAdjacentHTML('beforeend', css);
|
85203
|
+
|
85204
|
+
// for the tools position
|
85205
|
+
const arr = s.split(',');
|
85206
|
+
// let w = arr[0].trim();
|
85207
|
+
// let h = arr[1].trim();
|
85208
|
+
if (arr.length === 3) {
|
85209
|
+
// web
|
85210
|
+
const docWidth = docContainer.offsetWidth;
|
85211
|
+
const viewportWidth = this.builder.win.innerWidth;
|
85212
|
+
if (docWidth < viewportWidth - 50) {
|
85213
|
+
// web (container)
|
85214
|
+
docContainer.classList.remove('page-web');
|
85215
|
+
docContainer.classList.add('page-web-container');
|
85216
|
+
} else {
|
85217
|
+
// web (full)
|
85218
|
+
docContainer.classList.remove('page-web-container');
|
85219
|
+
docContainer.classList.add('page-web');
|
85220
|
+
}
|
85221
|
+
} else {
|
85222
|
+
// print
|
85223
|
+
docContainer.classList.remove('page-web');
|
85224
|
+
docContainer.classList.remove('page-web-container');
|
85225
|
+
}
|
85226
|
+
} else {
|
85227
|
+
alert('This function works in Canvas mode only.');
|
85228
|
+
}
|
85229
|
+
}
|
85230
|
+
print() {
|
85231
|
+
const builderStuff = this.builderStuff;
|
85232
|
+
const dom = this.dom;
|
85233
|
+
let modalIframe = builderStuff.querySelector('.viewprint');
|
85234
|
+
if (!modalIframe) {
|
85235
|
+
let html = `
|
85236
|
+
<div class="viewprint" style="display:none">
|
85237
|
+
<iframe tabindex="0" style="width:2000px;height:2000px;border: none;display: block;" src="about:blank"></iframe>
|
85238
|
+
</div>`;
|
85239
|
+
dom.appendHtml(builderStuff, html);
|
85240
|
+
modalIframe = builderStuff.querySelector('.viewprint');
|
85241
|
+
}
|
85242
|
+
if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
|
85243
|
+
const ifr = modalIframe.querySelector('iframe');
|
85244
|
+
ifr.srcdoc = this.getPrintHtml();
|
85245
|
+
} else {
|
85246
|
+
alert('This function works in Canvas mode only.');
|
85247
|
+
}
|
85248
|
+
}
|
85249
|
+
getPrintHtml() {
|
85250
|
+
let css = this.getPrintCss();
|
85251
|
+
let html = this.builder.html();
|
85252
|
+
return `
|
85253
|
+
<!DOCTYPE HTML>
|
85254
|
+
<html>
|
85255
|
+
<head>
|
85256
|
+
<meta charset="utf-8">
|
85257
|
+
<title></title>
|
85258
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
85259
|
+
<meta name="description" content="">
|
85260
|
+
|
85261
|
+
<link href="${this.builder.snippetPath}print.css" rel="stylesheet">
|
85262
|
+
|
85263
|
+
<style>
|
85264
|
+
|
85265
|
+
/* block.css */
|
85266
|
+
/* box-canvas */
|
85267
|
+
.is-box {
|
85268
|
+
position: relative;
|
85269
|
+
flex:none;
|
85270
|
+
}
|
85271
|
+
.is-block {
|
85272
|
+
position: absolute;
|
85273
|
+
box-sizing: border-box;
|
85274
|
+
padding: 0;
|
85275
|
+
}
|
85276
|
+
.is-block .is-container {
|
85277
|
+
max-width: unset !important;
|
85278
|
+
width: 100%;
|
85279
|
+
padding: 0;
|
85280
|
+
box-sizing: border-box;
|
85281
|
+
position: relative;
|
85282
|
+
z-index: 1;
|
85283
|
+
}
|
85284
|
+
.is-box.autolayout .is-block.block-steady.fluid {
|
85285
|
+
padding: 0;
|
85286
|
+
width: 100% !important;
|
85287
|
+
min-width: unset !important;
|
85288
|
+
left: auto !important
|
85289
|
+
}
|
85290
|
+
.is-block-overlay { background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; }
|
85291
|
+
|
85292
|
+
|
85293
|
+
body {
|
85294
|
+
background: #eee;
|
85295
|
+
}
|
85296
|
+
.is-page {
|
85297
|
+
position: relative;
|
85298
|
+
transform-origin: top;
|
85299
|
+
}
|
85300
|
+
.is-box {
|
85301
|
+
position: relative;
|
85302
|
+
flex:none;
|
85303
|
+
background: #fff;
|
85304
|
+
overflow: hidden;
|
85305
|
+
box-shadow: none;
|
85306
|
+
}
|
85307
|
+
${css}
|
85308
|
+
</style>
|
85309
|
+
</head>
|
85310
|
+
<body class="print">
|
85311
|
+
|
85312
|
+
<div class="is-page">${html}</div>
|
85313
|
+
|
85314
|
+
<script>
|
85315
|
+
window.print();
|
85316
|
+
</script>
|
85317
|
+
</body>
|
85318
|
+
</html>
|
85319
|
+
`;
|
85320
|
+
}
|
85321
|
+
getPageCss() {
|
85322
|
+
let s;
|
85323
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
85324
|
+
s = localStorage.getItem('_pagesize');
|
85325
|
+
} else {
|
85326
|
+
s = this.pageSize || '';
|
85327
|
+
}
|
85328
|
+
let w, h;
|
85329
|
+
let css;
|
85330
|
+
if (s) {
|
85331
|
+
const arr = s.split(',');
|
85332
|
+
w = arr[0].trim();
|
85333
|
+
h = arr[1].trim();
|
85334
|
+
if (arr.length === 3) {
|
85335
|
+
// web
|
85336
|
+
css = `
|
85337
|
+
<style id="__css_pagesize">
|
85338
|
+
.is-page {
|
85339
|
+
${(w === '100%' || w === '100vw') && (h === '100%' || h === '100vh') ? '' : 'margin-top: 150px;'}
|
85340
|
+
}
|
85341
|
+
.is-box {
|
85342
|
+
width: 100%;
|
85343
|
+
max-width: ${w};
|
85344
|
+
height: ${h};
|
85345
|
+
margin: 0 auto;
|
85346
|
+
}
|
85347
|
+
</style>
|
85348
|
+
`;
|
85349
|
+
} else {
|
85350
|
+
// print
|
85351
|
+
css = `
|
85352
|
+
<style id="__css_pagesize">
|
85353
|
+
.is-page {
|
85354
|
+
margin-top:150px;
|
85355
|
+
gap: 45px;
|
85356
|
+
}
|
85357
|
+
.is-box {
|
85358
|
+
width: ${w};
|
85359
|
+
height: ${h};
|
85360
|
+
}
|
85361
|
+
</style>
|
85362
|
+
`;
|
85363
|
+
}
|
85364
|
+
}
|
85365
|
+
return css;
|
85366
|
+
}
|
85367
|
+
getPrintCss() {
|
85368
|
+
let s;
|
85369
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
85370
|
+
s = localStorage.getItem('_pagesize');
|
85371
|
+
} else {
|
85372
|
+
s = this.pageSize || '';
|
85373
|
+
}
|
85374
|
+
let w, h;
|
85375
|
+
let css;
|
85376
|
+
if (s) {
|
85377
|
+
const arr = s.split(',');
|
85378
|
+
w = arr[0].trim();
|
85379
|
+
h = arr[1].trim();
|
85380
|
+
if (arr.length === 3) {
|
85381
|
+
// web
|
85382
|
+
const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
|
85383
|
+
const box = docContainer.querySelector('.is-box');
|
85384
|
+
if (!box) return '';
|
85385
|
+
const docWidth = box.offsetWidth + 'px';
|
85386
|
+
const docHeight = box.offsetHeight + 'px';
|
85387
|
+
css = `
|
85388
|
+
<style id="__css_pagesize">
|
85389
|
+
.is-box {
|
85390
|
+
width: 100%;
|
85391
|
+
max-width: ${docWidth};
|
85392
|
+
height: ${docHeight};
|
85393
|
+
margin: 0 auto;
|
85394
|
+
}
|
85395
|
+
@media print {
|
85396
|
+
.is-box {
|
85397
|
+
width: ${docWidth};
|
85398
|
+
height: ${docHeight};
|
85399
|
+
}
|
85400
|
+
}
|
85401
|
+
@page {
|
85402
|
+
size:${docWidth} ${docHeight};;
|
85403
|
+
margin: 0;
|
85404
|
+
}
|
85405
|
+
</style>
|
85406
|
+
`;
|
85407
|
+
} else {
|
85408
|
+
// print
|
85409
|
+
css = `
|
85410
|
+
<style id="__css_pagesize">
|
85411
|
+
.is-box {
|
85412
|
+
width: ${w};
|
85413
|
+
height: ${h};
|
85414
|
+
}
|
85415
|
+
@media print {
|
85416
|
+
.is-box {
|
85417
|
+
width: ${w};
|
85418
|
+
height: ${h};
|
85419
|
+
}
|
85420
|
+
}
|
85421
|
+
@page {
|
85422
|
+
size:${w} ${h};
|
85423
|
+
margin: 0;
|
85424
|
+
}
|
85425
|
+
</style>
|
85426
|
+
`;
|
85427
|
+
}
|
85428
|
+
}
|
85429
|
+
return css;
|
85430
|
+
}
|
85431
|
+
}
|
85432
|
+
|
84613
85433
|
class ContentBuilder {
|
84614
85434
|
constructor(opts = {}) {
|
84615
85435
|
let defaults = {
|
84616
85436
|
page: '',
|
84617
|
-
container: '.container',
|
85437
|
+
container: '.is-container',
|
84618
85438
|
row: '',
|
84619
85439
|
cols: [],
|
84620
85440
|
colequal: [],
|
@@ -84856,6 +85676,8 @@ class ContentBuilder {
|
|
84856
85676
|
onUndo: function () {},
|
84857
85677
|
onRedo: function () {},
|
84858
85678
|
onBlockCanvasAdd: function () {},
|
85679
|
+
// docContainer: '.is-page',
|
85680
|
+
blockContainer: '.is-box',
|
84859
85681
|
/*
|
84860
85682
|
Deprecated:
|
84861
85683
|
snippetSampleImage: '',
|
@@ -85654,6 +86476,34 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
85654
86476
|
}
|
85655
86477
|
this.settings = this.opts; // Backward compatible
|
85656
86478
|
|
86479
|
+
// freeform
|
86480
|
+
if (this.canvas && !this.isContentBox) {
|
86481
|
+
/*
|
86482
|
+
blockContainer: '.is-box',
|
86483
|
+
imageResizeOnBlock: false,
|
86484
|
+
toolbarDisplay: 'always',
|
86485
|
+
buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'],
|
86486
|
+
buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara'],
|
86487
|
+
elementButtons: ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete','left', 'center', 'right', 'full' , 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'],
|
86488
|
+
elementButtonsMore: [],
|
86489
|
+
iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'],
|
86490
|
+
iconButtonsMore: [],
|
86491
|
+
*/
|
86492
|
+
this.blockContainer = '.is-box';
|
86493
|
+
this.imageResizeOnBlock = false;
|
86494
|
+
this.toolbarDisplay = 'always';
|
86495
|
+
this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'];
|
86496
|
+
this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
|
86497
|
+
this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'];
|
86498
|
+
this.elementButtonsMore = [];
|
86499
|
+
this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'];
|
86500
|
+
this.iconButtonsMore = [];
|
86501
|
+
if (!this.docContainer && this.container !== '.is-container') {
|
86502
|
+
this.docContainer = this.container;
|
86503
|
+
this.container = '.is-container';
|
86504
|
+
this.opts.container = '.is-container';
|
86505
|
+
}
|
86506
|
+
}
|
85657
86507
|
if (this.opts.imageSelect !== '') {
|
85658
86508
|
this.opts.imageselect = this.opts.imageSelect;
|
85659
86509
|
} else if (this.opts.imageselect !== '') {
|
@@ -85792,6 +86642,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
85792
86642
|
this.win = win;
|
85793
86643
|
this.doc = doc;
|
85794
86644
|
this.doc.body.classList.add('data-editor');
|
86645
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
86646
|
+
const docContainer = document.querySelector(this.docContainer);
|
86647
|
+
docContainer.classList.add('is-page');
|
86648
|
+
}
|
85795
86649
|
|
85796
86650
|
// Disable on mobile
|
85797
86651
|
const viewportWidth = this.doc.body.clientWidth;
|
@@ -86039,6 +86893,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86039
86893
|
|
86040
86894
|
// freeform
|
86041
86895
|
if (this.canvas && !this.isContentBox) this.blockmodal = new BlockModal(this);
|
86896
|
+
if (this.canvas) this.pageoption = new PageSize(this);
|
86042
86897
|
|
86043
86898
|
// freeform
|
86044
86899
|
if (this.canvas) this.eb = new EditableBlocks({
|
@@ -86049,6 +86904,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86049
86904
|
parentSelector: '.box-canvas',
|
86050
86905
|
rotate: true,
|
86051
86906
|
// disableOnMobile: 760,
|
86907
|
+
zoom: this.opts.zoom,
|
86052
86908
|
onBeforeChange: () => {
|
86053
86909
|
this.uo.saveForUndo();
|
86054
86910
|
},
|
@@ -86056,15 +86912,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86056
86912
|
this.opts.onChange();
|
86057
86913
|
},
|
86058
86914
|
onEditStart: (event, block) => {
|
86915
|
+
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
86916
|
+
if (!activeBlock) return;
|
86917
|
+
const container = activeBlock.querySelector('.is-container');
|
86918
|
+
if (!container) return;
|
86059
86919
|
block.classList.add('editable');
|
86060
86920
|
|
86061
86921
|
// get element to activate
|
86062
86922
|
let x = event.clientX;
|
86063
86923
|
let y = event.clientY;
|
86064
|
-
let activeBlock = this.doc.querySelector('.is-block.cloned');
|
86065
|
-
if (!activeBlock) return;
|
86066
|
-
const container = activeBlock.querySelector('.is-container');
|
86067
|
-
if (!container) return;
|
86068
86924
|
const cols = this.getAllColumns(container);
|
86069
86925
|
let clickedElm;
|
86070
86926
|
let clickedCol;
|
@@ -86177,10 +87033,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86177
87033
|
Array.prototype.forEach.call(elms, elm => {
|
86178
87034
|
elm.style.display = '';
|
86179
87035
|
});
|
86180
|
-
elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
86181
|
-
Array.prototype.forEach.call(elms, elm => {
|
86182
|
-
|
86183
|
-
});
|
87036
|
+
// elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
87037
|
+
// Array.prototype.forEach.call(elms, (elm) => {
|
87038
|
+
// elm.style.display = '';
|
87039
|
+
// });
|
87040
|
+
|
86184
87041
|
const viewportWidth = this.doc.body.clientWidth;
|
86185
87042
|
if (viewportWidth <= 768) {
|
86186
87043
|
elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
|
@@ -86240,6 +87097,74 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86240
87097
|
if (this.onUnselectBlock) this.onUnselectBlock();
|
86241
87098
|
}
|
86242
87099
|
});
|
87100
|
+
|
87101
|
+
// SHIFT + Right Clidk to Zoom In
|
87102
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
87103
|
+
//--- see loadHtml ---
|
87104
|
+
const docContainer = document.querySelector(this.docContainer);
|
87105
|
+
|
87106
|
+
// set page size
|
87107
|
+
let s;
|
87108
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
87109
|
+
if (elm) {
|
87110
|
+
s = elm.getAttribute('data-pagesize');
|
87111
|
+
} else {
|
87112
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
87113
|
+
s = localStorage.getItem('_pagesize');
|
87114
|
+
} else {
|
87115
|
+
s = this.pageSize || '';
|
87116
|
+
}
|
87117
|
+
}
|
87118
|
+
this.setPageSize(s);
|
87119
|
+
this.applyBehaviorCanvas();
|
87120
|
+
const builders = docContainer.querySelectorAll(this.container);
|
87121
|
+
builders.forEach(builder => {
|
87122
|
+
this.applyBehaviorOn(builder);
|
87123
|
+
});
|
87124
|
+
this.refresh();
|
87125
|
+
if (this.win.Block) {
|
87126
|
+
this.win.Block.render();
|
87127
|
+
}
|
87128
|
+
docContainer.style.opacity = '';
|
87129
|
+
//--- /see loadHtml ---
|
87130
|
+
|
87131
|
+
// docContainer.style.transform = '';
|
87132
|
+
// this.opts.zoom = 1;
|
87133
|
+
// this.eb.setZoom(1);
|
87134
|
+
|
87135
|
+
document.addEventListener('contextmenu', this.toggleEnlargePage = e => {
|
87136
|
+
if (e.shiftKey && e.button === 2) {
|
87137
|
+
e.preventDefault();
|
87138
|
+
if (docContainer.style.transform.includes('scale(1)')) {
|
87139
|
+
docContainer.style.transform = '';
|
87140
|
+
}
|
87141
|
+
if (docContainer.classList.contains('expand')) {
|
87142
|
+
// back (zoom-out)
|
87143
|
+
docContainer.classList.remove('expand');
|
87144
|
+
docContainer.style.transform = '';
|
87145
|
+
this.opts.zoom = 1;
|
87146
|
+
localStorage.setItem('_zoom', 1);
|
87147
|
+
this.eb.setZoom(1);
|
87148
|
+
this.setZoomOnControl(docContainer);
|
87149
|
+
} else {
|
87150
|
+
// expand (zoom-in)
|
87151
|
+
docContainer.classList.add('expand');
|
87152
|
+
const viewportWidth = document.body.clientWidth;
|
87153
|
+
const targetWidth = viewportWidth * 0.8;
|
87154
|
+
const box = docContainer.querySelector(this.blockContainer);
|
87155
|
+
if (box) {
|
87156
|
+
let scale = targetWidth / box.offsetWidth;
|
87157
|
+
if (scale > 1.4) scale = 1.4;
|
87158
|
+
docContainer.style.transform = `scale(${scale})`;
|
87159
|
+
this.opts.zoom = scale;
|
87160
|
+
localStorage.setItem('_zoom', scale);
|
87161
|
+
this.eb.setZoom(scale);
|
87162
|
+
this.setZoomOnControl(docContainer);
|
87163
|
+
}
|
87164
|
+
}
|
87165
|
+
}
|
87166
|
+
});
|
87167
|
+
}
|
86243
87168
|
let previousWidth = this.win.innerWidth;
|
86244
87169
|
let timer;
|
86245
87170
|
const debounce = (func, delay) => {
|
@@ -86306,7 +87231,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86306
87231
|
|
86307
87232
|
// console.log('resize');
|
86308
87233
|
setTimeout(() => {
|
86309
|
-
if
|
87234
|
+
// if(this.blockmodal) this.blockmodal.realtime(); // freeform
|
86310
87235
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
86311
87236
|
}, 300); // give time for block transition
|
86312
87237
|
}, 200);
|
@@ -86323,7 +87248,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86323
87248
|
const debouncedResizeHandler = debounce(() => {
|
86324
87249
|
// console.log('resize');
|
86325
87250
|
setTimeout(() => {
|
86326
|
-
if
|
87251
|
+
// if(this.blockmodal) this.blockmodal.realtime();
|
86327
87252
|
if (this.onPageResizeDebounce) this.onPageResizeDebounce();
|
86328
87253
|
}, 300); // give time for block transition
|
86329
87254
|
}, 200);
|
@@ -86620,6 +87545,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
86620
87545
|
.is-block.active.editable {
|
86621
87546
|
outline: none;
|
86622
87547
|
cursor: auto;
|
87548
|
+
z-index: 10;
|
86623
87549
|
}
|
86624
87550
|
.is-block.active.multi {
|
86625
87551
|
outline: var(--is-outline);
|
@@ -87029,9 +87955,27 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87029
87955
|
rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`;
|
87030
87956
|
// rowtool.style.transformOrigin = 'top';
|
87031
87957
|
});
|
87032
|
-
}
|
87033
87958
|
|
87959
|
+
// freeform
|
87960
|
+
let tools = area.querySelectorAll('.is-canvas-tool');
|
87961
|
+
tools.forEach(tool => {
|
87962
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
87963
|
+
tool.style.transformOrigin = 'top';
|
87964
|
+
});
|
87965
|
+
tools = area.querySelectorAll('.is-canvasadd-tool');
|
87966
|
+
tools.forEach(tool => {
|
87967
|
+
tool.style.transform = `scale(${1 / this.opts.zoom})`;
|
87968
|
+
tool.style.transformOrigin = 'top';
|
87969
|
+
});
|
87970
|
+
}
|
87034
87971
|
setZoomOnArea() {
|
87972
|
+
if (this.canvas && !this.isContentBox && this.docContainer) {
|
87973
|
+
// freeform
|
87974
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
87975
|
+
docContainer.style.transform = `scale(${this.opts.zoom})`;
|
87976
|
+
if (this.eb) this.eb.setZoom(this.opts.zoom);
|
87977
|
+
return;
|
87978
|
+
}
|
87035
87979
|
if (this.opts.page !== '') {
|
87036
87980
|
const wrapper = this.doc.querySelector(this.opts.page);
|
87037
87981
|
wrapper.style.transform = `scale(${this.opts.zoom})`;
|
@@ -87556,9 +88500,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87556
88500
|
lang: this.opts.lang
|
87557
88501
|
});
|
87558
88502
|
}
|
87559
|
-
|
87560
|
-
|
87561
|
-
|
88503
|
+
|
88504
|
+
// simpleColorPicker(onPick,mode) {
|
88505
|
+
// return this.colorClassPicker.open(onPick,mode);
|
88506
|
+
// }
|
88507
|
+
|
87562
88508
|
openAIAssistant() {
|
87563
88509
|
this.dictation.openDictation();
|
87564
88510
|
}
|
@@ -87713,6 +88659,124 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87713
88659
|
if (!this.eb) return;
|
87714
88660
|
this.eb.quitEditable(target);
|
87715
88661
|
}
|
88662
|
+
addPage(box) {
|
88663
|
+
this.uo.saveForUndo();
|
88664
|
+
let s;
|
88665
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
88666
|
+
s = localStorage.getItem('_pagesize');
|
88667
|
+
} else {
|
88668
|
+
s = this.pageSize || '';
|
88669
|
+
}
|
88670
|
+
const html = `
|
88671
|
+
<div class="is-box box-canvas autolayout new-canvas" data-pagesize="${s}">
|
88672
|
+
`;
|
88673
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
88674
|
+
if (box) {
|
88675
|
+
box.insertAdjacentHTML('afterend', html);
|
88676
|
+
} else {
|
88677
|
+
docContainer.insertAdjacentHTML('beforeend', html);
|
88678
|
+
}
|
88679
|
+
const newBox = docContainer.querySelector('.new-canvas');
|
88680
|
+
newBox.scrollIntoView({
|
88681
|
+
behavior: 'smooth',
|
88682
|
+
block: 'center'
|
88683
|
+
});
|
88684
|
+
newBox.classList.remove('new-canvas');
|
88685
|
+
this.applyBehaviorCanvas();
|
88686
|
+
this.opts.onChange();
|
88687
|
+
}
|
88688
|
+
setPageSize(s) {
|
88689
|
+
this.pageoption.setPageSize(s);
|
88690
|
+
}
|
88691
|
+
applyBehaviorCanvas() {
|
88692
|
+
if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
|
88693
|
+
let htmlTool = `
|
88694
|
+
<div class="is-tool is-canvas-tool" style="transform: scale(1); transform-origin: center top;">
|
88695
|
+
<button type="button" tabindex="-1" class="box-up" title="${this.util.out('Move Up')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-up"></use></svg></button>
|
88696
|
+
<button type="button" tabindex="-1" class="box-down" title="${this.util.out('Move Down')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-down"></use></svg></button>
|
88697
|
+
<!--
|
88698
|
+
<button type="button" tabindex="-1" class="box-settings" title="${this.util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
88699
|
+
-->
|
88700
|
+
<button type="button" tabindex="-1" class="box-remove" title="${this.util.out('Remove')}"><svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg></button>
|
88701
|
+
</div>
|
88702
|
+
<div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
|
88703
|
+
<button type="button" tabindex="-1" class="box-add" title="${this.util.out('Add')}"><svg class="is-icon-flex"><use xlink:href="#icon-plus2"></use></svg></button>
|
88704
|
+
</div>
|
88705
|
+
`;
|
88706
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
88707
|
+
const boxes = this.dom.elementChildren(docContainer);
|
88708
|
+
boxes.forEach(box => {
|
88709
|
+
let tool1 = box.querySelector('.is-canvas-tool');
|
88710
|
+
let tool2 = box.querySelector('.is-canvasadd-tool');
|
88711
|
+
if (tool1) tool1.remove();
|
88712
|
+
if (tool2) tool2.remove();
|
88713
|
+
if (!box.querySelector('.is-canvas-tool')) {
|
88714
|
+
box.addEventListener('click', () => {
|
88715
|
+
boxes.forEach(elm => elm.classList.remove('box-select'));
|
88716
|
+
box.classList.add('box-select');
|
88717
|
+
|
88718
|
+
// onSelectPage (see onSelectBlock)
|
88719
|
+
|
88720
|
+
let elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
|
88721
|
+
Array.prototype.forEach.call(elms, elm => {
|
88722
|
+
elm.style.display = '';
|
88723
|
+
});
|
88724
|
+
});
|
88725
|
+
box.insertAdjacentHTML('afterbegin', htmlTool);
|
88726
|
+
const btnUp = box.querySelector('.is-canvas-tool .box-up');
|
88727
|
+
btnUp.addEventListener('click', e => {
|
88728
|
+
const box = e.target.closest('.is-box');
|
88729
|
+
this.uo.saveForUndo();
|
88730
|
+
let boxPrev = box.previousElementSibling;
|
88731
|
+
if (boxPrev) box.parentNode.insertBefore(box, boxPrev);
|
88732
|
+
box.scrollIntoView({
|
88733
|
+
behavior: 'smooth',
|
88734
|
+
block: 'center'
|
88735
|
+
});
|
88736
|
+
this.opts.onChange();
|
88737
|
+
});
|
88738
|
+
const btnDown = box.querySelector('.is-canvas-tool .box-down');
|
88739
|
+
btnDown.addEventListener('click', e => {
|
88740
|
+
const box = e.target.closest('.is-box');
|
88741
|
+
this.uo.saveForUndo();
|
88742
|
+
let boxNext = box.nextElementSibling;
|
88743
|
+
if (boxNext) box.parentNode.insertBefore(boxNext, box);
|
88744
|
+
box.scrollIntoView({
|
88745
|
+
behavior: 'smooth',
|
88746
|
+
block: 'center'
|
88747
|
+
});
|
88748
|
+
this.opts.onChange();
|
88749
|
+
});
|
88750
|
+
const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
|
88751
|
+
btnRemove.addEventListener('click', e => {
|
88752
|
+
const box = e.target.closest('.is-box');
|
88753
|
+
this.uo.saveForUndo();
|
88754
|
+
box.remove();
|
88755
|
+
this.blockmodal.showHideControls();
|
88756
|
+
if (!docContainer.querySelector('.is-box')) this.addPage();
|
88757
|
+
this.opts.onChange();
|
88758
|
+
});
|
88759
|
+
const btnAdd = box.querySelector('.is-canvasadd-tool .box-add');
|
88760
|
+
btnAdd.addEventListener('click', e => {
|
88761
|
+
const box = e.target.closest('.is-box');
|
88762
|
+
this.addPage(box);
|
88763
|
+
});
|
88764
|
+
}
|
88765
|
+
});
|
88766
|
+
if (localStorage.getItem('_zoom') !== null) {
|
88767
|
+
this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
|
88768
|
+
}
|
88769
|
+
|
88770
|
+
this.eb.setZoom(this.opts.zoom);
|
88771
|
+
this.setZoomOnControl(docContainer);
|
88772
|
+
}
|
88773
|
+
}
|
88774
|
+
openPageOptions() {
|
88775
|
+
this.pageoption.open();
|
88776
|
+
}
|
88777
|
+
print() {
|
88778
|
+
this.pageoption.print();
|
88779
|
+
}
|
87716
88780
|
destroy() {
|
87717
88781
|
if (this.eb) this.eb.destroy();
|
87718
88782
|
this.doc.body.classList.remove('data-editor');
|
@@ -87753,6 +88817,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87753
88817
|
builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
|
87754
88818
|
});
|
87755
88819
|
|
88820
|
+
if (this.canvas && !this.isContentBox) {
|
88821
|
+
let html = this.html();
|
88822
|
+
let range = this.doc.createRange();
|
88823
|
+
const docContainer = this.doc.querySelector(this.docContainer);
|
88824
|
+
docContainer.innerHTML = '';
|
88825
|
+
docContainer.appendChild(range.createContextualFragment(html));
|
88826
|
+
}
|
87756
88827
|
Array.prototype.forEach.call(builders, builder => {
|
87757
88828
|
builder.removeAttribute('data-sort');
|
87758
88829
|
this.dom.removeClass(builder, 'is-builder');
|
@@ -87870,13 +88941,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87870
88941
|
if (this.targetAssetType === 'all') {
|
87871
88942
|
ok = true;
|
87872
88943
|
} else if (this.targetAssetType === 'media') {
|
87873
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
88944
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
87874
88945
|
ok = true;
|
87875
88946
|
} else {
|
87876
88947
|
alert(this.util.out('Please select an image or video file.'));
|
87877
88948
|
}
|
87878
88949
|
} else if (this.targetAssetType === 'image') {
|
87879
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
88950
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
87880
88951
|
ok = true;
|
87881
88952
|
} else {
|
87882
88953
|
alert(this.util.out('Please select an image file.'));
|
@@ -87938,7 +89009,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87938
89009
|
let extension = filename.split('.').pop();
|
87939
89010
|
extension = extension.toLowerCase();
|
87940
89011
|
let ok = false;
|
87941
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
89012
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
87942
89013
|
ok = true;
|
87943
89014
|
} else {
|
87944
89015
|
alert(out('Please select an image file.'));
|
@@ -87967,13 +89038,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
87967
89038
|
let ext = filename.split('.').pop();
|
87968
89039
|
ext = ext.toLowerCase();
|
87969
89040
|
let ok = false;
|
87970
|
-
if (targetAssetType === 'image' && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
89041
|
+
if (targetAssetType === 'image' && (s.includes('base64') || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
87971
89042
|
ok = true;
|
87972
89043
|
} else if (targetAssetType === 'video' && ext === 'mp4') {
|
87973
89044
|
ok = true;
|
87974
89045
|
} else if (targetAssetType === 'audio' && ext === 'mp3') {
|
87975
89046
|
ok = true;
|
87976
|
-
} else if (targetAssetType === 'media' && (ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
89047
|
+
} else if (targetAssetType === 'media' && (s.includes('base64') || ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
|
87977
89048
|
ok = true;
|
87978
89049
|
} else if (targetAssetType === 'all') {
|
87979
89050
|
ok = true;
|
@@ -88011,7 +89082,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88011
89082
|
if (targetAssetType === 'all') {
|
88012
89083
|
ok = true;
|
88013
89084
|
} else if (targetAssetType === 'media') {
|
88014
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
89085
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
|
88015
89086
|
ok = true;
|
88016
89087
|
} else {
|
88017
89088
|
alert(out('Please select an image or video file.'));
|
@@ -88023,7 +89094,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88023
89094
|
alert(out('Please select an mp4 file.'));
|
88024
89095
|
}
|
88025
89096
|
} else if (targetAssetType === 'image') {
|
88026
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
89097
|
+
if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
88027
89098
|
ok = true;
|
88028
89099
|
} else {
|
88029
89100
|
alert(out('Please select an image file.'));
|
@@ -88747,6 +89818,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88747
89818
|
docContainer.innerHTML = '';
|
88748
89819
|
docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
|
88749
89820
|
|
89821
|
+
// set page size
|
89822
|
+
let s;
|
89823
|
+
const elm = docContainer.querySelector('[data-pagesize]');
|
89824
|
+
if (elm) {
|
89825
|
+
s = elm.getAttribute('data-pagesize');
|
89826
|
+
} else {
|
89827
|
+
if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
|
89828
|
+
s = localStorage.getItem('_pagesize');
|
89829
|
+
} else {
|
89830
|
+
s = this.pageSize || '';
|
89831
|
+
}
|
89832
|
+
}
|
89833
|
+
this.setPageSize(s);
|
89834
|
+
this.applyBehaviorCanvas();
|
88750
89835
|
const builders = docContainer.querySelectorAll(this.container);
|
88751
89836
|
builders.forEach(builder => {
|
88752
89837
|
this.applyBehaviorOn(builder);
|
@@ -88956,7 +90041,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
88956
90041
|
url = elm.getAttribute('data-modal-url');
|
88957
90042
|
let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
|
88958
90043
|
|
88959
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
90044
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
88960
90045
|
this.lightbox.openImage(url, theme, color);
|
88961
90046
|
} else if (extension === 'mp4') {
|
88962
90047
|
this.lightbox.openVideo(url, 'dark', color);
|
@@ -89286,7 +90371,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89286
90371
|
let theme = link.getAttribute('data-modal-theme');
|
89287
90372
|
if (!theme) theme = 'light';
|
89288
90373
|
const color = elm.getAttribute('data-modal-color');
|
89289
|
-
if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
90374
|
+
if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
|
89290
90375
|
this.lightbox.openImage(url, theme, color);
|
89291
90376
|
e.preventDefault();
|
89292
90377
|
return false;
|
@@ -89397,6 +90482,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89397
90482
|
if (this.activeImage) {
|
89398
90483
|
this.util.hideControls(); //deleting an image should also clear the visible image tool (and resizer).
|
89399
90484
|
}
|
90485
|
+
|
90486
|
+
col.querySelectorAll('.is-social').forEach(elm => {
|
90487
|
+
elm.removeAttribute('contentEditable'); // Return back the div.is-social (See: Prevent div.is-social gets deleted)
|
90488
|
+
});
|
89400
90489
|
}
|
89401
90490
|
|
89402
90491
|
this.oriLen = col.textContent.length; // get character length
|
@@ -89720,6 +90809,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
89720
90809
|
}
|
89721
90810
|
}
|
89722
90811
|
handleCellKeyup(col, e) {
|
90812
|
+
if (e.which === 46 || e.which === 8) {
|
90813
|
+
col.querySelectorAll('.is-social').forEach(elm => {
|
90814
|
+
elm.contentEditable = false; // Prevent div.is-social gets deleted while deleting its next element
|
90815
|
+
});
|
90816
|
+
}
|
90817
|
+
|
89723
90818
|
if (this.dom.textSelection()) {
|
89724
90819
|
if (e.keyCode === '38') {
|
89725
90820
|
// Up arrow
|
@@ -90275,6 +91370,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
90275
91370
|
});
|
90276
91371
|
var html = result[0].html;
|
90277
91372
|
var noedit = result[0].noedit;
|
91373
|
+
const occurrences = this.dom.countOccurrences(html, 'column');
|
90278
91374
|
var bSnippet;
|
90279
91375
|
if (html.indexOf('"row') === -1) {
|
90280
91376
|
bSnippet = true; // Just snippet (without row/column grid)
|
@@ -90328,8 +91424,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
90328
91424
|
// Clean snippet from sortable related code
|
90329
91425
|
itemEl.removeAttribute('draggable');
|
90330
91426
|
this.dom.removeClass(itemEl, 'snippet-item');
|
91427
|
+
let bw = '';
|
91428
|
+
if (this.page && this.page === '.is-wrapper') {
|
91429
|
+
bw = '800px';
|
91430
|
+
} else {
|
91431
|
+
if (occurrences === 2) {
|
91432
|
+
bw = '800px';
|
91433
|
+
} else if (occurrences >= 3) {
|
91434
|
+
bw = '800px';
|
91435
|
+
} else {
|
91436
|
+
bw = '540px';
|
91437
|
+
}
|
91438
|
+
}
|
90331
91439
|
const blockTemplate = `
|
90332
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
91440
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
90333
91441
|
<div class="is-container container-new leading-12 size-17">
|
90334
91442
|
[%CONTENT%]
|
90335
91443
|
</div>
|
@@ -90366,8 +91474,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
90366
91474
|
var range = document.createRange();
|
90367
91475
|
range.setStart(itemEl, 0);
|
90368
91476
|
itemEl.appendChild(range.createContextualFragment(html));
|
91477
|
+
let bw = '';
|
91478
|
+
if (this.page && this.page === '.is-wrapper') {
|
91479
|
+
bw = '800px';
|
91480
|
+
} else {
|
91481
|
+
if (occurrences === 2) {
|
91482
|
+
bw = '800px';
|
91483
|
+
} else if (occurrences >= 3) {
|
91484
|
+
bw = '800px';
|
91485
|
+
} else {
|
91486
|
+
bw = '540px';
|
91487
|
+
}
|
91488
|
+
}
|
90369
91489
|
const blockTemplate = `
|
90370
|
-
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width:
|
91490
|
+
<div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
|
90371
91491
|
<div class="is-container container-new leading-12 size-17">
|
90372
91492
|
[%CONTENT%]
|
90373
91493
|
</div>
|