@innovastudio/contentbuilder 1.5.84 → 1.5.85

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.84",
+  "version": "1.5.85",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -1208,7 +1208,7 @@ const renderQuickAdd = builder => {
   const util = builder.util;
   const builderStuff = builder.builderStuff;
   const dom = builder.dom;
-  let quickAddButtons = ['paragraph', 'headline', 'image', 'list', 'heading1', 'heading2', 'heading3', 'heading4', 'quote', 'preformatted', 'button', 'twobutton', 'map', 'youtube', 'video', 'icon', 'svg', 'table', 'social', 'code', 'spacer']; // default
+  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', 
 
   if (builder.quickAddButtons) {
     quickAddButtons = builder.quickAddButtons;
@@ -1236,6 +1236,9 @@ const renderQuickAdd = builder => {
     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>`,
     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>`,
     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>`,
+    form: `<button title="${util.out('Form')}" class="add-form"><span style="display:block;margin:0 0 8px;">
+        <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>
+        </span>${util.out('Form')}</button>`,
     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>`
   };
 
@@ -1243,6 +1246,12 @@ const renderQuickAdd = builder => {
   const filteredButtons = quickAddButtons.filter(item => {
     if (builder.opts.emailMode && item === 'button') return false;
     if (builder.opts.emailMode && item === 'twobutton') return false;
+    if (!builder.quickAddButtons) {
+      // if not custom specified by user
+      if (!builder.win.FormViewer && item === 'form') return false; // hide 'form' if FormViewer object not found
+      if (builder.win.FormViewer && item === 'svg') return false; // hide 'svg' if 'form' enabled.
+    }
+
     return true;
   });
   let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
@@ -1440,6 +1449,284 @@ const renderQuickAdd = builder => {
       }
       builder.addSnippet(html, bSnippet, noedit);
     });
+    elm = quickadd.querySelector('.add-form');
+    dom.addEventListener(elm, 'click', () => {
+      // const mode = quickadd.getAttribute('data-mode');
+
+      let html = `
+				<div class="row">
+                    <div class="column" data-noedit 
+                    data-dialog-width="1220px" 
+                    data-dialog-height="85vh" 
+                    data-module="form-builder" 
+                    data-module-desc="Form Builder" 
+                    data-html="
+
+							${encodeURIComponent(`
+
+                            <div id="_style_{id}" style="display:none">
+                                .animate-spin {
+                                    animation: spin 1s linear infinite;
+                                }
+                                @keyframes spin {
+                                    from {
+                                        transform: rotate(0deg);
+                                    }
+                                    to {
+                                        transform: rotate(360deg);
+                                    }
+                                }
+                            </div>
+                            <form id="form_{id}" method="POST" action="/formsubmission" style="padding: 25px 0 20px">
+                                <div id="{id}"></div>
+
+                                <button id="btn_send_{id}" type="submit" class="transition-all inline-flex items-center whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-6 mb-1 py-2 size-18 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Submit</button>
+                            
+                                <div id="status_{id}"></div>
+                            </form>
+                            
+                            <script>
+                            var css = document.querySelector('#_style_{id}').innerHTML;
+                            var head = document.getElementsByTagName('head')[0];
+                            var s = document.createElement('style');
+                            s.appendChild(document.createTextNode(css));
+                            head.appendChild(s);
+
+                            var docReady = function(fn) {
+                                var stateCheck = setInterval(function() {
+                                    if (document.readyState !== "complete") return;
+                                    clearInterval(stateCheck);
+                                    fn();
+                                }, 1);
+                            };
+                  
+                            docReady(function() {
+                    
+                                var elm = document.getElementById('{id}');
+                                var viewer = new FormViewer(elm, {
+                                    onChange: (json) => {
+                                        // console.log(json);
+                                    },
+                                    // formHeader: false,
+                                });
+
+                                let json = {
+    "title": "Register for the Tech Conference",
+    "description": "Join us for an insightful and engaging experience.",
+    "elements": [
+        {
+            "title": "Full Name:",
+            "name": "full_name",
+            "type": "short-text",
+            "isRequired": true,
+            "placeholder": "Enter your full name"
+        },
+        {
+            "title": "Ticket Type:",
+            "name": "ticket_type",
+            "type": "select",
+            "isRequired": true,
+            "choices": [
+                "Standard Admission",
+                "VIP Admission",
+                "Student Discount"
+            ]
+        },
+        {
+            "title": "Select the sessions you’re interested in:",
+            "name": "select_the_sessions_youre_interested_in",
+            "type": "multi-select",
+            "choices": [
+                "Keynote Speech",
+                "AI Workshop",
+                "Networking Session",
+                "Panel Discussion"
+            ]
+        },
+        {
+            "title": "Are you attending the networking dinner?",
+            "name": "are_you_attending_the_networking_dinner",
+            "type": "switch"
+        },
+        {
+            "title": "Email:",
+            "name": "email",
+            "type": "email",
+            "isRequired": true,
+            "placeholder": "Enter your email"
+        }
+    ]
+};
+                                
+                                viewer.view(json); // Render form
+
+                                const form = document.querySelector('#form_{id}');
+
+                                var btnSend = document.querySelector('#btn_send_{id}');
+
+                                var statusInfo = document.querySelector('#status_{id}');
+
+                                /* 
+                                form.addEventListener('submit', async (event) => {
+
+                                    event.preventDefault(); 
+                                
+                                    const form = event.target; 
+                                    const formData = new FormData(form); 
+
+                                    fetch('/formsubmission', {
+                                        method: 'POST',
+                                        body: formData,
+                                    })
+                                    .then(response=>response.json())
+                                    .then(response=>{
+                                        console.log(response);
+                                    });
+                                });
+                                */
+
+                                async function handleSubmit(event) {
+                                    event.preventDefault();
+
+                                    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';
+
+                                    var data = new FormData(event.target);
+                                    fetch(event.target.action, {
+                                        method: form.method,
+                                        body: data,
+                                        headers: {
+                                            'Accept': 'application/json'
+                                        }
+                                    }).then(response => {
+                                        if (response.ok) {
+                                            statusInfo.innerHTML = '<div class="text-center pt-4"><i class="bi bi-send-check size-64"></i>' +
+                                            '</div><div class="leading-11 text-center size-38 pb-4">Thanks for your submission!</div>';
+                                            form.reset();
+                                        } else {
+                                            response.json().then(data => {
+                                                if (Object.hasOwn(data, 'errors')) {
+                                                    statusInfo.innerHTML = data['errors'].map(error => error['message']).join(', ');
+                                                } else {
+                                                    statusInfo.innerHTML = '<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>';
+                                                }
+                                            });
+                                        }
+
+                                        btnSend.innerHTML = 'Submit';
+                                    }).catch(error => {
+                                        statusInfo.innerHTML = '<div class="leading-11 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>';
+
+                                        btnSend.innerHTML = 'Submit';
+                                    });
+                                }
+                                form.addEventListener('submit', handleSubmit);
+                          
+                            });
+                            </script>					
+							
+							`)}
+
+                        " 
+						
+						data-settings="
+
+							${encodeURIComponent(`
+                            {
+                              "json": {
+    "title": "Register for the Tech Conference",
+    "description": "Join us for an insightful and engaging experience.",
+    "elements": [
+        {
+            "title": "Full Name:",
+            "name": "full_name",
+            "type": "short-text",
+            "isRequired": true,
+            "placeholder": "Enter your full name"
+        },
+        {
+            "title": "Ticket Type:",
+            "name": "ticket_type",
+            "type": "select",
+            "isRequired": true,
+            "choices": [
+                "Standard Admission",
+                "VIP Admission",
+                "Student Discount"
+            ]
+        },
+        {
+            "title": "Select the sessions you’re interested in:",
+            "name": "select_the_sessions_youre_interested_in",
+            "type": "multi-select",
+            "choices": [
+                "Keynote Speech",
+                "AI Workshop",
+                "Networking Session",
+                "Panel Discussion"
+            ]
+        },
+        {
+            "title": "Are you attending the networking dinner?",
+            "name": "are_you_attending_the_networking_dinner",
+            "type": "switch"
+        },
+        {
+            "title": "Email:",
+            "name": "email",
+            "type": "email",
+            "isRequired": true,
+            "placeholder": "Enter your email"
+        }
+    ]
+},
+                                "thankYouMessage": "Thanks for your submission!",
+                                "errorMessage": "Oops! There was a problem submitting your form.",
+                                "buttonText": "Submit",
+                                "hideHeader": false,
+                                "formAction": "/formsubmission"
+                            }
+                          `)}
+						
+						">
+
+                    </div>
+                </div>
+			`;
+      let noedit = true;
+      let bSnippet = false;
+      let snippetPathReplace = builder.opts.snippetPathReplace;
+
+      // Convert snippet into your defined 12 columns grid   
+      let rowClass = builder.opts.row; //row
+      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']
+      if (rowClass !== '' && colClass.length === 12) {
+        // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+        html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+        html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+        html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+        html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+        html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+        html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+        html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+        html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+        html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+        html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+        html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+        html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+      }
+      html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
+
+      if (builder.opts.onAdd) {
+        html = builder.opts.onAdd(html);
+      }
+      if (snippetPathReplace.length > 0) {
+        if (snippetPathReplace[0] !== '') {
+          let regex = new RegExp(snippetPathReplace[0], 'g');
+          html = html.replace(regex, snippetPathReplace[1]);
+        }
+      }
+      builder.addSnippet(html, bSnippet, noedit);
+    });
     elm = quickadd.querySelector('.add-table');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
@@ -4745,6 +5032,8 @@ class Util {
     const dom = this.dom;
     pop.style.display = '';
     dom.removeClass(pop, 'active');
+    this.builder.doc.activeElement.blur();
+    // this.builder.doc.body.focus(); 
     pop.setAttribute('aria-hidden', true);
 
     // pop.removeEventListener('keydown', this.handlePopKeyDown);
@@ -4939,6 +5228,8 @@ class Util {
   }
 
   hideModal(modal) {
+    this.builder.doc.activeElement.blur();
+    // this.builder.doc.body.focus(); 
     modal.setAttribute('aria-hidden', true);
 
     /* Disable Modal Animation */
@@ -17650,14 +17941,14 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   if (builder.opts.snippetModal) {
     builder.opts.snippetList = '#divSnippetWindow';
     let html = `
-        <div class="is-modal active is-modal-content snippetwindow scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+        <div class="is-modal active is-modal-content snippetwindow scroll-darker" tabindex="-1" role="dialog" aria-modal="true">
             <div class="is-modal-bar is-draggable">
                 <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
             </div>
             <div id="divSnippetWindow">
             </div>   
         </div>
-        `;
+        `; // aria-hidden="true"
     let snippetModal = builder.builderStuff.querySelector('.is-modal.snippetwindow');
     if (!snippetModal) {
       dom.appendHtml(builder.builderStuff, html);
@@ -17666,6 +17957,9 @@ const renderSnippetPanel = (builder, snippetOpen) => {
     builder.draggable('.snippetwindow .is-draggable');
     const btnClose = snippetModal.querySelector('.is-modal-close');
     btnClose.addEventListener('click', () => {
+      builder.doc.activeElement.blur();
+      // builder.doc.body.focus(); 
+      snippetModal.setAttribute('aria-hidden', true);
       snippetModal.classList.remove('active');
     });
     if (builder.snippetModalLeft) {
@@ -49575,7 +49869,7 @@ class Module {
             <input id="hidContentModuleCode" type="hidden" />
             <input id="hidContentModuleSettings" type="hidden" />
             
-            <div class="is-modal custommodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal custommodule" tabindex="-1" role="dialog" aria-modal="true">
                 <div class="is-modal-content">
                     <div class="is-modal-bar is-draggable">
                         ${util.out('Module Settings')}
@@ -49588,7 +49882,8 @@ class Module {
                     </div>
                 </div>
             </div> 
-            `;
+            `; //  aria-hidden="true"
+
       dom.appendHtml(builderStuff, html);
       moduleModal = builderStuff.querySelector('.is-modal.custommodule');
       this.moduleModal = moduleModal;
@@ -95303,8 +95598,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   toggleSnippetModal() {
     const snippetModal = this.builderStuff.querySelector('.is-modal.snippetwindow');
     if (snippetModal.classList.contains('active')) {
+      snippetModal.setAttribute('aria-hidden', true);
       snippetModal.classList.remove('active');
     } else {
+      this.doc.activeElement.blur();
+      // builder.doc.body.focus(); 
+      snippetModal.setAttribute('aria-hidden', false);
       snippetModal.classList.add('active');
     }
   }