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

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 50b7d15..2bd2f0e 100644 (file)
--- 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
         */