2 * Menu header for the RCFilters filters menu
4 * @class mw.rcfilters.ui.FilterMenuHeaderWidget
5 * @extends OO.ui.Widget
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
13 var FilterMenuHeaderWidget
= function MwRcfiltersUiFilterMenuHeaderWidget( controller
, model
, config
) {
14 config
= config
|| {};
16 this.controller
= controller
;
18 this.$overlay
= config
.$overlay
|| this.$element
;
21 FilterMenuHeaderWidget
.parent
.call( this, config
);
22 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {
23 label
: mw
.msg( 'rcfilters-filterlist-title' ),
25 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' )
28 // "Back" to default view button
29 this.backButton
= new OO
.ui
.ButtonWidget( {
32 title
: mw
.msg( 'rcfilters-view-return-to-default-tooltip' ),
33 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
35 this.backButton
.toggle( this.model
.getCurrentView() !== 'default' );
37 // Help icon for Tagged edits
38 this.helpIcon
= new OO
.ui
.ButtonWidget( {
41 title
: mw
.msg( 'rcfilters-view-tags-help-icon-tooltip' ),
42 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon' ],
43 href
: mw
.util
.getUrl( 'Special:Tags' ),
46 this.helpIcon
.toggle( this.model
.getCurrentView() === 'tags' );
49 this.highlightButton
= new OO
.ui
.ToggleButtonWidget( {
51 label
: mw
.message( 'rcfilters-highlightbutton-title' ).text(),
52 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
55 // Invert namespaces button
56 this.invertNamespacesButton
= new OO
.ui
.ToggleButtonWidget( {
58 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
60 this.invertNamespacesButton
.toggle( this.model
.getCurrentView() === 'namespaces' );
63 this.backButton
.connect( this, { click
: 'onBackButtonClick' } );
65 .connect( this, { click
: 'onHighlightButtonClick' } );
66 this.invertNamespacesButton
67 .connect( this, { click
: 'onInvertNamespacesButtonClick' } );
68 this.model
.connect( this, {
69 highlightChange
: 'onModelHighlightChange',
70 searchChange
: 'onModelSearchChange',
71 initialize
: 'onModelInitialize'
73 this.view
= this.model
.getCurrentView();
77 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
80 .addClass( 'mw-rcfilters-ui-table' )
81 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
84 .addClass( 'mw-rcfilters-ui-row' )
87 .addClass( 'mw-rcfilters-ui-cell' )
88 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
89 .append( this.backButton
.$element
),
91 .addClass( 'mw-rcfilters-ui-cell' )
92 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
93 .append( this.$label
, this.helpIcon
.$element
),
95 .addClass( 'mw-rcfilters-ui-cell' )
96 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
97 .append( this.invertNamespacesButton
.$element
),
99 .addClass( 'mw-rcfilters-ui-cell' )
100 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
101 .append( this.highlightButton
.$element
)
109 OO
.inheritClass( FilterMenuHeaderWidget
, OO
.ui
.Widget
);
110 OO
.mixinClass( FilterMenuHeaderWidget
, OO
.ui
.mixin
.LabelElement
);
115 * Respond to model initialization event
117 * Note: need to wait for initialization before getting the invertModel
118 * and registering its update event. Creating all the models before the UI
119 * would help with that.
121 FilterMenuHeaderWidget
.prototype.onModelInitialize = function () {
122 this.invertModel
= this.model
.getInvertModel();
123 this.updateInvertButton();
124 this.invertModel
.connect( this, { update
: 'updateInvertButton' } );
128 * Respond to model update event
130 FilterMenuHeaderWidget
.prototype.onModelSearchChange = function () {
131 var currentView
= this.model
.getCurrentView();
133 if ( this.view
!== currentView
) {
134 this.setLabel( this.model
.getViewTitle( currentView
) );
136 this.invertNamespacesButton
.toggle( currentView
=== 'namespaces' );
137 this.backButton
.toggle( currentView
!== 'default' );
138 this.helpIcon
.toggle( currentView
=== 'tags' );
139 this.view
= currentView
;
144 * Respond to model highlight change event
146 * @param {boolean} highlightEnabled Highlight is enabled
148 FilterMenuHeaderWidget
.prototype.onModelHighlightChange = function ( highlightEnabled
) {
149 this.highlightButton
.setActive( highlightEnabled
);
153 * Update the state of the invert button
155 FilterMenuHeaderWidget
.prototype.updateInvertButton = function () {
156 this.invertNamespacesButton
.setActive( this.invertModel
.isSelected() );
157 this.invertNamespacesButton
.setLabel(
158 this.invertModel
.isSelected() ?
159 mw
.msg( 'rcfilters-exclude-button-on' ) :
160 mw
.msg( 'rcfilters-exclude-button-off' )
164 FilterMenuHeaderWidget
.prototype.onBackButtonClick = function () {
165 this.controller
.switchView( 'default' );
169 * Respond to highlight button click
171 FilterMenuHeaderWidget
.prototype.onHighlightButtonClick = function () {
172 this.controller
.toggleHighlight();
176 * Respond to highlight button click
178 FilterMenuHeaderWidget
.prototype.onInvertNamespacesButtonClick = function () {
179 this.controller
.toggleInvertedNamespaces();
182 module
.exports
= FilterMenuHeaderWidget
;