mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-19 05:00:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update ripples.js to double quotes

Browse Source
This commit is contained in:
Guilherme Rv Coelho 2014-12-28 13:36:55 -02:00
parent 0de9d60e30
commit 27d1a7a8e5
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
scripts/ripples.js
View File

@ -3,12 +3,12 @@
(function($, window, document, undefined) { (function($, window, document, undefined) {
'use strict'; "use strict";
/** /**
* Define the name of the plugin * Define the name of the plugin
*/ */
var ripples = 'ripples'; var ripples = "ripples";
/** /**
@ -46,28 +46,28 @@
Ripples.prototype.init = function() { Ripples.prototype.init = function() {
var $element = this.element; 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 * 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; return false;
} }
/** /**
* Verify if the current element already has a ripple wrapper element and * 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)) { if(!($element.find(".ripple-wrapper").length)) {
$element.append('<div class="ripple-wrapper"></div>'); $element.append("<div class=\"ripple-wrapper\"></div>");
} }
/** /**
* Find the ripple wrapper * Find the ripple wrapper
*/ */
var $wrapper = $element.find('.ripple-wrapper'); var $wrapper = $element.find(".ripple-wrapper");
/** /**
@ -94,14 +94,14 @@
/** /**
* Create the ripple element * Create the ripple element
*/ */
var $ripple = $('<div></div>'); var $ripple = $("<div></div>");
$ripple $ripple
.addClass('ripple') .addClass("ripple")
.css({ .css({
'left': relX, "left": relX,
'top': relY, "top": relY,
'background-color': rippleColor "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() { setTimeout(function() {
self.rippleEnd($ripple) self.rippleEnd($ripple)
@ -134,10 +134,10 @@
/** /**
* Detect when the user leaves the element * Detect when the user leaves the element
*/ */
$element.on('mouseup mouseleave touchend', function() { $element.on("mouseup mouseleave touchend", function() {
$ripple.data('mousedown', 'off'); $ripple.data("mousedown", "off");
if($ripple.data('animating') === 'off') { if($ripple.data("animating") === "off") {
self.rippleOut($ripple); self.rippleOut($ripple);
} }
}); });
@ -161,7 +161,7 @@
*/ */
Ripples.prototype.getRelX = function(event) { Ripples.prototype.getRelX = function(event) {
var $element = this.element; var $element = this.element;
var wrapperOffset = $element.find('.ripple-wrapper').offset(); var wrapperOffset = $element.find(".ripple-wrapper").offset();
if(!self.isTouch()) { if(!self.isTouch()) {
/** /**
@ -189,7 +189,7 @@
*/ */
Ripples.prototype.getRelY = function(event) { Ripples.prototype.getRelY = function(event) {
var $element = this.element; var $element = this.element;
var wrapperOffset = $element.find('.ripple-wrapper').offset(); var wrapperOffset = $element.find(".ripple-wrapper").offset();
if(!self.isTouch()) { if(!self.isTouch()) {
/** /**
@ -218,7 +218,7 @@
Ripples.prototype.getRippleColor = function() { Ripples.prototype.getRippleColor = function() {
var $element = this.element; 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; return color;
}; };
@ -255,9 +255,9 @@
* End the animation of the ripple * End the animation of the ripple
*/ */
Ripples.prototype.rippleEnd = function($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); self.rippleOut($ripple);
} }
} }
@ -270,14 +270,14 @@
$ripple.off(); $ripple.off();
if(self.hasTransitionSupport()) { if(self.hasTransitionSupport()) {
$ripple.addClass('ripple-out'); $ripple.addClass("ripple-out");
} else { } else {
$ripple.animate({'opacity': 0}, 100, function() { $ripple.animate({"opacity": 0}, 100, function() {
$ripple.trigger('transitionend'); $ripple.trigger("transitionend");
}); });
} }
$ripple.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$ripple.remove(); $ripple.remove();
}); });
}; };
@ -293,23 +293,23 @@
if(self.hasTransitionSupport()) { if(self.hasTransitionSupport()) {
$ripple $ripple
.css({ .css({
'-ms-transform': 'scale(' + size + ')', "-ms-transform": "scale(" + size + ")",
'-moz-transform': 'scale(' + size + ')', "-moz-transform": "scale(" + size + ")",
'-webkit-transform': 'scale(' + size + ')', "-webkit-transform": "scale(" + size + ")",
'transform': 'scale(' + size + ')' "transform": "scale(" + size + ")"
}) })
.addClass('ripple-on') .addClass("ripple-on")
.data('animating', 'on') .data("animating", "on")
.data('mousedown', 'on'); .data("mousedown", "on");
} else { } else {
$ripple.animate({ $ripple.animate({
'width': Math.max($element.outerWidth(), $element.outerHeight()) * 2, "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
'height': 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-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
'margin-top': Math.max($element.outerWidth(), $element.outerHeight()) * (-1), "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
'opacity': 0.2 "opacity": 0.2
}, 500, function() { }, 500, function() {
$ripple.trigger('transitionend'); $ripple.trigger("transitionend");
}); });
} }
}; };
@ -320,8 +320,8 @@
*/ */
$.fn.ripples = function(options) { $.fn.ripples = function(options) {
return this.each(function() { return this.each(function() {
if(!$.data(this, 'plugin_' + ripples)) { if(!$.data(this, "plugin_" + ripples)) {
$.data(this, 'plugin_' + ripples, new Ripples(this, options)) $.data(this, "plugin_" + ripples, new Ripples(this, options))
} }
}); });
} }