3 * Menu header for the RCFilters filters menu
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 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
= function MwRcfiltersUiFilterMenuHeaderWidget( controller
, model
, config
) {
14 config
= config
|| {};
16 this.controller
= controller
;
18 this.$overlay
= config
.$overlay
|| this.$element
;
21 mw
.rcfilters
.ui
.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-filterlist-title' ),
33 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-backButton' ]
35 this.backButton
.toggle( this.model
.getCurrentView() !== 'default' );
38 this.highlightButton
= new OO
.ui
.ToggleButtonWidget( {
40 label
: mw
.message( 'rcfilters-highlightbutton-title' ).text(),
41 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-hightlightButton' ]
44 // Invert namespaces button
45 this.invertNamespacesButton
= new OO
.ui
.ToggleButtonWidget( {
47 label
: mw
.msg( 'invert' ),
48 classes
: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-invertNamespacesButton' ]
50 this.invertNamespacesButton
.toggle( this.model
.getCurrentView() === 'namespaces' );
53 this.backButton
.connect( this, { click
: 'onBackButtonClick' } );
55 .connect( this, { click
: 'onHighlightButtonClick' } );
56 this.invertNamespacesButton
57 .connect( this, { click
: 'onInvertNamespacesButtonClick' } );
58 this.model
.connect( this, {
59 highlightChange
: 'onModelHighlightChange',
60 invertChange
: 'onModelInvertChange',
61 update
: 'onModelUpdate'
66 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget' )
69 .addClass( 'mw-rcfilters-ui-table' )
70 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header' )
73 .addClass( 'mw-rcfilters-ui-row' )
76 .addClass( 'mw-rcfilters-ui-cell' )
77 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-back' )
78 .append( this.backButton
.$element
),
80 .addClass( 'mw-rcfilters-ui-cell' )
81 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
82 .append( this.$label
),
84 .addClass( 'mw-rcfilters-ui-cell' )
85 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
86 .append( this.invertNamespacesButton
.$element
),
88 .addClass( 'mw-rcfilters-ui-cell' )
89 .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-highlight' )
90 .append( this.highlightButton
.$element
)
98 OO
.inheritClass( mw
.rcfilters
.ui
.FilterMenuHeaderWidget
, OO
.ui
.Widget
);
99 OO
.mixinClass( mw
.rcfilters
.ui
.FilterMenuHeaderWidget
, OO
.ui
.mixin
.LabelElement
);
104 * Respond to model update event
106 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelUpdate = function () {
107 var currentView
= this.model
.getCurrentView();
109 this.setLabel( this.model
.getCurrentViewLabel() );
111 this.invertNamespacesButton
.toggle( currentView
=== 'namespaces' );
112 this.backButton
.toggle( currentView
!== 'default' );
116 * Respond to model highlight change event
118 * @param {boolean} highlightEnabled Highlight is enabled
120 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelHighlightChange = function ( highlightEnabled
) {
121 this.highlightButton
.setActive( highlightEnabled
);
125 * Respond to model invert change event
127 * @param {boolean} isInverted Namespaces selection is inverted
129 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onModelInvertChange = function ( isInverted
) {
130 this.invertNamespacesButton
.setActive( isInverted
);
133 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onBackButtonClick = function () {
134 this.controller
.switchView( 'default' );
138 * Respond to highlight button click
140 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onHighlightButtonClick = function () {
141 this.controller
.toggleHighlight();
145 * Respond to highlight button click
147 mw
.rcfilters
.ui
.FilterMenuHeaderWidget
.prototype.onInvertNamespacesButtonClick = function () {
148 this.controller
.toggleInvertedNamespaces();
150 }( mediaWiki
, jQuery
) );