@innovastudio/contentbox 1.5.17 → 1.5.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -4089,6 +4089,19 @@ class EditSection {
                         </button>
                     </div>
 
+                    <div class="div-boxesperline" style="flex-direction:column">
+                        <label style="margin:20px 0 0;display:flex;flex-direction:column">
+                            <span style="margin:0 4px 3px 0">${out('Boxes per Line')}:</span>
+                        </label>
+                        <div class="flex">
+                            <button title="1" class="input-boxesperline on" data-value="1" style="width:40px;height:25px;">1</button>
+                            <button title="2" class="input-boxesperline" data-value="2" style="width:40px;height:25px;">2</button>
+                            <button title="3" class="input-boxesperline" data-value="3" style="width:40px;height:25px;">3</button>
+                            <button title="4" class="input-boxesperline" data-value="4" style="width:40px;height:25px;">4</button>
+                            <button title="${out('Default')}" class="input-boxesperline" data-value="" style="width:90px;height:25px;">${out('Default')}</button>
+                        </div>
+                    </div>
+                    
                     <div id="divReverseBoxes" style="display:none">
                         <label for="chkReverseBoxes" style="margin:20px 0 0 0;display:flex"><input id="chkReverseBoxes" type="checkbox"  style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
                     </div>
@@ -4592,6 +4605,72 @@ class EditSection {
       btnHidden.classList.add('on'); //Trigger Change event
 
       this.builder.onChange();
+    }); // Boxes per line
+
+    btns = modalEditSection.querySelectorAll('.input-boxesperline');
+    btns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let section = this.builder.activeSection;
+        if (!section) return;
+        this.builder.editor.saveForUndo();
+        let elms = modalEditSection.querySelectorAll('.input-boxesperline');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        let val = btn.getAttribute('data-value');
+        let divTarget = modalEditSection.querySelector('.div-target');
+        let target = this.builder.editor.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          section.classList.remove('xs-boxes-1');
+          section.classList.remove('xs-boxes-2');
+          section.classList.remove('xs-boxes-3');
+          section.classList.remove('xs-boxes-4');
+          section.classList.remove('xs-boxes-wrap');
+
+          if (val !== '') {
+            section.classList.add(`xs-boxes-${val}`);
+            section.classList.add('xs-boxes-wrap');
+          }
+        } else if (target === 'sm') {
+          section.classList.remove('sm-boxes-1');
+          section.classList.remove('sm-boxes-2');
+          section.classList.remove('sm-boxes-3');
+          section.classList.remove('sm-boxes-4');
+          section.classList.remove('sm-boxes-wrap');
+
+          if (val !== '') {
+            section.classList.add(`sm-boxes-${val}`);
+            section.classList.add('sm-boxes-wrap');
+          }
+        } else if (target === 'md') {
+          section.classList.remove('md-boxes-1');
+          section.classList.remove('md-boxes-2');
+          section.classList.remove('md-boxes-3');
+          section.classList.remove('md-boxes-4');
+          section.classList.remove('md-boxes-wrap');
+
+          if (val !== '') {
+            section.classList.add(`md-boxes-${val}`);
+            section.classList.add('md-boxes-wrap');
+          }
+        } else if (target === '') {
+          section.classList.remove('desktop-boxes-1');
+          section.classList.remove('desktop-boxes-2');
+          section.classList.remove('desktop-boxes-3');
+          section.classList.remove('desktop-boxes-4');
+          section.classList.remove('desktop-boxes-wrap');
+
+          if (val !== '') {
+            section.classList.add(`desktop-boxes-${val}`);
+            section.classList.add('desktop-boxes-wrap');
+          }
+        } //Trigger Change event
+
+
+        this.builder.onChange();
+      });
     });
   } // Section Visibility
 
@@ -4625,21 +4704,30 @@ class EditSection {
     let divVisibility = this.modalEditSection.querySelector('.div-visibility');
     let target = this.builder.editor.responsive.readTarget(divTarget);
     let valVisibility = this.builder.editor.responsive.getVisibility(section, target);
-    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // Column reverse 
+    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // const divColsPerLine = this.modalEditSection.querySelector('.div-boxesperline');
+
+    let btns = this.modalEditSection.querySelectorAll('.input-boxesperline');
+    btns.forEach(btn => {
+      btn.classList.remove('on');
+    }); // Column reverse 
 
     let valReverse = false;
 
     if (target === 'xs') {
       valReverse = section.classList.contains('xs-box-reverse');
+      if (section.classList.contains('xs-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('xs-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('xs-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('xs-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
       if (!initialOpen) this.builder.editor.livePreview.resizePreview(375);
     } else if (target === 'sm') {
       valReverse = section.classList.contains('sm-box-reverse');
+      if (section.classList.contains('sm-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('sm-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('sm-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('sm-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
       if (!initialOpen) this.builder.editor.livePreview.resizePreview(768);
     } else if (target === 'md') {
       valReverse = section.classList.contains('md-box-reverse');
+      if (section.classList.contains('md-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('md-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('md-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('md-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
       if (!initialOpen) this.builder.editor.livePreview.resizePreview(1024);
     } else {
       valReverse = section.classList.contains('desktop-box-reverse');
+      if (section.classList.contains('desktop-boxes-1')) this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add('on');else if (section.classList.contains('desktop-boxes-2')) this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add('on');else if (section.classList.contains('desktop-boxes-3')) this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add('on');else if (section.classList.contains('desktop-boxes-4')) this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add('on');else this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add('on');
       if (!initialOpen) this.builder.editor.livePreview.resizePreview(1920);
     }