https://fbrss.com/files/js/ripples.js

1/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
2/* globals jQuery, navigator */
3
4(function($, window, document, undefined) {
5
6  "use strict";
7
8  /**
9   * Define the name of the plugin
10   */
11  var ripples = "ripples";
12
13
14  /**
15   * Get an instance of the plugin
16   */
17  var self = null;
18
19
20  /**
21   * Define the defaults of the plugin
22   */
23  var defaults = {};
24
25
26  /**
27   * Create the main plugin function
28   */
29  function Ripples(element, options) {
30    self = this;
31
32    this.element = $(element);
33
34    this.options = $.extend({}, defaults, options);
35
36    this._defaults = defaults;
37    this._name = ripples;
38
39    this.init();
40  }
41
42
43  /**
44   * Initialize the plugin
45   */
46  Ripples.prototype.init = function() {
47    var $element  = this.element;
48
49    $element.on("mousedown touchstart", function(event) {
50      /**
51       * Verify if the user is just touching on a device and return if so
52       */
53      if(self.isTouch() && event.type === "mousedown") {
54        return false;
55      }
56
57
58      /**
59       * Verify if the current element already has a ripple wrapper element and
60       * creates if it doesn't
61       */
62      if(!($element.find(".ripple-wrapper").length)) {
63        $element.append("<div class=\"ripple-wrapper\"></div>");
64      }
65
66
67      /**
68       * Find the ripple wrapper
69       */
70      var $wrapper = $element.children(".ripple-wrapper");
71
72
73      /**
74       * Get relY and relX positions
75       */
76      var relY = self.getRelY($wrapper, event);
77      var relX = self.getRelX($wrapper, event);
78
79
80      /**
81       * If relY and/or relX are false, return the event
82       */
83      if(!relY && !relX) {
84        return;
85      }
86
87
88      /**
89       * Get the ripple color
90       */
91      var rippleColor = self.getRipplesColor($element);
92
93
94      /**
95       * Create the ripple element
96       */
97      var $ripple = $("<div></div>");
98
99      $ripple
100      .addClass("ripple")
101      .css({
102        "left": relX,
103        "top": relY,
104        "background-color": rippleColor
105      });
106
107
108      /**
109       * Append the ripple to the wrapper
110       */
111      $wrapper.append($ripple);
112
113
114      /**
115       * Make sure the ripple has the styles applied (ugly hack but it works)
116       */
117      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
118
119
120      /**
121       * Turn on the ripple animation
122       */
123      self.rippleOn($element, $ripple);
124
125
126      /**
127       * Call the rippleEnd function when the transition "on" ends
128       */
129      setTimeout(function() {
130        self.rippleEnd($ripple);
131      }, 500);
132
133
134      /**
135       * Detect when the user leaves the element
136       */
137      $element.on("mouseup mouseleave touchend", function() {
138        $ripple.data("mousedown", "off");
139
140        if($ripple.data("animating") === "off") {
141          self.rippleOut($ripple);
142        }
143      });
144
145    });
146  };
147
148
149  /**
150   * Get the new size based on the element height/width and the ripple width
151   */
152  Ripples.prototype.getNewSize = function($element, $ripple) {
153
154    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
155  };
156
157
158  /**
159   * Get the relX
160   */
161  Ripples.prototype.getRelX = function($wrapper,  event) {
162    var wrapperOffset = $wrapper.offset();
163
164    if(!self.isTouch()) {
165      /**
166       * Get the mouse position relative to the ripple wrapper
167       */
168      return event.pageX - wrapperOffset.left;
169    } else {
170      /**
171       * Make sure the user is using only one finger and then get the touch
172       * position relative to the ripple wrapper
173       */
174      event = event.originalEvent;
175
176      if(event.touches.length !== 1) {
177        return event.touches[0].pageX - wrapperOffset.left;
178      }
179
180      return false;
181    }
182  };
183
184
185  /**
186   * Get the relY
187   */
188  Ripples.prototype.getRelY = function($wrapper, event) {
189    var wrapperOffset = $wrapper.offset();
190
191    if(!self.isTouch()) {
192      /**
193       * Get the mouse position relative to the ripple wrapper
194       */
195      return event.pageY - wrapperOffset.top;
196    } else {
197      /**
198       * Make sure the user is using only one finger and then get the touch
199       * position relative to the ripple wrapper
200       */
201      event = event.originalEvent;
202
203      if(event.touches.length !== 1) {
204        return event.touches[0].pageY - wrapperOffset.top;
205      }
206
207      return false;

208    }
209  };
210
211
212  /**
213   * Get the ripple color
214   */
215  Ripples.prototype.getRipplesColor = function($element) {
216
217    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
218
219    return color;
220  };
221
222
223  /**
224   * Verify if the client browser has transistion support
225   */
226  Ripples.prototype.hasTransitionSupport = function() {
227    var thisBody  = document.body || document.documentElement;
228    var thisStyle = thisBody.style;
229
230    var support = (
231      thisStyle.transition !== undefined ||
232      thisStyle.WebkitTransition !== undefined ||
233      thisStyle.MozTransition !== undefined ||
234      thisStyle.MsTransition !== undefined ||
235      thisStyle.OTransition !== undefined
236    );
237
238    return support;
239  };
240
241
242  /**
243   * Verify if the client is using a mobile device
244   */
245  Ripples.prototype.isTouch = function() {
246    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
247  };
248
249
250  /**
251   * End the animation of the ripple
252   */
253  Ripples.prototype.rippleEnd = function($ripple) {
254    $ripple.data("animating", "off");
255
256    if($ripple.data("mousedown") === "off") {
257      self.rippleOut($ripple);
258    }
259  };
260
261
262  /**
263   * Turn off the ripple effect
264   */
265  Ripples.prototype.rippleOut = function($ripple) {
266    $ripple.off();
267
268    if(self.hasTransitionSupport()) {
269      $ripple.addClass("ripple-out");
270    } else {
271      $ripple.animate({"opacity": 0}, 100, function() {
272        $ripple.trigger("transitionend");
273      });
274    }
275
276    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
277      $ripple.remove();
278    });
279  };
280
281
282  /**
283   * Turn on the ripple effect
284   */
285  Ripples.prototype.rippleOn = function($element, $ripple) {
286    var size = self.getNewSize($element, $ripple);
287
288    if(self.hasTransitionSupport()) {
289      $ripple
290      .css({
291        "-ms-transform": "scale(" + size + ")",
292        "-moz-transform": "scale(" + size + ")",
293        "-webkit-transform": "scale(" + size + ")",
294        "transform": "scale(" + size + ")"
295      })
296      .addClass("ripple-on")
297      .data("animating", "on")
298      .data("mousedown", "on");
299    } else {
300      $ripple.animate({
301        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
302        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
303        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
304        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
305        "opacity": 0.2
306      }, 500, function() {
307        $ripple.trigger("transitionend");
308      });
309    }
310  };
311
312
313  /**
314   * Create the jquery plugin function
315   */
316  $.fn.ripples = function(options) {
317    return this.each(function() {
318      if(!$.data(this, "plugin_" + ripples)) {
319        $.data(this, "plugin_" + ripples, new Ripples(this, options));
320      }
321    });
322  };
323
324})(jQuery, window, document);