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

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