resources/src/mediawiki.rcfilters/ui/CheckboxInputWidget.js

   1 /**
   2  * A widget representing a single toggle filter.
   3  *
   4  * @class mw.rcfilters.ui.CheckboxInputWidget
   5  * @ignore
   6  * @extends OO.ui.CheckboxInputWidget
   7  *
   8  * @param {Object} config Configuration object
   9  */
  10 const CheckboxInputWidget = function MwRcfiltersUiCheckboxInputWidget( config ) {
  11         config = config || {};
  12
  13         // Parent
  14         CheckboxInputWidget.super.call( this, config );
  15
  16         // Event
  17         this.$input
  18                 // HACK: This widget just pretends to be a checkbox for visual purposes.
  19                 // In reality, all actions - setting to true or false, etc - are
  20                 // decided by the model, and executed by the controller. This means
  21                 // that we want to let the controller and model make the decision
  22                 // of whether to check/uncheck this checkboxInputWidget, and for that,
  23                 // we have to bypass the browser action that checks/unchecks it during
  24                 // click.
  25                 .on( 'click', false )
  26                 .on( 'change', this.onUserChange.bind( this ) );
  27 };
  28
  29 /* Initialization */
  30
  31 OO.inheritClass( CheckboxInputWidget, OO.ui.CheckboxInputWidget );
  32
  33 /* Events */
  34
  35 /**
  36  * The user has checked or unchecked this checkbox.
  37  *
  38  * @event userChange
  39  * @param {boolean} Current state of the checkbox
  40  * @ignore
  41  */
  42
  43 /* Methods */
  44
  45 /**
  46  * @inheritdoc
  47  */
  48 CheckboxInputWidget.prototype.onEdit = function () {
  49         // Similarly to preventing defaults in 'click' event, we want
  50         // to prevent this widget from deciding anything about its own
  51         // state; it emits a change event and the model and controller
  52         // make a decision about what its select state is.
  53         // onEdit has a widget.$input.prop( 'checked' ) inside a setTimeout()
  54         // so we really want to prevent that from messing with what
  55         // the model decides the state of the widget is.
  56 };
  57
  58 /**
  59  * Respond to checkbox change by a user and emit 'userChange'.
  60  */
  61 CheckboxInputWidget.prototype.onUserChange = function () {
  62         this.emit( 'userChange', this.$input.prop( 'checked' ) );
  63 };
  64
  65 module.exports = CheckboxInputWidget;