Merge "RCFilters UI: Prevent the popup from disappearing when input is out of view"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterWrapperWidget.js

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index cad3dce..e64a4c0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -40,7 +40,7 @@
                                icon: 'feedback',
                                flags: [ 'progressive' ],
                                label: mw.msg( 'rcfilters-filterlist-feedbacklink' ),
-                               href: 'https://www.mediawiki.org/wiki/Help_talk:Edit_Review_Improvements/RC_filters'
+                               href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
                        } ).$element
                );
 
@@ -56,7 +56,8 @@
                                $content: this.filterPopup.$element,
                                $footer: $footer,
                                classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
-                               width: 650
+                               width: 650,
+                               hideWhenOutOfView: false
                        }
                } );
 
@@ -66,7 +67,8 @@
                        itemUpdate: 'onModelItemUpdate'
                } );
                this.textInput.connect( this, {
-                       change: 'onTextInputChange'
+                       change: 'onTextInputChange',
+                       enter: 'onTextInputEnter'
                } );
                this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
                this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
@@ -74,7 +76,6 @@
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
-                       .addClass( 'mw-rcfilters-ui-ready' )
                        .append( this.capsule.$element, this.textInput.$element );
        };
 
@@ -107,8 +108,11 @@
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
                if ( !isVisible ) {
-                       this.filterPopup.resetSelection();
-                       this.capsule.resetSelection();
+                       if ( !this.textInput.getValue() ) {
+                               // Only reset selection if we are not filtering
+                               this.filterPopup.resetSelection();
+                               this.capsule.resetSelection();
+                       }
                } else {
                        this.scrollToTop( this.capsule.$element, 10 );
                }
@@ -120,13 +124,30 @@
         * @param {string} newValue Current value
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
-               this.filterPopup.resetSelection();
-
                // Filter the results
                this.filterPopup.filter( this.model.findMatches( newValue ) );
+
+               if ( !newValue ) {
+                       // If the value is empty, we didn't actually
+                       // filter anything. the filter method will run
+                       // and show all, but then will select the
+                       // top item - but in this case, no selection
+                       // should be made.
+                       this.filterPopup.resetSelection();
+               }
                this.capsule.popup.clip();
        };
 
+       /**
+        * Respond to text input enter event
+        */
+       mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputEnter = function () {
+               var filter = this.filterPopup.getSelectedFilter();
+
+               // Toggle the filter
+               this.controller.toggleFilterSelect( filter );
+       };
+
        /**
         * Respond to model update event and set up the available filters to choose
         * from.
@@ -150,7 +171,9 @@
         * any actual interaction with the system resets the selection state of any item.
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
-               this.filterPopup.resetSelection();
+               if ( !this.textInput.getValue() ) {
+                       this.filterPopup.resetSelection();
+               }
        };
 
        /**
@@ -163,11 +186,12 @@
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.scrollToTop = function ( $element, marginFromTop ) {
                var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
-                       pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) );
+                       pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
+                       containerScrollTop = $( container ).is( 'body, html' ) ? 0 : $( container ).scrollTop();
 
                // Scroll to item
                $( container ).animate( {
-                       scrollTop: $( container ).scrollTop() + pos.top + ( marginFromTop || 0 )
+                       scrollTop: containerScrollTop + pos.top - ( marginFromTop || 0 )
                } );
        };
 }( mediaWiki ) );