@innovastudio/contentbox 1.6.2 → 1.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.127",
+    "@innovastudio/contentbuilder": "^1.4.128",
     "choices.js": "^10.2.0",
     "js-beautify": "^1.14.0"
   }

package/public/contentbox/contentbox.esm.js

@@ -21001,6 +21001,7 @@ class PanelColumn {
                         </div>
                     </div>
                     <div class="group">
+                        <button title="${out('Space Between')}" data-content-justify="spacebetween"><svg><use xlink:href="#icon-space-between"></use></svg></button>
                         <button title="${out('Clear')}" class="btn-clear" data-content-pos=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                     </div>
                 </div>
@@ -21226,6 +21227,40 @@ class PanelColumn {
       });
     }); // Positiom
 
+    const btnContentJustify = panel.querySelectorAll('[data-content-justify]');
+    btnContentJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let activeColumn = this.builder.controlpanel.activeColumn;
+        let s = btn.getAttribute('data-content-justify');
+        const config = this.builder.cssClasses;
+        panel.querySelectorAll('[data-content-pos]').forEach(btn => btn.classList.remove('on'));
+        let classes = config.display;
+        this.addCssClass(activeColumn, classes.flex, classes);
+        classes = config.flexDirection;
+        this.addCssClass(activeColumn, classes.column, classes);
+
+        if (s === 'spacebetween') {
+          classes = config.justifyContent;
+          this.addCssClass(activeColumn, classes.between, classes);
+          classes = config.alignItems;
+
+          if (activeColumn.classList.contains('items-start')) {
+            panel.querySelector('[data-content-pos="centerleft"').classList.add('on');
+          } else if (activeColumn.classList.contains('items-center')) {
+            panel.querySelector('[data-content-pos="center"').classList.add('on');
+          } else if (activeColumn.classList.contains('items-end')) {
+            panel.querySelector('[data-content-pos="centerright"').classList.add('on');
+          } else {
+            panel.querySelector('[data-content-pos="centerleft"').classList.add('on');
+          }
+        }
+
+        panel.querySelectorAll('[data-content-justify]').forEach(btn => btn.classList.remove('on'));
+        btn.classList.add('on');
+        this.builder.onChange();
+      });
+    });
     const btnContentPos = panel.querySelectorAll('[data-content-pos]');
     btnContentPos.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -21233,6 +21268,7 @@ class PanelColumn {
         let activeColumn = this.builder.controlpanel.activeColumn;
         let s = btn.getAttribute('data-content-pos');
         const config = this.builder.cssClasses;
+        panel.querySelectorAll('[data-content-justify]').forEach(btn => btn.classList.remove('on'));
 
         if (s !== '') {
           let classes = config.display;
@@ -21242,9 +21278,10 @@ class PanelColumn {
 
           if (s === 'topleft') {
             let classes = config.justifyContent;
-            this.addCssClass(activeColumn, classes.start, classes);
-            classes = config.alignItems;
-            this.addCssClass(activeColumn, classes.start, classes);
+            this.addCssClass(activeColumn, classes.start, classes); // classes = config.alignItems;
+            // this.addCssClass(activeColumn, classes.start, classes);
+
+            this.removeCssClasses(activeColumn, config.alignItems);
           }
 
           if (s === 'topcenter') {
@@ -21263,9 +21300,10 @@ class PanelColumn {
 
           if (s === 'centerleft') {
             let classes = config.justifyContent;
-            this.addCssClass(activeColumn, classes.center, classes);
-            classes = config.alignItems;
-            this.addCssClass(activeColumn, classes.start, classes);
+            this.addCssClass(activeColumn, classes.center, classes); // classes = config.alignItems;
+            // this.addCssClass(activeColumn, classes.start, classes);
+
+            this.removeCssClasses(activeColumn, config.alignItems);
           }
 
           if (s === 'center') {
@@ -21284,9 +21322,10 @@ class PanelColumn {
 
           if (s === 'bottomleft') {
             let classes = config.justifyContent;
-            this.addCssClass(activeColumn, classes.end, classes);
-            classes = config.alignItems;
-            this.addCssClass(activeColumn, classes.start, classes);
+            this.addCssClass(activeColumn, classes.end, classes); // classes = config.alignItems;
+            // this.addCssClass(activeColumn, classes.start, classes);
+
+            this.removeCssClasses(activeColumn, config.alignItems);
           }
 
           if (s === 'bottomcenter') {
@@ -21558,17 +21597,27 @@ class PanelColumn {
     } // Position
 
 
-    panel.querySelectorAll('[data-content-pos]').forEach(btn => btn.classList.remove('on'));
     let justifyContent = this.builder.cssClasses.justifyContent;
+    panel.querySelectorAll('[data-content-justify]').forEach(btn => btn.classList.remove('on'));
+
+    if (activeColumn.classList.contains(justifyContent.between)) {
+      panel.querySelector('[data-content-justify="spacebetween"').classList.add('on');
+    }
+
+    panel.querySelectorAll('[data-content-pos]').forEach(btn => btn.classList.remove('on'));
     let alignItems = this.builder.cssClasses.alignItems;
     let pos = '';
 
     if (activeColumn.classList.contains(justifyContent.start)) {
-      if (activeColumn.classList.contains(alignItems.start)) pos = 'topleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'topcenter';else if (activeColumn.classList.contains(alignItems.end)) pos = 'topright';
+      if (activeColumn.classList.contains(alignItems.start)) pos = 'topleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'topcenter';else if (activeColumn.classList.contains(alignItems.end)) pos = 'topright';else pos = 'topleft';
     } else if (activeColumn.classList.contains(justifyContent.center)) {
-      if (activeColumn.classList.contains(alignItems.start)) pos = 'centerleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'center';else if (activeColumn.classList.contains(alignItems.end)) pos = 'centerright';
+      if (activeColumn.classList.contains(alignItems.start)) pos = 'centerleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'center';else if (activeColumn.classList.contains(alignItems.end)) pos = 'centerright';else pos = 'centerleft';
     } else if (activeColumn.classList.contains(justifyContent.end)) {
-      if (activeColumn.classList.contains(alignItems.start)) pos = 'bottomleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'bottomcenter';else if (activeColumn.classList.contains(alignItems.end)) pos = 'bottomright';
+      if (activeColumn.classList.contains(alignItems.start)) pos = 'bottomleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'bottomcenter';else if (activeColumn.classList.contains(alignItems.end)) pos = 'bottomright';else pos = 'bottomleft';
+    }
+
+    if (activeColumn.classList.contains(justifyContent.between)) {
+      if (activeColumn.classList.contains(alignItems.start)) pos = 'centerleft';else if (activeColumn.classList.contains(alignItems.center)) pos = 'center';else if (activeColumn.classList.contains(alignItems.end)) pos = 'centerright';else pos = 'centerleft';
     }
 
     if (pos === 'topleft') {
@@ -30052,6 +30101,10 @@ class ControlPanel {
         this.animSelection(this.activeSection);
       }
     }
+
+    if (selectFromBreadcrumb) {
+      if (this.builder.onBreadcrumbSelect) this.builder.onBreadcrumbSelect();
+    }
   }
 
   hidePanels() {
@@ -109869,7 +109922,7 @@ class ContentBuilder {
           selection.addRange(range);
         }
       }
-      document.execCommand('insertHTML', false, sPastedText);
+      this.doc.execCommand('insertHTML', false, sPastedText);
       if (this.activeCol) {
         /*
         Additional Cleanup: