@innovastudio/contentbuilder 1.5.77 → 1.5.80

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.77",
+  "version": "1.5.80",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -1317,6 +1317,54 @@ button:focus-visible {
 .is-ui .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
   padding-top: 5px !important;
 }
+#_cbhtml .is-rte-pop.rte-color-picker._4lines.active,
+.is-ui .is-rte-pop.rte-color-picker._4lines.active {
+  animation-name: colorpicker-slide-out-4lines;
+}
+@keyframes colorpicker-slide-out-4lines {
+  from {
+    height: 0;
+  }
+  to {
+    height: 420px;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._4lines.deactive,
+.is-ui .is-rte-pop.rte-color-picker._4lines.deactive {
+  animation-name: colorpicker-slide-in-4lines;
+}
+@keyframes colorpicker-slide-in-4lines {
+  from {
+    height: 420px;
+  }
+  to {
+    height: 0;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._5lines.active,
+.is-ui .is-rte-pop.rte-color-picker._5lines.active {
+  animation-name: colorpicker-slide-out-5lines;
+}
+@keyframes colorpicker-slide-out-5lines {
+  from {
+    height: 0;
+  }
+  to {
+    height: 451px;
+  }
+}
+#_cbhtml .is-rte-pop.rte-color-picker._5lines.deactive,
+.is-ui .is-rte-pop.rte-color-picker._5lines.deactive {
+  animation-name: colorpicker-slide-in-5lines;
+}
+@keyframes colorpicker-slide-in-5lines {
+  from {
+    height: 451px;
+  }
+  to {
+    height: 0;
+  }
+}
 #_cbhtml .is-rte-pop.rte-icon-options,
 .is-ui .is-rte-pop.rte-icon-options {
   width: 270px;

package/public/contentbuilder/contentbuilder.esm.js

@@ -1494,10 +1494,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);
@@ -5334,15 +5334,15 @@ class Util {
       } 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);
@@ -14637,6 +14637,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}`);
+            }
+          }
         }
       });
     }
@@ -17876,6 +17886,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');
@@ -46779,7 +46790,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>
@@ -46969,7 +46980,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>
@@ -50565,6 +50576,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();
@@ -50608,6 +50625,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>
@@ -50686,6 +50706,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');
@@ -63511,6 +63536,10 @@ class ColorPicker {
       const poppicker = builderStuff.querySelector('.pop-picker');
       poppicker.style.display = 'flex';
       poppicker.style.opacity = 0;
+      if (this.opts.colors.length <= 21) poppicker.style.height = '360px'; // 3 lines 
+      else if (this.opts.colors.length > 21 && this.opts.colors.length <= 28) poppicker.style.height = '390px'; // 4 lines
+      else if (this.opts.colors.length > 28) poppicker.style.height = '420px'; // 5 lines
+
       const pickr = Pickr.create({
         el: '._pop-colpick',
         theme: 'nano',
@@ -67399,6 +67428,10 @@ class Rte {
     btnRteColor.forEach(btn => {
       btn.addEventListener('click', () => {
         const pop = this.rteColorPicker;
+        const numOfColors = this.builder.colors.length;
+        if (numOfColors > 21 && numOfColors <= 28) pop.classList.add('_4lines'); // 4 lines
+        else if (numOfColors > 28) pop.classList.add('_5lines'); // 5 lines
+
         if (!dom.hasClass(pop, 'active')) {
           this.util.showRtePop(pop, () => {
             const top = btn.getBoundingClientRect().top;
@@ -68328,15 +68361,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();
@@ -96506,7 +96539,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       */
       src = this.viewFileUrl + '?url=' + src;
     }
-    const width = 512;
+    const width = 768;
     const height = 512;
     const img = new Image();
     img.src = src;
@@ -96552,7 +96585,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       model,
       prompt: prompt,
       negative_prompt,
-      width: 512,
+      width: 768,
       height: 512,
       steps,
       guidance,
@@ -97246,18 +97279,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();
       }
     }