@innovastudio/contentbox 1.5.12 → 1.5.13

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -4052,9 +4052,6 @@ class EditSection {
                             <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 for="chkReverseBoxes" style="margin:0;margin-left:70px;display:flex"><input id="chkReverseBoxes" type="checkbox"  style="margin:0 7px 0 0"/><span>${out('Reverse Boxes')}</span></label>
-                    
                         </div>
                     </div>
                     
@@ -4090,6 +4087,10 @@ class EditSection {
                             <span>${out('Hidden')}</span>
                         </button>
                     </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>
                     ` + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
     '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + // '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' +
@@ -4496,17 +4497,54 @@ class EditSection {
 
         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;
       if (!section) return;
       this.builder.editor.saveForUndo();
+      section.classList.remove('box-reverse'); // clear old
 
-      if (chkReverseBoxes.checked) {
-        section.classList.add('box-reverse');
-      } else {
-        section.classList.remove('box-reverse');
+      let divTarget = modalEditSection.querySelector('.div-target');
+      let target = this.builder.editor.responsive.readTarget(divTarget);
+
+      if (target === 'xs') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('xs-box-reverse');
+        } else {
+          section.classList.remove('xs-box-reverse');
+        }
+      } else if (target === 'sm') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('sm-box-reverse');
+        } else {
+          section.classList.remove('sm-box-reverse');
+        }
+      } else if (target === 'md') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('md-box-reverse');
+        } else {
+          section.classList.remove('md-box-reverse');
+        }
+      } else if (target === '') {
+        if (chkReverseBoxes.checked) {
+          section.classList.add('desktop-box-reverse');
+        } else {
+          section.classList.remove('desktop-box-reverse');
+        }
       } //Trigger Change event
 
 
@@ -4577,12 +4615,27 @@ class EditSection {
   } // Section Visibility
 
 
-  realtimeVisibility(cell) {
+  realtimeVisibility(section) {
     let divTarget = this.modalEditSection.querySelector('.div-target');
     let divVisibility = this.modalEditSection.querySelector('.div-visibility');
     let target = this.builder.editor.responsive.readTarget(divTarget);
-    let valVisibility = this.builder.editor.responsive.getVisibility(cell, target);
-    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility);
+    let valVisibility = this.builder.editor.responsive.getVisibility(section, target);
+    this.builder.editor.responsive.showVisibility(divVisibility, valVisibility); // Column reverse 
+
+    let valReverse = false;
+
+    if (target === 'xs') {
+      valReverse = section.classList.contains('xs-box-reverse');
+    } else if (target === 'sm') {
+      valReverse = section.classList.contains('sm-box-reverse');
+    } else if (target === 'md') {
+      valReverse = section.classList.contains('md-box-reverse');
+    } else {
+      valReverse = section.classList.contains('desktop-box-reverse');
+    }
+
+    const chkReverseBoxes = this.modalEditSection.querySelector('#chkReverseBoxes');
+    chkReverseBoxes.checked = valReverse;
   }
 
   read() {
@@ -4800,12 +4853,12 @@ class EditSection {
       dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
     }
 
-    const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
+    const divReverseBoxes = modalEditSection.querySelector('#divReverseBoxes');
 
-    if (activeSection.classList.contains('box-reverse')) {
-      chkReverseBoxes.checked = true;
+    if (activeSection.querySelectorAll('.is-box').length > 1) {
+      divReverseBoxes.style.display = 'flex';
     } else {
-      chkReverseBoxes.checked = false;
+      divReverseBoxes.style.display = 'none';
     }
   }
 
@@ -71754,8 +71807,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">
@@ -72565,7 +72619,33 @@ class RowTool {
 
     let actualRow = row.parentNode; // row is actually row overlay
 
-    this.realtimeVisibility(actualRow); //More
+    this.realtimeVisibility(actualRow);
+    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';
+    }
+
+    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');
+    } else if (actualRow.classList.contains('sm-wrap')) {
+      this.rowSettings.querySelector('.input-breakpoint[data-value="sm"]').classList.add('on');
+    } else {
+      this.rowSettings.querySelector('.input-breakpoint[data-value="xs"]').classList.add('on');
+    } //More
+
 
     let inpRowId = this.rowSettings.querySelector('.input-row-id');
     inpRowId.value = '';