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
= 'none';
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'
44 this.model
.connect( this, { update
: 'updateUiBasedOnModel' } );
45 this.buttonSelect
.connect( this, { choose
: 'onChooseColor' } );
47 this.updateUiBasedOnModel();
50 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
53 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
54 this.buttonSelect
.$element
60 OO
.inheritClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.Widget
);
61 OO
.mixinClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.mixin
.LabelElement
);
67 * @param {string} The chosen color
69 * A color has been chosen
75 * Respond to item model update event
77 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.updateUiBasedOnModel = function () {
78 this.selectColor( this.model
.getHighlightColor() || 'none' );
82 * Select the color for this widget
84 * @param {string} color Selected color
86 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.selectColor = function ( color
) {
87 var previousItem
= this.buttonSelect
.findItemFromData( this.currentSelection
),
88 selectedItem
= this.buttonSelect
.findItemFromData( color
);
90 if ( this.currentSelection
!== color
) {
91 this.currentSelection
= color
;
93 this.buttonSelect
.selectItem( selectedItem
);
95 previousItem
.setIcon( null );
99 selectedItem
.setIcon( 'check' );
104 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.onChooseColor = function ( button
) {
105 var color
= button
.data
;
106 if ( color
=== 'none' ) {
107 this.controller
.clearHighlightColor( this.model
.getName() );
109 this.controller
.setHighlightColor( this.model
.getName(), color
);
111 this.emit( 'chooseColor', color
);
113 }( mediaWiki
, jQuery
) );