@innovastudio/contentbox 1.2.32 → 1.2.35

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.32",
+  "version": "1.2.35",
+  "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -45,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.25",
+    "@innovastudio/contentbuilder": "^1.1.26",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -9006,7 +9006,8 @@ class EditBox {
       dom$K.removeClass(activeBox, 'is-slideInLeft');
       dom$K.removeClass(activeBox, 'is-slideInRight');
       dom$K.removeClass(activeBox, 'is-zoomIn');
-      dom$K.removeClass(activeBox, 'animated');
+      dom$K.removeClass(activeBox, 'animated'); //clean old
+
       dom$K.removeClass(activeBox, 'pulse');
       dom$K.removeClass(activeBox, 'bounceIn');
       dom$K.removeClass(activeBox, 'fadeIn');
@@ -9021,17 +9022,29 @@ class EditBox {
       dom$K.removeClass(activeBox, 'slideInLeft');
       dom$K.removeClass(activeBox, 'slideInRight');
       dom$K.removeClass(activeBox, 'zoomIn');
+      activeBox.removeAttribute('data-scroll');
+      dom$K.removeClass(activeBox, 'is-inview');
 
       if (selBoxAnimate.value !== '') {
         dom$K.addClass(activeBox, 'is-animated');
         dom$K.addClass(activeBox, selBoxAnimate.value);
-        dom$K.addClass(activeBox, 'animated');
-        dom$K.addClass(activeBox, selBoxAnimate.value.substr(3));
-        dom$K.removeClass(activeBox, 'box-active'); //need this to make animation work
-      } //Trigger Change event
+        activeBox.style.transition = 'none';
+        activeBox.style.opacity = 0;
+        setTimeout(() => {
+          activeBox.style.transition = '';
+          activeBox.style.opacity = '';
+          activeBox.setAttribute('data-scroll', ''); //Trigger Change event
 
+          this.builder.settings.onChange(); //Trigger Render event
 
-      this.builder.settings.onChange();
+          this.builder.settings.onRender(); // a must!!
+        }, 30);
+      } else {
+        //Trigger Change event
+        this.builder.settings.onChange(); //Trigger Render event
+
+        this.builder.settings.onRender();
+      }
     });
     const btnBoxAnimateTest = modalEditBox.querySelector('.cmd-box-animate-test');
     btnBoxAnimateTest.addEventListener('click', () => {
@@ -9051,28 +9064,39 @@ class EditBox {
       dom$K.removeClass(activeBox, 'slideInLeft');
       dom$K.removeClass(activeBox, 'slideInRight');
       dom$K.removeClass(activeBox, 'zoomIn');
-      setTimeout(function () {
-        dom$K.addClass(activeBox, 'animated');
-        dom$K.addClass(activeBox, selBoxAnimate.value.substr(3));
-        dom$K.removeClass(activeBox, 'box-active'); //need this to make animation work
-      }, 50); //Trigger Change event
+      activeBox.removeAttribute('data-scroll');
+      dom$K.removeClass(activeBox, 'is-inview');
 
-      this.builder.settings.onChange();
+      if (selBoxAnimate.value !== '') {
+        dom$K.addClass(activeBox, 'is-animated');
+        dom$K.addClass(activeBox, selBoxAnimate.value);
+        activeBox.style.transition = 'none';
+        activeBox.style.opacity = 0;
+        setTimeout(() => {
+          activeBox.style.transition = '';
+          activeBox.style.opacity = '';
+          activeBox.setAttribute('data-scroll', '');
+          this.builder.settings.onChange();
+          this.builder.settings.onRender(); // a must!!
+        }, 30);
+      } else {
+        this.builder.settings.onChange();
+        this.builder.settings.onRender();
+      }
     });
     const chkAnimateOnce = modalEditBox.querySelector('#chkAnimOnce');
     chkAnimateOnce.addEventListener('click', () => {
       const activeBox = this.builder.activeBox;
       this.builder.editor.saveForUndo();
-      activeBox.setAttribute('data-animated', '');
 
       if (chkAnimateOnce.checked) {
         dom$K.addClass(activeBox, 'once');
       } else {
         dom$K.removeClass(activeBox, 'once');
-      } //Trigger Change event
-
+      }
 
       this.builder.settings.onChange();
+      this.builder.settings.onRender();
     });
     const selBoxAnimateDelay = modalEditBox.querySelector('.cmd-box-animatedelay');
     selBoxAnimateDelay.addEventListener('change', () => {
@@ -24392,6 +24416,8 @@ class HtmlUtil {
     dom$I.removeClasses(elms, 'skrollable-before');
     elms = tmp.querySelectorAll('.skrollable-between');
     dom$I.removeClasses(elms, 'skrollable-between');
+    elms = tmp.querySelectorAll('.is-inview');
+    dom$I.removeClasses(elms, 'is-inview');
     let emptyclasses = tmp.querySelectorAll('[class=""]');
     Array.prototype.forEach.call(emptyclasses, emptyclass => {
       emptyclass.removeAttribute('class');