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

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