From 59ffe6f6cb058608383b10a49ffcf155efb22145 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 24 Feb 2017 15:02:49 -0800
Subject: [PATCH] RCFilters UI: Scroll the capsule to the top of the screen

When the popup shows up, scroll the capsule widget to the top of
the screen.

Change-Id: I5366a8a0918bda0aabe1c97db252278c36a89347
---
 ...lters.ui.FilterCapsuleMultiselectWidget.js | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 50b7d1536f..2bd2f0e194 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -11,6 +11,8 @@
 	 * @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
 	 * @param {Object} config Configuration object
 	 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+	 * @cfg {number} [topScrollOffset=10] When scrolling the entire widget to the top, leave this
+	 *  much space (in pixels) above the widget.
 	 */
 	mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput, config ) {
 		var title = new OO.ui.LabelWidget( {
@@ -29,9 +31,10 @@
 
 		this.controller = controller;
 		this.model = model;
-
 		this.filterInput = filterInput;
 
+		this.topScrollOffset = config.topScrollOffset || 10;
+
 		this.resetButton = new OO.ui.ButtonWidget( {
 			icon: 'trash',
 			framed: false,
@@ -51,6 +54,8 @@
 			itemUpdate: 'onModelItemUpdate',
 			highlightChange: 'onModelHighlightChange'
 		} );
+		this.popup.connect( this, { toggle: 'onPopupToggle' } );
+
 		// Add the filterInput as trigger
 		this.filterInput.$input
 			.on( 'focus', this.focus.bind( this ) );
@@ -162,6 +167,28 @@
 		}
 	};
 
+	/**
+	 * Respond to popup toggle event
+	 *
+	 * @param {boolean} isVisible Popup is visible
+	 */
+	mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onPopupToggle = function ( isVisible ) {
+		if ( isVisible ) {
+			this.scrollToTop();
+		}
+	};
+
+	/**
+	 * Scroll the capsule to the top of the screen
+	 */
+	mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.scrollToTop = function () {
+		var container = OO.ui.Element.static.getClosestScrollableContainer( this.$element[ 0 ], 'y' );
+
+		$( container ).animate( {
+			scrollTop: this.$element.offset().top - this.topScrollOffset
+		} );
+	};
+
 	/**
 	 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
 	 */
-- 
2.20.1