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 {Object[]} [footers] An array of objects defining the footers for
13 * this menu, with a definition whether they appear per specific views.
14 * The expected structure is:
17 * name: {string} A unique name for the footer object
18 * $element: {jQuery} A jQuery object for the content of the footer
19 * views: {string[]} Optional. An array stating which views this footer is
20 * active on. Use null or omit to display this on all views.
24 mw
.rcfilters
.ui
.MenuSelectWidget
= function MwRcfiltersUiMenuSelectWidget( controller
, model
, config
) {
27 config
= config
|| {};
29 this.controller
= controller
;
31 this.currentView
= '';
33 this.userSelecting
= false;
36 this.$overlay
= config
.$overlay
|| this.$element
;
37 this.$body
= $( '<div>' )
38 .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
42 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.call( this, $.extend( {
43 $autoCloseIgnore
: this.$overlay
,
48 .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
50 this.setClippableElement( this.$body
);
51 this.setClippableContainer( this.$element
);
53 header
= new mw
.rcfilters
.ui
.FilterMenuHeaderWidget(
57 $overlay
: this.$overlay
61 this.noResults
= new OO
.ui
.LabelWidget( {
62 label
: mw
.msg( 'rcfilters-filterlist-noresults' ),
63 classes
: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
67 this.model
.connect( this, {
68 update
: 'onModelUpdate',
69 initialize
: 'onModelInitialize'
74 .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
75 .append( header
.$element
)
78 .append( this.$group
, this.noResults
.$element
)
81 // Append all footers; we will control their visibility
83 config
.footers
= config
.footers
|| [];
84 config
.footers
.forEach( function ( footerData
) {
86 // Wrap the element with our own footer wrapper
87 $element
: $( '<div>' )
88 .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
89 .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer-' + footerData
.name
)
90 .append( footerData
.$element
),
91 views
: footerData
.views
94 this.footers
.push( adjustedData
);
95 this.$element
.append( adjustedData
.$element
);
98 // Switch to the correct view
99 this.switchView( this.model
.getCurrentView() );
104 OO
.inheritClass( mw
.rcfilters
.ui
.MenuSelectWidget
, OO
.ui
.MenuSelectWidget
);
109 * @event itemVisibilityChange
111 * Item visibility has changed
117 * Respond to model update event
119 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.onModelUpdate = function () {
121 this.switchView( this.model
.getCurrentView() );
125 * Respond to model initialize event. Populate the menu from the model
127 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.onModelInitialize = function () {
130 groups
= this.model
.getFilterGroups();
135 // Count groups per view
136 $.each( groups
, function ( groupName
, groupModel
) {
137 if ( !groupModel
.isHidden() ) {
138 viewGroupCount
[ groupModel
.getView() ] = viewGroupCount
[ groupModel
.getView() ] || 0;
139 viewGroupCount
[ groupModel
.getView() ]++;
143 $.each( groups
, function ( groupName
, groupModel
) {
144 var currentItems
= [],
145 view
= groupModel
.getView();
147 if ( !groupModel
.isHidden() ) {
148 if ( viewGroupCount
[ view
] > 1 ) {
149 // Only add a section header if there is more than
153 new mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget(
157 $overlay
: widget
.$overlay
164 widget
.model
.getGroupFilters( groupName
).forEach( function ( filterItem
) {
166 new mw
.rcfilters
.ui
.FilterMenuOptionWidget(
170 $overlay
: widget
.$overlay
176 // Cache the items per view, so we can switch between them
177 // without rebuilding the widgets each time
178 widget
.views
[ view
] = widget
.views
[ view
] || [];
179 widget
.views
[ view
] = widget
.views
[ view
].concat( currentItems
);
183 this.switchView( this.model
.getCurrentView() );
189 * @param {string} [viewName] View name. If not given, default is used.
191 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.switchView = function ( viewName
) {
192 viewName
= viewName
|| 'default';
194 if ( this.views
[ viewName
] && this.currentView
!== viewName
) {
196 this.addItems( this.views
[ viewName
] );
197 this.updateFooterVisibility( viewName
);
200 .data( 'view', viewName
)
201 .removeClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + this.currentView
)
202 .addClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + viewName
);
204 this.currentView
= viewName
;
210 * Go over the available footers and decide which should be visible
213 * @param {string} [currentView] Current view
215 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.updateFooterVisibility = function ( currentView
) {
216 currentView
= currentView
|| this.model
.getCurrentView();
218 this.footers
.forEach( function ( data
) {
219 data
.$element
.toggle(
220 // This footer should only be shown if it is configured
221 // for all views or for this specific view
222 !data
.views
|| data
.views
.length
=== 0 || data
.views
.indexOf( currentView
) > -1
228 * @fires itemVisibilityChange
231 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.updateItemVisibility = function () {
233 itemWasSelected
= false,
234 inputVal
= this.$input
.val(),
235 items
= this.getItems();
237 // Since the method hides/shows items, we don't want to
238 // call it unless the input actually changed
240 !this.userSelecting
&&
241 this.inputValue
!== inputVal
244 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.prototype.updateItemVisibility
.call( this );
246 // Select the first item in the list
247 for ( i
= 0; i
< items
.length
; i
++ ) {
249 !( items
[ i
] instanceof OO
.ui
.MenuSectionOptionWidget
) &&
250 items
[ i
].isVisible()
252 itemWasSelected
= true;
253 this.selectItem( items
[ i
] );
258 if ( !itemWasSelected
) {
259 this.selectItem( null );
263 this.inputValue
= inputVal
;
265 this.emit( 'itemVisibilityChange' );
270 * Get the option widget that matches the model given
272 * @param {mw.rcfilters.dm.ItemModel} model Item model
273 * @return {mw.rcfilters.ui.ItemMenuOptionWidget} Option widget
275 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.getItemFromModel = function ( model
) {
276 return this.views
[ model
.getGroupModel().getView() ].filter( function ( item
) {
277 return item
.getName() === model
.getName();
282 * Override the item matcher to use the model's match process
286 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.getItemMatcher = function ( s
) {
287 var results
= this.model
.findMatches( s
, true );
289 return function ( item
) {
290 return results
.indexOf( item
.getModel() ) > -1;
297 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.onKeyDown = function ( e
) {
299 currentItem
= this.getHighlightedItem() || this.getSelectedItem();
302 mw
.rcfilters
.ui
.MenuSelectWidget
.parent
.prototype.onKeyDown
.call( this, e
);
304 // We want to select the item on arrow movement
305 // rather than just highlight it, like the menu
307 if ( !this.isDisabled() && this.isVisible() ) {
308 switch ( e
.keyCode
) {
310 case OO
.ui
.Keys
.LEFT
:
312 nextItem
= this.getRelativeSelectableItem( currentItem
, -1 );
314 case OO
.ui
.Keys
.DOWN
:
315 case OO
.ui
.Keys
.RIGHT
:
317 nextItem
= this.getRelativeSelectableItem( currentItem
, 1 );
321 nextItem
= nextItem
&& nextItem
.constructor.static.selectable
?
324 // Select the next item
325 this.selectItem( nextItem
);
330 * Scroll to the top of the menu
332 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.scrollToTop = function () {
333 this.$body
.scrollTop( 0 );
337 * Set whether the user is currently selecting an item.
338 * This is important when the user selects an item that is in between
339 * different views, and makes sure we do not re-select a different
340 * item (like the item on top) when this is happening.
342 * @param {boolean} isSelecting User is selecting
344 mw
.rcfilters
.ui
.MenuSelectWidget
.prototype.setUserSelecting = function ( isSelecting
) {
345 this.userSelecting
= !!isSelecting
;