Merge "RCFilters UI: Add 'select' state and styles to capsule items"

[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 9fa58f3..02ddb54 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -13,6 +13,7 @@
         * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
         */
        mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, config ) {
+               var $footer = $( '<div>' );
                config = config || {};
 
                // Parent
@@ -33,6 +34,16 @@
                        }
                );
 
+               $footer.append(
+                       new OO.ui.ButtonWidget( {
+                               framed: false,
+                               icon: 'feedback',
+                               flags: [ 'progressive' ],
+                               label: mw.msg( 'rcfilters-filterlist-feedbacklink' ),
+                               href: 'https://www.mediawiki.org/wiki/Help_talk:Edit_Review_Improvements/RC_filters'
+                       } ).$element
+               );
+
                this.textInput = new OO.ui.TextInputWidget( {
                        classes: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
                        icon: 'search',
@@ -43,6 +54,7 @@
                        $overlay: this.$overlay,
                        popup: {
                                $content: this.filterPopup.$element,
+                               $footer: $footer,
                                classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
                                width: 650
                        }
@@ -50,11 +62,16 @@
 
                // Events
                this.model.connect( this, {
-                       initialize: 'onModelInitialize'
+                       initialize: 'onModelInitialize',
+                       itemUpdate: 'onModelItemUpdate'
                } );
                this.textInput.connect( this, {
                        change: 'onTextInputChange'
                } );
+               this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
+               this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
+
+               // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
                        .append( this.capsule.$element, this.textInput.$element );
@@ -65,12 +82,45 @@
        OO.inheritClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.Widget );
        OO.mixinClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.mixin.PendingElement );
 
+       /**
+        * Respond to capsule item click and make the popup scroll down to the requested item
+        *
+        * @param {mw.rcfilters.ui.CapsuleItemWidget} item Clicked item
+        */
+       mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsuleItemClick = function ( item ) {
+               var filterName = item.getData(),
+                       // Find the item in the popup
+                       filterWidget = this.filterPopup.getItemWidget( filterName );
+
+               // Highlight item
+               this.filterPopup.select( filterName );
+               this.capsule.select( item );
+
+               this.scrollToTop( filterWidget.$element );
+       };
+
+       /**
+        * Respond to popup toggle event. Reset selection in the list when the popup is closed.
+        *
+        * @param {boolean} isVisible Popup is visible
+        */
+       mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
+               if ( !isVisible ) {
+                       this.filterPopup.resetSelection();
+                       this.capsule.resetSelection();
+               } else {
+                       this.scrollToTop( this.capsule.$element, 10 );
+               }
+       };
+
        /**
         * Respond to text input change
         *
         * @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 ) );
                this.capsule.popup.clip();
@@ -93,4 +143,30 @@
                        }
                } );
        };
+
+       /**
+        * Respond to item update and reset the selection. This will make it so that
+        * any actual interaction with the system resets the selection state of any item.
+        */
+       mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function () {
+               this.filterPopup.resetSelection();
+       };
+
+       /**
+        * Scroll the element to top within its container
+        *
+        * @private
+        * @param {jQuery} $element Element to position
+        * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
+        *  much space (in pixels) above the widget.
+        */
+       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 ) );
+
+               // Scroll to item
+               $( container ).animate( {
+                       scrollTop: $( container ).scrollTop() + pos.top + ( marginFromTop || 0 )
+               } );
+       };
 }( mediaWiki ) );