@innovastudio/contentbuilder 1.4.12 → 1.4.14

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -57467,16 +57467,20 @@ class RowTool {
 
                             <div class="div-row-wrapcolumns" style="display:flex;flex-direction:column;padding-bottom:7px">
                                 <div style="padding-top:20px;padding-bottom:3px;">${util.out('Wrap Columns (Breakpoint)')}:</div>
-                                <div style="padding-top:3px;display:flex;align-items: center;">
-                                    <button title="${util.out('Tablet (Landscape)')}" class="input-breakpoint" data-value="md" style="width:40px;height:25px;">
-                                        <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
-                                    </button>
-                                    <button title="${util.out('Tablet (Portrait)')}" class="input-breakpoint" data-value="sm" style="width:40px;height:25px;">
-                                        <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
-                                    </button>
-                                    <button title="${util.out('Mobile')}" class="input-breakpoint on" data-value="xs" style="width:40px;height:25px;">
-                                        <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
-                                    </button>
+                                <div style="padding-top:3px;padding-bottom:5px;display:flex;align-items: center;">
+
+                                    <label class="flex mr-3" title="${util.out('Tablet (Landscape)')}">
+                                        <input type="radio" id="rdoColMdWrap" name="boxWrap" value="md">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
+                                    <label class="flex mr-3" title="${util.out('Tablet (Portrait)')}">
+                                        <input type="radio" id="rdoColSmWrap" name="boxWrap" value="sm">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
+                                    <label class="flex" title="${util.out('Mobile')}">
+                                        <input type="radio" id="rdoColXsWrap" name="boxWrap" value="xs">
+                                        <svg class="is-icon-flex" style="margin-left:3px;width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                    </label>
 
                                 </div>
                             </div>
@@ -57513,8 +57517,9 @@ class RowTool {
                                 </button>
                             </div>
 
-                            <label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox"  style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
-                            
+                            <div id="divReverseColumns" style="diplay:none">
+                                <label for="chkReverseColumns" style="margin:20px 0 0;display:flex"><input id="chkReverseColumns" type="checkbox"  style="margin:0 7px 0 0"/><span>${util.out('Reverse Columns')}</span></label>
+                            </div>
                         </div>
 
                         <div id="divRowMore" class="is-tab-content" data-group="rowsettings" tabindex="-1">
@@ -57729,32 +57734,25 @@ class RowTool {
         this.builder.opts.onChange();
       }); // Breakpoint
 
-      let btns = this.rowSettings.querySelectorAll('.input-breakpoint');
-      btns.forEach(btn => {
-        btn.addEventListener('click', () => {
+      rowSettings.querySelectorAll('input[name="boxWrap"]').forEach(input => {
+        input.addEventListener('change', () => {
           let row = util.rowSelected();
           if (!row) return;
           this.builder.uo.saveForUndo();
-          let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
-          elms.forEach(elm => {
-            elm.classList.remove('on');
-          });
-          btn.classList.add('on');
-          let target = btn.getAttribute('data-value');
 
-          if (target === 'xs') {
+          if (input.value === 'xs') {
             row.classList.remove('sm-wrap');
             row.classList.remove('md-wrap');
-          } else if (target === 'sm') {
+          } else if (input.value === 'sm') {
             row.classList.remove('md-wrap');
             row.classList.add('sm-wrap');
-          } else if (target === 'md') {
-            row.classList.remove('smd-wrap');
+          } else if (input.value === 'md') {
+            row.classList.remove('sm-wrap');
             row.classList.add('md-wrap');
           } //Trigger Change event
 
 
-          this.builder.onChange();
+          this.builder.opts.onChange();
         });
       });
       const chkReverseBoxes = this.rowSettings.querySelector('#chkReverseColumns');
@@ -57795,7 +57793,7 @@ class RowTool {
         this.builder.settings.onChange();
       }); // Responsive Visibility
 
-      btns = this.rowSettings.querySelectorAll('.input-device');
+      let btns = this.rowSettings.querySelectorAll('.input-device');
       btns.forEach(btn => {
         btn.addEventListener('click', () => {
           let row = util.rowSelected();
@@ -57995,7 +57993,31 @@ class RowTool {
     // });
   }
 
-  realtimeVisibility(row) {
+  realtimeVisibility(row, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.rowSettings.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.rowSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.rowSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.rowSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.rowSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.rowSettings.querySelector('.div-target');
     let divVisibility = this.rowSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
@@ -58006,12 +58028,16 @@ class RowTool {
 
     if (target === 'xs') {
       valReverse = row.classList.contains('xs-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
     } else if (target === 'sm') {
       valReverse = row.classList.contains('sm-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
     } else if (target === 'md') {
       valReverse = row.classList.contains('md-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
     } else {
       valReverse = row.classList.contains('desktop-column-reverse');
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
     }
 
     const chkReverseColumns = this.rowSettings.querySelector('#chkReverseColumns');
@@ -58324,18 +58350,26 @@ class RowTool {
 
     let actualRow = row.parentNode; // row is actually row overlay
 
-    this.realtimeVisibility(actualRow);
-    let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
-    elms.forEach(elm => {
-      elm.classList.remove('on');
-    });
+    this.realtimeVisibility(actualRow, true);
+    const divReverseBoxes = this.rowSettings.querySelector('#divReverseColumns');
+    let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
+
+    if (actualRow.querySelector('.is-row-overlay')) {
+      num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
+    }
+
+    if (actualRow.childElementCount - num > 1) {
+      divReverseBoxes.style.display = 'flex';
+    } else {
+      divReverseBoxes.style.display = 'none';
+    }
 
     if (actualRow.classList.contains('md-wrap')) {
-      this.rowSettings.querySelector('.input-breakpoint[data-value="md"]').classList.add('on');
+      this.rowSettings.querySelector('#rdoColMdWrap').checked = true;
     } else if (actualRow.classList.contains('sm-wrap')) {
-      this.rowSettings.querySelector('.input-breakpoint[data-value="sm"]').classList.add('on');
+      this.rowSettings.querySelector('#rdoColSmWrap').checked = true;
     } else {
-      this.rowSettings.querySelector('.input-breakpoint[data-value="xs"]').classList.add('on');
+      this.rowSettings.querySelector('#rdoColXsWrap').checked = true;
     } //More
 
 
@@ -60283,6 +60317,12 @@ class ColumnTool {
       });
       let btnVisible = this.cellSettings.querySelector('.input-visible');
       let btnHidden = this.cellSettings.querySelector('.input-hidden');
+
+      const rowHasHiddenColumns = (row, target) => {
+        let cols = row.querySelectorAll(`.${target}-hidden`);
+        return cols.length > 0;
+      };
+
       btnVisible.addEventListener('click', () => {
         let cell = this.util.cellSelected();
         if (!cell) return;
@@ -60295,12 +60335,13 @@ class ColumnTool {
           cell.classList.remove('xs-hidden');
         } else if (target === 'sm') {
           cell.classList.remove('sm-hidden');
-          cell.parentNode.classList.remove('sm-autofit');
+          if (!rowHasHiddenColumns(cell.parentNode, 'sm')) cell.parentNode.classList.remove('sm-autofit');
         } else if (target === 'md') {
           cell.classList.remove('md-hidden');
-          cell.parentNode.classList.remove('md-autofit');
+          if (!rowHasHiddenColumns(cell.parentNode, 'md')) cell.parentNode.classList.remove('md-autofit');
         } else if (target === '') {
           cell.classList.remove('desktop-hidden');
+          if (!rowHasHiddenColumns(cell.parentNode, 'desktop')) cell.parentNode.classList.remove('desktop-autofit');
         }
 
         btnVisible.classList.add('on');
@@ -60326,6 +60367,7 @@ class ColumnTool {
           cell.parentNode.classList.add('md-autofit');
         } else if (target === '') {
           cell.classList.add('desktop-hidden');
+          cell.parentNode.classList.add('desktop-autofit');
         }
 
         btnVisible.classList.remove('on');
@@ -60523,7 +60565,7 @@ class ColumnTool {
       dom.addClass(btn, 'on');
     }
 
-    this.realtimeVisibility(cell); //More
+    this.realtimeVisibility(cell, true); //More
 
     let inpCellId = this.cellSettings.querySelector('.input-cell-id');
     inpCellId.value = '';
@@ -60539,12 +60581,46 @@ class ColumnTool {
     inpCellClasses.value = classes;
   }
 
-  realtimeVisibility(cell) {
+  realtimeVisibility(cell, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.cellSettings.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.cellSettings.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.cellSettings.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.cellSettings.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.cellSettings.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.cellSettings.querySelector('.div-target');
     let divVisibility = this.cellSettings.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
     let valVisibility = this.builder.responsive.getVisibility(cell, target);
-    this.builder.responsive.showVisibility(divVisibility, valVisibility);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility); // Live Preview Sync
+
+    if (target === 'xs') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(375);
+    } else if (target === 'sm') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(768);
+    } else if (target === 'md') {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1024);
+    } else {
+      if (!initialOpen) this.builder.livePreview.resizePreview(1920);
+    }
   }
 
   openImagePicker(currentUrl, callback, btn) {
@@ -76694,7 +76770,7 @@ class LivePreview {
                 z-index:100021 !important
             }
             </style>
-            <div style="z-index:10002;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div style="z-index:10004;${this.builder.previewStyle}" class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-bar is-draggable" draggable=""> 
                     <span>${util.out('Live Preview')}</span>
                     <button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
@@ -76727,41 +76803,18 @@ class LivePreview {
         this.closePreview();
       });
       const btnModalSize = modal.querySelector('.is-modal-size');
-      const infoDevice = modal.querySelector('.is-modal-device');
       btnModalSize.addEventListener('click', () => {
         if (modal.classList.contains('is-screen-1920')) {
-          modal.classList.remove('is-screen-1920');
-          modal.classList.add('is-screen-1440');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
-          infoDevice.setAttribute('title', util.out('Laptop'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+          this.resizePreview(1440);
         } else if (modal.classList.contains('is-screen-1440')) {
-          modal.classList.remove('is-screen-1440');
-          modal.classList.add('is-screen-1024');
-          infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+          this.resizePreview(1024);
         } else if (modal.classList.contains('is-screen-1024')) {
-          modal.classList.remove('is-screen-1024');
-          modal.classList.add('is-screen-768');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-768');
-          infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+          this.resizePreview(768);
         } else if (modal.classList.contains('is-screen-768')) {
-          modal.classList.remove('is-screen-768');
-          modal.classList.add('is-screen-375');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-375');
-          infoDevice.setAttribute('title', util.out('Mobile'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+          this.resizePreview(375);
         } else if (modal.classList.contains('is-screen-375')) {
-          modal.classList.remove('is-screen-375');
-          modal.classList.add('is-screen-1920');
-          localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
-          infoDevice.setAttribute('title', util.out('Desktop'));
-          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+          this.resizePreview(1920);
         }
-
-        this.previewRefresh(true);
       });
       const btnModalRefresh = modal.querySelector('.is-modal-refresh');
       btnModalRefresh.addEventListener('click', () => {
@@ -76777,6 +76830,47 @@ class LivePreview {
     }
   }
 
+  resizePreview(size) {
+    let modal = this.modal;
+    let util = this.util;
+    modal.classList.remove('is-screen-1440');
+    modal.classList.remove('is-screen-1920');
+    modal.classList.remove('is-screen-1024');
+    modal.classList.remove('is-screen-768');
+    modal.classList.remove('is-screen-375');
+    const infoDevice = modal.querySelector('.is-modal-device');
+
+    if (size === 1440) {
+      modal.classList.add('is-screen-1440');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
+      infoDevice.setAttribute('title', util.out('Laptop'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+    } else if (size === 1024) {
+      modal.classList.remove('is-screen-1440');
+      modal.classList.add('is-screen-1024');
+      infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+    } else if (size === 768) {
+      modal.classList.add('is-screen-768');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-768');
+      infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+    } else if (size === 375) {
+      modal.classList.add('is-screen-375');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-375');
+      infoDevice.setAttribute('title', util.out('Mobile'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+    } else if (size === 1920) {
+      modal.classList.add('is-screen-1920');
+      localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
+      infoDevice.setAttribute('title', util.out('Desktop'));
+      infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+    }
+
+    this.previewRefresh(true);
+  }
+
   previewRefresh(disableOnContentLoad) {
     if (this.modal.classList.contains('active')) {
       // let html = this.builder.html();