mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 09:57:36 +03:00
ripples passes eslint
This commit is contained in:
Kevin Ross
parent
da332ed278
commit
3abd40f72a
|
|
@ -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("<div class='ripple-container'></div>")
|
||||
}
|
||||
// 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 = $("<div></div>")
|
||||
|
||||
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("<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
|
||||
*/
|
||||
_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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user