this.controller = controller;
this.model = model;
+ this.selected = false;
- this.checkboxWidget = new OO.ui.CheckboxInputWidget( {
+ this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
value: this.model.getName(),
selected: this.model.isSelected()
} );
);
}
+ this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
+ this.controller,
+ this.model,
+ {
+ $overlay: config.$overlay || this.$element
+ }
+ );
+ this.highlightButton.toggle( this.model.isHighlightEnabled() );
+
layout = new OO.ui.FieldLayout( this.checkboxWidget, {
label: $label,
align: 'inline'
} );
// Event
- this.checkboxWidget.connect( this, { change: 'onCheckboxChange' } );
+ this.checkboxWidget.connect( this, { userChange: 'onCheckboxChange' } );
this.model.connect( this, { update: 'onModelUpdate' } );
+ this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
this.$element
.addClass( 'mw-rcfilters-ui-filterItemWidget' )
.append(
- layout.$element
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-row' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
+ .append( layout.$element ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
+ .append( this.highlightButton.$element )
+ )
+ )
);
};
mw.rcfilters.ui.FilterItemWidget.prototype.onModelUpdate = function () {
this.checkboxWidget.setSelected( this.model.isSelected() );
+ this.setCurrentMuteState();
+ };
+
+ /**
+ * Respond to item group model update event
+ */
+ mw.rcfilters.ui.FilterItemWidget.prototype.onGroupModelUpdate = function () {
+ this.setCurrentMuteState();
+ };
+
+ /**
+ * Set selected state on this widget
+ *
+ * @param {boolean} [isSelected] Widget is selected
+ */
+ mw.rcfilters.ui.FilterItemWidget.prototype.toggleSelected = function ( isSelected ) {
+ isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+ if ( this.selected !== isSelected ) {
+ this.selected = isSelected;
+
+ this.$element.toggleClass( 'mw-rcfilters-ui-filterItemWidget-selected', this.selected );
+ }
+ };
+
+ /**
+ * Set the current mute state for this item
+ */
+ mw.rcfilters.ui.FilterItemWidget.prototype.setCurrentMuteState = function () {
this.$element.toggleClass(
- 'mw-rcfilters-ui-filterItemWidget-inactive',
- !this.model.isActive()
+ 'mw-rcfilters-ui-filterItemWidget-muted',
+ this.model.isConflicted() ||
+ this.model.isIncluded() ||
+ (
+ // Item is also muted when any of the items in its group is active
+ this.model.getGroupModel().isActive() &&
+ // But it isn't selected
+ !this.model.isSelected()
+ )
);
+
+ this.highlightButton.toggle( this.model.isHighlightEnabled() );
};
/**
mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
return this.model.getName();
};
-
}( mediaWiki, jQuery ) );