yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V8: Add keyboard support for navigating search results (#5500)

Browse Source
This commit is contained in:
Kenn Jacobsen
2019-06-23 12:30:17 +02:00
committed by Sebastiaan Janssen
parent 255bd10296
commit a7da3d741f
2 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
View File

@@ -22,13 +22,16 @@
vm.search = search;
vm.clickItem = clickItem;
vm.clearSearch = clearSearch;
vm.handleKeyUp = handleKeyUp;
vm.handleKeyDown = handleKeyDown;
vm.closeSearch = closeSearch;
vm.focusSearch = focusSearch;
//we need to capture the focus before this element is initialized.
vm.focusBeforeOpening = focusService.getLastKnownFocus();
vm.activeResult = null;
vm.activeResultGroup = null;
function onInit() {
vm.searchQuery = "";
vm.searchResults = [];
@@ -72,14 +75,66 @@
* Handles all keyboard events
* @param {object} event
*/
function handleKeyUp(event) {
event.stopPropagation();
event.preventDefault();
function handleKeyDown(event) {
// esc
if(event.keyCode === 27) {
event.stopPropagation();
event.preventDefault();
closeSearch();
return;
}
// up/down (navigate search results)
if (vm.hasResults && (event.keyCode === 38 || event.keyCode === 40)) {
event.stopPropagation();
event.preventDefault();
var allGroups = _.values(vm.searchResults);
var down = event.keyCode === 40;
if (vm.activeResultGroup === null) {
// it's the first time navigating, pick the appropriate group and result
// - first group and first result when navigating down
// - last group and last result when navigating up
vm.activeResultGroup = down ? _.first(allGroups) : _.last(allGroups);
vm.activeResult = down ? _.first(vm.activeResultGroup.results) : _.last(vm.activeResultGroup.results);
}
else if (down) {
// handle navigation down through the groups and results
if (vm.activeResult === _.last(vm.activeResultGroup.results)) {
if (vm.activeResultGroup === _.last(allGroups)) {
vm.activeResultGroup = _.first(allGroups);
}
else {
vm.activeResultGroup = allGroups[allGroups.indexOf(vm.activeResultGroup) + 1];
}
vm.activeResult = _.first(vm.activeResultGroup.results);
}
else {
vm.activeResult = vm.activeResultGroup.results[vm.activeResultGroup.results.indexOf(vm.activeResult) + 1];
}
}
else {
// handle navigation up through the groups and results
if (vm.activeResult === _.first(vm.activeResultGroup.results)) {
if (vm.activeResultGroup === _.first(allGroups)) {
vm.activeResultGroup = _.last(allGroups);
}
else {
vm.activeResultGroup = allGroups[allGroups.indexOf(vm.activeResultGroup) - 1];
}
vm.activeResult = _.last(vm.activeResultGroup.results);
}
else {
vm.activeResult = vm.activeResultGroup.results[vm.activeResultGroup.results.indexOf(vm.activeResult) - 1];
}
}
$timeout(function () {
var resultElementLink = angular.element(".umb-search-item[active-result='true'] .umb-search-result__link");
resultElementLink[0].focus();
});
}
}

6
src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
View File

@@ -1,5 +1,5 @@
<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keyup="vm.handleKeyUp($event)">
<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keydown="vm.handleKeyDown($event)">
<div class="flex items-center">
<i class="umb-search-input-icon icon-search" ng-click="vm.focusSearch()"></i>
@@ -18,7 +18,7 @@
<div class="umb-search-group" ng-repeat="(key, group) in vm.searchResults">
<div class="umb-search-group__title">{{key}}</div>
<ul class="umb-search-items">
<li class="umb-search-item" ng-repeat="result in group.results">
<li class="umb-search-item" ng-repeat="result in group.results" active-result="{{result === vm.activeResult}}">
<a class="umb-search-result__link" ng-href="#/{{result.editorPath}}" ng-click="vm.clickItem(result)">
<i class="umb-search-result__icon {{result.icon}}"></i>
<span class="umb-search-result__meta">
@@ -31,4 +31,4 @@
</div>
</div>
</div>
</div>