@innovastudio/contentbuilder 1.5.95 → 1.5.97

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -4371,6 +4371,8 @@ button:focus-visible {
   text-align: center;
   border-top: transparent 46px solid !important;
   outline: none;
+  scrollbar-width: thin;
+  scrollbar-color: #aaa #f0f0f0;
 }
 #_cbhtml .is-design-list > div,
 .is-ui .is-design-list > div {

package/public/contentbuilder/contentbuilder.esm.js

@@ -86,67 +86,21 @@ class Snippets {
                     outline: transparent 1px solid;
                 }
 
-                
-                        
                 /* Scrollbar for modal */
-
-                /* Darker color, because background for snippet thumbnails is always light. */
-                .dark * {
-                    scrollbar-width: thin;
-                    scrollbar-color: rgb(78 78 78 / 62%) auto;
-                }
-                .dark *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .dark *::-webkit-scrollbar-track {
-                    background: transparent;
+                .is-design-list {
+                    scrollbar-width: thin; 
+                    scrollbar-color: #aaa #f0f0f0;
                 }
-                .dark *::-webkit-scrollbar-thumb {
-                    background-color:rgb(78 78 78 / 62%);
-                } 
-
-                .colored-dark * {
+                .dark .is-design-list {
                     scrollbar-width: thin;
-                    scrollbar-color: rgb(100, 100, 100) auto;
-                }
-                .colored-dark *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .colored-dark *::-webkit-scrollbar-track {
-                    background: transparent;
+                    scrollbar-color: #696969 #a1a1a1;
+                    /* scrollbar-color: rgba(255, 255, 255, 0.3) rgb(80, 80, 80); */
                 }
-                .colored-dark *::-webkit-scrollbar-thumb {
-                    background-color:rgb(100, 100, 100);
-                } 
-
-                .colored * {
+                .colored-dark .is-design-list  {
                     scrollbar-width: thin;
-                    scrollbar-color: rgba(0, 0, 0, 0.4) auto;
+                    scrollbar-color: #7a7a7a #bebebe;
                 }
-                .colored *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .colored *::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .colored *::-webkit-scrollbar-thumb {
-                    background-color: rgba(0, 0, 0, 0.4);
-                } 
 
-                .light * {
-                    scrollbar-width: thin;
-                    scrollbar-color: rgba(0, 0, 0, 0.4) auto;
-                }
-                .light *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .light *::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .light *::-webkit-scrollbar-thumb {
-                    background-color: rgba(0, 0, 0, 0.4);
-                } 
-        
                 svg {
                     fill: ${this.builder.styleSnippetColor};
                 }
@@ -1464,23 +1418,28 @@ const renderQuickAdd = builder => {
 
 							${encodeURIComponent(`
                             <div id="_style_{id}" style="display:none">
-                                .animate-spin {
-                                    animation: spin 1s linear infinite;
+                                #{id} {
+                                    transition: all 0.3s ease-out;
+                                    height: auto;
                                 }
-                                @keyframes spin {
-                                    from {
-                                        transform: rotate(0deg);
-                                    }
-                                    to {
-                                        transform: rotate(360deg);
-                                    }
+                                #{id}.collapsed {
+                                    overflow: hidden;
+                                    height: 0;
+                                }
+                                #status_{id} {
+                                    transition: all 0.3s ease-out;
+                                    height: auto;
+                                }
+                                #status_{id}.collapsed {
+                                    overflow: hidden;
+                                    height: 0;
                                 }
                             </div>
-                            <div id="form_{id}" style="padding: 25px 0 20px">
+                            <form id="form_{id}" method="POST" action="/formsubmission" style="padding: 25px 0 20px">
                                 <div id="{id}"></div>
 
-                                <div id="status_{id}"></div>
-                            </div>
+                                <div id="status_{id}" class="collapsed"></div>
+                            </form>
                             
                             <script>
                             var css = document.querySelector('#_style_{id}').innerHTML;
@@ -1502,11 +1461,7 @@ const renderQuickAdd = builder => {
                             docReady(function() {
                     
                                 var elm = document.getElementById('{id}');
-                                var viewer = new FormViewer(elm, {
-                                    onChange: (json) => {
-                                        // console.log(json);
-                                    },
-                                });
+                                var viewer = new FormViewer(elm);
 
                                 let json = {
     "title": "Register for the Tech Conference",
@@ -1562,68 +1517,51 @@ const renderQuickAdd = builder => {
 
                                 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);
-                                    });
-                                });
-                                */
-
+                                var form = document.querySelector('#form_{id}');
 
                                 async function handleSubmit(event) {
                                     event.preventDefault();
-                                    
-                                    var form = event.target;
-                                    form.action = '/formsubmission';
-                                    form.method = 'POST';
 
                                     var btnSend = form.querySelector('.btn-submitform');
                                     
                                     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(form);
+
                                     fetch(form.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>';
+                                    })
+                                    .then(response=>response.json())
+                                    .then(data=>{
+                                        if(!data.error) {
+                                            statusInfo.innerHTML = '<div class="text-center pt-4 pb-4"><i class="bi bi-send-check size-64"></i>' +
+                                            '</div><div class="leading-14 text-center size-38 pb-4">Thanks for your submission!</div>';
                                             form.reset();
+
+                                            elm.classList.add('collapsed');
+                                            setTimeout(function(){
+                                                statusInfo.classList.remove('collapsed');
+                                            },300);
+
                                         } 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>';
-                                                }
-                                            });
+                                            statusInfo.innerHTML = '<div class="leading-14 text-center size-38 pt-4 pb-4">Oops! There was a problem submitting your form.</div>';
+                                        
+                                            // elm.classList.toggle('collapsed');
+                                            setTimeout(function(){
+                                                // statusInfo.innerHTML = data.error;
+                                                statusInfo.classList.remove('collapsed');
+                                            },300);
                                         }
 
-                                        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';
                                     });
                                 }
 
-                                viewer.settings.onSubmit = handleSubmit;
+                                form.addEventListener('submit', handleSubmit);
                           
                             });
                             </script>					
@@ -18014,26 +17952,26 @@ const renderSnippetPanel = (builder, snippetOpen) => {
           }
         });
       }
+
+      /*
       let snippetid;
-      if (isMobile && builder.isContentBox) {
-        const items = snippetlist.querySelectorAll('.snippet-item');
-        items.forEach(item => {
-          if (item.classList.contains('data-click')) return;
-          item.addEventListener('touchstart', () => {
-            snippetid = item.getAttribute('data-id');
-          }, {
-            passive: false
-          });
-          item.addEventListener('touchend', () => {
-            builder.dropSnippet(snippetid);
-          }, {
-            passive: false
+      if(isMobile && builder.isContentBox) {
+          const items = snippetlist.querySelectorAll('.snippet-item');
+          items.forEach(item=>{
+              if(item.classList.contains('data-click')) return;
+               item.addEventListener('touchstart', ()=>{
+                  snippetid = item.getAttribute('data-id');
+              }, { passive: false });
+              item.addEventListener('touchend', ()=>{
+                  builder.dropSnippet(snippetid);
+              }, { passive: false });
+               item.classList.add('data-click');
           });
-          item.classList.add('data-click');
-        });
       }
+      */
     }
   });
+
   inpSnippet.setValue(defaultcatval + '');
   inpSnippet.closeOptions();
   if (builder.opts.snippetList === '#divSnippetList') {
@@ -18151,28 +18089,27 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
   let activeBuilderArea;
   let itemHeight;
+
+  /*
   const isMobile = dom.detectMobileOrTablet();
-  let snippetid;
+   let snippetid;
   let useClick = false;
-  if (isMobile && builder.isContentBox) {
-    const items = snippetlist.querySelectorAll('.snippet-item');
-    items.forEach(item => {
-      if (item.classList.contains('data-click')) return;
-      item.addEventListener('touchstart', () => {
-        snippetid = item.getAttribute('data-id');
-      }, {
-        passive: false
-      });
-      item.addEventListener('touchend', () => {
-        builder.dropSnippet(snippetid);
-      }, {
-        passive: false
-      });
-      item.classList.add('data-click');
-    });
-    useClick = true;
-  }
-  if (!useClick) new Sortable(snippetlist, {
+  if(isMobile && builder.isContentBox) {
+      const items = snippetlist.querySelectorAll('.snippet-item');
+      items.forEach(item=>{
+          if(item.classList.contains('data-click')) return;
+           item.addEventListener('touchstart', ()=>{
+              snippetid = item.getAttribute('data-id');
+          }, { passive: false });
+          item.addEventListener('touchend', ()=>{
+              builder.dropSnippet(snippetid);
+          }, { passive: false });
+           item.classList.add('data-click');
+      });
+      useClick=true;
+  }
+   if(!useClick) */
+  new Sortable(snippetlist, {
     // forceFallback: safariAgent,
     group: {
       name: 'shared',
@@ -50011,6 +49948,12 @@ class Module {
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
+    var themeLight = module.getAttribute('data-theme-light');
+    if (themeLight || modulename === 'form-builder') {
+      moduleModal.classList.add('theme-light');
+    } else {
+      moduleModal.classList.remove('theme-light');
+    }
     let btnClose = moduleModal.querySelector('.is-modal-close');
     dom.addEventListener(btnClose, 'click', () => {
       util.hideModal(moduleModal);
@@ -50064,6 +50007,17 @@ class Module {
         btn.style.display = '';
       }
       this.repositionModuleTool();
+
+      // Button clicks inside a module can perform tasks that affect column size. 
+      // This can cause the module tool or lockIndicator to have an incorrect position, 
+      // so we hide these tools.
+      const activeElement = this.builder.doc.activeElement;
+      if (activeElement.tagName.toLowerCase() === 'button') {
+        if (this.moduleTool) this.moduleTool.style.display = '';
+        setTimeout(() => {
+          this.builder.colTool.lockIndicator.style.display = '';
+        }, 0);
+      }
     } else {
       this.builder.activeModule = null;
       if (this.moduleTool) this.moduleTool.style.display = '';