{"id":18552451,"url":"https://github.com/andrejewski/angle-input","last_synced_at":"2025-04-09T22:31:54.350Z","repository":{"id":57177897,"uuid":"50206814","full_name":"andrejewski/angle-input","owner":"andrejewski","description":"Angle input for jQuery, React, and vanilla JavaScript","archived":false,"fork":false,"pushed_at":"2016-05-13T17:33:08.000Z","size":190,"stargazers_count":18,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T00:02:37.776Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://andrejewski.github.io/angle-input/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrejewski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-22T20:50:58.000Z","updated_at":"2024-05-31T04:40:16.000Z","dependencies_parsed_at":"2022-08-30T06:31:06.367Z","dependency_job_id":null,"html_url":"https://github.com/andrejewski/angle-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Fangle-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Fangle-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Fangle-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrejewski%2Fangle-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrejewski","download_url":"https://codeload.github.com/andrejewski/angle-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045220,"owners_count":21038553,"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":[],"created_at":"2024-11-06T21:14:15.252Z","updated_at":"2025-04-09T22:31:53.846Z","avatar_url":"https://github.com/andrejewski.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angle Input\n\nAngle Input is a UI component for entering an angle value. Angle Input aims to be the go-to component of its kind and currently has components that work for vanilla JavaScript, jQuery, and React.\n\n```sh\nnpm install angle-input\n```\n\n## Usage\n\nUsage depends on which environment Angle Input is used.\n\n### Vanilla JavaScript Usage\n\n```js\nvar AngleInput = require('angle-input');\n\n// these are the defaults\nvar options = {\n  max: 360,       // maximum value\n  min: 0,         // minimum value\n  step: 1,        // [min, min+step, ..., max]\n  name: 'angle',  // used for \u003cinput name\u003e\n};\n\n// elem should be a non-void element\n// (i.e.) it can contain an \u003cinput/\u003e\nvar elem = document.getElementById('my-angle-input');\n\n// the element is bound to its angle options,\n// and an [g/s]etter for the angle is returned.\nvar angle = AngleInput(elem, options);\n\nvar newAngle = 180;\nvar oldAngle = angle(); // get\nangle(newAngle);        // set\n\n// listen element events like you would\n// for any standard input component.\n\n// fired for only definitive value changes\nelem.onchange = function(e) {\n  // elem.addEventListener() and\n  // elem.removeEventListener() also work.\n}\n\n// fired for every immediate value change\n// similar to \u003cinput type='range'/\u003e\nelem.oninput = function(e) {\n  // these events are synthetic\n  // access the real events via the member e.raw\n}\n```\n\n### jQuery Usage\n\njQuery does not deviate much from the Vanilla, jQuery integration is essentially two methods: \n\n- `jQuery.angleInput($ || DOMNode, [options])`\n- `$($ || DOMNode).angleInput([options])`\n\nThe differences are very subtle. The former is used when you want to access the Angle Input [g/s]etter for **one** specific element. The latter is used when you want to chain the creation of Angle Input for **one or more** elements **and continue the chain with the elements** using other jQuery functions.\n\n```js\nvar xetter = $.angleInput($('.single-input-angle'), options)\n// ^ Note: you may create multiple Angle Inputs, but only\n// the [g/s]etter for the first element is returned.\n\n$('.angle-input')\n  .angleInput(options)\n  .addClass('default-angle-input')\n  .on('change', updateAngleLabel);\n```\n\nTo access the Angle Input [g/s]etters for multiple elements, use:\n\n```js\nvar xetters = $(elements).map($.angleInput).get();\n```\n\nEvent handling with jQuery is the same as with any other input, but only `change` and `input` events are fired. Also, jQuery's `$.val()` method does not work. Use `$.angleInput(elem)()` to access the angle value instead.\n\n### React Usage\n\nThe React component of Angle Input is written in React-style and therefore is quite different than plain JavaScript.\n\n```js\nvar AngleInput = require('angle-input/react');\n\nvar MyComponent = React.createClass({\n  render: function() {\n    return React.createElement(AngleInput, {\n      // default props\n      defaultValue: 0,\n      max: 360,\n      min: 0,\n      step: 1,\n\n      className: 'angle-input',\n      pivotClassName: 'angle-input-pivot',\n      onChange: function(newAngle) {},\n      onInput: function(newAngle) {}\n    });\n  }\n});\n```\n\nNote: The React component does not support form submission via a nested `\u003cinput\u003e` tag. Instead a parent component must get this value from the component.\n\n## Styling\n\nAngle Input has a unified HTML representation so CSS written for a React input works for a plain JavaScript input. The markup, where `\u003cx\u003e` is any non-void tag, is as follows:\n\n```\n\u003cx\u003e\n  \u003cspan\u003e\u003cspan/\u003e\n\u003c/x\u003e\n```\n\n`\u003cx\u003e` is the **container** and `\u003cspan\u003e` is the **pivot**, which rotates counter-clockwise relative to its container.\n\nUsing CSS `:after` and `:before` selectors, the styles of Angle Input are endless.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejewski%2Fangle-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrejewski%2Fangle-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrejewski%2Fangle-input/lists"}