Open list when arrow pressed, close list when escape pressed

dahliacreative · Aug 2, 2016 · 377387d · 377387d
1 parent 6f4f8f9
commit 377387d
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 14 deletions.
diff --git a/dist/selectron.js b/dist/selectron.js
@@ -6,7 +6,7 @@
 //  |___/\___|_|\___|\___|\__|_|  \___/|_| |_|
 //
 // --------------------------------------------------------------------------
-//  Version: 2.0.0
+//  Version: 2.0.1
 //   Author: Simon Sturgess
 //     Docs: dahliacreative.github.io/selectron
 //     Repo: github.com/dahliacreative/selectron
@@ -193,14 +193,24 @@ Selectron.prototype.handleKeyStrokes = function(e) {
       alphaNumbericKeyPressed = (e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || e.which === 8,
       self = this;
 
-  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed || enterKeyPressed)) {
+
+
+  if(!this.isOpen && enterKeyPressed) {
+    return false;
+  }
+
+  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed)) {
+    this.openOptions();
     return false;
   }
 
   if(escapeKeyPressed || enterKeyPressed) {
     if(enterKeyPressed) {
       this.updateSelection(hovered);
     }
+    if(escapeKeyPressed && this.isOpen) {
+      this.closeOptions();
+    } 
   }
 
   if(spaceKeyPressed) {
@@ -326,9 +336,11 @@ Selectron.prototype.populateOptions = function() {
       self.options.append(self.createOption(child, false));
     }
   });
-
   var firstOption = this.options.find('.selectron__option:first-child');
   this.placeholderExists = firstOption.data('value') === '';
+  if(this.opts.search) {
+    firstOption.addClass('selectron__option--is-hovered');
+  }
   if(!this.isOpen) {
     this.updateTrigger();
   }
@@ -401,7 +413,13 @@ Selectron.prototype.registerEvents = function() {
             downArrowKeyPressed = e.which === 40,
             leftArrowKeyPress = e.which === 37,
             rightArrowKeyPress = e.which === 39,
-            enterKeyPressed = e.which === 13;
+            enterKeyPressed = e.which === 13,
+            escapeKeyPressed = e.which === 27;
+
+        if(escapeKeyPressed && self.isOpen) {
+          self.closeOptions();
+          return false;
+        }
 
         if(downArrowKeyPressed || upArrowKeyPressed || leftArrowKeyPress || rightArrowKeyPress || enterKeyPressed) {
           self.handleKeyStrokes(e);

diff --git a/dist/selectron.sass b/dist/selectron.sass
@@ -6,7 +6,7 @@
 //  |___/\___|_|\___|\___|\__|_|  \___/|_| |_|
 //
 // --------------------------------------------------------------------------
-//  Version: 2.0.0
+//  Version: 2.0.1
 //   Author: Simon Sturgess
 //     Docs: dahliacreative.github.io/selectron
 //     Repo: github.com/dahliacreative/selectron

diff --git a/src/javascripts/_selectron.js b/src/javascripts/_selectron.js
@@ -6,7 +6,7 @@
 //  |___/\___|_|\___|\___|\__|_|  \___/|_| |_|
 //
 // --------------------------------------------------------------------------
-//  Version: 2.0.0
+//  Version: 2.0.1
 //   Author: Simon Sturgess
 //     Docs: dahliacreative.github.io/selectron
 //     Repo: github.com/dahliacreative/selectron

diff --git a/src/javascripts/selectron.handleKeyStrokes.js b/src/javascripts/selectron.handleKeyStrokes.js
@@ -11,14 +11,24 @@ Selectron.prototype.handleKeyStrokes = function(e) {
       alphaNumbericKeyPressed = (e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || e.which === 8,
       self = this;
 
-  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed || enterKeyPressed)) {
+
+
+  if(!this.isOpen && enterKeyPressed) {
+    return false;
+  }
+
+  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed)) {
+    this.openOptions();
     return false;
   }
 
   if(escapeKeyPressed || enterKeyPressed) {
     if(enterKeyPressed) {
       this.updateSelection(hovered);
     }
+    if(escapeKeyPressed && this.isOpen) {
+      this.closeOptions();
+    } 
   }
 
   if(spaceKeyPressed) {

diff --git a/src/javascripts/selectron.populateOptions.js b/src/javascripts/selectron.populateOptions.js
@@ -35,9 +35,11 @@ Selectron.prototype.populateOptions = function() {
       self.options.append(self.createOption(child, false));
     }
   });
-
   var firstOption = this.options.find('.selectron__option:first-child');
   this.placeholderExists = firstOption.data('value') === '';
+  if(this.opts.search) {
+    firstOption.addClass('selectron__option--is-hovered');
+  }
   if(!this.isOpen) {
     this.updateTrigger();
   }

diff --git a/src/javascripts/selectron.registerEvents.js b/src/javascripts/selectron.registerEvents.js
@@ -65,7 +65,13 @@ Selectron.prototype.registerEvents = function() {
             downArrowKeyPressed = e.which === 40,
             leftArrowKeyPress = e.which === 37,
             rightArrowKeyPress = e.which === 39,
-            enterKeyPressed = e.which === 13;
+            enterKeyPressed = e.which === 13,
+            escapeKeyPressed = e.which === 27;
+
+        if(escapeKeyPressed && self.isOpen) {
+          self.closeOptions();
+          return false;
+        }
 
         if(downArrowKeyPressed || upArrowKeyPressed || leftArrowKeyPress || rightArrowKeyPress || enterKeyPressed) {
           self.handleKeyStrokes(e);

diff --git a/src/stylesheets/selectron.sass b/src/stylesheets/selectron.sass
@@ -6,7 +6,7 @@
 //  |___/\___|_|\___|\___|\__|_|  \___/|_| |_|
 //
 // --------------------------------------------------------------------------
-//  Version: 2.0.0
+//  Version: 2.0.1
 //   Author: Simon Sturgess
 //     Docs: dahliacreative.github.io/selectron
 //     Repo: github.com/dahliacreative/selectron

diff --git a/tests/selectron.js b/tests/selectron.js
@@ -6,7 +6,7 @@
 //  |___/\___|_|\___|\___|\__|_|  \___/|_| |_|
 //
 // --------------------------------------------------------------------------
-//  Version: 2.0.0
+//  Version: 2.0.1
 //   Author: Simon Sturgess
 //     Docs: dahliacreative.github.io/selectron
 //     Repo: github.com/dahliacreative/selectron
@@ -193,14 +193,24 @@ Selectron.prototype.handleKeyStrokes = function(e) {
       alphaNumbericKeyPressed = (e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || e.which === 8,
       self = this;
 
-  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed || enterKeyPressed)) {
+
+
+  if(!this.isOpen && enterKeyPressed) {
+    return false;
+  }
+
+  if(!this.isOpen && (upArrowKeyPressed || downArrowKeyPressed)) {
+    this.openOptions();
     return false;
   }
 
   if(escapeKeyPressed || enterKeyPressed) {
     if(enterKeyPressed) {
       this.updateSelection(hovered);
     }
+    if(escapeKeyPressed && this.isOpen) {
+      this.closeOptions();
+    } 
   }
 
   if(spaceKeyPressed) {
@@ -326,9 +336,11 @@ Selectron.prototype.populateOptions = function() {
       self.options.append(self.createOption(child, false));
     }
   });
-
   var firstOption = this.options.find('.selectron__option:first-child');
   this.placeholderExists = firstOption.data('value') === '';
+  if(this.opts.search) {
+    firstOption.addClass('selectron__option--is-hovered');
+  }
   if(!this.isOpen) {
     this.updateTrigger();
   }
@@ -401,7 +413,13 @@ Selectron.prototype.registerEvents = function() {
             downArrowKeyPressed = e.which === 40,
             leftArrowKeyPress = e.which === 37,
             rightArrowKeyPress = e.which === 39,
-            enterKeyPressed = e.which === 13;
+            enterKeyPressed = e.which === 13,
+            escapeKeyPressed = e.which === 27;
+
+        if(escapeKeyPressed && self.isOpen) {
+          self.closeOptions();
+          return false;
+        }
 
         if(downArrowKeyPressed || upArrowKeyPressed || leftArrowKeyPress || rightArrowKeyPress || enterKeyPressed) {
           self.handleKeyStrokes(e);