diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..7487688
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+# ISC License (ISC)
+
+Copyright 2017-2018 Andreas Borgen, Adam Brooks
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/README.md b/README.md
index af3138f..fa78de4 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,29 @@
-Picker
-======
+# vanilla-picker
-A simple, easy to use, versatile and customisable Javascript colour picker.
+A simple, easy to use, versatile and customizable vanilla JS color picker.
-Using Picker is as simple as this:
+Using it is as simple as this:
```javascript
-var parent = document.getElementById('parent');
-
+var parent = document.querySelector('#parent');
var picker = new Picker(parent);
parent.onclick = function() {
picker.show();
};
-
-picker.onDone = function(colour) {
- parent.style.background = colour.rgbaString;
+picker.onDone = function(color) {
+ parent.style.background = color.rgbaString;
};
```
-**Demo:** https://rawgit.com/Sphinxxxx/Picker/master/demo/index.html
+#### Demo
+
+https://rawgit.com/Sphinxxxx/vanilla-picker/master/demo/index.html
+
+https://codepen.io/Sphinxxxx/pen/zRmKBX
-Explained
----------
+## Explained
```html
@@ -32,85 +32,82 @@ Explained
```
-TODO: Options
--------------
+## Options
```javascript
var picker = new Picker({
- /* The colour picker's parent */
- parent: (parent element),
+ parent: /* Which element the picker should be attached to */
+
+ /* If the picker is used as a popup, where to place it relative to the parent */
+ popup: 'right' (default)
+ 'left'
+ 'top'
+ 'bottom'
+ false /* No popup, just add the picker as a normal element on the page */
+
+ alpha: true /* Whether to enable adjusting the alpha channel */
+
+ color: /* Initial color for the picker (or call picker.setColor()) */
+
+ onChange: /* Callback whenever the color changes (or set picker.onChange) */
+
+ onDone: /* Callback when the user clicks "Ok" (or set picker.onDone) */
- /*
- Where the colour picker is relative to the parent.
- Defaults to 'right'.
- */
- orientation: ('left', 'right', 'top', 'bottom', 'centre', 'center'),
+});
+```
- /*
- The colour picker's x position relative to the parent.
- Defaults to 'auto'.
- */
- x: (number),
- /*
- The colour picker's y position relative to the parent.
- Defaults to 'auto'.
- */
- y: (number),
+## Credits
- /*
- The colour picker's arrow size.
- Defaults to 20.
- */
- arrow_size: (number)
-});
-```
+* 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.
diff --git a/demo/index.html b/demo/index.html
index 5a04c14..ae14204 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,10 +3,8 @@
- Picker
-
-
-
+ vanilla-picker
+
@@ -17,13 +15,26 @@
}
body {
- height: 100vh;
+ min-height: 100vh;
+ font-family: Georgia, sans-serif;
background-color: white;
- background-image: repeating-linear-gradient( 45deg, skyblue 0, skyblue 1px, transparent 0, transparent 40px),
- repeating-linear-gradient(135deg, skyblue 0, skyblue 1px, transparent 0, transparent 40px);
+ background-image: repeating-linear-gradient( 0deg, skyblue 0, skyblue 1px, transparent 0, transparent 20px),
+ repeating-linear-gradient(90deg, skyblue 0, skyblue 1px, transparent 0, transparent 20px);
}
- .parent {
+ h1 {
+ text-align: center;
+ }
+
+ #main-color {
+ position: absolute;
+ border: 4px dashed tomato;
+ }
+ #main-color .picker_sample, #main-color .picker_done {
+ display: none;
+ }
+
+ .popup-parent {
position: absolute;
background: dodgerblue;
color: white;
@@ -34,28 +45,65 @@
font-size: 20px;
text-align: center;
}
+
+ @media(max-width: 500px) {
+ .picker_wrapper {
+ font-size: 7px;
+ }
+ }
+