3 * A widget representing a filter item highlight color picker
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.LabelElement
9 * @param {mw.rcfilters.Controller} controller RCFilters controller
10 * @param {mw.rcfilters.dm.FilterItem} model Filter item model
11 * @param {Object} [config] Configuration object
13 mw
.rcfilters
.ui
.HighlightColorPickerWidget
= function MwRcfiltersUiHighlightColorPickerWidget( controller
, model
, config
) {
14 var colors
= [ 'none' ].concat( mw
.rcfilters
.HighlightColors
);
15 config
= config
|| {};
18 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.parent
.call( this, config
);
20 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {}, config
, {
21 label
: mw
.message( 'rcfilters-highlightmenu-title' ).text()
24 this.controller
= controller
;
27 this.currentSelection
= '';
28 this.buttonSelect
= new OO
.ui
.ButtonSelectWidget( {
29 items
: colors
.map( function ( color
) {
30 return new OO
.ui
.ButtonOptionWidget( {
31 icon
: color
=== 'none' ? 'check' : null,
34 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color',
35 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-' + color
40 classes
: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
42 this.selectColor( 'none' );
45 this.model
.connect( this, { update
: 'onModelUpdate' } );
46 this.buttonSelect
.connect( this, { choose
: 'onChooseColor' } );
49 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
52 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
53 this.buttonSelect
.$element
59 OO
.inheritClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.Widget
);
60 OO
.mixinClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.mixin
.LabelElement
);
66 * @param {string} The chosen color
68 * A color has been chosen
74 * Respond to item model update event
76 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.onModelUpdate = function () {
77 this.selectColor( this.model
.getHighlightColor() || 'none' );
81 * Select the color for this widget
83 * @param {string} color Selected color
85 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.selectColor = function ( color
) {
86 var previousItem
= this.buttonSelect
.getItemFromData( this.currentSelection
),
87 selectedItem
= this.buttonSelect
.getItemFromData( color
);
89 if ( this.currentSelection
!== color
) {
90 this.currentSelection
= color
;
92 this.buttonSelect
.selectItem( selectedItem
);
94 previousItem
.setIcon( null );
98 selectedItem
.setIcon( 'check' );
103 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.onChooseColor = function ( button
) {
104 var color
= button
.data
;
105 if ( color
=== 'none' ) {
106 this.controller
.clearHighlightColor( this.model
.getName() );
108 this.controller
.setHighlightColor( this.model
.getName(), color
);
110 this.emit( 'chooseColor', color
);
112 }( mediaWiki
, jQuery
) );