From 0de9d60e30e3855a1e63a59a6c8cd7da72e86b68 Mon Sep 17 00:00:00 2001 From: Guilherme Rv Coelho Date: Sun, 28 Dec 2014 12:41:17 -0200 Subject: [PATCH 1/3] Fix #327 on ripples.js and improve structure I've fixed #327 and I also passed the plugin to a jQuery Boilerplate structure. I only made changes on the structure and not in the functions themselves, so the code could be a little bit neater, cleaner and intuitive. Now the plugin can be accessed alone, by doing: ```javascript $(selector).ripples(); ``` Note: I've removed the default elements targeted by the plugin, for IMHO I think that should be in the initialization, and not in the plugin itself. --- scripts/ripples.js | 424 +++++++++++++++++++++++++++++++-------------- 1 file changed, 293 insertions(+), 131 deletions(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 44bfc60a..53710e07 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -1,167 +1,329 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* globals jQuery, navigator */ -(function($) { +(function($, window, document, undefined) { + + 'use strict'; - // Detect if the browser supports transitions - $.support.transition = (function(){ - var thisBody = document.body || document.documentElement, - thisStyle = thisBody.style, - support = ( - thisStyle.transition !== undefined || - thisStyle.WebkitTransition !== undefined || - thisStyle.MozTransition !== undefined || - thisStyle.MsTransition !== undefined || - thisStyle.OTransition !== undefined - ); - return support; - })(); - - $.ripples = function(options) { - - // Default options - var defaultOptions = { - "target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple" - }; + /** + * Define the name of the plugin + */ + var ripples = 'ripples'; - function isTouch() { - return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); - } + /** + * Get an instance of the plugin + */ + var self = null; - // Fade out the ripple and then destroy it - function rippleOut(ripple) { - - // Unbind events from ripple - ripple.off(); - - // Start the out animation - if ($.support.transition) { - ripple.addClass("ripple-out"); - } else { - ripple.animate({ - "opacity": 0 - }, 100, function() { - ripple.trigger("transitionend"); - }); - } - - // This function is called when the transition "out" ends - ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ - ripple.remove(); - }); - - } - - // Apply custom options - options = $.extend(defaultOptions, options); + /** + * Define the defaults of the plugin + */ + var defaults = {}; - $(document) - .on("mousedown touchstart", options.target, function(e) { - if (isTouch() && e.type == "mousedown") { + /** + * Create the main plugin function + */ + function Ripples(element, options) { + self = this; + + this.element = $(element); + + this.options = $.extend({}, defaults, options); + + this._defaults = defaults; + this._name = ripples; + + this.init(); + } + + + /** + * Initialize the plugin + */ + Ripples.prototype.init = function() { + var $element = this.element; + + $element.on('mousedown touchstart', function(event) { + /** + * Verify if the user is just touching on a device and return if so + */ + if(self.isTouch() && event.type === 'mousedown') { return false; } - var element = $(this); - // If the ripple wrapper does not exists, create it - if (!$(this).find(".ripple-wrapper").length) { - $(this).append("
"); + /** + * Verify if the current element already has a ripple wrapper element and + * creates if it doesn't + */ + if(!($element.find('.ripple-wrapper').length)) { + $element.append('
'); } - var wrapper = $(this).find(".ripple-wrapper"); + + /** + * Find the ripple wrapper + */ + var $wrapper = $element.find('.ripple-wrapper'); - var wrapperOffset = wrapper.offset(), - relX, - relY; - if (!isTouch()) { - // Get the mouse position relative to the ripple wrapper - relX = e.pageX - wrapperOffset.left; - relY = e.pageY - wrapperOffset.top; - } else { - // Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper - e = e.originalEvent; - if (e.touches.length === 1) { - relX = e.touches[0].pageX - wrapperOffset.left; - relY = e.touches[0].pageY - wrapperOffset.top; - } else { - return; - } + /** + * Get relY and relX positions + */ + var relY = self.getRelY(event); + var relX = self.getRelX(event); + + + /** + * If relY and/or relX are false, return the event + */ + if(!relY && !relX) { + return; } - // Meet the new ripple - var ripple = $("
"); - // Add to it the ripple class - ripple.addClass("ripple"); - - // Position it in the right place - ripple.css({"left": relX, "top": relY}); - - // Set the background color of the ripple - ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color}); - - // Spawn it - wrapper.append(ripple); - - // Make sure the ripple has the styles applied (ugly hack but it works) - (function() { return window.getComputedStyle(ripple[0]).opacity; })(); - - // Set the new size - var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5; + /** + * Get the ripple color + */ + var rippleColor = self.getRippleColor(); - // Decide if use CSS transitions or jQuery transitions - if ($.support.transition) { - // Start the transition - ripple.css({ - "-ms-transform": "scale(" + size + ")", - "-moz-transform": "scale(" + size + ")", - "-webkit-transform": "scale(" + size + ")", - "transform": "scale(" + size + ")" + /** + * Create the ripple element + */ + var $ripple = $('
'); + + $ripple + .addClass('ripple') + .css({ + 'left': relX, + 'top': relY, + 'background-color': rippleColor }); - ripple.addClass("ripple-on"); - ripple.data("animating", "on"); - ripple.data("mousedown", "on"); - } else { - // Start the transition - ripple.animate({ - "width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2, - "height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2, - "margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1, - "margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1, - "opacity": 0.2 - }, 500, function() { - ripple.trigger("transitionend"); - }); - } - // This function is called when the transition "on" ends + + /** + * Append the ripple to the wrapper + */ + $wrapper.append($ripple); + + + /** + * Make sure the ripple has the styles applied (ugly hack but it works) + */ + (function() { return window.getComputedStyle($ripple[0]).opacity; })(); + + + /** + * Turn on the ripple animation + */ + self.rippleOn($ripple); + + + /** + * Call the rippleEnd function when the transition 'on' ends + */ setTimeout(function() { - ripple.data("animating", "off"); - if (ripple.data("mousedown") == "off") { - rippleOut(ripple); - } + self.rippleEnd($ripple) }, 500); - // On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple - element.on("mouseup mouseleave touchend", function() { - ripple.data("mousedown", "off"); - // If the transition "on" is finished then we can destroy the ripple with transition "out" - if (ripple.data("animating") == "off") { - rippleOut(ripple); + + /** + * Detect when the user leaves the element + */ + $element.on('mouseup mouseleave touchend', function() { + $ripple.data('mousedown', 'off'); + + if($ripple.data('animating') === 'off') { + self.rippleOut($ripple); } }); }); - }; - $.fn.ripples = function() { - $.ripples({"target": $(this)}); + + /** + * Get the new size based on the element height/width and the ripple width + */ + Ripples.prototype.getNewSize = function($ripple) { + var $element = this.element; + + return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5; }; -})(jQuery); + + /** + * Get the relX + */ + Ripples.prototype.getRelX = function(event) { + var $element = this.element; + var wrapperOffset = $element.find('.ripple-wrapper').offset(); + + if(!self.isTouch()) { + /** + * Get the mouse position relative to the ripple wrapper + */ + return event.pageX - wrapperOffset.left; + } else { + /** + * Make sure the user is using only one finger and then get the touch + * position relative to the ripple wrapper + */ + event = event.originalEvent; + + if(event.touches.length !== 1) { + return event.touches[0].pageX - wrapperOffset.left; + } + + return false; + } + } + + + /** + * Get the relY + */ + Ripples.prototype.getRelY = function(event) { + var $element = this.element; + var wrapperOffset = $element.find('.ripple-wrapper').offset(); + + if(!self.isTouch()) { + /** + * Get the mouse position relative to the ripple wrapper + */ + return event.pageY - wrapperOffset.top; + } else { + /** + * Make sure the user is using only one finger and then get the touch + * position relative to the ripple wrapper + */ + event = event.originalEvent; + + if(event.touches.length !== 1) { + return event.touches[0].pageY - wrapperOffset.top; + } + + return false; + } + } + + + /** + * Get the ripple color + */ + Ripples.prototype.getRippleColor = function() { + var $element = this.element; + + var color = $element.data("ripple-color") ? $element.data('ripple-color') : window.getComputedStyle($element[0]).color; + + return color; + }; + + + /** + * Verify if the client browser has transistion support + */ + Ripples.prototype.hasTransitionSupport = function() { + var thisBody = document.body || document.documentElement; + var thisStyle = thisBody.style; + + var support = ( + thisStyle.transition !== undefined || + thisStyle.WebkitTransition !== undefined || + thisStyle.MozTransition !== undefined || + thisStyle.MsTransition !== undefined || + thisStyle.OTransition !== undefined + ); + + return support; + }; + + + /** + * Verify if the client is using a mobile device + */ + Ripples.prototype.isTouch = function() { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); + }; + + + /** + * End the animation of the ripple + */ + Ripples.prototype.rippleEnd = function($ripple) { + $ripple.data('animating', 'off'); + + if($ripple.data('mousedown') === 'off') { + self.rippleOut($ripple); + } + } + + + /** + * Turn off the ripple effect + */ + Ripples.prototype.rippleOut = function($ripple) { + $ripple.off(); + + if(self.hasTransitionSupport()) { + $ripple.addClass('ripple-out'); + } else { + $ripple.animate({'opacity': 0}, 100, function() { + $ripple.trigger('transitionend'); + }); + } + + $ripple.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { + $ripple.remove(); + }); + }; + + + /** + * Turn on the ripple effect + */ + Ripples.prototype.rippleOn = function($ripple) { + var size = self.getNewSize($ripple); + var $element = this.element; + + if(self.hasTransitionSupport()) { + $ripple + .css({ + '-ms-transform': 'scale(' + size + ')', + '-moz-transform': 'scale(' + size + ')', + '-webkit-transform': 'scale(' + size + ')', + 'transform': 'scale(' + size + ')' + }) + .addClass('ripple-on') + .data('animating', 'on') + .data('mousedown', 'on'); + } else { + $ripple.animate({ + 'width': Math.max($element.outerWidth(), $element.outerHeight()) * 2, + 'height': Math.max($element.outerWidth(), $element.outerHeight()) * 2, + 'margin-left': Math.max($element.outerWidth(), $element.outerHeight()) * (-1), + 'margin-top': Math.max($element.outerWidth(), $element.outerHeight()) * (-1), + 'opacity': 0.2 + }, 500, function() { + $ripple.trigger('transitionend'); + }); + } + }; + + + /** + * Create the jquery plugin function + */ + $.fn.ripples = function(options) { + return this.each(function() { + if(!$.data(this, 'plugin_' + ripples)) { + $.data(this, 'plugin_' + ripples, new Ripples(this, options)) + } + }); + } + +})(jQuery, window, document); From 27d1a7a8e5ee0687f92cc3b4750a8c397a0dced5 Mon Sep 17 00:00:00 2001 From: Guilherme Rv Coelho Date: Sun, 28 Dec 2014 13:36:55 -0200 Subject: [PATCH 2/3] Update ripples.js to double quotes --- scripts/ripples.js | 82 +++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 53710e07..7eb3280a 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -3,12 +3,12 @@ (function($, window, document, undefined) { - 'use strict'; + "use strict"; /** * Define the name of the plugin */ - var ripples = 'ripples'; + var ripples = "ripples"; /** @@ -46,28 +46,28 @@ Ripples.prototype.init = function() { var $element = this.element; - $element.on('mousedown touchstart', function(event) { + $element.on("mousedown touchstart", function(event) { /** * Verify if the user is just touching on a device and return if so */ - if(self.isTouch() && event.type === 'mousedown') { + if(self.isTouch() && event.type === "mousedown") { return false; } /** * Verify if the current element already has a ripple wrapper element and - * creates if it doesn't + * creates if it doesn"t */ - if(!($element.find('.ripple-wrapper').length)) { - $element.append('
'); + if(!($element.find(".ripple-wrapper").length)) { + $element.append("
"); } /** * Find the ripple wrapper */ - var $wrapper = $element.find('.ripple-wrapper'); + var $wrapper = $element.find(".ripple-wrapper"); /** @@ -94,14 +94,14 @@ /** * Create the ripple element */ - var $ripple = $('
'); + var $ripple = $("
"); $ripple - .addClass('ripple') + .addClass("ripple") .css({ - 'left': relX, - 'top': relY, - 'background-color': rippleColor + "left": relX, + "top": relY, + "background-color": rippleColor }); @@ -124,7 +124,7 @@ /** - * Call the rippleEnd function when the transition 'on' ends + * Call the rippleEnd function when the transition "on" ends */ setTimeout(function() { self.rippleEnd($ripple) @@ -134,10 +134,10 @@ /** * Detect when the user leaves the element */ - $element.on('mouseup mouseleave touchend', function() { - $ripple.data('mousedown', 'off'); + $element.on("mouseup mouseleave touchend", function() { + $ripple.data("mousedown", "off"); - if($ripple.data('animating') === 'off') { + if($ripple.data("animating") === "off") { self.rippleOut($ripple); } }); @@ -161,7 +161,7 @@ */ Ripples.prototype.getRelX = function(event) { var $element = this.element; - var wrapperOffset = $element.find('.ripple-wrapper').offset(); + var wrapperOffset = $element.find(".ripple-wrapper").offset(); if(!self.isTouch()) { /** @@ -189,7 +189,7 @@ */ Ripples.prototype.getRelY = function(event) { var $element = this.element; - var wrapperOffset = $element.find('.ripple-wrapper').offset(); + var wrapperOffset = $element.find(".ripple-wrapper").offset(); if(!self.isTouch()) { /** @@ -218,7 +218,7 @@ Ripples.prototype.getRippleColor = function() { var $element = this.element; - var color = $element.data("ripple-color") ? $element.data('ripple-color') : window.getComputedStyle($element[0]).color; + var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color; return color; }; @@ -255,9 +255,9 @@ * End the animation of the ripple */ Ripples.prototype.rippleEnd = function($ripple) { - $ripple.data('animating', 'off'); + $ripple.data("animating", "off"); - if($ripple.data('mousedown') === 'off') { + if($ripple.data("mousedown") === "off") { self.rippleOut($ripple); } } @@ -270,14 +270,14 @@ $ripple.off(); if(self.hasTransitionSupport()) { - $ripple.addClass('ripple-out'); + $ripple.addClass("ripple-out"); } else { - $ripple.animate({'opacity': 0}, 100, function() { - $ripple.trigger('transitionend'); + $ripple.animate({"opacity": 0}, 100, function() { + $ripple.trigger("transitionend"); }); } - $ripple.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { + $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { $ripple.remove(); }); }; @@ -293,23 +293,23 @@ if(self.hasTransitionSupport()) { $ripple .css({ - '-ms-transform': 'scale(' + size + ')', - '-moz-transform': 'scale(' + size + ')', - '-webkit-transform': 'scale(' + size + ')', - 'transform': 'scale(' + size + ')' + "-ms-transform": "scale(" + size + ")", + "-moz-transform": "scale(" + size + ")", + "-webkit-transform": "scale(" + size + ")", + "transform": "scale(" + size + ")" }) - .addClass('ripple-on') - .data('animating', 'on') - .data('mousedown', 'on'); + .addClass("ripple-on") + .data("animating", "on") + .data("mousedown", "on"); } else { $ripple.animate({ - 'width': Math.max($element.outerWidth(), $element.outerHeight()) * 2, - 'height': Math.max($element.outerWidth(), $element.outerHeight()) * 2, - 'margin-left': Math.max($element.outerWidth(), $element.outerHeight()) * (-1), - 'margin-top': Math.max($element.outerWidth(), $element.outerHeight()) * (-1), - 'opacity': 0.2 + "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2, + "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2, + "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), + "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1), + "opacity": 0.2 }, 500, function() { - $ripple.trigger('transitionend'); + $ripple.trigger("transitionend"); }); } }; @@ -320,8 +320,8 @@ */ $.fn.ripples = function(options) { return this.each(function() { - if(!$.data(this, 'plugin_' + ripples)) { - $.data(this, 'plugin_' + ripples, new Ripples(this, options)) + if(!$.data(this, "plugin_" + ripples)) { + $.data(this, "plugin_" + ripples, new Ripples(this, options)) } }); } From 789d3517dbf26d72e0696dca4292111f2ebd0986 Mon Sep 17 00:00:00 2001 From: Guilherme Rv Coelho Date: Sun, 28 Dec 2014 13:52:06 -0200 Subject: [PATCH 3/3] Update ripples.js to pass travis validation --- scripts/ripples.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/scripts/ripples.js b/scripts/ripples.js index 7eb3280a..d9ea87a6 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -127,7 +127,7 @@ * Call the rippleEnd function when the transition "on" ends */ setTimeout(function() { - self.rippleEnd($ripple) + self.rippleEnd($ripple); }, 500); @@ -181,7 +181,7 @@ return false; } - } + }; /** @@ -209,7 +209,7 @@ return false; } - } + }; /** @@ -260,7 +260,7 @@ if($ripple.data("mousedown") === "off") { self.rippleOut($ripple); } - } + }; /** @@ -321,9 +321,9 @@ $.fn.ripples = function(options) { return this.each(function() { if(!$.data(this, "plugin_" + ripples)) { - $.data(this, "plugin_" + ripples, new Ripples(this, options)) + $.data(this, "plugin_" + ripples, new Ripples(this, options)); } }); - } + }; })(jQuery, window, document);