Lots of refinements and logging

jakiestfu · Jan 12, 2015 · 0aca347 · 0aca347
1 parent e70d704
commit 0aca347
Showing 1 changed file with 63 additions and 12 deletions.
diff --git a/src/ripple.js b/src/ripple.js
@@ -3,20 +3,32 @@
 
         var self = this;
 
+        var _log = self.log = function() {
+            if(self.defaults.debug && console && console.log) {
+                console.log.apply(console, arguments);
+            }
+        };
+
+        self.selector = selector;
         self.defaults = {
+            debug: false,
             on: 'mousedown',
 
             opacity: 0.4,
             color: "auto",
             multi: false,
 
             duration: 0.7,
+            rate: function(pxPerSecond) {
+                return pxPerSecond;
+            },
+
             easing: 'linear'
         };
 
         self.defaults = $.extend({}, self.defaults, options);
 
-        $(document).on(self.defaults.on, selector, function(e) {
+        var Trigger = function(e) {
 
             var $this = $(this);
             var $ripple;
@@ -32,32 +44,64 @@
                 $ripple = $("<span></span>").addClass("ripple");
                 $ripple.appendTo($this);
 
+                _log('Create: Ripple');
+
+                // Set ripple size
+                if (!$ripple.height() && !$ripple.width()) {
+                    var size = Math.max($this.outerWidth(), $this.outerHeight());
+                    $ripple.css({
+                        height: size,
+                        width: size
+                    });
+                    _log('Set: Ripple size');
+                }
+
+                // Give the user the ability to change the rate of the animation
+                // based on element width
+                if(settings.rate && typeof settings.rate == "function") {
+
+                    // rate = pixels per second
+                    var rate = Math.round( $ripple.width() / settings.duration );
+
+                    // new amount of pixels per second
+                    var filteredRate = settings.rate(rate);
+
+                    // Determine the new duration for the animation
+                    var newDuration = ( $ripple.width() / filteredRate);
+
+                    // Set the new duration if it has not changed
+                    if(settings.duration.toFixed(2) !== newDuration.toFixed(2)) {
+                        _log('Update: Ripple Duration', {
+                            from: settings.duration,
+                            to: newDuration
+                        });
+                        settings.duration = newDuration;
+                    }
+                }
+
                 // Set the color and opacity
                 var color = (settings.color == "auto") ? $this.css('color') : settings.color;
-                $ripple.css({
+                var css = {
                     animationDuration: (settings.duration).toString() + 's',
                     animationTimingFunction: settings.easing,
                     background: color,
                     opacity: settings.opacity
-                });
+                };
+
+                _log('Set: Ripple CSS', css);
+                $ripple.css(css);
             }
 
             // Ensure we always have the ripple element
             if(!settings.multi) {
+                _log('Set: Ripple Element');
                 $ripple = $this.find(".ripple");
             }
 
             // Kill animation
+            _log('Destroy: Ripple Animation');
             $ripple.removeClass("animate");
 
-            // Set ripple size
-            if (!$ripple.height() && !$ripple.width()) {
-                var size = Math.max($this.outerWidth(), $this.outerHeight());
-                $ripple.css({
-                    height: size,
-                    width: size
-                });
-            }
 
             // Retrieve coordinates
             var x = e.pageX - $this.offset().left - $ripple.width() / 2;
@@ -69,16 +113,23 @@
              * need to trigger paints thereafter.
              */
             if(settings.multi) {
+                _log('Set: Ripple animationend event');
                 $ripple.one('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
+                    _log('Note: Ripple animation ended');
+                    _log('Destroy: Ripple');
                     $(this).remove();
                 });
             }
 
             // Set position and animate
+            _log('Set: Ripple location');
+            _log('Set: Ripple animation');
             $ripple.css({
                 top: y + 'px',
                 left: x + 'px'
             }).addClass("animate");
-        });
+        };
+
+        $(document).on(self.defaults.on, self.selector, Trigger);
     };
 })(jQuery);