@innovastudio/contentbox 1.6.94 → 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.
@@ -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
- <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>
27642
- <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>
27643
- <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>
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
- if (elm) dom.addEventListener(elm, 'click', () => {
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
- if (elm) dom.addEventListener(elm, 'click', () => {
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(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
+ });
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" aria-hidden="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')}">&#10005;</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" aria-hidden="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
- <button 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>
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
- <button type="button" title="${util.out('Move Left')}" class="cell-prev"><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>
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
- <button type="button" title="${util.out('Move Up')}" class="elm-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>
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
- /* overflow: hidden;*/
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
- html = htmlDocument.body.innerHTML; // const typeClass = this.lib.getTypographyClass(html);
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 (newSection) {
151841
+ if (this.builder.aiSectionReplace) {
151842
+ activeSection.outerHTML = html;
151843
+ this.builder.pageSetup();
151475
151844
  this.clearSelection();
151476
- this.reSelect(newSection);
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 (newSection) {
151914
+ if (this.builder.aiSectionReplace) {
151915
+ activeSection.outerHTML = modifiedHtml;
151916
+ this.builder.pageSetup();
151536
151917
  this.clearSelection();
151537
- this.reSelect(newSection);
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();