Add keynav support to dropdown (angular-ui#1228)

bleggett · May 10, 2015 · b5e970f · b5e970f
1 parent e9b9eb0
commit b5e970f
Showing 1 changed file with 44 additions and 6 deletions.
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -62,12 +62,13 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
 .controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document) {
   var self = this,
-      scope = $scope.$new(), // create a child scope so we are not polluting original one
-      openClass = dropdownConfig.openClass,
-      getIsOpen,
-      setIsOpen = angular.noop,
-      toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
-      appendToBody = false;
+    scope = $scope.$new(), // create a child scope so we are not polluting original one
+    openClass = dropdownConfig.openClass,
+    getIsOpen,
+    setIsOpen = angular.noop,
+    toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
+    appendToBody = false,
+    selectedOption = null;
 
   this.init = function( element ) {
     self.$element = element;
@@ -135,6 +136,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       dropdownService.open( scope );
     } else {
       dropdownService.close( scope );
+      self.selectedOption = 0;
     }
 
     setIsOpen($scope, isOpen);
@@ -174,6 +176,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 })
 
+.directive('keyboardNav', function() {
+  return {
+    restrict: 'A',
+    require: '?^dropdown',
+    link: function (scope, element, attrs, dropdownCtrl) {
+
+      element.bind('keydown', function(e) {
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        var elems = angular.element(element).find('a');
+        switch (e.keyCode) {
+          case (40): // Down
+            {
+
+            if ( !angular.isNumber(dropdownCtrl.selectedOption) ) {
+              dropdownCtrl.selectedOption = 0;
+            } else {
+              dropdownCtrl.selectedOption = (dropdownCtrl.selectedOption === elems.length -1 ? dropdownCtrl.selectedOption : dropdownCtrl.selectedOption+1);
+            }
+
+          }
+          break;
+          case (38):  // Up
+            {
+            dropdownCtrl.selectedOption = (dropdownCtrl.selectedOption === 0 ? 0 : dropdownCtrl.selectedOption-1);
+          }
+          break;
+        }
+        elems[dropdownCtrl.selectedOption].focus();
+      });
+    }
+  };
+})
+
 .directive('dropdownToggle', function() {
   return {
     require: '?^dropdown',