From fe82f07d249f4a2a0f229034171e53853a04363c Mon Sep 17 00:00:00 2001
From: sphinxxxx <coding@enthuses.me>
Date: Sat, 24 Mar 2018 00:43:15 +0000
Subject: [PATCH] Custom popup handling

---
 README.md                  |  59 ++++++++-----------
 demo/index.html            | 112 ++++++++++++++++++++++-------------
 dist/vanilla-picker.js     |  99 ++++++++++++++++++++-----------
 dist/vanilla-picker.min.js |   4 +-
 gulpfile.babel.js          |   2 +-
 package.json               |   2 +-
 src/picker.js              | 117 ++++++++++++++++++++++---------------
 src/picker.pug             |  24 ++++----
 8 files changed, 247 insertions(+), 172 deletions(-)

diff --git a/README.md b/README.md
index fa78de4..0b768d4 100644
--- 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
index c3e7598..7ba8ab9 100644
--- 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>
diff --git a/dist/vanilla-picker.js b/dist/vanilla-picker.js
index 906461d..2234e3c 100644
--- a/dist/vanilla-picker.js
+++ b/dist/vanilla-picker.js
@@ -1,5 +1,5 @@
 /*!
- * vanilla-picker v2.0.0-alpha.8
+ * vanilla-picker v2.0.0
  * https://github.com/Sphinxxxx/vanilla-picker
  *
  * Copyright 2017-2018 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
@@ -522,6 +522,10 @@ function parseHTML(htmlString) {
     return div.firstElementChild;
 }
 
+function addEvent(target, type, handler) {
+    target.addEventListener(type, handler, false);
+}
+
 var BG_TRANSP = 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'2\' height=\'2\'%3E%3Cpath d=\'M1,0H0V1H2V2H1\' fill=\'lightgrey\'/%3E%3C/svg%3E")';
 var HUES = 360;
 
@@ -535,7 +539,6 @@ var Picker = function () {
 
 
         this.settings = {
-            parent: document.body,
             popup: 'right',
             alpha: true
         };
@@ -584,9 +587,50 @@ var Picker = function () {
                 this.setColor(col);
             }
 
-            this._ifPopup(null, function () {
-                return _this.show();
-            });
+            if (settings.parent && settings.popup && !this._popupInited) {
+
+                addEvent(settings.parent, 'click', function (e) {
+                    return _this.openHandler(e);
+                });
+
+
+                this._popupInited = true;
+            } else if (options.parent && !settings.popup) {
+                this.show();
+            }
+        }
+
+
+    }, {
+        key: 'openHandler',
+        value: function openHandler(e) {
+            this.show();
+
+            this.settings.parent.style.pointerEvents = 'none';
+        }
+
+
+    }, {
+        key: 'closeHandler',
+        value: function closeHandler(e) {
+            var doHide = false;
+
+            if (e.type === 'mousedown') {
+                if (!this.domElement.contains(e.target)) {
+                    doHide = true;
+                }
+            }
+            else {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    doHide = true;
+                }
+
+            if (doHide) {
+                this.hide();
+                this.settings.parent.style.pointerEvents = '';
+            }
         }
 
 
@@ -614,10 +658,9 @@ var Picker = function () {
         key: 'show',
         value: function show() {
             var parent = this.settings.parent;
-
-            this._ifPopup(function () {
-                return parent.style.pointerEvents = 'none';
-            });
+            if (!parent) {
+                return;
+            }
 
             if (this.domElement) {
                 this.domElement.style.display = '';
@@ -658,21 +701,16 @@ var Picker = function () {
     }, {
         key: 'hide',
         value: function hide() {
-            var _this2 = this;
-
             if (this.domElement) {
                 this.domElement.style.display = 'none';
             }
-            this._ifPopup(function () {
-                return _this2.settings.parent.style.pointerEvents = '';
-            });
         }
 
 
     }, {
         key: '_bindEvents',
         value: function _bindEvents() {
-            var _this3 = this;
+            var _this2 = this;
 
             var that = this;
 
@@ -708,36 +746,27 @@ var Picker = function () {
             }));
 
 
-            this._ifPopup(function () {
-                _this3.domElement.addEventListener('mousedown', function (e) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                });
-
-                window.addEventListener('mousedown', function (e) {
-                    that.hide();
+            addEvent(window, 'mousedown', function (e) {
+                return _this2._ifPopup(function () {
+                    return _this2.closeHandler(e);
                 });
             });
 
-            this._domOkay.onclick = function (e) {
-                _this3._ifPopup(function () {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    _this3.hide();
+            addEvent(this._domOkay, 'click', function (e) {
+                _this2._ifPopup(function () {
+                    return _this2.closeHandler(e);
                 });
 
-                if (_this3.onDone) {
-                    _this3.onDone(_this3.colour);
+                if (_this2.onDone) {
+                    _this2.onDone(_this2.colour);
                 }
-            };
+            });
         }
 
 
     }, {
         key: '_setPosition',
         value: function _setPosition() {
-
             var parent = this.settings.parent,
                 elm = this.domElement;
 
@@ -746,6 +775,7 @@ var Picker = function () {
             }
 
             this._ifPopup(function (popup) {
+
                 if (getComputedStyle(parent).position === 'static') {
                     parent.style.position = 'relative';
                 }
@@ -759,6 +789,7 @@ var Picker = function () {
                         elm.classList.remove(c);
                     }
                 });
+
                 elm.classList.add(cssClass);
             });
         }
@@ -837,7 +868,7 @@ var Picker = function () {
     }, {
         key: '_ifPopup',
         value: function _ifPopup(actionIf, actionElse) {
-            if (this.settings.popup) {
+            if (this.settings.parent && this.settings.popup) {
                 actionIf && actionIf(this.settings.popup);
             } else {
                 actionElse && actionElse();
diff --git a/dist/vanilla-picker.min.js b/dist/vanilla-picker.min.js
index 206f459..bd5dbd2 100644
--- a/dist/vanilla-picker.min.js
+++ b/dist/vanilla-picker.min.js
@@ -1,8 +1,8 @@
 /*!
- * vanilla-picker v2.0.0-alpha.8
+ * vanilla-picker v2.0.0
  * https://github.com/Sphinxxxx/vanilla-picker
  *
  * Copyright 2017-2018 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
  * Released under the ISC license.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Picker=t()}(this,function(){"use strict";var e=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},t=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),r=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],i=!0,o=!1,n=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){o=!0,n=e}finally{try{!i&&s.return&&s.return()}finally{if(o)throw n}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};String.prototype.startsWith=String.prototype.startsWith||function(e){return 0===this.indexOf(e)},String.prototype.padStart=String.prototype.padStart||function(e,t){for(var r=this;r.length<e;)r=t+r;return r};var i=function(){function i(t,o,n,a){e(this,i);var s=this;if(void 0===t);else if(Array.isArray(t))this.rgba=t;else if(void 0===n){var p=t&&(""+t).trim();p&&function(e){if(e.startsWith("#"))s.rgba=i.hexToRgb(e);else if(e.startsWith("hsl")){var t=e.match(/([\-\d\.e]+)/g).map(Number),o=r(t,4),n=o[0],a=o[1],p=o[2],l=o[3];void 0===l&&(l=1),n/=360,a/=100,p/=100,s.hsla=[n,a,p,l]}else{var c=e.match(/([\-\d\.e]+)/g).map(Number),u=r(c,4),h=u[0],d=u[1],f=u[2],g=u[3];void 0===g&&(g=1),s.rgba=[h,d,f,g]}}(p.toLowerCase())}else this.rgba=[t,o,n,void 0===a?1:a]}return t(i,[{key:"rgba",get:function(){if(this._rgba)return this._rgba;if(!this._hsla)throw new Error("No color is set");return this._rgba=i.hslToRgb(this._hsla)},set:function(e){3===e.length&&(e[3]=1),this._rgba=e,this._hsla=null}},{key:"rgbString",get:function(){return"rgb("+this.rgba.slice(0,3)+")"}},{key:"rgbaString",get:function(){return"rgba("+this.rgba+")"}},{key:"hsla",get:function(){if(this._hsla)return this._hsla;if(!this._rgba)throw new Error("No color is set");return this._hsla=i.rgbToHsl(this._rgba)},set:function(e){3===e.length&&(e[3]=1),this._hsla=e,this._rgba=null}},{key:"hslString",get:function(){var e=this.hsla;return"hsl("+360*e[0]+","+100*e[1]+"%,"+100*e[2]+"%)"}},{key:"hslaString",get:function(){var e=this.hsla;return"hsla("+360*e[0]+","+100*e[1]+"%,"+100*e[2]+"%,"+e[3]+")"}},{key:"hex",get:function(){return"#"+this.rgba.map(function(e,t){return t<3?e.toString(16):(255*e).toString(16)}).map(function(e){return e.padStart(2,"0")}).join("")},set:function(e){this.rgba=i.hexToRgb(e)}}],[{key:"hexToRgb",value:function(e){var t=(e.startsWith("#")?e.slice(1):e).replace(/^(\w{3})$/,"$1F").replace(/^(\w)(\w)(\w)(\w)$/,"$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/,"$1FF");if(!t.match(/^(\w{8})$/))throw new Error("Unknown hex color; "+e);var r=t.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(e){return parseInt(e,16)});return r[3]=r[3]/255,r}},{key:"rgbToHsl",value:function(e){var t=r(e,4),i=t[0],o=t[1],n=t[2],a=t[3];i/=255,o/=255,n/=255;var s=Math.max(i,o,n),p=Math.min(i,o,n),l=void 0,c=void 0,u=(s+p)/2;if(s===p)l=c=0;else{var h=s-p;switch(c=u>.5?h/(2-s-p):h/(s+p),s){case i:l=(o-n)/h+(o<n?6:0);break;case o:l=(n-i)/h+2;break;case n:l=(i-o)/h+4}l/=6}return[l,c,u,a]}},{key:"hslToRgb",value:function(e){var t=r(e,4),i=t[0],o=t[1],n=t[2],a=t[3],s=void 0,p=void 0,l=void 0;if(0===o)s=p=l=n;else{var c=function(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},u=n<.5?n*(1+o):n+o-n*o,h=2*n-u;s=c(h,u,i+1/3),p=c(h,u,i),l=c(h,u,i-1/3)}var d=[255*s,255*p,255*l].map(Math.round);return d[3]=a,d}}]),i}();function o(e){var t=Element.prototype;t.matches||(t.matches=t.msMatchesSelector||t.webkitMatchesSelector),t.closest||(t.closest=function(e){var t=this;do{if(t.matches(e))return t;t="svg"===t.tagName?t.parentNode:t.parentElement}while(t);return null});var r=(e=e||{}).container||document.documentElement,i=e.selector,o=e.callback||console.log,n=e.callbackDragStart,a=e.callbackDragEnd,s=e.callbackClick,p=!1!==e.roundCoords,l=!1!==e.dragOutside,c=e.handleOffset||!1!==e.handleOffset,u=null;switch(c){case"center":u=!0;break;case"topleft":case"top-left":u=!1}var h=void 0,d=void 0,f=void 0;function g(e,t,i,o){var n=e.clientX,a=e.clientY;function s(e,t,r){return Math.max(t,Math.min(e,r))}if(t){var l=t.getBoundingClientRect();if(n-=l.left,a-=l.top,i&&(n-=i[0],a-=i[1]),o&&(n=s(n,0,l.width),a=s(a,0,l.height)),t!==r)(null!==u?u:"circle"===t.nodeName||"ellipse"===t.nodeName)&&(n-=l.width/2,a-=l.height/2)}return p?[Math.round(n),Math.round(a)]:[n,a]}function m(e){(h=i?e.target.closest(i):{})&&(e.preventDefault(),e.stopPropagation(),d=i&&c?g(e,h):[0,0],f=g(e,r,d),p&&(f=f.map(Math.round)),n&&n(h,f))}function v(e){if(h){e.preventDefault(),e.stopPropagation();var t=g(e,r,d,!l);o(h,t,f)}}function _(e){if(h){if(a||s){var t=g(e,r,d,!l);s&&f[0]===t[0]&&f[1]===t[1]&&s(h,f),a&&a(h,t,f)}h=null}}function k(e){_(y(e))}function b(e){return void 0!==e.buttons?1===e.buttons:1===e.which}function w(e,t){1===e.touches.length?t(y(e)):_(e)}function y(e){var t=e.targetTouches[0];return t||(t=e.changedTouches[0]),t.preventDefault=e.preventDefault.bind(e),t.stopPropagation=e.stopPropagation.bind(e),t}r.addEventListener("mousedown",function(e){b(e)&&m(e)}),r.addEventListener("touchstart",function(e){w(e,m)}),window.addEventListener("mousemove",function(e){h&&(b(e)?v(e):_(e))}),window.addEventListener("touchmove",function(e){w(e,v)}),window.addEventListener("mouseup",function(e){h&&!b(e)&&_(e)}),r.addEventListener("touchend",k),r.addEventListener("touchcancel",k)}return document.documentElement.firstElementChild.appendChild(document.createElement("style")).textContent=".picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em;box-sizing:border-box;background:#f2f2f2;cursor:default;pointer-events:auto}.picker_wrapper>*{margin:.5em}.picker_wrapper::before{content:'';display:block;width:100%;order:1}.picker_slider,.picker_selector{padding:1em}.picker_hue{width:100%}.picker_sl{flex:1 1 auto}.picker_sl::before{content:'';display:block;padding-bottom:100%}.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_sample{order:1;flex:1 1 auto;min-height:3em}.picker_done{order:1;width:3rem;height:2rem}.picker_selector{position:absolute;z-index:1;display:block;transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);outline:1px solid silver}.picker_sl{position:relative;outline:1px solid silver;background-image:linear-gradient(180deg, white, rgba(255,255,255,0) 50%),linear-gradient(0deg, black, transparent 50%),linear-gradient(90deg, gray, rgba(128,128,128,0))}.picker_alpha,.picker_sample{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\") left top/contain white;outline:1px solid silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_sample::before{content:'';position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_done{font:inherit;font-family:sans-serif;box-sizing:border-box;text-align:center;cursor:pointer;position:relative;padding:0;text-indent:100%;white-space:nowrap;overflow:hidden}.picker_done::before{content:'Ok';position:absolute;top:0;left:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;font-size:1rem;text-indent:0}.picker_arrow{position:absolute}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,0.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:\"\";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;transform:skew(45deg);transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}",function(){function r(t){e(this,r),this.settings={parent:document.body,popup:"right",alpha:!0},this.setOptions(t)}return t(r,[{key:"setOptions",value:function(e){var t=this;if(e){var r=this.settings;e instanceof HTMLElement?r.parent=e:function(e,t,r){for(var i in e)r&&r.indexOf(i)>=0||(t[i]=e[i])}(e,r),e.onChange&&(this.onChange=e.onChange),e.onDone&&(this.onDone=e.onDone);var i=e.color||e.colour;i&&this.setColor(i),this._ifPopup(null,function(){return t.show()})}}},{key:"setColor",value:function(e){var t=new i(e);if(!this.settings.alpha){var r=t.hsla;r[3]=1,t.hsla=r}this.colour=this.color=t,this._setHSLA()}},{key:"setColour",value:function(e){this.setColor(e)}},{key:"show",value:function(){var e=this.settings.parent;if(this._ifPopup(function(){return e.style.pointerEvents="none"}),this.domElement)return this.domElement.style.display="",void this._setPosition();var t,r,i=this.settings.template||'<div class="picker_wrapper"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_sample"></div><button class="picker_done"></button></div>',o=(t=i,(r=document.createElement("div")).innerHTML=t,r.firstElementChild);this.domElement=o,this._domH=o.querySelector(".picker_hue"),this._domSL=o.querySelector(".picker_sl"),this._domA=o.querySelector(".picker_alpha"),this._domSample=o.querySelector(".picker_sample"),this._domOkay=o.querySelector(".picker_done"),this.settings.alpha||o.classList.add("no_alpha"),this._ifPopup(function(){return o.classList.add("popup")}),this._setPosition(),this.colour?this._updateUI():this.setColor("#0cf"),this._bindEvents()}},{key:"hide",value:function(){var e=this;this.domElement&&(this.domElement.style.display="none"),this._ifPopup(function(){return e.settings.parent.style.pointerEvents=""})}},{key:"_bindEvents",value:function(){var e=this,t=this;function r(e,t){function r(r,i){var o=i[0]/e.clientWidth,n=i[1]/e.clientHeight;t(o,n)}return{container:e,dragOutside:!1,callback:r,callbackClick:r,callbackDragStart:r}}o(r(this._domH,function(e,r){return t._setHSLA(e)})),o(r(this._domSL,function(e,r){return t._setHSLA(null,e,1-r)})),o(r(this._domA,function(e,r){return t._setHSLA(null,null,null,1-r)})),this._ifPopup(function(){e.domElement.addEventListener("mousedown",function(e){e.stopPropagation(),e.preventDefault()}),window.addEventListener("mousedown",function(e){t.hide()})}),this._domOkay.onclick=function(t){e._ifPopup(function(){t.preventDefault(),t.stopPropagation(),e.hide()}),e.onDone&&e.onDone(e.colour)}}},{key:"_setPosition",value:function(){var e=this.settings.parent,t=this.domElement;e!==t.parentNode&&e.appendChild(t),this._ifPopup(function(r){"static"===getComputedStyle(e).position&&(e.style.position="relative");var i=!0===r?"popup_right":"popup_"+r;["popup_top","popup_bottom","popup_left","popup_right"].forEach(function(e){e===i?t.classList.add(e):t.classList.remove(e)}),t.classList.add(i)})}},{key:"_setHSLA",value:function(e,t,r,i){var o=arguments,n=this.colour;if(o.length){for(var a=n.hsla,s=0;s<o.length;s++){var p=o[s];(p||0===p)&&(a[s]=p)}n.hsla=a}this._updateUI(),this.onChange&&this.onChange(n)}},{key:"_updateUI",value:function(){if(this.domElement){var e=this.colour,t=e.hsla,r="hsl("+360*t[0]+", 100%, 50%)",i=e.hslString,o=e.hslaString,n=this._domH,a=this._domSL,s=this._domA;l(0,n.firstElementChild,t[0]),this._domSL.style.backgroundColor=this._domH.style.color=r,l(0,a.firstElementChild,t[1]),c(0,a.firstElementChild,1-t[2]),a.style.color=i,c(0,s.firstElementChild,1-t[3]);var p="linear-gradient("+[i,i.replace("hsl","hsla").replace(")",", 0)")]+")";this._domA.style.backgroundImage=p+", url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\")",this._domSample.style.color=o}function l(e,t,r){t.style.left=100*r+"%"}function c(e,t,r){t.style.top=100*r+"%"}}},{key:"_ifPopup",value:function(e,t){this.settings.popup?e&&e(this.settings.popup):t&&t()}}]),r}()});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Picker=t()}(this,function(){"use strict";var e=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},t=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),r=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],i=!0,n=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);i=!0);}catch(e){n=!0,o=e}finally{try{!i&&s.return&&s.return()}finally{if(n)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};String.prototype.startsWith=String.prototype.startsWith||function(e){return 0===this.indexOf(e)},String.prototype.padStart=String.prototype.padStart||function(e,t){for(var r=this;r.length<e;)r=t+r;return r};var i=function(){function i(t,n,o,a){e(this,i);var s=this;if(void 0===t);else if(Array.isArray(t))this.rgba=t;else if(void 0===o){var p=t&&(""+t).trim();p&&function(e){if(e.startsWith("#"))s.rgba=i.hexToRgb(e);else if(e.startsWith("hsl")){var t=e.match(/([\-\d\.e]+)/g).map(Number),n=r(t,4),o=n[0],a=n[1],p=n[2],l=n[3];void 0===l&&(l=1),o/=360,a/=100,p/=100,s.hsla=[o,a,p,l]}else{var c=e.match(/([\-\d\.e]+)/g).map(Number),u=r(c,4),h=u[0],d=u[1],f=u[2],g=u[3];void 0===g&&(g=1),s.rgba=[h,d,f,g]}}(p.toLowerCase())}else this.rgba=[t,n,o,void 0===a?1:a]}return t(i,[{key:"rgba",get:function(){if(this._rgba)return this._rgba;if(!this._hsla)throw new Error("No color is set");return this._rgba=i.hslToRgb(this._hsla)},set:function(e){3===e.length&&(e[3]=1),this._rgba=e,this._hsla=null}},{key:"rgbString",get:function(){return"rgb("+this.rgba.slice(0,3)+")"}},{key:"rgbaString",get:function(){return"rgba("+this.rgba+")"}},{key:"hsla",get:function(){if(this._hsla)return this._hsla;if(!this._rgba)throw new Error("No color is set");return this._hsla=i.rgbToHsl(this._rgba)},set:function(e){3===e.length&&(e[3]=1),this._hsla=e,this._rgba=null}},{key:"hslString",get:function(){var e=this.hsla;return"hsl("+360*e[0]+","+100*e[1]+"%,"+100*e[2]+"%)"}},{key:"hslaString",get:function(){var e=this.hsla;return"hsla("+360*e[0]+","+100*e[1]+"%,"+100*e[2]+"%,"+e[3]+")"}},{key:"hex",get:function(){return"#"+this.rgba.map(function(e,t){return t<3?e.toString(16):(255*e).toString(16)}).map(function(e){return e.padStart(2,"0")}).join("")},set:function(e){this.rgba=i.hexToRgb(e)}}],[{key:"hexToRgb",value:function(e){var t=(e.startsWith("#")?e.slice(1):e).replace(/^(\w{3})$/,"$1F").replace(/^(\w)(\w)(\w)(\w)$/,"$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/,"$1FF");if(!t.match(/^(\w{8})$/))throw new Error("Unknown hex color; "+e);var r=t.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(e){return parseInt(e,16)});return r[3]=r[3]/255,r}},{key:"rgbToHsl",value:function(e){var t=r(e,4),i=t[0],n=t[1],o=t[2],a=t[3];i/=255,n/=255,o/=255;var s=Math.max(i,n,o),p=Math.min(i,n,o),l=void 0,c=void 0,u=(s+p)/2;if(s===p)l=c=0;else{var h=s-p;switch(c=u>.5?h/(2-s-p):h/(s+p),s){case i:l=(n-o)/h+(n<o?6:0);break;case n:l=(o-i)/h+2;break;case o:l=(i-n)/h+4}l/=6}return[l,c,u,a]}},{key:"hslToRgb",value:function(e){var t=r(e,4),i=t[0],n=t[1],o=t[2],a=t[3],s=void 0,p=void 0,l=void 0;if(0===n)s=p=l=o;else{var c=function(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e},u=o<.5?o*(1+n):o+n-o*n,h=2*o-u;s=c(h,u,i+1/3),p=c(h,u,i),l=c(h,u,i-1/3)}var d=[255*s,255*p,255*l].map(Math.round);return d[3]=a,d}}]),i}();function n(e){var t=Element.prototype;t.matches||(t.matches=t.msMatchesSelector||t.webkitMatchesSelector),t.closest||(t.closest=function(e){var t=this;do{if(t.matches(e))return t;t="svg"===t.tagName?t.parentNode:t.parentElement}while(t);return null});var r=(e=e||{}).container||document.documentElement,i=e.selector,n=e.callback||console.log,o=e.callbackDragStart,a=e.callbackDragEnd,s=e.callbackClick,p=!1!==e.roundCoords,l=!1!==e.dragOutside,c=e.handleOffset||!1!==e.handleOffset,u=null;switch(c){case"center":u=!0;break;case"topleft":case"top-left":u=!1}var h=void 0,d=void 0,f=void 0;function g(e,t,i,n){var o=e.clientX,a=e.clientY;function s(e,t,r){return Math.max(t,Math.min(e,r))}if(t){var l=t.getBoundingClientRect();if(o-=l.left,a-=l.top,i&&(o-=i[0],a-=i[1]),n&&(o=s(o,0,l.width),a=s(a,0,l.height)),t!==r)(null!==u?u:"circle"===t.nodeName||"ellipse"===t.nodeName)&&(o-=l.width/2,a-=l.height/2)}return p?[Math.round(o),Math.round(a)]:[o,a]}function m(e){(h=i?e.target.closest(i):{})&&(e.preventDefault(),e.stopPropagation(),d=i&&c?g(e,h):[0,0],f=g(e,r,d),p&&(f=f.map(Math.round)),o&&o(h,f))}function v(e){if(h){e.preventDefault(),e.stopPropagation();var t=g(e,r,d,!l);n(h,t,f)}}function _(e){if(h){if(a||s){var t=g(e,r,d,!l);s&&f[0]===t[0]&&f[1]===t[1]&&s(h,f),a&&a(h,t,f)}h=null}}function k(e){_(y(e))}function w(e){return void 0!==e.buttons?1===e.buttons:1===e.which}function b(e,t){1===e.touches.length?t(y(e)):_(e)}function y(e){var t=e.targetTouches[0];return t||(t=e.changedTouches[0]),t.preventDefault=e.preventDefault.bind(e),t.stopPropagation=e.stopPropagation.bind(e),t}r.addEventListener("mousedown",function(e){w(e)&&m(e)}),r.addEventListener("touchstart",function(e){b(e,m)}),window.addEventListener("mousemove",function(e){h&&(w(e)?v(e):_(e))}),window.addEventListener("touchmove",function(e){b(e,v)}),window.addEventListener("mouseup",function(e){h&&!w(e)&&_(e)}),r.addEventListener("touchend",k),r.addEventListener("touchcancel",k)}function o(e,t,r){e.addEventListener(t,r,!1)}return document.documentElement.firstElementChild.appendChild(document.createElement("style")).textContent=".picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em;box-sizing:border-box;background:#f2f2f2;cursor:default;pointer-events:auto}.picker_wrapper>*{margin:.5em}.picker_wrapper::before{content:'';display:block;width:100%;order:1}.picker_slider,.picker_selector{padding:1em}.picker_hue{width:100%}.picker_sl{flex:1 1 auto}.picker_sl::before{content:'';display:block;padding-bottom:100%}.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_sample{order:1;flex:1 1 auto;min-height:3em}.picker_done{order:1;width:3rem;height:2rem}.picker_selector{position:absolute;z-index:1;display:block;transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);outline:1px solid silver}.picker_sl{position:relative;outline:1px solid silver;background-image:linear-gradient(180deg, white, rgba(255,255,255,0) 50%),linear-gradient(0deg, black, transparent 50%),linear-gradient(90deg, gray, rgba(128,128,128,0))}.picker_alpha,.picker_sample{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\") left top/contain white;outline:1px solid silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_sample::before{content:'';position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_done{font:inherit;font-family:sans-serif;box-sizing:border-box;text-align:center;cursor:pointer;position:relative;padding:0;text-indent:100%;white-space:nowrap;overflow:hidden}.picker_done::before{content:'Ok';position:absolute;top:0;left:0;display:flex;width:100%;height:100%;justify-content:center;align-items:center;font-size:1rem;text-indent:0}.picker_arrow{position:absolute}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,0.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:\"\";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;transform:skew(45deg);transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}",function(){function r(t){e(this,r),this.settings={popup:"right",alpha:!0},this.setOptions(t)}return t(r,[{key:"setOptions",value:function(e){var t=this;if(e){var r=this.settings;e instanceof HTMLElement?r.parent=e:function(e,t,r){for(var i in e)r&&r.indexOf(i)>=0||(t[i]=e[i])}(e,r),e.onChange&&(this.onChange=e.onChange),e.onDone&&(this.onDone=e.onDone);var i=e.color||e.colour;i&&this.setColor(i),r.parent&&r.popup&&!this._popupInited?(o(r.parent,"click",function(e){return t.openHandler(e)}),this._popupInited=!0):e.parent&&!r.popup&&this.show()}}},{key:"openHandler",value:function(e){this.show(),this.settings.parent.style.pointerEvents="none"}},{key:"closeHandler",value:function(e){var t=!1;"mousedown"===e.type?this.domElement.contains(e.target)||(t=!0):(e.preventDefault(),e.stopPropagation(),t=!0),t&&(this.hide(),this.settings.parent.style.pointerEvents="")}},{key:"setColor",value:function(e){var t=new i(e);if(!this.settings.alpha){var r=t.hsla;r[3]=1,t.hsla=r}this.colour=this.color=t,this._setHSLA()}},{key:"setColour",value:function(e){this.setColor(e)}},{key:"show",value:function(){if(this.settings.parent){if(this.domElement)return this.domElement.style.display="",void this._setPosition();var e,t,r=this.settings.template||'<div class="picker_wrapper"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_sample"></div><button class="picker_done"></button></div>',i=(e=r,(t=document.createElement("div")).innerHTML=e,t.firstElementChild);this.domElement=i,this._domH=i.querySelector(".picker_hue"),this._domSL=i.querySelector(".picker_sl"),this._domA=i.querySelector(".picker_alpha"),this._domSample=i.querySelector(".picker_sample"),this._domOkay=i.querySelector(".picker_done"),this.settings.alpha||i.classList.add("no_alpha"),this._ifPopup(function(){return i.classList.add("popup")}),this._setPosition(),this.colour?this._updateUI():this.setColor("#0cf"),this._bindEvents()}}},{key:"hide",value:function(){this.domElement&&(this.domElement.style.display="none")}},{key:"_bindEvents",value:function(){var e=this,t=this;function r(e,t){function r(r,i){var n=i[0]/e.clientWidth,o=i[1]/e.clientHeight;t(n,o)}return{container:e,dragOutside:!1,callback:r,callbackClick:r,callbackDragStart:r}}n(r(this._domH,function(e,r){return t._setHSLA(e)})),n(r(this._domSL,function(e,r){return t._setHSLA(null,e,1-r)})),n(r(this._domA,function(e,r){return t._setHSLA(null,null,null,1-r)})),o(window,"mousedown",function(t){return e._ifPopup(function(){return e.closeHandler(t)})}),o(this._domOkay,"click",function(t){e._ifPopup(function(){return e.closeHandler(t)}),e.onDone&&e.onDone(e.colour)})}},{key:"_setPosition",value:function(){var e=this.settings.parent,t=this.domElement;e!==t.parentNode&&e.appendChild(t),this._ifPopup(function(r){"static"===getComputedStyle(e).position&&(e.style.position="relative");var i=!0===r?"popup_right":"popup_"+r;["popup_top","popup_bottom","popup_left","popup_right"].forEach(function(e){e===i?t.classList.add(e):t.classList.remove(e)}),t.classList.add(i)})}},{key:"_setHSLA",value:function(e,t,r,i){var n=arguments,o=this.colour;if(n.length){for(var a=o.hsla,s=0;s<n.length;s++){var p=n[s];(p||0===p)&&(a[s]=p)}o.hsla=a}this._updateUI(),this.onChange&&this.onChange(o)}},{key:"_updateUI",value:function(){if(this.domElement){var e=this.colour,t=e.hsla,r="hsl("+360*t[0]+", 100%, 50%)",i=e.hslString,n=e.hslaString,o=this._domH,a=this._domSL,s=this._domA;l(0,o.firstElementChild,t[0]),this._domSL.style.backgroundColor=this._domH.style.color=r,l(0,a.firstElementChild,t[1]),c(0,a.firstElementChild,1-t[2]),a.style.color=i,c(0,s.firstElementChild,1-t[3]);var p="linear-gradient("+[i,i.replace("hsl","hsla").replace(")",", 0)")]+")";this._domA.style.backgroundImage=p+", url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\")",this._domSample.style.color=n}function l(e,t,r){t.style.left=100*r+"%"}function c(e,t,r){t.style.top=100*r+"%"}}},{key:"_ifPopup",value:function(e,t){this.settings.parent&&this.settings.popup?e&&e(this.settings.popup):t&&t()}}]),r}()});
\ No newline at end of file
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index eb1d9dd..8a2f445 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -118,7 +118,7 @@ gulp.task('build', function() {
 
 //https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglobs-opts-fn
 //https://css-tricks.com/gulp-for-beginners/
-gulp.task('watch', function(){
+gulp.task('watch', function() {
     console.log('** Listening for file changes...');
 
     //Watch everything in src/, plus package.json and gulpfile.babel.js in the root folder:
diff --git a/package.json b/package.json
index fb27eb3..6d1e6f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-picker",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0",
   "description": "A simple, easy to use, versatile and customizable vanilla JS color picker.",
   "author": "Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)",
   "homepage": "https://github.com/Sphinxxxx/vanilla-picker",
diff --git a/src/picker.js b/src/picker.js
index 911c438..533befe 100644
--- a/src/picker.js
+++ b/src/picker.js
@@ -11,6 +11,10 @@ function parseHTML(htmlString) {
     return div.firstElementChild;
 }
 
+function addEvent(target, type, handler) {
+    target.addEventListener(type, handler, false);
+}
+
 
 const BG_TRANSP = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E")`;
 const HUES = 360;
@@ -32,7 +36,8 @@ class Picker {
 
         //Default settings
         this.settings = {
-            parent: document.body,
+            //Allow creating a popup without putting it on screen yet.
+            //  parent: document.body,
             popup: 'right',
             alpha: true,
         };
@@ -87,7 +92,59 @@ class Picker {
         const col = options.color || options.colour;
         if(col) { this.setColor(col); }
         
-        this._ifPopup(null, () => this.show());
+        //Init popup behavior once we have all the parts we need:
+        if(settings.parent && settings.popup && !this._popupInited) {
+
+            addEvent(settings.parent, 'click', (e) => this.openHandler(e));
+            
+            //This must wait until we have created our DOM..
+            //  addEvent(window, 'mousedown', (e) => this.closeHandler(e));
+            //  addEvent(this._domOkay, 'click', (e) => this.closeHandler(e));
+
+            this._popupInited = true;
+        }
+        else if(options.parent && !settings.popup) {
+            this.show();
+        }
+    }
+
+
+    /**
+     * Default behavior for opening the popup
+     */
+    openHandler(e) {
+        this.show();
+
+        //A trick to avoid re-opening the dialog if you click the parent element while the dialog is open:
+        this.settings.parent.style.pointerEvents = 'none';
+    }
+
+
+    /**
+     * Default behavior for closing the popup
+     */
+    closeHandler(e) {
+        let doHide = false;
+
+        //Close by clicking outside the popup:
+        if(e.type === 'mousedown') {
+            if(!this.domElement.contains(e.target)) {
+                doHide = true;
+            }
+        }
+        //Close by clicking "Ok":
+        else {
+            //Don't bubble the click up to the parent, because that's the trigger to re-open the popup:
+            e.preventDefault();
+            e.stopPropagation();
+    
+            doHide = true;
+        }
+
+        if(doHide) {
+            this.hide();
+            this.settings.parent.style.pointerEvents = '';
+        }
     }
 
 
@@ -119,11 +176,9 @@ class Picker {
      */
     show() {
         const parent = this.settings.parent;
+        if(!parent) { return; }
         
-        //A trick to avoid re-opening the dialog if you click the parent element while the dialog is open:
-        this._ifPopup(() => parent.style.pointerEvents = 'none');
-
-        // unhide html if it exists
+        //Unhide html if it exists
         if (this.domElement) {
             this.domElement.style.display = '';
 
@@ -133,23 +188,6 @@ class Picker {
             return;
         }
 
-/*
-        const html =
-`<div class="picker_wrapper">
-   <div class="picker_arrow"></div>
-   <div class="picker_hue picker_slider">
-       <div class="picker_selector"></div>
-   </div>
-   <div class="picker_sl">
-       <div class="picker_selector"></div>
-   </div>
-   <div class="picker_alpha picker_slider">
-       <div class="picker_selector"></div>
-   </div>
-   <div class="picker_sample"></div>
-   <button class="picker_done">Ok</div>
-</div>`;
-*/
         const html = this.settings.template || '## PLACEHOLDER-HTML ##';
         const wrapper = parseHTML(html);
         
@@ -183,7 +221,6 @@ class Picker {
         if (this.domElement) {
             this.domElement.style.display = 'none';
         }
-        this._ifPopup(() => this.settings.parent.style.pointerEvents = '');
     }
 
 
@@ -193,7 +230,6 @@ class Picker {
      * @private
      */
     _bindEvents() {
-        
         const that = this;
 
         /* Draggable color selection */
@@ -230,29 +266,15 @@ class Picker {
 
         /* Close the dialog */
 
-        this._ifPopup(() => {
-            this.domElement.addEventListener('mousedown', e => {
-                e.stopPropagation();
-                e.preventDefault();
-            });
-    
-            window.addEventListener('mousedown', e => {
-                that.hide();
-            });
-        });
-
-        this._domOkay.onclick = (e) => {
-            this._ifPopup(() => {
-                //Don't bubble the click up to the parent, because that's probably the trigger to re-open the popup:
-                e.preventDefault();
-                e.stopPropagation();
+        addEvent(window, 'mousedown', (e) =>
+            this._ifPopup(() => this.closeHandler(e))
+        );
 
-                this.hide();
-            });
+        addEvent(this._domOkay, 'click', (e) => {
+            this._ifPopup(() => this.closeHandler(e));
             
             if (this.onDone) { this.onDone(this.colour); }
-        };
-
+        });
     }
 
 
@@ -262,13 +284,13 @@ class Picker {
      * @private
      */
     _setPosition() {
-
         const parent = this.settings.parent,
               elm = this.domElement;
 
         if(parent !== elm.parentNode) { parent.appendChild(elm); }
 
         this._ifPopup((popup) => {
+
             //Allow for absolute positioning of the picker popup:
             if(getComputedStyle(parent).position === 'static') {
                 parent.style.position = 'relative';
@@ -285,6 +307,7 @@ class Picker {
                     elm.classList.remove(c);
                 }
             });
+
             //Allow for custom placement via CSS:
             elm.classList.add(cssClass);
         });
@@ -371,7 +394,7 @@ class Picker {
     
     
     _ifPopup(actionIf, actionElse) {
-        if(this.settings.popup) {
+        if(this.settings.parent && this.settings.popup) {
             actionIf && actionIf(this.settings.popup);
         }
         else {
diff --git a/src/picker.pug b/src/picker.pug
index c27ba6a..f430e6c 100644
--- a/src/picker.pug
+++ b/src/picker.pug
@@ -1,16 +1,16 @@
 .picker_wrapper
-
-   .picker_arrow
-
-   .picker_hue.picker_slider
-       .picker_selector
    
-   .picker_sl
-       .picker_selector
+    .picker_arrow
    
-   .picker_alpha.picker_slider
-       .picker_selector
+    .picker_hue.picker_slider
+        .picker_selector
    
-   .picker_sample
-
-   button.picker_done
+    .picker_sl
+        .picker_selector
+   
+    .picker_alpha.picker_slider
+        .picker_selector
+   
+    .picker_sample
+   
+    button.picker_done