Merge pull request #376 from BeAPI/fix/animation-js

Fix/animation js

Author: francoistibo

src/js/classes/Animation.js

@@ -6,12 +6,18 @@ import noop from '../utils/noop'
 // shared variables
 // ----
 const instances = []
+const animationClass = 'js-animation'
 let scrollObserver
 
 // ----
 // class Animation
 // ----
 class Animation extends AbstractDomElement {
+  /**
+   * Animation constructor
+   * @param {HTMLElement} element
+   * @param {object} options
+   */
   constructor(element, options) {
     const instance = super(element, options)
 
@@ -33,6 +39,11 @@ class Animation extends AbstractDomElement {
     // add to instances
     instances.push(this)
 
+    if (instances.length === 1) {
+      window.addEventListener('beforeprint', onBeforePrint)
+      window.addEventListener('afterprint', onAfterPrint)
+    }
+
     // init scrollObserver
     if (!scrollObserver) {
       scrollObserver = new ScrollObserver()
@@ -47,7 +58,7 @@ class Animation extends AbstractDomElement {
     // add element to scrollObserver
     scrollObserver.observe(el, {
       onVisible: function (scrollInfos, percentRTW, percentRTE) {
-        if (percentRTE.y >= start && percentRTE.y <= end && !that._isVisible) {
+        if (!that._isVisible && percentRTE.y >= start && percentRTE.y <= end) {
           // show element
           that._isVisible = true
           s.onShow(el, scrollInfos, callbacksSharedData)
@@ -57,7 +68,7 @@ class Animation extends AbstractDomElement {
           if (s.playOnce) {
             that.destroy(el, scrollInfos, callbacksSharedData)
           }
-        } else if ((percentRTE.y < start || (percentRTE.y > end && s.hideOnReachEnd)) && that._isVisible) {
+        } else if (that._isVisible && (percentRTE.y < start || (percentRTE.y > end && s.hideOnReachEnd))) {
           // hide element
           that._isVisible = false
           s.onHide(el, scrollInfos, callbacksSharedData)
@@ -67,10 +78,18 @@ class Animation extends AbstractDomElement {
     })
   }
 
+  /**
+   * Is visible
+   * @returns {boolean}
+   */
   isVisible() {
     return this._isVisible
   }
 
+  /**
+   * Destroy
+   * @returns {undefined}
+   */
   destroy() {
     const el = this._element
     const s = this._settings
@@ -98,14 +117,31 @@ class Animation extends AbstractDomElement {
       scrollObserver.destroy()
     }
 
+    if (instances.length === 0) {
+      window.removeEventListener('beforeprint', onBeforePrint)
+      window.removeEventListener('afterprint', onAfterPrint)
+    }
+
     this._settings.onDestroy(el, scrollInfos, callbacksSharedData)
   }
 
+  /**
+   * Static destroy
+   * @returns {undefined}
+   */
   static destroy() {
     while (instances.length) {
       instances[0].destroy()
     }
   }
+
+  /**
+   * Static are animations enabled
+   * @returns {boolean}
+   */
+  static areAnimationsEnbaled() {
+    return document.documentElement.classList.contains(animationClass)
+  }
 }
 
 // ----
@@ -123,7 +159,7 @@ Animation.defaults = {
   // if true, the instance will be destroyed after the element is visible
   playOnce: false,
   // if true, remove the visible class when the element reach the end paramter value
-  hideOnReachEnd: false,
+  hideOnReachEnd: true,
   // if true, set the element visible on destroy whatever the current scroll value
   showOnDestroy: true,
   // for each callback : function (element, scrollInfos, callbacksSharedData)
@@ -136,6 +172,12 @@ Animation.defaults = {
 // ----
 // utils
 // ----
+/**
+ * get value
+ * @param {HTMLElement} element
+ * @param {mixed} value
+ * @returns {mixed}
+ */
 function getValue(element, value) {
   let rt = value
 
@@ -148,6 +190,24 @@ function getValue(element, value) {
   return rt
 }
 
+// ----
+// events
+// ----
+/**
+ * On before print
+ * @returns {undefined}
+ */
+function onBeforePrint() {
+  document.documentElement.classList.remove(animationClass)
+}
+/**
+ * On after print
+ * @returns {undefined}
+ */
+function onAfterPrint() {
+  document.documentElement.classList.add(animationClass)
+}
+
 // ----
 // presets
 // ----
@@ -179,7 +239,7 @@ Animation.preset = {
           },
         })
 
-        const children = el.children
+        const children = el.getElementsByClassName('st-line')
         const length = children.length
         let i