3 * A widget representing a menu section for filter groups
6 * @extends OO.ui.MenuSectionOptionWidget
9 * @param {mw.rcfilters.Controller} controller RCFilters controller
10 * @param {mw.rcfilters.dm.FilterGroup} model Filter group model
11 * @param {Object} config Configuration object
12 * @cfg {jQuery} [$overlay] Overlay
14 mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget
= function MwRcfiltersUiFilterMenuSectionOptionWidget( controller
, model
, config
) {
15 var whatsThisMessages
,
16 $header
= $( '<div>' )
17 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header' ),
18 $popupContent
= $( '<div>' )
19 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content' );
21 config
= config
|| {};
23 this.controller
= controller
;
25 this.$overlay
= config
.$overlay
|| this.$element
;
28 mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget
.parent
.call( this, $.extend( {
29 label
: this.model
.getTitle(),
31 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title' )
34 $header
.append( this.$label
);
36 if ( this.model
.hasWhatsThis() ) {
37 whatsThisMessages
= this.model
.getWhatsThis();
40 if ( whatsThisMessages
.header
) {
42 ( new OO
.ui
.LabelWidget( {
43 label
: mw
.msg( whatsThisMessages
.header
),
44 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-header' ]
48 if ( whatsThisMessages
.body
) {
50 ( new OO
.ui
.LabelWidget( {
51 label
: mw
.msg( whatsThisMessages
.body
),
52 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-body' ]
56 if ( whatsThisMessages
.linkText
&& whatsThisMessages
.url
) {
58 ( new OO
.ui
.ButtonWidget( {
60 flags
: [ 'progressive' ],
61 href
: whatsThisMessages
.url
,
62 label
: mw
.msg( whatsThisMessages
.linkText
),
63 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-link' ]
69 this.whatsThisButton
= new OO
.ui
.PopupButtonWidget( {
71 label
: mw
.msg( 'rcfilters-filterlist-whatsthis' ),
72 $overlay
: this.$overlay
,
73 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton' ],
74 flags
: [ 'progressive' ],
79 $content
: $popupContent
,
80 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup' ]
85 .append( this.whatsThisButton
.$element
);
89 this.model
.connect( this, { update
: 'updateUiBasedOnState' } );
93 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
94 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model
.getName() )
96 this.updateUiBasedOnState();
101 OO
.inheritClass( mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget
, OO
.ui
.MenuSectionOptionWidget
);
106 * Respond to model update event
108 mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget
.prototype.updateUiBasedOnState = function () {
109 this.$element
.toggleClass(
110 'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
111 this.model
.isActive()
113 this.toggle( this.model
.isVisible() );
119 * @return {string} Group name
121 mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget
.prototype.getName = function () {
122 return this.model
.getName();