1 files changed, 63 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CheckboxInputWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CheckboxInputWidget.js
new file mode 100644
index 00000000..9fd45939
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CheckboxInputWidget.js
@@ -0,0 +1,63 @@
+( function ( mw ) {
+	/**
+	 * A widget representing a single toggle filter
+	 *
+	 * @extends OO.ui.CheckboxInputWidget
+	 *
+	 * @constructor
+	 * @param {Object} config Configuration object
+	 */
+	mw.rcfilters.ui.CheckboxInputWidget = function MwRcfiltersUiCheckboxInputWidget( config ) {
+		config = config || {};
+
+		// Parent
+		mw.rcfilters.ui.CheckboxInputWidget.parent.call( this, config );
+
+		// Event
+		this.$input
+			// HACK: This widget just pretends to be a checkbox for visual purposes.
+			// In reality, all actions - setting to true or false, etc - are
+			// decided by the model, and executed by the controller. This means
+			// that we want to let the controller and model make the decision
+			// of whether to check/uncheck this checkboxInputWidget, and for that,
+			// we have to bypass the browser action that checks/unchecks it during
+			// click.
+			.on( 'click', false )
+			.on( 'change', this.onUserChange.bind( this ) );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.rcfilters.ui.CheckboxInputWidget, OO.ui.CheckboxInputWidget );
+
+	/* Events */
+
+	/**
+	 * @event userChange
+	 * @param {boolean} Current state of the checkbox
+	 *
+	 * The user has checked or unchecked this checkbox
+	 */
+
+	/* Methods */
+
+	/**
+	 * @inheritdoc
+	 */
+	mw.rcfilters.ui.CheckboxInputWidget.prototype.onEdit = function () {
+		// Similarly to preventing defaults in 'click' event, we want
+		// to prevent this widget from deciding anything about its own
+		// state; it emits a change event and the model and controller
+		// make a decision about what its select state is.
+		// onEdit has a widget.$input.prop( 'checked' ) inside a setTimeout()
+		// so we really want to prevent that from messing with what
+		// the model decides the state of the widget is.
+	};
+
+	/**
+	 * Respond to checkbox change by a user and emit 'userChange'.
+	 */
+	mw.rcfilters.ui.CheckboxInputWidget.prototype.onUserChange = function () {
+		this.emit( 'userChange', this.$input.prop( 'checked' ) );
+	};
+}( mediaWiki ) );