@innovastudio/contentbox 1.3.21 → 1.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.3.21",
+  "version": "1.3.24",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.2.18",
+    "@innovastudio/contentbuilder": "^1.2.20",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -2612,7 +2612,7 @@ class EditSection {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
-    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
+    let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
     html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div class="div-section-bgcolor" style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
@@ -15527,8 +15527,16 @@ class Util {
   }
 
   showPop(pop, cancelCallback, btn) {
-    const dom = this.dom;
-    if (pop.style.display === 'flex') return; // important
+    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; 
 
     this.clearAllEventListener(pop); // for safety of uncleared events as a result of closing without hidePop()
 
@@ -16486,11 +16494,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
@@ -29221,7 +29231,7 @@ class ColumnTool$1 {
       setTimeout(() => {
         dom$G.removeClass(this.columnMore, 'transition1');
       }, 300);
-    }, 300);
+    }, 30);
   }
 
   hide() {
@@ -63972,13 +63982,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', () => {
@@ -66418,14 +66426,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');
@@ -81489,8 +81495,8 @@ class ContentBuilder {
           col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
 
           col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON FOCUS
-
-          col.addEventListener('focus', this.handleCellFocus.bind(this, col)); // ON PASTE
+          // col.addEventListener('focus', this.handleCellFocus.bind(this, col));
+          // ON PASTE
 
           col.addEventListener('paste', this.handleCellPaste.bind(this));
           col.setAttribute('data-click', true);