@innovastudio/contentbuilder 1.2.16 → 1.2.19

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -4108,7 +4108,7 @@ class Util {
     let html = '';
     html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-content" style="padding-bottom:20px;">
-                <p>${message}</p>
+                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                 <button title="${this.out('Delete')}" class="input-ok classic focus-warning">${this.out('Delete')}</button>
             </div>
         </div>`;
@@ -4116,7 +4116,7 @@ class Util {
     if (yesno) {
       html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content" style="padding-bottom:20px;">
-                    <p>${message}</p>
+                    <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                     <button title="${this.out('Cancel')}" class="input-cancel classic-secondary">${this.out('Cancel')}</button>
                     <button title="${yestext}" class="input-ok classic-primary">${yestext}</button>
                 </div>
@@ -4204,7 +4204,16 @@ class Util {
   }
 
   showPop(pop, cancelCallback, btn) {
-    const dom = this.dom;
+    const dom = this.dom; // Hide other pops
+
+    let elms = this.builder.doc.querySelectorAll('.is-pop.active');
+    Array.prototype.forEach.call(elms, elm => {
+      if (elm !== pop) {
+        elm.style.display = '';
+        dom.removeClass(elm, 'active');
+        elm.setAttribute('aria-hidden', true);
+      }
+    });
     if (pop.style.display === 'flex') return; // important
 
     this.clearAllEventListener(pop); // for safety of uncleared events as a result of closing without hidePop()
@@ -5163,11 +5172,13 @@ class Util {
       rtepop.style.display = '';
       dom.removeClass(rtepop, 'active');
       dom.removeClass(rtepop, 'deactive'); // dom.addClass(rtepop, 'deactive');
-    }); // let pops = builderStuff.querySelectorAll('.is-pop');
-    // Array.prototype.forEach.call(pops, (pop) => {
-    //     pop.style.display = '';
-    // });
-
+    });
+    let pops = builderStuff.querySelectorAll('.is-pop');
+    Array.prototype.forEach.call(pops, pop => {
+      pop.style.display = '';
+      dom.removeClass(pop, 'active');
+      pop.setAttribute('aria-hidden', true);
+    });
     this.builder.colTool.lockIndicator.style.display = ''; // Clear resizable images
     // this.builder.element.image.clearImageResizer();
   } // source: http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
@@ -17898,7 +17909,7 @@ class ColumnTool$1 {
       setTimeout(() => {
         dom$G.removeClass(this.columnMore, 'transition1');
       }, 300);
-    }, 300);
+    }, 30);
   }
 
   hide() {
@@ -21616,16 +21627,15 @@ const renderSnippetPanel = builder => {
     animation: 150,
     onChoose: () => {
       // Make moving draggable item scaled & positioned correctly (due to zoom value)
-      const newCss = `
-            <style id="css-scale">
-                .sortable-drag::before {
-                    transform: scale(1);
-                }
-            </style>
-            `;
+      // const newCss = `
+      // <style id="css-scale">
+      //     .sortable-drag::before {
+      //         transform: scale(1);
+      //     }
+      // </style>
+      // `;
       const oldCss = builder.contentStuff.querySelector('#css-scale');
-      if (oldCss) oldCss.parentNode.removeChild(oldCss);
-      builder.contentStuff.insertAdjacentHTML('afterbegin', newCss);
+      if (oldCss) oldCss.parentNode.removeChild(oldCss); // builder.contentStuff.insertAdjacentHTML('afterbegin', newCss);
     },
     onMove: () => {
       let emptyinfo = document.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
@@ -52650,13 +52660,11 @@ class RowTool {
       rowMore = builderStuff.querySelector('.rowmore');
       let elm = rowMore.querySelector('.row-up');
       if (elm) dom$p.addEventListener(elm, 'click', () => {
-        this.grid.moveRowUp();
-        util.clearControls();
+        this.grid.moveRowUp(); // util.clearControls();
       });
       elm = rowMore.querySelector('.row-down');
       if (elm) dom$p.addEventListener(elm, 'click', () => {
-        this.grid.moveRowDown();
-        util.clearControls();
+        this.grid.moveRowDown(); // util.clearControls();
       });
       elm = rowMore.querySelector('.row-duplicate');
       if (elm) dom$p.addEventListener(elm, 'click', () => {
@@ -52926,7 +52934,7 @@ class Modal {
   confirm(message, callback, animated) {
     let html = `<div class="is-modal is-confirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-content" style="padding-bottom:20px;">
-                <p>${message}</p>
+                <div style="margin: 20px 0 30px;font-size: 14px;">${message}</div>
                 <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
             </div>
         </div>`;
@@ -55096,14 +55104,12 @@ class ColumnTool {
 
       elm = columnMore.querySelector('.cell-prev');
       dom$n.addEventListener(elm, 'click', () => {
-        this.grid.moveColumnPrevious();
-        util.clearControls();
+        this.grid.moveColumnPrevious(); // util.clearControls();
       }); // Move Next
 
       elm = columnMore.querySelector('.cell-next');
       dom$n.addEventListener(elm, 'click', () => {
-        this.grid.moveColumnNext();
-        util.clearControls();
+        this.grid.moveColumnNext(); // util.clearControls();
       }); // Move Up
 
       elm = columnMore.querySelector('.cell-up');
@@ -70203,9 +70209,17 @@ class ContentBuilder {
         // & comment the direction setting above
         onChoose: () => {
           // Get zoom (scale) value
-          const area = this.doc.querySelector('.is-builder'); // get one of the builder area
+          let scale;
+
+          if (this.opts.page !== '') {
+            const wrapper = this.doc.querySelector(this.opts.page);
+            scale = dom.getScale(wrapper);
+          } else {
+            const area = this.doc.querySelector('.is-builder'); // get one of the builder area
+
+            scale = dom.getScale(area);
+          } // Make moving draggable item scaled & positioned correctly (due to zoom value)
 
-          const scale = dom.getScale(area); // Make moving draggable item scaled & positioned correctly (due to zoom value)
 
           const newCss = `
                     <style id="css-scale">