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
.ToggleButtonWidget( {
34 label
: mw
.message( 'rcfilters-highlightbutton-title' ).text(),
35 classes
: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
38 this.noResultsLabel
= new OO
.ui
.LabelWidget( {
39 label
: mw
.msg( 'rcfilters-filterlist-noresults' ),
40 classes
: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
44 this.highlightButton
.connect( this, { click
: 'onHighlightButtonClick' } );
45 this.model
.connect( this, {
46 initialize
: 'onModelInitialize',
47 highlightChange
: 'onModelHighlightChange'
51 this.showNoResultsMessage( false );
53 .addClass( 'mw-rcfilters-ui-filtersListWidget' )
56 .addClass( 'mw-rcfilters-ui-table' )
57 .addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
60 .addClass( 'mw-rcfilters-ui-row' )
63 .addClass( 'mw-rcfilters-ui-cell' )
64 .addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
65 .append( this.$label
),
67 .addClass( 'mw-rcfilters-ui-cell' )
68 .addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
69 .append( this.highlightButton
.$element
)
74 .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
75 this.noResultsLabel
.$element
81 OO
.inheritClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.Widget
);
82 OO
.mixinClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.mixin
.GroupWidget
);
83 OO
.mixinClass( mw
.rcfilters
.ui
.FiltersListWidget
, OO
.ui
.mixin
.LabelElement
);
88 * Respond to initialize event from the model
90 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onModelInitialize = function () {
98 Object
.keys( this.model
.getFilterGroups() ).map( function ( groupName
) {
99 var groupWidget
= new mw
.rcfilters
.ui
.FilterGroupWidget(
101 widget
.model
.getGroup( groupName
),
103 $overlay
: widget
.$overlay
107 widget
.groups
[ groupName
] = groupWidget
;
114 * Respond to model highlight change event
116 * @param {boolean} highlightEnabled Highlight is enabled
118 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onModelHighlightChange = function ( highlightEnabled
) {
119 this.highlightButton
.setActive( highlightEnabled
);
123 * Respond to highlight button click
125 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.onHighlightButtonClick = function () {
126 this.controller
.toggleHighlight();
130 * Find the filter item widget that corresponds to the item name
132 * @param {string} itemName Filter name
133 * @return {mw.rcfilters.ui.FilterItemWidget} Filter widget
135 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.getItemWidget = function ( itemName
) {
136 var filterItem
= this.model
.getItemByName( itemName
),
138 groupWidget
= this.groups
[ filterItem
.getGroupName() ];
140 // Find the item inside the group
141 return groupWidget
.getItemWidget( itemName
);
145 * Get the current selection
147 * @return {string|null} Selected filter. Null if none is selected.
149 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.getSelectedFilter = function () {
150 return this.selected
;
154 * Mark an item widget as selected
156 * @param {string} itemName Filter name
158 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.select = function ( itemName
) {
161 if ( this.selected
!== itemName
) {
163 if ( this.selected
) {
164 filterWidget
= this.getItemWidget( this.selected
);
165 filterWidget
.toggleSelected( false );
169 this.selected
= itemName
;
170 if ( this.selected
) {
171 filterWidget
= this.getItemWidget( this.selected
);
172 filterWidget
.toggleSelected( true );
178 * Reset selection and remove selected states from all items
180 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.resetSelection = function () {
181 if ( this.selected
!== null ) {
182 this.selected
= null;
183 this.getItems().forEach( function ( groupWidget
) {
184 groupWidget
.getItems().forEach( function ( filterItemWidget
) {
185 filterItemWidget
.toggleSelected( false );
192 * Switch between showing the 'no results' message for filtering results or the result list.
194 * @param {boolean} showNoResults Show no results message
196 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.showNoResultsMessage = function ( showNoResults
) {
197 this.noResultsLabel
.toggle( !!showNoResults
);
198 this.$group
.toggleClass( 'oo-ui-element-hidden', !!showNoResults
);
202 * Show only the items matching with the models in the given list
204 * @param {Object} groupItems An object of items to show
205 * arranged by their group names
207 mw
.rcfilters
.ui
.FiltersListWidget
.prototype.filter = function ( groupItems
) {
208 var i
, j
, groupName
, itemWidgets
, topItem
, isVisible
,
209 groupWidgets
= this.getItems(),
210 hasItemWithName = function ( itemArr
, name
) {
211 return !!itemArr
.filter( function ( item
) {
212 return item
.getName() === name
;
216 this.resetSelection();
218 if ( $.isEmptyObject( groupItems
) ) {
219 // No results. Hide everything, show only 'no results'
221 this.showNoResultsMessage( true );
225 this.showNoResultsMessage( false );
226 for ( i
= 0; i
< groupWidgets
.length
; i
++ ) {
227 groupName
= groupWidgets
[ i
].getName();
229 // If this group widget is in the filtered results,
230 // show it - otherwise, hide it
231 groupWidgets
[ i
].toggle( !!groupItems
[ groupName
] );
233 if ( !groupItems
[ groupName
] ) {
234 // Continue to next group
238 // We have items to show
239 itemWidgets
= groupWidgets
[ i
].getItems();
240 for ( j
= 0; j
< itemWidgets
.length
; j
++ ) {
241 isVisible
= hasItemWithName( groupItems
[ groupName
], itemWidgets
[ j
].getName() );
242 // Only show items that are in the filtered list
243 itemWidgets
[ j
].toggle( isVisible
);
245 if ( !topItem
&& isVisible
) {
246 topItem
= itemWidgets
[ j
];
251 // Select the first item
253 this.select( topItem
.getName() );
256 }( mediaWiki
, jQuery
) );