*
* @constructor
* @param {mw.rcfilters.Controller} controller RCFilters controller
- * @param {mw.rcfilters.dm.ItemModel} model Item model
+ * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel
+ * @param {mw.rcfilters.dm.ItemModel} invertModel
+ * @param {mw.rcfilters.dm.ItemModel} itemModel Item model
* @param {Object} config Configuration object
*/
- mw.rcfilters.ui.ItemMenuOptionWidget = function MwRcfiltersUiItemMenuOptionWidget( controller, model, config ) {
+ mw.rcfilters.ui.ItemMenuOptionWidget = function MwRcfiltersUiItemMenuOptionWidget(
+ controller, filtersViewModel, invertModel, itemModel, config
+ ) {
var layout,
classes = [],
$label = $( '<div>' )
config = config || {};
this.controller = controller;
- this.model = model;
+ this.filtersViewModel = filtersViewModel;
+ this.invertModel = invertModel;
+ this.itemModel = itemModel;
// Parent
mw.rcfilters.ui.ItemMenuOptionWidget.parent.call( this, $.extend( {
// Override the 'check' icon that OOUI defines
icon: '',
- data: this.model.getName(),
- label: this.model.getLabel()
+ data: this.itemModel.getName(),
+ label: this.itemModel.getLabel()
}, config ) );
this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
- value: this.model.getName(),
- selected: this.model.isSelected()
+ value: this.itemModel.getName(),
+ selected: this.itemModel.isSelected()
} );
$label.append(
.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-title' )
.append( this.$label )
);
- if ( this.model.getDescription() ) {
+ if ( this.itemModel.getDescription() ) {
$label.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-desc' )
- .text( this.model.getDescription() )
+ .text( this.itemModel.getDescription() )
);
}
this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
this.controller,
- this.model,
+ this.itemModel,
{
$overlay: config.$overlay || this.$element,
title: mw.msg( 'rcfilters-highlightmenu-help' )
}
);
- this.highlightButton.toggle( this.model.isHighlightEnabled() );
+ this.highlightButton.toggle( this.filtersViewModel.isHighlightEnabled() );
this.excludeLabel = new OO.ui.LabelWidget( {
label: mw.msg( 'rcfilters-filter-excluded' )
} );
- this.excludeLabel.toggle( this.model.isSelected() && this.model.isInverted() );
+ this.excludeLabel.toggle(
+ this.itemModel.getGroupModel().getView() === 'namespaces' &&
+ this.itemModel.isSelected() &&
+ this.invertModel.isSelected()
+ );
layout = new OO.ui.FieldLayout( this.checkboxWidget, {
label: $label,
} );
// Events
- this.model.connect( this, { update: 'onModelUpdate' } );
+ this.filtersViewModel.connect( this, { highlightChange: 'updateUiBasedOnState' } );
+ this.invertModel.connect( this, { update: 'updateUiBasedOnState' } );
+ this.itemModel.connect( this, { update: 'updateUiBasedOnState' } );
// HACK: Prevent defaults on 'click' for the label so it
// doesn't steal the focus away from the input. This means
// we can continue arrow-movement after we click the label
this.$element
.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
- .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.model.getGroupModel().getView() )
+ .addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.itemModel.getGroupModel().getView() )
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-table' )
)
);
- if ( this.model.getIdentifiers() ) {
- this.model.getIdentifiers().forEach( function ( ident ) {
+ if ( this.itemModel.getIdentifiers() ) {
+ this.itemModel.getIdentifiers().forEach( function ( ident ) {
classes.push( 'mw-rcfilters-ui-itemMenuOptionWidget-identifier-' + ident );
} );
this.$element.addClass( classes.join( ' ' ) );
}
+
+ this.updateUiBasedOnState();
};
/* Initialization */
/**
* Respond to item model update event
*/
- mw.rcfilters.ui.ItemMenuOptionWidget.prototype.onModelUpdate = function () {
- this.checkboxWidget.setSelected( this.model.isSelected() );
-
- this.highlightButton.toggle( this.model.isHighlightEnabled() );
- this.excludeLabel.toggle( this.model.isSelected() && this.model.isInverted() );
+ mw.rcfilters.ui.ItemMenuOptionWidget.prototype.updateUiBasedOnState = function () {
+ this.checkboxWidget.setSelected( this.itemModel.isSelected() );
+
+ this.highlightButton.toggle( this.filtersViewModel.isHighlightEnabled() );
+ this.excludeLabel.toggle(
+ this.itemModel.getGroupModel().getView() === 'namespaces' &&
+ this.itemModel.isSelected() &&
+ this.invertModel.isSelected()
+ );
+ this.toggle( this.itemModel.isVisible() );
};
/**
* @return {string} Filter name
*/
mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getName = function () {
- return this.model.getName();
+ return this.itemModel.getName();
};
mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getModel = function () {
- return this.model;
+ return this.itemModel;
};
}( mediaWiki ) );