@innovastudio/contentbox 1.6.91 → 1.6.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.91",
+  "version": "1.6.92",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -54,7 +54,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.77",
+    "@innovastudio/contentbuilder": "^1.5.79",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -13193,6 +13193,11 @@ class PanelBox {
                         <button title="${out('Increase')}" data-content-size="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>
                     </div>
 
+                    <label class="label checkbox mt-3" style="margin-bottom:15px">
+                        <input type="checkbox" class="chk-lock-contentsize" />
+                        <span>${out('Lock Content Size')}</span>
+                    </label>
+
                     <div class="flex">
                         <div class="mr-4">
                             <div class="label mt-2">${out('Position')}:</div>
@@ -13729,6 +13734,11 @@ class PanelBox {
     chkParallax.addEventListener('click', () => {
       let isParallax = chkParallax.checked;
       this.box.parallaxContent(isParallax);
+    });
+    const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
+    chkLockContentSize.addEventListener('click', () => {
+      let isLockContentSize = chkLockContentSize.checked;
+      this.box.lockContentSize(isLockContentSize);
     }); // Text
 
     const btnTextAlign = panel.querySelectorAll('[data-align]');
@@ -14285,6 +14295,16 @@ class PanelBox {
           chkParallax.checked = true;
         }
       }
+    } // Lock Content Size
+
+
+    const chkLockContentSize = panel.querySelector('.chk-lock-contentsize');
+    chkLockContentSize.checked = false;
+
+    if (container) {
+      if (container.classList.contains('v3')) {
+        chkLockContentSize.checked = true;
+      }
     } // Text Color
 
 
@@ -27883,10 +27903,10 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-video');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<video style="width: 100%;" loop="" autoplay="">
+      let html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
                 <source src="${builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
       if (builder.opts.snippetSampleVideo) {
-        html = `<video style="width: 100%;" loop="" autoplay="">
+        html = `<video style="width: 100%;" loop="" playsinline="" muted="" autoplay="">
                     <source src="${builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
       }
       util.addContent(html, mode);
@@ -31723,15 +31743,15 @@ class Util$1 {
       } else {
         newelement.click();
       }
-      const builderStuff = this.builder.builderStuff;
-      let quickadd = builderStuff.querySelector('.quickadd');
-      this.hidePop(quickadd);
 
       // LATER: auto scroll
 
       // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool. 
     }
 
+    const builderStuff = this.builder.builderStuff;
+    let quickadd = builderStuff.querySelector('.quickadd');
+    if (quickadd) this.hidePop(quickadd);
     if (this.builder.useCssClasses) {
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
@@ -41026,6 +41046,16 @@ class HtmlUtil {
             imgUrl = convertMediaUrl(imgUrl);
             elm.setAttribute('href', `${imgUrl}`);
           }
+          if (elm.tagName.toLowerCase() === 'a') {
+            //lightbox
+            let s = elm.getAttribute('href');
+            let extension = s.split('.').pop().split('?')[0].split('#')[0]; //
+            extension = extension.toLowerCase();
+            if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4' || extension === 'mp3') {
+              let mediaUrl = convertMediaUrl(s);
+              elm.setAttribute('href', `${mediaUrl}`);
+            }
+          }
         }
       });
     }
@@ -44265,6 +44295,7 @@ const renderSnippetPanel = (builder, snippetOpen) => {
         block.offsetWidth / 2;
         let x = (snippetX - block.offsetWidth / 2 - rectContainer.left) / docContainer.offsetWidth * 100;
         let y = (snippetY - block.offsetHeight / 2 - rectContainer.top) / docContainer.offsetHeight * 100;
+        if (y < 0) y = 15; // if block is not fully loaded, block height may be incorrect (y can be negative). Adjust to 15%.
         block.style.top = y + '%';
         block.style.left = x + '%';
         block.removeAttribute('data-new-dummy');
@@ -73168,7 +73199,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <span>${util.out('Border Color')}</span>:
+                                    <span>${util.out('Border Style')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -73358,7 +73389,7 @@ class ButtonEditor {
 
                         <div class="flex flex-col" style="margin:15px 0 0">
                             <div>
-                                <span>${util.out('Border Color')}</span>:
+                                <span>${util.out('Border Style')}</span>:
                             </div>
                             <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                 <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -76954,6 +76985,12 @@ class Video {
         } else {
           inpAutoplay.checked = false;
         }
+        const inpMuted = videoModal.querySelector('.input-video-muted');
+        if (video.hasAttribute('muted')) {
+          inpMuted.checked = true;
+        } else {
+          inpMuted.checked = false;
+        }
         util.showModal(videoModal, true, () => {
           btn.removeAttribute('data-focus');
           btn.focus();
@@ -76997,6 +77034,9 @@ class Video {
                     <label style="display:block;margin-top:5px;">
                         <input class="input-video-autoplay" id="__input_video_autoplay" type="checkbox" />  ${util.out('Autoplay')}&nbsp;
                     </label>
+                    <label style="display:block;margin-top:5px;">
+                        <input class="input-video-muted" id="__input_video_muted" type="checkbox" />  ${util.out('Muted')}&nbsp;
+                    </label>
                     
                     <div style="text-align:right;margin-top:14px;">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -77075,6 +77115,11 @@ class Video {
         } else {
           video.removeAttribute('autoplay');
         }
+        if (videoModal.querySelector('.input-video-muted').checked) {
+          video.setAttribute('muted', '');
+        } else {
+          video.removeAttribute('muted');
+        }
         if (videoModal.querySelector('.input-url').value !== '') {
           let url = videoModal.querySelector('.input-url').value;
           let source = video.querySelector('source');
@@ -94717,15 +94762,15 @@ class Rte {
         activeCol = this.builder.activeCol;
         spans = activeCol.querySelectorAll('span');
         Array.prototype.forEach.call(spans, span => {
-          let attr = span.getAttribute('data-keep');
+          let attr = span.hasAttribute('data-keep');
           if (!attr) {
             span.outerHTML = span.innerHTML;
           }
         });
         Array.prototype.forEach.call(spans, span => {
-          let attr = span.getAttribute('data-keep');
+          let attr = span.hasAttribute('data-keep');
           if (attr) {
-            dom.removeAttribute(span, 'data-keep');
+            span.removeAttribute('data-keep');
           }
         });
         this.getState();
@@ -123635,18 +123680,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
 
     if (this.dom.textSelection()) {
-      if (e.keyCode === '38') {
+      if (e.keyCode === 38) {
         // Up arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '40') {
+      } else if (e.keyCode === 40) {
         // Down arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '37') {
+      } else if (e.keyCode === 37) {
         // Left arrow
         this.util.saveSelection();
-      } else if (e.keyCode === '39') {
+      } else if (e.keyCode === 39) {
         // Right arrow
         this.util.saveSelection();
+      } else if (e.keyCode === 13) {
+        // Enter
+        this.util.saveSelection();
       }
     }
 
@@ -138817,6 +138865,18 @@ class Box {
     this.builder.onChange();
   }
 
+  lockContentSize(isLock) {
+    this.builder.editor.saveForUndo();
+    let activeBox = this.builder.activeBox;
+    let container = activeBox.querySelector('.is-builder');
+
+    if (isLock) {
+      container.classList.add('v3');
+    } else {
+      container.classList.remove('v3');
+    }
+  }
+
   parallaxContent(isParallax) {
     this.builder.editor.saveForUndo();
     let activeBox = this.builder.activeBox;
@@ -160273,65 +160333,93 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
 
   boxRender() {
+    if (!this.linksWithClickListeners) {
+      this.linksWithClickListeners = new Set();
+    }
+
+    const links = this.wrapperEl.querySelectorAll('.is-box .is-overlay a'); // eg. slider links
+
+    links.forEach(link => {
+      let url = link.getAttribute('href');
+
+      if (url.indexOf('#') === 0 || link.classList.contains('glightbox')) ; else {
+        if (!this.linksWithClickListeners.has(link)) {
+          link.addEventListener('click', e => {
+            // Will go to the link
+            const answer = window.confirm(out('Do you really want to leave?')); // Cancel the navigation and stay on the same page
+
+            if (!answer) {
+              e.preventDefault();
+            }
+
+            e.stopImmediatePropagation();
+          });
+          this.linksWithClickListeners.add(link); // Mark the listener as added
+        }
+      }
+    });
     const navbar = this.doc.querySelector('.is-section-navbar');
 
     if (navbar) {
       const links = navbar.querySelectorAll('a');
       links.forEach(link => {
-        link.addEventListener('click', e => {
-          let url = link.getAttribute('href');
-
-          if (url) {
-            if (url.indexOf('#') === 0) {
-              // Will go to bookmark
-              if (url.indexOf('#section') === 0) {
-                let num = url.replace('#section', '');
-
-                if (!isNaN(parseInt(num))) {
-                  let sections = this.doc.querySelectorAll('.is-section');
-                  let gotoSection;
-                  let x = 0;
-                  sections.forEach(function (section) {
-                    if (!dom.hasClass(section, 'is-section-navbar')) {
-                      if (x === num - 1) {
-                        gotoSection = section;
+        if (!this.linksWithClickListeners.has(link)) {
+          link.addEventListener('click', e => {
+            let url = link.getAttribute('href');
+
+            if (url) {
+              if (url.indexOf('#') === 0) {
+                // Will go to bookmark
+                if (url.indexOf('#section') === 0) {
+                  let num = url.replace('#section', '');
+
+                  if (!isNaN(parseInt(num))) {
+                    let sections = this.doc.querySelectorAll('.is-section');
+                    let gotoSection;
+                    let x = 0;
+                    sections.forEach(function (section) {
+                      if (!dom.hasClass(section, 'is-section-navbar')) {
+                        if (x === num - 1) {
+                          gotoSection = section;
+                        }
+
+                        x++;
                       }
+                    });
 
-                      x++;
+                    if (gotoSection) {
+                      this.scrollTo(gotoSection);
                     }
-                  });
 
-                  if (gotoSection) {
-                    this.scrollTo(gotoSection);
+                    e.preventDefault();
                   }
+                } else {
+                  try {
+                    let bookmark = this.doc.querySelector(url);
 
-                  e.preventDefault();
-                }
-              } else {
-                try {
-                  let bookmark = this.doc.querySelector(url);
-
-                  if (bookmark) {
-                    this.scrollTo(bookmark);
-                    e.preventDefault();
+                    if (bookmark) {
+                      this.scrollTo(bookmark);
+                      e.preventDefault();
+                    }
+                  } catch (e) {// Do Nothing
                   }
-                } catch (e) {// Do Nothing
                 }
+              } else {
+                // Prevent to go to the link
+                if (e.target.closest('#is-menu-toggle')) return;
+                e.preventDefault();
+                e.stopImmediatePropagation();
               }
             } else {
-              // Prevent to go to the link
-              if (e.target.closest('#is-menu-toggle')) return;
-              e.preventDefault();
-              e.stopImmediatePropagation();
-            }
-          } else {
-            if (link.closest('.is-menu-search')) ; else {
-              if (!e.target.getAttribute('href')) return;
-              e.preventDefault();
-              e.stopImmediatePropagation();
+              if (link.closest('.is-menu-search')) ; else {
+                if (!e.target.getAttribute('href')) return;
+                e.preventDefault();
+                e.stopImmediatePropagation();
+              }
             }
-          }
-        });
+          });
+          this.linksWithClickListeners.add(link); // Mark the listener as added
+        }
       });
     }
   } // box
@@ -160498,7 +160586,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     '</div>');
     */
 
-    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Change Background') + '" title="' + out('Change Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select') + '" title="' + out('Select') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
+    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<button type="button" class="is-cover-upload" tabindex="-1" data-tooltip-top data-title="' + out('Upload Background') + '" title="' + out('Upload Background') + '" style="background:rgb(78 170 57)"><svg class="is-icon-flex" style="position: absolute;top: 9px;left: 9px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></button>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select Background') + '" title="' + out('Select Background') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
     let info = box.querySelector('.is-box-info');
     if (info) info.parentNode.removeChild(info);