Nearly there

Sphinxxxx · Feb 26, 2018 · c69629f · c69629f
1 parent addf574
commit c69629f
Show file tree

Hide file tree

Showing 13 changed files with 776 additions and 549 deletions.
diff --git a/LICENSE.md 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
@@ -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
 <script src="picker.min.js"></script>
@@ -32,85 +32,82 @@ Explained
 
 <script>
 
-    /* STEP 1 */
-
-    /* Create a new picker object and set the parent element. */
-
-    var parent = document.getElementById('parent'); /* or jQuery */ $('#parent');
-
+    /*
+        STEP 1
+        Create a new Picker object and set the parent element.
+    */
+    var parent = document.querySelector('#parent');
     var picker = new Picker(parent);
 
-
-    /* STEP 2 */
-
-    /* Set Picker to open when you want, when the parent is clicked for example. */
-
+    /*
+        STEP 2
+        Set the color picker to open when you want, when the parent is clicked for example.
+    */
     parent.onclick = function() {
         picker.show();
     };
 
-    /* STEP 3 */
-
     /*
-    You can do what you want with the chosen colour using two events,
-    onChange and onDone.
+        STEP 3
+        You can do what you want with the chosen color using two callbacks: onChange and onDone.
     */
-
-    picker.onDone = function(colour) {
+    picker.onDone = function(color) {
 
         /*
-        You can get the colour components from
-            colour.rgba
-            colour.hsla  (all values between 0 and 1, inclusive)
-
-        ..or ready to use CSS values from
-            colour.rgbString
-            colour.rgbaString
-            colour.hslString
-            colour.hslaString
-            colour.hex   (eight digit #RRGGBBAA, not supported in all browsers)
+            You can get the color components from
+                color.rgba
+                color.hsla  (all values between 0 and 1, inclusive)
+    
+            ..or ready to use CSS values from
+                color.rgbString
+                color.rgbaString
+                color.hslString
+                color.hslaString
+                color.hex   (eight digit #RRGGBBAA, not supported in all browsers)
         */
 
-        parent.style.background = colour.rgbaString;
+        parent.style.background = color.rgbaString;
     };
 
-    /* onChange is called every time the selection is changed without clicking 'ok' */
+    /* onChange is called every time the selection is changed without clicking 'Ok' */
 
 </script>
 ```
 
 
-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
@@ -3,10 +3,8 @@
 <html>
 
 <head>
-    <title>Picker</title>
-
-    <link href="../src/_picker.css" rel="stylesheet">
-    <!--script src="../src/picker.js"></script-->
+    <title>vanilla-picker</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="../dist/vanilla-picker.min.js"></script>
 
@@ -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;
+            }
+        }
     </style>
 </head>
 
 <body>
+    <h1><a href="https://github.com/Sphinxxxx/vanilla-picker">vanilla-picker</a> demo</h1>
+
+    <div id="main-color" style="top:3em;right:1em"></div>
+
+    <div class="popup-parent" style="top:45%;left:1em;">
+        Click me
+    </div>
+
+    <div class="popup-parent" style="bottom:20%;left:20%;">
+        ..or me!
+        <select onclick="event.stopPropagation();">
+            <option selected>top</option>
+            <option>bottom</option>
+            <option>left</option>
+            <option>right</option>
+        </select>
+    </div>
 
-    <div class="parent" style="top:20%;left:30%">click me</div>
-    <div class="parent" style="top:30%;left:40%">..or me!</div>
-    <div class="parent" style="top:40%;left:10%">..or me?</div>
 
     <script>
-        var parents = Array.prototype.slice.call(document.querySelectorAll('.parent'));
+        new Picker({
+            parent: document.querySelector('#main-color'),
+            color: '#cef6',
+            alpha: false,
+            popup: false,
+            onChange: function(color) {
+                document.body.style.backgroundColor = color.rgbaString;
+            },
+        });
+
+        var parents = Array.prototype.slice.call(document.querySelectorAll('.popup-parent'));
         parents.forEach(function(p, i) {
 
             var picker = new Picker(p);
             if(i === 0) {
                 picker.setColor('#dbeb');
+                picker.show();
             }
-            picker.onDone = function(colour) {
-                p.style.background = colour.rgbaString;
+            picker.onDone = function(color) {
+                p.style.background = color.rgbaString;
             };
 
             p.onclick = function() {
+                var pos = p.querySelector('select');
+                if(pos) {
+                    picker.setOptions({
+                        popup: pos.value,
+                    });
+                }
                 picker.show();
             };
         });