From 1423b2db8b5e39bc35b3b04a37b08c9c95f0dfde Mon Sep 17 00:00:00 2001
From: Oleksii Miroshko <miroshko@live.com>
Date: Thu, 28 Jul 2016 23:30:47 +0200
Subject: [PATCH] Propagate lostFocus event to the top level picker so it can
 be subscribed to from the outside

---
 demo/index.html                    | 18 +++++++++---------
 dist/vanilla-color-picker.js       |  9 +++++----
 dist/vanilla-color-picker.min.js   | 16 ++++++++--------
 package.json                       |  2 +-
 src/vanilla-color-picker.js        |  9 +++++----
 tests/vanilla-color-picker.spec.js | 20 +++++++++++---------
 6 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index c1c22c9..19b24dd 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -30,7 +30,7 @@ <h1>Color picker on any element</h1>
   <section>
     <pre>
       var picker = vanillaColorPicker(document.querySelector('div.just-picker'));
-      
+
       picker.on('colorChosen', function(color, targetElem) {
         targetElem.style.backgroundColor = color;
       });
@@ -42,7 +42,7 @@ <h1>Color picker on any element</h1>
     <script type="text/javascript">
       window.addEventListener('load', function() {
         var picker = vanillaColorPicker(document.querySelector('div.just-picker'));
-        
+
         picker.on('colorChosen', function(color, targetElem) {
           targetElem.style.backgroundColor = color;
         });
@@ -72,7 +72,7 @@ <h1>Appearance customisation with CSS</h1>
   <section>
     <pre>
       var picker = vanillaColorPicker(document.querySelector('div.just-picker3')
-      picker.set('className', 'my-picker');      
+      picker.set('className', 'my-picker');
 
       <b>CSS:</b>
       .my-picker {
@@ -85,7 +85,7 @@ <h1>Appearance customisation with CSS</h1>
     <script type="text/javascript">
       window.addEventListener('load', function() {
         var picker = vanillaColorPicker(document.querySelector('div.just-picker3'));
-        picker.set('className', 'my-picker');  
+        picker.set('className', 'my-picker');
       });
     </script>
   </section>
@@ -102,7 +102,7 @@ <h1>Events</h1>
           picker.elem.value = 'No color';
         }
       });
-    </pre>  
+    </pre>
     <input class="just-picker4">
     <script type="text/javascript">
       window.addEventListener('load', function() {
@@ -116,7 +116,7 @@ <h1>Events</h1>
           }
         });
       });
-    </script>  
+    </script>
   </section>
 
   <h1>Default color</h1>
@@ -125,7 +125,7 @@ <h1>Default color</h1>
       var picker = vanillaColorPicker(document.querySelector('input.just-picker5'));
       picker.set('customColors', ['#f00','#f22','#f44','#f88','#faa','#fcc','#fee');
       picker.set('defaultColor', '#f44');
-    </pre>  
+    </pre>
     <input class="just-picker5">
     <script type="text/javascript">
       window.addEventListener('load', function() {
@@ -133,12 +133,12 @@ <h1>Default color</h1>
         picker.set('customColors', ['#f00','#f22','#f44','#f88','#faa','#fcc','#fee']);
         picker.set('defaultColor', '#f44');
       });
-    </script> 
+    </script>
   </section>
 
   <br />
   <br />
 
-  <script src="../src/vanilla-color-picker.js"></script>
+  <script src="../dist/vanilla-color-picker.js"></script>
 </body>
 </html>
diff --git a/dist/vanilla-color-picker.js b/dist/vanilla-color-picker.js
index 2a13b9a..e525d01 100644
--- a/dist/vanilla-color-picker.js
+++ b/dist/vanilla-color-picker.js
@@ -1,6 +1,6 @@
 // ============================================================
 //
-// Vanilla Color Picker v 0.1.7
+// Vanilla Color Picker v 0.1.8
 //
 // http://github.com/miroshko/vanilla-color-picker
 //
@@ -32,7 +32,7 @@
     } else {
       global.document.head.appendChild(style);
     }
-    
+
   }
 
   function MessageMediator() {
@@ -117,7 +117,7 @@
       var _this = this;
       this.elem.addEventListener('click', function(e) {
         if (e.target.classList.contains('vanilla-color-picker-single-color')) {
-          _this.emit('colorChosen', e.target.dataset.color); 
+          _this.emit('colorChosen', e.target.dataset.color);
         }
       });
       this.elem.addEventListener('keydown', function(e) {
@@ -125,7 +125,7 @@
         var ESC = 27;
         var keyCode = e.which || e.keyCode;
         if (keyCode == ENTER) {
-          _this.emit('colorChosen', e.target.dataset.color); 
+          _this.emit('colorChosen', e.target.dataset.color);
         }
         if(keyCode == ESC) {
           _this.emit('lostFocus');
@@ -196,6 +196,7 @@
         this_.emit('colorChosen', color, this_.elem);
       });
       this_.currentPicker.on('lostFocus', function() {
+        this_.emit('lostFocus');
         this_.destroyPicker();
       });
       this_.emit('pickerCreated');
diff --git a/dist/vanilla-color-picker.min.js b/dist/vanilla-color-picker.min.js
index 6974924..f2bd29f 100644
--- a/dist/vanilla-color-picker.min.js
+++ b/dist/vanilla-color-picker.min.js
@@ -1,6 +1,6 @@
 // ============================================================
 //
-// Vanilla Color Picker v 0.1.7
+// Vanilla Color Picker v 0.1.8
 //
 // http://github.com/miroshko/vanilla-color-picker
 //
@@ -12,16 +12,16 @@ return'<div class="vanilla-color-picker-single-color '+n+'" tabindex="'+t+'" dat
 t.setAttribute("type","text/css"),t.setAttribute("id","vanilla-color-picker-style"),t.innerHTML=l
 var i=e.document.head.children[0]
 i?e.document.head.insertBefore(t,i):e.document.head.appendChild(t)}}function n(){this.subscribers={},this.on=function(e,t){return this.subscribers[e]=this.subscribers[e]||[],this.subscribers[e].push(t),this},this.emit=function(e){var t=arguments;(this.subscribers[e]||[]).forEach(function(e){e.apply(null,Array.prototype.splice.call(t,1))})}}function s(e,i,s){n.apply(this),this.targetElem=e,this.elem=null
-var r=this
+var o=this
 this._initialize=function(){this._createPickerElement(),this._positionPickerElement(),this._addEventListeners()},this.destroy=function(){try{this.elem.parentNode.removeChild(this.elem)}catch(e){}},this._positionPickerElement=function(){var e=this.targetElem.offsetLeft,t=this.targetElem.offsetTop,i=this.targetElem.offsetHeight
-this.elem.style.left=e+"px",this.elem.style.top=t+i+"px"},this._onFocusLost=function(){setTimeout(function(){r.elem.contains(document.activeElement)?document.activeElement.addEventListener("blur",r._onFocusLost):r.emit("lostFocus")},1)},this._createPickerElement=function(){this.elem=document.createElement("div"),this.elem.classList.add("vanilla-color-picker"),s&&this.elem.classList.add(s)
+this.elem.style.left=e+"px",this.elem.style.top=t+i+"px"},this._onFocusLost=function(){setTimeout(function(){o.elem.contains(document.activeElement)?document.activeElement.addEventListener("blur",o._onFocusLost):o.emit("lostFocus")},1)},this._createPickerElement=function(){this.elem=document.createElement("div"),this.elem.classList.add("vanilla-color-picker"),s&&this.elem.classList.add(s)
 for(var e=i.indexOf(this.targetElem.dataset.vanillaPickerColor),n=0;n<i.length;n++)this.elem.innerHTML+=t(i[n],n+1,n==e)
 this.targetElem.parentNode.appendChild(this.elem),this.elem.setAttribute("tabindex",1)
-var o=e>-1?e:0
-this.elem.children[o].focus(),this.elem.children[o].addEventListener("blur",r._onFocusLost)},this._addEventListeners=function(){var e=this
+var r=e>-1?e:0
+this.elem.children[r].focus(),this.elem.children[r].addEventListener("blur",o._onFocusLost)},this._addEventListeners=function(){var e=this
 this.elem.addEventListener("click",function(t){t.target.classList.contains("vanilla-color-picker-single-color")&&e.emit("colorChosen",t.target.dataset.color)}),this.elem.addEventListener("keydown",function(t){var i=13,n=27,s=t.which||t.keyCode
-s==i&&e.emit("colorChosen",t.target.dataset.color),s==n&&e.emit("lostFocus")})},this._initialize()}function r(e){n.apply(this),this.set=this.emit,this.colors=c,this.className="",this.elem=e,this.currentPicker=null
+s==i&&e.emit("colorChosen",t.target.dataset.color),s==n&&e.emit("lostFocus")})},this._initialize()}function o(e){n.apply(this),this.set=this.emit,this.colors=c,this.className="",this.elem=e,this.currentPicker=null
 var t=this
 this._initialize=function(){this._addEventListeners()},this._addEventListeners=function(){this.elem.addEventListener("click",this.openPicker),this.elem.addEventListener("focus",this.openPicker),this.on("customColors",function(e){if(!(e instanceof Array))throw new Error("Colors must be an array")
-t.colors=e}),this.on("defaultColor",function(e){t.elem.dataset.vanillaPickerColor||(t._updateElemState(e),t.emit("colorChosen",e,t.elem))}),this.on("className",function(e){t.className=e})},this._updateElemState=function(e){this.elem.dataset.vanillaPickerColor=e,this.elem.value=e},this.destroyPicker=function(){t.currentPicker&&(t.currentPicker.destroy(),t.currentPicker=null,t.emit("pickerClosed"))},this.openPicker=function(){t.currentPicker||(t.currentPicker=new s(t.elem,t.colors,t.className),t.currentPicker.on("colorChosen",function(e){t._updateElemState(e),t.destroyPicker(),t.emit("colorChosen",e,t.elem)}),t.currentPicker.on("lostFocus",function(){t.destroyPicker()}),t.emit("pickerCreated"))},this._initialize()}function o(e,t){return i(),new r(e,t)}var l=".vanilla-color-picker { display: inline-block; position: absolute; z-index: 100; padding: 5px; background-color: #fff; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3) } .vanilla-color-picker-single-color { display: inline-block; width: 20px; height: 20px; margin: 1px; border-radius: 2px; }",c=["red","yellow","green"]
-e.define&&e.define.amd?define([],function(){return o}):e.vanillaColorPicker=o}(this||window)
+t.colors=e}),this.on("defaultColor",function(e){t.elem.dataset.vanillaPickerColor||(t._updateElemState(e),t.emit("colorChosen",e,t.elem))}),this.on("className",function(e){t.className=e})},this._updateElemState=function(e){this.elem.dataset.vanillaPickerColor=e,this.elem.value=e},this.destroyPicker=function(){t.currentPicker&&(t.currentPicker.destroy(),t.currentPicker=null,t.emit("pickerClosed"))},this.openPicker=function(){t.currentPicker||(t.currentPicker=new s(t.elem,t.colors,t.className),t.currentPicker.on("colorChosen",function(e){t._updateElemState(e),t.destroyPicker(),t.emit("colorChosen",e,t.elem)}),t.currentPicker.on("lostFocus",function(){t.emit("lostFocus"),t.destroyPicker()}),t.emit("pickerCreated"))},this._initialize()}function r(e,t){return i(),new o(e,t)}var l=".vanilla-color-picker { display: inline-block; position: absolute; z-index: 100; padding: 5px; background-color: #fff; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3) } .vanilla-color-picker-single-color { display: inline-block; width: 20px; height: 20px; margin: 1px; border-radius: 2px; }",c=["red","yellow","green"]
+e.define&&e.define.amd?define([],function(){return r}):e.vanillaColorPicker=r}(this||window)
diff --git a/package.json b/package.json
index ae2ba59..3fc9147 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-color-picker",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "description": "Minimalistic color picker without dependencies",
   "main": "vanilla-color-picker.js",
   "directories": {
diff --git a/src/vanilla-color-picker.js b/src/vanilla-color-picker.js
index 2a13b9a..e525d01 100644
--- a/src/vanilla-color-picker.js
+++ b/src/vanilla-color-picker.js
@@ -1,6 +1,6 @@
 // ============================================================
 //
-// Vanilla Color Picker v 0.1.7
+// Vanilla Color Picker v 0.1.8
 //
 // http://github.com/miroshko/vanilla-color-picker
 //
@@ -32,7 +32,7 @@
     } else {
       global.document.head.appendChild(style);
     }
-    
+
   }
 
   function MessageMediator() {
@@ -117,7 +117,7 @@
       var _this = this;
       this.elem.addEventListener('click', function(e) {
         if (e.target.classList.contains('vanilla-color-picker-single-color')) {
-          _this.emit('colorChosen', e.target.dataset.color); 
+          _this.emit('colorChosen', e.target.dataset.color);
         }
       });
       this.elem.addEventListener('keydown', function(e) {
@@ -125,7 +125,7 @@
         var ESC = 27;
         var keyCode = e.which || e.keyCode;
         if (keyCode == ENTER) {
-          _this.emit('colorChosen', e.target.dataset.color); 
+          _this.emit('colorChosen', e.target.dataset.color);
         }
         if(keyCode == ESC) {
           _this.emit('lostFocus');
@@ -196,6 +196,7 @@
         this_.emit('colorChosen', color, this_.elem);
       });
       this_.currentPicker.on('lostFocus', function() {
+        this_.emit('lostFocus');
         this_.destroyPicker();
       });
       this_.emit('pickerCreated');
diff --git a/tests/vanilla-color-picker.spec.js b/tests/vanilla-color-picker.spec.js
index ecd6520..cf9a6a5 100644
--- a/tests/vanilla-color-picker.spec.js
+++ b/tests/vanilla-color-picker.spec.js
@@ -100,7 +100,7 @@ define(['../src/vanilla-color-picker'], function(colorPicker) {
     });
   });
 
-  fdescribe('Color pickers events', function() {
+  describe('Color pickers events', function() {
     var input, picker;
     beforeEach(function() {
       input = document.createElement('input');
@@ -115,10 +115,7 @@ define(['../src/vanilla-color-picker'], function(colorPicker) {
     });
 
     it('pickerCreated is triggered', function(done) {
-      picker.on('pickerCreated', function() {
-        expect(true).toEqual(true);
-        done();
-      });
+      picker.on('pickerCreated', done);
       effroi.mouse.focus(input);
       effroi.mouse.click(input);
     });
@@ -138,13 +135,18 @@ define(['../src/vanilla-color-picker'], function(colorPicker) {
     });
 
     it('pickerClosed is triggered', function(done) {
-      picker.on('pickerClosed', function() {
-        expect(true).toEqual(true);
-        done();
-      });
+      picker.on('pickerClosed', done);
       effroi.mouse.focus(input);
       effroi.mouse.click(input);
       effroi.keyboard.hit(effroi.keyboard.ESC);
+      effroi.keyboard.up(effroi.keyboard.ESC);
+    });
+
+    it('lostFocus is triggered', function(done) {
+      picker.on('lostFocus', done);
+      effroi.mouse.focus(input);
+      effroi.mouse.click(input);
+      effroi.mouse.focus(document.body);
     });
   });
 });