Skip to content

A simple plugin to manage element rotations.

License

Notifications You must be signed in to change notification settings

pakej/rotator-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.