@innovastudio/contentbuilder 1.2.4-rc2 → 1.2.4-rc3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.4-rc2",
+  "version": "1.2.4-rc3",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.esm.js

@@ -4196,7 +4196,7 @@ class Util {
     dom.addClass(pop, 'deactive');
   }
 
-  showPop(pop, cancelCallback) {
+  showPop(pop, cancelCallback, btn) {
     const dom = this.dom;
     pop.style.display = 'flex';
     dom.addClass(pop, 'active');
@@ -4204,13 +4204,9 @@ class Util {
     pop.focus({
       preventScroll: true
     });
-    const btnMore1 = document.querySelector('.columnmore');
-    const btnMore2 = document.querySelector('.cell-more');
-    const btnMore3 = document.querySelector('.elm-more');
-    const btnMore4 = document.querySelector('.row-more');
 
     const handleClickOut = e => {
-      if (!pop.contains(e.target) && !btnMore1.contains(e.target) && !btnMore2.contains(e.target) && !btnMore3.contains(e.target) && !btnMore4.contains(e.target)) {
+      if (!pop.contains(e.target) && !btn.contains(e.target)) {
         // click outside
         // hide
         this.hidePop(pop);
@@ -17982,15 +17978,14 @@ const renderGridEditor = builder => {
   });
   const quickadd = renderQuickAdd(builder); // CELL
 
-  elm = grideditor.querySelector('.cell-add');
-  dom$E.addEventListener(elm, 'click', () => {
+  const btnAdd = grideditor.querySelector('.cell-add');
+  dom$E.addEventListener(btnAdd, 'click', () => {
     let tabs = quickadd.querySelector('.is-pop-tabs');
     tabs.style.display = 'flex';
-    const elm = grideditor.querySelector('.cell-add');
-    const top = elm.getBoundingClientRect().top + window.pageYOffset;
-    const left = elm.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
+    const top = btnAdd.getBoundingClientRect().top + window.pageYOffset;
+    const left = btnAdd.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
 
-    util.showPop(quickadd);
+    util.showPop(quickadd, false, btnAdd);
     const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     //const h = quickadd.offsetHeight;
 
@@ -18099,15 +18094,14 @@ const renderGridEditor = builder => {
     e.preventDefault();
   }); // ROW
 
-  elm = grideditor.querySelector('.row-add');
-  dom$E.addEventListener(elm, 'click', () => {
+  const btnRowAdd = grideditor.querySelector('.row-add');
+  dom$E.addEventListener(btnRowAdd, 'click', () => {
     let tabs = quickadd.querySelector('.is-pop-tabs');
     tabs.style.display = 'none';
-    const elm = grideditor.querySelector('.row-add');
-    const top = elm.getBoundingClientRect().top + window.pageYOffset;
-    const left = elm.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
+    const top = btnRowAdd.getBoundingClientRect().top + window.pageYOffset;
+    const left = btnRowAdd.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
 
-    util.showPop(quickadd);
+    util.showPop(quickadd, false, btnRowAdd);
     const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     //const h = quickadd.offsetHeight;
 
@@ -52180,8 +52174,8 @@ class RowTool {
           }
         }
       });
-      elm = rowtool.querySelector('.row-more');
-      if (elm) dom$p.addEventListener(elm, 'click', () => {
+      const btnMore = rowtool.querySelector('.row-more');
+      if (btnMore) dom$p.addEventListener(btnMore, 'click', () => {
         let row;
         let cell = util.cellSelected();
 
@@ -52197,11 +52191,10 @@ class RowTool {
 
         let columnTool = builderStuff.querySelector('.is-column-tool');
         dom$p.removeClass(columnTool, 'active');
-        const elm = rowtool.querySelector('.row-more');
-        const top = elm.getBoundingClientRect().top + window.pageYOffset;
-        const left = elm.getBoundingClientRect().left + window.pageXOffset; // rowMore.style.display = 'flex';
+        const top = btnMore.getBoundingClientRect().top + window.pageYOffset;
+        const left = btnMore.getBoundingClientRect().left + window.pageXOffset; // rowMore.style.display = 'flex';
 
-        util.showPop(rowMore); //const w = rowMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        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';
@@ -52268,15 +52261,15 @@ class RowAddTool {
       });
     }
 
-    let elm = rowaddtool.querySelector('button');
-    dom$o.addEventListener(elm, 'click', () => {
+    let btnRowAdd = rowaddtool.querySelector('button');
+    dom$o.addEventListener(btnRowAdd, 'click', () => {
       let tabs = quickadd.querySelector('.is-pop-tabs');
       tabs.style.display = 'none';
       const viewportHeight = window.innerHeight;
-      const top = elm.getBoundingClientRect().top;
-      const left = elm.getBoundingClientRect().left; // quickadd.style.display = 'flex';
+      const top = btnRowAdd.getBoundingClientRect().top;
+      const left = btnRowAdd.getBoundingClientRect().left; // quickadd.style.display = 'flex';
 
-      util.showPop(quickadd);
+      util.showPop(quickadd, false, btnRowAdd);
       const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
       const h = quickadd.offsetHeight;
@@ -54396,17 +54389,16 @@ class ColumnTool {
       // });
       // Add column
 
-      let elm = columnTool.querySelector('.cell-add');
-      dom$n.addEventListener(elm, 'click', () => {
+      let btnCellAdd = columnTool.querySelector('.cell-add');
+      dom$n.addEventListener(btnCellAdd, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
         let tabs = quickadd.querySelector('.is-pop-tabs');
         tabs.style.display = 'flex';
-        const elm = columnTool.querySelector('.cell-add');
-        const top = elm.getBoundingClientRect().top + window.pageYOffset;
-        const left = elm.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
+        const top = btnCellAdd.getBoundingClientRect().top + window.pageYOffset;
+        const left = btnCellAdd.getBoundingClientRect().left + window.pageXOffset; // quickadd.style.display = 'flex';
 
-        util.showPop(quickadd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        util.showPop(quickadd, false, btnCellAdd); //const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         //const h = quickadd.offsetHeight;
 
         quickadd.style.top = top + 35 + 'px';
@@ -54427,15 +54419,14 @@ class ColumnTool {
         }
       }); // More
 
-      elm = columnTool.querySelector('.cell-more');
-      dom$n.addEventListener(elm, 'click', () => {
+      const btnCellMore = columnTool.querySelector('.cell-more');
+      dom$n.addEventListener(btnCellMore, 'click', () => {
         let cell = util.cellSelected();
         if (!cell) return;
-        const elm = columnTool.querySelector('.cell-more');
-        const top = elm.getBoundingClientRect().top + window.pageYOffset;
-        const left = elm.getBoundingClientRect().left + window.pageXOffset; // columnMore.style.display = 'flex';
+        const top = btnCellMore.getBoundingClientRect().top + window.pageYOffset;
+        const left = btnCellMore.getBoundingClientRect().left + window.pageXOffset; // columnMore.style.display = 'flex';
 
-        util.showPop(columnMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+        util.showPop(columnMore, false, btnCellMore); //const w = columnMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         //const h = columnMore.offsetHeight;
 
         columnMore.style.top = top + 35 + 'px';
@@ -54456,7 +54447,7 @@ class ColumnTool {
         }
       }); // Delete column
 
-      elm = columnTool.querySelector('.cell-remove');
+      let elm = columnTool.querySelector('.cell-remove');
       dom$n.addEventListener(elm, 'click', () => {
         this.grid.removeColumn();
         util.clearControls();
@@ -60750,7 +60741,7 @@ class ElementTool {
       const top = elmAdd.getBoundingClientRect().top;
       const left = elmAdd.getBoundingClientRect().left; // quickadd.style.display = 'flex';
 
-      util.showPop(quickadd);
+      util.showPop(quickadd, false, elmAdd);
       const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
       const h = quickadd.offsetHeight;
@@ -60849,13 +60840,13 @@ class ElementTool {
         }
       });
     });
-    const elmMore = elementTool.querySelector('.elm-more');
-    dom$9.addEventListener(elmMore, 'click', () => {
+    const btnMore = elementTool.querySelector('.elm-more');
+    dom$9.addEventListener(btnMore, 'click', () => {
       const viewportHeight = window.innerHeight;
-      const top = elmMore.getBoundingClientRect().top;
-      const left = elmMore.getBoundingClientRect().left; // elementMore.style.display = 'flex';
+      const top = btnMore.getBoundingClientRect().top;
+      const left = btnMore.getBoundingClientRect().left; // elementMore.style.display = 'flex';
 
-      util.showPop(elementMore);
+      util.showPop(elementMore, false, btnMore);
       const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
       const h = elementMore.offsetHeight;
@@ -61002,9 +60993,9 @@ class ElementTool {
     let elmMore = elementTool.querySelector('.elm-more');
     const viewportHeight = window.innerHeight;
     const top = elmMore.getBoundingClientRect().top;
-    const left = elmMore.getBoundingClientRect().left; // elementMore.style.display = 'flex';
+    const left = elmMore.getBoundingClientRect().left;
+    elementMore.style.display = 'flex'; // this.util.showPop(elementMore);
 
-    this.util.showPop(elementMore);
     const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
     const h = elementMore.offsetHeight;