Closed djibe closed 4 years ago
@djibe
Thank you for praising this library😄
But I don't know how to create custom declarations for various components.
window.addEventListener('mousedown', function(event) { ... })
handles all mousedown
events for which event.stopPropagation()
has not been called. (window.
can be omitted)
addEventListener('pointerdown', function (event) {
const cls = event.target.classList
if (event.button !== 0 || !cls.contains('btn') || event.target.disabled) {
return
}
const rippleTarget = {
currentTarget: event.target,
clientX: event.clientX,
clientY: event.clientY,
}
if (cls.contains('btn-link')) {
ripplet(rippleTarget, { color: 'rgba(255,255,255,.5)' })
} else if (
cls.contains('btn-outline-primary') ||
cls.contains('btn-outline-secondary') ||
cls.contains('btn-outline-danger') ||
cls.contains('btn-outline-info') ||
cls.contains('btn-outline-success') ||
cls.contains('btn-outline-warning') ||
cls.contains('btn-outline-dark') ||
cls.contains('btn-outline-light')
) {
ripplet(rippleTarget, { color: getComputedStyle(event.target).color, opacity: .2 })
} else {
ripplet(rippleTarget, { color: 'rgba(0,0,0,0.12)' })
}
})
CodePen:
https://codepen.io/luncheon/pen/VwvdyEd
It would be good to learn about event bubbling and capture.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Bubbling_and_capturing_explained
Thx a lot for your answer. I'll investigate and close Issue ASAP.
Your work is awesome and we are nearly there : https://codepen.io/djibe89/pen/oNjMjQx
However when click goes on icon, event is not triggered. Before I go take a MOOC of Ecmascript, how can I solve this (not only .material-icons but any element that could be in a button like svg, i, span)
Thanks a lot, I really appreciate your involvment. See you
OK, I know.
The target buttons can be searched with event.target.closest('.btn')
.
https://codepen.io/luncheon/pen/zYvLNvM
(IE does not support closest()
. See MDN for details.)
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Perfect ! You are the best. Thx for Ripplet and your help.
Hi, first of all, awesome work you did ! Far better than every other ripple library.
I am working on my Bootstrap buttons : https://djibe.github.io/material/docs/4.4/material/buttons/
How can I declare these in Javascript ?
I started with
But I don't know how to create custom declarations for various components.
Thanks for your help and impressive work.