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
: 'onModelUpdate' } );
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(); } );
44 .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
49 OO
.inheritClass( mw
.rcfilters
.ui
.FilterItemHighlightButton
, OO
.ui
.PopupButtonWidget
);
51 /* Static Properties */
56 mw
.rcfilters
.ui
.FilterItemHighlightButton
.static.cancelButtonMouseDownEvents
= true;
61 * Respond to item model update event
63 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.onModelUpdate = 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
,
81 mw
.rcfilters
.ui
.FilterItemHighlightButton
.prototype.onChooseColor = function () {
82 this.popup
.toggle( false );
84 }( mediaWiki
, jQuery
) );