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

Fix general and usability issues, add some more features

Browse Source 
* Scoll to currently highlighted item if its not visible.
* Fix navigation when list is filtered
* Add support for selecting highlighted item by pressing enter
This commit is contained in:
Abijeet
2022-12-16 20:13:53 +05:30
committed by Niklas Laxström
parent 31bd5c43db
commit 453cc37341
2 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/jquery.uls.languagefilter.js
View File

@@ -106,7 +106,10 @@
query = ( this.$element.val() || '' ).trim().toLowerCase();
if ( this.selectedLanguage ) {
var highlightedLanguage = this.options.lcd.getHighlightedLanguageCode();
if ( highlightedLanguage ) {
this.options.onSelect( highlightedLanguage, e );
} else if ( this.selectedLanguage ) {
// this.selectLanguage will be populated from a matching search
this.options.onSelect( this.selectedLanguage, e );
} else if ( this.options.languages[ query ] ) {

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

@@ -70,21 +70,27 @@
this.listen();
}
// Adapted from https://stackoverflow.com/a/41754707/903324
function isLanguageFullyVisible( $el, $holder ) {
var elementRect = $el.get( 0 ).getBoundingClientRect();
var holderRect = $holder.get( 0 ).getBoundingClientRect();
return elementRect.top <= holderRect.top ?
holderRect.top <= elementRect.top :
holderRect.bottom <= elementRect.height;
}
LanguageCategoryDisplay.prototype = {
constructor: LanguageCategoryDisplay,
/**
* Returns a jQuery object containing a collection of all the
* Returns a jQuery object containing a collection of all the visible
* language option <li> elements
*
* @return {jQuery}
*/
getLanguageOptionListItems: function () {
if ( !this.$languageOptionListItems ) {
this.$languageOptionListItems = this.$element.find( 'li[data-code]' );
}
return this.$languageOptionListItems;
return this.$element.find( '.uls-lcd-region-section:not(.hide)' ).find( 'li[data-code]' );
},
/**
@@ -138,8 +144,24 @@
* language option <li> element (where n = navigation index)
*/
highlightLanguageOption: function () {
this.getLanguageOptionListItems().removeClass( 'language-option--highlighted' );
this.getLanguageOptionListItems().eq( this.navigationIndex ).addClass( 'language-option--highlighted' );
var $listItems = this.getLanguageOptionListItems();
$listItems.removeClass( 'language-option--highlighted' );
var $selectedItem = $listItems.eq( this.navigationIndex );
$selectedItem.addClass( 'language-option--highlighted' );
if ( !isLanguageFullyVisible( $selectedItem, this.$element ) ) {
$selectedItem.get( 0 ).scrollIntoView( false );
}
},
getHighlightedLanguageCode: function () {
if ( this.navigationIndex ) {
var $selectedItem = this.getLanguageOptionListItems().eq( this.navigationIndex );
return $selectedItem.data( 'code' );
}
return null;
},
/**
@@ -503,16 +525,16 @@
listen: function () {
var lcd = this;
this.$element.on( 'mouseenter', '.row li', function () {
lcd.navigationIndex = $( this ).index();
lcd.highlightLanguageOption();
} );
this.$element.on( 'mouseleave', '.row li', function () {
if ( lcd.navigationIndex === $( this ).index() ) {
lcd.navigationIndex = null;
lcd.getLanguageOptionListItems().removeClass( 'language-option--highlighted' );
}
this.$element.on( 'mouseenter', 'li[data-code]', function () {
var $listItems = lcd.getLanguageOptionListItems();
// Remove the previous option, and then highlight the current one.
$listItems.removeClass( 'language-option--highlighted' );
var $self = $( this );
$self.addClass( 'language-option--highlighted' );
lcd.navigationIndex = $listItems.index( $self );
} ).on( 'mouseleave', 'li[data-code]', function () {
$( this ).removeClass( 'language-option--highlighted' );
lcd.navigationIndex = null;
} );
if ( this.options.clickhandler ) {