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 {Object} [config] Configuration object
12 mw
.rcfilters
.ui
.HighlightColorPickerWidget
= function MwRcfiltersUiHighlightColorPickerWidget( controller
, config
) {
13 var colors
= [ 'none' ].concat( mw
.rcfilters
.HighlightColors
);
14 config
= config
|| {};
17 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.parent
.call( this, config
);
19 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {}, config
, {
20 label
: mw
.message( 'rcfilters-highlightmenu-title' ).text()
23 this.controller
= controller
;
25 this.currentSelection
= 'none';
26 this.buttonSelect
= new OO
.ui
.ButtonSelectWidget( {
27 items
: colors
.map( function ( color
) {
28 return new OO
.ui
.ButtonOptionWidget( {
29 icon
: color
=== 'none' ? 'check' : null,
32 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color',
33 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color-' + color
38 classes
: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
42 this.buttonSelect
.connect( this, { choose
: 'onChooseColor' } );
45 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
48 .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget-label' ),
49 this.buttonSelect
.$element
55 OO
.inheritClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.Widget
);
56 OO
.mixinClass( mw
.rcfilters
.ui
.HighlightColorPickerWidget
, OO
.ui
.mixin
.LabelElement
);
62 * @param {string} The chosen color
64 * A color has been chosen
70 * Bind the color picker to an item
71 * @param {mw.rcfilters.dm.FilterItem} filterItem
73 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.setFilterItem = function ( filterItem
) {
74 if ( this.filterItem
) {
75 this.filterItem
.disconnect( this );
78 this.filterItem
= filterItem
;
79 this.filterItem
.connect( this, { update
: 'updateUiBasedOnModel' } );
80 this.updateUiBasedOnModel();
84 * Respond to item model update event
86 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.updateUiBasedOnModel = function () {
87 this.selectColor( this.filterItem
.getHighlightColor() || 'none' );
91 * Select the color for this widget
93 * @param {string} color Selected color
95 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.selectColor = function ( color
) {
96 var previousItem
= this.buttonSelect
.findItemFromData( this.currentSelection
),
97 selectedItem
= this.buttonSelect
.findItemFromData( color
);
99 if ( this.currentSelection
!== color
) {
100 this.currentSelection
= color
;
102 this.buttonSelect
.selectItem( selectedItem
);
103 if ( previousItem
) {
104 previousItem
.setIcon( null );
107 if ( selectedItem
) {
108 selectedItem
.setIcon( 'check' );
113 mw
.rcfilters
.ui
.HighlightColorPickerWidget
.prototype.onChooseColor = function ( button
) {
114 var color
= button
.data
;
115 if ( color
=== 'none' ) {
116 this.controller
.clearHighlightColor( this.filterItem
.getName() );
118 this.controller
.setHighlightColor( this.filterItem
.getName(), color
);
120 this.emit( 'chooseColor', color
);