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

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