3 * A widget representing a base toggle item
5 * @extends OO.ui.MenuOptionWidget
8 * @param {mw.rcfilters.Controller} controller RCFilters controller
9 * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel
10 * @param {mw.rcfilters.dm.ItemModel} invertModel
11 * @param {mw.rcfilters.dm.ItemModel} itemModel Item model
12 * @param {Object} config Configuration object
14 mw
.rcfilters
.ui
.ItemMenuOptionWidget
= function MwRcfiltersUiItemMenuOptionWidget(
15 controller
, filtersViewModel
, invertModel
, itemModel
, config
20 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label' );
22 config
= config
|| {};
24 this.controller
= controller
;
25 this.filtersViewModel
= filtersViewModel
;
26 this.invertModel
= invertModel
;
27 this.itemModel
= itemModel
;
30 mw
.rcfilters
.ui
.ItemMenuOptionWidget
.parent
.call( this, $.extend( {
31 // Override the 'check' icon that OOUI defines
33 data
: this.itemModel
.getName(),
34 label
: this.itemModel
.getLabel()
37 this.checkboxWidget
= new mw
.rcfilters
.ui
.CheckboxInputWidget( {
38 value
: this.itemModel
.getName(),
39 selected
: this.itemModel
.isSelected()
44 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-title' )
45 .append( this.$label
)
47 if ( this.itemModel
.getDescription() ) {
50 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-desc' )
51 .text( this.itemModel
.getDescription() )
55 this.highlightButton
= new mw
.rcfilters
.ui
.FilterItemHighlightButton(
59 $overlay
: config
.$overlay
|| this.$element
,
60 title
: mw
.msg( 'rcfilters-highlightmenu-help' )
63 this.highlightButton
.toggle( this.filtersViewModel
.isHighlightEnabled() );
65 this.excludeLabel
= new OO
.ui
.LabelWidget( {
66 label
: mw
.msg( 'rcfilters-filter-excluded' )
68 this.excludeLabel
.toggle(
69 this.itemModel
.getGroupModel().getView() === 'namespaces' &&
70 this.itemModel
.isSelected() &&
71 this.invertModel
.isSelected()
74 layout
= new OO
.ui
.FieldLayout( this.checkboxWidget
, {
80 this.filtersViewModel
.connect( this, { highlightChange
: 'updateUiBasedOnState' } );
81 this.invertModel
.connect( this, { update
: 'updateUiBasedOnState' } );
82 this.itemModel
.connect( this, { update
: 'updateUiBasedOnState' } );
83 // HACK: Prevent defaults on 'click' for the label so it
84 // doesn't steal the focus away from the input. This means
85 // we can continue arrow-movement after we click the label
86 // and is consistent with the checkbox *itself* also preventing
87 // defaults on 'click' as well.
88 layout
.$label
.on( 'click', false );
91 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
92 .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.itemModel
.getGroupModel().getView() )
95 .addClass( 'mw-rcfilters-ui-table' )
98 .addClass( 'mw-rcfilters-ui-row' )
101 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox' )
102 .append( layout
.$element
),
104 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel' )
105 .append( this.excludeLabel
.$element
),
107 .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-highlightButton' )
108 .append( this.highlightButton
.$element
)
113 if ( this.itemModel
.getIdentifiers() ) {
114 this.itemModel
.getIdentifiers().forEach( function ( ident
) {
115 classes
.push( 'mw-rcfilters-ui-itemMenuOptionWidget-identifier-' + ident
);
118 this.$element
.addClass( classes
.join( ' ' ) );
121 this.updateUiBasedOnState();
126 OO
.inheritClass( mw
.rcfilters
.ui
.ItemMenuOptionWidget
, OO
.ui
.MenuOptionWidget
);
128 /* Static properties */
130 // We do our own scrolling to top
131 mw
.rcfilters
.ui
.ItemMenuOptionWidget
.static.scrollIntoViewOnSelect
= false;
136 * Respond to item model update event
138 mw
.rcfilters
.ui
.ItemMenuOptionWidget
.prototype.updateUiBasedOnState = function () {
139 this.checkboxWidget
.setSelected( this.itemModel
.isSelected() );
141 this.highlightButton
.toggle( this.filtersViewModel
.isHighlightEnabled() );
142 this.excludeLabel
.toggle(
143 this.itemModel
.getGroupModel().getView() === 'namespaces' &&
144 this.itemModel
.isSelected() &&
145 this.invertModel
.isSelected()
147 this.toggle( this.itemModel
.isVisible() );
151 * Get the name of this filter
153 * @return {string} Filter name
155 mw
.rcfilters
.ui
.ItemMenuOptionWidget
.prototype.getName = function () {
156 return this.itemModel
.getName();
159 mw
.rcfilters
.ui
.ItemMenuOptionWidget
.prototype.getModel = function () {
160 return this.itemModel
;