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

   1 ( function () {
   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                         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: 'onLookupMenuItemChoose'
  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( mw.rcfilters.ui.RclTargetPageWidget, OO.ui.Widget );
  53
  54         /* Methods */
  55
  56         /**
  57          * Respond to the user choosing a title
  58          */
  59         mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupMenuItemChoose = function () {
  60                 this.titleSearch.$input.blur();
  61         };
  62
  63         /**
  64          * Respond to titleSearch $input blur
  65          */
  66         mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupInputBlur = function () {
  67                 this.controller.setTargetPage( this.titleSearch.getQueryValue() );
  68         };
  69
  70         /**
  71          * Respond to the model being updated
  72          */
  73         mw.rcfilters.ui.RclTargetPageWidget.prototype.updateUiBasedOnModel = function () {
  74                 var 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 }() );