Dependency-free Material Design ripple effect for the web, that wouldn't interfere your elements' DOM.
$ npm install proper-ripple --save-dev
$ yarn add proper-ripple
Make sure to include it in your webpack (npm/yarn usage) (uses babel-loader with es-2015 preset & css-loader)
This is how you can tell Ripple.js to watch any element matching a selector (including dynamically added)
ripple.watch('#demo-2 button')
This is how you can add a listener to an element \ array of elements (DOM nodes)
var yourElement = document.querySelector('.login-button')
var manyNodes = document.querySelectorAll('button')
ripple.bindTo(yourElement) //will trigger on your element
ripple.bindTo(manyNodes) //will trigger on any of these
This is how you can remove all listeners (rippleBind is the same for ripple.bindTo)
var rippleBind = ripple.watch('#demo-2 button')
rippleBind.remove()
{
color: "#fafafa", //{string} background color (like in CSS)
opacity: 0.21, //{number} ripple max opacity (like in CSS)
borderRadius: 'auto', //auto -- copy target props OR {Srting} CSS prop value
borderWidth: 'auto', //auto -- copy target props OR {number} CSS prop value !IN PX!
zIndex: 999, //{number}
transitionDuration: 500, //{number} in ms
timingFunction: "cubic-bezier(.4,0`,.42,1)", //{string} transition timing function
constant: false //{bool} enlarging speed is constant on any element size
}
var rippleBind = ripple.watch('#demo-2 button')
rippleBind.factory.rippleProps = {
opacity: 0.41,
transitionDuration: 700,
} //it's a plain js object
rippleBind.factory.rippleProps.color = '#000'
var myProps = {
color: '#000',
opacity: 0.4,
transitionDuration: 700
}
ripple.watch('#demo-2 button', myProps)
ripple.bindTo(manyNodes, myProps)
ripple.setDefaults({
color: '#000',
opacity: 0.41,
transitionDuration: 700
})
There are 2 ways to run tests for Ripple.js 1) PhantomJS 2) Browser mocha tests
Test's specs files are the same, but for the sake of PhantomJS they must be written in ES5
Assuming you have all devDependencies installed
$ npm test
$ npm run test-browser