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 {Object} [config] Configuration object
12 mw
.rcfilters
.ui
.FilterItemHighlightButton
= function MwRcfiltersUiFilterItemHighlightButton( controller
, model
, config
) {
13 config
= config
|| {};
15 this.colorPickerWidget
= new mw
.rcfilters
.ui
.HighlightColorPickerWidget( controller
, model
);
18 mw
.rcfilters
.ui
.FilterItemHighlightButton
.parent
.call( this, $.extend( true, {}, config
, {
25 horizontalPosition
: 'end',
26 $floatableContainer
: this.$element
,
28 $content
: this.colorPickerWidget
.$element
32 this.controller
= controller
;
36 this.model
.connect( this, { update
: 'updateUiBasedOnModel' } );
37 this.colorPickerWidget
.connect( this, { chooseColor
: 'onChooseColor' } );
38 // This lives inside a MenuOptionWidget, which intercepts mousedown
39 // to select the item. We want to prevent that when we click the highlight
41 this.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
43 this.updateUiBasedOnModel();
46 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
51 OO
.inheritClass( mw
.rcfilters
.ui
.FilterItemHighlightButton
, OO
.ui
.PopupButtonWidget
);
53 /* Static Properties */
58 mw
.rcfilters
.ui
.FilterItemHighlightButton
.static.cancelButtonMouseDownEvents
= true;
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
,
83 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.onChooseColor = function () {
84 this.popup
.toggle( false );
86 }( mediaWiki
, jQuery
) );