2 * A widget representing a menu section for filter groups
4 * @class mw.rcfilters.ui.FilterMenuSectionOptionWidget
5 * @extends OO.ui.MenuSectionOptionWidget
8 * @param {mw.rcfilters.Controller} controller RCFilters controller
9 * @param {mw.rcfilters.dm.FilterGroup} model Filter group model
10 * @param {Object} config Configuration object
11 * @cfg {jQuery} [$overlay] Overlay
13 var FilterMenuSectionOptionWidget
= function MwRcfiltersUiFilterMenuSectionOptionWidget( controller
, model
, config
) {
14 var whatsThisMessages
,
15 $header
= $( '<div>' )
16 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header' ),
17 $popupContent
= $( '<div>' )
18 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content' );
20 config
= config
|| {};
22 this.controller
= controller
;
24 this.$overlay
= config
.$overlay
|| this.$element
;
27 FilterMenuSectionOptionWidget
.parent
.call( this, $.extend( {
28 label
: this.model
.getTitle(),
30 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title' )
33 $header
.append( this.$label
);
35 if ( this.model
.hasWhatsThis() ) {
36 whatsThisMessages
= this.model
.getWhatsThis();
39 if ( whatsThisMessages
.header
) {
41 ( new OO
.ui
.LabelWidget( {
42 label
: mw
.msg( whatsThisMessages
.header
),
43 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-header' ]
47 if ( whatsThisMessages
.body
) {
49 ( new OO
.ui
.LabelWidget( {
50 label
: mw
.msg( whatsThisMessages
.body
),
51 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-body' ]
55 if ( whatsThisMessages
.linkText
&& whatsThisMessages
.url
) {
57 ( new OO
.ui
.ButtonWidget( {
59 flags
: [ 'progressive' ],
60 href
: whatsThisMessages
.url
,
61 label
: mw
.msg( whatsThisMessages
.linkText
),
62 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup-content-link' ]
68 this.whatsThisButton
= new OO
.ui
.PopupButtonWidget( {
70 label
: mw
.msg( 'rcfilters-filterlist-whatsthis' ),
71 $overlay
: this.$overlay
,
72 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton' ],
73 flags
: [ 'progressive' ],
78 $content
: $popupContent
,
79 classes
: [ 'mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton-popup' ]
84 .append( this.whatsThisButton
.$element
);
88 this.model
.connect( this, { update
: 'updateUiBasedOnState' } );
92 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget' )
93 .addClass( 'mw-rcfilters-ui-filterMenuSectionOptionWidget-name-' + this.model
.getName() )
95 this.updateUiBasedOnState();
100 OO
.inheritClass( FilterMenuSectionOptionWidget
, OO
.ui
.MenuSectionOptionWidget
);
105 * Respond to model update event
107 FilterMenuSectionOptionWidget
.prototype.updateUiBasedOnState = function () {
108 this.$element
.toggleClass(
109 'mw-rcfilters-ui-filterMenuSectionOptionWidget-active',
110 this.model
.isActive()
112 this.toggle( this.model
.isVisible() );
118 * @return {string} Group name
120 FilterMenuSectionOptionWidget
.prototype.getName = function () {
121 return this.model
.getName();
124 module
.exports
= FilterMenuSectionOptionWidget
;