@innovastudio/contentbox 1.6.36 → 1.6.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.36",
+  "version": "1.6.38",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.16",
+    "@innovastudio/contentbuilder": "^1.5.22",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -78220,26 +78220,37 @@ class RowTool {
       if (btnCellAdd) dom.addEventListener(btnCellAdd, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
+        const viewportHeight = window.innerHeight;
+        const newPos = util.getElementPosition(btnCellAdd);
+        let top = newPos.top;
+        let left = newPos.left;
         renderQuickAdd(this.builder);
         let quickadd = this.builder.builderStuff.querySelector('.is-pop.quickadd');
         let tabs = quickadd.querySelector('.is-pop-tabs');
         tabs.style.display = 'flex';
-        const newPos = util.getElementPosition(btnCellAdd);
-        let top = newPos.top + window.pageYOffset;
-        let left = newPos.left + window.pageXOffset;
-        if (this.builder.iframe) {
-          left = left + 3;
-        }
         util.showPop(quickadd, false, btnCellAdd);
-        quickadd.style.top = top + 35 + 'px';
-        quickadd.style.left = left + 'px';
-        dom.removeClass(quickadd, 'arrow-bottom');
-        dom.removeClass(quickadd, 'arrow-left');
-        dom.removeClass(quickadd, 'arrow-right');
-        dom.removeClass(quickadd, 'center');
-        dom.removeClass(quickadd, 'right');
-        dom.addClass(quickadd, 'arrow-top');
-        dom.addClass(quickadd, 'left');
+        const h = quickadd.offsetHeight;
+        if (viewportHeight - top > h) {
+          // pop bottom
+          quickadd.style.top = top + window.pageYOffset + 35 + 'px';
+          quickadd.style.left = left + 'px';
+          dom.removeClass(quickadd, 'arrow-bottom');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-top');
+          dom.addClass(quickadd, 'left');
+        } else {
+          // pop top
+          quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
+          quickadd.style.left = left + 'px';
+          dom.removeClass(quickadd, 'arrow-top');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-bottom');
+          dom.addClass(quickadd, 'left');
+        }
         let val = quickadd.querySelector('.active').getAttribute('data-value');
         if (val === 'left') {
           quickadd.setAttribute('data-mode', 'cell-left');
@@ -78279,21 +78290,38 @@ class RowTool {
       if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
+        const viewportHeight = window.innerHeight;
         const newPos = util.getElementPosition(btnCellMore);
-        let top = newPos.top + window.pageYOffset;
-        let left = newPos.left + window.pageXOffset;
+        let top = newPos.top;
+        let left = newPos.left;
         this.builder.colTool.renderColMore();
         const columnMore = builderStuff.querySelector('.columnmore');
-        util.showPop(columnMore, false, btnCellMore);
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
-        dom.removeClass(columnMore, 'arrow-bottom');
-        dom.removeClass(columnMore, 'arrow-left');
-        dom.removeClass(columnMore, 'arrow-right');
-        dom.removeClass(columnMore, 'center');
-        dom.removeClass(columnMore, 'right');
-        dom.addClass(columnMore, 'arrow-top');
-        dom.addClass(columnMore, 'left');
+        setTimeout(() => {
+          // give delay after renderColMore()
+          util.showPop(columnMore, false, btnCellMore);
+          const h = columnMore.offsetHeight;
+          if (viewportHeight - top > h) {
+            columnMore.style.top = top + window.pageYOffset + 35 + 'px';
+            columnMore.style.left = left - 7 + 'px';
+            dom.removeClass(columnMore, 'arrow-bottom');
+            dom.removeClass(columnMore, 'arrow-right');
+            dom.removeClass(columnMore, 'arrow-left');
+            dom.removeClass(columnMore, 'center');
+            dom.removeClass(columnMore, 'right');
+            dom.addClass(columnMore, 'arrow-top');
+            dom.addClass(columnMore, 'left');
+          } else {
+            columnMore.style.top = top + window.pageYOffset - h - 8 + 'px';
+            columnMore.style.left = left - 7 + 'px';
+            dom.removeClass(columnMore, 'arrow-top');
+            dom.removeClass(columnMore, 'arrow-right');
+            dom.removeClass(columnMore, 'arrow-left');
+            dom.removeClass(columnMore, 'center');
+            dom.removeClass(columnMore, 'right');
+            dom.addClass(columnMore, 'arrow-bottom');
+            dom.addClass(columnMore, 'left');
+          }
+        }, 0);
         const btnCellLocking = columnMore.querySelector('.cell-locking');
         if (cell.hasAttribute('data-noedit')) {
           dom.addClass(btnCellLocking, 'on');
@@ -78447,32 +78475,67 @@ class RowTool {
 
         //Hide Column tool (new!)
         util.hideColumnTool();
+
+        /*
         const newPos = util.getElementPosition(btnMore);
         let top = newPos.top + window.pageYOffset;
         let left = newPos.left + window.pageXOffset;
-        this.renderRowMore();
+         this.renderRowMore();
         const rowMore = this.rowMore;
-
-        // rowMore.style.display = 'flex';
+         // rowMore.style.display = 'flex';
         util.showPop(rowMore, false, btnMore);
         //const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         //const h = rowMore.offsetHeight;
-        rowMore.style.top = top - 8 + 'px';
-        dom.removeClass(rowMore, 'arrow-bottom');
-        dom.removeClass(rowMore, 'arrow-left');
-        dom.removeClass(rowMore, 'arrow-right');
-        dom.removeClass(rowMore, 'center');
-        dom.removeClass(rowMore, 'right');
-        dom.removeClass(rowMore, 'left');
-        if (this.builder.opts.rowTool === 'right') {
-          rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
-          dom.addClass(rowMore, 'arrow-right');
-          dom.addClass(rowMore, 'left');
-        } else {
-          rowMore.style.left = left + 35 + 'px';
-          dom.addClass(rowMore, 'arrow-left');
-          dom.addClass(rowMore, 'left');
-        }
+        rowMore.style.top = (top - 8) + 'px';
+         dom.removeClass(rowMore,'arrow-bottom');
+        dom.removeClass(rowMore,'arrow-left');
+        dom.removeClass(rowMore,'arrow-right');
+        dom.removeClass(rowMore,'center');
+        dom.removeClass(rowMore,'right');
+        dom.removeClass(rowMore,'left');
+         if(this.builder.opts.rowTool === 'right') {
+            
+            rowMore.style.left = (left - rowMore.offsetWidth - 10) + 'px';
+             dom.addClass(rowMore,'arrow-right');
+            dom.addClass(rowMore,'left');
+         } else {
+             rowMore.style.left = (left + 35) + 'px';
+             dom.addClass(rowMore,'arrow-left');
+            dom.addClass(rowMore,'left');
+         }
+        */
+
+        const viewportHeight = window.innerHeight;
+        const newPos = util.getElementPosition(btnMore);
+        let top = newPos.top;
+        let left = newPos.left;
+        this.renderRowMore();
+        const rowMore = this.rowMore;
+        setTimeout(() => {
+          // give delay after renderRowMore()
+          util.showPop(rowMore, false, btnMore);
+          const h = rowMore.offsetHeight;
+          dom.removeClass(rowMore, 'arrow-bottom');
+          dom.removeClass(rowMore, 'arrow-left');
+          dom.removeClass(rowMore, 'arrow-right');
+          dom.removeClass(rowMore, 'center');
+          dom.removeClass(rowMore, 'right');
+          dom.removeClass(rowMore, 'left');
+          if (this.builder.opts.rowTool === 'right') {
+            rowMore.style.left = left - rowMore.offsetWidth - 10 + 'px';
+            dom.addClass(rowMore, 'arrow-right');
+            dom.addClass(rowMore, 'left');
+          } else {
+            rowMore.style.left = left + 35 + 'px';
+            dom.addClass(rowMore, 'arrow-left');
+            dom.addClass(rowMore, 'left');
+          }
+          if (viewportHeight - top > h) {
+            rowMore.style.top = top + window.pageYOffset - 8 + 'px';
+          } else {
+            rowMore.style.top = top + window.pageYOffset - h + btnMore.offsetHeight + 'px';
+          }
+        }, 0);
         let btnRowHtml = rowMore.querySelector('.row-html');
         let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
         if (row.querySelector('[data-html]')) {
@@ -91350,9 +91413,25 @@ class Rte {
     // Reset Zoom
     const btnResetZoom = builderStuff.querySelector('.reset-zoom');
     btnResetZoom.addEventListener('click', () => {
+      this.rteZoomSlider.value = 100;
       this.builder.opts.zoom = 1;
       localStorage.setItem('_zoom', 1); // Save
 
+      // setZoomOnControl
+      if (this.builder.isContentBox) {
+        const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
+        this.builder.setZoomOnControl(wrapper);
+      } else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+        // freeform
+        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+        this.builder.setZoomOnControl(docContainer);
+      } else {
+        const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+        builders.forEach(builder => {
+          this.builder.setZoomOnControl(builder);
+        });
+      }
+
       // setZoomOnArea
       this.builder.setZoomOnArea();
     });
@@ -99475,7 +99554,6 @@ class ContentStuff$1 {
             display:flex;
         }
 
-
         .row-outline .is-rowadd-tool, 
         .row-active .is-rowadd-tool {
             display:block;
@@ -99884,6 +99962,12 @@ class ContentStuff$1 {
             /*padding: 0 2px 4px !important;*/
             z-index: 1 !important;
         }
+        
+        /* Row Lock will hide row tool */
+        .row-lock .is-row-tool,
+        .row-lock .is-rowadd-tool {
+            display: none !important;
+        }
                 
         div[data-html] {
             min-height: 70px;
@@ -107343,7 +107427,7 @@ class Common {
 
     if (topTouched && bottomTouched) {
       block.style.top = 0;
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (leftTouched && rightTouched) {
@@ -107352,13 +107436,21 @@ class Common {
       block.style.width = '';
     }
     if (bottomTouched && !topTouched) {
-      block.style.bottom = 0;
+      if (!block.classList.contains('height-auto')) block.style.bottom = 0; // height-auto should not have bottom=0
       block.style.height = '';
     }
     if (rightTouched && !leftTouched) {
       block.style.right = 0;
       block.style.width = '';
     }
+
+    // reset
+    setTimeout(() => {
+      this.horizontalRulerTop.removeAttribute('data-topTouched');
+      this.horizontalRulerBottom.removeAttribute('data-bottomTouched');
+      this.verticalRulerLeft.removeAttribute('data-leftTouched');
+      this.verticalRulerRight.removeAttribute('data-rightTouched');
+    }, 10);
   }
   applyPixels(block) {
     const zoom = this.zoom;
@@ -108797,7 +108889,9 @@ class Resizable {
           target.setAttribute('data--l-' + breakpoint, target.style.left);
           target.setAttribute('data--b-' + breakpoint, target.style.bottom);
           target.setAttribute('data--r-' + breakpoint, target.style.right);
-          if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
+          if (!(target.classList.contains('fluid') && target.closest('.autolayout'))) {
+            target.setAttribute('data--w-' + breakpoint, target.style.width);
+          }
           target.setAttribute('data--h-' + breakpoint, target.style.height);
         } else {
           target.setAttribute('data--t', target.style.top);
@@ -109058,8 +109152,12 @@ class Draggable {
       target.setAttribute('data-starty', y);
 
       // reset (from applyPercentage bottomTouched)
-      target.style.height = target.offsetHeight + 'px';
-      target.style.bottom = '';
+      if (target.style.bottom) {
+        if (!target.classList.contains('height-auto')) {
+          target.style.height = target.offsetHeight + 'px';
+        }
+        target.style.bottom = '';
+      }
       this.common.applyPixels(target);
     });
     this.clickedBlock = this.common.getSelectedBlock();
@@ -109182,6 +109280,15 @@ class Draggable {
     if (this.onChange) this.onChange();
   }
   handleSelect(event) {
+    if (!this.doc.querySelector(this.selector + '.active')) {
+      // Make the current scrollbar state (visible or not) to stay during the block select (drag or resize)
+      let scrollbar = this.doc.documentElement.scrollHeight > this.doc.documentElement.clientHeight;
+      if (!scrollbar) {
+        this.doc.body.style.overflowY = 'hidden';
+      } else {
+        this.doc.body.style.overflowY = 'scroll';
+      }
+    }
     const element = event.target;
     if (element.classList.contains('rotate-handle')) return;
     const block = element.closest(this.selector);
@@ -109231,6 +109338,9 @@ class Draggable {
       this.doc.querySelectorAll(this.selector + '.active').forEach(elm => elm.classList.remove('active'));
       this.doc.querySelectorAll('.block-active').forEach(elm => elm.classList.remove('block-active'));
       if (this.onSelectClear) this.onSelectClear();
+
+      // Return back the scrollbar state when clicking on page (not block)
+      this.doc.body.style.overflowY = ''; // see handleSelect()
     }
 
     // Check if multiple selection occurs. If so, add 'multi' class to hide all the handles
@@ -145382,7 +145492,7 @@ class ContentBox {
       assetRefresh: false,
       slider: '',
       navbar: false,
-      screenMode: 'desktop',
+      screenMode: 'fullview',
       onRender: function () {},
       onChange: function () {},
       // onImageBrowseClick: function () { },
@@ -149283,10 +149393,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           display: none !important;
         }
         .hard-select .box-select {
-          outline: #00da89 1px solid;
-          outline-offset: -1px;
-          z-index: 1;
+            outline: #00da89 1px solid;
+            outline-offset: -1px;
+            z-index: 1;
+        }
+        .hard-select .box-select.box-canvas {
+            outline: #ff9fda 1px solid;
         }
+
         .hard-select .box-select .is-box-tool {
           display: flex !important;
         }