@innovastudio/contentbox 1.2.27 → 1.2.30

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.27",
+  "version": "1.2.30",
+  "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -9143,14 +9143,20 @@ class EditBox {
     const chkBoxBgImageGrayscale = modalEditBox.querySelector('.chk-box-bgimage-grayscale');
     chkBoxBgImageGrayscale.addEventListener('click', () => {
       const activeBox = this.builder.activeBox;
+      const overlay = activeBox.querySelector('.is-overlay');
       const overlayBg = activeBox.querySelector('.is-overlay-bg');
 
       if (chkBoxBgImageGrayscale.checked) {
         overlayBg.style.filter = 'grayscale(1)';
+        overlay.style.filter = 'grayscale(1)';
       } else {
         if (overlayBg.style.filter) {
           overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
         }
+
+        if (overlay.style.filter) {
+          overlay.style.filter = overlay.style.filter.replace('grayscale(1)', '');
+        }
       }
     });
     const chkBoxAddText = modalEditBox.querySelector('.cmd-box-addtext');
@@ -9444,6 +9450,7 @@ class EditBox {
     const builderStuff = this.builderStuff;
     const modalEditBox = builderStuff.querySelector('.is-modal.editbox');
     const activeBox = this.builder.activeBox;
+    let overlay = activeBox.querySelector('.is-overlay');
     const overlayBg = activeBox.querySelector('.is-overlay-bg');
     const overlayVideo = activeBox.querySelector('.is-video-bg');
     const overlayContent = activeBox.querySelector('.is-overlay-content');
@@ -9718,10 +9725,21 @@ class EditBox {
     if (url !== '') {
       divPreview.innerHTML = `<img src="${url}">`;
 
+      if (overlay) {
+        if (overlay.style.filter) {
+          if (overlay.style.filter.indexOf('grayscale') !== -1) {
+            chkImageGrayscale.checked = true;
+          }
+        }
+      }
+
       if (overlayBg) {
         if (overlayBg.style.filter) {
           if (overlayBg.style.filter.indexOf('grayscale') !== -1) {
             chkImageGrayscale.checked = true;
+            overlay.style.filter = 'grayscale(1)'; // Change filter from -is-overlay-bg to is-overlay (to prevent conflict with animation)
+
+            overlayBg.style.filter = overlayBg.style.filter.replace('grayscale(1)', '');
           }
         }
       }
@@ -9755,8 +9773,6 @@ class EditBox {
     } // FIX OLD VERSION
 
 
-    let overlay = activeBox.querySelector('.is-overlay');
-
     if (overlay) ; else {
       activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
       overlay = activeBox.querySelector('.is-overlay');
@@ -84212,6 +84228,15 @@ class ContentBox {
           this.boxSetup(box);
         });
       }
+    }); // Change filter from -is-overlay-bg to is-overlay (to prevent conflict with animation)
+
+    let overlayBgs = document.querySelectorAll('.is-overlay-bg');
+    overlayBgs.forEach(elm => {
+      if (elm.style) if (elm.style.filter) {
+        if (elm.style.filter.indexOf('grayscale') !== -1) {
+          elm.parentNode.style.filter = 'grayscale(1)';
+        }
+      }
     });
     this.editor.applyBehavior(); // Re-apply