add keyboard support for [enter] and [esc]

OrdnanceSurvey · Jul 3, 2015 · b81f8a9 · b81f8a9
1 parent 447b933
commit b81f8a9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/dist/osel-search-templates.js b/dist/osel-search-templates.js
@@ -28,7 +28,7 @@ angular.module('osel-search').run(['$templateCache', function($templateCache) {
     "             data-search-result-index=\"{{$index}}\"\n" +
     "             data-provider-id=\"{{column.providerId}}\"\n" +
     "             tabindex=\"0\"\n" +
-    "             ng-keydown=\"keyFromSearchResult($event, result, column.providerId)\">\n" +
+    "             ng-keydown=\"keyFromSearchResult($event, result, column.providerId, searchProviders[column.providerId].onSelect)\">\n" +
     "            <p ng-if=\"result.text\">{{result.text}}</p>\n" +
     "        </div>\n" +
     "    </div>\n" +

diff --git a/dist/osel-search.js b/dist/osel-search.js
@@ -727,14 +727,11 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
 
 
             // move up/down/left/right from current focused search result
-            $scope.keyFromSearchResult = function keyFromSearchResult($event, result, providerId) {
+            // also listen for enter/esc to select result or hide search results
+            $scope.keyFromSearchResult = function keyFromSearchResult($event, result, providerId, onSelect) {
 
                 var neighbour;
 
-                // 37 left
-                // 38 up
-                // 39 right
-                // 40 down
                 if ($event.keyCode === 37) { // left
                     neighbour = getNeighbour($window.document.activeElement, -1, 0);
                     focusResult(neighbour.result, neighbour.providerId);
@@ -756,6 +753,10 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
                         console.log(neighbour);
                         focusResult(neighbour.result, neighbour.providerId);
                     }
+                } else if ($event.keyCode === 13) { // enter
+                    $scope.selectResult(result, onSelect);
+                } else if ($event.keyCode === 27) { // escape
+                    $scope.searchHidden = true;
                 }
 
                 return neighbour;
@@ -770,6 +771,7 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
                     });
                 }
             });
+
         }
     };
 };

diff --git a/dist/osel-search.min.js b/dist/osel-search.min.js
@@ -203,15 +203,13 @@ var q=function(a,b,c){
 var d=e("orderObjectBy")(g.searchResults,"received").filter(function(a){return!a.error&&!a.inProgress&&a.results.length>0}),h=d.map(function(a){return a.providerId}),i=$(a).attr("data-provider-id"),j=h.indexOf(i),k=h[j+b];// add the offset to go left or right
 0>j+b?k=h[0]:j+b>d.length-1?k=h[d.length-1]:d[k]&&(d[k].inProgress||d[k].error)&&(k=i);var l=f.parseInt($(a).attr("data-search-result-index")),m=l+c;return 0>l+c?m=0:l+c>g.searchResults[k].results.length-1&&(m=g.searchResults[k].results.length-1),{result:g.searchResults[k].results[m],providerId:k}};
 // move up/down/left/right from current focused search result
-g.keyFromSearchResult=function(a,b,c){var d;
-// 37 left
-// 38 up
-// 39 right
-// 40 down
-// left
+// also listen for enter/esc to select result or hide search results
+g.keyFromSearchResult=function(a,b,c,d){var e;// left
 // right
 // down
 // up
-return 37===a.keyCode?(d=q(f.document.activeElement,-1,0),o(d.result,d.providerId)):39===a.keyCode?(d=q(f.document.activeElement,1,0),o(d.result,d.providerId)):40===a.keyCode?(d=q(f.document.activeElement,0,1),console.log(d),o(d.result,d.providerId)):38===a.keyCode&&(0===g.searchResults[c].results.indexOf(b)?p():(d=q(f.document.activeElement,0,-1),console.log(d),o(d.result,d.providerId))),d},
+// enter
+// escape
+return 37===a.keyCode?(e=q(f.document.activeElement,-1,0),o(e.result,e.providerId)):39===a.keyCode?(e=q(f.document.activeElement,1,0),o(e.result,e.providerId)):40===a.keyCode?(e=q(f.document.activeElement,0,1),console.log(e),o(e.result,e.providerId)):38===a.keyCode?0===g.searchResults[c].results.indexOf(b)?p():(e=q(f.document.activeElement,0,-1),console.log(e),o(e.result,e.providerId)):13===a.keyCode?g.selectResult(b,d):27===a.keyCode&&(g.searchHidden=!0),e},
 // hide search resutls if user clicks outdside the searchbox or outside the search results
 $("html").on("click",function(a){var b=$(a.target);b.closest(".osel-search").length||b.closest(".osel-search-results").length||d(function(){g.searchHidden=!0})})}}};angular.module("osel-search").directive("oselSearch",dependencies.concat([oselSearchDirective]));
diff --git a/src/directives/osel-search-directive.js b/src/directives/osel-search-directive.js
@@ -242,14 +242,11 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
 
 
             // move up/down/left/right from current focused search result
-            $scope.keyFromSearchResult = function keyFromSearchResult($event, result, providerId) {
+            // also listen for enter/esc to select result or hide search results
+            $scope.keyFromSearchResult = function keyFromSearchResult($event, result, providerId, onSelect) {
 
                 var neighbour;
 
-                // 37 left
-                // 38 up
-                // 39 right
-                // 40 down
                 if ($event.keyCode === 37) { // left
                     neighbour = getNeighbour($window.document.activeElement, -1, 0);
                     focusResult(neighbour.result, neighbour.providerId);
@@ -271,6 +268,10 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
                         console.log(neighbour);
                         focusResult(neighbour.result, neighbour.providerId);
                     }
+                } else if ($event.keyCode === 13) { // enter
+                    $scope.selectResult(result, onSelect);
+                } else if ($event.keyCode === 27) { // escape
+                    $scope.searchHidden = true;
                 }
 
                 return neighbour;
@@ -285,6 +286,7 @@ var oselSearchDirective = function oselSearchDirective(observeOnScope, $http, rx
                     });
                 }
             });
+
         }
     };
 };

diff --git a/src/templates/osel-search.html b/src/templates/osel-search.html
@@ -24,7 +24,7 @@
              data-search-result-index="{{$index}}"
              data-provider-id="{{column.providerId}}"
              tabindex="0"
-             ng-keydown="keyFromSearchResult($event, result, column.providerId)">
+             ng-keydown="keyFromSearchResult($event, result, column.providerId, searchProviders[column.providerId].onSelect)">
             <p ng-if="result.text">{{result.text}}</p>
         </div>
     </div>