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
) { e
.stopPropagation(); } );
33 this.updateUiBasedOnModel();
36 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
41 OO
.inheritClass( mw
.rcfilters
.ui
.FilterItemHighlightButton
, OO
.ui
.PopupButtonWidget
);
43 /* Static Properties */
48 mw
.rcfilters
.ui
.FilterItemHighlightButton
.static.cancelButtonMouseDownEvents
= true;
52 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.onAction = function () {
53 this.popup
.setAssociatedButton( this );
54 this.popup
.setFilterItem( this.model
);
57 mw
.rcfilters
.ui
.FilterItemHighlightButton
.parent
.prototype.onAction
.call( this );
61 * Respond to item model update event
63 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.updateUiBasedOnModel = function () {
64 var currentColor
= this.model
.getHighlightColor(),
67 this.$icon
.toggleClass(
68 'mw-rcfilters-ui-filterItemHighlightButton-circle',
72 mw
.rcfilters
.HighlightColors
.forEach( function ( c
) {
75 'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c
,