Merge "RC filters: update the state of the app on popstate."

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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
index 38679d7..4011e6d 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
@@ -29,13 +29,12 @@
                this.groups = {};
                this.selected = null;
 
-               this.highlightButton = new OO.ui.ButtonWidget( {
+               this.highlightButton = new OO.ui.ToggleButtonWidget( {
+                       icon: 'highlight',
                        label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
                        classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
                } );
 
-               this.$label.append( this.highlightButton.$element );
-
                this.noResultsLabel = new OO.ui.LabelWidget( {
                        label: mw.msg( 'rcfilters-filterlist-noresults' ),
                        classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
@@ -45,7 +44,7 @@
                this.highlightButton.connect( this, { click: 'onHighlightButtonClick' } );
                this.model.connect( this, {
                        initialize: 'onModelInitialize',
-                       highlightChange: 'onHighlightChange'
+                       highlightChange: 'onModelHighlightChange'
                } );
 
                // Initialize
@@ -53,7 +52,24 @@
                this.$element
                        .addClass( 'mw-rcfilters-ui-filtersListWidget' )
                        .append(
-                               this.$label,
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-table' )
+                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
+                                       .append(
+                                               $( '<div>' )
+                                                       .addClass( 'mw-rcfilters-ui-row' )
+                                                       .append(
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
+                                                                       .append( this.$label ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
+                                                                       .append( this.highlightButton.$element )
+                                                       )
+                                       ),
+                               // this.$label,
                                this.$group
                                        .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
                                this.noResultsLabel.$element
@@ -94,7 +110,12 @@
                );
        };
 
-       mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
+       /**
+        * Respond to model highlight change event
+        *
+        * @param {boolean} highlightEnabled Highlight is enabled
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
                this.highlightButton.setActive( highlightEnabled );
        };
 
@@ -120,6 +141,15 @@
                return groupWidget.getItemWidget( itemName );
        };
 
+       /**
+        * Get the current selection
+        *
+        * @return {string|null} Selected filter. Null if none is selected.
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.getSelectedFilter = function () {
+               return this.selected;
+       };
+
        /**
         * Mark an item widget as selected
         *
@@ -175,7 +205,7 @@
         *  arranged by their group names
         */
        mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
-               var i, j, groupName, itemWidgets,
+               var i, j, groupName, itemWidgets, topItem, isVisible,
                        groupWidgets = this.getItems(),
                        hasItemWithName = function ( itemArr, name ) {
                                return !!itemArr.filter( function ( item ) {
@@ -183,6 +213,8 @@
                                } ).length;
                        };
 
+               this.resetSelection();
+
                if ( $.isEmptyObject( groupItems ) ) {
                        // No results. Hide everything, show only 'no results'
                        // message
@@ -206,11 +238,19 @@
                        // We have items to show
                        itemWidgets = groupWidgets[ i ].getItems();
                        for ( j = 0; j < itemWidgets.length; j++ ) {
+                               isVisible = hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() );
                                // Only show items that are in the filtered list
-                               itemWidgets[ j ].toggle(
-                                       hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() )
-                               );
+                               itemWidgets[ j ].toggle( isVisible );
+
+                               if ( !topItem && isVisible ) {
+                                       topItem = itemWidgets[ j ];
+                               }
                        }
                }
+
+               // Select the first item
+               if ( topItem ) {
+                       this.select( topItem.getName() );
+               }
        };
 }( mediaWiki, jQuery ) );