3 * A floating menu widget for the filter list
5 * @extends OO.ui.MenuSelectWidget
8 * @param {mw.rcfilters.Controller} controller Controller
9 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
10 * @param {Object} [config] Configuration object
11 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
12 * @cfg {jQuery} [$footer] An optional footer for the menu
14 mw
.rcfilters
.ui
.MenuSelectWidget
= function MwRcfiltersUiMenuSelectWidget( controller
, model
, config
) {
17 config
= config
|| {};
19 this.controller
= controller
;
23 this.$overlay
= config
.$overlay
|| this.$element
;
24 this.$footer
= config
.$footer
;
25 this.$body
= $( '<div>' )
26 .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
29 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.call( this, $.extend( {
30 $autoCloseIgnore
: this.$overlay
,
35 .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
37 this.setClippableElement( this.$body
);
38 this.setClippableContainer( this.$element
);
40 header
= new mw
.rcfilters
.ui
.FilterMenuHeaderWidget(
44 $overlay
: this.$overlay
48 this.noResults
= new OO
.ui
.LabelWidget( {
49 label
: mw
.msg( 'rcfilters-filterlist-noresults' ),
50 classes
: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
54 .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
55 .append( header
.$element
)
58 .append( this.$group
, this.noResults
.$element
)
64 .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
71 OO
.inheritClass( mw
.rcfilters
.ui
.MenuSelectWidget
, OO
.ui
.MenuSelectWidget
);
76 * @event itemVisibilityChange
78 * Item visibility has changed
84 * @fires itemVisibilityChange
87 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.updateItemVisibility = function () {
89 itemWasSelected
= false,
90 inputVal
= this.$input
.val(),
91 items
= this.getItems();
93 // Since the method hides/shows items, we don't want to
94 // call it unless the input actually changed
95 if ( this.inputValue
!== inputVal
) {
97 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.prototype.updateItemVisibility
.call( this );
99 // Select the first item in the list
100 for ( i
= 0; i
< items
.length
; i
++ ) {
102 !( items
[ i
] instanceof OO
.ui
.MenuSectionOptionWidget
) &&
103 items
[ i
].isVisible()
105 itemWasSelected
= true;
106 this.selectItem( items
[ i
] );
111 if ( !itemWasSelected
) {
112 this.selectItem( null );
116 this.inputValue
= inputVal
;
118 this.emit( 'itemVisibilityChange' );
123 * Override the item matcher to use the model's match process
127 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.getItemMatcher = function ( s
) {
128 var results
= this.model
.findMatches( s
, true );
130 return function ( item
) {
131 return results
.indexOf( item
.getModel() ) > -1;
138 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.onKeyDown = function ( e
) {
140 currentItem
= this.getHighlightedItem() || this.getSelectedItem();
143 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.prototype.onKeyDown
.call( this, e
);
145 // We want to select the item on arrow movement
146 // rather than just highlight it, like the menu
148 if ( !this.isDisabled() && this.isVisible() ) {
149 switch ( e
.keyCode
) {
151 case OO
.ui
.Keys
.LEFT
:
153 nextItem
= this.getRelativeSelectableItem( currentItem
, -1 );
155 case OO
.ui
.Keys
.DOWN
:
156 case OO
.ui
.Keys
.RIGHT
:
158 nextItem
= this.getRelativeSelectableItem( currentItem
, 1 );
162 nextItem
= nextItem
&& nextItem
.constructor.static.selectable
?
165 // Select the next item
166 this.selectItem( nextItem
);
171 * Scroll to the top of the menu
173 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.scrollToTop = function () {
174 this.$body
.scrollTop( 0 );