3 * A widget representing a single toggle filter
5 * @extends OO.ui.MenuOptionWidget
8 * @param {mw.rcfilters.Controller} controller RCFilters controller
9 * @param {mw.rcfilters.dm.FilterItem} model Filter item model
10 * @param {Object} config Configuration object
12 mw
.rcfilters
.ui
.FilterMenuOptionWidget
= function MwRcfiltersUiFilterMenuOptionWidget( controller
, model
, config
) {
15 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label' );
17 config
= config
|| {};
19 this.controller
= controller
;
23 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.parent
.call( this, $.extend( {
24 // Override the 'check' icon that OOUI defines
26 data
: this.model
.getName(),
27 label
: this.model
.getLabel()
30 this.checkboxWidget
= new mw
.rcfilters
.ui
.CheckboxInputWidget( {
31 value
: this.model
.getName(),
32 selected
: this.model
.isSelected()
37 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label-title' )
38 .append( this.$label
)
40 if ( this.model
.getDescription() ) {
43 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget-label-desc' )
44 .text( this.model
.getDescription() )
48 this.highlightButton
= new mw
.rcfilters
.ui
.FilterItemHighlightButton(
52 $overlay
: config
.$overlay
|| this.$element
,
53 title
: mw
.msg( 'rcfilters-highlightmenu-help' )
56 this.highlightButton
.toggle( this.model
.isHighlightEnabled() );
58 layout
= new OO
.ui
.FieldLayout( this.checkboxWidget
, {
63 this.model
.connect( this, { update
: 'onModelUpdate' } );
64 this.model
.getGroupModel().connect( this, { update
: 'onGroupModelUpdate' } );
65 // HACK: Prevent defaults on 'click' for the label so it
66 // doesn't steal the focus away from the input. This means
67 // we can continue arrow-movement after we click the label
68 // and is consistent with the checkbox *itself* also preventing
69 // defaults on 'click' as well.
70 layout
.$label
.on( 'click', false );
73 .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget' )
76 .addClass( 'mw-rcfilters-ui-table' )
79 .addClass( 'mw-rcfilters-ui-row' )
82 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterMenuOptionWidget-filterCheckbox' )
83 .append( layout
.$element
),
85 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterMenuOptionWidget-highlightButton' )
86 .append( this.highlightButton
.$element
)
94 OO
.inheritClass( mw
.rcfilters
.ui
.FilterMenuOptionWidget
, OO
.ui
.MenuOptionWidget
);
96 /* Static properties */
98 // We do our own scrolling to top
99 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.static.scrollIntoViewOnSelect
= false;
104 * Respond to item model update event
106 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.prototype.onModelUpdate = function () {
107 this.checkboxWidget
.setSelected( this.model
.isSelected() );
109 this.setCurrentMuteState();
113 * Respond to item group model update event
115 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.prototype.onGroupModelUpdate = function () {
116 this.setCurrentMuteState();
120 * Set the current mute state for this item
122 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.prototype.setCurrentMuteState = function () {
123 this.$element
.toggleClass(
124 'mw-rcfilters-ui-filterMenuOptionWidget-muted',
125 this.model
.isConflicted() ||
127 // Item is also muted when any of the items in its group is active
128 this.model
.getGroupModel().isActive() &&
129 // But it isn't selected
130 !this.model
.isSelected() &&
131 // And also not included
132 !this.model
.isIncluded()
136 this.highlightButton
.toggle( this.model
.isHighlightEnabled() );
140 * Get the name of this filter
142 * @return {string} Filter name
144 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.prototype.getName = function () {
145 return this.model
.getName();
148 mw
.rcfilters
.ui
.FilterMenuOptionWidget
.prototype.getModel = function () {