*
* @constructor
* @param {mw.rcfilters.Controller} controller RCFilters controller
- * @param {mw.rcfilters.dm.FilterItem} model Filter item model
* @param {Object} [config] Configuration object
*/
- mw.rcfilters.ui.HighlightColorPickerWidget = function MwRcfiltersUiHighlightColorPickerWidget( controller, model, config ) {
+ mw.rcfilters.ui.HighlightColorPickerWidget = function MwRcfiltersUiHighlightColorPickerWidget( controller, config ) {
var colors = [ 'none' ].concat( mw.rcfilters.HighlightColors );
config = config || {};
} ) );
this.controller = controller;
- this.model = model;
- this.currentSelection = '';
+ this.currentSelection = 'none';
this.buttonSelect = new OO.ui.ButtonSelectWidget( {
items: colors.map( function ( color ) {
return new OO.ui.ButtonOptionWidget( {
} ),
classes: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect'
} );
- this.selectColor( 'none' );
// Event
- this.model.connect( this, { update: 'onModelUpdate' } );
this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
this.$element
/* Methods */
+ /**
+ * Bind the color picker to an item
+ * @param {mw.rcfilters.dm.FilterItem} filterItem
+ */
+ mw.rcfilters.ui.HighlightColorPickerWidget.prototype.setFilterItem = function ( filterItem ) {
+ if ( this.filterItem ) {
+ this.filterItem.disconnect( this );
+ }
+
+ this.filterItem = filterItem;
+ this.filterItem.connect( this, { update: 'updateUiBasedOnModel' } );
+ this.updateUiBasedOnModel();
+ };
+
/**
* Respond to item model update event
*/
- mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onModelUpdate = function () {
- this.selectColor( this.model.getHighlightColor() || 'none' );
+ mw.rcfilters.ui.HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () {
+ this.selectColor( this.filterItem.getHighlightColor() || 'none' );
};
/**
* @param {string} color Selected color
*/
mw.rcfilters.ui.HighlightColorPickerWidget.prototype.selectColor = function ( color ) {
- var previousItem = this.buttonSelect.getItemFromData( this.currentSelection ),
- selectedItem = this.buttonSelect.getItemFromData( color );
+ var previousItem = this.buttonSelect.findItemFromData( this.currentSelection ),
+ selectedItem = this.buttonSelect.findItemFromData( color );
if ( this.currentSelection !== color ) {
this.currentSelection = color;
mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onChooseColor = function ( button ) {
var color = button.data;
if ( color === 'none' ) {
- this.controller.clearHighlightColor( this.model.getName() );
+ this.controller.clearHighlightColor( this.filterItem.getName() );
} else {
- this.controller.setHighlightColor( this.model.getName(), color );
+ this.controller.setHighlightColor( this.filterItem.getName(), color );
}
this.emit( 'chooseColor', color );
};