addinng autoreset, options and data-kui-event attribute. v0.3.0 🚀

build/scrollanim.js

@@ -373,32 +373,51 @@
   * 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
   };
 
   /**
   * To store all available elements with their options
   */
   var _elements = [];
 
+  /**
+  * Get the attribute name
+  *
+  */
+  function __(name) {
+    return _options.attributePrefix + name;
+  };
+
   /**
   * Find elements
   */
   function _populate () {
     //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
   };
 }));

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": {

scrollanim.js

@@ -19,32 +19,51 @@
   * 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
   };
 
   /**
   * To store all available elements with their options
   */
   var _elements = [];
 
+  /**
+  * Get the attribute name
+  *
+  */
+  function __(name) {
+    return _options.attributePrefix + name;
+  };
+
   /**
   * Find elements
   */
   function _populate () {
     //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
   };
 }));