3 * A button to configure highlight for a filter item
5 * @class mw.rcfilters.ui.FilterItemHighlightButton
6 * @extends OO.ui.PopupButtonWidget
9 * @param {mw.rcfilters.Controller} controller RCFilters controller
10 * @param {mw.rcfilters.dm.FilterItem} model Filter item model
11 * @param {mw.rcfilters.ui.HighlightPopupWidget} highlightPopup Shared highlight color picker
12 * @param {Object} [config] Configuration object
14 var FilterItemHighlightButton
= function MwRcfiltersUiFilterItemHighlightButton( controller
, model
, highlightPopup
, config
) {
15 config
= config
|| {};
18 FilterItemHighlightButton
.parent
.call( this, $.extend( true, {}, config
, {
23 this.controller
= controller
;
25 this.popup
= highlightPopup
;
28 this.model
.connect( this, { update
: 'updateUiBasedOnModel' } );
29 // This lives inside a MenuOptionWidget, which intercepts mousedown
30 // to select the item. We want to prevent that when we click the highlight
32 this.$element
.on( 'mousedown', function ( e
) {
36 this.updateUiBasedOnModel();
39 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
44 OO
.inheritClass( FilterItemHighlightButton
, OO
.ui
.PopupButtonWidget
);
46 /* Static Properties */
51 FilterItemHighlightButton
.static.cancelButtonMouseDownEvents
= true;
55 FilterItemHighlightButton
.prototype.onAction = function () {
56 this.popup
.setAssociatedButton( this );
57 this.popup
.setFilterItem( this.model
);
60 FilterItemHighlightButton
.parent
.prototype.onAction
.call( this );
64 * Respond to item model update event
66 FilterItemHighlightButton
.prototype.updateUiBasedOnModel = function () {
67 var currentColor
= this.model
.getHighlightColor(),
70 this.$icon
.toggleClass(
71 'mw-rcfilters-ui-filterItemHighlightButton-circle',
75 mw
.rcfilters
.HighlightColors
.forEach( function ( c
) {
78 'mw-rcfilters-ui-filterItemHighlightButton-circle-color-' + c
,
84 module
.exports
= FilterItemHighlightButton
;