Merge "RCFilters UI: Select filter when searching and add it on 'enter'"

[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 bb213fd..7da97a1 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:New_filters_for_edit_review'
+                       } ).$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
                        }
@@ -54,7 +66,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' } );
@@ -62,6 +75,7 @@
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
+                       .addClass( 'mw-rcfilters-ui-ready' )
                        .append( this.capsule.$element, this.textInput.$element );
        };
 
@@ -82,6 +96,7 @@
 
                // Highlight item
                this.filterPopup.select( filterName );
+               this.capsule.select( item );
 
                this.scrollToTop( filterWidget.$element );
        };
@@ -93,7 +108,11 @@
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
                if ( !isVisible ) {
-                       this.filterPopup.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 );
                }
@@ -105,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.
@@ -135,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();
+               }
        };
 
        /**