@innovastudio/contentbox 1.0.32 → 1.0.36

package/README.md

@@ -139,9 +139,9 @@ React and Vue project examples are provided in separate downloads in the user ar
 
 To start building a page, you can click the (+) button on the top left sidebar. This will open a selection of predesigned sections that you can add into your page.
 
-![Simple Sections](docs/predesigned-sections.png)
+![Simple Start](docs/predesigned-sections.png)
 
-![Quick Start Sections](docs/predesigned-sections2.png)
+![Quick Start](docs/predesigned-sections2.png)
 
 There are 2 predesigned section categories: 
 - Simple Start (to start from a basic/clean design)
@@ -239,7 +239,7 @@ The style can be used to format the entire page or just a specific section of yo
 
 To apply the typography style to a specific box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.
 
-![Apply to a specific section](docs/typography3.png)
+![Apply to a specific section](docs/typography2.png)
 
 This will re-open the typography selection and your selection will be applied to the chosen box area only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.32",
+  "version": "1.0.36",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@ashthornton/asscroll": "^2.0.4",
-    "@innovastudio/contentbuilder": "^1.0.62",
+    "@innovastudio/contentbuilder": "^1.0.63",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -311,7 +311,7 @@ class SideBar {
     this.builderStuff = builderStuff;
 
     if (this.builder.useSidebar) {
-      html += '<div class="is-sidebar active"  style="transform: translate3d(0,0,0);display: flex;flex-direction: column;">';
+      html += '<div class="is-sidebar active"  style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity:opacity: 0.0001;">';
       var sideIndex = 0;
       this.builder.sidebarData.buttons.map(button => {
         if (button.name == 'section') {
@@ -2199,7 +2199,7 @@ class EditSection {
       activeSection.parentNode.insertBefore(activeSection, currPrev); //Trigger Render event
 
       this.builder.settings.onRender();
-      this.builder.scrollTo(activeSection);
+      this.builder.scrollTo(activeSection, 600);
     }
   }
 
@@ -2218,7 +2218,7 @@ class EditSection {
       activeSection.parentNode.insertBefore(currNext, activeSection); //Trigger Render event
 
       this.builder.settings.onRender();
-      this.builder.scrollTo(activeSection);
+      this.builder.scrollTo(activeSection, 600);
     }
 
     return false;
@@ -2231,7 +2231,7 @@ class EditSection {
     activeSection.parentNode.insertBefore(activeSection, refSection); //Trigger Render event
 
     this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection);
+    this.builder.scrollTo(activeSection, 600);
   }
 
   sectionBottom() {
@@ -2242,7 +2242,7 @@ class EditSection {
     activeSection.parentNode.insertBefore(activeSection, last.nextElementSibling); //Trigger Render event
 
     this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection);
+    this.builder.scrollTo(activeSection, 600);
   }
 
   sectionDuplicate() {
@@ -2296,7 +2296,7 @@ class EditSection {
 
     this.builder.settings.onRender();
     this.builder.hideModal(this.modalEditSection);
-    this.builder.scrollTo(section);
+    this.builder.scrollTo(section, 600);
   }
 
   sectionAnimStart(s) {
@@ -2398,7 +2398,7 @@ class EditSection {
 
 
     this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection);
+    this.builder.scrollTo(activeSection, 600);
   }
 
   boxSpacing(s) {
@@ -8109,34 +8109,36 @@ class EditBox {
     const btnBoxTypos = modalEditBox.querySelectorAll('.cmd-box-typography');
     btnBoxTypos.forEach(btnBoxTypo => {
       btnBoxTypo.addEventListener('click', () => {
-        this.builder.hideModal(modalEditBox); //Open divSidebarTypography
+        setTimeout(() => {
+          this.builder.hideModal(modalEditBox); //Open divSidebarTypography
 
-        builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
-        //--- overlay (this needs overlay to prevent activeBox change) ---
+          builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
+          //--- overlay (this needs overlay to prevent activeBox change) ---
 
-        const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
-        dom$G.appendHtml(builderStuff, overlayHtml);
-        const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
-        if (modalOverlay) modalOverlay.addEventListener('click', () => {
-          // Close all opened sidebar
-          const overlay = document.querySelector('.is-sidebar-overlay');
+          const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
+          dom$G.appendHtml(builderStuff, overlayHtml);
+          const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
+          if (modalOverlay) modalOverlay.addEventListener('click', () => {
+            // Close all opened sidebar
+            const overlay = document.querySelector('.is-sidebar-overlay');
 
-          if (overlay) {
-            overlay.remove();
-            document.body.style.overflowY = '';
-          }
+            if (overlay) {
+              overlay.remove();
+              document.body.style.overflowY = '';
+            }
 
-          document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
-            dom$G.removeClass(elm, 'active');
-          });
-          document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
-            dom$G.removeClass(elm, 'active');
-          });
-        }); //--- /overlay ---
+            document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
+              dom$G.removeClass(elm, 'active');
+            });
+            document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
+              dom$G.removeClass(elm, 'active');
+            });
+          }); //--- /overlay ---
 
-        builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
-        builderStuff.querySelector('.typo-target-default').style.display = 'none';
-        builderStuff.querySelector('.typo-target-box').style.display = 'flex';
+          builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
+          builderStuff.querySelector('.typo-target-default').style.display = 'none';
+          builderStuff.querySelector('.typo-target-box').style.display = 'flex';
+        }, 10); // delay to separate from currect click 
       });
     });
     const btnBoxSizes = modalEditBox.querySelectorAll('.cmd-box-size');
@@ -68440,6 +68442,8 @@ class ContentBuilder {
               this.colTool.showColumnTool(this.activeCol);
             }
           }
+
+          this.util.checkEmpty(); // for multiple instances check
         },
         onAdd: evt => {
           var itemEl = evt.item;
@@ -73723,6 +73727,7 @@ class ContentBox {
     if (!builderStuff) {
       builderStuff = document.createElement('div');
       builderStuff.id = '_cbhtml';
+      builderStuff.style.visibility = 'hidden';
       builderStuff.className = 'is-ui';
       document.body.appendChild(builderStuff);
       builderStuff = document.querySelector('#_cbhtml');
@@ -73975,7 +73980,8 @@ class ContentBox {
       if (elm) elm.parentNode.removeChild(elm);
       this.wrapperEl.style.opacity = 1;
       let sidebar = builderStuff.querySelector('.is-sidebar');
-      if (sidebar) sidebar.style.opacity = 1; // Remove the page-overlay
+      if (sidebar) sidebar.style.opacity = 1;
+      this.builderStuff.style.visibility = 'visible'; // Remove the page-overlay
 
       pageOverlay = builderStuff.querySelectorAll('.page-overlay');
       pageOverlay.forEach(elm => {
@@ -74315,7 +74321,7 @@ class ContentBox {
     scrollButton.forEach(btn => {
       btn.addEventListener('click', e => {
         let section = btn.parentNode.parentNode;
-        this.scrollTo(section.nextElementSibling, 600);
+        this.scrollTo(section.nextElementSibling);
         e.preventDefault();
         e.stopImmediatePropagation();
         return false;
@@ -74397,7 +74403,7 @@ class ContentBox {
     if (localStorage.getItem('_zoom') !== null) {
       zoom = localStorage.getItem('_zoom');
     } else {
-      zoom = 1;
+      zoom = this.settings.zoom; //1;
     }
 
     let leftadj;