❤
npm
Sign UpSign In

This package has been deprecated

Author message:

There are far better solutions available.

inkr

0.1.3 • Public • Published

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 inkr

Usage

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 
$ yarn

And then run the NPM build script:

$ npm run build
# or 
$ yarn build

This will lint, bundle, and minify Inkr, and then output it in dist/.

Readme

Keywords

Package Sidebar

Install

npm i inkr

Repository

github.com/Ovyerus/inkr

Homepage

github.com/Ovyerus/inkr#readme

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

53.3 kB

Total Files

11

Last publish

Collaborators

  • ovyerus
Try on RunKit
Report malware