From b97594e9c63723f1d0bfba524c90e36bc67d40f0 Mon Sep 17 00:00:00 2001
From: Afshin Mehrabani <afshin.meh@gmail.com>
Date: Wed, 31 Aug 2016 14:31:33 +0400
Subject: [PATCH] addinng autoreset, options and data-kui-event attribute.
 v0.3.0 :rocket:

---
 build/scrollanim.js     | 77 ++++++++++++++++++++++++++++++++++++-----
 build/scrollanim.min.js |  4 +--
 package.json            |  2 +-
 scrollanim.js           | 77 ++++++++++++++++++++++++++++++++++++-----
 4 files changed, 141 insertions(+), 19 deletions(-)

diff --git a/build/scrollanim.js b/build/scrollanim.js
index febea2d..4a09d6f 100644
--- a/build/scrollanim.js
+++ b/build/scrollanim.js
@@ -373,9 +373,18 @@
   * options
   */
   var _options = {
-    //trigger the events on module init?
+    // trigger the events on module init?
     triggerOnInit: true,
-    attribute: 'data-kui-anim'
+    // prefix for all `data-...` attributes
+    attributePrefix: 'data-kui-',
+    animAttribute: 'anim',
+    // when to trigger the animation?
+    eventAttribute: 'event',
+    // default event to trigger
+    defaultEvent: 'in',
+    // reset the animation event after element is out of the viewport?
+    // enabling this option triggers the event each time it appears in the viewport
+    autoReset: true
   };
 
   /**
@@ -383,6 +392,14 @@
   */
   var _elements = [];
 
+  /**
+  * Get the attribute name
+  *
+  */
+  function __(name) {
+    return _options.attributePrefix + name;
+  };
+
   /**
   * Find elements
   */
@@ -390,15 +407,17 @@
     //clear old elements first
     _elements = [];
 
-    var elements = document.querySelectorAll('*[' + _options.attribute + ']');
+    var elements = document.querySelectorAll('*[' + __(_options.animAttribute) + ']');
 
     for (var i = 0;i < elements.length;i++) {
+      var param = {};
       var element = elements[i];
-      var event = element.getAttribute(_options.attribute);
+      var anim = element.getAttribute(__(_options.animAttribute));
+      var event = element.getAttribute(__(_options.eventAttribute)) || 'in';
 
-      _add(element, {
-        'in': event
-      });
+      param[event] = anim;
+
+      _add(element, param);
     }
   };
 
@@ -426,6 +445,8 @@
       };
     }
 
+    kissuiPosition.add(element, 'out');
+
     // add visibility: hidden to the element
     element.style.opacity = '0';
 
@@ -500,6 +521,37 @@
     }
   };
 
+  /**
+  * Clear animation, reset `opacity` and `active` flag on an element
+  *
+  */
+  function _resetElement (element) {
+    var elx = _find(element)
+
+    for (var e in elx.event) {
+      elx.event[e].active = false;
+    }
+
+    element.style.opacity = 0;
+  };
+
+  /**
+  * Set option
+  *
+  */
+  function _setOption (name, value) {
+    _options[name] = value;
+  };
+
+  /**
+  * Set an object of options
+  */
+  function _setOptions (options) {
+    for (var o in options) {
+      _setOption(o, options[o]);
+    }
+  };
+
   /**
   * Start the module
   */
@@ -510,6 +562,13 @@
       _attach(_find(element), event);
     });
 
+    // to manage `autoReset`
+    kissuiPosition.on('out', function (element) {
+      if (_options.autoReset) {
+        _resetElement(element);
+      }
+    });
+
     kissuiPosition.init();
   };
 
@@ -519,6 +578,8 @@
     _options: _options,
     _elements: _elements,
     init: _init,
-    add: _add
+    add: _add,
+    setOption: _setOption,
+    setOptions: _setOptions
   };
 }));
diff --git a/build/scrollanim.min.js b/build/scrollanim.min.js
index 99593a6..6aac052 100644
--- a/build/scrollanim.min.js
+++ b/build/scrollanim.min.js
@@ -1,2 +1,2 @@
-/*! kissui.scrollanim 2016-08-21 */
-!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!=q.safeMode)throw Error(a);console.log(a)}function b(){for(var a=document.querySelectorAll("*["+q.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(q.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(q.events.indexOf(g)==-1){e=!1;break}}e?m.push({element:b,event:c}):a("Invalid event name: `"+c+"`. Skipping "+b)}function d(){m=[]}function e(a,b){window.addEventListener?window.addEventListener(a,b,!1):window.attachEvent&&window.attachEvent("on"+a,b)}function f(a,b,c){if(c>0){if(b<a&&a<b+c)return!0}else if(b>a&&a>b+c)return!0;return!1}function g(a,b){var c=b.split(" "),d=!0,e=a.getBoundingClientRect().top,g=a.getBoundingClientRect().bottom,h=a.getBoundingClientRect().left,i=a.getBoundingClientRect().right,k=a.getBoundingClientRect().height,l=a.getBoundingClientRect().width,m=window.innerHeight||document.documentElement.clientHeight,n=document.body.clientWidth||document.documentElement.clientWidth,q=document.body.scrollTop-o,r=document.body.scrollLeft-p;c.indexOf("in")>-1&&(d=e>=0&&h>=0&&g<=m&&i<=n&&(d&&!0)),c.indexOf("out")>-1&&(d=(e+k<0||h+l<0||h>n||e>m)&&(d&&!0)),c.indexOf("top")>-1&&(d=!(0!=e&&!f(0,e,q))&&(d&&!0)),c.indexOf("left")>-1&&(d=!(0!=h&&!f(0,h,r))&&(d&&!0)),c.indexOf("right")>-1&&(d=!(i!=n&&!f(n,i,r))&&(d&&!0)),c.indexOf("bottom")>-1&&(d=!(g!=m&&!f(m,g,q))&&(d&&!0)),c.indexOf("middle")>-1&&(d=!(e+k/2!=m/2&&!f(m/2,e+k/2,q))&&(d&&!0)),c.indexOf("center")>-1&&(d=!(h+l/2!=n/2&&!f(n/2,h+l/2,r))&&(d&&!0)),d&&(a.getAttribute("id")&&j(a.getAttribute("id"),a),j(b,a),j("*",a,b))}function h(a){for(var b=0;b<a.length;b++)g.call(this,a[b].element,a[b].event);o=document.body.scrollTop,p=document.body.scrollLeft}function i(a,b){"object"!=typeof n[a]&&(n[a]=[]),n[a].push(b)}function j(a){var b,c,d,e=[].slice.call(arguments,1);if("object"==typeof n[a])for(c=n[a].slice(),d=c.length,b=0;b<d;b++)c[b].apply(this,e)}function k(a,b){i(a,function c(){_removeListener(a,c),b.apply(this,arguments)})}function l(){o=document.body.scrollTop,p=document.body.scrollLeft,b.call(this),1==q.triggerOnInit&&h.call(this,m),e("scroll",h.bind(this,m)),e("resize",h.bind(this,m))}var m=[],n=[],o=null,p=null,q={triggerOnInit:!0,attribute:"data-kui-position",safeMode:!1};return q.events=["in","out","middle","top","bottom","left","center","right"],_removeListener=function(a,b){var c;"object"==typeof n[a]&&(c=n[a].indexOf(b),c>-1&&n[a].splice(c,1))},{_options:q,_elements:m,on:i,once:k,removeListener:_removeListener,init:l,positions:h,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
+/*! kissui.scrollanim 2016-08-31 */
+!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!=q.safeMode)throw Error(a);console.log(a)}function b(){for(var a=document.querySelectorAll("*["+q.attribute+"]"),b=0;b<a.length;b++){var d=a[b],e=d.getAttribute(q.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(q.events.indexOf(g)==-1){e=!1;break}}e?m.push({element:b,event:c}):a("Invalid event name: `"+c+"`. Skipping "+b)}function d(){m=[]}function e(a,b){window.addEventListener?window.addEventListener(a,b,!1):window.attachEvent&&window.attachEvent("on"+a,b)}function f(a,b,c){if(c>0){if(b<a&&a<b+c)return!0}else if(b>a&&a>b+c)return!0;return!1}function g(a,b){var c=b.split(" "),d=!0,e=a.getBoundingClientRect().top,g=a.getBoundingClientRect().bottom,h=a.getBoundingClientRect().left,i=a.getBoundingClientRect().right,k=a.getBoundingClientRect().height,l=a.getBoundingClientRect().width,m=window.innerHeight||document.documentElement.clientHeight,n=document.body.clientWidth||document.documentElement.clientWidth,q=document.body.scrollTop-o,r=document.body.scrollLeft-p;c.indexOf("in")>-1&&(d=e>=0&&h>=0&&g<=m&&i<=n&&(d&&!0)),c.indexOf("out")>-1&&(d=(e+k<0||h+l<0||h>n||e>m)&&(d&&!0)),c.indexOf("top")>-1&&(d=!(0!=e&&!f(0,e,q))&&(d&&!0)),c.indexOf("left")>-1&&(d=!(0!=h&&!f(0,h,r))&&(d&&!0)),c.indexOf("right")>-1&&(d=!(i!=n&&!f(n,i,r))&&(d&&!0)),c.indexOf("bottom")>-1&&(d=!(g!=m&&!f(m,g,q))&&(d&&!0)),c.indexOf("middle")>-1&&(d=!(e+k/2!=m/2&&!f(m/2,e+k/2,q))&&(d&&!0)),c.indexOf("center")>-1&&(d=!(h+l/2!=n/2&&!f(n/2,h+l/2,r))&&(d&&!0)),d&&(a.getAttribute("id")&&j(a.getAttribute("id"),a),j(b,a),j("*",a,b))}function h(a){for(var b=0;b<a.length;b++)g.call(this,a[b].element,a[b].event);o=document.body.scrollTop,p=document.body.scrollLeft}function i(a,b){"object"!=typeof n[a]&&(n[a]=[]),n[a].push(b)}function j(a){var b,c,d,e=[].slice.call(arguments,1);if("object"==typeof n[a])for(c=n[a].slice(),d=c.length,b=0;b<d;b++)c[b].apply(this,e)}function k(a,b){i(a,function c(){_removeListener(a,c),b.apply(this,arguments)})}function l(){o=document.body.scrollTop,p=document.body.scrollLeft,b.call(this),1==q.triggerOnInit&&h.call(this,m),e("scroll",h.bind(this,m)),e("resize",h.bind(this,m))}var m=[],n=[],o=null,p=null,q={triggerOnInit:!0,attribute:"data-kui-position",safeMode:!1};return q.events=["in","out","middle","top","bottom","left","center","right"],_removeListener=function(a,b){var c;"object"==typeof n[a]&&(c=n[a].indexOf(b),c>-1&&n[a].splice(c,1))},{_options:q,_elements:m,on:i,once:k,removeListener:_removeListener,init:l,positions:h,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(a){return l.attributePrefix+a}function c(){m=[];for(var a=document.querySelectorAll("*["+b(l.animAttribute)+"]"),c=0;c<a.length;c++){var e={},f=a[c],g=f.getAttribute(b(l.animAttribute)),h=f.getAttribute(b(l.eventAttribute))||"in";e[h]=g,d(f,e)}}function d(b,c){var d={};for(var e in c)a.add(b,e),d[e]={animation:c[e],active:!1};a.add(b,"out"),b.style.opacity="0",m.push({element:b,event:d})}function e(a){for(var b=0;b<m.length;b++){var c=m[b];if(a===c.element)return c}return null}function f(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){g(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 g(a,b,c){if("object"==typeof b)for(var d=0;d<b.length;d++)g(a,b[d],c);a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)}function h(a){var b=e(a);for(var c in b.event)b.event[c].active=!1;a.style.opacity=0}function i(a,b){l[a]=b}function j(a){for(var b in a)i(b,a[b])}function k(){c.call(this),a.on("*",function(a,b){f(e(a),b)}),a.on("out",function(a){l.autoReset&&h(a)}),a.init()}var l={triggerOnInit:!0,attributePrefix:"data-kui-",animAttribute:"anim",eventAttribute:"event",defaultEvent:"in",autoReset:!0},m=[];return k(),{_options:l,_elements:m,init:k,add:d,setOption:i,setOptions:j}});
\ No newline at end of file
diff --git a/package.json b/package.json
index 68218da..d5219b2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kissui.scrollanim",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CSS3 scroll animation library",
   "main": "index.js",
   "scripts": {
diff --git a/scrollanim.js b/scrollanim.js
index e5506cd..a7c7c69 100644
--- a/scrollanim.js
+++ b/scrollanim.js
@@ -19,9 +19,18 @@
   * options
   */
   var _options = {
-    //trigger the events on module init?
+    // trigger the events on module init?
     triggerOnInit: true,
-    attribute: 'data-kui-anim'
+    // prefix for all `data-...` attributes
+    attributePrefix: 'data-kui-',
+    animAttribute: 'anim',
+    // when to trigger the animation?
+    eventAttribute: 'event',
+    // default event to trigger
+    defaultEvent: 'in',
+    // reset the animation event after element is out of the viewport?
+    // enabling this option triggers the event each time it appears in the viewport
+    autoReset: true
   };
 
   /**
@@ -29,6 +38,14 @@
   */
   var _elements = [];
 
+  /**
+  * Get the attribute name
+  *
+  */
+  function __(name) {
+    return _options.attributePrefix + name;
+  };
+
   /**
   * Find elements
   */
@@ -36,15 +53,17 @@
     //clear old elements first
     _elements = [];
 
-    var elements = document.querySelectorAll('*[' + _options.attribute + ']');
+    var elements = document.querySelectorAll('*[' + __(_options.animAttribute) + ']');
 
     for (var i = 0;i < elements.length;i++) {
+      var param = {};
       var element = elements[i];
-      var event = element.getAttribute(_options.attribute);
+      var anim = element.getAttribute(__(_options.animAttribute));
+      var event = element.getAttribute(__(_options.eventAttribute)) || 'in';
+
+      param[event] = anim;
 
-      _add(element, {
-        'in': event
-      });
+      _add(element, param);
     }
   };
 
@@ -72,6 +91,8 @@
       };
     }
 
+    kissuiPosition.add(element, 'out');
+
     // add visibility: hidden to the element
     element.style.opacity = '0';
 
@@ -146,6 +167,37 @@
     }
   };
 
+  /**
+  * Clear animation, reset `opacity` and `active` flag on an element
+  *
+  */
+  function _resetElement (element) {
+    var elx = _find(element)
+
+    for (var e in elx.event) {
+      elx.event[e].active = false;
+    }
+
+    element.style.opacity = 0;
+  };
+
+  /**
+  * Set option
+  *
+  */
+  function _setOption (name, value) {
+    _options[name] = value;
+  };
+
+  /**
+  * Set an object of options
+  */
+  function _setOptions (options) {
+    for (var o in options) {
+      _setOption(o, options[o]);
+    }
+  };
+
   /**
   * Start the module
   */
@@ -156,6 +208,13 @@
       _attach(_find(element), event);
     });
 
+    // to manage `autoReset`
+    kissuiPosition.on('out', function (element) {
+      if (_options.autoReset) {
+        _resetElement(element);
+      }
+    });
+
     kissuiPosition.init();
   };
 
@@ -165,6 +224,8 @@
     _options: _options,
     _elements: _elements,
     init: _init,
-    add: _add
+    add: _add,
+    setOption: _setOption,
+    setOptions: _setOptions
   };
 }));