@innovastudio/contentbuilder 1.4.62 → 1.4.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.62",
+  "version": "1.4.64",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -5468,3 +5468,17 @@ button:focus-visible {
         background-color: rgb(130 130 130 / 14%) !important;
     }
 }*/
+div[data-html] {
+  min-height: 70px;
+}
+
+[data-module=slider-builder] *,
+[data-module=text-builder] * {
+  outline: none !important;
+}
+
+/* Make slider block resizable */
+.padding-0[data-module=slider-builder],
+.padding-0[data-module=text-builder] {
+  padding: 0 2px 4px !important;
+}

package/public/contentbuilder/contentbuilder.esm.js

@@ -4343,6 +4343,16 @@ class Util {
     cell.classList.remove('eleventh');
     cell.classList.remove('twelfth');
   }
+  getAllColumns(row) {
+    let arrCells = [];
+    const dom = this.dom;
+    const cols = dom.elementChildren(row);
+    cols.forEach(col => {
+      if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+      arrCells.push(col);
+    });
+    return arrCells;
+  }
   fixLayout(row) {
     const dom = this.dom;
 
@@ -4364,8 +4374,25 @@ class Util {
       if (item.classList.contains('is-row-tool')) return;
       if (item.classList.contains('is-col-tool')) return;
       if (item.classList.contains('is-rowadd-tool')) return;
-      item.style.width = '';
-      item.style.flex = '';
+
+      // item.style.width = '';
+      // item.style.flex = '';
+      if (item.getAttribute('data-html')) {
+        // Don't change width on custom block
+        if (!item.style.width) {
+          // But if width is not set, add default 50%
+          item.style.width = '50%';
+          item.style.flex = '0 0 auto';
+        }
+        if (this.getAllColumns(row).length === 1) {
+          // only 1 col in a row
+          item.style.width = '';
+          item.style.flex = '';
+        }
+      } else {
+        item.style.width = '';
+        item.style.flex = '';
+      }
       if (item.classList.contains('sm-hidden')) {
         smHidden = true;
       }
@@ -5452,6 +5479,7 @@ class Util {
     localStorage.removeItem('_dictation');
     localStorage.removeItem('_mic');
     localStorage.removeItem('_autosendcommand');
+    localStorage.removeItem('_sampleshown');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -14681,7 +14709,7 @@ class HtmlUtil {
     }
     return html;
   }
-  readHtml(content, view, multiple) {
+  readHtml(content, view, multiple, excludeCustomBlock) {
     //view = true (hide internal attributes). view = false (actual html)
 
     //Make absolute
@@ -14974,6 +15002,12 @@ class HtmlUtil {
         }
       }
     });
+    if (excludeCustomBlock) {
+      const elmCustomBlocks = tmp.querySelectorAll('[data-html]');
+      elmCustomBlocks.forEach(elm => {
+        elm.innerHTML = '';
+      });
+    }
     html = '';
     if (multiple) {
       //ContentBox
@@ -17826,16 +17860,27 @@ class Grid {
         this.builder.uo.saveForUndo();
         let w = this.resizeColumn(cell, true, arrColumns.length);
         if (w) {
-          for (let i = 1; i < arrColumns.length; i++) {
-            let cellNext = arrColumns[i];
-            // cellNext.style.width = '100%';
-            cellNext.style.width = '';
-            cellNext.style.flex = '';
-            this.removeColClasses(cellNext);
-          }
           cell.style.width = w;
           cell.style.flex = '0 0 auto';
           this.removeColClasses(cell);
+          for (let i = 1; i < arrColumns.length; i++) {
+            let cellNext = arrColumns[i];
+            if (cellNext !== cell) {
+              // cellNext.style.width = '';
+              // cellNext.style.flex = '';
+              if (!cellNext.getAttribute('data-html')) {
+                cellNext.style.width = '';
+                cellNext.style.flex = '';
+              } else {
+                // For module, don't change width, except if there are 2 columns only
+                if (arrColumns.length === 2) {
+                  cellNext.style.width = 100 - parseFloat(w) + '%';
+                  cellNext.style.flex = '0 0 auto';
+                }
+              }
+              this.removeColClasses(cellNext);
+            }
+          }
         }
         this.builder.opts.onChange();
       }
@@ -18000,16 +18045,27 @@ class Grid {
         this.builder.uo.saveForUndo();
         let w = this.resizeColumn(cell, false, arrColumns.length);
         if (w) {
-          for (let i = 1; i < arrColumns.length; i++) {
-            let cellNext = arrColumns[i];
-            // cellNext.style.width = '100%';
-            cellNext.style.width = '';
-            cellNext.style.flex = '';
-            this.removeColClasses(cellNext);
-          }
           cell.style.width = w;
           cell.style.flex = '0 0 auto';
           this.removeColClasses(cell);
+          for (let i = 1; i < arrColumns.length; i++) {
+            let cellNext = arrColumns[i];
+            if (cellNext !== cell) {
+              // cellNext.style.width = '';
+              // cellNext.style.flex = '';
+              if (!cellNext.getAttribute('data-html')) {
+                cellNext.style.width = '';
+                cellNext.style.flex = '';
+              } else {
+                // For module, don't change width, except if there are 2 columns only
+                if (arrColumns.length === 2) {
+                  cellNext.style.width = 100 - parseFloat(w) + '%';
+                  cellNext.style.flex = '0 0 auto';
+                }
+              }
+              this.removeColClasses(cellNext);
+            }
+          }
         }
         this.builder.opts.onChange();
       }
@@ -74347,25 +74403,33 @@ class Resize {
               if (item === col) return;
 
               // // item.style.width = '100%';
-              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // if(!item.getAttribute('data-html')) item.style.width = '100%';
               // item.style.flex = '';
               if (numOfCols === 2) {
-                if (!item.getAttribute('data-module')) {
+                if (!item.getAttribute('data-html')) {
                   item.style.width = '100%';
                   item.style.flex = '';
                 }
               } /*else {
-                  // if(!item.getAttribute('data-module') && !item.style.width) {
+                  // if(!item.getAttribute('data-html') && !item.style.width) {
                   //     item.style.width = '100%';
                   //     item.style.flex = '';
                   // }
-                  if(!item.getAttribute('data-module') && item===col.nextElementSibling) {
+                  if(!item.getAttribute('data-html') && item===col.nextElementSibling) {
                       item.style.width = '100%';
                       item.style.flex = '';
                   }
                 }*/
-            });
 
+              /* New: Specify width for module only, and only if num of columns = 2 */
+              if (numOfCols === 2) {
+                if (item.getAttribute('data-html')) {
+                  let percentage = col.offsetWidth / col.parentNode.offsetWidth * 100;
+                  item.style.width = 100 - percentage + '%';
+                  item.style.flex = '0 0 auto';
+                }
+              }
+            });
             if (numOfCols === 1) {
               col.style.width = '100%';
             }
@@ -74380,9 +74444,18 @@ class Resize {
               if (item === col) return;
               if (item.style.width === '') {
                 // item.style.width = '100%';
-                if (!item.getAttribute('data-module')) item.style.width = '100%';
+                if (!item.getAttribute('data-html')) item.style.width = '100%';
                 item.style.flex = '';
               }
+
+              /* New: Specify width for module only, and only if num of columns = 2 */
+              if (numOfCols === 2) {
+                if (item.getAttribute('data-html')) {
+                  let percentage = col.offsetWidth / col.parentNode.offsetWidth * 100;
+                  item.style.width = 100 - percentage + '%';
+                  item.style.flex = '0 0 auto';
+                }
+              }
             });
           }
           // /adjust others
@@ -74437,19 +74510,19 @@ class Resize {
               if (item === col) return;
 
               // // item.style.width = '100%';
-              // if(!item.getAttribute('data-module')) item.style.width = '100%';
+              // if(!item.getAttribute('data-html')) item.style.width = '100%';
               // item.style.flex = '';
               if (numOfCols === 2) {
-                if (!item.getAttribute('data-module')) {
+                if (!item.getAttribute('data-html')) {
                   item.style.width = '100%';
                   item.style.flex = '';
                 }
               } /*else {
-                  // if(!item.getAttribute('data-module') && !item.style.width) {
+                  // if(!item.getAttribute('data-html') && !item.style.width) {
                   //     item.style.width = '100%';
                   //     item.style.flex = '';
                   // }
-                  if(!item.getAttribute('data-module') && item===col.nextElementSibling) {
+                  if(!item.getAttribute('data-html') && item===col.nextElementSibling) {
                       item.style.width = '100%';
                       item.style.flex = '';
                   }
@@ -74468,7 +74541,7 @@ class Resize {
             // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
             // // Refresh Module
-            // if(item.getAttribute('data-module')) {
+            // if(item.getAttribute('data-html')) {
             //     this.builder.util.refreshModuleLayout(item);
             // }
 
@@ -74489,7 +74562,7 @@ class Resize {
             if (item.classList.contains('is-row-tool')) return;
             if (item.classList.contains('is-rowadd-tool')) return;
             if (item.classList.contains('is-col-tool')) return;
-            if (item.getAttribute('data-module')) {
+            if (item.getAttribute('data-html')) {
               let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
               item.style.width = moduleWidth + '%';
               item.style.flex = 'none';
@@ -75544,10 +75617,24 @@ class ContentStuff {
         
         /* Make slider block resizable */
         .is-builder > div > div[data-module=slider-builder].cell-active {
-            padding: 0 2px 4px !important;
+            /*padding: 0 2px 4px !important;*/
             z-index: 1 !important;
         }
+                
+        div[data-html] {
+            min-height: 70px;
+        }
         
+        [data-module="slider-builder"] *,
+        [data-module="text-builder"] * {
+            outline: none !important;
+        }
+
+        /* Make slider block resizable */
+        .padding-0[data-module="slider-builder"],
+        .padding-0[data-module="text-builder"] {
+            padding: 0 2px 4px !important;
+        }
         `;
     builder.contentStuff.insertAdjacentHTML('afterbegin', `
         <style>
@@ -77400,7 +77487,7 @@ class Dictation {
                 align-items: center;">
                     ${util.out('Send a Command')}</span>
                 <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
-                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    <svg class="is-icon-flex"style="width:20px;height:20px"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
             </div>
             <div style="display:flex;flex-direction:column;justify-content:space-between;position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
@@ -77447,6 +77534,11 @@ class Dictation {
     const btnClear = builderStuff.querySelector('.cmd-clear-command');
     const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
     const btnCommandList = builderStuff.querySelector('.cmd-command-list');
+    const inpCommand = this.builderStuff.querySelector('.inp-command');
+    if (localStorage.getItem('_sampleshown') === null) {
+      inpCommand.setAttribute('placeholder', this.builder.sampleCommand);
+      localStorage.setItem('_sampleshown', true);
+    }
     this.builder.commandText = '';
     this.builder.autoSendCommand = false;
     if (localStorage.getItem('_dictation') !== null) {
@@ -77557,7 +77649,6 @@ class Dictation {
 
       this.opts.send(question);
     });
-    const inpCommand = this.builderStuff.querySelector('.inp-command');
     inpCommand.addEventListener('keydown', e => {
       if (e.keyCode === 13 && !e.shiftKey) {
         e.preventDefault();
@@ -77591,7 +77682,17 @@ class Dictation {
     }
   }
   openDictation() {
+    if (this.modalCommand.classList.contains('active')) {
+      setTimeout(() => {
+        // Needed if opens programmatically on builder start (wait until all loaded)
+        const inpCommand = this.modalCommand.querySelector('.inp-command');
+        inpCommand.focus();
+      }, 600);
+      return;
+    }
     this.modalCommand.classList.add('active');
+    const inpCommand = this.modalCommand.querySelector('.inp-command');
+    inpCommand.focus();
     localStorage.setItem('_dictation', '1');
     const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
     const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
@@ -78419,6 +78520,7 @@ class ContentBuilder {
       /* Prompt/Command Stuff */
       isContentBox: false,
       sendCommandUrl: 'http://localhost:8081/answer',
+      //sampleCommand: '',
       speechRecognitionLang: 'en-US',
       headlineList: ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', 'We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.', 'Creative and Inspiring'],
       shortCommandList: {
@@ -79693,9 +79795,9 @@ class ContentBuilder {
     const htmlutil = new HtmlUtil(this);
     htmlutil.viewHtmlExternal();
   }
-  readHtml(content, view, multiple) {
+  readHtml(content, view, multiple, excludeCustomBlock) {
     const htmlutil = new HtmlUtil(this);
-    return htmlutil.readHtml(content, view, multiple);
+    return htmlutil.readHtml(content, view, multiple, excludeCustomBlock);
   }
   fromViewToActual(html) {
     const htmlutil = new HtmlUtil(this);