From de75a13d349231dc915a88795af9c1f230689159 Mon Sep 17 00:00:00 2001
From: Afshin Mehrabani <afshin.meh@gmail.com>
Date: Sun, 7 Aug 2016 13:04:52 +0100
Subject: [PATCH] cleaning css classes after animation ends + adding active
 flag to events rather than element

---
 build/scrollanim.js     | 54 +++++++++++++++++++++++++++++++++++------
 build/scrollanim.min.js |  4 +--
 scrollanim.js           | 54 +++++++++++++++++++++++++++++++++++------
 3 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/build/scrollanim.js b/build/scrollanim.js
index 886559d..53d0c14 100644
--- a/build/scrollanim.js
+++ b/build/scrollanim.js
@@ -370,7 +370,7 @@
       var event = element.getAttribute(_options.attribute);
 
       _add(element, {
-         'in': event
+        'in': event
       });
     }
   };
@@ -387,8 +387,16 @@
   * See kissui.position for more options to bind events.
   */
   function _add (element, event) {
+    var eventObj = {};
+
     for (var e in event) {
       kissuiPosition.add(element, e);
+
+      eventObj[e] = {
+        animation: event[e],
+        // adding active flag
+        active: false
+      };
     }
 
     // add visibility: hidden to the element
@@ -396,8 +404,7 @@
 
     _elements.push({
       element: element,
-      event: event,
-      active: false
+      event: eventObj
     });
   };
 
@@ -423,15 +430,47 @@
   */
   function _attach (element, event) {
     for (var e in element.event) {
-      if (e == event && element.active === false) {
+      if (e == event && element.event[e].active === false) {
+
         element.element.style.opacity = '1';
-        element.element.className += ' animated ' + element.event[e];
+        element.element.className += ' animated ' + element.event[e].animation;
+
 
-        //set this flag to prevent processing same element twice
-        element.active = true;
+        (function (element, e) {
+          _addEventListener(element.element, [
+            'webkitAnimationEnd',
+            'mozAnimationEnd',
+            'MSAnimationEnd',
+            'oanimationend',
+            'animationend'], function () {
+              element.element.className = element.element.className.replace('animated ' + element.event[e].animation, '');
+
+              //set this flag to prevent processing same element twice
+              element.event[e].active = true;
+            });
+        }(element, e));
+
+      }
+    }
+  };
 
+  /**
+  * To bind an event to browser
+  *
+  */
+  function _addEventListener (element, event, fn) {
+    // is event an array?
+    if (typeof (event) == 'object') {
+      for (var i = 0; i < event.length;i++) {
+        _addEventListener(element, event[i], fn);
       }
     }
+
+    if (element.addEventListener) { // modern browsers including IE9+
+      element.addEventListener(event, fn, false);
+    } else if (element.attachEvent) { // IE8 and below
+      element.attachEvent('on' + event, fn);
+    }
   };
 
   /**
@@ -445,7 +484,6 @@
     });
 
     kissuiPosition.init();
-
   };
 
   _init()
diff --git a/build/scrollanim.min.js b/build/scrollanim.min.js
index 8cece81..d683641 100644
--- a/build/scrollanim.min.js
+++ b/build/scrollanim.min.js
@@ -1,2 +1,2 @@
-/*! kissui.scrollanim 2016-08-01 */
-!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.kissuiPosition=b()}):a.kissuiPosition=b(a)}(this,function(){function a(a){if(a="Kissui.position: "+a,1!=n.safeMode)throw Error(a);console.log(a)}function b(){for(var a=document.querySelectorAll("*["+n.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(n.attribute);c(d,e)}}function c(b,c){for(var d=c.split(" "),e=!0,f=0;f<d.length;f++){var g=d[f];if(n.events.indexOf(g)==-1){e=!1;break}}e?l.push({element:b,event:c}):a("Invalid event name: `"+c+"`. Skipping "+b)}function d(){l=[]}function e(a,b){window.addEventListener?window.addEventListener(a,b,!1):window.attachEvent&&window.attachEvent("on"+a,b)}function f(a,b){var c=b.split(" "),d=!0,e=a.getBoundingClientRect().top,f=a.getBoundingClientRect().bottom,g=a.getBoundingClientRect().left,h=a.getBoundingClientRect().right,j=a.getBoundingClientRect().height,k=a.getBoundingClientRect().width,l=window.innerHeight||document.documentElement.clientHeight,m=document.body.clientWidth||document.documentElement.clientWidth;c.indexOf("in")>-1&&(d=e>=0&&g>=0&&f<=l&&h<=m&&(d&&!0)),c.indexOf("out")>-1&&(d=(e+j<0||g+k<0||g>m||e>l)&&(d&&!0)),c.indexOf("top")>-1&&(d=0==e&&(d&&!0)),c.indexOf("left")>-1&&(d=0==g&&(d&&!0)),c.indexOf("right")>-1&&(d=h==m&&(d&&!0)),c.indexOf("bottom")>-1&&(d=f==l&&(d&&!0)),c.indexOf("middle")>-1&&(d=e+j/2==l/2&&(d&&!0)),c.indexOf("center")>-1&&(d=g+k/2==m/2&&(d&&!0)),d&&(a.getAttribute("id")&&i(a.getAttribute("id"),a),i(b,a),i("*",a,b))}function g(a){for(var b=0;b<a.length;b++)f.call(this,a[b].element,a[b].event)}function h(a,b){"object"!=typeof m[a]&&(m[a]=[]),m[a].push(b)}function i(a){var b,c,d,e=[].slice.call(arguments,1);if("object"==typeof m[a])for(c=m[a].slice(),d=c.length,b=0;b<d;b++)c[b].apply(this,e)}function j(a,b){h(a,function c(){_removeListener(a,c),b.apply(this,arguments)})}function k(){b.call(this),1==n.triggerOnInit&&g.call(this,l),e("scroll",g.bind(this,l)),e("resize",g.bind(this,l))}var l=[],m=[],n={triggerOnInit:!0,attribute:"data-kui-position",safeMode:!1};return n.events=["in","out","middle","top","bottom","left","center","right"],_removeListener=function(a,b){var c;"object"==typeof m[a]&&(c=m[a].indexOf(b),c>-1&&m[a].splice(c,1))},{_options:n,_elements:l,on:h,once:j,removeListener:_removeListener,init:k,positions:g,add:c,reset:d}}),function(a,b){"function"==typeof define&&define.amd?define(["kissuiPosition"],function(c){return a.kissuiScrollAnim=b(c)}):a.kissuiScrollAnim=b(a.kissuiPosition)}(this,function(a){function b(){h=[];for(var a=document.querySelectorAll("*["+g.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(g.attribute);c(d,{in:e})}}function c(b,c){for(var d in c)a.add(b,d);b.style.opacity="0",h.push({element:b,event:c,active:!1})}function d(a){for(var b=0;b<h.length;b++){var c=h[b];if(a===c.element)return c}return null}function e(a,b){for(var c in a.event)c==b&&a.active===!1&&(a.element.style.opacity="1",a.element.className+=" animated "+a.event[c],a.active=!0)}function f(){b.call(this),a.on("*",function(a,b){e(d(a),b)}),a.init()}var g={triggerOnInit:!0,attribute:"data-kui-anim"},h=[];return f(),{_options:g,_elements:h,init:f,add:c}});
\ No newline at end of file
+/*! kissui.scrollanim 2016-08-07 */
+!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.kissuiPosition=b()}):a.kissuiPosition=b(a)}(this,function(){function a(a){if(a="Kissui.position: "+a,1!=n.safeMode)throw Error(a);console.log(a)}function b(){for(var a=document.querySelectorAll("*["+n.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(n.attribute);c(d,e)}}function c(b,c){for(var d=c.split(" "),e=!0,f=0;f<d.length;f++){var g=d[f];if(n.events.indexOf(g)==-1){e=!1;break}}e?l.push({element:b,event:c}):a("Invalid event name: `"+c+"`. Skipping "+b)}function d(){l=[]}function e(a,b){window.addEventListener?window.addEventListener(a,b,!1):window.attachEvent&&window.attachEvent("on"+a,b)}function f(a,b){var c=b.split(" "),d=!0,e=a.getBoundingClientRect().top,f=a.getBoundingClientRect().bottom,g=a.getBoundingClientRect().left,h=a.getBoundingClientRect().right,j=a.getBoundingClientRect().height,k=a.getBoundingClientRect().width,l=window.innerHeight||document.documentElement.clientHeight,m=document.body.clientWidth||document.documentElement.clientWidth;c.indexOf("in")>-1&&(d=e>=0&&g>=0&&f<=l&&h<=m&&(d&&!0)),c.indexOf("out")>-1&&(d=(e+j<0||g+k<0||g>m||e>l)&&(d&&!0)),c.indexOf("top")>-1&&(d=0==e&&(d&&!0)),c.indexOf("left")>-1&&(d=0==g&&(d&&!0)),c.indexOf("right")>-1&&(d=h==m&&(d&&!0)),c.indexOf("bottom")>-1&&(d=f==l&&(d&&!0)),c.indexOf("middle")>-1&&(d=e+j/2==l/2&&(d&&!0)),c.indexOf("center")>-1&&(d=g+k/2==m/2&&(d&&!0)),d&&(a.getAttribute("id")&&i(a.getAttribute("id"),a),i(b,a),i("*",a,b))}function g(a){for(var b=0;b<a.length;b++)f.call(this,a[b].element,a[b].event)}function h(a,b){"object"!=typeof m[a]&&(m[a]=[]),m[a].push(b)}function i(a){var b,c,d,e=[].slice.call(arguments,1);if("object"==typeof m[a])for(c=m[a].slice(),d=c.length,b=0;b<d;b++)c[b].apply(this,e)}function j(a,b){h(a,function c(){_removeListener(a,c),b.apply(this,arguments)})}function k(){b.call(this),1==n.triggerOnInit&&g.call(this,l),e("scroll",g.bind(this,l)),e("resize",g.bind(this,l))}var l=[],m=[],n={triggerOnInit:!0,attribute:"data-kui-position",safeMode:!1};return n.events=["in","out","middle","top","bottom","left","center","right"],_removeListener=function(a,b){var c;"object"==typeof m[a]&&(c=m[a].indexOf(b),c>-1&&m[a].splice(c,1))},{_options:n,_elements:l,on:h,once:j,removeListener:_removeListener,init:k,positions:g,add:c,reset:d}}),function(a,b){"function"==typeof define&&define.amd?define(["kissuiPosition"],function(c){return a.kissuiScrollAnim=b(c)}):a.kissuiScrollAnim=b(a.kissuiPosition)}(this,function(a){function b(){i=[];for(var a=document.querySelectorAll("*["+h.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(h.attribute);c(d,{in:e})}}function c(b,c){var d={};for(var e in c)a.add(b,e),d[e]={animation:c[e],active:!1};b.style.opacity="0",i.push({element:b,event:d})}function d(a){for(var b=0;b<i.length;b++){var c=i[b];if(a===c.element)return c}return null}function e(a,b){for(var c in a.event)c==b&&a.event[c].active===!1&&(a.element.style.opacity="1",a.element.className+=" animated "+a.event[c].animation,function(a,b){f(a.element,["webkitAnimationEnd","mozAnimationEnd","MSAnimationEnd","oanimationend","animationend"],function(){a.element.className=a.element.className.replace("animated "+a.event[b].animation,""),a.event[b].active=!0})}(a,c))}function f(a,b,c){if("object"==typeof b)for(var d=0;d<b.length;d++)f(a,b[d],c);a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)}function g(){b.call(this),a.on("*",function(a,b){e(d(a),b)}),a.init()}var h={triggerOnInit:!0,attribute:"data-kui-anim"},i=[];return g(),{_options:h,_elements:i,init:g,add:c}});
\ No newline at end of file
diff --git a/scrollanim.js b/scrollanim.js
index 5bd9fbd..e5506cd 100644
--- a/scrollanim.js
+++ b/scrollanim.js
@@ -43,7 +43,7 @@
       var event = element.getAttribute(_options.attribute);
 
       _add(element, {
-         'in': event
+        'in': event
       });
     }
   };
@@ -60,8 +60,16 @@
   * See kissui.position for more options to bind events.
   */
   function _add (element, event) {
+    var eventObj = {};
+
     for (var e in event) {
       kissuiPosition.add(element, e);
+
+      eventObj[e] = {
+        animation: event[e],
+        // adding active flag
+        active: false
+      };
     }
 
     // add visibility: hidden to the element
@@ -69,8 +77,7 @@
 
     _elements.push({
       element: element,
-      event: event,
-      active: false
+      event: eventObj
     });
   };
 
@@ -96,17 +103,49 @@
   */
   function _attach (element, event) {
     for (var e in element.event) {
-      if (e == event && element.active === false) {
+      if (e == event && element.event[e].active === false) {
+
         element.element.style.opacity = '1';
-        element.element.className += ' animated ' + element.event[e];
+        element.element.className += ' animated ' + element.event[e].animation;
+
 
-        //set this flag to prevent processing same element twice
-        element.active = true;
+        (function (element, e) {
+          _addEventListener(element.element, [
+            'webkitAnimationEnd',
+            'mozAnimationEnd',
+            'MSAnimationEnd',
+            'oanimationend',
+            'animationend'], function () {
+              element.element.className = element.element.className.replace('animated ' + element.event[e].animation, '');
+
+              //set this flag to prevent processing same element twice
+              element.event[e].active = true;
+            });
+        }(element, e));
 
       }
     }
   };
 
+  /**
+  * To bind an event to browser
+  *
+  */
+  function _addEventListener (element, event, fn) {
+    // is event an array?
+    if (typeof (event) == 'object') {
+      for (var i = 0; i < event.length;i++) {
+        _addEventListener(element, event[i], fn);
+      }
+    }
+
+    if (element.addEventListener) { // modern browsers including IE9+
+      element.addEventListener(event, fn, false);
+    } else if (element.attachEvent) { // IE8 and below
+      element.attachEvent('on' + event, fn);
+    }
+  };
+
   /**
   * Start the module
   */
@@ -118,7 +157,6 @@
     });
 
     kissuiPosition.init();
-
   };
 
   _init()