https://github.com/pakej/rotator-js

A simple plugin to manage element rotations.
https://github.com/pakej/rotator-js

element image javascript rotation rotator

Last synced: about 1 month ago
JSON representation

A simple plugin to manage element rotations.

• Host: GitHub
• URL: https://github.com/pakej/rotator-js
• Owner: pakej
• License: apache-2.0
• Created: 2016-10-23T18:42:35.000Z (about 8 years ago)
• Default Branch: develop
• Last Pushed: 2019-12-13T14:50:09.000Z (about 5 years ago)
• Last Synced: 2024-10-16T03:31:36.636Z (2 months ago)
• Topics: element, image, javascript, rotation, rotator
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Rotator for JavaScript

![npm](https://img.shields.io/npm/v/rotator-js)

A simple plugin to manage element rotations.

## Installation

###  Yarn

```bash

$ yarn add rotator-js

```

###  NPM

```bash

$ npm install rotator-js

```

## Usage

1. Say you have the `` that you want to rotate

    ```html

    

    ```

    _You can use any HTML tag element that can accept the `style` attribute, not just the ``s!_

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

    ```html

    Anticlockwise Button

    Clockwise Button

    ```

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

    ```javascript

    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 `id`s!_

1. Call `configure()` to configure the buttons to rotate the given elements.

    ```javascript

    rotator.configure();

    ```

1. 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](CONTRIBUTING.md) and [code of conduct](CODE_OF_CONDUCT.md) to learn more.

## License

Refer to the license file.