{"id":20841447,"url":"https://github.com/pakej/rotator-js","last_synced_at":"2026-06-04T17:31:03.482Z","repository":{"id":43629877,"uuid":"71722046","full_name":"pakej/rotator-js","owner":"pakej","description":"A simple plugin to manage element rotations.","archived":false,"fork":false,"pushed_at":"2019-12-13T14:50:09.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-10-16T03:31:36.636Z","etag":null,"topics":["element","image","javascript","rotation","rotator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pakej.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-23T18:42:35.000Z","updated_at":"2019-12-13T14:50:06.000Z","dependencies_parsed_at":"2022-07-08T22:30:19.031Z","dependency_job_id":null,"html_url":"https://github.com/pakej/rotator-js","commit_stats":null,"previous_names":["zaimramlan/npm-image-rotator-js"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakej%2Frotator-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakej%2Frotator-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakej%2Frotator-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pakej%2Frotator-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pakej","download_url":"https://codeload.github.com/pakej/rotator-js/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243197211,"owners_count":20251956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element","image","javascript","rotation","rotator"],"created_at":"2024-11-18T01:20:08.473Z","updated_at":"2025-03-12T10:21:38.276Z","avatar_url":"https://github.com/pakej.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rotator for JavaScript\n![npm](https://img.shields.io/npm/v/rotator-js)\n\nA simple plugin to manage element rotations.\n\n## Installation\n### \u003cimg src=\"https://avatars1.githubusercontent.com/u/22247014?s=200\u0026v=4\" width=\"20\" height=\"20\"\u003e Yarn\n```bash\n$ yarn add rotator-js\n```\n\n### \u003cimg src=\"https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/npm/npm.png\" width=\"20\" height=\"20\"\u003e NPM\n```bash\n$ npm install rotator-js\n```\n\n## Usage\n1. Say you have the `\u003cimg\u003e` that you want to rotate\n    ```html\n    \u003cimg href=\"cat.png\" id=\"my-image\"\u003e\n    ```\n    _\u003csmall\u003eYou can use any HTML tag element that can accept the `style` attribute, not just the `\u003cimg\u003e`s!\u003c/small\u003e_\n\n1. In order to rotate it, you'll need 2 buttons (clockwise \u0026 anticlockwise) with ids prepended with the same `id` as your `\u003cimg\u003e` element\n    ```html\n    \u003cbutton id=\"my-image-anticlockwise-button\"\u003eAnticlockwise Button\u003c/button\u003e\n    \u003cbutton id=\"my-image-clockwise-button\"\u003eClockwise Button\u003c/button\u003e\n    ```\n\n1. After the page loads, require and create a new ImageRotator instance while passing your image's `id`\n    ```javascript\n    var Rotator = require(\"rotator-js\");\n    var rotator = new Rotator([\"my-image\"]);\n    ```\n    _\u003csmall\u003eYou can also setup multiple elements to be rotated at once by passing multiple element `id`s!\u003c/small\u003e_\n\n1. Call `configure()` to configure the buttons to rotate the given elements.\n    ```javascript\n    rotator.configure();\n    ```\n\n1. That's all!\n\nNow, the HTML element(s) whose `id`(s) was passed to Rotator, will be rotated clockwise/counter-clockwise when their corresponding buttons are clicked, respectively.\n\n## Limitations\nRotations are currently limited to 90° (clockwise) or -90° (counter-clockwise) per rotation.\n\n## Contributing\nWe'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.\n\n## License\nRefer to the license file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpakej%2Frotator-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpakej%2Frotator-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpakej%2Frotator-js/lists"}