* @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( {
this.controller = controller;
this.model = model;
-
this.filterInput = filterInput;
+ this.topScrollOffset = config.topScrollOffset || 10;
+
this.resetButton = new OO.ui.ButtonWidget( {
icon: 'trash',
framed: false,
itemUpdate: 'onModelItemUpdate',
highlightChange: 'onModelHighlightChange'
} );
+ this.popup.connect( this, { toggle: 'onPopupToggle' } );
+
// Add the filterInput as trigger
this.filterInput.$input
.on( 'focus', this.focus.bind( this ) );
}
};
+ /**
+ * 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
*/