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

   1 /**
   2  * Widget to select to view changes that link TO or FROM the target page
   3  * on Special:RecentChangesLinked (AKA Related Changes).
   4  *
   5  * @class mw.rcfilters.ui.RclToOrFromWidget
   6  * @ignore
   7  * @extends OO.ui.DropdownWidget
   8  *
   9  * @param {mw.rcfilters.Controller} controller
  10  * @param {mw.rcfilters.dm.FilterItem} showLinkedToModel model this widget is bound to
  11  * @param {Object} [config] Configuration object
  12  */
  13 const RclToOrFromWidget = function MwRcfiltersUiRclToOrFromWidget(
  14         controller, showLinkedToModel, config
  15 ) {
  16         config = config || {};
  17
  18         this.showLinkedFrom = new OO.ui.MenuOptionWidget( {
  19                 data: 'from', // default (showlinkedto=0)
  20                 label: new OO.ui.HtmlSnippet( mw.msg( 'rcfilters-filter-showlinkedfrom-option-label' ) )
  21         } );
  22         this.showLinkedTo = new OO.ui.MenuOptionWidget( {
  23                 data: 'to', // showlinkedto=1
  24                 label: new OO.ui.HtmlSnippet( mw.msg( 'rcfilters-filter-showlinkedto-option-label' ) )
  25         } );
  26
  27         // Parent
  28         RclToOrFromWidget.super.call( this, Object.assign( {
  29                 classes: [ 'mw-rcfilters-ui-rclToOrFromWidget' ],
  30                 menu: { items: [ this.showLinkedFrom, this.showLinkedTo ] }
  31         }, config ) );
  32
  33         this.controller = controller;
  34         this.model = showLinkedToModel;
  35
  36         this.getMenu().connect( this, { choose: 'onUserChooseItem' } );
  37         this.model.connect( this, { update: 'onModelUpdate' } );
  38
  39         // force an initial update of the component based on the state
  40         this.onModelUpdate();
  41 };
  42
  43 /* Initialization */
  44
  45 OO.inheritClass( RclToOrFromWidget, OO.ui.DropdownWidget );
  46
  47 /* Methods */
  48
  49 /**
  50  * Respond to the user choosing an item in the menu
  51  *
  52  * @param {OO.ui.MenuOptionWidget} chosenItem
  53  */
  54 RclToOrFromWidget.prototype.onUserChooseItem = function ( chosenItem ) {
  55         this.controller.setShowLinkedTo( chosenItem.getData() === 'to' );
  56 };
  57
  58 /**
  59  * Respond to model update
  60  */
  61 RclToOrFromWidget.prototype.onModelUpdate = function () {
  62         this.getMenu().selectItem(
  63                 this.model.isSelected() ?
  64                         this.showLinkedTo :
  65                         this.showLinkedFrom
  66         );
  67         this.setLabel( mw.msg(
  68                 this.model.isSelected() ?
  69                         'rcfilters-filter-showlinkedto-label' :
  70                         'rcfilters-filter-showlinkedfrom-label'
  71         ) );
  72 };
  73
  74 module.exports = RclToOrFromWidget;