inkr v0.1.3
inkr
Inkr is a (yet another) Material Design ink ripples script for HTML.
(This project is essentially a pure-JS port of legitRipple, with some extra stuff added in.)
Browser Support
Inkr is known to support the following browsers:
- Firefox
- Chrome/Chromium
- Safari
These ratings are all based off the bundled version.
If you want to report another browser Inkr works in, feel free to open an issue stating which browser (and version).
Inkr will not support Internet Explorer or any archaically outdated browser. Ever.
Installation
In HTML
<html>
<head>
<!-- ... -->
<!-- This isn't needed if using a bundled version of inkr, as it will auto-inject its CSS.-->
<style rel="stylesheet" href="inkr.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="inkr.js"></script>
</body>
</html>Though NPM
$ npm install inkr
# or
$ yarn add inkrUsage
If you don't like supidly worded and confusing examples, you can see the pure API docs here.
Basic
The simplest usage of Inkr is done by just passing stuff to inkr().
This can either be a query selector, an element, or a mixed array of query selectors and elements.
Query Selector
inkr('.cool-class');Element
inkr(document.getElementById('my-very-special-element'));Mixed List of Both
let arrayOfCoolStuff = ['.cool-class', document.getElementById('very-cool-id'), document.getElementsByClassName('very-cool-elements')];
// Inkr shallow flattens arrays as a result of being able to take in a list of query selectors.
inkr(arrayOfCoolStuff);You can also pass various options as listed here, to Inkr through the second argument.
inkr('.cool-class', {
maxDiameter: '250px'
});Automatic Application
If the script tag importing Inkr does not have the data-no-init attribute, Inkr will automatically find any elements that have the inkr class, and apply itself to them. It will also watch the DOM for future additions of elements with the inkr class.
If you've disabled auto init of Inkr with the attribute, you can use inkr.autoInit to apply Inkr to elements of your choosing (defaulting to any with the inkr class), and then have it watch the DOM and automatically apply Inkr to any dynamically added/edited elements that get the inkr class.
In the future you may be able to specify a selector to pass to inkr.watchDOM however it is currently not implemented. (You can always pull request it of course 😉)
<!--Disables auto application of inkr-->
<script src="inkr.js" data-no-init></script>
<script>
let el = document.createElement('div');
el.classList.add('inkr');
el.classList.add('my-fancy-class');
inkr.autoInit('.my-elements');
document.body.appendChild(el);
</script>You can also make Inkr not automatically watch for DOM updates by adding {watchDOM: false} as the second argument to inkr.autoInit(). Extra options get passed as {options: {...}} in the second argmument.
let el = document.createElement('div');
el.classList.add('inkr');
inkr.autoInit('.my-elements', {watchDOM: false});
document.body.appendChild(el); // Won't get Inkr applied to it.And if you've already ran Inkr on elements you want, and you wish to watch the DOM, you can call inkr.watchDOM by yourself.
inkr.watchDOM({
maxDiameter: '250px';
...
});Removing
If you need to remove Inkr from elements, you can call inkr.destroy (aliased to inkr.remove) with a set of elements you wish to remove it from (same style as when applying Inkr). If you don't give it any elements, it'll default to removing it from all elements that have had Inkr applied to it, that is, any elements with the data-isinked attribute, which is automatically applied by Inkr.
inkr.destroy();
// or
inkr.destroy('.my-cool-elements');Building
Since Inkr uses ES6 syntax and ES6 modules, you'll need to build it in order to use it properly on most browsers. To do this, all you gotta do is:
Install the dependencies: (these are just dev dependencies as the main library doesn't actually need these)
$ npm install
# or
$ yarnAnd then run the NPM build script:
$ npm run build
# or
$ yarn buildThis will lint, bundle, and minify Inkr, and then output it in dist/.