mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-25 11:16:51 +00:00
Search widget key commands
Objective: * Enable navigating search results using keyboard up and down keys * Bubble up query input enter events Changes: ve.ui.SearchWidget.js * Route query input events to emit * Add handler for keydown events * Support navigating through the list of results using vertical arrow keys Change-Id: Ia2e4b27075a8ab2e29a69294e9f7847e8f5a3f83
This commit is contained in:
parent
8159566141
commit
9a7913daa2
|
@ -35,8 +35,9 @@ ve.ui.SearchWidget = function VeUiSearchWidget( config ) {
|
|||
this.$results = this.$$( '<div>' );
|
||||
|
||||
// Events
|
||||
this.query.connect( this, { 'change': 'onQueryChange' } );
|
||||
this.query.connect( this, { 'change': 'onQueryChange', 'enter': [ 'emit', 'enter' ] } );
|
||||
this.results.connect( this, { 'select': 'onResultsSelect' } );
|
||||
this.query.$.on( 'keydown', ve.bind( this.onQueryKeydown, this ) );
|
||||
|
||||
// Initialization
|
||||
this.$query
|
||||
|
@ -61,8 +62,28 @@ ve.inheritClass( ve.ui.SearchWidget, ve.ui.Widget );
|
|||
* @param {Object|null} item Item data or null if no item is selected
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event enter
|
||||
*/
|
||||
|
||||
/* Methods */
|
||||
|
||||
/**
|
||||
* Handle query key down events.
|
||||
*
|
||||
* @method
|
||||
* @param {jQuery.Event} e Key down event
|
||||
*/
|
||||
ve.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
|
||||
var selectedItem,
|
||||
dir = e.which === ve.Keys.DOWN ? 1 : ( e.which === ve.Keys.UP ? -1 : 0 );
|
||||
|
||||
if ( dir ) {
|
||||
selectedItem = this.results.getSelectedItem();
|
||||
this.results.selectItem( this.results.getRelativeSelectableItem( selectedItem, dir ) );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle select widget select events.
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue