@innovastudio/contentbuilder 1.5.18 → 1.5.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.18",
+  "version": "1.5.20",
   "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]')) {
@@ -65891,6 +65954,21 @@ class Rte {
       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();
     });
@@ -83598,8 +83676,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();