resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RclTargetPageWidget.js

   1 ( function ( mw ) {
   2         /**
   3          * Widget to select and display target page on Special:RecentChangesLinked (AKA Related Changes)
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller
   9          * @param {mw.rcfilters.dm.FilterItem} targetPageModel
  10          * @param {Object} [config] Configuration object
  11          */
  12         mw.rcfilters.ui.RclTargetPageWidget = function MwRcfiltersUiRclTargetPageWidget(
  13                 controller, targetPageModel, config
  14         ) {
  15                 config = config || {};
  16
  17                 // Parent
  18                 mw.rcfilters.ui.RclTargetPageWidget.parent.call( this, config );
  19
  20                 this.controller = controller;
  21                 this.model = targetPageModel;
  22
  23                 this.titleSearch = new mw.widgets.TitleInputWidget( {
  24                         validate: false,
  25                         placeholder: mw.msg( 'rcfilters-target-page-placeholder' )
  26                 } );
  27
  28                 // Events
  29                 this.model.connect( this, { update: 'updateUiBasedOnModel' } );
  30
  31                 this.titleSearch.$input.on( {
  32                         blur: this.onLookupInputBlur.bind( this )
  33                 } );
  34
  35                 this.titleSearch.lookupMenu.connect( this, {
  36                         choose: 'onLookupMenuItemChoose'
  37                 } );
  38
  39                 // Initialize
  40                 this.$element
  41                         .addClass( 'mw-rcfilters-ui-rclTargetPageWidget' )
  42                         .append( this.titleSearch.$element );
  43
  44                 this.updateUiBasedOnModel();
  45         };
  46
  47         /* Initialization */
  48
  49         OO.inheritClass( mw.rcfilters.ui.RclTargetPageWidget, OO.ui.Widget );
  50
  51         /* Methods */
  52
  53         /**
  54          * Respond to the user choosing a title
  55          */
  56         mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupMenuItemChoose = function () {
  57                 this.titleSearch.$input.blur();
  58         };
  59
  60         /**
  61          * Respond to titleSearch $input blur
  62          */
  63         mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupInputBlur = function () {
  64                 this.controller.setTargetPage( this.titleSearch.getQueryValue() );
  65         };
  66
  67         /**
  68          * Respond to the model being updated
  69          */
  70         mw.rcfilters.ui.RclTargetPageWidget.prototype.updateUiBasedOnModel = function () {
  71                 this.titleSearch.setValue( this.model.getValue() );
  72         };
  73 }( mediaWiki ) );