@innovastudio/contentbuilder 1.4.62 → 1.4.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.62",
+  "version": "1.4.63",
   "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;
       }
@@ -17826,16 +17853,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 +18038,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 +74396,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 +74437,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 +74503,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 +74534,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 +74555,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 +75610,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>