@innovastudio/contentbox 1.2.34 → 1.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.34",
+  "version": "1.2.37",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.26",
+    "@innovastudio/contentbuilder": "^1.1.28",
     "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', () => {
@@ -83659,8 +83683,12 @@ class ContentBox {
       maxColumns: 6,
       maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
       slider: this.settings.slider,
-      onRender: this.settings.onRender,
-      onChange: this.settings.onChange,
+      onRender: () => {
+        this.settings.onRender();
+      },
+      onChange: () => {
+        this.settings.onChange();
+      },
       onRefreshTool: () => {
         setTimeout(() => {
           this.quickPosTool();