bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable up/down keys for navigating the ULS menu

Browse Source
This commit is contained in:
NikG
2022-11-07 12:53:39 +02:00
committed by Niklas Laxström
parent 0a0ebbf770
commit cd1452eb76
3 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/jquery.uls.lcd.js
View File

@@ -59,6 +59,11 @@
this.$cachedQuicklist = null;
this.groupByRegionOverride = null;
// The index of the language option that is currently visited using arrow key navigation
// Can take values in the [0, languageOptionListItemsLength - 1] range for top to bottom navigation,
// or in the [-1, -languageOptionListItemsLength + 1] range for bottom to top navigation.
this.navigationIndex = null
this.render();
this.listen();
}
@@ -66,6 +71,74 @@
LanguageCategoryDisplay.prototype = {
constructor: LanguageCategoryDisplay,
/**
* Returns a jQuery object containing a collection of all the
* language option <li> elements
* @return {jQuery}
*/
getLanguageOptionListItems() {
return this.$element.find( 'li[data-code]' );
},
/**
* Increases the keyboard navigation index by one and applies a specific
* class to the n-th language option <li> element (where n = navigation index)
* Currently used as event handler for the arrow down 'keydown' event, inside
* LanguageFilter.
*/
navigateDown: function () {
// We support navigation starting both from the top and the bottom of the language list.
// The navigation should stop when the last language option is already highlighted (for top to bottom navigation).
// For top to bottom navigation, that happens when navigation index is equal to languageOptionListItemsLength - 1.
// For bottom to top navigation, that happens when navigation index is equal to -1.
if ( this.navigationIndex === this.getLanguageOptionListItems().length - 1 || this.navigationIndex === -1 ) {
return;
}
if ( this.navigationIndex === null ) {
this.navigationIndex = 0
} else {
this.navigationIndex++;
}
this.highlightLanguageOption();
},
/**
* Decreases the keyboard navigation index by one and applies a specific
* class to the n-th language option <li> element (where n = navigation index)
* Currently used as event handler for the arrow down 'keydown' event, inside
* LanguageFilter.
*/
navigateUp: function () {
// We support navigation starting both from the top and the bottom of the language list.
// The navigation should stop when the first language option is already highlighted (for bottom to top navigation).
// For top to bottom navigation, that happens when navigation index is equal to 0.
// For bottom to top navigation, that happens when navigation index is equal to -languageOptionListItemsLength + 1.
if ( this.navigationIndex === 0 || this.navigationIndex === -this.getLanguageOptionListItems().length + 1 ) {
return;
}
this.navigationIndex--
this.highlightLanguageOption();
},
/**
* Adds a specific class ("language-option--highlighted") only to the n-th
* language option <li> element (where n = navigation index)
*/
highlightLanguageOption() {
this.getLanguageOptionListItems().removeClass( 'language-option--highlighted' );
this.getLanguageOptionListItems().eq( this.navigationIndex ).addClass( 'language-option--highlighted' );
},
/**
* Resets the navigation index to null.
* Currently used inside LanguageFilter search method, to reset the keyboard navigation
*/
resetNavigationIndex: function () {
this.navigationIndex = null;
},
/**
* Adds language to the language list.
*