1 files changed, 163 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ItemMenuOptionWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ItemMenuOptionWidget.js
new file mode 100644
index 00000000..8c349e56
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ItemMenuOptionWidget.js
@@ -0,0 +1,163 @@
+( function ( mw ) {
+	/**
+	 * A widget representing a base toggle item
+	 *
+	 * @extends OO.ui.MenuOptionWidget
+	 *
+	 * @constructor
+	 * @param {mw.rcfilters.Controller} controller RCFilters controller
+	 * @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, filtersViewModel, invertModel, itemModel, config
+	) {
+		var layout,
+			classes = [],
+			$label = $( '<div>' )
+				.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label' );
+
+		config = config || {};
+
+		this.controller = controller;
+		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.itemModel.getName(),
+			label: this.itemModel.getLabel()
+		}, config ) );
+
+		this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
+			value: this.itemModel.getName(),
+			selected: this.itemModel.isSelected()
+		} );
+
+		$label.append(
+			$( '<div>' )
+				.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-title' )
+				.append( $( '<bdi>' ).append( this.$label ) )
+		);
+		if ( this.itemModel.getDescription() ) {
+			$label.append(
+				$( '<div>' )
+					.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-label-desc' )
+					.append( $( '<bdi>' ).text( this.itemModel.getDescription() ) )
+			);
+		}
+
+		this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
+			this.controller,
+			this.itemModel,
+			{
+				$overlay: config.$overlay || this.$element,
+				title: mw.msg( 'rcfilters-highlightmenu-help' )
+			}
+		);
+		this.highlightButton.toggle( this.filtersViewModel.isHighlightEnabled() );
+
+		this.excludeLabel = new OO.ui.LabelWidget( {
+			label: mw.msg( 'rcfilters-filter-excluded' )
+		} );
+		this.excludeLabel.toggle(
+			this.itemModel.getGroupModel().getView() === 'namespaces' &&
+			this.itemModel.isSelected() &&
+			this.invertModel.isSelected()
+		);
+
+		layout = new OO.ui.FieldLayout( this.checkboxWidget, {
+			label: $label,
+			align: 'inline'
+		} );
+
+		// Events
+		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
+		// and is consistent with the checkbox *itself* also preventing
+		// defaults on 'click' as well.
+		layout.$label.on( 'click', false );
+
+		this.$element
+			.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget' )
+			.addClass( 'mw-rcfilters-ui-itemMenuOptionWidget-view-' + this.itemModel.getGroupModel().getView() )
+			.append(
+				$( '<div>' )
+					.addClass( 'mw-rcfilters-ui-table' )
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-row' )
+							.append(
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox' )
+									.append( layout.$element ),
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel' )
+									.append( this.excludeLabel.$element ),
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-itemMenuOptionWidget-highlightButton' )
+									.append( this.highlightButton.$element )
+							)
+					)
+			);
+
+		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 */
+
+	OO.inheritClass( mw.rcfilters.ui.ItemMenuOptionWidget, OO.ui.MenuOptionWidget );
+
+	/* Static properties */
+
+	// We do our own scrolling to top
+	mw.rcfilters.ui.ItemMenuOptionWidget.static.scrollIntoViewOnSelect = false;
+
+	/* Methods */
+
+	/**
+	 * Respond to item model update event
+	 */
+	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() );
+	};
+
+	/**
+	 * Get the name of this filter
+	 *
+	 * @return {string} Filter name
+	 */
+	mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getName = function () {
+		return this.itemModel.getName();
+	};
+
+	mw.rcfilters.ui.ItemMenuOptionWidget.prototype.getModel = function () {
+		return this.itemModel;
+	};
+
+}( mediaWiki ) );