@innovastudio/contentbox 1.6.93 → 1.6.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -666,14 +666,15 @@ function out(s, alt) {
|
|
|
666
666
|
|
|
667
667
|
class CustomSelect$1 {
|
|
668
668
|
constructor(selector, config = {}) {
|
|
669
|
-
this.select = document.querySelector(selector);
|
|
669
|
+
this.select = document.querySelector(selector);
|
|
670
|
+
this.uniqueId = `custom_select_${Date.now()}_${Math.floor(Math.random() * 1000)}`; // Construct
|
|
670
671
|
|
|
671
672
|
const template = `
|
|
672
673
|
<div class="select-styled" tabindex="0">
|
|
673
674
|
<span></span>
|
|
674
675
|
<span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
|
|
675
676
|
</div>
|
|
676
|
-
<input type="text">
|
|
677
|
+
<input type="text" id="_${this.uniqueId}">
|
|
677
678
|
<ul class="select-options" aria-haspopup="listbox">
|
|
678
679
|
</ul>
|
|
679
680
|
`;
|
|
@@ -7155,26 +7156,6 @@ class EditBox {
|
|
|
7155
7156
|
modalEditBox.style.display = 'flex';
|
|
7156
7157
|
document.body.classList.add('box-modal-open'); // see .box-modal-open (gives outline to div.is-container when Box Settings is opened)
|
|
7157
7158
|
|
|
7158
|
-
/*
|
|
7159
|
-
// Experimental
|
|
7160
|
-
modalEditBox.style.display = 'flex';
|
|
7161
|
-
document.body.classList.add('side-open');
|
|
7162
|
-
let panel = modalEditBox.querySelector('.is-modal-content');
|
|
7163
|
-
setTimeout(()=>{
|
|
7164
|
-
this.builder.showModal(modalEditBox, false, ()=>{
|
|
7165
|
-
dom.removeClass(activeBox, 'box-active');
|
|
7166
|
-
|
|
7167
|
-
this.builder.showTools();
|
|
7168
|
-
document.body.classList.remove('side-open');
|
|
7169
|
-
this.builder.wrapperEl.style.transition = 'none';
|
|
7170
|
-
setTimeout(()=>{
|
|
7171
|
-
modalEditBox.style.display = '';
|
|
7172
|
-
this.builder.wrapperEl.style.transition = '';
|
|
7173
|
-
}, 200);
|
|
7174
|
-
});
|
|
7175
|
-
}, 10);
|
|
7176
|
-
*/
|
|
7177
|
-
|
|
7178
7159
|
modalEditBox.focus();
|
|
7179
7160
|
} //edit
|
|
7180
7161
|
|
|
@@ -10720,7 +10701,7 @@ class PanelText {
|
|
|
10720
10701
|
</div>
|
|
10721
10702
|
|
|
10722
10703
|
<label class="label checkbox flexgrow mt-2">
|
|
10723
|
-
<input type="checkbox" class="chk-flexgrow" />
|
|
10704
|
+
<input type="checkbox" class="chk-flexgrow" id="_chk_flexgrow" />
|
|
10724
10705
|
<span>${out('Grow')}</span>
|
|
10725
10706
|
</label>
|
|
10726
10707
|
</div>
|
|
@@ -11543,13 +11524,18 @@ class PanelText {
|
|
|
11543
11524
|
class PanelImage {
|
|
11544
11525
|
constructor(panel, builder) {
|
|
11545
11526
|
this.builder = builder;
|
|
11527
|
+
|
|
11528
|
+
this.random = () => {
|
|
11529
|
+
return `${Math.floor(Math.random() * 1000)}`;
|
|
11530
|
+
};
|
|
11531
|
+
|
|
11546
11532
|
let html = `
|
|
11547
11533
|
<div class="submain">
|
|
11548
11534
|
<div class="asset-preview"></div>
|
|
11549
11535
|
|
|
11550
11536
|
<label class="label mt-3">
|
|
11551
11537
|
<div>${out('Source')}:</div>
|
|
11552
|
-
<input type="text" class="inp-src">
|
|
11538
|
+
<input type="text" class="inp-src" id="_inp_src_${this.random()}">
|
|
11553
11539
|
</label>
|
|
11554
11540
|
|
|
11555
11541
|
<div class="group mt-4">
|
|
@@ -11571,7 +11557,7 @@ class PanelImage {
|
|
|
11571
11557
|
|
|
11572
11558
|
<label class="label mt-2">
|
|
11573
11559
|
<div>${out('Title')}:</div>
|
|
11574
|
-
<input type="text" class="inp-title">
|
|
11560
|
+
<input type="text" class="inp-title" id="_inp_title_${this.random()}">
|
|
11575
11561
|
</label>
|
|
11576
11562
|
</div>
|
|
11577
11563
|
`;
|
|
@@ -13174,7 +13160,10 @@ class PanelBox {
|
|
|
13174
13160
|
<button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
|
|
13175
13161
|
</div>
|
|
13176
13162
|
|
|
13177
|
-
<div
|
|
13163
|
+
<div>
|
|
13164
|
+
<input type="range" min="300" max="2700" value="300" step="20" class="inp-content-width is-rangeslider" style="max-width:220px">
|
|
13165
|
+
</div>
|
|
13166
|
+
<div class="group contentsize" style="flex-flow: wrap; display: none">
|
|
13178
13167
|
<button data-content-size="500">500</button>
|
|
13179
13168
|
<button data-content-size="600">600</button>
|
|
13180
13169
|
<button data-content-size="700">700</button>
|
|
@@ -13654,7 +13643,8 @@ class PanelBox {
|
|
|
13654
13643
|
this.btnAccordionText.style.display = 'none';
|
|
13655
13644
|
this.btnAccordionText.nextElementSibling.style.display = 'none';
|
|
13656
13645
|
this.divDefaultTextColor.style.display = 'none';
|
|
13657
|
-
});
|
|
13646
|
+
}); // Content Size (old buttons)
|
|
13647
|
+
|
|
13658
13648
|
const btnContentSize = panel.querySelectorAll('[data-content-size]');
|
|
13659
13649
|
btnContentSize.forEach(btn => {
|
|
13660
13650
|
btn.addEventListener('click', () => {
|
|
@@ -13671,7 +13661,26 @@ class PanelBox {
|
|
|
13671
13661
|
}
|
|
13672
13662
|
});
|
|
13673
13663
|
});
|
|
13674
|
-
});
|
|
13664
|
+
}); // Content Size (new slider)
|
|
13665
|
+
|
|
13666
|
+
const inpContentSize = panel.querySelector('.inp-content-width');
|
|
13667
|
+
|
|
13668
|
+
inpContentSize.onfocus = () => {
|
|
13669
|
+
this.builder.editor.saveForUndo();
|
|
13670
|
+
};
|
|
13671
|
+
|
|
13672
|
+
inpContentSize.oninput = () => {
|
|
13673
|
+
//val: 300 - 2700
|
|
13674
|
+
let s = inpContentSize.value;
|
|
13675
|
+
this.box.setContentWidth(s, width => {
|
|
13676
|
+
panel.querySelector('.val-box-size').innerHTML = width;
|
|
13677
|
+
});
|
|
13678
|
+
};
|
|
13679
|
+
|
|
13680
|
+
inpContentSize.onchange = () => {
|
|
13681
|
+
this.builder.onChange();
|
|
13682
|
+
};
|
|
13683
|
+
|
|
13675
13684
|
const btnContentPos = panel.querySelectorAll('[data-content-pos]');
|
|
13676
13685
|
btnContentPos.forEach(btn => {
|
|
13677
13686
|
btn.addEventListener('click', () => {
|
|
@@ -14546,6 +14555,9 @@ class PanelBox {
|
|
|
14546
14555
|
|
|
14547
14556
|
if (val) {
|
|
14548
14557
|
panel.querySelector('.val-box-size').innerHTML = val === 'none' ? '' : val;
|
|
14558
|
+
const inpContentSize = panel.querySelector('.inp-content-width');
|
|
14559
|
+
inpContentSize.value = val; // old buttons
|
|
14560
|
+
|
|
14549
14561
|
const btn = panel.querySelector(`[data-content-size="${val}"]`);
|
|
14550
14562
|
if (btn) btn.classList.add('on');
|
|
14551
14563
|
}
|
|
@@ -16190,7 +16202,7 @@ class PanelSection {
|
|
|
16190
16202
|
|
|
16191
16203
|
<div class="subpanel">
|
|
16192
16204
|
<label class="label mt-2">
|
|
16193
|
-
<div>${out('Add
|
|
16205
|
+
<div>${out('Add ID')}:</div>
|
|
16194
16206
|
<input type="text" class="inp-section-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
|
|
16195
16207
|
</label>
|
|
16196
16208
|
|
|
@@ -16869,7 +16881,7 @@ class PanelColumn {
|
|
|
16869
16881
|
|
|
16870
16882
|
<div class="subpanel">
|
|
16871
16883
|
<label class="label mt-2">
|
|
16872
|
-
<div>${out('Add
|
|
16884
|
+
<div>${out('Add ID')}:</div>
|
|
16873
16885
|
<input type="text" class="inp-column-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
|
|
16874
16886
|
</label>
|
|
16875
16887
|
|
|
@@ -17870,7 +17882,7 @@ class PanelRow {
|
|
|
17870
17882
|
|
|
17871
17883
|
<div class="subpanel">
|
|
17872
17884
|
<label class="label mt-2">
|
|
17873
|
-
<div>${out('Add
|
|
17885
|
+
<div>${out('Add ID')}:</div>
|
|
17874
17886
|
<input type="text" class="inp-row-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
|
|
17875
17887
|
</label>
|
|
17876
17888
|
|
|
@@ -27617,6 +27629,53 @@ const renderQuickAdd = builder => {
|
|
|
27617
27629
|
const util = builder.util;
|
|
27618
27630
|
const builderStuff = builder.builderStuff;
|
|
27619
27631
|
const dom = builder.dom;
|
|
27632
|
+
let quickAddButtons = ['paragraph', 'headline', 'image', 'list', 'heading1', 'heading2', 'heading3', 'heading4', 'quote', 'preformatted', 'button', 'twobutton', 'map', 'youtube', 'video', 'icon', 'svg', 'form', 'table', 'social', 'code', 'spacer']; // default 'svg',
|
|
27633
|
+
|
|
27634
|
+
if (builder.quickAddButtons) {
|
|
27635
|
+
quickAddButtons = builder.quickAddButtons;
|
|
27636
|
+
}
|
|
27637
|
+
const buttonTemplates = {
|
|
27638
|
+
paragraph: `<button title="${util.out('Paragraph')}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${util.out('Paragraph')}</button>`,
|
|
27639
|
+
headline: `<button title="${util.out('Headline')}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${util.out('Headline')}</button>`,
|
|
27640
|
+
image: `<button title="${util.out('Image')}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${util.out('Image')}</button>`,
|
|
27641
|
+
list: `<button title="${util.out('List')}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${util.out('List')}</button>`,
|
|
27642
|
+
heading1: `<button title="${util.out('Heading 1')}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${util.out('Heading 1')}</button>`,
|
|
27643
|
+
heading2: `<button title="${util.out('Heading 2')}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${util.out('Heading 2')}</button>`,
|
|
27644
|
+
heading3: `<button title="${util.out('Heading 3')}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${util.out('Heading 3')}</button>`,
|
|
27645
|
+
heading4: `<button title="${util.out('Heading 4')}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${util.out('Heading 4')}</button>`,
|
|
27646
|
+
quote: `<button title="${util.out('Quote')}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${util.out('Quote')}</button>`,
|
|
27647
|
+
preformatted: `<button style="display:none" title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>`,
|
|
27648
|
+
button: `<button title="${util.out('Button')}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Button')}</button>`,
|
|
27649
|
+
twobutton: `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`,
|
|
27650
|
+
map: `<button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>`,
|
|
27651
|
+
youtube: `<button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>`,
|
|
27652
|
+
video: `<button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>`,
|
|
27653
|
+
audio: `<button title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>`,
|
|
27654
|
+
icon: `<button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>`,
|
|
27655
|
+
svg: `<button title="${util.out('SVG')}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${util.out('SVG')}</button>`,
|
|
27656
|
+
table: `<button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>`,
|
|
27657
|
+
social: `<button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>`,
|
|
27658
|
+
code: `<button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>`,
|
|
27659
|
+
spacer: `<button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>`,
|
|
27660
|
+
form: `<button title="${util.out('Form')}" class="add-form"><span style="display:block;margin:0 0 8px;">
|
|
27661
|
+
<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;fill:none" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-forms"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3" /><path d="M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3" /><path d="M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7" /><path d="M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1" /><path d="M17 12h.01" /><path d="M13 12h.01" /></svg>
|
|
27662
|
+
</span>${util.out('Form')}</button>`,
|
|
27663
|
+
line: `<button title="${util.out('Line')}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${util.out('Line')}</button>`
|
|
27664
|
+
};
|
|
27665
|
+
|
|
27666
|
+
// Filter buttons (backward compatibility)
|
|
27667
|
+
const filteredButtons = quickAddButtons.filter(item => {
|
|
27668
|
+
if (builder.opts.emailMode && item === 'button') return false;
|
|
27669
|
+
if (builder.opts.emailMode && item === 'twobutton') return false;
|
|
27670
|
+
if (!builder.quickAddButtons) {
|
|
27671
|
+
// if not custom specified by user
|
|
27672
|
+
if (!builder.win.FormViewer && item === 'form') return false; // hide 'form' if FormViewer object not found
|
|
27673
|
+
if (builder.win.FormViewer && item === 'svg') return false; // hide 'svg' if 'form' enabled.
|
|
27674
|
+
}
|
|
27675
|
+
|
|
27676
|
+
return true;
|
|
27677
|
+
});
|
|
27678
|
+
let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
|
|
27620
27679
|
let quickadd = builderStuff.querySelector('.quickadd');
|
|
27621
27680
|
if (!quickadd) {
|
|
27622
27681
|
const html = `<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
@@ -27626,34 +27685,11 @@ const renderQuickAdd = builder => {
|
|
|
27626
27685
|
<div class="is-pop-tab-item active" data-value="right">${util.out('Add to Right')}</div>
|
|
27627
27686
|
</div>
|
|
27628
27687
|
<div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">
|
|
27629
|
-
|
|
27630
|
-
<
|
|
27631
|
-
<button title="${util.out('
|
|
27632
|
-
<button title="${util.out('List')}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${util.out('List')}</button>
|
|
27633
|
-
<button title="${util.out('Heading 1')}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${util.out('Heading 1')}</button>
|
|
27634
|
-
<button title="${util.out('Heading 2')}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${util.out('Heading 2')}</button>
|
|
27635
|
-
<button title="${util.out('Heading 3')}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${util.out('Heading 3')}</button>
|
|
27636
|
-
<button title="${util.out('Heading 4')}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${util.out('Heading 4')}</button>
|
|
27637
|
-
<button title="${util.out('Quote')}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${util.out('Quote')}</button>
|
|
27638
|
-
<button style="display:none" title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>
|
|
27639
|
-
${builder.opts.emailMode ? '' : `<button title="${util.out('Button')}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Button')}</button>`}
|
|
27640
|
-
${builder.opts.emailMode ? '' : `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`}
|
|
27641
|
-
<button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>
|
|
27642
|
-
<button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>
|
|
27643
|
-
<button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>
|
|
27644
|
-
<button style="display:none" title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>
|
|
27645
|
-
<button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>
|
|
27646
|
-
<button title="${util.out('SVG')}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${util.out('SVG')}</button>
|
|
27647
|
-
<button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>
|
|
27648
|
-
<button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>
|
|
27649
|
-
<button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>
|
|
27650
|
-
<button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>
|
|
27651
|
-
<button style="display:none" title="${util.out('Line')}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${util.out('Line')}</button>
|
|
27652
|
-
<div class="pop-separator"></div>
|
|
27653
|
-
<button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;">${util.out('More...')}</button>
|
|
27654
|
-
</div>
|
|
27688
|
+
${buttonsHtml}
|
|
27689
|
+
<div class="pop-separator" ${builder.noSnippets ? ' style="display:none"' : ''}></div>
|
|
27690
|
+
<button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;${builder.noSnippets ? 'display:none' : ''}">${util.out('More...')}</button>
|
|
27655
27691
|
</div>
|
|
27656
|
-
|
|
27692
|
+
</div>`;
|
|
27657
27693
|
dom.appendHtml(builderStuff, html);
|
|
27658
27694
|
quickadd = builderStuff.querySelector('.quickadd');
|
|
27659
27695
|
let tabs = quickadd.querySelectorAll('.is-pop-tab-item');
|
|
@@ -27753,7 +27789,7 @@ const renderQuickAdd = builder => {
|
|
|
27753
27789
|
util.addContent(html, mode);
|
|
27754
27790
|
});
|
|
27755
27791
|
elm = quickadd.querySelector('.add-button');
|
|
27756
|
-
|
|
27792
|
+
dom.addEventListener(elm, 'click', () => {
|
|
27757
27793
|
const mode = quickadd.getAttribute('data-mode');
|
|
27758
27794
|
let html = `<div>
|
|
27759
27795
|
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
|
|
@@ -27764,7 +27800,7 @@ const renderQuickAdd = builder => {
|
|
|
27764
27800
|
util.addContent(html, mode);
|
|
27765
27801
|
});
|
|
27766
27802
|
elm = quickadd.querySelector('.add-twobutton');
|
|
27767
|
-
|
|
27803
|
+
dom.addEventListener(elm, 'click', () => {
|
|
27768
27804
|
const mode = quickadd.getAttribute('data-mode');
|
|
27769
27805
|
let html = `<div>
|
|
27770
27806
|
<a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
|
|
@@ -27834,6 +27870,286 @@ const renderQuickAdd = builder => {
|
|
|
27834
27870
|
}
|
|
27835
27871
|
builder.addSnippet(html, bSnippet, noedit);
|
|
27836
27872
|
});
|
|
27873
|
+
elm = quickadd.querySelector('.add-form');
|
|
27874
|
+
dom.addEventListener(elm, 'click', () => {
|
|
27875
|
+
// const mode = quickadd.getAttribute('data-mode');
|
|
27876
|
+
|
|
27877
|
+
let html = `
|
|
27878
|
+
<div class="row">
|
|
27879
|
+
<div class="column" data-noedit
|
|
27880
|
+
data-dialog-width="1600px"
|
|
27881
|
+
data-dialog-height="85vh"
|
|
27882
|
+
data-module="form-builder"
|
|
27883
|
+
data-module-desc="Form Builder"
|
|
27884
|
+
data-html="
|
|
27885
|
+
|
|
27886
|
+
${encodeURIComponent(`
|
|
27887
|
+
<div id="_style_{id}" style="display:none">
|
|
27888
|
+
.animate-spin {
|
|
27889
|
+
animation: spin 1s linear infinite;
|
|
27890
|
+
}
|
|
27891
|
+
@keyframes spin {
|
|
27892
|
+
from {
|
|
27893
|
+
transform: rotate(0deg);
|
|
27894
|
+
}
|
|
27895
|
+
to {
|
|
27896
|
+
transform: rotate(360deg);
|
|
27897
|
+
}
|
|
27898
|
+
}
|
|
27899
|
+
</div>
|
|
27900
|
+
<form id="form_{id}" method="POST" action="/formsubmission" style="padding: 25px 0 20px">
|
|
27901
|
+
<div id="{id}"></div>
|
|
27902
|
+
|
|
27903
|
+
<div id="status_{id}"></div>
|
|
27904
|
+
</form>
|
|
27905
|
+
|
|
27906
|
+
<script>
|
|
27907
|
+
var css = document.querySelector('#_style_{id}').innerHTML;
|
|
27908
|
+
var head = document.getElementsByTagName('head')[0];
|
|
27909
|
+
var s = document.createElement('style');
|
|
27910
|
+
s.appendChild(document.createTextNode(css));
|
|
27911
|
+
head.appendChild(s);
|
|
27912
|
+
|
|
27913
|
+
var docReady = function(fn) {
|
|
27914
|
+
var stateCheck = setInterval(function() {
|
|
27915
|
+
if (document.readyState !== "complete") return;
|
|
27916
|
+
clearInterval(stateCheck);
|
|
27917
|
+
try {
|
|
27918
|
+
fn()
|
|
27919
|
+
} catch (e) {}
|
|
27920
|
+
}, 1);
|
|
27921
|
+
};
|
|
27922
|
+
|
|
27923
|
+
docReady(function() {
|
|
27924
|
+
|
|
27925
|
+
var elm = document.getElementById('{id}');
|
|
27926
|
+
var viewer = new FormViewer(elm, {
|
|
27927
|
+
onChange: (json) => {
|
|
27928
|
+
// console.log(json);
|
|
27929
|
+
},
|
|
27930
|
+
formHeader: true,
|
|
27931
|
+
});
|
|
27932
|
+
|
|
27933
|
+
let json = {
|
|
27934
|
+
"title": "Register for the Tech Conference",
|
|
27935
|
+
"description": "Join us for an insightful and engaging experience.",
|
|
27936
|
+
"elements": [
|
|
27937
|
+
{
|
|
27938
|
+
"title": "Full Name:",
|
|
27939
|
+
"name": "full_name",
|
|
27940
|
+
"type": "short-text",
|
|
27941
|
+
"isRequired": true,
|
|
27942
|
+
"placeholder": "Enter your full name"
|
|
27943
|
+
},
|
|
27944
|
+
{
|
|
27945
|
+
"title": "Ticket Type:",
|
|
27946
|
+
"name": "ticket_type",
|
|
27947
|
+
"type": "select",
|
|
27948
|
+
"isRequired": true,
|
|
27949
|
+
"choices": [
|
|
27950
|
+
"Standard Admission",
|
|
27951
|
+
"VIP Admission",
|
|
27952
|
+
"Student Discount"
|
|
27953
|
+
]
|
|
27954
|
+
},
|
|
27955
|
+
{
|
|
27956
|
+
"title": "Select the sessions you’re interested in:",
|
|
27957
|
+
"name": "select_the_sessions_youre_interested_in",
|
|
27958
|
+
"type": "multi-select",
|
|
27959
|
+
"choices": [
|
|
27960
|
+
"Keynote Speech",
|
|
27961
|
+
"AI Workshop",
|
|
27962
|
+
"Networking Session"
|
|
27963
|
+
]
|
|
27964
|
+
},
|
|
27965
|
+
{
|
|
27966
|
+
"title": "Are you attending the networking dinner?",
|
|
27967
|
+
"name": "are_you_attending_the_networking_dinner",
|
|
27968
|
+
"type": "switch"
|
|
27969
|
+
},
|
|
27970
|
+
{
|
|
27971
|
+
"title": "Email:",
|
|
27972
|
+
"name": "email",
|
|
27973
|
+
"type": "email",
|
|
27974
|
+
"isRequired": true,
|
|
27975
|
+
"placeholder": "Enter your email"
|
|
27976
|
+
}
|
|
27977
|
+
],
|
|
27978
|
+
"useSubmitButton": true,
|
|
27979
|
+
"submitText": "Submit"
|
|
27980
|
+
};
|
|
27981
|
+
|
|
27982
|
+
viewer.view(json); // Render form
|
|
27983
|
+
|
|
27984
|
+
const form = document.querySelector('#form_{id}');
|
|
27985
|
+
|
|
27986
|
+
var statusInfo = document.querySelector('#status_{id}');
|
|
27987
|
+
|
|
27988
|
+
/*
|
|
27989
|
+
form.addEventListener('submit', async (event) => {
|
|
27990
|
+
|
|
27991
|
+
event.preventDefault();
|
|
27992
|
+
|
|
27993
|
+
const form = event.target;
|
|
27994
|
+
const formData = new FormData(form);
|
|
27995
|
+
|
|
27996
|
+
fetch('/formsubmission', {
|
|
27997
|
+
method: 'POST',
|
|
27998
|
+
body: formData,
|
|
27999
|
+
})
|
|
28000
|
+
.then(response=>response.json())
|
|
28001
|
+
.then(response=>{
|
|
28002
|
+
console.log(response);
|
|
28003
|
+
});
|
|
28004
|
+
});
|
|
28005
|
+
*/
|
|
28006
|
+
|
|
28007
|
+
async function handleSubmit(event) {
|
|
28008
|
+
event.preventDefault();
|
|
28009
|
+
|
|
28010
|
+
const btnSend = event.target;
|
|
28011
|
+
|
|
28012
|
+
btnSend.innerHTML = '<span class="loading-icon"><svg class="animate-spin" style="margin-right:7px;width:20px;height:20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>Submit';
|
|
28013
|
+
|
|
28014
|
+
var data = new FormData(event.target);
|
|
28015
|
+
fetch(event.target.action, {
|
|
28016
|
+
method: form.method,
|
|
28017
|
+
body: data,
|
|
28018
|
+
headers: {
|
|
28019
|
+
'Accept': 'application/json'
|
|
28020
|
+
}
|
|
28021
|
+
}).then(response => {
|
|
28022
|
+
if (response.ok) {
|
|
28023
|
+
statusInfo.innerHTML = '<div class="text-center pt-4"><i class="bi bi-send-check size-64"></i>' +
|
|
28024
|
+
'</div><div class="leading-11 text-center size-38 pb-4">Thanks for your submission!</div>';
|
|
28025
|
+
form.reset();
|
|
28026
|
+
} else {
|
|
28027
|
+
response.json().then(data => {
|
|
28028
|
+
if (Object.hasOwn(data, 'errors')) {
|
|
28029
|
+
statusInfo.innerHTML = data['errors'].map(error => error['message']).join(', ');
|
|
28030
|
+
} else {
|
|
28031
|
+
statusInfo.innerHTML = '<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>';
|
|
28032
|
+
}
|
|
28033
|
+
});
|
|
28034
|
+
}
|
|
28035
|
+
|
|
28036
|
+
btnSend.innerHTML = 'Submit';
|
|
28037
|
+
}).catch(error => {
|
|
28038
|
+
statusInfo.innerHTML = '<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>';
|
|
28039
|
+
|
|
28040
|
+
btnSend.innerHTML = 'Submit';
|
|
28041
|
+
});
|
|
28042
|
+
}
|
|
28043
|
+
|
|
28044
|
+
viewer.settings.onSubmit = handleSubmit;
|
|
28045
|
+
|
|
28046
|
+
});
|
|
28047
|
+
</script>
|
|
28048
|
+
|
|
28049
|
+
`)}
|
|
28050
|
+
|
|
28051
|
+
"
|
|
28052
|
+
|
|
28053
|
+
data-settings="
|
|
28054
|
+
|
|
28055
|
+
${encodeURIComponent(`
|
|
28056
|
+
{
|
|
28057
|
+
"json": {
|
|
28058
|
+
"title": "Register for the Tech Conference",
|
|
28059
|
+
"description": "Join us for an insightful and engaging experience.",
|
|
28060
|
+
"elements": [
|
|
28061
|
+
{
|
|
28062
|
+
"title": "Full Name:",
|
|
28063
|
+
"name": "full_name",
|
|
28064
|
+
"type": "short-text",
|
|
28065
|
+
"isRequired": true,
|
|
28066
|
+
"placeholder": "Enter your full name"
|
|
28067
|
+
},
|
|
28068
|
+
{
|
|
28069
|
+
"title": "Ticket Type:",
|
|
28070
|
+
"name": "ticket_type",
|
|
28071
|
+
"type": "select",
|
|
28072
|
+
"isRequired": true,
|
|
28073
|
+
"choices": [
|
|
28074
|
+
"Standard Admission",
|
|
28075
|
+
"VIP Admission",
|
|
28076
|
+
"Student Discount"
|
|
28077
|
+
]
|
|
28078
|
+
},
|
|
28079
|
+
{
|
|
28080
|
+
"title": "Select the sessions you’re interested in:",
|
|
28081
|
+
"name": "select_the_sessions_youre_interested_in",
|
|
28082
|
+
"type": "multi-select",
|
|
28083
|
+
"choices": [
|
|
28084
|
+
"Keynote Speech",
|
|
28085
|
+
"AI Workshop",
|
|
28086
|
+
"Networking Session"
|
|
28087
|
+
]
|
|
28088
|
+
},
|
|
28089
|
+
{
|
|
28090
|
+
"title": "Are you attending the networking dinner?",
|
|
28091
|
+
"name": "are_you_attending_the_networking_dinner",
|
|
28092
|
+
"type": "switch"
|
|
28093
|
+
},
|
|
28094
|
+
{
|
|
28095
|
+
"title": "Email:",
|
|
28096
|
+
"name": "email",
|
|
28097
|
+
"type": "email",
|
|
28098
|
+
"isRequired": true,
|
|
28099
|
+
"placeholder": "Enter your email"
|
|
28100
|
+
}
|
|
28101
|
+
],
|
|
28102
|
+
"useSubmitButton": true,
|
|
28103
|
+
"submitText": "Submit"
|
|
28104
|
+
},
|
|
28105
|
+
"thankYouMessage": "Thanks for your submission!",
|
|
28106
|
+
"errorMessage": "Oops! There was a problem submitting your form.",
|
|
28107
|
+
"buttonText": "Submit",
|
|
28108
|
+
"hideHeader": false,
|
|
28109
|
+
"formAction": "/formsubmission"
|
|
28110
|
+
}
|
|
28111
|
+
`)}
|
|
28112
|
+
|
|
28113
|
+
">
|
|
28114
|
+
|
|
28115
|
+
</div>
|
|
28116
|
+
</div>
|
|
28117
|
+
`;
|
|
28118
|
+
let noedit = true;
|
|
28119
|
+
let bSnippet = false;
|
|
28120
|
+
let snippetPathReplace = builder.opts.snippetPathReplace;
|
|
28121
|
+
|
|
28122
|
+
// Convert snippet into your defined 12 columns grid
|
|
28123
|
+
let rowClass = builder.opts.row; //row
|
|
28124
|
+
let colClass = builder.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
|
|
28125
|
+
if (rowClass !== '' && colClass.length === 12) {
|
|
28126
|
+
// html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
|
|
28127
|
+
html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
|
|
28128
|
+
html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
|
|
28129
|
+
html = html.replace(new RegExp('column full', 'g'), colClass[11]);
|
|
28130
|
+
html = html.replace(new RegExp('column half', 'g'), colClass[5]);
|
|
28131
|
+
html = html.replace(new RegExp('column third', 'g'), colClass[3]);
|
|
28132
|
+
html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
|
|
28133
|
+
html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
|
|
28134
|
+
html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
|
|
28135
|
+
html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
|
|
28136
|
+
html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
|
|
28137
|
+
html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
|
|
28138
|
+
html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
|
|
28139
|
+
}
|
|
28140
|
+
html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
|
|
28141
|
+
|
|
28142
|
+
if (builder.opts.onAdd) {
|
|
28143
|
+
html = builder.opts.onAdd(html);
|
|
28144
|
+
}
|
|
28145
|
+
if (snippetPathReplace.length > 0) {
|
|
28146
|
+
if (snippetPathReplace[0] !== '') {
|
|
28147
|
+
let regex = new RegExp(snippetPathReplace[0], 'g');
|
|
28148
|
+
html = html.replace(regex, snippetPathReplace[1]);
|
|
28149
|
+
}
|
|
28150
|
+
}
|
|
28151
|
+
builder.addSnippet(html, bSnippet, noedit);
|
|
28152
|
+
});
|
|
27837
28153
|
elm = quickadd.querySelector('.add-table');
|
|
27838
28154
|
dom.addEventListener(elm, 'click', () => {
|
|
27839
28155
|
const mode = quickadd.getAttribute('data-mode');
|
|
@@ -31139,6 +31455,9 @@ class Util$1 {
|
|
|
31139
31455
|
const dom = this.dom;
|
|
31140
31456
|
pop.style.display = '';
|
|
31141
31457
|
dom.removeClass(pop, 'active');
|
|
31458
|
+
this.builder.doc.activeElement.blur();
|
|
31459
|
+
document.activeElement.blur();
|
|
31460
|
+
// this.builder.doc.body.focus();
|
|
31142
31461
|
pop.setAttribute('aria-hidden', true);
|
|
31143
31462
|
|
|
31144
31463
|
// pop.removeEventListener('keydown', this.handlePopKeyDown);
|
|
@@ -31333,6 +31652,9 @@ class Util$1 {
|
|
|
31333
31652
|
}
|
|
31334
31653
|
|
|
31335
31654
|
hideModal(modal) {
|
|
31655
|
+
this.builder.doc.activeElement.blur();
|
|
31656
|
+
document.activeElement.blur();
|
|
31657
|
+
// this.builder.doc.body.focus();
|
|
31336
31658
|
modal.setAttribute('aria-hidden', true);
|
|
31337
31659
|
|
|
31338
31660
|
/* Disable Modal Animation */
|
|
@@ -31998,6 +32320,10 @@ class Util$1 {
|
|
|
31998
32320
|
cellElement = rowElement.querySelector('div');
|
|
31999
32321
|
if (cellElement) cellElement.click(); //change active block to the newly created
|
|
32000
32322
|
|
|
32323
|
+
const builderStuff = this.builder.builderStuff;
|
|
32324
|
+
let quickadd = builderStuff.querySelector('.quickadd');
|
|
32325
|
+
if (quickadd) this.hidePop(quickadd); // hide pop
|
|
32326
|
+
|
|
32001
32327
|
// On Add Snippet from Modal
|
|
32002
32328
|
const modules = this.builder.doc.querySelectorAll('.dummy-module');
|
|
32003
32329
|
modules.forEach(module => {
|
|
@@ -32708,8 +33034,8 @@ class Util$1 {
|
|
|
32708
33034
|
const newPos = this.getElementPosition(btnCellMore);
|
|
32709
33035
|
let top = newPos.top;
|
|
32710
33036
|
let left = newPos.left;
|
|
32711
|
-
columnMore.style.top = top + 35 + 'px';
|
|
32712
|
-
columnMore.style.left = left - 7 + 'px';
|
|
33037
|
+
columnMore.style.top = top + 35 + window.pageYOffset + 'px';
|
|
33038
|
+
columnMore.style.left = left - 7 + window.pageXOffset + 'px';
|
|
32713
33039
|
setTimeout(() => {
|
|
32714
33040
|
columnMore.classList.remove('transition1');
|
|
32715
33041
|
}, 300);
|
|
@@ -41970,7 +42296,7 @@ const prepareSvgIcons = builder => {
|
|
|
41970
42296
|
<path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
|
|
41971
42297
|
</symbol>
|
|
41972
42298
|
|
|
41973
|
-
<symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42299
|
+
<symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
41974
42300
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
41975
42301
|
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
|
|
41976
42302
|
<path d="M20 4v5h-5"></path>
|
|
@@ -42048,7 +42374,7 @@ const prepareSvgIcons = builder => {
|
|
|
42048
42374
|
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
42049
42375
|
<path d="M20.2 20.2l1.8 1.8"></path>
|
|
42050
42376
|
</symbol>
|
|
42051
|
-
<symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="
|
|
42377
|
+
<symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42052
42378
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42053
42379
|
<path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
|
|
42054
42380
|
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
@@ -42227,7 +42553,7 @@ const prepareSvgIcons = builder => {
|
|
|
42227
42553
|
<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" />
|
|
42228
42554
|
</symbol>
|
|
42229
42555
|
|
|
42230
|
-
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="
|
|
42556
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42231
42557
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42232
42558
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
42233
42559
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
@@ -42242,6 +42568,47 @@ const prepareSvgIcons = builder => {
|
|
|
42242
42568
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42243
42569
|
<path d="M5 12l14 0"></path>
|
|
42244
42570
|
</symbol>
|
|
42571
|
+
|
|
42572
|
+
<symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42573
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
|
42574
|
+
</symbol>
|
|
42575
|
+
<symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42576
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42577
|
+
<path d="M18 6l-12 12"></path>
|
|
42578
|
+
<path d="M6 6l12 12"></path>
|
|
42579
|
+
</symbol>
|
|
42580
|
+
<symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42581
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42582
|
+
<path d="M4 7l16 0"></path>
|
|
42583
|
+
<path d="M10 11l0 6"></path>
|
|
42584
|
+
<path d="M14 11l0 6"></path>
|
|
42585
|
+
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
|
|
42586
|
+
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
|
|
42587
|
+
</symbol>
|
|
42588
|
+
<symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42589
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
|
|
42590
|
+
</symbol>
|
|
42591
|
+
<symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42592
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42593
|
+
<path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
|
|
42594
|
+
<line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
|
|
42595
|
+
</symbol>
|
|
42596
|
+
<symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42597
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42598
|
+
<path d="M9 15l6 -6"></path>
|
|
42599
|
+
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
|
|
42600
|
+
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
|
|
42601
|
+
</symbol>
|
|
42602
|
+
<symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42603
|
+
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
|
|
42604
|
+
</symbol>
|
|
42605
|
+
<symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42606
|
+
<path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
|
|
42607
|
+
</symbol>
|
|
42608
|
+
<symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
42609
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
42610
|
+
<path d="M5 12l14 0"></path>
|
|
42611
|
+
</symbol>
|
|
42245
42612
|
</svg>`;
|
|
42246
42613
|
builder.dom.appendHtml(builder.builderStuff, html);
|
|
42247
42614
|
};
|
|
@@ -43280,8 +43647,8 @@ class RowTool$1 {
|
|
|
43280
43647
|
}
|
|
43281
43648
|
*/
|
|
43282
43649
|
const newPos = this.builder.util.getElementPosition(elm);
|
|
43283
|
-
let top = newPos.top;
|
|
43284
|
-
let left = newPos.left;
|
|
43650
|
+
let top = newPos.top + window.pageYOffset;
|
|
43651
|
+
let left = newPos.left + window.pageXOffset;
|
|
43285
43652
|
|
|
43286
43653
|
// const w = rowMore.offsetWidth;
|
|
43287
43654
|
rowMore.style.top = top - 8 + 'px';
|
|
@@ -44003,14 +44370,14 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
|
44003
44370
|
if (builder.opts.snippetModal) {
|
|
44004
44371
|
builder.opts.snippetList = '#divSnippetWindow';
|
|
44005
44372
|
let html = `
|
|
44006
|
-
<div class="is-modal active is-modal-content snippetwindow scroll-darker" tabindex="-1" role="dialog" aria-modal="true"
|
|
44373
|
+
<div class="is-modal active is-modal-content snippetwindow scroll-darker" tabindex="-1" role="dialog" aria-modal="true">
|
|
44007
44374
|
<div class="is-modal-bar is-draggable">
|
|
44008
44375
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
|
44009
44376
|
</div>
|
|
44010
44377
|
<div id="divSnippetWindow">
|
|
44011
44378
|
</div>
|
|
44012
44379
|
</div>
|
|
44013
|
-
`;
|
|
44380
|
+
`; // aria-hidden="true"
|
|
44014
44381
|
let snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
|
|
44015
44382
|
if (!snippetModal) {
|
|
44016
44383
|
dom.appendHtml(builder.builderStuff, html);
|
|
@@ -44019,6 +44386,9 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
|
44019
44386
|
builder.draggable('.snippetwindow .is-draggable');
|
|
44020
44387
|
const btnClose = snippetModal.querySelector('.is-modal-close');
|
|
44021
44388
|
btnClose.addEventListener('click', () => {
|
|
44389
|
+
builder.doc.activeElement.blur();
|
|
44390
|
+
// builder.doc.body.focus();
|
|
44391
|
+
snippetModal.setAttribute('aria-hidden', true);
|
|
44022
44392
|
snippetModal.classList.remove('active');
|
|
44023
44393
|
});
|
|
44024
44394
|
if (builder.snippetModalLeft) {
|
|
@@ -71644,12 +72014,14 @@ class Image$1 {
|
|
|
71644
72014
|
let html = `
|
|
71645
72015
|
<div id="divImageTool" class="is-tool">
|
|
71646
72016
|
<div role="button" tabindex="0" class="image-embed" style="${this.builder.opts.imageEmbed ? '' : 'display:none;'}width:40px;height:40px;overflow:hidden;">
|
|
71647
|
-
<div style="position:absolute;width:100%;height:100%;"
|
|
72017
|
+
<div style="position:absolute;width:100%;height:100%;">
|
|
72018
|
+
<svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 16px;height: 16px;"><use xlink:href="#ion-image"></use></svg>
|
|
72019
|
+
</div>
|
|
71648
72020
|
<input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
|
|
71649
72021
|
</div>
|
|
71650
|
-
<button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#
|
|
71651
|
-
<button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;
|
|
71652
|
-
<button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:
|
|
72022
|
+
<button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg></button>
|
|
72023
|
+
<button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-folder2"></use></svg></button>
|
|
72024
|
+
<button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg></button>
|
|
71653
72025
|
</div>
|
|
71654
72026
|
<div id="divImageProgress">
|
|
71655
72027
|
<div>
|
|
@@ -74989,10 +75361,18 @@ class Hyperlink {
|
|
|
74989
75361
|
let linkTool = builderStuff.querySelector('#divLinkTool');
|
|
74990
75362
|
if (!linkTool) {
|
|
74991
75363
|
let html = `<div id="divLinkTool" class="is-tool">
|
|
74992
|
-
|
|
74993
|
-
|
|
74994
|
-
|
|
74995
|
-
<button title="${util.out('
|
|
75364
|
+
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
|
|
75365
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
|
|
75366
|
+
</button>
|
|
75367
|
+
<button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
|
|
75368
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
|
|
75369
|
+
</button>
|
|
75370
|
+
<button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
|
|
75371
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
|
|
75372
|
+
</button>
|
|
75373
|
+
<button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
|
|
75374
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
|
|
75375
|
+
</button>
|
|
74996
75376
|
</div>
|
|
74997
75377
|
`;
|
|
74998
75378
|
dom.appendHtml(builderStuff, html);
|
|
@@ -75584,9 +75964,15 @@ class Button {
|
|
|
75584
75964
|
let buttonTool = builderStuff.querySelector('#divButtonTool');
|
|
75585
75965
|
if (!buttonTool) {
|
|
75586
75966
|
let html = `<div id="divButtonTool" class="is-tool">
|
|
75587
|
-
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"
|
|
75588
|
-
|
|
75589
|
-
|
|
75967
|
+
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
|
|
75968
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
|
|
75969
|
+
</button>
|
|
75970
|
+
<button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
|
|
75971
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
|
|
75972
|
+
</button>
|
|
75973
|
+
<button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
|
|
75974
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
|
|
75975
|
+
</button>
|
|
75590
75976
|
</div>
|
|
75591
75977
|
`;
|
|
75592
75978
|
dom.appendHtml(builderStuff, html);
|
|
@@ -75718,8 +76104,8 @@ class Spacer {
|
|
|
75718
76104
|
if (!spacerTool) {
|
|
75719
76105
|
let html = `
|
|
75720
76106
|
<div id="divSpacerTool" class="is-tool is-spacer-tool">
|
|
75721
|
-
<button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#
|
|
75722
|
-
<button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
76107
|
+
<button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
|
|
76108
|
+
<button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
|
|
75723
76109
|
</div>
|
|
75724
76110
|
`;
|
|
75725
76111
|
dom.appendHtml(builderStuff, html);
|
|
@@ -75879,7 +76265,7 @@ class Module {
|
|
|
75879
76265
|
let html = `
|
|
75880
76266
|
<div class="is-tool is-module-tool">
|
|
75881
76267
|
<button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
|
|
75882
|
-
<button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#
|
|
76268
|
+
<button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
75883
76269
|
</div>
|
|
75884
76270
|
`;
|
|
75885
76271
|
dom.appendHtml(builderStuff, html);
|
|
@@ -75912,7 +76298,7 @@ class Module {
|
|
|
75912
76298
|
<input id="hidContentModuleCode" type="hidden" />
|
|
75913
76299
|
<input id="hidContentModuleSettings" type="hidden" />
|
|
75914
76300
|
|
|
75915
|
-
<div class="is-modal custommodule" tabindex="-1" role="dialog" aria-modal="true"
|
|
76301
|
+
<div class="is-modal custommodule" tabindex="-1" role="dialog" aria-modal="true">
|
|
75916
76302
|
<div class="is-modal-content">
|
|
75917
76303
|
<div class="is-modal-bar is-draggable">
|
|
75918
76304
|
${util.out('Module Settings')}
|
|
@@ -75925,7 +76311,8 @@ class Module {
|
|
|
75925
76311
|
</div>
|
|
75926
76312
|
</div>
|
|
75927
76313
|
</div>
|
|
75928
|
-
`;
|
|
76314
|
+
`; // aria-hidden="true"
|
|
76315
|
+
|
|
75929
76316
|
dom.appendHtml(builderStuff, html);
|
|
75930
76317
|
moduleModal = builderStuff.querySelector('.is-modal.custommodule');
|
|
75931
76318
|
this.moduleModal = moduleModal;
|
|
@@ -76035,6 +76422,11 @@ class Module {
|
|
|
76035
76422
|
w = '1500px';
|
|
76036
76423
|
h = '80vh';
|
|
76037
76424
|
}
|
|
76425
|
+
|
|
76426
|
+
// if(modulename==='form-builder') {
|
|
76427
|
+
// moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
|
|
76428
|
+
// }
|
|
76429
|
+
moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
|
|
76038
76430
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
|
|
76039
76431
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
|
|
76040
76432
|
let btnClose = moduleModal.querySelector('.is-modal-close');
|
|
@@ -76129,7 +76521,7 @@ class Code {
|
|
|
76129
76521
|
if (!codeTool) {
|
|
76130
76522
|
let html = `
|
|
76131
76523
|
<div class="is-tool is-code-tool">
|
|
76132
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}"
|
|
76524
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
76133
76525
|
</div>
|
|
76134
76526
|
`;
|
|
76135
76527
|
dom.appendHtml(builderStuff, html);
|
|
@@ -76257,7 +76649,7 @@ class Iframe {
|
|
|
76257
76649
|
if (!iframeTool) {
|
|
76258
76650
|
let html = `
|
|
76259
76651
|
<div class="is-tool is-iframe-tool">
|
|
76260
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
76652
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
76261
76653
|
</div>
|
|
76262
76654
|
`;
|
|
76263
76655
|
dom.appendHtml(builderStuff, html);
|
|
@@ -76417,7 +76809,7 @@ class Table {
|
|
|
76417
76809
|
//<div class="is-modal-bar is-draggable" style="background:#f9f9f9;"></div>
|
|
76418
76810
|
let html = `
|
|
76419
76811
|
<div class="is-tool is-table-tool">
|
|
76420
|
-
<button title="${util.out('Settings')}" style="width:
|
|
76812
|
+
<button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
|
|
76421
76813
|
</div>
|
|
76422
76814
|
`;
|
|
76423
76815
|
dom.appendHtml(builderStuff, html);
|
|
@@ -76975,7 +77367,7 @@ class Video {
|
|
|
76975
77367
|
if (!videoTool) {
|
|
76976
77368
|
let html = `
|
|
76977
77369
|
<div class="is-tool is-video-tool">
|
|
76978
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
77370
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
76979
77371
|
</div>
|
|
76980
77372
|
`;
|
|
76981
77373
|
dom.appendHtml(builderStuff, html);
|
|
@@ -77232,7 +77624,7 @@ class Audio {
|
|
|
77232
77624
|
if (!audioTool) {
|
|
77233
77625
|
let html = `
|
|
77234
77626
|
<div class="is-tool is-audio-tool">
|
|
77235
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="
|
|
77627
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
77236
77628
|
</div>
|
|
77237
77629
|
`;
|
|
77238
77630
|
dom.appendHtml(builderStuff, html);
|
|
@@ -77425,7 +77817,7 @@ class Svg {
|
|
|
77425
77817
|
if (!svgTool) {
|
|
77426
77818
|
let html = `
|
|
77427
77819
|
<div class="is-tool is-svg-tool">
|
|
77428
|
-
<button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#
|
|
77820
|
+
<button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
77429
77821
|
</div>
|
|
77430
77822
|
`;
|
|
77431
77823
|
dom.appendHtml(builderStuff, html);
|
|
@@ -77800,14 +78192,20 @@ class RowTool {
|
|
|
77800
78192
|
if (!rowtool) {
|
|
77801
78193
|
let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
|
|
77802
78194
|
<div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
|
|
77803
|
-
<button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#
|
|
78195
|
+
<button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg></button>
|
|
77804
78196
|
<button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
|
|
77805
|
-
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#
|
|
78197
|
+
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
|
|
77806
78198
|
</div>
|
|
77807
78199
|
<div class="is-tool is-col-tool">
|
|
77808
|
-
<button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"
|
|
77809
|
-
|
|
77810
|
-
|
|
78200
|
+
<button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add">
|
|
78201
|
+
<svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
|
|
78202
|
+
</button>
|
|
78203
|
+
<button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more">
|
|
78204
|
+
<svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
|
|
78205
|
+
</button>
|
|
78206
|
+
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove">
|
|
78207
|
+
<svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
|
|
78208
|
+
</button>
|
|
77811
78209
|
</div>
|
|
77812
78210
|
`;
|
|
77813
78211
|
dom.appendHtml(row, html);
|
|
@@ -77965,20 +78363,20 @@ class RowTool {
|
|
|
77965
78363
|
const separator = columnMore.querySelector('.is-separator');
|
|
77966
78364
|
let nogrid = cell.closest('[nogrid]'); //dom.parentsHasAttribute(col, 'nogrid');
|
|
77967
78365
|
if (nogrid) {
|
|
77968
|
-
btnPrev.style.display = 'none';
|
|
77969
|
-
btnNext.style.display = 'none';
|
|
77970
|
-
btnUp.style.display = 'none';
|
|
77971
|
-
btnDown.style.display = 'none';
|
|
78366
|
+
if (btnPrev) btnPrev.style.display = 'none';
|
|
78367
|
+
if (btnNext) btnNext.style.display = 'none';
|
|
78368
|
+
if (btnUp) btnUp.style.display = 'none';
|
|
78369
|
+
if (btnDown) btnDown.style.display = 'none';
|
|
77972
78370
|
if (btnIncrease) btnIncrease.style.display = 'none';
|
|
77973
78371
|
if (btnDecrease) btnDecrease.style.display = 'none';
|
|
77974
|
-
btnDuplicate.style.display = 'none';
|
|
77975
|
-
btnPrev.setAttribute('disabled', 'disabled');
|
|
77976
|
-
btnNext.setAttribute('disabled', 'disabled');
|
|
77977
|
-
btnUp.setAttribute('disabled', 'disabled');
|
|
77978
|
-
btnDown.setAttribute('disabled', 'disabled');
|
|
77979
|
-
btnIncrease.setAttribute('disabled', 'disabled');
|
|
77980
|
-
btnDecrease.setAttribute('disabled', 'disabled');
|
|
77981
|
-
btnDuplicate.setAttribute('disabled', 'disabled');
|
|
78372
|
+
if (btnDuplicate) btnDuplicate.style.display = 'none';
|
|
78373
|
+
if (btnPrev) btnPrev.setAttribute('disabled', 'disabled');
|
|
78374
|
+
if (btnNext) btnNext.setAttribute('disabled', 'disabled');
|
|
78375
|
+
if (btnUp) btnUp.setAttribute('disabled', 'disabled');
|
|
78376
|
+
if (btnDown) btnDown.setAttribute('disabled', 'disabled');
|
|
78377
|
+
if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
|
|
78378
|
+
if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
|
|
78379
|
+
if (btnDuplicate) btnDuplicate.setAttribute('disabled', 'disabled');
|
|
77982
78380
|
let btnColHtml = columnMore.querySelector('.cell-html');
|
|
77983
78381
|
if (btnColHtml) btnColHtml.style.display = '';
|
|
77984
78382
|
if (cell.getAttribute('data-html')) {
|
|
@@ -77988,20 +78386,20 @@ class RowTool {
|
|
|
77988
78386
|
this.columnTool.querySelector('.cell-more').setAttribute('disabled', 'disabled');
|
|
77989
78387
|
}
|
|
77990
78388
|
} else {
|
|
77991
|
-
btnPrev.style.display = '';
|
|
77992
|
-
btnNext.style.display = '';
|
|
77993
|
-
btnUp.style.display = '';
|
|
77994
|
-
btnDown.style.display = '';
|
|
78389
|
+
if (btnPrev) btnPrev.style.display = '';
|
|
78390
|
+
if (btnNext) btnNext.style.display = '';
|
|
78391
|
+
if (btnUp) btnUp.style.display = '';
|
|
78392
|
+
if (btnDown) btnDown.style.display = '';
|
|
77995
78393
|
if (btnIncrease) btnIncrease.style.display = '';
|
|
77996
78394
|
if (btnDecrease) btnDecrease.style.display = '';
|
|
77997
|
-
btnDuplicate.style.display = '';
|
|
77998
|
-
btnPrev.removeAttribute('disabled');
|
|
77999
|
-
btnNext.removeAttribute('disabled');
|
|
78000
|
-
btnUp.removeAttribute('disabled');
|
|
78001
|
-
btnDown.removeAttribute('disabled');
|
|
78395
|
+
if (btnDuplicate) btnDuplicate.style.display = '';
|
|
78396
|
+
if (btnPrev) btnPrev.removeAttribute('disabled');
|
|
78397
|
+
if (btnNext) btnNext.removeAttribute('disabled');
|
|
78398
|
+
if (btnUp) btnUp.removeAttribute('disabled');
|
|
78399
|
+
if (btnDown) btnDown.removeAttribute('disabled');
|
|
78002
78400
|
if (btnIncrease) btnIncrease.removeAttribute('disabled');
|
|
78003
78401
|
if (btnDecrease) btnDecrease.removeAttribute('disabled');
|
|
78004
|
-
btnDuplicate.removeAttribute('disabled');
|
|
78402
|
+
if (btnDuplicate) btnDuplicate.removeAttribute('disabled');
|
|
78005
78403
|
let btnColHtml = columnMore.querySelector('.cell-html');
|
|
78006
78404
|
if (btnColHtml) {
|
|
78007
78405
|
btnColHtml.style.display = '';
|
|
@@ -78015,21 +78413,21 @@ class RowTool {
|
|
|
78015
78413
|
|
|
78016
78414
|
if (row.childElementCount - num === 1) {
|
|
78017
78415
|
//-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
|
78018
|
-
btnPrev.style.display = 'none';
|
|
78019
|
-
btnNext.style.display = 'none';
|
|
78416
|
+
if (btnPrev) btnPrev.style.display = 'none';
|
|
78417
|
+
if (btnNext) btnNext.style.display = 'none';
|
|
78020
78418
|
if (btnIncrease) btnIncrease.style.display = 'none';
|
|
78021
78419
|
if (btnDecrease) btnDecrease.style.display = 'none';
|
|
78022
|
-
btnPrev.setAttribute('disabled', 'disabled');
|
|
78023
|
-
btnNext.setAttribute('disabled', 'disabled');
|
|
78420
|
+
if (btnPrev) btnPrev.setAttribute('disabled', 'disabled');
|
|
78421
|
+
if (btnNext) btnNext.setAttribute('disabled', 'disabled');
|
|
78024
78422
|
if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
|
|
78025
78423
|
if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
|
|
78026
78424
|
} else {
|
|
78027
|
-
btnPrev.style.display = '';
|
|
78028
|
-
btnNext.style.display = '';
|
|
78425
|
+
if (btnPrev) btnPrev.style.display = '';
|
|
78426
|
+
if (btnNext) btnNext.style.display = '';
|
|
78029
78427
|
if (btnIncrease) btnIncrease.style.display = '';
|
|
78030
78428
|
if (btnDecrease) btnDecrease.style.display = '';
|
|
78031
|
-
btnPrev.removeAttribute('disabled');
|
|
78032
|
-
btnNext.removeAttribute('disabled');
|
|
78429
|
+
if (btnPrev) btnPrev.removeAttribute('disabled');
|
|
78430
|
+
if (btnNext) btnNext.removeAttribute('disabled');
|
|
78033
78431
|
if (btnIncrease) btnIncrease.removeAttribute('disabled');
|
|
78034
78432
|
if (btnDecrease) btnDecrease.removeAttribute('disabled');
|
|
78035
78433
|
}
|
|
@@ -78057,18 +78455,18 @@ class RowTool {
|
|
|
78057
78455
|
}
|
|
78058
78456
|
}
|
|
78059
78457
|
if (cell.classList.contains('column-lock')) {
|
|
78060
|
-
btnPrev.style.display = 'none';
|
|
78061
|
-
btnNext.style.display = 'none';
|
|
78062
|
-
btnUp.style.display = 'none';
|
|
78063
|
-
btnDown.style.display = 'none';
|
|
78064
|
-
btnIncrease.style.display = 'none';
|
|
78065
|
-
btnDecrease.style.display = 'none';
|
|
78066
|
-
btnDuplicate.style.display = 'none';
|
|
78067
|
-
separator.style.display = 'none';
|
|
78068
|
-
btnLock.style.display = 'none';
|
|
78458
|
+
if (btnPrev) btnPrev.style.display = 'none';
|
|
78459
|
+
if (btnNext) btnNext.style.display = 'none';
|
|
78460
|
+
if (btnUp) btnUp.style.display = 'none';
|
|
78461
|
+
if (btnDown) btnDown.style.display = 'none';
|
|
78462
|
+
if (btnIncrease) btnIncrease.style.display = 'none';
|
|
78463
|
+
if (btnDecrease) btnDecrease.style.display = 'none';
|
|
78464
|
+
if (btnDuplicate) btnDuplicate.style.display = 'none';
|
|
78465
|
+
if (separator) separator.style.display = 'none';
|
|
78466
|
+
if (btnLock) btnLock.style.display = 'none';
|
|
78069
78467
|
} else {
|
|
78070
|
-
separator.style.display = '';
|
|
78071
|
-
btnLock.style.display = '';
|
|
78468
|
+
if (separator) separator.style.display = '';
|
|
78469
|
+
if (btnLock) btnLock.style.display = '';
|
|
78072
78470
|
}
|
|
78073
78471
|
});
|
|
78074
78472
|
const btnCellRemove = coltool.querySelector('.cell-remove');
|
|
@@ -78196,20 +78594,33 @@ class RowTool {
|
|
|
78196
78594
|
const util = this.builder.util;
|
|
78197
78595
|
const dom = this.builder.dom;
|
|
78198
78596
|
let rowMore = builderStuff.querySelector('.rowmore');
|
|
78199
|
-
let htmlbutton = '';
|
|
78200
|
-
if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
|
|
78201
|
-
<span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
|
|
78202
|
-
</button>`;
|
|
78203
78597
|
if (!rowMore) {
|
|
78598
|
+
let rowMoreButtons = ['moveup', 'movedown', 'duplicate', 'html', 'separator', 'lock', 'settings']; // default
|
|
78599
|
+
|
|
78600
|
+
if (builder.rowMoreButtons) {
|
|
78601
|
+
rowMoreButtons = builder.rowMoreButtons;
|
|
78602
|
+
}
|
|
78603
|
+
const buttonTemplates = {
|
|
78604
|
+
moveup: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
|
|
78605
|
+
movedown: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
|
|
78606
|
+
duplicate: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
|
|
78607
|
+
html: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('HTML')}" class="row-html">
|
|
78608
|
+
<span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
|
|
78609
|
+
</button>`,
|
|
78610
|
+
separator: '<div class="is-separator"></div>',
|
|
78611
|
+
lock: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>`,
|
|
78612
|
+
settings: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
|
|
78613
|
+
};
|
|
78614
|
+
|
|
78615
|
+
// Filter buttons
|
|
78616
|
+
const filteredButtons = rowMoreButtons.filter(item => {
|
|
78617
|
+
if (!builder.opts.rowHtmlEditor && item === 'html') return false;
|
|
78618
|
+
return true;
|
|
78619
|
+
});
|
|
78620
|
+
let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
|
|
78204
78621
|
let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
78205
78622
|
<div style="display:flex;flex-flow:wrap;">
|
|
78206
|
-
|
|
78207
|
-
<button type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
|
|
78208
|
-
<button type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
|
|
78209
|
-
${htmlbutton}
|
|
78210
|
-
<div class="is-separator"></div>
|
|
78211
|
-
<button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
|
|
78212
|
-
<button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
|
|
78623
|
+
${buttonsHtml}
|
|
78213
78624
|
</div>
|
|
78214
78625
|
</div>
|
|
78215
78626
|
`;
|
|
@@ -79672,39 +80083,40 @@ class ColumnTool {
|
|
|
79672
80083
|
const dom = this.builder.dom;
|
|
79673
80084
|
this.grid = new Grid(builder);
|
|
79674
80085
|
let columnMore = builderStuff.querySelector('.is-pop.columnmore');
|
|
79675
|
-
let resizebutton = `
|
|
79676
|
-
<button type="button" title="${util.out('Increase')}" class="cell-increase"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>
|
|
79677
|
-
<button type="button" title="${util.out('Decrease')}" class="cell-decrease"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>
|
|
79678
|
-
`;
|
|
79679
|
-
let htmlbutton = '';
|
|
79680
|
-
if (builder.opts.columnHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="cell-html">
|
|
79681
|
-
<span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
|
|
79682
|
-
</button>`;
|
|
79683
80086
|
if (!columnMore) {
|
|
80087
|
+
let columnMoreButtons = ['moveleft', 'moveright', 'moveup', 'movedown', 'increase', 'decrease', 'duplicate', 'html', 'separator', 'lock', 'settings']; // default
|
|
80088
|
+
|
|
80089
|
+
if (builder.columnMoreButtons) {
|
|
80090
|
+
columnMoreButtons = builder.columnMoreButtons;
|
|
80091
|
+
}
|
|
80092
|
+
const buttonTemplates = {
|
|
80093
|
+
moveleft: `<button type="button" title="${util.out('Move Left')}" class="cell-prev" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></span>${util.out('Move Left')}</button>`,
|
|
80094
|
+
moveright: `<button type="button" title="${util.out('Move Right')}" class="cell-next" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></span>${util.out('Move Right')}</button>`,
|
|
80095
|
+
moveup: `<button type="button" title="${util.out('Move Up')}" class="cell-up" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
|
|
80096
|
+
movedown: `<button type="button" title="${util.out('Move Down')}" class="cell-down" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
|
|
80097
|
+
increase: `<button type="button" title="${util.out('Increase')}" class="cell-increase" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>`,
|
|
80098
|
+
decrease: `<button type="button" title="${util.out('Decrease')}" class="cell-decrease" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>`,
|
|
80099
|
+
duplicate: `<button type="button" title="${util.out('Duplicate')}" class="cell-duplicate" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
|
|
80100
|
+
html: `<button type="button" title="${util.out('HTML')}" class="cell-html" style="flex: 1 1 calc(50% - 10px);">
|
|
80101
|
+
<span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
|
|
80102
|
+
</button>`,
|
|
80103
|
+
separator: '<div class="is-separator"></div>',
|
|
80104
|
+
lock: `<button type="button" title="${util.out('Lock')}" class="cell-locking" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>`,
|
|
80105
|
+
settings: `<button type="button" title="${util.out('Settings')}" class="cell-settings" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
|
|
80106
|
+
};
|
|
80107
|
+
|
|
80108
|
+
// Filter buttons
|
|
80109
|
+
const filteredButtons = columnMoreButtons.filter(item => {
|
|
80110
|
+
if (!builder.opts.columnHtmlEditor && item === 'html') return false;
|
|
80111
|
+
return true;
|
|
80112
|
+
});
|
|
80113
|
+
let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
|
|
80114
|
+
|
|
79684
80115
|
// Refer to .is-col-tool in in rowtool.js
|
|
79685
80116
|
let html = `
|
|
79686
80117
|
<div class="is-pop columnmore" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
79687
80118
|
<div style="display:flex;flex-flow:wrap;">
|
|
79688
|
-
|
|
79689
|
-
<button type="button" title="${util.out('Move Right')}" class="cell-next"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></span>${util.out('Move Right')}</button>
|
|
79690
|
-
<button type="button" title="${util.out('Move Up')}" class="cell-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
|
|
79691
|
-
<button type="button" title="${util.out('Move Down')}" class="cell-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
|
|
79692
|
-
${resizebutton}
|
|
79693
|
-
<button type="button" title="${util.out('Duplicate')}" class="cell-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
|
|
79694
|
-
${htmlbutton}
|
|
79695
|
-
<div class="is-separator"></div>
|
|
79696
|
-
<button type="button" title="${util.out('Lock')}" class="cell-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
|
|
79697
|
-
<button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
|
|
79698
|
-
|
|
79699
|
-
<!--
|
|
79700
|
-
<button title="${util.out('Lock')}" class="cell-locking">
|
|
79701
|
-
<svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
|
|
79702
|
-
</button>
|
|
79703
|
-
<button title="${util.out('Settings')}" class="cell-settings">
|
|
79704
|
-
<svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
|
|
79705
|
-
<span>${util.out('Settings')}</span>
|
|
79706
|
-
</button>
|
|
79707
|
-
-->
|
|
80119
|
+
${buttonsHtml}
|
|
79708
80120
|
</div>
|
|
79709
80121
|
</div>
|
|
79710
80122
|
`;
|
|
@@ -86684,20 +87096,42 @@ class ElementTool {
|
|
|
86684
87096
|
let elementTool = builderStuff.querySelector('.is-element-tool');
|
|
86685
87097
|
let elementMore = builderStuff.querySelector('.elmmore');
|
|
86686
87098
|
if (!elementTool) {
|
|
87099
|
+
let elementMoreButtons = ['moveup', 'movedown', 'duplicate', 'settings']; // default
|
|
87100
|
+
|
|
87101
|
+
if (builder.elementMoreButtons) {
|
|
87102
|
+
elementMoreButtons = builder.elementMoreButtons;
|
|
87103
|
+
}
|
|
87104
|
+
const buttonTemplates = {
|
|
87105
|
+
moveup: `<button type="button" title="${util.out('Move Up')}" class="elm-up" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
|
|
87106
|
+
movedown: `<button type="button" title="${util.out('Move Down')}" class="elm-down" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
|
|
87107
|
+
duplicate: `<button type="button" title="${util.out('Duplicate')}" class="elm-duplicate" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
|
|
87108
|
+
settings: `<button type="button" title="${util.out('Settings')}" class="elm-settings" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
|
|
87109
|
+
};
|
|
87110
|
+
|
|
87111
|
+
// Filter buttons
|
|
87112
|
+
const filteredButtons = elementMoreButtons.filter(item => {
|
|
87113
|
+
if (!builder.opts.elementEditor && item === 'settings') return false;
|
|
87114
|
+
return true;
|
|
87115
|
+
});
|
|
87116
|
+
let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
|
|
86687
87117
|
let html = `<div class="is-tool is-element-tool">
|
|
86688
|
-
<button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"
|
|
86689
|
-
|
|
86690
|
-
|
|
86691
|
-
<button type="button" tabindex="-1" title="${util.out('
|
|
87118
|
+
<button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
|
|
87119
|
+
<svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
|
|
87120
|
+
</button>
|
|
87121
|
+
<button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
|
|
87122
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
|
|
87123
|
+
</button>
|
|
87124
|
+
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
|
|
87125
|
+
<svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
|
|
87126
|
+
</button>
|
|
87127
|
+
<button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
|
|
87128
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
|
|
87129
|
+
</button>
|
|
86692
87130
|
</div>
|
|
87131
|
+
|
|
86693
87132
|
<div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
|
86694
87133
|
<div style="display:flex;flex-flow:wrap;">
|
|
86695
|
-
|
|
86696
|
-
<button type="button" title="${util.out('Move Down')}" class="elm-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
|
|
86697
|
-
<button type="button" title="${util.out('Duplicate')}" class="elm-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
|
|
86698
|
-
${this.builder.opts.elementEditor ? `
|
|
86699
|
-
<button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
|
|
86700
|
-
` : ''}
|
|
87134
|
+
${buttonsHtml}
|
|
86701
87135
|
</div>
|
|
86702
87136
|
</div>
|
|
86703
87137
|
`;
|
|
@@ -86747,7 +87181,7 @@ class ElementTool {
|
|
|
86747
87181
|
const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
86748
87182
|
const h = quickadd.offsetHeight;
|
|
86749
87183
|
if (viewportHeight - top > h) {
|
|
86750
|
-
quickadd.style.top = top + window.pageYOffset +
|
|
87184
|
+
quickadd.style.top = top + window.pageYOffset + 42 + 'px';
|
|
86751
87185
|
quickadd.style.left = left - w / 2 + 10 + 'px';
|
|
86752
87186
|
dom.removeClass(quickadd, 'arrow-bottom');
|
|
86753
87187
|
dom.removeClass(quickadd, 'arrow-right');
|
|
@@ -86912,7 +87346,7 @@ class ElementTool {
|
|
|
86912
87346
|
const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
|
|
86913
87347
|
const h = elementMore.offsetHeight;
|
|
86914
87348
|
if (viewportHeight - top > h) {
|
|
86915
|
-
elementMore.style.top = top + window.pageYOffset +
|
|
87349
|
+
elementMore.style.top = top + window.pageYOffset + 42 + 'px';
|
|
86916
87350
|
elementMore.style.left = left - w / 2 + 10 + 'px';
|
|
86917
87351
|
dom.removeClass(elementMore, 'arrow-bottom');
|
|
86918
87352
|
dom.removeClass(elementMore, 'arrow-right');
|
|
@@ -87208,6 +87642,13 @@ class ElementTool {
|
|
|
87208
87642
|
}
|
|
87209
87643
|
}
|
|
87210
87644
|
}
|
|
87645
|
+
if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
|
|
87646
|
+
activeElement = this.builder.activeIframe.closest('.embed-responsive');
|
|
87647
|
+
} else if (activeElement && activeElement.classList.contains('ovl')) {
|
|
87648
|
+
if (activeElement.parentNode.querySelector('audio')) {
|
|
87649
|
+
activeElement = activeElement.parentNode;
|
|
87650
|
+
}
|
|
87651
|
+
}
|
|
87211
87652
|
this.builder.activeElement = activeElement;
|
|
87212
87653
|
if (activeElement) {
|
|
87213
87654
|
let elm = activeElement;
|
|
@@ -104803,54 +105244,83 @@ class ContentStuff$1 {
|
|
|
104803
105244
|
constructor(builder) {
|
|
104804
105245
|
this.builder = builder;
|
|
104805
105246
|
const util = builder.util;
|
|
104806
|
-
const html =
|
|
105247
|
+
const html = `
|
|
105248
|
+
<!-- not used -->
|
|
105249
|
+
<div class="is-tool is-column-tool">
|
|
104807
105250
|
<button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
|
|
104808
105251
|
<button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
|
|
104809
105252
|
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
|
|
104810
105253
|
</div>
|
|
105254
|
+
<!-- /not used -->
|
|
105255
|
+
|
|
104811
105256
|
<div class="is-tool is-element-tool">
|
|
104812
|
-
<button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"
|
|
104813
|
-
|
|
104814
|
-
|
|
104815
|
-
<button type="button" tabindex="-1" title="${util.out('
|
|
105257
|
+
<button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
|
|
105258
|
+
<svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
|
|
105259
|
+
</button>
|
|
105260
|
+
<button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
|
|
105261
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
|
|
105262
|
+
</button>
|
|
105263
|
+
<button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
|
|
105264
|
+
<svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
|
|
105265
|
+
</button>
|
|
105266
|
+
<button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
|
|
105267
|
+
<svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
|
|
105268
|
+
</button>
|
|
104816
105269
|
</div>
|
|
104817
105270
|
|
|
104818
105271
|
<div id="divButtonTool" class="is-tool">
|
|
104819
|
-
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"
|
|
104820
|
-
|
|
104821
|
-
|
|
105272
|
+
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
|
|
105273
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
|
|
105274
|
+
</button>
|
|
105275
|
+
<button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
|
|
105276
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
|
|
105277
|
+
</button>
|
|
105278
|
+
<button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
|
|
105279
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
|
|
105280
|
+
</button>
|
|
104822
105281
|
</div>
|
|
105282
|
+
|
|
104823
105283
|
<div class="is-tool is-code-tool">
|
|
104824
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:
|
|
105284
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104825
105285
|
</div>
|
|
105286
|
+
|
|
104826
105287
|
<div id="divLinkTool" class="is-tool">
|
|
104827
|
-
|
|
104828
|
-
|
|
104829
|
-
|
|
104830
|
-
|
|
105288
|
+
<button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
|
|
105289
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
|
|
105290
|
+
</button>
|
|
105291
|
+
<button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
|
|
105292
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
|
|
105293
|
+
</button>
|
|
105294
|
+
<button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
|
|
105295
|
+
<svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
|
|
105296
|
+
</button>
|
|
105297
|
+
<button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
|
|
105298
|
+
<svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
|
|
105299
|
+
</button>
|
|
104831
105300
|
</div>
|
|
105301
|
+
|
|
104832
105302
|
<div class="is-tool is-iframe-tool">
|
|
104833
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
105303
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104834
105304
|
</div>
|
|
104835
105305
|
<div class="is-tool is-module-tool">
|
|
104836
|
-
|
|
104837
|
-
|
|
105306
|
+
<button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
|
|
105307
|
+
<button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104838
105308
|
</div>
|
|
104839
105309
|
<div class="is-tool is-svg-tool">
|
|
104840
|
-
<button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#
|
|
105310
|
+
<button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104841
105311
|
</div>
|
|
104842
105312
|
<div id="divSpacerTool" class="is-tool is-spacer-tool">
|
|
104843
|
-
<button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#
|
|
104844
|
-
<button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
105313
|
+
<button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
|
|
105314
|
+
<button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
|
|
104845
105315
|
</div>
|
|
104846
105316
|
<div class="is-tool is-table-tool">
|
|
104847
|
-
<button title="${util.out('Settings')}" style="width:
|
|
105317
|
+
<button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104848
105318
|
</div>
|
|
104849
105319
|
<div class="is-tool is-video-tool">
|
|
104850
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#
|
|
105320
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104851
105321
|
</div>
|
|
104852
105322
|
<div class="is-tool is-audio-tool">
|
|
104853
|
-
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:
|
|
105323
|
+
<button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;background:none;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>
|
|
104854
105324
|
</div>
|
|
104855
105325
|
|
|
104856
105326
|
<div class="is-locked-indicator">
|
|
@@ -104970,7 +105440,7 @@ class ContentStuff$1 {
|
|
|
104970
105440
|
<symbol viewBox="0 0 512 512" id="ion-volume-medium">
|
|
104971
105441
|
<path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
|
|
104972
105442
|
</symbol>
|
|
104973
|
-
<symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="
|
|
105443
|
+
<symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
104974
105444
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
104975
105445
|
<path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
|
|
104976
105446
|
<path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
@@ -104981,6 +105451,64 @@ class ContentStuff$1 {
|
|
|
104981
105451
|
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
|
|
104982
105452
|
<path d="M20 4v5h-5"></path>
|
|
104983
105453
|
</symbol>
|
|
105454
|
+
|
|
105455
|
+
|
|
105456
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105457
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105458
|
+
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
105459
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
105460
|
+
</symbol>
|
|
105461
|
+
<symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105462
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105463
|
+
<path d="M12 5l0 14"></path>
|
|
105464
|
+
<path d="M5 12l14 0"></path>
|
|
105465
|
+
</symbol>
|
|
105466
|
+
|
|
105467
|
+
<symbol id="icon-minus" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105468
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105469
|
+
<path d="M5 12l14 0"></path>
|
|
105470
|
+
</symbol>
|
|
105471
|
+
|
|
105472
|
+
<symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105473
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
|
|
105474
|
+
</symbol>
|
|
105475
|
+
<symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105476
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105477
|
+
<path d="M18 6l-12 12"></path>
|
|
105478
|
+
<path d="M6 6l12 12"></path>
|
|
105479
|
+
</symbol>
|
|
105480
|
+
<symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105481
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105482
|
+
<path d="M4 7l16 0"></path>
|
|
105483
|
+
<path d="M10 11l0 6"></path>
|
|
105484
|
+
<path d="M14 11l0 6"></path>
|
|
105485
|
+
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
|
|
105486
|
+
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
|
|
105487
|
+
</symbol>
|
|
105488
|
+
<symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105489
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
|
|
105490
|
+
</symbol>
|
|
105491
|
+
<symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105492
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105493
|
+
<path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
|
|
105494
|
+
<line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
|
|
105495
|
+
</symbol>
|
|
105496
|
+
<symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105497
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105498
|
+
<path d="M9 15l6 -6"></path>
|
|
105499
|
+
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
|
|
105500
|
+
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
|
|
105501
|
+
</symbol>
|
|
105502
|
+
<symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105503
|
+
<path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
|
|
105504
|
+
</symbol>
|
|
105505
|
+
<symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105506
|
+
<path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
|
|
105507
|
+
</symbol>
|
|
105508
|
+
<symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
105509
|
+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
105510
|
+
<path d="M5 12l14 0"></path>
|
|
105511
|
+
</symbol>
|
|
104984
105512
|
</defs>
|
|
104985
105513
|
</svg>
|
|
104986
105514
|
|
|
@@ -105174,6 +105702,9 @@ class ContentStuff$1 {
|
|
|
105174
105702
|
}
|
|
105175
105703
|
|
|
105176
105704
|
/* Tool */
|
|
105705
|
+
|
|
105706
|
+
|
|
105707
|
+
/*
|
|
105177
105708
|
.is-tool.is-video-tool,
|
|
105178
105709
|
.is-tool.is-audio-tool,
|
|
105179
105710
|
.is-tool.is-iframe-tool {
|
|
@@ -105233,6 +105764,111 @@ class ContentStuff$1 {
|
|
|
105233
105764
|
.is-tool.is-table-tool:hover {
|
|
105234
105765
|
z-index:10001 !important
|
|
105235
105766
|
}
|
|
105767
|
+
*/
|
|
105768
|
+
|
|
105769
|
+
|
|
105770
|
+
.is-tool.is-video-tool,
|
|
105771
|
+
.is-tool.is-audio-tool,
|
|
105772
|
+
.is-tool.is-iframe-tool {
|
|
105773
|
+
background: rgba(255, 255, 255, 0.97) !important;
|
|
105774
|
+
border: transparent 1px solid;
|
|
105775
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105776
|
+
border-radius: 20px;
|
|
105777
|
+
}
|
|
105778
|
+
|
|
105779
|
+
.is-tool.is-video-tool > div,
|
|
105780
|
+
.is-tool.is-video-tool > button,
|
|
105781
|
+
.is-tool.is-audio-tool > div,
|
|
105782
|
+
.is-tool.is-audio-tool > button,
|
|
105783
|
+
.is-tool.is-iframe-tool > div,
|
|
105784
|
+
.is-tool.is-iframe-tool > button {
|
|
105785
|
+
width: 35px !important;
|
|
105786
|
+
height: 35px !important;
|
|
105787
|
+
background: transparent;
|
|
105788
|
+
}
|
|
105789
|
+
|
|
105790
|
+
.is-tool.is-video-tool svg,
|
|
105791
|
+
.is-tool.is-audio-tool svg,
|
|
105792
|
+
.is-tool.is-iframe-tool svg {
|
|
105793
|
+
width: 17px;
|
|
105794
|
+
height: 17px;
|
|
105795
|
+
fill: #111 !important;
|
|
105796
|
+
color: #111 !important;
|
|
105797
|
+
}
|
|
105798
|
+
|
|
105799
|
+
.is-tool.is-spacer-tool {
|
|
105800
|
+
border: none;
|
|
105801
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105802
|
+
border-radius: 20px;
|
|
105803
|
+
overflow: hidden;
|
|
105804
|
+
}
|
|
105805
|
+
.is-tool.is-spacer-tool > button {
|
|
105806
|
+
width: 40px;
|
|
105807
|
+
height: 35px;
|
|
105808
|
+
background: rgba(255, 255, 255, 0.97) !important;
|
|
105809
|
+
}
|
|
105810
|
+
.is-tool.is-spacer-tool > button svg {
|
|
105811
|
+
fill: #111 !important;
|
|
105812
|
+
color: #111 !important;
|
|
105813
|
+
}
|
|
105814
|
+
.is-tool.is-table-tool {
|
|
105815
|
+
border: none;
|
|
105816
|
+
background: none;
|
|
105817
|
+
border-radius: 20px;
|
|
105818
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105819
|
+
}
|
|
105820
|
+
.is-tool.is-table-tool:hover {
|
|
105821
|
+
z-index: 10001 !important;
|
|
105822
|
+
}
|
|
105823
|
+
.is-tool.is-table-tool > button {
|
|
105824
|
+
width: 35px;
|
|
105825
|
+
height: 35px;
|
|
105826
|
+
background: rgba(255, 255, 255, 0.9) !important;
|
|
105827
|
+
}
|
|
105828
|
+
.is-tool.is-table-tool > button svg {
|
|
105829
|
+
width: 17px !important;
|
|
105830
|
+
height: 17px !important;
|
|
105831
|
+
fill: #111 !important;
|
|
105832
|
+
color: #111 !important;
|
|
105833
|
+
}
|
|
105834
|
+
.is-tool.is-code-tool, .is-tool.is-module-tool, .is-tool.is-svg-tool {
|
|
105835
|
+
border: none;
|
|
105836
|
+
background: none;
|
|
105837
|
+
border-radius: 20px;
|
|
105838
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105839
|
+
overflow: hidden;
|
|
105840
|
+
}
|
|
105841
|
+
.is-tool.is-code-tool > button, .is-tool.is-module-tool > button, .is-tool.is-svg-tool > button {
|
|
105842
|
+
width: 35px;
|
|
105843
|
+
height: 35px;
|
|
105844
|
+
background: rgba(255, 255, 255, 0.9) !important;
|
|
105845
|
+
}
|
|
105846
|
+
.is-tool.is-code-tool > button svg, .is-tool.is-module-tool > button svg, .is-tool.is-svg-tool > button svg {
|
|
105847
|
+
width: 17px !important;
|
|
105848
|
+
height: 17px !important;
|
|
105849
|
+
fill: #111 !important;
|
|
105850
|
+
color: #111 !important;
|
|
105851
|
+
}
|
|
105852
|
+
.is-tool#divLinkTool, .is-tool#divButtonTool {
|
|
105853
|
+
background: rgba(255, 255, 255, 0.95) !important;
|
|
105854
|
+
box-shadow: none;
|
|
105855
|
+
border-radius: 20px;
|
|
105856
|
+
overflow: hidden;
|
|
105857
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105858
|
+
margin-top: -10px;
|
|
105859
|
+
margin-left: 7px;
|
|
105860
|
+
}
|
|
105861
|
+
.is-tool#divLinkTool button, .is-tool#divButtonTool button {
|
|
105862
|
+
width: 37px;
|
|
105863
|
+
height: 37px;
|
|
105864
|
+
background: transparent !important;
|
|
105865
|
+
}
|
|
105866
|
+
.is-tool#divLinkTool button svg, .is-tool#divButtonTool button svg {
|
|
105867
|
+
fill: #111 !important;
|
|
105868
|
+
color: #111 !important;
|
|
105869
|
+
}
|
|
105870
|
+
|
|
105871
|
+
|
|
105236
105872
|
|
|
105237
105873
|
|
|
105238
105874
|
.dot {
|
|
@@ -105326,19 +105962,25 @@ class ContentStuff$1 {
|
|
|
105326
105962
|
/* is-element-tool */
|
|
105327
105963
|
|
|
105328
105964
|
.is-tool.is-element-tool {
|
|
105329
|
-
background: rgba(243, 243, 243, 0.9);
|
|
105330
105965
|
border-radius: 3px;
|
|
105331
105966
|
overflow: hidden;
|
|
105967
|
+
margin-top: 10px;
|
|
105968
|
+
margin-left: 0px;
|
|
105969
|
+
border-radius: 100px;
|
|
105970
|
+
box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
|
|
105971
|
+
background-color: rgba(255, 255, 255, 0.97) !important;
|
|
105332
105972
|
}
|
|
105333
105973
|
.is-tool.is-element-tool button {
|
|
105334
|
-
width:
|
|
105335
|
-
height:
|
|
105974
|
+
width: 32px;
|
|
105975
|
+
height: 31px;
|
|
105336
105976
|
background: transparent;
|
|
105977
|
+
color: #111;
|
|
105337
105978
|
}
|
|
105338
105979
|
.is-tool.is-element-tool svg {
|
|
105339
105980
|
width: 14px;
|
|
105340
105981
|
height: 14px;
|
|
105341
|
-
fill: #111;
|
|
105982
|
+
fill: #111 !important;
|
|
105983
|
+
color: #111 !important;
|
|
105342
105984
|
}
|
|
105343
105985
|
.is-tool.is-element-tool .elm-more svg {
|
|
105344
105986
|
width: 11px;
|
|
@@ -105410,8 +106052,8 @@ class ContentStuff$1 {
|
|
|
105410
106052
|
}
|
|
105411
106053
|
|
|
105412
106054
|
.is-tool.is-row-tool button {
|
|
105413
|
-
width:
|
|
105414
|
-
height:
|
|
106055
|
+
width: 28px;
|
|
106056
|
+
height: 28px;
|
|
105415
106057
|
display: flex;
|
|
105416
106058
|
justify-content: center;
|
|
105417
106059
|
align-items: center;
|
|
@@ -105543,10 +106185,11 @@ class ContentStuff$1 {
|
|
|
105543
106185
|
box-shadow: none;
|
|
105544
106186
|
border-radius: 2px;
|
|
105545
106187
|
overflow: hidden;
|
|
106188
|
+
top: -3px !important;
|
|
105546
106189
|
}
|
|
105547
106190
|
.is-tool.is-col-tool button {
|
|
105548
|
-
width:
|
|
105549
|
-
height:
|
|
106191
|
+
width: 28px;
|
|
106192
|
+
height: 28px;
|
|
105550
106193
|
display: flex;
|
|
105551
106194
|
justify-content: center;
|
|
105552
106195
|
align-items: center;
|
|
@@ -105569,6 +106212,9 @@ class ContentStuff$1 {
|
|
|
105569
106212
|
width: 14px;
|
|
105570
106213
|
height: 14px;
|
|
105571
106214
|
}
|
|
106215
|
+
.is-tool.is-col-tool svg * { /* prevent override by .is-dark-text * */
|
|
106216
|
+
color: #fff;
|
|
106217
|
+
}
|
|
105572
106218
|
|
|
105573
106219
|
|
|
105574
106220
|
.is-builder[gray] .is-tool.is-col-tool {
|
|
@@ -105682,6 +106328,9 @@ class ContentStuff$1 {
|
|
|
105682
106328
|
width: 19px;
|
|
105683
106329
|
height: 19px;
|
|
105684
106330
|
}
|
|
106331
|
+
.is-tool.is-row-tool svg * { /* prevent override by .is-dark-text * */
|
|
106332
|
+
color: #fff;
|
|
106333
|
+
}
|
|
105685
106334
|
|
|
105686
106335
|
|
|
105687
106336
|
|
|
@@ -117676,7 +118325,7 @@ class PageSize {
|
|
|
117676
118325
|
position: relative;
|
|
117677
118326
|
flex:none;
|
|
117678
118327
|
background: #fff;
|
|
117679
|
-
|
|
118328
|
+
overflow: hidden;
|
|
117680
118329
|
box-shadow: none;
|
|
117681
118330
|
}
|
|
117682
118331
|
${css}
|
|
@@ -120976,6 +121625,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
120976
121625
|
// ON PASTE
|
|
120977
121626
|
// col.addEventListener('paste', this.handleCellPaste.bind(this));
|
|
120978
121627
|
col.addEventListener('paste', e => {
|
|
121628
|
+
if (e.target.closest('[data-html]')) return; // normal paste
|
|
121629
|
+
|
|
120979
121630
|
e.preventDefault();
|
|
120980
121631
|
let clipboardDataText = (e.clipboardData || window.clipboardData).getData('text');
|
|
120981
121632
|
let clipboardDataHtml = (e.clipboardData || window.clipboardData).getData('text/html');
|
|
@@ -121383,8 +122034,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
|
121383
122034
|
toggleSnippetModal() {
|
|
121384
122035
|
const snippetModal = this.builderStuff.querySelector('.is-modal.snippetwindow');
|
|
121385
122036
|
if (snippetModal.classList.contains('active')) {
|
|
122037
|
+
snippetModal.setAttribute('aria-hidden', true);
|
|
121386
122038
|
snippetModal.classList.remove('active');
|
|
121387
122039
|
} else {
|
|
122040
|
+
this.doc.activeElement.blur();
|
|
122041
|
+
// builder.doc.body.focus();
|
|
122042
|
+
snippetModal.setAttribute('aria-hidden', false);
|
|
121388
122043
|
snippetModal.classList.add('active');
|
|
121389
122044
|
}
|
|
121390
122045
|
}
|
|
@@ -130630,7 +131285,7 @@ class Timeline {
|
|
|
130630
131285
|
-->
|
|
130631
131286
|
<div class="flex-wrap">
|
|
130632
131287
|
<div class="flex-wrap" style="margin-right:15px;width: 120px;">
|
|
130633
|
-
<select class="input-target">
|
|
131288
|
+
<select class="input-target" id="_input_target">
|
|
130634
131289
|
<option value="block">${out('Block')}</option>
|
|
130635
131290
|
<option value="element">${out('Element')}</option>
|
|
130636
131291
|
<option value="column">${out('Column')}</option>
|
|
@@ -138698,9 +139353,9 @@ class Box {
|
|
|
138698
139353
|
// 1920<breakpoint
|
|
138699
139354
|
prefix = 'is-content-';
|
|
138700
139355
|
}
|
|
138701
|
-
}
|
|
139356
|
+
} // this.builder.editor.saveForUndo();
|
|
139357
|
+
|
|
138702
139358
|
|
|
138703
|
-
this.builder.editor.saveForUndo();
|
|
138704
139359
|
const activeBox = this.builder.activeBox;
|
|
138705
139360
|
const container = activeBox.querySelector('.is-container');
|
|
138706
139361
|
|
|
@@ -138726,9 +139381,8 @@ class Box {
|
|
|
138726
139381
|
container.classList.add(prefix + targetWidth); // panelBox.querySelector('.val-box-size').innerHTML = targetWidth;
|
|
138727
139382
|
|
|
138728
139383
|
callback(targetWidth);
|
|
138729
|
-
}
|
|
139384
|
+
} // this.builder.onChange();
|
|
138730
139385
|
|
|
138731
|
-
this.builder.onChange();
|
|
138732
139386
|
}
|
|
138733
139387
|
|
|
138734
139388
|
clearContentWidth() {
|
|
@@ -151181,15 +151835,26 @@ ${currentHtml}
|
|
|
151181
151835
|
}
|
|
151182
151836
|
}
|
|
151183
151837
|
|
|
151184
|
-
|
|
151838
|
+
if (this.builder.aiSectionReplace) htmlDocument.body.firstElementChild.classList.add('div-dummy');
|
|
151839
|
+
html = htmlDocument.body.innerHTML;
|
|
151185
151840
|
|
|
151186
|
-
|
|
151187
|
-
|
|
151188
|
-
|
|
151189
|
-
|
|
151190
|
-
if (newSection) {
|
|
151841
|
+
if (this.builder.aiSectionReplace) {
|
|
151842
|
+
activeSection.outerHTML = html;
|
|
151843
|
+
this.builder.pageSetup();
|
|
151191
151844
|
this.clearSelection();
|
|
151192
|
-
this.
|
|
151845
|
+
let elm = this.builder.wrapperEl.querySelector(['.div-dummy']);
|
|
151846
|
+
this.reSelect(elm);
|
|
151847
|
+
if (elm) elm.classList.remove('div-dummy');
|
|
151848
|
+
} else {
|
|
151849
|
+
// const typeClass = this.lib.getTypographyClass(html);
|
|
151850
|
+
let typeCss = '';
|
|
151851
|
+
if (typeClass) typeCss = typeClass + '.css';
|
|
151852
|
+
let newSection = this.builder.addSection(html, typeCss);
|
|
151853
|
+
|
|
151854
|
+
if (newSection) {
|
|
151855
|
+
this.clearSelection();
|
|
151856
|
+
this.reSelect(newSection);
|
|
151857
|
+
}
|
|
151193
151858
|
}
|
|
151194
151859
|
} else {
|
|
151195
151860
|
activeBox.classList.add('replace-this'); // let savedClasses = activeBox.getAttribute('class');
|
|
@@ -151243,14 +151908,25 @@ ${currentHtml}
|
|
|
151243
151908
|
elementToReplace.parentNode.replaceChild(replacementElement, elementToReplace);
|
|
151244
151909
|
}
|
|
151245
151910
|
|
|
151911
|
+
if (this.builder.aiSectionReplace) htmlDocument.body.firstElementChild.classList.add('div-dummy');
|
|
151246
151912
|
const modifiedHtml = htmlDocument.body.innerHTML;
|
|
151247
|
-
let typeCss = '';
|
|
151248
|
-
if (typeClass) typeCss = typeClass + '.css';
|
|
151249
|
-
let newSection = this.builder.addSection(modifiedHtml, typeCss);
|
|
151250
151913
|
|
|
151251
|
-
if (
|
|
151914
|
+
if (this.builder.aiSectionReplace) {
|
|
151915
|
+
activeSection.outerHTML = modifiedHtml;
|
|
151916
|
+
this.builder.pageSetup();
|
|
151252
151917
|
this.clearSelection();
|
|
151253
|
-
this.
|
|
151918
|
+
let elm = this.builder.wrapperEl.querySelector(['.div-dummy']);
|
|
151919
|
+
this.reSelect(elm);
|
|
151920
|
+
if (elm) elm.classList.remove('div-dummy');
|
|
151921
|
+
} else {
|
|
151922
|
+
let typeCss = '';
|
|
151923
|
+
if (typeClass) typeCss = typeClass + '.css';
|
|
151924
|
+
let newSection = this.builder.addSection(modifiedHtml, typeCss);
|
|
151925
|
+
|
|
151926
|
+
if (newSection) {
|
|
151927
|
+
this.clearSelection();
|
|
151928
|
+
this.reSelect(newSection);
|
|
151929
|
+
}
|
|
151254
151930
|
}
|
|
151255
151931
|
} //Trigger Change event
|
|
151256
151932
|
// this.builder.settings.onChange();
|
|
@@ -152178,25 +152854,33 @@ class IframePanel {
|
|
|
152178
152854
|
}
|
|
152179
152855
|
|
|
152180
152856
|
hideTools() {
|
|
152181
|
-
|
|
152182
|
-
|
|
152183
|
-
|
|
152184
|
-
|
|
152185
|
-
|
|
152186
|
-
|
|
152187
|
-
|
|
152188
|
-
|
|
152189
|
-
|
|
152190
|
-
|
|
152191
|
-
|
|
152192
|
-
|
|
152193
|
-
|
|
152194
|
-
|
|
152195
|
-
|
|
152196
|
-
|
|
152197
|
-
|
|
152198
|
-
|
|
152199
|
-
|
|
152857
|
+
this.builder.addCustomStyle('_css_scale', `
|
|
152858
|
+
.is-element-tool,
|
|
152859
|
+
.is-video-tool,
|
|
152860
|
+
.is-audio-tool,
|
|
152861
|
+
.is-iframe-tool,
|
|
152862
|
+
.is-module-tool,
|
|
152863
|
+
.is-code-tool,
|
|
152864
|
+
.is-svg-tool,
|
|
152865
|
+
.is-table-tool,
|
|
152866
|
+
.is-spacer-tool,
|
|
152867
|
+
.is-locked-indicator,
|
|
152868
|
+
.is-section-info,
|
|
152869
|
+
#divButtonTool,
|
|
152870
|
+
#divLinkTool {
|
|
152871
|
+
opacity: 0 !important;
|
|
152872
|
+
}
|
|
152873
|
+
|
|
152874
|
+
.row-active .is-col-tool,
|
|
152875
|
+
.row-active .is-row-tool ,
|
|
152876
|
+
.is-section-tool,
|
|
152877
|
+
.is-box-tool {
|
|
152878
|
+
opacity: 0 !important;
|
|
152879
|
+
}
|
|
152880
|
+
`);
|
|
152881
|
+
this.builder.editor.element.image.hideImageTool();
|
|
152882
|
+
let tool = this.builder.doc.querySelector('.row-active .is-col-tool');
|
|
152883
|
+
if (tool) tool.style.display = 'none';
|
|
152200
152884
|
}
|
|
152201
152885
|
|
|
152202
152886
|
repositionTool() {
|
|
@@ -152210,6 +152894,10 @@ class IframePanel {
|
|
|
152210
152894
|
}
|
|
152211
152895
|
}, 600);
|
|
152212
152896
|
}
|
|
152897
|
+
|
|
152898
|
+
setTimeout(() => {
|
|
152899
|
+
this.builder.scaleTools(); // already include this.builder.removeCustomStyle('_css_scale');
|
|
152900
|
+
}, 300);
|
|
152213
152901
|
}
|
|
152214
152902
|
|
|
152215
152903
|
repositionTool_bak() {
|
|
@@ -160789,7 +161477,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
|
160789
161477
|
<svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg>
|
|
160790
161478
|
</button>
|
|
160791
161479
|
<button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
|
|
160792
|
-
<svg class="is-icon-flex"><use xlink:href="#icon-
|
|
161480
|
+
<svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-3px;"><use xlink:href="#icon-trash2"></use></svg>
|
|
160793
161481
|
</button>
|
|
160794
161482
|
</div>`);
|
|
160795
161483
|
this.defineLastBox(section);
|
|
@@ -161703,40 +162391,55 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
|
161703
162391
|
this.positionTool(this.activeBox);
|
|
161704
162392
|
}
|
|
161705
162393
|
|
|
161706
|
-
|
|
161707
|
-
|
|
161708
|
-
|
|
161709
|
-
|
|
161710
|
-
|
|
161711
|
-
|
|
161712
|
-
|
|
161713
|
-
|
|
161714
|
-
|
|
161715
|
-
|
|
161716
|
-
|
|
161717
|
-
|
|
161718
|
-
|
|
161719
|
-
|
|
161720
|
-
|
|
161721
|
-
|
|
161722
|
-
|
|
161723
|
-
|
|
161724
|
-
|
|
162394
|
+
scaleTools() {
|
|
162395
|
+
this.removeCustomStyle('_css_scale');
|
|
162396
|
+
const div = document.querySelector('.is-content-view');
|
|
162397
|
+
if (!div) return;
|
|
162398
|
+
const transformStyle = window.getComputedStyle(div).transform;
|
|
162399
|
+
const matrixValues = transformStyle.slice(7, -1).split(',');
|
|
162400
|
+
let scaleValue = parseFloat(matrixValues[0]);
|
|
162401
|
+
this.removeCustomStyle('_css_scale_apply');
|
|
162402
|
+
this.addCustomStyle('_css_scale_apply', `
|
|
162403
|
+
.is-section-tool {
|
|
162404
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162405
|
+
transform-origin: top right !important;
|
|
162406
|
+
}
|
|
162407
|
+
.is-box-tool {
|
|
162408
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162409
|
+
transform-origin: center bottomt !important;
|
|
162410
|
+
}
|
|
162411
|
+
.is-section-info {
|
|
162412
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162413
|
+
}
|
|
161725
162414
|
|
|
161726
|
-
|
|
161727
|
-
|
|
161728
|
-
|
|
161729
|
-
|
|
161730
|
-
|
|
161731
|
-
|
|
161732
|
-
|
|
161733
|
-
|
|
161734
|
-
|
|
161735
|
-
|
|
161736
|
-
|
|
161737
|
-
|
|
161738
|
-
|
|
161739
|
-
|
|
162415
|
+
.is-col-tool {
|
|
162416
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162417
|
+
transform-origin: bottom left !important;
|
|
162418
|
+
|
|
162419
|
+
}
|
|
162420
|
+
.is-row-tool {
|
|
162421
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162422
|
+
transform-origin: top left !important;
|
|
162423
|
+
}
|
|
162424
|
+
.is-rowadd-tool button {
|
|
162425
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162426
|
+
}
|
|
162427
|
+
|
|
162428
|
+
.is-element-tool,
|
|
162429
|
+
.is-video-tool,
|
|
162430
|
+
.is-audio-tool,
|
|
162431
|
+
.is-iframe-tool,
|
|
162432
|
+
.is-module-tool,
|
|
162433
|
+
.is-code-tool,
|
|
162434
|
+
.is-spacer-tool,
|
|
162435
|
+
.is-svg-tool,
|
|
162436
|
+
.is-table-tool,
|
|
162437
|
+
.is-locked-indicator,
|
|
162438
|
+
#divLinkTool, #divButtonTool {
|
|
162439
|
+
transform: scale(${1 / scaleValue}) !important;;
|
|
162440
|
+
transform-origin: top !important;
|
|
162441
|
+
}
|
|
162442
|
+
`);
|
|
161740
162443
|
}
|
|
161741
162444
|
|
|
161742
162445
|
positionTool(box) {
|
|
@@ -161842,18 +162545,31 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
|
|
|
161842
162545
|
}
|
|
161843
162546
|
}
|
|
161844
162547
|
}
|
|
161845
|
-
} //
|
|
162548
|
+
} // tools scaling for iframe
|
|
161846
162549
|
|
|
161847
162550
|
|
|
161848
|
-
|
|
161849
|
-
|
|
161850
|
-
|
|
161851
|
-
|
|
161852
|
-
let
|
|
162551
|
+
this.scaleTools();
|
|
162552
|
+
}
|
|
162553
|
+
|
|
162554
|
+
addCustomStyle(styleId, cssContent) {
|
|
162555
|
+
let existingStyle = this.doc.getElementById(styleId);
|
|
162556
|
+
|
|
162557
|
+
if (existingStyle) {
|
|
162558
|
+
existingStyle.innerHTML = cssContent;
|
|
162559
|
+
} else {
|
|
162560
|
+
let style = this.doc.createElement('style');
|
|
162561
|
+
style.type = 'text/css';
|
|
162562
|
+
style.id = styleId;
|
|
162563
|
+
style.innerHTML = cssContent;
|
|
162564
|
+
this.doc.head.appendChild(style);
|
|
162565
|
+
}
|
|
162566
|
+
}
|
|
162567
|
+
|
|
162568
|
+
removeCustomStyle(styleId) {
|
|
162569
|
+
let style = this.doc.getElementById(styleId);
|
|
161853
162570
|
|
|
161854
|
-
if (
|
|
161855
|
-
|
|
161856
|
-
boxInfo.style.transform = 'scale(' + 1 / zoom + ')';
|
|
162571
|
+
if (style) {
|
|
162572
|
+
this.doc.head.removeChild(style);
|
|
161857
162573
|
}
|
|
161858
162574
|
}
|
|
161859
162575
|
|