Various ripple effects

[djibe]

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/

• I want a dark ripple on every button.
• I want a light ripple on btn-primary, btn-secondary, btn-info, etc ...
• I want a customized colored ripple on each btn-outlined- and btn-flat-

How can I declare these in Javascript ?

I started with

ripplet.defaultOptions.color = 'rgba(0, 0, 0, 0.12)';

let buttonsRippleArr = document.querySelectorAll('.btn:not([disabled])');

buttonsRippleArr.forEach(function(elem) {
  elem.addEventListener('mousedown', ripplet);
});

But I don't know how to create custom declarations for various components.

Thanks for your help and impressive work.

[luncheon]

@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

[djibe]

Thx a lot for your answer. I'll investigate and close Issue ASAP.

[djibe]

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

[luncheon]

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

[djibe]

Perfect ! You are the best. Thx for Ripplet and your help.