From 3abd40f72ae13acad595ab3df6a4ec67322b1776 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Mon, 30 Nov 2015 15:47:47 -0600 Subject: [PATCH] ripples passes eslint --- js/src/old/es6Template.js | 2 +- js/src/ripples.js | 197 +++++++++++++------------------------- 2 files changed, 67 insertions(+), 132 deletions(-) diff --git a/js/src/old/es6Template.js b/js/src/old/es6Template.js index 9e09b326..f59ec092 100644 --- a/js/src/old/es6Template.js +++ b/js/src/old/es6Template.js @@ -116,7 +116,7 @@ const Foo = (($) => { */ $.fn[NAME] = Foo._jQueryInterface $.fn[NAME].Constructor = Foo - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function() { $.fn[NAME] = JQUERY_NO_CONFLICT return Foo._jQueryInterface } diff --git a/js/src/ripples.js b/js/src/ripples.js index 97b5f05a..1c3ff9a2 100644 --- a/js/src/ripples.js +++ b/js/src/ripples.js @@ -1,4 +1,3 @@ -// FIXME: convert to member variable use instead of passing around/finding? const Ripples = (($) => { /** @@ -8,22 +7,9 @@ const Ripples = (($) => { */ const NAME = 'ripples' const DATA_KEY = `bmd.${NAME}` - // const EVENT_KEY = `.${DATA_KEY}` - // const DATA_API_KEY = '.data-api' const JQUERY_NO_CONFLICT = $.fn[NAME] const DEFAULT_OPTIONS = {} - // const Selector = { - // DATA_DISMISS: '[data-dismiss="ripples"]' - // } - // - // const Event = { - // CLOSE: `close${EVENT_KEY}`, - // CLOSED: `closed${EVENT_KEY}`, - // CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` - // } - - /** * ------------------------------------------------------------------------ * Class Definition @@ -34,106 +20,87 @@ const Ripples = (($) => { constructor(element, options) { this._element = $(element) this._options = $.extend({}, DEFAULT_OPTIONS, options) - this._element.on("mousedown touchstart", this._createRipple) - } - - // getters - static get NAME() { - return NAME - } - - // public - close(element) { - element = element || this._element - - let rootElement = this._getRootElement(element) - let customEvent = this._triggerCloseEvent(rootElement) - - if (customEvent.isDefaultPrevented()) { - return - } - - this._removeElement(rootElement) + this._element.on("mousedown touchstart", this._onStartRipple) } dispose() { $.removeData(this._element, DATA_KEY) this._element = null + this._containerElement = null + this._rippleElement = null + this._options = null } - // ------------------------------------------------------------------------ // private - _createRipple(event) { + _onStartRipple(event) { // Verify if the user is just touching on a device and return if so if (this.isTouch() && event.type === "mousedown") { return } - // Verify if the current element already has a ripple wrapper element and creates if it doesn't - if (!(this._element.find(".ripple-container").length)) { - this._element.append("
") - } + // Find or create the ripple container element + this._findOrCreateContainer() - // Find the ripple wrapper - let containerElement = this._element.children(".ripple-container") - - // Get relY and relX positions - let relY = this._getRelY(containerElement, event) - let relX = this._getRelX(containerElement, event) + // Get relY and relX positions of the container element + let relY = this._getRelY(event) + let relX = this._getRelX(event) // If relY and/or relX are false, return the event if (!relY && !relX) { return } - // Get the ripple color - let rippleColor = this._getRipplesColor(this._element) - - // Create the ripple element - let rippleElement = $("
") - - rippleElement.addClass("ripple").css(`left: ${relX}; top: ${relY}; background-color: ${rippleColor}`) - /* https://github.com/eslint/eslint/issues/4579 - rippleElement.addClass("ripple").css({ + // set the location and color each time (even if element is cached) + this._rippleElement.addClass("ripple").css({ "left": relX, "top": relY, - "background-color": rippleColor + "background-color": this._getRipplesColor() }) - */ - - // Append the ripple to the wrapper - containerElement.append(rippleElement) // Make sure the ripple has the styles applied (ugly hack but it works) - (() => { return window.getComputedStyle(rippleElement[0]).opacity })() + this._forceStyleApplication() // Turn on the ripple animation - this.rippleOn(this._element, rippleElement) + this.rippleOn() // Call the rippleEnd function when the transition "on" ends setTimeout(() => { - this.rippleEnd(rippleElement) + this.rippleEnd() }, 500) - // Detect when the user leaves the element + // Detect when the user leaves the element (attach only when necessary for performance) this._element.on("mouseup mouseleave touchend", () => { - rippleElement.data("mousedown", "off") + this._rippleElement.data("mousedown", "off") - if (rippleElement.data("animating") === "off") { - this.rippleOut(rippleElement) + if (this._rippleElement.data("animating") === "off") { + this.rippleOut() } }) } + _findOrCreateContainer() { + if (!this._containerElement || !this._containerElement.length > 0) { + this._element.append("
") + this._containerElement = this._element.find(".ripple-container") + this._rippleElement = this._containerElement.find("div.ripple") + } + + return this._containerElement + } + + // Make sure the ripple has the styles applied (ugly hack but it works) + _forceStyleApplication() { + return window.getComputedStyle(this._rippleElement[0]).opacity + } /** * Get the relX */ - _getRelX(containerElement, event) { - let wrapperOffset = containerElement.offset() + _getRelX(event) { + let wrapperOffset = this._containerElement.offset() let result = null if (!this.isTouch()) { @@ -154,19 +121,18 @@ const Ripples = (($) => { return result } - /** * Get the relY */ - _getRelY(containerElement, event) { - let wrapperOffset = containerElement.offset() + _getRelY(event) { + let containerOffset = this._containerElement.offset() let result = null if (!this.isTouch()) { /** * Get the mouse position relative to the ripple wrapper */ - result = event.pageY - wrapperOffset.top + result = event.pageY - containerOffset.top } else { /** * Make sure the user is using only one finger and then get the touch @@ -175,7 +141,7 @@ const Ripples = (($) => { event = event.originalEvent if (event.touches.length === 1) { - result = event.touches[0].pageY - wrapperOffset.top + result = event.touches[0].pageY - containerOffset.top } else { result = false } @@ -184,16 +150,14 @@ const Ripples = (($) => { return result } - /** * Get the ripple color */ - _getRipplesColor(element) { - let color = element.data("ripple-color") ? element.data("ripple-color") : window.getComputedStyle(element[0]).color + _getRipplesColor() { + let color = this._element.data("ripple-color") ? this._element.data("ripple-color") : window.getComputedStyle(this._element[0]).color return color } - /** * Verify if the client browser has transistion support */ @@ -212,7 +176,6 @@ const Ripples = (($) => { return support } - /** * Verify if the client is using a mobile device */ @@ -220,47 +183,44 @@ const Ripples = (($) => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) } - /** * End the animation of the ripple */ - rippleEnd(rippleElement) { - rippleElement.data("animating", "off") + rippleEnd() { + this._rippleElement.data("animating", "off") - if (rippleElement.data("mousedown") === "off") { - this.rippleOut(rippleElement) + if (this._rippleElement.data("mousedown") === "off") { + this.rippleOut(this._rippleElement) } } - /** * Turn off the ripple effect */ - rippleOut(rippleElement) { - rippleElement.off() + rippleOut() { + this._rippleElement.off() if (this._hasTransitionSupport()) { - rippleElement.addClass("ripple-out") + this._rippleElement.addClass("ripple-out") } else { - rippleElement.animate({ "opacity": 0 }, 100, () => { - rippleElement.trigger("transitionend") + this._rippleElement.animate({ "opacity": 0 }, 100, () => { + this._rippleElement.trigger("transitionend") }) } - rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => { - rippleElement.remove() + this._rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => { + this._rippleElement.remove() }) } - /** * Turn on the ripple effect */ - rippleOn(element, rippleElement) { - let size = this._getNewSize(element, rippleElement) + rippleOn() { + let size = this._getNewSize() if (this._hasTransitionSupport()) { - rippleElement + this._rippleElement .css({ "-ms-transform": `scale(${size})`, "-moz-transform": `scale(${size})`, @@ -271,28 +231,27 @@ const Ripples = (($) => { .data("animating", "on") .data("mousedown", "on") } else { - rippleElement.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), + this._rippleElement.animate({ + "width": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2, + "height": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2, + "margin-left": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1), + "margin-top": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1), "opacity": 0.2 }, 500, () => { - rippleElement.trigger("transitionend") + this._rippleElement.trigger("transitionend") }) } } - - // ------------------------------------------------------------------------ - // static /** * Get the new size based on the element height/width and the ripple width */ - static _getNewSize(element, rippleElement) { - return (Math.max(element.outerWidth(), element.outerHeight()) / rippleElement.outerWidth()) * 2.5 + _getNewSize() { + return (Math.max(this._element.outerWidth(), this._element.outerHeight()) / this._rippleElement.outerWidth()) * 2.5 } + // ------------------------------------------------------------------------ + // static static _jQueryInterface(options) { return this.each(() => { @@ -305,32 +264,8 @@ const Ripples = (($) => { } }) } - - // static _handleClose(fooInstance) { - // return function(event) { - // if (event) { - // event.preventDefault() - // } - // - // fooInstance.close(this) - // } - // } } - - /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ - */ - - // $(document).on( - // Event.CLICK_DATA_API, - // Selector.DATA_DISMISS, - // Ripples._handleClose(new Ripples()) - // ) - - /** * ------------------------------------------------------------------------ * jQuery