@innovastudio/contentbox 1.4.1 → 1.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.4.1",
   "type": "module",
+  "version": "1.4.2",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.2",
+    "@innovastudio/contentbuilder": "^1.3.4",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -77537,7 +77537,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77573,7 +77574,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77608,7 +77610,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77693,7 +77696,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77710,7 +77714,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77819,7 +77824,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77836,7 +77842,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77895,7 +77902,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -77912,7 +77920,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -77974,7 +77983,8 @@ class Rte {
               pop.style.top = this.rteTool.style.top; //(top - (h/2) + 20) + 'px';
 
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -78202,7 +78212,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = top - h / 2 + 20 + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -78228,7 +78239,8 @@ class Rte {
                 } else if (this.builder.opts.toolbar === 'right') {
                   pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                   pop.style.left = 'auto';
-                  const viewportWidth = window.innerWidth;
+                  const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                   pop.style.right = viewportWidth - left + 9 + 'px';
                 } else {
                   pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px'; 
@@ -78245,7 +78257,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = top - h / 2 + 20 + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -78270,7 +78283,8 @@ class Rte {
                 } else if (this.builder.opts.toolbar === 'right') {
                   pop.style.top = parseInt(this.elementRteMoreOptions.style.top) + this.elementRteMoreOptions.offsetHeight - h + 'px';
                   pop.style.left = 'auto';
-                  const viewportWidth = window.innerWidth;
+                  const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                   pop.style.right = viewportWidth - left + 9 + 'px';
                 } else {
                   pop.style.top = top + 54 - 6 + 'px'; // pop.style.left = (left -(w/2)+23) + 'px'; 
@@ -78467,6 +78481,82 @@ class Rte {
         const h = pop.offsetHeight;
 
         if (!dom.hasClass(pop, 'active')) {
+          // Get realtime status
+          const elm = this.builder.activeElement;
+          let btns = pop.querySelectorAll('.rte-fontsize-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          const arrSizes = this.builder.opts.fontSizeClassValues;
+
+          for (var i = 0; i <= arrSizes.length - 1; i++) {
+            if (dom.hasClass(elm, 'size-' + arrSizes[i])) {
+              // Get current class
+              const btns = pop.querySelectorAll('.rte-fontsize-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+
+                if (parseInt(num) === arrSizes[i]) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          }
+
+          btns = pop.querySelectorAll('.rte-lineheight-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          let classes = this.builder.cssClasses.leading;
+
+          for (let i = 0; i < Object.keys(classes).length; i++) {
+            let className = Object.values(classes)[i];
+
+            if (dom.hasClass(elm, className)) {
+              const btns = pop.querySelectorAll('.rte-lineheight-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+                let val;
+                if (className === classes.leading_10) val = '1';
+                if (className === classes.leading_12) val = '1.2';
+                if (className === classes.leading_14) val = '1.4';
+                if (className === classes.leading_16) val = '1.6';
+                if (className === classes.leading_18) val = '1.8';
+                if (className === classes.leading_20) val = '2';
+                if (className === classes.leading_22) val = '2.2';
+
+                if (num === val) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          }
+
+          btns = pop.querySelectorAll('.rte-letterspacing-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            btn.classList.remove('on'); // clear selection
+          });
+          classes = this.builder.cssClasses.tracking;
+
+          for (let i = 0; i < Object.keys(classes).length; i++) {
+            let className = Object.values(classes)[i];
+
+            if (dom.hasClass(elm, className)) {
+              const btns = pop.querySelectorAll('.rte-letterspacing-options button');
+              Array.prototype.forEach.call(btns, btn => {
+                let num = btn.getAttribute('data-value');
+                let val;
+                if (className === classes.tracking_025) val = '1';
+                if (className === classes.tracking_050) val = '2';
+
+                if (num === val) {
+                  btn.classList.add('on');
+                }
+              });
+            }
+          } // /Get realtime status
+
+
           this.util.showRtePop(pop, () => {
             if (this.builder.opts.toolbar === 'left') {
               pop.style.top = top - h / 2 + 20 + 'px';
@@ -78475,7 +78565,8 @@ class Rte {
             } else if (this.builder.opts.toolbar === 'right') {
               pop.style.top = top - h / 2 + 20 + 'px';
               pop.style.left = 'auto';
-              const viewportWidth = window.innerWidth;
+              const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
               pop.style.right = viewportWidth - left + 9 + 'px';
             } else {
               pop.style.top = top + 54 - 6 + 'px';
@@ -78492,7 +78583,8 @@ class Rte {
               } else if (this.builder.opts.toolbar === 'right') {
                 pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
                 pop.style.left = 'auto';
-                const viewportWidth = window.innerWidth;
+                const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
                 pop.style.right = viewportWidth - left + 9 + 'px';
               } else {
                 pop.style.top = top + 54 - 6 + 'px';
@@ -79233,6 +79325,10 @@ class Rte {
           currentFontSize = Number(window.getComputedStyle(container).getPropertyValue('font-size').match(/\d+/)[0]);
         }
 
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-fontsize-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
         dom.execCommand('font-size', currentFontSize + 1 + 'px', (ok, container) => {
           // 1px is dummy so that it won't be cleaned in util.js (checkStyleIfSameAsParent) because of same size
           if (!ok) {
@@ -79278,6 +79374,10 @@ class Rte {
         util.restoreSelection(); //a must
 
         this.builder.uo.saveForUndo();
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-lineheight-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
 
         if (this.builder.useCssClasses) {
           const selection = dom.getSelection();
@@ -79459,6 +79559,10 @@ class Rte {
         util.restoreSelection(); //a must
 
         this.builder.uo.saveForUndo();
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-letterspacing-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
 
         if (this.builder.useCssClasses) {
           const selection = dom.getSelection();
@@ -79689,7 +79793,7 @@ class Rte {
   //         } else if(this.builder.opts.toolbar === 'right') {
   //             pop.style.top = (parseInt(this.rteTool.style.top) + this.rteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
   //             pop.style.left = 'auto';
-  //             const viewportWidth = window.innerWidth;
+  //             const viewportWidth = document.body.clientWidth;//window.innerWidth;
   //             pop.style.right = (viewportWidth - left + 9) + 'px';  
   //         } else {
   //             pop.style.top = (top + 54 - 6) + 'px';
@@ -79725,7 +79829,8 @@ class Rte {
         } else if (this.builder.opts.toolbar === 'right') {
           pop.style.top = top - h / 2 + 20 + 'px';
           pop.style.left = 'auto';
-          const viewportWidth = window.innerWidth;
+          const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
           pop.style.right = viewportWidth - left + 9 + 'px';
         } else {
           pop.style.top = top + 54 - 6 + 'px';
@@ -79751,7 +79856,8 @@ class Rte {
           } else if (this.builder.opts.toolbar === 'right') {
             pop.style.top = parseInt(this.rteMoreOptions.style.top) + this.rteMoreOptions.offsetHeight - h + 'px';
             pop.style.left = 'auto';
-            const viewportWidth = window.innerWidth;
+            const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
             pop.style.right = viewportWidth - left + 9 + 'px';
           } else {
             pop.style.top = top + 54 - 6 + 'px';
@@ -79816,7 +79922,8 @@ class Rte {
       pop.style.top = parseFloat(this.rteTool.style.top) + this.rteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
 
       pop.style.left = 'auto';
-      const viewportWidth = window.innerWidth;
+      const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
       pop.style.right = viewportWidth - left + 9 + 'px';
     } else {
       const adj = 0;
@@ -79841,7 +79948,7 @@ class Rte {
   //         } else if(this.builder.opts.toolbar === 'right') {
   //             pop.style.top = (parseInt(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h) + 'px'; //(top - (h/2) + 20) + 'px';
   //             pop.style.left = 'auto';
-  //             const viewportWidth = window.innerWidth;
+  //             const viewportWidth = document.body.clientWidth;//window.innerWidth;
   //             pop.style.right = (viewportWidth - left + 9) + 'px';  
   //         } else {
   //             pop.style.top = (top + 54 - 6) + 'px';
@@ -79890,7 +79997,8 @@ class Rte {
       pop.style.top = parseFloat(this.elementRteTool.style.top) + this.elementRteTool.offsetHeight - h + 'px'; //(top - (h/2) + 20) + 'px';
 
       pop.style.left = 'auto';
-      const viewportWidth = window.innerWidth;
+      const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
       pop.style.right = viewportWidth - left + 9 + 'px';
     } else {
       const adj = 0;
@@ -81721,7 +81829,8 @@ class Rte {
   }
 
   positionToolbar() {
-    const viewportWidth = window.innerWidth;
+    const viewportWidth = document.body.clientWidth; //window.innerWidth;
+
     const viewportHeight = window.innerHeight;
 
     if (this.builder.opts.toolbar === 'left' || this.builder.opts.toolbar === 'right') {
@@ -82208,6 +82317,8 @@ class Lightbox {
           iframe.setAttribute('src', 'about:blank');
         }
 
+        const div = lightbox.querySelector('.lightbox-content');
+        if (lightbox.querySelector('video')) div.innerHTML = '';
         lightbox.style.display = '';
         this.builder.preserveSelection = false;
         if (this.elmFocus) this.elmFocus.focus();
@@ -85098,8 +85209,8 @@ class ContentBuilder {
 
       if (!(b || j || m || n || target.tagName.toLowerCase() === 'img')) {
         let imageTool = document.querySelector('#divImageTool');
-        imageTool.style.display = '';
-        this.activeImage = null;
+        imageTool.style.display = ''; // this.activeImage =  null; // Commented => Additional (to prevent lost focus)
+
         let imageResizer = document.querySelector('#divImageResizer');
         imageResizer.style.display = 'none'; // moveable
 
@@ -85117,8 +85228,11 @@ class ContentBuilder {
       if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
         if (!this.dom.getSelected()) {
-          util.clearActiveCell();
-          util.clearControls();
+          if (!document.querySelector('.is-modal.active')) {
+            // Additional (to prevent lost focus)
+            util.clearActiveCell();
+            util.clearControls();
+          }
         }
       } // Button Modal
 
@@ -85859,7 +85973,8 @@ class ContentBuilder {
   }
 
   selectAsset(s) {
-    let extension = s.split('.').pop();
+    let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
+
     extension = extension.toLowerCase();
     let ok = false;
 
@@ -86754,7 +86869,7 @@ class ContentBuilder {
 
     if (elm.getAttribute('data-modal-url')) {
       url = elm.getAttribute('data-modal-url');
-      let extension = url.split('.').pop();
+      let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
 
       if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm') {
         this.lightbox.openImage(url, theme, color);
@@ -86871,7 +86986,8 @@ class ContentBuilder {
               return false;
             }
 
-            let extension = url.split('.').pop();
+            let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
+
             let theme = link.getAttribute('data-modal-theme');
             if (!theme) theme = 'light';
             const color = elm.getAttribute('data-modal-color');
@@ -89220,6 +89336,7 @@ class ContentBox {
   constructor(settings = {}) {
     const defaults = {
       wrapper: '.is-wrapper',
+      previewURL: 'preview.html',
       sectionHoverOutline: false,
       useSidebar: true,
       disableLoadingStatus: false,