1 files changed, 79 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RclTargetPageWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RclTargetPageWidget.js
new file mode 100644
index 00000000..527d790d
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RclTargetPageWidget.js
@@ -0,0 +1,79 @@
+( function ( mw ) {
+	/**
+	 * Widget to select and display target page on Special:RecentChangesLinked (AKA Related Changes)
+	 *
+	 * @extends OO.ui.Widget
+	 *
+	 * @constructor
+	 * @param {mw.rcfilters.Controller} controller
+	 * @param {mw.rcfilters.dm.FilterItem} targetPageModel
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.rcfilters.ui.RclTargetPageWidget = function MwRcfiltersUiRclTargetPageWidget(
+		controller, targetPageModel, config
+	) {
+		config = config || {};
+
+		// Parent
+		mw.rcfilters.ui.RclTargetPageWidget.parent.call( this, config );
+
+		this.controller = controller;
+		this.model = targetPageModel;
+
+		this.titleSearch = new mw.widgets.TitleInputWidget( {
+			validate: false,
+			placeholder: mw.msg( 'rcfilters-target-page-placeholder' ),
+			showImages: true,
+			showDescriptions: true,
+			addQueryInput: false
+		} );
+
+		// Events
+		this.model.connect( this, { update: 'updateUiBasedOnModel' } );
+
+		this.titleSearch.$input.on( {
+			blur: this.onLookupInputBlur.bind( this )
+		} );
+
+		this.titleSearch.lookupMenu.connect( this, {
+			choose: 'onLookupMenuItemChoose'
+		} );
+
+		// Initialize
+		this.$element
+			.addClass( 'mw-rcfilters-ui-rclTargetPageWidget' )
+			.append( this.titleSearch.$element );
+
+		this.updateUiBasedOnModel();
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.rcfilters.ui.RclTargetPageWidget, OO.ui.Widget );
+
+	/* Methods */
+
+	/**
+	 * Respond to the user choosing a title
+	 */
+	mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupMenuItemChoose = function () {
+		this.titleSearch.$input.blur();
+	};
+
+	/**
+	 * Respond to titleSearch $input blur
+	 */
+	mw.rcfilters.ui.RclTargetPageWidget.prototype.onLookupInputBlur = function () {
+		this.controller.setTargetPage( this.titleSearch.getQueryValue() );
+	};
+
+	/**
+	 * Respond to the model being updated
+	 */
+	mw.rcfilters.ui.RclTargetPageWidget.prototype.updateUiBasedOnModel = function () {
+		var title = mw.Title.newFromText( this.model.getValue() ),
+			text = title ? title.toText() : this.model.getValue();
+		this.titleSearch.setValue( text );
+		this.titleSearch.setTitle( text );
+	};
+}( mediaWiki ) );