rotator-js

A simple plugin to manage element rotations.

Usage no npm install needed!

<script type="module">
  import rotatorJs from 'https://cdn.skypack.dev/rotator-js';
</script>

README

Rotator for JavaScript

npm

A simple plugin to manage element rotations.

Installation

Yarn

$ yarn add rotator-js

NPM

$ npm install rotator-js

Usage

  1. Say you have the <img> that you want to rotate

    <img href="cat.png" id="my-image">

    You can use any HTML tag element that can accept the style attribute, not just the <img>s!

  2. In order to rotate it, you'll need 2 buttons (clockwise & anticlockwise) with ids prepended with the same id as your <img> element

    <button id="my-image-anticlockwise-button">Anticlockwise Button</button>
<button id="my-image-clockwise-button">Clockwise Button</button>

  3. After the page loads, require and create a new ImageRotator instance while passing your image's id

    var Rotator = require("rotator-js");
var rotator = new Rotator(["my-image"]);

    You can also setup multiple elements to be rotated at once by passing multiple element ids!

  4. Call configure() to configure the buttons to rotate the given elements.

    rotator.configure();

  5. That's all!

Now, the HTML element(s) whose id(s) was passed to Rotator, will be rotated clockwise/counter-clockwise when their corresponding buttons are clicked, respectively.

Limitations

Rotations are currently limited to 90° (clockwise) or -90° (counter-clockwise) per rotation.

Contributing

We'd love to accept your patches and contributions to this project! Checkout contributing and code of conduct to learn more.

License

Refer to the license file.