@innovastudio/contentbox 1.5.13 → 1.5.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.13",
+    "@innovastudio/contentbuilder": "^1.4.15",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -75,7 +75,7 @@
   background: rgba(255, 255, 255, 0.97);
   color: rgba(0, 0, 0, 0.8);
   border-right: rgba(0, 0, 0, 0.05) 1px solid;
-  z-index: 10004;
+  z-index: 10006;
   opacity: 0.0001;
 }
 #_cbhtml .is-sidebar button.is-sidebar-button {
@@ -109,7 +109,7 @@
 }
 
 .is-sidebar-content {
-  z-index: 10003;
+  z-index: 10005;
   position: fixed;
   top: 0;
   left: 0;

package/public/contentbox/contentbox.esm.js

@@ -676,7 +676,7 @@ class SideBar {
     */
 
 
-    html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10004;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+    html += `<div class="is-pop page-quick-settings arrow-left" style="z-index:10006;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">
                 <div class="is-label"><span>${out('Zoom')}</span>:</div>
                 <div style="padding-top:4px">
@@ -4046,12 +4046,15 @@ class EditSection {
                     <div class="div-section-wrapboxes" style="display:flex;flex-direction:column;">
                         <div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
                         <div style="padding-top:3px;display:flex;align-items: center;">
-                            <button title="${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="${out('Tablet (Portrait)')}" class="input-breakpoint on" 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>
+
+                            <label class="flex mr-5" title="${out('Tablet (Landscape)')}">
+                                <input type="radio" id="rdoBoxMdWrap" 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" title="${out('Tablet (Portrait)')}">
+                                <input type="radio" id="rdoBoxSmWrap" 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>
                         </div>
                     </div>
                     
@@ -4475,42 +4478,22 @@ class EditSection {
       }
     }); // Breakpoint
 
-    let btns = modalEditSection.querySelectorAll('.input-breakpoint');
-    btns.forEach(btn => {
-      btn.addEventListener('click', () => {
+    modalEditSection.querySelectorAll('input[name="boxWrap"]').forEach(input => {
+      input.addEventListener('change', () => {
         let section = this.builder.activeSection;
         if (!section) return;
         this.builder.editor.saveForUndo();
-        let elms = modalEditSection.querySelectorAll('.input-breakpoint');
-        elms.forEach(elm => {
-          elm.classList.remove('on');
-        });
-        btn.classList.add('on');
-        let target = btn.getAttribute('data-value');
 
-        if (target === 'sm') {
+        if (input.value === 'sm') {
           section.classList.remove('md-wrap');
-        } else if (target === 'md') {
+        } else if (input.value === 'md') {
           section.classList.add('md-wrap');
         } //Trigger Change event
 
 
         this.builder.onChange();
       });
-    }); // const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
-    // chkReverseBoxes.addEventListener('click', ()=>{
-    //     let section = this.builder.activeSection;
-    //     if(!section) return;
-    //     this.builder.editor.saveForUndo();
-    //     if(chkReverseBoxes.checked) {
-    //         section.classList.add('box-reverse');
-    //     } else {
-    //         section.classList.remove('box-reverse');
-    //     }
-    //     //Trigger Change event
-    //     this.builder.settings.onChange();
-    // });
-
+    });
     const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
     chkReverseBoxes.addEventListener('click', () => {
       let section = this.builder.activeSection;
@@ -4551,7 +4534,7 @@ class EditSection {
       this.builder.settings.onChange();
     }); // Section Visibility
 
-    btns = modalEditSection.querySelectorAll('.input-device');
+    let btns = modalEditSection.querySelectorAll('.input-device');
     btns.forEach(btn => {
       btn.addEventListener('click', () => {
         let section = this.builder.activeSection;
@@ -4615,7 +4598,31 @@ class EditSection {
   } // Section Visibility
 
 
-  realtimeVisibility(section) {
+  realtimeVisibility(section, initialOpen) {
+    if (initialOpen) {
+      const builderStuff = this.builder.builderStuff;
+      const modal = builderStuff.querySelector('.is-modal.content-preview.active');
+
+      if (modal) {
+        let elms = this.modalEditSection.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.modalEditSection.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.modalEditSection.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.modalEditSection.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.modalEditSection.querySelector('.div-target');
     let divVisibility = this.modalEditSection.querySelector('.div-visibility');
     let target = this.builder.editor.responsive.readTarget(divTarget);
@@ -4626,12 +4633,16 @@ class EditSection {
 
     if (target === 'xs') {
       valReverse = section.classList.contains('xs-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(375);
     } else if (target === 'sm') {
       valReverse = section.classList.contains('sm-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(768);
     } else if (target === 'md') {
       valReverse = section.classList.contains('md-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(1024);
     } else {
       valReverse = section.classList.contains('desktop-box-reverse');
+      if (!initialOpen) this.builder.editor.livePreview.resizePreview(1920);
     }
 
     const chkReverseBoxes = this.modalEditSection.querySelector('#chkReverseBoxes');
@@ -4841,16 +4852,12 @@ class EditSection {
     } // Section Visibility
 
 
-    this.realtimeVisibility(activeSection);
-    btns = modalEditSection.querySelectorAll('.input-breakpoint');
-    btns.forEach(btn => {
-      dom$m.removeClass(btn, 'on');
-    });
+    this.realtimeVisibility(activeSection, true);
 
     if (activeSection.classList.contains('md-wrap')) {
-      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="md"]'), 'on');
+      modalEditSection.querySelector('#rdoBoxMdWrap').checked = true;
     } else {
-      dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
+      modalEditSection.querySelector('#rdoBoxSmWrap').checked = true;
     }
 
     const divReverseBoxes = modalEditSection.querySelector('#divReverseBoxes');
@@ -71761,16 +71768,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>
@@ -72024,32 +72035,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');
@@ -72090,7 +72094,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();
@@ -72290,7 +72294,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);
@@ -72301,12 +72329,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');
@@ -72619,7 +72651,7 @@ class RowTool {
 
     let actualRow = row.parentNode; // row is actually row overlay
 
-    this.realtimeVisibility(actualRow);
+    this.realtimeVisibility(actualRow, true);
     const divReverseBoxes = this.rowSettings.querySelector('#divReverseColumns');
     let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
 
@@ -72633,17 +72665,12 @@ class RowTool {
       divReverseBoxes.style.display = 'none';
     }
 
-    let elms = this.rowSettings.querySelectorAll('.input-breakpoint');
-    elms.forEach(elm => {
-      elm.classList.remove('on');
-    });
-
     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
 
 
@@ -74591,6 +74618,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;
@@ -74603,12 +74636,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');
@@ -74634,6 +74668,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');
@@ -74831,7 +74866,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 = '';
@@ -74847,12 +74882,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) {
@@ -75948,15 +76017,49 @@ class ElementGeneralStyles {
       }
     }
 
-    this.realtimeVisibility(elm);
+    this.realtimeVisibility(elm, true);
   }
 
-  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.panelStuff.querySelectorAll('.input-device');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+
+        if (modal.classList.contains('is-screen-1920')) {
+          this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1440')) {
+          this.panelStuff.querySelector('.input-device[data-value=""]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-1024')) {
+          this.panelStuff.querySelector('.input-device[data-value="md"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-768')) {
+          this.panelStuff.querySelector('.input-device[data-value="sm"]').classList.add('on');
+        } else if (modal.classList.contains('is-screen-375')) {
+          this.panelStuff.querySelector('.input-device[data-value="xs"]').classList.add('on');
+        }
+      }
+    }
+
     let divTarget = this.panelStuff.querySelector('.div-target');
     let divVisibility = this.panelStuff.querySelector('.div-visibility');
     let target = this.builder.responsive.readTarget(divTarget);
     let valVisibility = this.builder.responsive.getVisibility(row, 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);
+    }
   }
 
 }
@@ -91002,7 +91105,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">
@@ -91035,41 +91138,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', () => {
@@ -91085,6 +91165,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();