mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/TemplateData
synced 2024-09-23 10:21:45 +00:00
Merge "Add missing keyboard navigation for param/language lists"
This commit is contained in:
commit
32475e3da2
|
@ -1102,13 +1102,15 @@ Dialog.prototype.changeParamPropertyInput = function ( paramKey, propName, value
|
|||
*/
|
||||
Dialog.prototype.addParamToSelectWidget = function ( paramKey ) {
|
||||
var data = this.model.getParamData( paramKey );
|
||||
|
||||
this.paramSelect.addItems( [ new ParamWidget( {
|
||||
key: paramKey,
|
||||
label: this.model.getParamValue( paramKey, 'label', this.language ),
|
||||
aliases: data.aliases,
|
||||
description: this.model.getParamValue( paramKey, 'description', this.language )
|
||||
} ) ] );
|
||||
} )
|
||||
// Forward keyboard-triggered events from the OptionWidget to the SelectWidget
|
||||
.connect( this.paramSelect, { choose: [ 'emit', 'choose' ] } )
|
||||
] );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -12,6 +12,12 @@ function LanguageResultWidget( config ) {
|
|||
// Parent constructor
|
||||
LanguageResultWidget.parent.call( this, config );
|
||||
|
||||
// Mixin constructors
|
||||
OO.ui.mixin.TabIndexedElement.call( this );
|
||||
|
||||
// Events
|
||||
this.$element.on( 'keydown', this.onKeyDown.bind( this ) );
|
||||
|
||||
// Initialization
|
||||
this.$element.addClass( 'tdg-languageResultWidget' );
|
||||
this.$name = $( '<div>' ).addClass( 'tdg-languageResultWidget-name' );
|
||||
|
@ -22,9 +28,20 @@ function LanguageResultWidget( config ) {
|
|||
/* Inheritance */
|
||||
|
||||
OO.inheritClass( LanguageResultWidget, OO.ui.OptionWidget );
|
||||
OO.mixinClass( LanguageResultWidget, OO.ui.mixin.TabIndexedElement );
|
||||
|
||||
/* Methods */
|
||||
|
||||
/**
|
||||
* @param {jQuery.Event} e Key down event
|
||||
* @fires choose
|
||||
*/
|
||||
LanguageResultWidget.prototype.onKeyDown = function ( e ) {
|
||||
if ( e.which === OO.ui.Keys.ENTER ) {
|
||||
this.emit( 'choose', this );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update labels based on query
|
||||
*
|
||||
|
|
|
@ -88,7 +88,8 @@ LanguageSearchWidget.prototype.addResults = function () {
|
|||
hasQuery = !!query.length,
|
||||
items = [];
|
||||
|
||||
this.results.clearItems();
|
||||
var results = this.getResults();
|
||||
results.clearItems();
|
||||
|
||||
this.filteredLanguageResultWidgets.forEach( function ( languageResult ) {
|
||||
var data = languageResult.getData();
|
||||
|
@ -108,13 +109,16 @@ LanguageSearchWidget.prototype.addResults = function () {
|
|||
.updateLabel( query, matchedProperty, compare )
|
||||
.setSelected( false )
|
||||
.setHighlighted( false )
|
||||
// Forward keyboard-triggered events from the OptionWidget to the SelectWidget
|
||||
.off( 'choose' )
|
||||
.connect( results, { choose: [ 'emit', 'choose' ] } )
|
||||
);
|
||||
}
|
||||
} );
|
||||
|
||||
this.results.addItems( items );
|
||||
results.addItems( items );
|
||||
if ( hasQuery ) {
|
||||
this.results.highlightItem( this.results.findFirstSelectableItem() );
|
||||
results.highlightItem( results.findFirstSelectableItem() );
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -16,12 +16,16 @@ function ParamWidget( data, config ) {
|
|||
|
||||
// Mixin constructors
|
||||
OO.ui.mixin.DraggableElement.call( this, $.extend( { $handle: this.$icon } ) );
|
||||
OO.ui.mixin.TabIndexedElement.call( this, { $tabIndexed: this.$element } );
|
||||
|
||||
this.key = data.key;
|
||||
this.label = data.label;
|
||||
this.aliases = data.aliases || [];
|
||||
this.description = data.description;
|
||||
|
||||
// Events
|
||||
this.$element.on( 'keydown', this.onKeyDown.bind( this ) );
|
||||
|
||||
// Initialize
|
||||
this.$element.addClass( 'tdg-templateDataParamWidget' );
|
||||
this.buildParamLabel();
|
||||
|
@ -32,6 +36,17 @@ function ParamWidget( data, config ) {
|
|||
OO.inheritClass( ParamWidget, OO.ui.DecoratedOptionWidget );
|
||||
|
||||
OO.mixinClass( ParamWidget, OO.ui.mixin.DraggableElement );
|
||||
OO.mixinClass( ParamWidget, OO.ui.mixin.TabIndexedElement );
|
||||
|
||||
/**
|
||||
* @param {jQuery.Event} e Key down event
|
||||
* @fires choose
|
||||
*/
|
||||
ParamWidget.prototype.onKeyDown = function ( e ) {
|
||||
if ( e.which === OO.ui.Keys.ENTER ) {
|
||||
this.emit( 'choose', this );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Build the parameter label in the parameter select widget
|
||||
|
|
Loading…
Reference in a new issue