@innovastudio/contentbuilder 1.5.19 → 1.5.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.19",
+  "version": "1.5.21",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -52757,26 +52757,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');
@@ -52816,21 +52827,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');
@@ -52984,32 +53012,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]')) {
@@ -81896,7 +81959,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) {
@@ -81905,13 +81968,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;
@@ -83613,8 +83684,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();
@@ -83737,6 +83812,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);
@@ -83786,6 +83870,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