3 * A button to configure highlight for a filter item
5 * @extends OO.ui.PopupButtonWidget
8 * @param {mw.rcfilters.Controller} controller RCFilters controller
9 * @param {mw.rcfilters.dm.FilterItem} model Filter item model
10 * @param {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
11 * @param {Object} [config] Configuration object
13 mw
.rcfilters
.ui
.FilterItemHighlightButton
= function MwRcfiltersUiFilterItemHighlightButton( controller
, model
, highlightPopup
, config
) {
14 config
= config
|| {};
17 mw
.rcfilters
.ui
.FilterItemHighlightButton
.parent
.call( this, $.extend( true, {}, config
, {
22 this.controller
= controller
;
24 this.popup
= highlightPopup
;
27 this.model
.connect( this, { update
: 'updateUiBasedOnModel' } );
28 // This lives inside a MenuOptionWidget, which intercepts mousedown
29 // to select the item. We want to prevent that when we click the highlight
31 this.$element
.on( 'mousedown', function ( e
) {
35 this.updateUiBasedOnModel();
38 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
43 OO
.inheritClass( mw
.rcfilters
.ui
.FilterItemHighlightButton
, OO
.ui
.PopupButtonWidget
);
45 /* Static Properties */
50 mw
.rcfilters
.ui
.FilterItemHighlightButton
.static.cancelButtonMouseDownEvents
= true;
54 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.onAction = function () {
55 this.popup
.setAssociatedButton( this );
56 this.popup
.setFilterItem( this.model
);
59 mw
.rcfilters
.ui
.FilterItemHighlightButton
.parent
.prototype.onAction
.call( this );
63 * Respond to item model update event
65 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.updateUiBasedOnModel = function () {
66 var currentColor
= this.model
.getHighlightColor(),
69 this.$icon
.toggleClass(
70 'mw-rcfilters-ui-filterItemHighlightButton-circle',
74 mw
.rcfilters
.HighlightColors
.forEach( function ( c
) {
77 'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c
,