3 * Filter-specific CapsuleMultiselectWidget
5 * @extends OO.ui.CapsuleMultiselectWidget
8 * @param {mw.rcfilters.Controller} controller RCFilters controller
9 * @param {mw.rcfilters.dm.FiltersViewModel} model RCFilters view model
10 * @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
11 * @param {Object} config Configuration object
13 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
= function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller
, model
, filterInput
, config
) {
15 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.parent
.call( this, $.extend( {
16 $autoCloseIgnore
: filterInput
.$element
19 this.controller
= controller
;
21 this.filterInput
= filterInput
;
23 this.$content
.prepend(
25 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
26 .text( mw
.msg( 'rcfilters-activefilters' ) )
29 this.resetButton
= new OO
.ui
.ButtonWidget( {
32 title
: mw
.msg( 'rcfilters-clear-all-filters' ),
33 classes
: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-resetButton' ]
36 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
37 label
: mw
.msg( 'rcfilters-empty-filter' ),
38 classes
: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-emptyFilters' ]
42 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
43 this.model
.connect( this, { itemUpdate
: 'onModelItemUpdate' } );
44 // Add the filterInput as trigger
45 this.filterInput
.$input
46 .on( 'focus', this.focus
.bind( this ) );
49 this.$content
.append( this.emptyFilterMessage
.$element
);
52 // The content and button should appear side by side regardless of how
53 // wide the button is; the button also changes its width depending
54 // on language and its state, so the safest way to present both side
55 // by side is with a table layout
57 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-table' )
60 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-row' )
63 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content' )
64 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
65 .append( this.$content
),
67 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
68 .append( this.resetButton
.$element
)
74 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );
76 this.reevaluateResetRestoreState();
81 OO
.inheritClass( mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
, OO
.ui
.CapsuleMultiselectWidget
);
87 * @param {string[]} filters Array of names of removed filters
89 * Filters were removed
94 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onModelItemUpdate = function () {
95 // Re-evaluate reset state
96 this.reevaluateResetRestoreState();
100 * Respond to click event on the reset button
102 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onResetButtonClick = function () {
103 if ( this.model
.areCurrentFiltersEmpty() ) {
104 // Reset to default filters
105 this.controller
.resetToDefaults();
107 // Reset to have no filters
108 this.controller
.emptyFilters();
113 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
115 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
116 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
117 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
118 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
120 this.resetButton
.setIcon(
121 currFiltersAreEmpty
? 'history' : 'trash'
124 this.resetButton
.setLabel(
125 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
128 this.resetButton
.toggle( !hideResetButton
);
129 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
135 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.focus = function () {
136 // Override this method; we don't want to focus on the popup, and we
137 // don't want to bind the size to the handle.
138 if ( !this.isDisabled() ) {
139 this.popup
.toggle( true );
140 this.filterInput
.$input
.get( 0 ).focus();
148 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onFocusForPopup = function () {
149 // HACK can be removed once I21b8cff4048 is merged in oojs-ui
156 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.removeItems = function ( items
) {
158 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.parent
.prototype.removeItems
.call( this, items
);
160 this.emit( 'remove', items
.map( function ( item
) { return item
.getData(); } ) );
166 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onKeyDown = function () {};
171 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onPopupFocusOut = function () {};
176 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.clearInput = function () {
177 if ( this.filterInput
) {
178 this.filterInput
.setValue( '' );
180 this.menu
.toggle( false );
181 this.menu
.selectItem();
182 this.menu
.highlightItem();
184 }( mediaWiki
, jQuery
) );