3 * List displaying all filter groups
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.GroupWidget
7 * @mixins OO.ui.mixin.LabelElement
10 * @param {mw.rcfilters.Controller} controller Controller
11 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
12 * @param {Object} config Configuration object
14 mw
.rcfilters
.ui
.FiltersListWidget
= function MwRcfiltersUiFiltersListWidget( controller
, model
, config
) {
15 config
= config
|| {};
18 mw
.rcfilters
.ui
.FiltersListWidget
.parent
.call( this, config
);
20 OO
.ui
.mixin
.GroupWidget
.call( this, config
);
21 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {}, config
, {
23 .addClass( 'mw-rcfilters-ui-filtersListWidget-title' )
26 this.controller
= controller
;
28 this.$overlay
= config
.$overlay
|| this.$element
;
32 this.highlightButton
= new OO
.ui
.ButtonWidget( {
33 label
: mw
.message( 'rcfilters-highlightbutton-title' ).text(),
34 classes
: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
37 this.noResultsLabel
= new OO
.ui
.LabelWidget( {
38 label
: mw
.msg( 'rcfilters-filterlist-noresults' ),
39 classes
: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
43 this.highlightButton
.connect( this, { click
: 'onHighlightButtonClick' } );
44 this.model
.connect( this, {
45 initialize
: 'onModelInitialize',
46 highlightChange
: 'onHighlightChange'
50 this.showNoResultsMessage( false );
52 .addClass( 'mw-rcfilters-ui-filtersListWidget' )
55 .addClass( 'mw-rcfilters-ui-table' )
56 .addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
59 .addClass( 'mw-rcfilters-ui-row' )
62 .addClass( 'mw-rcfilters-ui-cell' )
63 .addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
64 .append( this.$label
),
66 .addClass( 'mw-rcfilters-ui-cell' )
67 .addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
68 .append( this.highlightButton
.$element
)
73 .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
74 this.noResultsLabel
.$element
80 OO
.inheritClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.Widget
);
81 OO
.mixinClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.mixin
.GroupWidget
);
82 OO
.mixinClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.mixin
.LabelElement
);
87 * Respond to initialize event from the model
89 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onModelInitialize = function () {
97 Object
.keys( this.model
.getFilterGroups() ).map( function ( groupName
) {
98 var groupWidget
= new mw
.rcfilters
.ui
.FilterGroupWidget(
100 widget
.model
.getGroup( groupName
),
102 $overlay
: widget
.$overlay
106 widget
.groups
[ groupName
] = groupWidget
;
112 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onHighlightChange = function ( highlightEnabled
) {
113 this.highlightButton
.setActive( highlightEnabled
);
117 * Respond to highlight button click
119 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onHighlightButtonClick = function () {
120 this.controller
.toggleHighlight();
124 * Find the filter item widget that corresponds to the item name
126 * @param {string} itemName Filter name
127 * @return {mw.rcfilters.ui.FilterItemWidget} Filter widget
129 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.getItemWidget = function ( itemName
) {
130 var filterItem
= this.model
.getItemByName( itemName
),
132 groupWidget
= this.groups
[ filterItem
.getGroupName() ];
134 // Find the item inside the group
135 return groupWidget
.getItemWidget( itemName
);
139 * Get the current selection
141 * @return {string|null} Selected filter. Null if none is selected.
143 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.getSelectedFilter = function () {
144 return this.selected
;
148 * Mark an item widget as selected
150 * @param {string} itemName Filter name
152 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.select = function ( itemName
) {
155 if ( this.selected
!== itemName
) {
157 if ( this.selected
) {
158 filterWidget
= this.getItemWidget( this.selected
);
159 filterWidget
.toggleSelected( false );
163 this.selected
= itemName
;
164 if ( this.selected
) {
165 filterWidget
= this.getItemWidget( this.selected
);
166 filterWidget
.toggleSelected( true );
172 * Reset selection and remove selected states from all items
174 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.resetSelection = function () {
175 if ( this.selected
!== null ) {
176 this.selected
= null;
177 this.getItems().forEach( function ( groupWidget
) {
178 groupWidget
.getItems().forEach( function ( filterItemWidget
) {
179 filterItemWidget
.toggleSelected( false );
186 * Switch between showing the 'no results' message for filtering results or the result list.
188 * @param {boolean} showNoResults Show no results message
190 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.showNoResultsMessage = function ( showNoResults
) {
191 this.noResultsLabel
.toggle( !!showNoResults
);
192 this.$group
.toggleClass( 'oo-ui-element-hidden', !!showNoResults
);
196 * Show only the items matching with the models in the given list
198 * @param {Object} groupItems An object of items to show
199 * arranged by their group names
201 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.filter = function ( groupItems
) {
202 var i
, j
, groupName
, itemWidgets
, topItem
, isVisible
,
203 groupWidgets
= this.getItems(),
204 hasItemWithName = function ( itemArr
, name
) {
205 return !!itemArr
.filter( function ( item
) {
206 return item
.getName() === name
;
210 this.resetSelection();
212 if ( $.isEmptyObject( groupItems
) ) {
213 // No results. Hide everything, show only 'no results'
215 this.showNoResultsMessage( true );
219 this.showNoResultsMessage( false );
220 for ( i
= 0; i
< groupWidgets
.length
; i
++ ) {
221 groupName
= groupWidgets
[ i
].getName();
223 // If this group widget is in the filtered results,
224 // show it - otherwise, hide it
225 groupWidgets
[ i
].toggle( !!groupItems
[ groupName
] );
227 if ( !groupItems
[ groupName
] ) {
228 // Continue to next group
232 // We have items to show
233 itemWidgets
= groupWidgets
[ i
].getItems();
234 for ( j
= 0; j
< itemWidgets
.length
; j
++ ) {
235 isVisible
= hasItemWithName( groupItems
[ groupName
], itemWidgets
[ j
].getName() );
236 // Only show items that are in the filtered list
237 itemWidgets
[ j
].toggle( isVisible
);
239 if ( !topItem
&& isVisible
) {
240 topItem
= itemWidgets
[ j
];
245 // Select the first item
247 this.select( topItem
.getName() );
250 }( mediaWiki
, jQuery
) );