Add ability to define settings

[atomiks]

Firstly, nice little library!

I'd like to define my own settings to modify the ripple. If you don't want users to use a constructor/call a factory, then perhaps use data-* attributes on the element you specify the rippleJS class name.

The main settings I'd like is

• duration
• ability to bind the event directly to the element. The problem with using event delegation is that sometimes you have inner elements which are the targets of the mousedown event but still want to trigger the ripple on the parent, so the ripple won't work.

[samthor]

Thanks, glad you like it.

my 2c: data-duration sounds painful if a user has to set it on every element, but I'm loathe to have it as a global on window or something. So I'll think.

Your second ask—can you clarify, you mean you want a click on one element to trigger a ripple on another? (I can see cases where e.g., the inner thing has layout but you want an outer thing to ripple).

[atomiks]

Okay, cool

<div class="outer rippleJS">
    <span>text</span>
</div>

If I click the span element, I still want the ripple to be activated since it's a child of the outer element

[cpamp]

@atomiks I don't think this is an issue. The following should give you your desired effect.

<div class="outer">
    <span>text</span>
    <div class="rippleJS"></div>
</div>

[cpamp]

@atomiks For your first issue on params, I have a fork which adds 2 attributes for color and duration. I also added additional ways to identify elements that should ripple that is less confusing and verbose

<div class="bar square" ripplejs ripplejs-color="blue" ripplejs-duration="2000ms" ripplejs-fill>
  My Content
</div>

<div class="bar square">
    <span>Clickable</span>
    <div class="rippleJS" data-ripplejs-color="red" data-ripplejs-duration="1s" data-ripplejs-fill></div>
</div>