Rotator for JavaScript

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.