5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.GroupWidget
7 * @mixins OO.ui.mixin.LabelElement
10 * @param {mw.rcfilters.Controller} controller Controller
11 * @param {mw.rcfilters.dm.FilterGroup} model Filter group model
12 * @param {Object} config Configuration object
13 * @cfg {jQuery} [$overlay] Overlay
15 mw
.rcfilters
.ui
.FilterGroupWidget
= function MwRcfiltersUiFilterGroupWidget( controller
, model
, config
) {
16 var whatsThisMessages
,
17 $header
= $( '<div>' )
18 .addClass( 'mw-rcfilters-ui-filterGroupWidget-header' ),
19 $popupContent
= $( '<div>' )
20 .addClass( 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content' );
22 config
= config
|| {};
25 mw
.rcfilters
.ui
.FilterGroupWidget
.parent
.call( this, config
);
27 this.controller
= controller
;
30 this.$overlay
= config
.$overlay
|| this.$element
;
33 OO
.ui
.mixin
.GroupWidget
.call( this, config
);
34 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {}, config
, {
35 label
: this.model
.getTitle(),
37 .addClass( 'mw-rcfilters-ui-filterGroupWidget-header-title' )
40 $header
.append( this.$label
);
42 if ( this.model
.hasWhatsThis() ) {
43 whatsThisMessages
= this.model
.getWhatsThis();
46 if ( whatsThisMessages
.header
) {
48 ( new OO
.ui
.LabelWidget( {
49 label
: mw
.msg( whatsThisMessages
.header
),
50 classes
: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-header' ]
54 if ( whatsThisMessages
.body
) {
56 ( new OO
.ui
.LabelWidget( {
57 label
: mw
.msg( whatsThisMessages
.body
),
58 classes
: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-body' ]
62 if ( whatsThisMessages
.linkText
&& whatsThisMessages
.url
) {
64 ( new OO
.ui
.ButtonWidget( {
66 flags
: [ 'progressive' ],
67 href
: whatsThisMessages
.url
,
68 label
: mw
.msg( whatsThisMessages
.linkText
),
69 classes
: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-link' ]
75 this.whatsThisButton
= new OO
.ui
.PopupButtonWidget( {
77 label
: mw
.msg( 'rcfilters-filterlist-whatsthis' ),
78 $overlay
: this.$overlay
,
79 classes
: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton' ],
80 flags
: [ 'progressive' ],
85 $content
: $popupContent
,
86 classes
: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup' ]
91 .append( this.whatsThisButton
.$element
);
95 this.populateFromModel();
97 this.model
.connect( this, { update
: 'onModelUpdate' } );
100 .addClass( 'mw-rcfilters-ui-filterGroupWidget' )
101 .addClass( 'mw-rcfilters-ui-filterGroupWidget-name-' + this.model
.getName() )
105 .addClass( 'mw-rcfilters-ui-filterGroupWidget-group' )
111 OO
.inheritClass( mw
.rcfilters
.ui
.FilterGroupWidget
, OO
.ui
.Widget
);
112 OO
.mixinClass( mw
.rcfilters
.ui
.FilterGroupWidget
, OO
.ui
.mixin
.GroupWidget
);
113 OO
.mixinClass( mw
.rcfilters
.ui
.FilterGroupWidget
, OO
.ui
.mixin
.LabelElement
);
116 * Respond to model update event
118 mw
.rcfilters
.ui
.FilterGroupWidget
.prototype.onModelUpdate = function () {
119 this.$element
.toggleClass(
120 'mw-rcfilters-ui-filterGroupWidget-active',
121 this.model
.isActive()
126 * Get an item widget from its filter name
128 * @param {string} filterName Filter name
129 * @return {mw.rcfilters.ui.FilterItemWidget} Item widget
131 mw
.rcfilters
.ui
.FilterGroupWidget
.prototype.getItemWidget = function ( filterName
) {
132 return this.filters
[ filterName
];
136 * Populate data from the model
138 mw
.rcfilters
.ui
.FilterGroupWidget
.prototype.populateFromModel = function () {
145 this.model
.getItems().map( function ( filterItem
) {
146 var groupWidget
= new mw
.rcfilters
.ui
.FilterItemWidget(
150 label
: filterItem
.getLabel(),
151 description
: filterItem
.getDescription(),
152 $overlay
: widget
.$overlay
156 widget
.filters
[ filterItem
.getName() ] = groupWidget
;
166 * @return {string} Group name
168 mw
.rcfilters
.ui
.FilterGroupWidget
.prototype.getName = function () {
169 return this.model
.getName();
171 }( mediaWiki
, jQuery
) );