@innovastudio/contentbox 1.2.26 → 1.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.26",
+  "version": "1.2.29",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",

package/public/contentbox/contentbox.esm.js

@@ -2423,7 +2423,9 @@ class EditSection {
     const activeSection = this.builder.activeSection;
     activeSection.removeAttribute('data-bottom-top');
     activeSection.removeAttribute('data-300-bottom');
-    activeSection.removeAttribute('data-400-bottom');
+    activeSection.removeAttribute('data-400-bottom'); //remove old (backward compatible)
+
+    activeSection.removeAttribute('data-center-top');
     activeSection.removeAttribute('data-anim-start');
     activeSection.style.transform = '';
 
@@ -2436,10 +2438,10 @@ class EditSection {
       activeSection.setAttribute('data-300-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
     } else if (s === 'slide-left') {
       activeSection.setAttribute('data-bottom-top', 'transform:translateX(100%) translateY(0%) scale(1)');
-      activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)'); //400 is shorter than 300
+      activeSection.setAttribute('data-center-top', 'transform:translateX(0%) translateY(0%) scale(1)'); //400 is shorter than 300
     } else if (s === 'slide-right') {
       activeSection.setAttribute('data-bottom-top', 'transform:translateX(-100%) translateY(0%) scale(1)');
-      activeSection.setAttribute('data-400-bottom', 'transform:translateX(0%) translateY(0%) scale(1)');
+      activeSection.setAttribute('data-center-top', 'transform:translateX(0%) translateY(0%) scale(1)');
     }
 
     activeSection.setAttribute('data-anim-start', s);
@@ -9141,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');
@@ -9442,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');
@@ -9716,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)', '');
           }
         }
       }
@@ -9753,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');