rotator-js

2.0.1 • Public • Published

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.

Package Sidebar

Install

npm i rotator-js

Weekly Downloads

3

Version

2.0.1

License

Apache 2.0

Unpacked Size

21.7 kB

Total Files

7

Last publish

Collaborators

  • zaimramlan