Custom popup handling

Sphinxxxx · Mar 24, 2018 · fe82f07 · fe82f07
1 parent 467fc9e
commit fe82f07
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 172 deletions.
diff --git a/README.md b/README.md
@@ -1,75 +1,64 @@
 # vanilla-picker
 
-A simple, easy to use, versatile and customizable vanilla JS color picker.
+A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
 
-Using it is as simple as this: 
+#### Demo
 
-```javascript
-var parent = document.querySelector('#parent');
-var picker = new Picker(parent);
-
-parent.onclick = function() {
-    picker.show();
-};
-picker.onDone = function(color) {
-    parent.style.background = color.rgbaString;
-};
-```
+https://rawgit.com/Sphinxxxx/vanilla-picker/master/demo/index.html  
+https://codepen.io/Sphinxxxx/pen/zRmKBX
 
-#### Demo
 
-https://rawgit.com/Sphinxxxx/vanilla-picker/master/demo/index.html
+## Getting Started
 
-https://codepen.io/Sphinxxxx/pen/zRmKBX
+#### Installing
 
+* For the pros:
 
-## Explained
+  + ```npm install vanilla-picker --save```
+  + ```import Picker from 'vanilla-picker';```
 
-```html
-<script src="picker.min.js"></script>
+* For the rest of us:
+
+```
+<script src='https://unpkg.com/vanilla-picker'></script>
+```
 
-<div id="parent">click me</div>
+#### Usage
+
+```html
+<div id="parent">Click me</div>
 
 <script>
 
     /*
-        STEP 1
-        Create a new Picker object and set the parent element.
+        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);
 
     /*
-        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 color using two callbacks: onChange and onDone.
     */
-    picker.onDone = function(color) {
+    picker.onChange = function(color) {
 
         /*
             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
+            ..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)
+                color.hex   (8 digit #RRGGBBAA, not supported in all browsers)
         */
 
         parent.style.background = color.rgbaString;
     };
 
-    /* onChange is called every time the selection is changed without clicking 'Ok' */
+    /* onDone is similar to onChange, but only called when you click 'Ok' */
 
 </script>
 ```

diff --git a/demo/index.html b/demo/index.html
@@ -6,28 +6,30 @@
     <title>vanilla-picker</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <script src="../dist/vanilla-picker.min.js"></script>
+    <script src="../dist/vanilla-picker.js"></script>
 
     <style>
-        * {
-            padding: 0;
-            margin: 0;
-        }
-
         body {
+            display: flex;
+            flex-flow: column nowrap;
+            margin: 0;
             min-height: 100vh;
+            align-items: center;
+
             font-family: Georgia, sans-serif;
             background-color: white;
             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);
         }
 
-        h1 {
-            text-align: center;
+        #custom-toggler {
+            padding: 1em;
+            margin: 1em;
+            background: white;
         }
 
         #main-color {
-            position: absolute;
+            display: inline-block;
             border: 4px dashed tomato;
         }
         #main-color .picker_sample, #main-color .picker_done {
@@ -73,15 +75,20 @@
 <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 id="main-color"></div>
+
+    <div id="basic" 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();">
+    <label id="custom-toggler">
+        <input type="checkbox" />
+        Toggle "Custom" popup
+    </label>
+    <div id="custom" class="popup-parent" style="bottom:20%;left:40%;">
+        Custom
+        <select id="custom-placement" onclick="event.stopPropagation();">
             <option selected>top</option>
             <option>bottom</option>
             <option>left</option>
@@ -91,38 +98,63 @@ <h1><a href="https://github.com/Sphinxxxx/vanilla-picker">vanilla-picker</a> dem
 
 
     <script>
+        "use strict";
+        /*global Picker*/
+
+        var parentMain = document.querySelector('#main-color'),
+            parentBasic = document.querySelector('#basic'),
+            parentCustom = document.querySelector('#custom'),
+            customPlacement = document.querySelector('#custom-placement'),
+            customToggler = document.querySelector('#custom-toggler input');
+
+        var popupBasic, popupCustom;
+
+
+        /* Basic example */
+        popupBasic = new Picker(parentBasic);
+        popupBasic.onDone = function(color) {
+            parentBasic.style.background = color.rgbaString;
+        };
+        popupBasic.show();
+
+
+        /* Custom popup behavior */
+        popupCustom = new Picker({
+            parent: parentCustom,
+            popup: customPlacement.value,
+            color: '#dbeb',
+            onDone: function(color) {
+                parentCustom.style.background = color.rgbaString;
+            },
+        });
+        customPlacement.onchange = function(e) {
+            popupCustom.setOptions({
+                popup: customPlacement.value,
+            });
+        };
+        //Disable the normal open/close behavior and implement our own:
+        popupCustom.openHandler = popupCustom.closeHandler = function() { };
+        customToggler.onchange = function(e) {
+            if(customToggler.checked) {
+                popupCustom.show();
+            }
+            else {
+                popupCustom.hide();
+            }
+        };
+
+
+        /* Non-popup picker */
         new Picker({
-            parent: document.querySelector('#main-color'),
-            color: '#cef6',
-            alpha: false,
+            parent: parentMain,
             popup: false,
+            alpha: false,
+            color: '#cef6',
             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(color) {
-                p.style.background = color.rgbaString;
-            };
-
-            p.onclick = function() {
-                var pos = p.querySelector('select');
-                if(pos) {
-                    picker.setOptions({
-                        popup: pos.value,
-                    });
-                }
-                picker.show();
-            };
-        });
     </script>
 
 </body>