3 * Menu header for the RCFilters filters menu
6 * @extends OO.ui.Widget
9 * @param {mw.rcfilters.Controller} controller Controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
11 * @param {Object} config Configuration object
12 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
14 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
= function MwRcfiltersUiFilterMenuHeaderWidget( controller
, model
, config
) {
15 config
= config
|| {};
17 this.controller
= controller
;
19 this.$overlay
= config
.$overlay
|| this.$element
;
22 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.parent
.call( this, config
);
23 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {
24 label
: mw
.msg( 'rcfilters-filterlist-title' ),
26 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-title' )
29 // "Back" to default view button
30 this.backButton
= new OO
.ui
.ButtonWidget( {
33 title
: mw
.msg( 'rcfilters-view-return-to-default-tooltip' ),
34 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
36 this.backButton
.toggle( this.model
.getCurrentView() !== 'default' );
38 // Help icon for Tagged edits
39 this.helpIcon
= new OO
.ui
.ButtonWidget( {
42 title
: mw
.msg( 'rcfilters-view-tags-help-icon-tooltip' ),
43 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon' ],
44 href
: 'https://www.mediawiki.org/wiki/Special:MyLanguage/Help:New_filters_for_edit_review/Advanced_filters#tags',
47 this.helpIcon
.toggle( this.model
.getCurrentView() === 'tags' );
50 this.highlightButton
= new OO
.ui
.ToggleButtonWidget( {
52 label
: mw
.message( 'rcfilters-highlightbutton-title' ).text(),
53 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
56 // Invert namespaces button
57 this.invertNamespacesButton
= new OO
.ui
.ToggleButtonWidget( {
59 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
61 this.invertNamespacesButton
.toggle( this.model
.getCurrentView() === 'namespaces' );
62 this.updateInvertButton( this.model
.areNamespacesInverted() );
65 this.backButton
.connect( this, { click
: 'onBackButtonClick' } );
67 .connect( this, { click
: 'onHighlightButtonClick' } );
68 this.invertNamespacesButton
69 .connect( this, { click
: 'onInvertNamespacesButtonClick' } );
70 this.model
.connect( this, {
71 highlightChange
: 'onModelHighlightChange',
72 invertChange
: 'onModelInvertChange',
73 update
: 'onModelUpdate'
78 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
81 .addClass( 'mw-rcfilters-ui-table' )
82 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
85 .addClass( 'mw-rcfilters-ui-row' )
88 .addClass( 'mw-rcfilters-ui-cell' )
89 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
90 .append( this.backButton
.$element
),
92 .addClass( 'mw-rcfilters-ui-cell' )
93 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
94 .append( this.$label
, this.helpIcon
.$element
),
96 .addClass( 'mw-rcfilters-ui-cell' )
97 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
98 .append( this.invertNamespacesButton
.$element
),
100 .addClass( 'mw-rcfilters-ui-cell' )
101 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
102 .append( this.highlightButton
.$element
)
110 OO
.inheritClass( mw
.rcfilters
.ui
.FilterMenuHeaderWidget
, OO
.ui
.Widget
);
111 OO
.mixinClass( mw
.rcfilters
.ui
.FilterMenuHeaderWidget
, OO
.ui
.mixin
.LabelElement
);
116 * Respond to model update event
118 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelUpdate = function () {
119 var currentView
= this.model
.getCurrentView();
121 this.setLabel( this.model
.getViewTitle( currentView
) );
123 this.invertNamespacesButton
.toggle( currentView
=== 'namespaces' );
124 this.backButton
.toggle( currentView
!== 'default' );
125 this.helpIcon
.toggle( currentView
=== 'tags' );
129 * Respond to model highlight change event
131 * @param {boolean} highlightEnabled Highlight is enabled
133 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelHighlightChange = function ( highlightEnabled
) {
134 this.highlightButton
.setActive( highlightEnabled
);
138 * Respond to model invert change event
140 * @param {boolean} isInverted Namespaces selection is inverted
142 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelInvertChange = function ( isInverted
) {
143 this.updateInvertButton( isInverted
);
147 * Update the state of the invert button
149 * @param {boolean} isInverted Namespaces selection is inverted
151 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.updateInvertButton = function ( isInverted
) {
152 this.invertNamespacesButton
.setActive( isInverted
);
153 this.invertNamespacesButton
.setLabel(
155 mw
.msg( 'rcfilters-exclude-button-on' ) :
156 mw
.msg( 'rcfilters-exclude-button-off' )
160 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onBackButtonClick = function () {
161 this.controller
.switchView( 'default' );
165 * Respond to highlight button click
167 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onHighlightButtonClick = function () {
168 this.controller
.toggleHighlight();
172 * Respond to highlight button click
174 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onInvertNamespacesButtonClick = function () {
175 this.controller
.toggleInvertedNamespaces();
177 }( mediaWiki
, jQuery
) );