https://github.com/andrejewski/angle-input
Angle input for jQuery, React, and vanilla JavaScript
https://github.com/andrejewski/angle-input
Last synced: 10 months ago
JSON representation
Angle input for jQuery, React, and vanilla JavaScript
- Host: GitHub
- URL: https://github.com/andrejewski/angle-input
- Owner: andrejewski
- License: isc
- Created: 2016-01-22T20:50:58.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-13T17:33:08.000Z (over 9 years ago)
- Last Synced: 2025-04-05T00:02:37.776Z (10 months ago)
- Language: JavaScript
- Homepage: http://andrejewski.github.io/angle-input/
- Size: 186 KB
- Stars: 18
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angle Input
Angle 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.
```sh
npm install angle-input
```
## Usage
Usage depends on which environment Angle Input is used.
### Vanilla JavaScript Usage
```js
var AngleInput = require('angle-input');
// these are the defaults
var options = {
max: 360, // maximum value
min: 0, // minimum value
step: 1, // [min, min+step, ..., max]
name: 'angle', // used for
};
// elem should be a non-void element
// (i.e.) it can contain an
var elem = document.getElementById('my-angle-input');
// the element is bound to its angle options,
// and an [g/s]etter for the angle is returned.
var angle = AngleInput(elem, options);
var newAngle = 180;
var oldAngle = angle(); // get
angle(newAngle); // set
// listen element events like you would
// for any standard input component.
// fired for only definitive value changes
elem.onchange = function(e) {
// elem.addEventListener() and
// elem.removeEventListener() also work.
}
// fired for every immediate value change
// similar to
elem.oninput = function(e) {
// these events are synthetic
// access the real events via the member e.raw
}
```
### jQuery Usage
jQuery does not deviate much from the Vanilla, jQuery integration is essentially two methods:
- `jQuery.angleInput($ || DOMNode, [options])`
- `$($ || DOMNode).angleInput([options])`
The 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.
```js
var xetter = $.angleInput($('.single-input-angle'), options)
// ^ Note: you may create multiple Angle Inputs, but only
// the [g/s]etter for the first element is returned.
$('.angle-input')
.angleInput(options)
.addClass('default-angle-input')
.on('change', updateAngleLabel);
```
To access the Angle Input [g/s]etters for multiple elements, use:
```js
var xetters = $(elements).map($.angleInput).get();
```
Event 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.
### React Usage
The React component of Angle Input is written in React-style and therefore is quite different than plain JavaScript.
```js
var AngleInput = require('angle-input/react');
var MyComponent = React.createClass({
render: function() {
return React.createElement(AngleInput, {
// default props
defaultValue: 0,
max: 360,
min: 0,
step: 1,
className: 'angle-input',
pivotClassName: 'angle-input-pivot',
onChange: function(newAngle) {},
onInput: function(newAngle) {}
});
}
});
```
Note: The React component does not support form submission via a nested `` tag. Instead a parent component must get this value from the component.
## Styling
Angle Input has a unified HTML representation so CSS written for a React input works for a plain JavaScript input. The markup, where `` is any non-void tag, is as follows:
```
```
`` is the **container** and `` is the **pivot**, which rotates counter-clockwise relative to its container.
Using CSS `:after` and `:before` selectors, the styles of Angle Input are endless.