91 lines
2.5 KiB
Markdown
Executable File
91 lines
2.5 KiB
Markdown
Executable File
# vanilla-picker
|
|
|
|
[](https://github.com/Sphinxxxx/vanilla-picker/blob/master/LICENSE.md)
|
|
[](https://npmjs.com/vanilla-picker)
|
|
[](https://unpkg.com/vanilla-picker)
|
|
[](https://npmjs.com/vanilla-picker)
|
|
|
|
A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
|
|
|
|
#### Demo
|
|
|
|
https://codepen.io/Sphinxxxx/pen/zRmKBX
|
|
|
|
|
|
## Getting Started
|
|
|
|
#### Installing
|
|
|
|
* For the pros:
|
|
|
|
+ ```npm install vanilla-picker --save```
|
|
+ ```import Picker from 'vanilla-picker';```
|
|
|
|
* For the rest of us:
|
|
|
|
```
|
|
<script src="https://unpkg.com/vanilla-picker@2"></script>
|
|
```
|
|
|
|
> **_Note:_**
|
|
>
|
|
> The script adds a `<style>` element to the page, with all the needed CSS. If your site's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) doesn't allow that, use the CSP build with a separate CSS file instead:
|
|
> ```
|
|
> import Picker from 'vanilla-picker/csp';
|
|
> import 'vanilla-picker/dist/vanilla-picker.csp.css';
|
|
> ```
|
|
> ..or
|
|
> ```
|
|
> <script src="vanilla-picker.csp.min.js"></script>
|
|
> <link href="vanilla-picker.csp.css" rel="stylesheet">
|
|
> ```
|
|
|
|
#### Usage
|
|
|
|
```html
|
|
<div id="parent">Click me</div>
|
|
|
|
<script>
|
|
|
|
/*
|
|
Create a new Picker instance and set the parent element.
|
|
By default, the color picker is a popup which appears when you click the parent.
|
|
*/
|
|
var parent = document.querySelector('#parent');
|
|
var picker = new Picker(parent);
|
|
|
|
/*
|
|
You can do what you want with the chosen color using two callbacks: onChange and onDone.
|
|
*/
|
|
picker.onChange = function(color) {
|
|
parent.style.background = color.rgbaString;
|
|
};
|
|
|
|
/* onDone is similar to onChange, but only called when you click 'Ok' */
|
|
|
|
</script>
|
|
```
|
|
|
|
|
|
## API and advanced options
|
|
|
|
https://vanilla-picker.js.org/gen/Picker.html
|
|
|
|
|
|
## Accessibility
|
|
|
|
The color picker is built to support basic keyboard navigation and use with screen readers.
|
|
I would be very interested in feedback on improvements that could be done here!
|
|
|
|
|
|
## Credits
|
|
|
|
* Based on https://github.com/dissimulate/Picker by **Adam Brooks**
|
|
* Built with https://github.com/Joudee/color-conversion by **Joudee**
|
|
* Built with https://gist.github.com/mjackson/5311256 by **Michael Jackson**
|
|
|
|
|
|
## License
|
|
|
|
The ISC license - see the [LICENSE.md](LICENSE.md) file for details.
|