this.model = model;
// Event
- this.model.connect( this, { update: 'onModelUpdate' } );
+ this.model.connect( this, { update: 'updateUiBasedOnModel' } );
this.colorPickerWidget.connect( this, { chooseColor: 'onChooseColor' } );
// This lives inside a MenuOptionWidget, which intercepts mousedown
// to select the item. We want to prevent that when we click the highlight
// button
this.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
+ this.updateUiBasedOnModel();
+
this.$element
.addClass( 'mw-rcfilters-ui-filterItemHighlightButton' );
};
/**
* Respond to item model update event
*/
- mw.rcfilters.ui.FilterItemHighlightButton.prototype.onModelUpdate = function () {
+ mw.rcfilters.ui.FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () {
var currentColor = this.model.getHighlightColor(),
widget = this;
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.model.connect( this, { update: 'updateUiBasedOnModel' } );
this.buttonSelect.connect( this, { choose: 'onChooseColor' } );
+ this.updateUiBasedOnModel();
+
this.$element
.addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' )
.append(
/**
* Respond to item model update event
*/
- mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onModelUpdate = function () {
+ mw.rcfilters.ui.HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () {
this.selectColor( this.model.getHighlightColor() || 'none' );
};