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

ripples passes eslint

Browse Source
This commit is contained in:
Kevin Ross 2015-11-30 15:47:47 -06:00
parent da332ed278
commit 3abd40f72a
2 changed files with 67 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/old/es6Template.js
View File

@ -116,7 +116,7 @@ const Foo = (($) => {
*/ */
$.fn[NAME] = Foo._jQueryInterface $.fn[NAME] = Foo._jQueryInterface
$.fn[NAME].Constructor = Foo $.fn[NAME].Constructor = Foo
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function() {
$.fn[NAME] = JQUERY_NO_CONFLICT $.fn[NAME] = JQUERY_NO_CONFLICT
return Foo._jQueryInterface return Foo._jQueryInterface
} }

197
js/src/ripples.js
View File

@ -1,4 +1,3 @@
// FIXME: convert to member variable use instead of passing around/finding?
const Ripples = (($) => { const Ripples = (($) => {
/** /**
@ -8,22 +7,9 @@ const Ripples = (($) => {
*/ */
const NAME = 'ripples' const NAME = 'ripples'
const DATA_KEY = `bmd.${NAME}` const DATA_KEY = `bmd.${NAME}`
// const EVENT_KEY = `.${DATA_KEY}`
// const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME] const JQUERY_NO_CONFLICT = $.fn[NAME]
const DEFAULT_OPTIONS = {} 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 * Class Definition
@ -34,106 +20,87 @@ const Ripples = (($) => {
constructor(element, options) { constructor(element, options) {
this._element = $(element) this._element = $(element)
this._options = $.extend({}, DEFAULT_OPTIONS, options) this._options = $.extend({}, DEFAULT_OPTIONS, options)
this._element.on("mousedown touchstart", this._createRipple) this._element.on("mousedown touchstart", this._onStartRipple)
}
// 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)
} }
dispose() { dispose() {
$.removeData(this._element, DATA_KEY) $.removeData(this._element, DATA_KEY)
this._element = null this._element = null
this._containerElement = null
this._rippleElement = null
this._options = null
} }
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// private // private
_createRipple(event) { _onStartRipple(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 (this.isTouch() && event.type === "mousedown") { if (this.isTouch() && event.type === "mousedown") {
return return
} }
// Verify if the current element already has a ripple wrapper element and creates if it doesn't // Find or create the ripple container element
if (!(this._element.find(".ripple-container").length)) { this._findOrCreateContainer()
this._element.append("<div class='ripple-container'></div>")
}
// Find the ripple wrapper // Get relY and relX positions of the container element
let containerElement = this._element.children(".ripple-container") let relY = this._getRelY(event)
let relX = this._getRelX(event)
// Get relY and relX positions
let relY = this._getRelY(containerElement, event)
let relX = this._getRelX(containerElement, event)
// If relY and/or relX are false, return the event // If relY and/or relX are false, return the event
if (!relY && !relX) { if (!relY && !relX) {
return return
} }
// Get the ripple color // set the location and color each time (even if element is cached)
let rippleColor = this._getRipplesColor(this._element) this._rippleElement.addClass("ripple").css({
// Create the ripple element
let rippleElement = $("<div></div>")
rippleElement.addClass("ripple").css(`left: ${relX}; top: ${relY}; background-color: ${rippleColor}`)
/* https://github.com/eslint/eslint/issues/4579
rippleElement.addClass("ripple").css({
"left": relX, "left": relX,
"top": relY, "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) // 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 // Turn on the ripple animation
this.rippleOn(this._element, rippleElement) this.rippleOn()
// Call the rippleEnd function when the transition "on" ends // Call the rippleEnd function when the transition "on" ends
setTimeout(() => { setTimeout(() => {
this.rippleEnd(rippleElement) this.rippleEnd()
}, 500) }, 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", () => { this._element.on("mouseup mouseleave touchend", () => {
rippleElement.data("mousedown", "off") this._rippleElement.data("mousedown", "off")
if (rippleElement.data("animating") === "off") { if (this._rippleElement.data("animating") === "off") {
this.rippleOut(rippleElement) this.rippleOut()
} }
}) })
} }
_findOrCreateContainer() {
if (!this._containerElement || !this._containerElement.length > 0) {
this._element.append("<div class='ripple-container'><div class='ripple'></div></div>")
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 * Get the relX
*/ */
_getRelX(containerElement, event) { _getRelX(event) {
let wrapperOffset = containerElement.offset() let wrapperOffset = this._containerElement.offset()
let result = null let result = null
if (!this.isTouch()) { if (!this.isTouch()) {
@ -154,19 +121,18 @@ const Ripples = (($) => {
return result return result
} }
/** /**
* Get the relY * Get the relY
*/ */
_getRelY(containerElement, event) { _getRelY(event) {
let wrapperOffset = containerElement.offset() let containerOffset = this._containerElement.offset()
let result = null let result = null
if (!this.isTouch()) { if (!this.isTouch()) {
/** /**
* Get the mouse position relative to the ripple wrapper * Get the mouse position relative to the ripple wrapper
*/ */
result = event.pageY - wrapperOffset.top result = event.pageY - containerOffset.top
} else { } else {
/** /**
* Make sure the user is using only one finger and then get the touch * Make sure the user is using only one finger and then get the touch
@ -175,7 +141,7 @@ const Ripples = (($) => {
event = event.originalEvent event = event.originalEvent
if (event.touches.length === 1) { if (event.touches.length === 1) {
result = event.touches[0].pageY - wrapperOffset.top result = event.touches[0].pageY - containerOffset.top
} else { } else {
result = false result = false
} }
@ -184,16 +150,14 @@ const Ripples = (($) => {
return result return result
} }
/** /**
* Get the ripple color * Get the ripple color
*/ */
_getRipplesColor(element) { _getRipplesColor() {
let color = element.data("ripple-color") ? element.data("ripple-color") : window.getComputedStyle(element[0]).color let color = this._element.data("ripple-color") ? this._element.data("ripple-color") : window.getComputedStyle(this._element[0]).color
return color return color
} }
/** /**
* Verify if the client browser has transistion support * Verify if the client browser has transistion support
*/ */
@ -212,7 +176,6 @@ const Ripples = (($) => {
return support return support
} }
/** /**
* Verify if the client is using a mobile device * 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) return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
} }
/** /**
* End the animation of the ripple * End the animation of the ripple
*/ */
rippleEnd(rippleElement) { rippleEnd() {
rippleElement.data("animating", "off") this._rippleElement.data("animating", "off")
if (rippleElement.data("mousedown") === "off") { if (this._rippleElement.data("mousedown") === "off") {
this.rippleOut(rippleElement) this.rippleOut(this._rippleElement)
} }
} }
/** /**
* Turn off the ripple effect * Turn off the ripple effect
*/ */
rippleOut(rippleElement) { rippleOut() {
rippleElement.off() this._rippleElement.off()
if (this._hasTransitionSupport()) { if (this._hasTransitionSupport()) {
rippleElement.addClass("ripple-out") this._rippleElement.addClass("ripple-out")
} else { } else {
rippleElement.animate({ "opacity": 0 }, 100, () => { this._rippleElement.animate({ "opacity": 0 }, 100, () => {
rippleElement.trigger("transitionend") this._rippleElement.trigger("transitionend")
}) })
} }
rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => { this._rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
rippleElement.remove() this._rippleElement.remove()
}) })
} }
/** /**
* Turn on the ripple effect * Turn on the ripple effect
*/ */
rippleOn(element, rippleElement) { rippleOn() {
let size = this._getNewSize(element, rippleElement) let size = this._getNewSize()
if (this._hasTransitionSupport()) { if (this._hasTransitionSupport()) {
rippleElement this._rippleElement
.css({ .css({
"-ms-transform": `scale(${size})`, "-ms-transform": `scale(${size})`,
"-moz-transform": `scale(${size})`, "-moz-transform": `scale(${size})`,
@ -271,28 +231,27 @@ const Ripples = (($) => {
.data("animating", "on") .data("animating", "on")
.data("mousedown", "on") .data("mousedown", "on")
} else { } else {
rippleElement.animate({ this._rippleElement.animate({
"width": Math.max(element.outerWidth(), element.outerHeight()) * 2, "width": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2,
"height": Math.max(element.outerWidth(), element.outerHeight()) * 2, "height": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2,
"margin-left": Math.max(element.outerWidth(), element.outerHeight()) * (-1), "margin-left": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1),
"margin-top": Math.max(element.outerWidth(), element.outerHeight()) * (-1), "margin-top": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1),
"opacity": 0.2 "opacity": 0.2
}, 500, () => { }, 500, () => {
rippleElement.trigger("transitionend") this._rippleElement.trigger("transitionend")
}) })
} }
} }
// ------------------------------------------------------------------------
// static
/** /**
* Get the new size based on the element height/width and the ripple width * Get the new size based on the element height/width and the ripple width
*/ */
static _getNewSize(element, rippleElement) { _getNewSize() {
return (Math.max(element.outerWidth(), element.outerHeight()) / rippleElement.outerWidth()) * 2.5 return (Math.max(this._element.outerWidth(), this._element.outerHeight()) / this._rippleElement.outerWidth()) * 2.5
} }
// ------------------------------------------------------------------------
// static
static _jQueryInterface(options) { static _jQueryInterface(options) {
return this.each(() => { 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 * jQuery