@innovastudio/contentbox 1.6.94 → 1.6.96
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.
- package/package.json +2 -2
- package/public/contentbox/contentbox.esm.js +514 -122
- package/public/contentbox/contentbox.min.js +15 -15
- package/public/contentbox/lang/en.js +50 -0
- package/readme.txt +1 -1
@@ -27629,6 +27629,53 @@ const renderQuickAdd = builder => {
|
|
27629
27629
|
const util = builder.util;
|
27630
27630
|
const builderStuff = builder.builderStuff;
|
27631
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('');
|
27632
27679
|
let quickadd = builderStuff.querySelector('.quickadd');
|
27633
27680
|
if (!quickadd) {
|
27634
27681
|
const html = `<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
@@ -27638,34 +27685,11 @@ const renderQuickAdd = builder => {
|
|
27638
27685
|
<div class="is-pop-tab-item active" data-value="right">${util.out('Add to Right')}</div>
|
27639
27686
|
</div>
|
27640
27687
|
<div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">
|
27641
|
-
|
27642
|
-
<
|
27643
|
-
<button title="${util.out('
|
27644
|
-
<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>
|
27645
|
-
<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>
|
27646
|
-
<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>
|
27647
|
-
<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>
|
27648
|
-
<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>
|
27649
|
-
<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>
|
27650
|
-
<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>
|
27651
|
-
${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>`}
|
27652
|
-
${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>`}
|
27653
|
-
<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>
|
27654
|
-
<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>
|
27655
|
-
<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>
|
27656
|
-
<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>
|
27657
|
-
<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>
|
27658
|
-
<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>
|
27659
|
-
<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>
|
27660
|
-
<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>
|
27661
|
-
<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>
|
27662
|
-
<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>
|
27663
|
-
<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>
|
27664
|
-
<div class="pop-separator"></div>
|
27665
|
-
<button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;">${util.out('More...')}</button>
|
27666
|
-
</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>
|
27667
27691
|
</div>
|
27668
|
-
|
27692
|
+
</div>`;
|
27669
27693
|
dom.appendHtml(builderStuff, html);
|
27670
27694
|
quickadd = builderStuff.querySelector('.quickadd');
|
27671
27695
|
let tabs = quickadd.querySelectorAll('.is-pop-tab-item');
|
@@ -27765,7 +27789,7 @@ const renderQuickAdd = builder => {
|
|
27765
27789
|
util.addContent(html, mode);
|
27766
27790
|
});
|
27767
27791
|
elm = quickadd.querySelector('.add-button');
|
27768
|
-
|
27792
|
+
dom.addEventListener(elm, 'click', () => {
|
27769
27793
|
const mode = quickadd.getAttribute('data-mode');
|
27770
27794
|
let html = `<div>
|
27771
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>
|
@@ -27776,7 +27800,7 @@ const renderQuickAdd = builder => {
|
|
27776
27800
|
util.addContent(html, mode);
|
27777
27801
|
});
|
27778
27802
|
elm = quickadd.querySelector('.add-twobutton');
|
27779
|
-
|
27803
|
+
dom.addEventListener(elm, 'click', () => {
|
27780
27804
|
const mode = quickadd.getAttribute('data-mode');
|
27781
27805
|
let html = `<div>
|
27782
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>
|
@@ -27846,6 +27870,286 @@ const renderQuickAdd = builder => {
|
|
27846
27870
|
}
|
27847
27871
|
builder.addSnippet(html, bSnippet, noedit);
|
27848
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(form);
|
28015
|
+
fetch(form.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
|
+
});
|
27849
28153
|
elm = quickadd.querySelector('.add-table');
|
27850
28154
|
dom.addEventListener(elm, 'click', () => {
|
27851
28155
|
const mode = quickadd.getAttribute('data-mode');
|
@@ -31151,6 +31455,9 @@ class Util$1 {
|
|
31151
31455
|
const dom = this.dom;
|
31152
31456
|
pop.style.display = '';
|
31153
31457
|
dom.removeClass(pop, 'active');
|
31458
|
+
this.builder.doc.activeElement.blur();
|
31459
|
+
document.activeElement.blur();
|
31460
|
+
// this.builder.doc.body.focus();
|
31154
31461
|
pop.setAttribute('aria-hidden', true);
|
31155
31462
|
|
31156
31463
|
// pop.removeEventListener('keydown', this.handlePopKeyDown);
|
@@ -31345,6 +31652,9 @@ class Util$1 {
|
|
31345
31652
|
}
|
31346
31653
|
|
31347
31654
|
hideModal(modal) {
|
31655
|
+
this.builder.doc.activeElement.blur();
|
31656
|
+
document.activeElement.blur();
|
31657
|
+
// this.builder.doc.body.focus();
|
31348
31658
|
modal.setAttribute('aria-hidden', true);
|
31349
31659
|
|
31350
31660
|
/* Disable Modal Animation */
|
@@ -32010,6 +32320,10 @@ class Util$1 {
|
|
32010
32320
|
cellElement = rowElement.querySelector('div');
|
32011
32321
|
if (cellElement) cellElement.click(); //change active block to the newly created
|
32012
32322
|
|
32323
|
+
const builderStuff = this.builder.builderStuff;
|
32324
|
+
let quickadd = builderStuff.querySelector('.quickadd');
|
32325
|
+
if (quickadd) this.hidePop(quickadd); // hide pop
|
32326
|
+
|
32013
32327
|
// On Add Snippet from Modal
|
32014
32328
|
const modules = this.builder.doc.querySelectorAll('.dummy-module');
|
32015
32329
|
modules.forEach(module => {
|
@@ -44056,14 +44370,14 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
44056
44370
|
if (builder.opts.snippetModal) {
|
44057
44371
|
builder.opts.snippetList = '#divSnippetWindow';
|
44058
44372
|
let html = `
|
44059
|
-
<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">
|
44060
44374
|
<div class="is-modal-bar is-draggable">
|
44061
44375
|
<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">✕</button>
|
44062
44376
|
</div>
|
44063
44377
|
<div id="divSnippetWindow">
|
44064
44378
|
</div>
|
44065
44379
|
</div>
|
44066
|
-
`;
|
44380
|
+
`; // aria-hidden="true"
|
44067
44381
|
let snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
|
44068
44382
|
if (!snippetModal) {
|
44069
44383
|
dom.appendHtml(builder.builderStuff, html);
|
@@ -44072,6 +44386,9 @@ const renderSnippetPanel = (builder, snippetOpen) => {
|
|
44072
44386
|
builder.draggable('.snippetwindow .is-draggable');
|
44073
44387
|
const btnClose = snippetModal.querySelector('.is-modal-close');
|
44074
44388
|
btnClose.addEventListener('click', () => {
|
44389
|
+
builder.doc.activeElement.blur();
|
44390
|
+
// builder.doc.body.focus();
|
44391
|
+
snippetModal.setAttribute('aria-hidden', true);
|
44075
44392
|
snippetModal.classList.remove('active');
|
44076
44393
|
});
|
44077
44394
|
if (builder.snippetModalLeft) {
|
@@ -75981,7 +76298,7 @@ class Module {
|
|
75981
76298
|
<input id="hidContentModuleCode" type="hidden" />
|
75982
76299
|
<input id="hidContentModuleSettings" type="hidden" />
|
75983
76300
|
|
75984
|
-
<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">
|
75985
76302
|
<div class="is-modal-content">
|
75986
76303
|
<div class="is-modal-bar is-draggable">
|
75987
76304
|
${util.out('Module Settings')}
|
@@ -75994,7 +76311,8 @@ class Module {
|
|
75994
76311
|
</div>
|
75995
76312
|
</div>
|
75996
76313
|
</div>
|
75997
|
-
`;
|
76314
|
+
`; // aria-hidden="true"
|
76315
|
+
|
75998
76316
|
dom.appendHtml(builderStuff, html);
|
75999
76317
|
moduleModal = builderStuff.querySelector('.is-modal.custommodule');
|
76000
76318
|
this.moduleModal = moduleModal;
|
@@ -76104,6 +76422,11 @@ class Module {
|
|
76104
76422
|
w = '1500px';
|
76105
76423
|
h = '80vh';
|
76106
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';
|
76107
76430
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
|
76108
76431
|
moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
|
76109
76432
|
let btnClose = moduleModal.querySelector('.is-modal-close');
|
@@ -78040,20 +78363,20 @@ class RowTool {
|
|
78040
78363
|
const separator = columnMore.querySelector('.is-separator');
|
78041
78364
|
let nogrid = cell.closest('[nogrid]'); //dom.parentsHasAttribute(col, 'nogrid');
|
78042
78365
|
if (nogrid) {
|
78043
|
-
btnPrev.style.display = 'none';
|
78044
|
-
btnNext.style.display = 'none';
|
78045
|
-
btnUp.style.display = 'none';
|
78046
|
-
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';
|
78047
78370
|
if (btnIncrease) btnIncrease.style.display = 'none';
|
78048
78371
|
if (btnDecrease) btnDecrease.style.display = 'none';
|
78049
|
-
btnDuplicate.style.display = 'none';
|
78050
|
-
btnPrev.setAttribute('disabled', 'disabled');
|
78051
|
-
btnNext.setAttribute('disabled', 'disabled');
|
78052
|
-
btnUp.setAttribute('disabled', 'disabled');
|
78053
|
-
btnDown.setAttribute('disabled', 'disabled');
|
78054
|
-
btnIncrease.setAttribute('disabled', 'disabled');
|
78055
|
-
btnDecrease.setAttribute('disabled', 'disabled');
|
78056
|
-
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');
|
78057
78380
|
let btnColHtml = columnMore.querySelector('.cell-html');
|
78058
78381
|
if (btnColHtml) btnColHtml.style.display = '';
|
78059
78382
|
if (cell.getAttribute('data-html')) {
|
@@ -78063,20 +78386,20 @@ class RowTool {
|
|
78063
78386
|
this.columnTool.querySelector('.cell-more').setAttribute('disabled', 'disabled');
|
78064
78387
|
}
|
78065
78388
|
} else {
|
78066
|
-
btnPrev.style.display = '';
|
78067
|
-
btnNext.style.display = '';
|
78068
|
-
btnUp.style.display = '';
|
78069
|
-
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 = '';
|
78070
78393
|
if (btnIncrease) btnIncrease.style.display = '';
|
78071
78394
|
if (btnDecrease) btnDecrease.style.display = '';
|
78072
|
-
btnDuplicate.style.display = '';
|
78073
|
-
btnPrev.removeAttribute('disabled');
|
78074
|
-
btnNext.removeAttribute('disabled');
|
78075
|
-
btnUp.removeAttribute('disabled');
|
78076
|
-
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');
|
78077
78400
|
if (btnIncrease) btnIncrease.removeAttribute('disabled');
|
78078
78401
|
if (btnDecrease) btnDecrease.removeAttribute('disabled');
|
78079
|
-
btnDuplicate.removeAttribute('disabled');
|
78402
|
+
if (btnDuplicate) btnDuplicate.removeAttribute('disabled');
|
78080
78403
|
let btnColHtml = columnMore.querySelector('.cell-html');
|
78081
78404
|
if (btnColHtml) {
|
78082
78405
|
btnColHtml.style.display = '';
|
@@ -78090,21 +78413,21 @@ class RowTool {
|
|
78090
78413
|
|
78091
78414
|
if (row.childElementCount - num === 1) {
|
78092
78415
|
//-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
|
78093
|
-
btnPrev.style.display = 'none';
|
78094
|
-
btnNext.style.display = 'none';
|
78416
|
+
if (btnPrev) btnPrev.style.display = 'none';
|
78417
|
+
if (btnNext) btnNext.style.display = 'none';
|
78095
78418
|
if (btnIncrease) btnIncrease.style.display = 'none';
|
78096
78419
|
if (btnDecrease) btnDecrease.style.display = 'none';
|
78097
|
-
btnPrev.setAttribute('disabled', 'disabled');
|
78098
|
-
btnNext.setAttribute('disabled', 'disabled');
|
78420
|
+
if (btnPrev) btnPrev.setAttribute('disabled', 'disabled');
|
78421
|
+
if (btnNext) btnNext.setAttribute('disabled', 'disabled');
|
78099
78422
|
if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
|
78100
78423
|
if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
|
78101
78424
|
} else {
|
78102
|
-
btnPrev.style.display = '';
|
78103
|
-
btnNext.style.display = '';
|
78425
|
+
if (btnPrev) btnPrev.style.display = '';
|
78426
|
+
if (btnNext) btnNext.style.display = '';
|
78104
78427
|
if (btnIncrease) btnIncrease.style.display = '';
|
78105
78428
|
if (btnDecrease) btnDecrease.style.display = '';
|
78106
|
-
btnPrev.removeAttribute('disabled');
|
78107
|
-
btnNext.removeAttribute('disabled');
|
78429
|
+
if (btnPrev) btnPrev.removeAttribute('disabled');
|
78430
|
+
if (btnNext) btnNext.removeAttribute('disabled');
|
78108
78431
|
if (btnIncrease) btnIncrease.removeAttribute('disabled');
|
78109
78432
|
if (btnDecrease) btnDecrease.removeAttribute('disabled');
|
78110
78433
|
}
|
@@ -78132,18 +78455,18 @@ class RowTool {
|
|
78132
78455
|
}
|
78133
78456
|
}
|
78134
78457
|
if (cell.classList.contains('column-lock')) {
|
78135
|
-
btnPrev.style.display = 'none';
|
78136
|
-
btnNext.style.display = 'none';
|
78137
|
-
btnUp.style.display = 'none';
|
78138
|
-
btnDown.style.display = 'none';
|
78139
|
-
btnIncrease.style.display = 'none';
|
78140
|
-
btnDecrease.style.display = 'none';
|
78141
|
-
btnDuplicate.style.display = 'none';
|
78142
|
-
separator.style.display = 'none';
|
78143
|
-
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';
|
78144
78467
|
} else {
|
78145
|
-
separator.style.display = '';
|
78146
|
-
btnLock.style.display = '';
|
78468
|
+
if (separator) separator.style.display = '';
|
78469
|
+
if (btnLock) btnLock.style.display = '';
|
78147
78470
|
}
|
78148
78471
|
});
|
78149
78472
|
const btnCellRemove = coltool.querySelector('.cell-remove');
|
@@ -78271,20 +78594,33 @@ class RowTool {
|
|
78271
78594
|
const util = this.builder.util;
|
78272
78595
|
const dom = this.builder.dom;
|
78273
78596
|
let rowMore = builderStuff.querySelector('.rowmore');
|
78274
|
-
let htmlbutton = '';
|
78275
|
-
if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
|
78276
|
-
<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')}
|
78277
|
-
</button>`;
|
78278
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('');
|
78279
78621
|
let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
78280
78622
|
<div style="display:flex;flex-flow:wrap;">
|
78281
|
-
|
78282
|
-
<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>
|
78283
|
-
<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>
|
78284
|
-
${htmlbutton}
|
78285
|
-
<div class="is-separator"></div>
|
78286
|
-
<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>
|
78287
|
-
<button 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>
|
78623
|
+
${buttonsHtml}
|
78288
78624
|
</div>
|
78289
78625
|
</div>
|
78290
78626
|
`;
|
@@ -79747,29 +80083,40 @@ class ColumnTool {
|
|
79747
80083
|
const dom = this.builder.dom;
|
79748
80084
|
this.grid = new Grid(builder);
|
79749
80085
|
let columnMore = builderStuff.querySelector('.is-pop.columnmore');
|
79750
|
-
let resizebutton = `
|
79751
|
-
<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>
|
79752
|
-
<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>
|
79753
|
-
`;
|
79754
|
-
let htmlbutton = '';
|
79755
|
-
if (builder.opts.columnHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="cell-html">
|
79756
|
-
<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')}
|
79757
|
-
</button>`;
|
79758
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
|
+
|
79759
80115
|
// Refer to .is-col-tool in in rowtool.js
|
79760
80116
|
let html = `
|
79761
80117
|
<div class="is-pop columnmore" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
79762
80118
|
<div style="display:flex;flex-flow:wrap;">
|
79763
|
-
|
79764
|
-
<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>
|
79765
|
-
<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>
|
79766
|
-
<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>
|
79767
|
-
${resizebutton}
|
79768
|
-
<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>
|
79769
|
-
${htmlbutton}
|
79770
|
-
<div class="is-separator"></div>
|
79771
|
-
<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>
|
79772
|
-
<button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
|
80119
|
+
${buttonsHtml}
|
79773
80120
|
</div>
|
79774
80121
|
</div>
|
79775
80122
|
`;
|
@@ -86749,6 +87096,24 @@ class ElementTool {
|
|
86749
87096
|
let elementTool = builderStuff.querySelector('.is-element-tool');
|
86750
87097
|
let elementMore = builderStuff.querySelector('.elmmore');
|
86751
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('');
|
86752
87117
|
let html = `<div class="is-tool is-element-tool">
|
86753
87118
|
<button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
|
86754
87119
|
<svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
|
@@ -86766,12 +87131,7 @@ class ElementTool {
|
|
86766
87131
|
|
86767
87132
|
<div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
|
86768
87133
|
<div style="display:flex;flex-flow:wrap;">
|
86769
|
-
|
86770
|
-
<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>
|
86771
|
-
<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>
|
86772
|
-
${this.builder.opts.elementEditor ? `
|
86773
|
-
<button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
|
86774
|
-
` : ''}
|
87134
|
+
${buttonsHtml}
|
86775
87135
|
</div>
|
86776
87136
|
</div>
|
86777
87137
|
`;
|
@@ -87284,6 +87644,10 @@ class ElementTool {
|
|
87284
87644
|
}
|
87285
87645
|
if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
|
87286
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
|
+
}
|
87287
87651
|
}
|
87288
87652
|
this.builder.activeElement = activeElement;
|
87289
87653
|
if (activeElement) {
|
@@ -117961,7 +118325,7 @@ class PageSize {
|
|
117961
118325
|
position: relative;
|
117962
118326
|
flex:none;
|
117963
118327
|
background: #fff;
|
117964
|
-
|
118328
|
+
overflow: hidden;
|
117965
118329
|
box-shadow: none;
|
117966
118330
|
}
|
117967
118331
|
${css}
|
@@ -121261,6 +121625,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
121261
121625
|
// ON PASTE
|
121262
121626
|
// col.addEventListener('paste', this.handleCellPaste.bind(this));
|
121263
121627
|
col.addEventListener('paste', e => {
|
121628
|
+
if (e.target.closest('[data-html]')) return; // normal paste
|
121629
|
+
|
121264
121630
|
e.preventDefault();
|
121265
121631
|
let clipboardDataText = (e.clipboardData || window.clipboardData).getData('text');
|
121266
121632
|
let clipboardDataHtml = (e.clipboardData || window.clipboardData).getData('text/html');
|
@@ -121668,8 +122034,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
|
|
121668
122034
|
toggleSnippetModal() {
|
121669
122035
|
const snippetModal = this.builderStuff.querySelector('.is-modal.snippetwindow');
|
121670
122036
|
if (snippetModal.classList.contains('active')) {
|
122037
|
+
snippetModal.setAttribute('aria-hidden', true);
|
121671
122038
|
snippetModal.classList.remove('active');
|
121672
122039
|
} else {
|
122040
|
+
this.doc.activeElement.blur();
|
122041
|
+
// builder.doc.body.focus();
|
122042
|
+
snippetModal.setAttribute('aria-hidden', false);
|
121673
122043
|
snippetModal.classList.add('active');
|
121674
122044
|
}
|
121675
122045
|
}
|
@@ -151465,15 +151835,26 @@ ${currentHtml}
|
|
151465
151835
|
}
|
151466
151836
|
}
|
151467
151837
|
|
151468
|
-
|
151469
|
-
|
151470
|
-
let typeCss = '';
|
151471
|
-
if (typeClass) typeCss = typeClass + '.css';
|
151472
|
-
let newSection = this.builder.addSection(html, typeCss);
|
151838
|
+
if (this.builder.aiSectionReplace) htmlDocument.body.firstElementChild.classList.add('div-dummy');
|
151839
|
+
html = htmlDocument.body.innerHTML;
|
151473
151840
|
|
151474
|
-
if (
|
151841
|
+
if (this.builder.aiSectionReplace) {
|
151842
|
+
activeSection.outerHTML = html;
|
151843
|
+
this.builder.pageSetup();
|
151475
151844
|
this.clearSelection();
|
151476
|
-
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
|
+
}
|
151477
151858
|
}
|
151478
151859
|
} else {
|
151479
151860
|
activeBox.classList.add('replace-this'); // let savedClasses = activeBox.getAttribute('class');
|
@@ -151527,14 +151908,25 @@ ${currentHtml}
|
|
151527
151908
|
elementToReplace.parentNode.replaceChild(replacementElement, elementToReplace);
|
151528
151909
|
}
|
151529
151910
|
|
151911
|
+
if (this.builder.aiSectionReplace) htmlDocument.body.firstElementChild.classList.add('div-dummy');
|
151530
151912
|
const modifiedHtml = htmlDocument.body.innerHTML;
|
151531
|
-
let typeCss = '';
|
151532
|
-
if (typeClass) typeCss = typeClass + '.css';
|
151533
|
-
let newSection = this.builder.addSection(modifiedHtml, typeCss);
|
151534
151913
|
|
151535
|
-
if (
|
151914
|
+
if (this.builder.aiSectionReplace) {
|
151915
|
+
activeSection.outerHTML = modifiedHtml;
|
151916
|
+
this.builder.pageSetup();
|
151536
151917
|
this.clearSelection();
|
151537
|
-
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
|
+
}
|
151538
151930
|
}
|
151539
151931
|
} //Trigger Change event
|
151540
151932
|
// this.builder.settings.onChange();
|