@innovastudio/contentbox 1.5.8 → 1.5.9

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -4042,15 +4042,20 @@ class EditSection {
                 </div>
                 ` + '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
-    html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + `
-                    <div style="padding-top:20px;padding-bottom:3px;">${out('Wrap Boxes (Breakpoint)')}:</div>
-                    <div style="padding-top:3px;display:flex;">
-                        <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>
+    html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="display:none;padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:none">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + `
+                    <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 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>
                     
                     <div class="is-separator" style="margin-top:20px"></div>
@@ -4378,6 +4383,14 @@ class EditSection {
       const section = this.builder.activeSection;
       let bgcolor = btnSectionBgColor.style.backgroundColor;
       colorpicker.open(s => {
+        if (!section.classList.contains('box-space')) {
+          let overlays = section.querySelectorAll('.is-overlay');
+          overlays.forEach(overlay => {
+            overlay.style.backgroundColor = '';
+            overlay.style.backgroundImage = ''; //remove gradient
+          });
+        }
+
         section.style.backgroundColor = s;
         section.style.backgroundImage = ''; //remove gradient
 
@@ -4395,7 +4408,15 @@ class EditSection {
       const section = this.builder.activeSection;
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(section, () => {
-        //Trigger Change event
+        if (!section.classList.contains('box-space')) {
+          let overlays = section.querySelectorAll('.is-overlay');
+          overlays.forEach(overlay => {
+            overlay.style.backgroundColor = '';
+            overlay.style.backgroundImage = ''; //remove gradient
+          });
+        } //Trigger Change event
+
+
         this.builder.onChange();
       });
     });
@@ -4475,6 +4496,21 @@ 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();
     }); // Section Visibility
 
     btns = modalEditSection.querySelectorAll('.input-device');
@@ -4686,6 +4722,14 @@ class EditSection {
       divSectionSpaceSettings.style.display = 'none';
     }
 
+    const divSectionWrapBoxes = this.modalEditSection.querySelector('.div-section-wrapboxes');
+
+    if (dom$m.hasClass(activeSection, 'is-box')) {
+      divSectionWrapBoxes.style.display = 'none';
+    } else {
+      divSectionWrapBoxes.style.display = '';
+    }
+
     const divMultiBoxes = this.modalEditSection.querySelector('.div-multi-boxes');
 
     if (dom$m.hasClass(activeSection, 'is-box')) {
@@ -4755,6 +4799,14 @@ class EditSection {
     } else {
       dom$m.addClass(modalEditSection.querySelector('.input-breakpoint[data-value="sm"]'), 'on');
     }
+
+    const chkReverseBoxes = modalEditSection.querySelector('#chkReverseBoxes');
+
+    if (activeSection.classList.contains('box-reverse')) {
+      chkReverseBoxes.checked = true;
+    } else {
+      chkReverseBoxes.checked = false;
+    }
   }
 
   close() {
@@ -12265,10 +12317,8 @@ class EditBox {
       let bgcolor = btnBoxBgColor.style.backgroundColor;
       let overlay = activeBox.querySelector('.is-overlay');
       colorpicker.open(s => {
-        activeBox.style.backgroundColor = ''; // clean old
-
-        activeBox.style.backgroundImage = ''; /// clean old
-
+        // activeBox.style.backgroundColor = '';// clean old
+        // activeBox.style.backgroundImage = '';/// clean old
         overlay.style.backgroundColor = s;
         overlay.style.backgroundImage = ''; //remove gradient
 
@@ -12287,11 +12337,9 @@ class EditBox {
       let overlay = activeBox.querySelector('.is-overlay');
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(overlay, () => {
-        activeBox.style.backgroundColor = ''; // clean old
-
-        activeBox.style.backgroundImage = ''; // clean old
+        // activeBox.style.backgroundColor = '';// clean old
+        // activeBox.style.backgroundImage = '';// clean old
         //Trigger Change event
-
         this.builder.onChange();
       });
     }); // Box Overlay Color