Propagate lostFocus event to the top level picker so it can be subscr…

…ibed to from the outside
miroshko · Jul 28, 2016 · 1423b2d · 1423b2d
1 parent 824f549
commit 1423b2d
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 35 deletions.
diff --git 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,20 +125,20 @@ <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() {
         var picker = vanillaColorPicker(document.querySelector('input.just-picker5'));
         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
@@ -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,15 +117,15 @@
       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) {
         var ENTER = 13;
         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
diff --git 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
@@ -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,15 +117,15 @@
       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) {
         var ENTER = 13;
         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
@@ -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);
     });
   });
 });