node-waves - npm Package Compare versions

Comparing version 0.6.6 to 0.7.0

bower.json

 {
   "name": "Waves",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "homepage": "http://fian.my.id/Waves",
@@ -5,0 +5,0 @@ "authors": [

dist/waves.js

 /*!
- * Waves v0.6.6
- * http://fian.my.id/Waves 
- * 
- * Copyright 2014 Alfiana E. Sibuea and other contributors 
- * Released under the MIT license 
- * https://github.com/fians/Waves/blob/master/LICENSE 
+ * Waves v0.7.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
  */
 
 ;(function(window, factory) {
-    "use strict";
+    'use strict';
 
     // AMD. Register as an anonymous module.  Wrap in function so we have access
     // to root via `this`.
-    if (typeof define === "function" && define.amd) {
+    if (typeof define === 'function' && define.amd) {
         define([], function() {
@@ -23,3 +23,3 @@ return factory.apply(window);
     // environments that support module.exports, like Node.
-    else if (typeof exports === "object") {
+    else if (typeof exports === 'object') {
         module.exports = factory.call(window);
@@ -32,8 +32,11 @@ }
     }
-})(typeof global === "object" ? global : this, function () {
-    "use strict";
+})(typeof global === 'object' ? global : this, function() {
+    'use strict';
 
-    var Waves = Waves || {};
-    var $$ = document.querySelectorAll.bind(document);
+    var Waves            = Waves || {};
+    var $$               = document.querySelectorAll.bind(document);
+    var toString         = Object.prototype.toString;
+    var isTouchAvailable = 'ontouchstart' in window;
 
+
     // Find exact position of element
@@ -48,5 +51,28 @@ function isWindow(obj) {
 
+    function isObject(value) {
+        var type = typeof value;
+        return type === 'function' || type === 'object' && !!value;
+    }
+
+    function isDOMNode(obj) {
+        return isObject(obj) && obj.nodeType > 0;
+    }
+
+    function getWavesElements(nodes) {
+        var stringRepr = toString.call(nodes);
+
+        if (stringRepr === '[object String]') {
+            return $$(nodes);
+        } else if (isObject(nodes) && /^\[object (HTMLCollection|NodeList|Object)\]$/.test(stringRepr) && nodes.hasOwnProperty('length')) {
+            return nodes;
+        } else if (isDOMNode(nodes)) {
+            return [nodes];
+        }
+
+        return [];
+    }
+
     function offset(elem) {
         var docElem, win,
-            box = {top: 0, left: 0},
+            box = { top: 0, left: 0 },
             doc = elem && elem.ownerDocument;
@@ -66,8 +92,8 @@
 
-    function convertStyle(obj) {
+    function convertStyle(styleObj) {
         var style = '';
 
-        for (var a in obj) {
-            if (obj.hasOwnProperty(a)) {
-                style += (a + ':' + obj[a] + ';');
+        for (var prop in styleObj) {
+            if (styleObj.hasOwnProperty(prop)) {
+                style += (prop + ':' + styleObj[prop] + ';');
             }
@@ -81,7 +107,10 @@ }
 
-        // Effect delay
+        // Effect duration
         duration: 750,
 
-        show: function(e, element) {
+        // Effect delay (check for scroll before showing effect)
+        delay: 200,
 
+        show: function(e, element, velocity) {
+
             // Disable right click
@@ -92,19 +121,24 @@ if (e.button === 2) {
 
-            var el = element || this;
+            element = element || this;
 
             // Create ripple
             var ripple = document.createElement('div');
-            ripple.className = 'waves-ripple';
-            el.appendChild(ripple);
+            ripple.className = 'waves-ripple waves-rippling';
+            element.appendChild(ripple);
 
             // Get click coordinate and element witdh
-            var pos         = offset(el);
-            var relativeY   = (e.pageY - pos.top);
-            var relativeX   = (e.pageX - pos.left);
-            var scale       = 'scale('+((el.clientWidth / 100) * 3)+')';
-            
+            var pos       = offset(element);
+            var relativeY = (e.pageY - pos.top);
+            var relativeX = (e.pageX - pos.left);
+            var scale     = 'scale(' + ((element.clientWidth / 100) * 3) + ')';
+            var translate = 'translate(0,0)';
+
+            if (velocity) {
+                translate = 'translate(' + (velocity.x) + 'px, ' + (velocity.y) + 'px)';
+            }
+
             // Support for touch devices
-            if ('touches' in e) {
-              relativeY   = (e.touches[0].pageY - pos.top);
-              relativeX   = (e.touches[0].pageX - pos.left);
+            if ('touches' in e && e.touches.length) {
+                relativeY = (e.touches[0].pageY - pos.top);
+                relativeX = (e.touches[0].pageX - pos.left);
             }
@@ -114,28 +148,30 @@
             ripple.setAttribute('data-hold', Date.now());
-            ripple.setAttribute('data-scale', scale);
             ripple.setAttribute('data-x', relativeX);
             ripple.setAttribute('data-y', relativeY);
+            ripple.setAttribute('data-scale', scale);
+            ripple.setAttribute('data-translate', translate);
 
             // Set ripple position
             var rippleStyle = {
-                'top': relativeY+'px',
-                'left': relativeX+'px'
+                top: relativeY + 'px',
+                left: relativeX + 'px'
             };
-            
-            ripple.className = ripple.className + ' waves-notransition';
+
+            ripple.classList.add('waves-notransition');
             ripple.setAttribute('style', convertStyle(rippleStyle));
-            ripple.className = ripple.className.replace('waves-notransition', '');
+            ripple.classList.remove('waves-notransition');
 
             // Scale the ripple
-            rippleStyle['-webkit-transform'] = scale;
-            rippleStyle['-moz-transform'] = scale;
-            rippleStyle['-ms-transform'] = scale;
-            rippleStyle['-o-transform'] = scale;
-            rippleStyle.transform = scale;
-            rippleStyle.opacity   = '1';
+            rippleStyle['-webkit-transform'] = scale + ' ' + translate;
+            rippleStyle['-moz-transform'] = scale + ' ' + translate;
+            rippleStyle['-ms-transform'] = scale + ' ' + translate;
+            rippleStyle['-o-transform'] = scale + ' ' + translate;
+            rippleStyle.transform = scale + ' ' + translate;
+            rippleStyle.opacity = '1';
 
-            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
-            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
-            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
-            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+            var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
+            rippleStyle['-webkit-transition-duration'] = duration + 'ms';
+            rippleStyle['-moz-transition-duration']    = duration + 'ms';
+            rippleStyle['-o-transition-duration']      = duration + 'ms';
+            rippleStyle['transition-duration']         = duration + 'ms';
 
@@ -145,70 +181,25 @@ ripple.setAttribute('style', convertStyle(rippleStyle));
 
-        hide: function(e) {
-            TouchHandler.touchup(e);
+        hide: function(e, element) {
+            element = element || this;
 
-            var el = this;
-            var width = el.clientWidth * 1.4;
-            
-            // Get first ripple
-            var ripple = null;
-            var ripples = el.getElementsByClassName('waves-ripple');
-            if (ripples.length > 0) {
-                ripple = ripples[ripples.length - 1];
-            } else {
-                return false;
-            }
+            var ripples = element.getElementsByClassName('waves-rippling');
 
-            var relativeX   = ripple.getAttribute('data-x');
-            var relativeY   = ripple.getAttribute('data-y');
-            var scale       = ripple.getAttribute('data-scale');
-
-            // Get delay beetween mousedown and mouse leave
-            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
-            var delay = 350 - diff;
-
-            if (delay < 0) {
-                delay = 0;
+            for (var i = 0, len = ripples.length; i < len; i++) {
+                removeRipple(e, element, ripples[i]);
             }
+        },
 
-            // Fade out ripple after delay
-            setTimeout(function() {
-                var style = {
-                    'top': relativeY+'px',
-                    'left': relativeX+'px',
-                    'opacity': '0',
+        // Little hack to make <input> can perform waves effect
+        wrapInput: function(elements) {
 
-                    // Duration
-                    '-webkit-transition-duration': Effect.duration + 'ms',
-                    '-moz-transition-duration': Effect.duration + 'ms',
-                    '-o-transition-duration': Effect.duration + 'ms',
-                    'transition-duration': Effect.duration + 'ms',
-                    '-webkit-transform': scale,
-                    '-moz-transform': scale,
-                    '-ms-transform': scale,
-                    '-o-transform': scale,
-                    'transform': scale,
-                };
+            for (var i = 0, len = elements.length; i < len; i++) {
 
-                ripple.setAttribute('style', convertStyle(style));
+                var element = elements[i];
 
-                setTimeout(function() {
-                    try {
-                        el.removeChild(ripple);
-                    } catch(e) {
-                        return false;
-                    }
-                }, Effect.duration);
-            }, delay);
-        },
+                if (element.tagName.toLowerCase() === 'input') {
 
-        // Little hack to make <input> can perform waves effect
-        wrapInput: function(elements) {
-            for (var a = 0; a < elements.length; a++) {
-                var el = elements[a];
-                
-                if (el.tagName.toLowerCase() === 'input') {
-                    var parent = el.parentNode;
+                    var parent = element.parentNode;
 
                     // If input already have parent just pass through
-                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
+                    if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
                         continue;
@@ -218,19 +209,17 @@ }
                     // Put element class and style to the specified parent
-                    var wrapper = document.createElement('i');
-                    wrapper.className = el.className + ' waves-input-wrapper';
+                    var wrapper       = document.createElement('i');
+                    wrapper.className = element.className + ' waves-input-wrapper';
+                    element.className = 'waves-button-input';
 
-                    var elementStyle = el.getAttribute('style');
+                    // Put element as child
+                    parent.replaceChild(wrapper, element);
+                    wrapper.appendChild(element);
 
-                    if (!elementStyle) {
-                        elementStyle = '';
-                    }
+                    // Apply element color and background color to wrapper
+                    var elementStyle    = window.getComputedStyle(element, null);
+                    var color           = elementStyle.color;
+                    var backgroundColor = elementStyle.backgroundColor;
 
-                    wrapper.setAttribute('style', elementStyle);
-                    
-                    el.className = 'waves-button-input';
-                    el.removeAttribute('style');
-
-                    // Put element as child
-                    parent.replaceChild(wrapper, el);
-                    wrapper.appendChild(el);
+                    wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
+                    element.setAttribute('style', 'background-color:rgba(0,0,0,0);');
                 }
@@ -243,5 +232,67 @@ }
     /**
+     * Hide the effect and remove the ripple. Must be
+     * a separate function to pass the JSLint...
+     */
+    function removeRipple(e, el, ripple) {
+
+        ripple.classList.remove('waves-rippling');
+
+        var relativeX = ripple.getAttribute('data-x');
+        var relativeY = ripple.getAttribute('data-y');
+        var scale     = ripple.getAttribute('data-scale');
+        var translate = ripple.getAttribute('data-translate');
+
+        // Get delay beetween mousedown and mouse leave
+        var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
+        var delay = 350 - diff;
+
+        if (delay < 0) {
+            delay = 0;
+        }
+
+        if (e.type === 'mousemove') {
+            delay = 150;
+        }
+
+        // Fade out ripple after delay
+        var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
+
+        setTimeout(function() {
+
+            var style = {
+                top: relativeY + 'px',
+                left: relativeX + 'px',
+                opacity: '0',
+
+                // Duration
+                '-webkit-transition-duration': duration + 'ms',
+                '-moz-transition-duration': duration + 'ms',
+                '-o-transition-duration': duration + 'ms',
+                'transition-duration': duration + 'ms',
+                '-webkit-transform': scale + ' ' + translate,
+                '-moz-transform': scale + ' ' + translate,
+                '-ms-transform': scale + ' ' + translate,
+                '-o-transform': scale + ' ' + translate,
+                'transform': scale + ' ' + translate
+            };
+
+            ripple.setAttribute('style', convertStyle(style));
+
+            setTimeout(function() {
+                try {
+                    el.removeChild(ripple);
+                } catch (e) {
+                    return false;
+                }
+            }, duration);
+
+        }, delay);
+    }
+
+
+    /**
      * Disable mousedown event for 500ms during and after touch
      */
     var TouchHandler = {
+
         /* uses an integer rather than bool so there's no issues with
@@ -252,14 +303,8 @@ * needing to clear timeouts if another touch event occurred
         touches: 0,
+
         allowEvent: function(e) {
+
             var allow = true;
 
-            if (e.type === 'touchstart') {
-                TouchHandler.touches += 1; //push
-            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
-                setTimeout(function() {
-                    if (TouchHandler.touches > 0) {
-                        TouchHandler.touches -= 1; //pop after 500ms
-                    }
-                }, 500);
-            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
+            if (/^(mousedown|mousemove)$/.test(e.type) && TouchHandler.touches) {
                 allow = false;
@@ -270,4 +315,18 @@ }
         },
-        touchup: function(e) {
-            TouchHandler.allowEvent(e);
+        registerEvent: function(e) {
+            var eType = e.type;
+
+            if (eType === 'touchstart') {
+
+                TouchHandler.touches += 1; // push
+
+            } else if (/^(touchend|touchcancel)$/.test(eType)) {
+
+                setTimeout(function() {
+                    if (TouchHandler.touches) {
+                        TouchHandler.touches -= 1; // pop after 500ms
+                    }
+                }, 500);
+
+            }
         }
@@ -282,2 +341,3 @@ };
     function getWavesEffectElement(e) {
+
         if (TouchHandler.allowEvent(e) === false) {
@@ -291,8 +351,5 @@ return null;
         while (target.parentElement !== null) {
-            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
+            if (target.classList.contains('waves-effect') && (!(target instanceof SVGElement))) {
                 element = target;
                 break;
-            } else if (target.classList.contains('waves-effect')) {
-                element = target;
-                break;
             }
@@ -309,18 +366,62 @@ target = target.parentElement;
     function showEffect(e) {
+
+        TouchHandler.registerEvent(e);
+
         var element = getWavesEffectElement(e);
 
         if (element !== null) {
-            Effect.show(e, element);
 
-            if ('ontouchstart' in window) {
-                element.addEventListener('touchend', Effect.hide, false);
-                element.addEventListener('touchcancel', Effect.hide, false);
+            if (e.type === 'touchstart' && Effect.delay) {
+
+                var hidden = false;
+
+                var timer = setTimeout(function () {
+                    timer = null;
+                    Effect.show(e, element);
+                }, Effect.delay);
+
+                var hideEffect = function(hideEvent) {
+
+                    // if touch hasn't moved, and effect not yet started: start effect now
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                        Effect.show(e, element);
+                    }
+                    if (!hidden) {
+                        hidden = true;
+                        Effect.hide(hideEvent, element);
+                    }
+                };
+
+                var touchMove = function(moveEvent) {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    hideEffect(moveEvent);
+                };
+
+                element.addEventListener('touchmove', touchMove, false);
+                element.addEventListener('touchend', hideEffect, false);
+                element.addEventListener('touchcancel', hideEffect, false);
+
+            } else {
+
+                Effect.show(e, element);
+
+                if (isTouchAvailable) {
+                    element.addEventListener('touchend', Effect.hide, false);
+                    element.addEventListener('touchcancel', Effect.hide, false);
+                }
+
+                element.addEventListener('mouseup', Effect.hide, false);
+                element.addEventListener('mouseleave', Effect.hide, false);
             }
-
-            element.addEventListener('mouseup', Effect.hide, false);
-            element.addEventListener('mouseleave', Effect.hide, false);
         }
     }
 
-    Waves.displayEffect = function(options) {
+    Waves.init = function(options) {
+        var body = document.body;
+
         options = options || {};
@@ -331,35 +432,124 @@
         }
-        
+
+        if ('delay' in options) {
+            Effect.delay = options.delay;
+        }
+
         //Wrap input inside <i> tag
         Effect.wrapInput($$('.waves-effect'));
-        
-        if ('ontouchstart' in window) {
-            document.body.addEventListener('touchstart', showEffect, false);
+
+        if (isTouchAvailable) {
+            body.addEventListener('touchstart', showEffect, false);
+            body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
+            body.addEventListener('touchend', TouchHandler.registerEvent, false);
         }
-        
-        document.body.addEventListener('mousedown', showEffect, false);
+
+        body.addEventListener('mousedown', showEffect, false);
     };
 
+
     /**
-     * Attach Waves to an input element (or any element which doesn't
-     * bubble mouseup/mousedown events).
-     *   Intended to be used with dynamically loaded forms/inputs, or
-     * where the user doesn't want a delegated click handler.
+     * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
+     * waves classes to a set of elements. Set drag to true if the ripple mouseover
+     * or skimming effect should be applied to the elements.
      */
-    Waves.attach = function(element) {
-        //FUTURE: automatically add waves classes and allow users
-        // to specify them with an options param? Eg. light/classic/button
-        if (element.tagName.toLowerCase() === 'input') {
-            Effect.wrapInput([element]);
-            element = element.parentElement;
+    Waves.attach = function(elements, classes) {
+        elements = getWavesElements(elements);
+
+        if (toString.call(classes) === '[object Array]') {
+            classes = classes.join(' ');
         }
 
-        if ('ontouchstart' in window) {
-            element.addEventListener('touchstart', showEffect, false);
+        classes = classes ? ' ' + classes : '';
+
+        var element;
+        for (var i = 0, len = elements.length; i < len; i++) {
+            element = elements[i];
+
+            if (element.tagName.toLowerCase() === 'input') {
+                Effect.wrapInput([element]);
+                element = element.parentElement;
+            }
+
+            element.className += ' waves-effect' + classes;
         }
+    };
 
-        element.addEventListener('mousedown', showEffect, false);
+
+    /**
+     * Cause a ripple to appear in an element via code.
+     */
+    Waves.ripple = function(elements, options) {
+        elements = getWavesElements(elements);
+        var elementsLen = elements.length;
+
+        options          = options || {};
+        options.wait     = options.wait || 0;
+        options.position = options.position || null; // default = centre of element
+
+
+        if (elementsLen) {
+            var element, pos, off, centre = {}, i = 0;
+            var mousedown = {
+                type: 'mousedown',
+                button: 1
+            };
+            var hideRipple = function(mouseup, element) {
+                return function() {
+                    Effect.hide(mouseup, element);
+                };
+            };
+
+            for (; i < elementsLen; i++) {
+                element = elements[i];
+                pos = options.position || {
+                    x: element.clientWidth / 2,
+                    y: element.clientHeight / 2
+                };
+
+                off      = offset(element);
+                centre.x = off.left + pos.x;
+                centre.y = off.top + pos.y;
+
+                mousedown.pageX = centre.x;
+                mousedown.pageY = centre.y;
+
+                Effect.show(mousedown, element);
+
+                if (options.wait >= 0 && options.wait !== null) {
+                    var mouseup = {
+                        type: 'mouseup',
+                        button: 1
+                    };
+
+                    setTimeout(hideRipple(mouseup, element), options.wait);
+                }
+            }
+        }
     };
 
+    /**
+     * Remove all ripples from an element.
+     */
+    Waves.calm = function(elements) {
+        elements = getWavesElements(elements);
+        var mouseup = {
+            type: 'mouseup',
+            button: 1
+        };
+
+        for (var i = 0, len = elements.length; i < len; i++) {
+            Effect.hide(mouseup, elements[i]);
+        }
+    };
+
+    /**
+     * Deprecated API fallback
+     */
+    Waves.displayEffect = function(options) {
+        console.error('Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect');
+        Waves.init(options);
+    };
+
     return Waves;
 });

dist/waves.min.js

 /*!
- * Waves v0.6.6
- * http://fian.my.id/Waves 
- * 
- * Copyright 2014 Alfiana E. Sibuea and other contributors 
- * Released under the MIT license 
- * https://github.com/fians/Waves/blob/master/LICENSE 
+ * Waves v0.7.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
  */
-!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function d(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function e(a){if(j.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(!(c instanceof SVGElement||-1===c.className.indexOf("waves-effect"))){b=c;break}if(c.classList.contains("waves-effect")){b=c;break}c=c.parentElement}return b}function f(a){var b=e(a);null!==b&&(i.show(a,b),"ontouchstart"in window&&(b.addEventListener("touchend",i.hide,!1),b.addEventListener("touchcancel",i.hide,!1)),b.addEventListener("mouseup",i.hide,!1),b.addEventListener("mouseleave",i.hide,!1))}var g=g||{},h=document.querySelectorAll.bind(document),i={duration:750,show:function(a,b){if(2===a.button)return!1;var e=b||this,f=document.createElement("div");f.className="waves-ripple",e.appendChild(f);var g=c(e),h=a.pageY-g.top,j=a.pageX-g.left,k="scale("+e.clientWidth/100*3+")";"touches"in a&&(h=a.touches[0].pageY-g.top,j=a.touches[0].pageX-g.left),f.setAttribute("data-hold",Date.now()),f.setAttribute("data-scale",k),f.setAttribute("data-x",j),f.setAttribute("data-y",h);var l={top:h+"px",left:j+"px"};f.className=f.className+" waves-notransition",f.setAttribute("style",d(l)),f.className=f.className.replace("waves-notransition",""),l["-webkit-transform"]=k,l["-moz-transform"]=k,l["-ms-transform"]=k,l["-o-transform"]=k,l.transform=k,l.opacity="1",l["-webkit-transition-duration"]=i.duration+"ms",l["-moz-transition-duration"]=i.duration+"ms",l["-o-transition-duration"]=i.duration+"ms",l["transition-duration"]=i.duration+"ms",f.setAttribute("style",d(l))},hide:function(a){j.touchup(a);var b=this,c=(1.4*b.clientWidth,null),e=b.getElementsByClassName("waves-ripple");if(!(e.length>0))return!1;c=e[e.length-1];var f=c.getAttribute("data-x"),g=c.getAttribute("data-y"),h=c.getAttribute("data-scale"),k=Date.now()-Number(c.getAttribute("data-hold")),l=350-k;0>l&&(l=0),setTimeout(function(){var a={top:g+"px",left:f+"px",opacity:"0","-webkit-transition-duration":i.duration+"ms","-moz-transition-duration":i.duration+"ms","-o-transition-duration":i.duration+"ms","transition-duration":i.duration+"ms","-webkit-transform":h,"-moz-transform":h,"-ms-transform":h,"-o-transform":h,transform:h};c.setAttribute("style",d(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},i.duration)},l)},wrapInput:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("input"===c.tagName.toLowerCase()){var d=c.parentNode;if("i"===d.tagName.toLowerCase()&&-1!==d.className.indexOf("waves-effect"))continue;var e=document.createElement("i");e.className=c.className+" waves-input-wrapper";var f=c.getAttribute("style");f||(f=""),e.setAttribute("style",f),c.className="waves-button-input",c.removeAttribute("style"),d.replaceChild(e,c),e.appendChild(c)}}}},j={touches:0,allowEvent:function(a){var b=!0;return"touchstart"===a.type?j.touches+=1:"touchend"===a.type||"touchcancel"===a.type?setTimeout(function(){j.touches>0&&(j.touches-=1)},500):"mousedown"===a.type&&j.touches>0&&(b=!1),b},touchup:function(a){j.allowEvent(a)}};return g.displayEffect=function(a){a=a||{},"duration"in a&&(i.duration=a.duration),i.wrapInput(h(".waves-effect")),"ontouchstart"in window&&document.body.addEventListener("touchstart",f,!1),document.body.addEventListener("mousedown",f,!1)},g.attach=function(a){"input"===a.tagName.toLowerCase()&&(i.wrapInput([a]),a=a.parentElement),"ontouchstart"in window&&a.addEventListener("touchstart",f,!1),a.addEventListener("mousedown",f,!1)},g});
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var b=typeof a;return"function"===b||"object"===b&&!!a}function d(a){return c(a)&&a.nodeType>0}function e(a){var b=m.call(a);return"[object String]"===b?l(a):c(a)&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}function f(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function g(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function h(a,b,c){c.classList.remove("waves-rippling");var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;0>j&&(j=0),"mousemove"===a.type&&(j=150);var k="mousemove"===a.type?2500:o.duration;setTimeout(function(){var a={top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h};c.setAttribute("style",g(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},k)},j)}function i(a){if(p.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(c.classList.contains("waves-effect")&&!(c instanceof SVGElement)){b=c;break}c=c.parentElement}return b}function j(a){p.registerEvent(a);var b=i(a);if(null!==b)if("touchstart"===a.type&&o.delay){var c=!1,d=setTimeout(function(){d=null,o.show(a,b)},o.delay),e=function(e){d&&(clearTimeout(d),d=null,o.show(a,b)),c||(c=!0,o.hide(e,b))},f=function(a){d&&(clearTimeout(d),d=null),e(a)};b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1)}else o.show(a,b),n&&(b.addEventListener("touchend",o.hide,!1),b.addEventListener("touchcancel",o.hide,!1)),b.addEventListener("mouseup",o.hide,!1),b.addEventListener("mouseleave",o.hide,!1)}var k=k||{},l=document.querySelectorAll.bind(document),m=Object.prototype.toString,n="ontouchstart"in window,o={duration:750,delay:200,show:function(a,b,c){if(2===a.button)return!1;b=b||this;var d=document.createElement("div");d.className="waves-ripple waves-rippling",b.appendChild(d);var e=f(b),h=a.pageY-e.top,i=a.pageX-e.left,j="scale("+b.clientWidth/100*3+")",k="translate(0,0)";c&&(k="translate("+c.x+"px, "+c.y+"px)"),"touches"in a&&a.touches.length&&(h=a.touches[0].pageY-e.top,i=a.touches[0].pageX-e.left),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);var l={top:h+"px",left:i+"px"};d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";var m="mousemove"===a.type?2500:o.duration;l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))},hide:function(a,b){b=b||this;for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;e>d;d++)h(a,b,c[d])},wrapInput:function(a){for(var b=0,c=a.length;c>b;b++){var d=a[b];if("input"===d.tagName.toLowerCase()){var e=d.parentNode;if("i"===e.tagName.toLowerCase()&&e.classList.contains("waves-effect"))continue;var f=document.createElement("i");f.className=d.className+" waves-input-wrapper",d.className="waves-button-input",e.replaceChild(f,d),f.appendChild(d);var g=window.getComputedStyle(d,null),h=g.color,i=g.backgroundColor;f.setAttribute("style","color:"+h+";background:"+i),d.setAttribute("style","background-color:rgba(0,0,0,0);")}}}},p={touches:0,allowEvent:function(a){var b=!0;return/^(mousedown|mousemove)$/.test(a.type)&&p.touches&&(b=!1),b},registerEvent:function(a){var b=a.type;"touchstart"===b?p.touches+=1:/^(touchend|touchcancel)$/.test(b)&&setTimeout(function(){p.touches&&(p.touches-=1)},500)}};return k.init=function(a){var b=document.body;a=a||{},"duration"in a&&(o.duration=a.duration),"delay"in a&&(o.delay=a.delay),o.wrapInput(l(".waves-effect")),n&&(b.addEventListener("touchstart",j,!1),b.addEventListener("touchcancel",p.registerEvent,!1),b.addEventListener("touchend",p.registerEvent,!1)),b.addEventListener("mousedown",j,!1)},k.attach=function(a,b){a=e(a),"[object Array]"===m.call(b)&&(b=b.join(" ")),b=b?" "+b:"";for(var c,d=0,f=a.length;f>d;d++)c=a[d],"input"===c.tagName.toLowerCase()&&(o.wrapInput([c]),c=c.parentElement),c.className+=" waves-effect"+b},k.ripple=function(a,b){a=e(a);var c=a.length;if(b=b||{},b.wait=b.wait||0,b.position=b.position||null,c)for(var d,g,h,i={},j=0,k={type:"mousedown",button:1},l=function(a,b){return function(){o.hide(a,b)}};c>j;j++)if(d=a[j],g=b.position||{x:d.clientWidth/2,y:d.clientHeight/2},h=f(d),i.x=h.left+g.x,i.y=h.top+g.y,k.pageX=i.x,k.pageY=i.y,o.show(k,d),b.wait>=0&&null!==b.wait){var m={type:"mouseup",button:1};setTimeout(l(m,d),b.wait)}},k.calm=function(a){a=e(a);for(var b={type:"mouseup",button:1},c=0,d=a.length;d>c;c++)o.hide(b,a[c])},k.displayEffect=function(a){console.error("Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect"),k.init(a)},k});
 //# sourceMappingURL=waves.min.js.map

docs/static/snarl.min.js

 /*!
  * Snarl - Web Notifications based on Growl
- * @version v0.1.3
+ * @version v0.3.2
  * @link https://hoxxep.github.io/snarl
@@ -10,2 +10,2 @@ *
  */
-!function(t,i){"use strict";function n(){var t="",i="abcdefghijklmnopqrstuvwxyz0123456789";do{t="";for(var n=0;5>n;n++)t+=i.charAt(Math.floor(Math.random()*i.length))}while(u.exists(t));return t}function e(i){if("snarl-wrapper"!==i.toElement.getAttribute("id")){for(var n=i.toElement,e=!1;!c(n,"snarl-notification");)c(n,"snarl-close")&&(e=!0),n=n.parentElement;var o=n.getAttribute("id");if(o=/snarl-notification-([a-zA-Z0-9]+)/.exec(o)[1],e&&u.notifications[o].options.dismissable)u.removeNotification(o);else{var a=u.notifications[o].action;if(void 0===a||null===a)return;"string"==typeof a?t.location=a:"function"==typeof a?a(o):(console.log("Snarl Error: Invalid click action:"),console.log(a))}}}function o(t){if(void 0===u.notifications[t]&&(u.notifications[t]={}),null===u.notifications[t].element||void 0===u.notifications[t].element){var n='<h3 class="snarl-title"></h3><p class="snarl-text"></p><div class="snarl-close waves-effect"><!--<i class="fa fa-close"></i>-->'+m+"</div>",e=i.createElement("div");e.innerHTML=n,s(e,"snarl-notification waves-effect"),e.setAttribute("id","snarl-notification-"+t),u.notifications[t].element=e}if(null===u.notifications[t].element.parentElement){var o=i.getElementById("snarl-wrapper");i.body.clientWidth>480?o.appendChild(u.notifications[t].element):o.insertBefore(u.notifications[t].element,o.firstChild)}}function a(t,i){var n,e={};for(n in t)e[n]=t[n];for(n in i)e[n]=i[n];return e}function s(t,i){c(t,i)||(t.className+=" "+i)}function c(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");return null!==t.className.match(n)}function l(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");t.className=t.className.replace(n,"")}function r(){return"ontouchstart"in t||"onmsgesturechange"in t}function f(){var t=i.createElement("div");t.setAttribute("id","snarl-wrapper"),t.addEventListener("click",e),i.body.appendChild(t)}var u=u||{};u={count:0,notifications:{},defaultOptions:{title:"",text:"",timeout:3e3,action:null,dismissable:!0},setDefaultOptions:function(t){u.defaultOptions=a(u.defaultOptions,t)},addNotification:function(t){u.count+=1;var i=n();return o(i),u.editNotification(i,t),i},editNotification:function(t,i){null!==u.notifications[t].removeTimer&&(clearTimeout(u.notifications[t].removeTimer),u.notifications[t].removeTimer=null),o(t),i=i||{},void 0===u.notifications[t].options&&(u.notifications[t].options=u.defaultOptions),i=a(u.notifications[t].options,i);var n=u.notifications[t].element;n.getElementsByClassName("snarl-title")[0].textContent=i.title,n.getElementsByClassName("snarl-text")[0].textContent=i.text,null!==i.timer&&clearTimeout(u.notifications[t].timer);var e=null;null!==i.timeout&&(e=setTimeout(function(){u.removeNotification(t)},i.timeout)),u.notifications[t].timer=e,u.notifications[t].action=i.action,i.dismissable?l(n,"not-dismissable"):s(n,"not-dismissable"),setTimeout(function(){s(n,"inbound"),n.removeAttribute("style")},0),r()&&s(n,"no-hover"),u.notifications[t].options=i},reOpenNotification:function(t){u.editNotification(t)},removeNotification:function(t){if(u.isDismissed(t))return!1;var n=u.notifications[t].element;return l(n,"inbound"),i.body.clientWidth>480?n.style.marginBottom=-n.offsetHeight+"px":n.style.marginTop=-n.offsetHeight+"px",u.notifications[t].removeTimer=setTimeout(function(){n.parentElement.removeChild(n)},500),clearTimeout(u.notifications[t].timer),!0},isDismissed:function(t){return u.exists(t)?null===u.notifications[t].element.parentElement:!0},exists:function(t){return void 0!==u.notifications[t]},setTitle:function(t,i){u.editNotification(t,{title:i})},setText:function(t,i){u.editNotification(t,{text:i})},setTimeout:function(t,i){u.editNotification(t,{timeout:i})}};var m='<svg class="snarl-close-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><g><path d="M49.5,5c-24.9,0-45,20.1-45,45s20.1,45,45,45s45-20.1,45-45S74.4,5,49.5,5z M71.3,65.2c0.3,0.3,0.5,0.7,0.5,1.1   s-0.2,0.8-0.5,1.1L67,71.8c-0.3,0.3-0.7,0.5-1.1,0.5s-0.8-0.2-1.1-0.5L49.5,56.6L34.4,71.8c-0.3,0.3-0.7,0.5-1.1,0.5   c-0.4,0-0.8-0.2-1.1-0.5l-4.3-4.4c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1L43,49.9L27.8,34.9c-0.6-0.6-0.6-1.6,0-2.3   l4.3-4.4c0.3-0.3,0.7-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5l15.2,15l15.2-15c0.3-0.3,0.7-0.5,1.1-0.5s0.8,0.2,1.1,0.5l4.3,4.4   c0.6,0.6,0.6,1.6,0,2.3L56.1,49.9L71.3,65.2z"/></g></svg>';!function(){"complete"===i.readyState||"interactive"===i.readyState&&i.body?f():i.addEventListener?i.addEventListener("DOMContentLoaded",function(){i.removeEventListener("DOMContentLoaded",null,!1),f()},!1):i.attachEvent&&i.attachEvent("onreadystatechange",function(){"complete"===i.readyState&&(i.detachEvent("onreadystatechange",null),f())})}(),t.Snarl=u}(window,document);
+!function(t,i){"use strict";function n(){var t="",i="abcdefghijklmnopqrstuvwxyz0123456789";do{t="";for(var n=0;5>n;n++)t+=i.charAt(Math.floor(Math.random()*i.length))}while(u.exists(t));return t}function e(i){if("snarl-wrapper"!==i.toElement.getAttribute("id")){for(var n=i.toElement,e=!1;!l(n,"snarl-notification");)l(n,"snarl-close")&&(e=!0),n=n.parentElement;var o=n.getAttribute("id");if(o=/snarl-notification-([a-zA-Z0-9]+)/.exec(o)[1],e&&u.notifications[o].options.dismissable)u.removeNotification(o);else{var a=u.notifications[o].action;if(void 0===a||null===a)return;"string"==typeof a?t.location=a:"function"==typeof a?a(o):(console.log("Snarl Error: Invalid click action:"),console.log(a))}}}function o(t){if(void 0===u.notifications[t]&&(u.notifications[t]={}),null===u.notifications[t].element||void 0===u.notifications[t].element){var n=d.cloneNode(!0);s(n,"snarl-notification"),n.setAttribute("id","snarl-notification-"+t),u.notifications[t].element=n}if(null===u.notifications[t].element.parentElement){var e=i.getElementById("snarl-wrapper");i.body.clientWidth>480?e.appendChild(u.notifications[t].element):e.insertBefore(u.notifications[t].element,e.firstChild)}}function a(t,i){var n,e={};for(n in t)e[n]=t[n];for(n in i)e[n]=i[n];return e}function s(t,i){l(t,i)||(t.className+=" "+i)}function l(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");return null!==t.className.match(n)}function c(t,i){var n=new RegExp("(?:^|\\s)"+i+"(?!\\S)","g");t.className=t.className.replace(n,"")}function r(){return"ontouchstart"in t||"onmsgesturechange"in t}function f(){var t=i.createElement("div");t.setAttribute("id","snarl-wrapper"),t.addEventListener("click",e),i.body.appendChild(t),u.setNotificationHTML('<div class="snarl-notification waves-effect"><div class="snarl-icon"></div><h3 class="snarl-title"></h3><p class="snarl-text"></p><div class="snarl-close waves-effect"><svg class="snarl-close-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px"><g><path d="M49.5,5c-24.9,0-45,20.1-45,45s20.1,45,45,45s45-20.1,45-45S74.4,5,49.5,5z M71.3,65.2c0.3,0.3,0.5,0.7,0.5,1.1   s-0.2,0.8-0.5,1.1L67,71.8c-0.3,0.3-0.7,0.5-1.1,0.5s-0.8-0.2-1.1-0.5L49.5,56.6L34.4,71.8c-0.3,0.3-0.7,0.5-1.1,0.5   c-0.4,0-0.8-0.2-1.1-0.5l-4.3-4.4c-0.3-0.3-0.5-0.7-0.5-1.1c0-0.4,0.2-0.8,0.5-1.1L43,49.9L27.8,34.9c-0.6-0.6-0.6-1.6,0-2.3   l4.3-4.4c0.3-0.3,0.7-0.5,1.1-0.5c0.4,0,0.8,0.2,1.1,0.5l15.2,15l15.2-15c0.3-0.3,0.7-0.5,1.1-0.5s0.8,0.2,1.1,0.5l4.3,4.4   c0.6,0.6,0.6,1.6,0,2.3L56.1,49.9L71.3,65.2z"/></g></svg></div></div>')}var u=u||{};u={count:0,notifications:{},defaultOptions:{title:"",text:"",icon:"",timeout:5e3,action:null,dismissable:!0},setDefaultOptions:function(t){u.defaultOptions=a(u.defaultOptions,t)},setNotificationHTML:function(t){var n=i.createElement("div");n.innerHTML=t;var e=n.firstChild;n.removeChild(e),d=e},addNotification:function(t){u.count+=1;var i=n();return o(i),u.editNotification(i,t),i},editNotification:function(t,i){null!==u.notifications[t].removeTimer&&(clearTimeout(u.notifications[t].removeTimer),u.notifications[t].removeTimer=null),o(t),i=i||{},void 0===u.notifications[t].options&&(u.notifications[t].options=u.defaultOptions),i=a(u.notifications[t].options,i);var n=u.notifications[t].element,e=n.getElementsByClassName("snarl-title")[0];i.title?(e.textContent=i.title,c(n,"snarl-no-title")):(e.textContent="",s(n,"snarl-no-title"));var l=n.getElementsByClassName("snarl-text")[0];i.text?(l.textContent=i.text,c(n,"snarl-no-text")):(l.textContent="",s(n,"snarl-no-text"));var f=n.getElementsByClassName("snarl-icon")[0];i.icon?(f.innerHTML=i.icon,c(n,"snarl-no-icon")):(f.innerHTML="",s(n,"snarl-no-icon")),null!==i.timer&&clearTimeout(u.notifications[t].timer);var d=null;null!==i.timeout&&(d=setTimeout(function(){u.removeNotification(t)},i.timeout)),u.notifications[t].timer=d,u.notifications[t].action=i.action,i.dismissable?c(n,"not-dismissable"):s(n,"not-dismissable"),setTimeout(function(){s(n,"snarl-in"),n.removeAttribute("style")},0),r()&&s(n,"no-hover"),u.notifications[t].options=i},reOpenNotification:function(t){u.editNotification(t)},removeNotification:function(t){if(u.isDismissed(t))return!1;var n=u.notifications[t].element;return c(n,"snarl-in"),i.body.clientWidth>480?n.style.marginBottom=-n.offsetHeight+"px":n.style.marginTop=-n.offsetHeight+"px",u.notifications[t].removeTimer=setTimeout(function(){n.parentElement.removeChild(n)},500),clearTimeout(u.notifications[t].timer),!0},isDismissed:function(t){return u.exists(t)?null===u.notifications[t].element.parentElement:!0},exists:function(t){return void 0!==u.notifications[t]},setTitle:function(t,i){u.editNotification(t,{title:i})},setText:function(t,i){u.editNotification(t,{text:i})},setIcon:function(t,i){u.editNotification(t,{icon:i})},setTimeout:function(t,i){u.editNotification(t,{timeout:i})}};var d=null;!function(){"complete"===i.readyState||"interactive"===i.readyState&&i.body?f():i.addEventListener?i.addEventListener("DOMContentLoaded",function(){i.removeEventListener("DOMContentLoaded",null,!1),f()},!1):i.attachEvent&&i.attachEvent("onreadystatechange",function(){"complete"===i.readyState&&(i.detachEvent("onreadystatechange",null),f())})}(),t.Snarl=u}(window,document);

package.json

 {
   "name": "node-waves",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Click effect insipired by Google Material Design",
@@ -5,0 +5,0 @@ "author": "Alfiana E. Sibuea <[e-mail]>",

README.md

@@ -27,2 +27,2 @@ # Waves
 
-Copyright © 2014 Alfiana E. Sibuea. All rights reserved.
+Copyright © 2014-2015 Alfiana E. Sibuea. All rights reserved.

situs.json

 {
-    "source": "./docs"
+    "source": "./docs",
+    "ignore": ["_pages/**/*"]
 }

src/js/waves.js

 /*!
- * Waves v0.6.6
- * http://fian.my.id/Waves 
- * 
- * Copyright 2014 Alfiana E. Sibuea and other contributors 
- * Released under the MIT license 
- * https://github.com/fians/Waves/blob/master/LICENSE 
+ * Waves v0.7.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
  */
 
 ;(function(window, factory) {
-    "use strict";
+    'use strict';
 
     // AMD. Register as an anonymous module.  Wrap in function so we have access
     // to root via `this`.
-    if (typeof define === "function" && define.amd) {
+    if (typeof define === 'function' && define.amd) {
         define([], function() {
@@ -23,3 +23,3 @@ return factory.apply(window);
     // environments that support module.exports, like Node.
-    else if (typeof exports === "object") {
+    else if (typeof exports === 'object') {
         module.exports = factory.call(window);
@@ -32,8 +32,11 @@ }
     }
-})(typeof global === "object" ? global : this, function () {
-    "use strict";
+})(typeof global === 'object' ? global : this, function() {
+    'use strict';
 
-    var Waves = Waves || {};
-    var $$ = document.querySelectorAll.bind(document);
+    var Waves            = Waves || {};
+    var $$               = document.querySelectorAll.bind(document);
+    var toString         = Object.prototype.toString;
+    var isTouchAvailable = 'ontouchstart' in window;
 
+
     // Find exact position of element
@@ -48,5 +51,28 @@ function isWindow(obj) {
 
+    function isObject(value) {
+        var type = typeof value;
+        return type === 'function' || type === 'object' && !!value;
+    }
+
+    function isDOMNode(obj) {
+        return isObject(obj) && obj.nodeType > 0;
+    }
+
+    function getWavesElements(nodes) {
+        var stringRepr = toString.call(nodes);
+
+        if (stringRepr === '[object String]') {
+            return $$(nodes);
+        } else if (isObject(nodes) && /^\[object (HTMLCollection|NodeList|Object)\]$/.test(stringRepr) && nodes.hasOwnProperty('length')) {
+            return nodes;
+        } else if (isDOMNode(nodes)) {
+            return [nodes];
+        }
+
+        return [];
+    }
+
     function offset(elem) {
         var docElem, win,
-            box = {top: 0, left: 0},
+            box = { top: 0, left: 0 },
             doc = elem && elem.ownerDocument;
@@ -66,8 +92,8 @@
 
-    function convertStyle(obj) {
+    function convertStyle(styleObj) {
         var style = '';
 
-        for (var a in obj) {
-            if (obj.hasOwnProperty(a)) {
-                style += (a + ':' + obj[a] + ';');
+        for (var prop in styleObj) {
+            if (styleObj.hasOwnProperty(prop)) {
+                style += (prop + ':' + styleObj[prop] + ';');
             }
@@ -81,7 +107,10 @@ }
 
-        // Effect delay
+        // Effect duration
         duration: 750,
 
-        show: function(e, element) {
+        // Effect delay (check for scroll before showing effect)
+        delay: 200,
 
+        show: function(e, element, velocity) {
+
             // Disable right click
@@ -92,19 +121,24 @@ if (e.button === 2) {
 
-            var el = element || this;
+            element = element || this;
 
             // Create ripple
             var ripple = document.createElement('div');
-            ripple.className = 'waves-ripple';
-            el.appendChild(ripple);
+            ripple.className = 'waves-ripple waves-rippling';
+            element.appendChild(ripple);
 
             // Get click coordinate and element witdh
-            var pos         = offset(el);
-            var relativeY   = (e.pageY - pos.top);
-            var relativeX   = (e.pageX - pos.left);
-            var scale       = 'scale('+((el.clientWidth / 100) * 3)+')';
-            
+            var pos       = offset(element);
+            var relativeY = (e.pageY - pos.top);
+            var relativeX = (e.pageX - pos.left);
+            var scale     = 'scale(' + ((element.clientWidth / 100) * 3) + ')';
+            var translate = 'translate(0,0)';
+
+            if (velocity) {
+                translate = 'translate(' + (velocity.x) + 'px, ' + (velocity.y) + 'px)';
+            }
+
             // Support for touch devices
-            if ('touches' in e) {
-              relativeY   = (e.touches[0].pageY - pos.top);
-              relativeX   = (e.touches[0].pageX - pos.left);
+            if ('touches' in e && e.touches.length) {
+                relativeY = (e.touches[0].pageY - pos.top);
+                relativeX = (e.touches[0].pageX - pos.left);
             }
@@ -114,28 +148,30 @@
             ripple.setAttribute('data-hold', Date.now());
-            ripple.setAttribute('data-scale', scale);
             ripple.setAttribute('data-x', relativeX);
             ripple.setAttribute('data-y', relativeY);
+            ripple.setAttribute('data-scale', scale);
+            ripple.setAttribute('data-translate', translate);
 
             // Set ripple position
             var rippleStyle = {
-                'top': relativeY+'px',
-                'left': relativeX+'px'
+                top: relativeY + 'px',
+                left: relativeX + 'px'
             };
-            
-            ripple.className = ripple.className + ' waves-notransition';
+
+            ripple.classList.add('waves-notransition');
             ripple.setAttribute('style', convertStyle(rippleStyle));
-            ripple.className = ripple.className.replace('waves-notransition', '');
+            ripple.classList.remove('waves-notransition');
 
             // Scale the ripple
-            rippleStyle['-webkit-transform'] = scale;
-            rippleStyle['-moz-transform'] = scale;
-            rippleStyle['-ms-transform'] = scale;
-            rippleStyle['-o-transform'] = scale;
-            rippleStyle.transform = scale;
-            rippleStyle.opacity   = '1';
+            rippleStyle['-webkit-transform'] = scale + ' ' + translate;
+            rippleStyle['-moz-transform'] = scale + ' ' + translate;
+            rippleStyle['-ms-transform'] = scale + ' ' + translate;
+            rippleStyle['-o-transform'] = scale + ' ' + translate;
+            rippleStyle.transform = scale + ' ' + translate;
+            rippleStyle.opacity = '1';
 
-            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
-            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
-            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
-            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+            var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
+            rippleStyle['-webkit-transition-duration'] = duration + 'ms';
+            rippleStyle['-moz-transition-duration']    = duration + 'ms';
+            rippleStyle['-o-transition-duration']      = duration + 'ms';
+            rippleStyle['transition-duration']         = duration + 'ms';
 
@@ -145,70 +181,25 @@ ripple.setAttribute('style', convertStyle(rippleStyle));
 
-        hide: function(e) {
-            TouchHandler.touchup(e);
+        hide: function(e, element) {
+            element = element || this;
 
-            var el = this;
-            var width = el.clientWidth * 1.4;
-            
-            // Get first ripple
-            var ripple = null;
-            var ripples = el.getElementsByClassName('waves-ripple');
-            if (ripples.length > 0) {
-                ripple = ripples[ripples.length - 1];
-            } else {
-                return false;
-            }
+            var ripples = element.getElementsByClassName('waves-rippling');
 
-            var relativeX   = ripple.getAttribute('data-x');
-            var relativeY   = ripple.getAttribute('data-y');
-            var scale       = ripple.getAttribute('data-scale');
-
-            // Get delay beetween mousedown and mouse leave
-            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
-            var delay = 350 - diff;
-
-            if (delay < 0) {
-                delay = 0;
+            for (var i = 0, len = ripples.length; i < len; i++) {
+                removeRipple(e, element, ripples[i]);
             }
+        },
 
-            // Fade out ripple after delay
-            setTimeout(function() {
-                var style = {
-                    'top': relativeY+'px',
-                    'left': relativeX+'px',
-                    'opacity': '0',
+        // Little hack to make <input> can perform waves effect
+        wrapInput: function(elements) {
 
-                    // Duration
-                    '-webkit-transition-duration': Effect.duration + 'ms',
-                    '-moz-transition-duration': Effect.duration + 'ms',
-                    '-o-transition-duration': Effect.duration + 'ms',
-                    'transition-duration': Effect.duration + 'ms',
-                    '-webkit-transform': scale,
-                    '-moz-transform': scale,
-                    '-ms-transform': scale,
-                    '-o-transform': scale,
-                    'transform': scale,
-                };
+            for (var i = 0, len = elements.length; i < len; i++) {
 
-                ripple.setAttribute('style', convertStyle(style));
+                var element = elements[i];
 
-                setTimeout(function() {
-                    try {
-                        el.removeChild(ripple);
-                    } catch(e) {
-                        return false;
-                    }
-                }, Effect.duration);
-            }, delay);
-        },
+                if (element.tagName.toLowerCase() === 'input') {
 
-        // Little hack to make <input> can perform waves effect
-        wrapInput: function(elements) {
-            for (var a = 0; a < elements.length; a++) {
-                var el = elements[a];
-                
-                if (el.tagName.toLowerCase() === 'input') {
-                    var parent = el.parentNode;
+                    var parent = element.parentNode;
 
                     // If input already have parent just pass through
-                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
+                    if (parent.tagName.toLowerCase() === 'i' && parent.classList.contains('waves-effect')) {
                         continue;
@@ -218,19 +209,17 @@ }
                     // Put element class and style to the specified parent
-                    var wrapper = document.createElement('i');
-                    wrapper.className = el.className + ' waves-input-wrapper';
+                    var wrapper       = document.createElement('i');
+                    wrapper.className = element.className + ' waves-input-wrapper';
+                    element.className = 'waves-button-input';
 
-                    var elementStyle = el.getAttribute('style');
+                    // Put element as child
+                    parent.replaceChild(wrapper, element);
+                    wrapper.appendChild(element);
 
-                    if (!elementStyle) {
-                        elementStyle = '';
-                    }
+                    // Apply element color and background color to wrapper
+                    var elementStyle    = window.getComputedStyle(element, null);
+                    var color           = elementStyle.color;
+                    var backgroundColor = elementStyle.backgroundColor;
 
-                    wrapper.setAttribute('style', elementStyle);
-                    
-                    el.className = 'waves-button-input';
-                    el.removeAttribute('style');
-
-                    // Put element as child
-                    parent.replaceChild(wrapper, el);
-                    wrapper.appendChild(el);
+                    wrapper.setAttribute('style', 'color:' + color + ';background:' + backgroundColor);
+                    element.setAttribute('style', 'background-color:rgba(0,0,0,0);');
                 }
@@ -243,5 +232,67 @@ }
     /**
+     * Hide the effect and remove the ripple. Must be
+     * a separate function to pass the JSLint...
+     */
+    function removeRipple(e, el, ripple) {
+
+        ripple.classList.remove('waves-rippling');
+
+        var relativeX = ripple.getAttribute('data-x');
+        var relativeY = ripple.getAttribute('data-y');
+        var scale     = ripple.getAttribute('data-scale');
+        var translate = ripple.getAttribute('data-translate');
+
+        // Get delay beetween mousedown and mouse leave
+        var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
+        var delay = 350 - diff;
+
+        if (delay < 0) {
+            delay = 0;
+        }
+
+        if (e.type === 'mousemove') {
+            delay = 150;
+        }
+
+        // Fade out ripple after delay
+        var duration = e.type === 'mousemove' ? 2500 : Effect.duration;
+
+        setTimeout(function() {
+
+            var style = {
+                top: relativeY + 'px',
+                left: relativeX + 'px',
+                opacity: '0',
+
+                // Duration
+                '-webkit-transition-duration': duration + 'ms',
+                '-moz-transition-duration': duration + 'ms',
+                '-o-transition-duration': duration + 'ms',
+                'transition-duration': duration + 'ms',
+                '-webkit-transform': scale + ' ' + translate,
+                '-moz-transform': scale + ' ' + translate,
+                '-ms-transform': scale + ' ' + translate,
+                '-o-transform': scale + ' ' + translate,
+                'transform': scale + ' ' + translate
+            };
+
+            ripple.setAttribute('style', convertStyle(style));
+
+            setTimeout(function() {
+                try {
+                    el.removeChild(ripple);
+                } catch (e) {
+                    return false;
+                }
+            }, duration);
+
+        }, delay);
+    }
+
+
+    /**
      * Disable mousedown event for 500ms during and after touch
      */
     var TouchHandler = {
+
         /* uses an integer rather than bool so there's no issues with
@@ -252,14 +303,8 @@ * needing to clear timeouts if another touch event occurred
         touches: 0,
+
         allowEvent: function(e) {
+
             var allow = true;
 
-            if (e.type === 'touchstart') {
-                TouchHandler.touches += 1; //push
-            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
-                setTimeout(function() {
-                    if (TouchHandler.touches > 0) {
-                        TouchHandler.touches -= 1; //pop after 500ms
-                    }
-                }, 500);
-            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
+            if (/^(mousedown|mousemove)$/.test(e.type) && TouchHandler.touches) {
                 allow = false;
@@ -270,4 +315,18 @@ }
         },
-        touchup: function(e) {
-            TouchHandler.allowEvent(e);
+        registerEvent: function(e) {
+            var eType = e.type;
+
+            if (eType === 'touchstart') {
+
+                TouchHandler.touches += 1; // push
+
+            } else if (/^(touchend|touchcancel)$/.test(eType)) {
+
+                setTimeout(function() {
+                    if (TouchHandler.touches) {
+                        TouchHandler.touches -= 1; // pop after 500ms
+                    }
+                }, 500);
+
+            }
         }
@@ -282,2 +341,3 @@ };
     function getWavesEffectElement(e) {
+
         if (TouchHandler.allowEvent(e) === false) {
@@ -291,8 +351,5 @@ return null;
         while (target.parentElement !== null) {
-            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
+            if (target.classList.contains('waves-effect') && (!(target instanceof SVGElement))) {
                 element = target;
                 break;
-            } else if (target.classList.contains('waves-effect')) {
-                element = target;
-                break;
             }
@@ -309,18 +366,62 @@ target = target.parentElement;
     function showEffect(e) {
+
+        TouchHandler.registerEvent(e);
+
         var element = getWavesEffectElement(e);
 
         if (element !== null) {
-            Effect.show(e, element);
 
-            if ('ontouchstart' in window) {
-                element.addEventListener('touchend', Effect.hide, false);
-                element.addEventListener('touchcancel', Effect.hide, false);
+            if (e.type === 'touchstart' && Effect.delay) {
+
+                var hidden = false;
+
+                var timer = setTimeout(function () {
+                    timer = null;
+                    Effect.show(e, element);
+                }, Effect.delay);
+
+                var hideEffect = function(hideEvent) {
+
+                    // if touch hasn't moved, and effect not yet started: start effect now
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                        Effect.show(e, element);
+                    }
+                    if (!hidden) {
+                        hidden = true;
+                        Effect.hide(hideEvent, element);
+                    }
+                };
+
+                var touchMove = function(moveEvent) {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    hideEffect(moveEvent);
+                };
+
+                element.addEventListener('touchmove', touchMove, false);
+                element.addEventListener('touchend', hideEffect, false);
+                element.addEventListener('touchcancel', hideEffect, false);
+
+            } else {
+
+                Effect.show(e, element);
+
+                if (isTouchAvailable) {
+                    element.addEventListener('touchend', Effect.hide, false);
+                    element.addEventListener('touchcancel', Effect.hide, false);
+                }
+
+                element.addEventListener('mouseup', Effect.hide, false);
+                element.addEventListener('mouseleave', Effect.hide, false);
             }
-
-            element.addEventListener('mouseup', Effect.hide, false);
-            element.addEventListener('mouseleave', Effect.hide, false);
         }
     }
 
-    Waves.displayEffect = function(options) {
+    Waves.init = function(options) {
+        var body = document.body;
+
         options = options || {};
@@ -331,35 +432,124 @@
         }
-        
+
+        if ('delay' in options) {
+            Effect.delay = options.delay;
+        }
+
         //Wrap input inside <i> tag
         Effect.wrapInput($$('.waves-effect'));
-        
-        if ('ontouchstart' in window) {
-            document.body.addEventListener('touchstart', showEffect, false);
+
+        if (isTouchAvailable) {
+            body.addEventListener('touchstart', showEffect, false);
+            body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
+            body.addEventListener('touchend', TouchHandler.registerEvent, false);
         }
-        
-        document.body.addEventListener('mousedown', showEffect, false);
+
+        body.addEventListener('mousedown', showEffect, false);
     };
 
+
     /**
-     * Attach Waves to an input element (or any element which doesn't
-     * bubble mouseup/mousedown events).
-     *   Intended to be used with dynamically loaded forms/inputs, or
-     * where the user doesn't want a delegated click handler.
+     * Attach Waves to dynamically loaded inputs, or add .waves-effect and other
+     * waves classes to a set of elements. Set drag to true if the ripple mouseover
+     * or skimming effect should be applied to the elements.
      */
-    Waves.attach = function(element) {
-        //FUTURE: automatically add waves classes and allow users
-        // to specify them with an options param? Eg. light/classic/button
-        if (element.tagName.toLowerCase() === 'input') {
-            Effect.wrapInput([element]);
-            element = element.parentElement;
+    Waves.attach = function(elements, classes) {
+        elements = getWavesElements(elements);
+
+        if (toString.call(classes) === '[object Array]') {
+            classes = classes.join(' ');
         }
 
-        if ('ontouchstart' in window) {
-            element.addEventListener('touchstart', showEffect, false);
+        classes = classes ? ' ' + classes : '';
+
+        var element;
+        for (var i = 0, len = elements.length; i < len; i++) {
+            element = elements[i];
+
+            if (element.tagName.toLowerCase() === 'input') {
+                Effect.wrapInput([element]);
+                element = element.parentElement;
+            }
+
+            element.className += ' waves-effect' + classes;
         }
+    };
 
-        element.addEventListener('mousedown', showEffect, false);
+
+    /**
+     * Cause a ripple to appear in an element via code.
+     */
+    Waves.ripple = function(elements, options) {
+        elements = getWavesElements(elements);
+        var elementsLen = elements.length;
+
+        options          = options || {};
+        options.wait     = options.wait || 0;
+        options.position = options.position || null; // default = centre of element
+
+
+        if (elementsLen) {
+            var element, pos, off, centre = {}, i = 0;
+            var mousedown = {
+                type: 'mousedown',
+                button: 1
+            };
+            var hideRipple = function(mouseup, element) {
+                return function() {
+                    Effect.hide(mouseup, element);
+                };
+            };
+
+            for (; i < elementsLen; i++) {
+                element = elements[i];
+                pos = options.position || {
+                    x: element.clientWidth / 2,
+                    y: element.clientHeight / 2
+                };
+
+                off      = offset(element);
+                centre.x = off.left + pos.x;
+                centre.y = off.top + pos.y;
+
+                mousedown.pageX = centre.x;
+                mousedown.pageY = centre.y;
+
+                Effect.show(mousedown, element);
+
+                if (options.wait >= 0 && options.wait !== null) {
+                    var mouseup = {
+                        type: 'mouseup',
+                        button: 1
+                    };
+
+                    setTimeout(hideRipple(mouseup, element), options.wait);
+                }
+            }
+        }
     };
 
+    /**
+     * Remove all ripples from an element.
+     */
+    Waves.calm = function(elements) {
+        elements = getWavesElements(elements);
+        var mouseup = {
+            type: 'mouseup',
+            button: 1
+        };
+
+        for (var i = 0, len = elements.length; i < len; i++) {
+            Effect.hide(mouseup, elements[i]);
+        }
+    };
+
+    /**
+     * Deprecated API fallback
+     */
+    Waves.displayEffect = function(options) {
+        console.error('Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect');
+        Waves.init(options);
+    };
+
     return Waves;
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

233636

increased by9.47%

Number of package files

30

increased by25%

Lines of code

2395

increased by11.92%

No dependency changes