RCFilters UI: Scroll to filter when selected

[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 f5ec1fc..38679d7 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
@@ -25,6 +25,16 @@
 
                this.controller = controller;
                this.model = model;
+               this.$overlay = config.$overlay || this.$element;
+               this.groups = {};
+               this.selected = null;
+
+               this.highlightButton = new OO.ui.ButtonWidget( {
+                       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' ),
@@ -32,8 +42,10 @@
                } );
 
                // Events
+               this.highlightButton.connect( this, { click: 'onHighlightButtonClick' } );
                this.model.connect( this, {
-                       initialize: 'onModelInitialize'
+                       initialize: 'onModelInitialize',
+                       highlightChange: 'onHighlightChange'
                } );
 
                // Initialize
@@ -60,40 +72,90 @@
         * Respond to initialize event from the model
         */
        mw.rcfilters.ui.FiltersListWidget.prototype.onModelInitialize = function () {
-               var i, group, groupWidget,
-                       itemWidgets = [],
-                       groupWidgets = [],
-                       groups = this.model.getFilterGroups();
+               var widget = this;
 
                // Reset
                this.clearItems();
+               this.groups = {};
+
+               this.addItems(
+                       Object.keys( this.model.getFilterGroups() ).map( function ( groupName ) {
+                               var groupWidget = new mw.rcfilters.ui.FilterGroupWidget(
+                                       widget.controller,
+                                       widget.model.getGroup( groupName ),
+                                       {
+                                               $overlay: widget.$overlay
+                                       }
+                               );
 
-               for ( group in groups ) {
-                       groupWidget = new mw.rcfilters.ui.FilterGroupWidget( group, {
-                               label: groups[ group ].title
-                       } );
-                       groupWidgets.push( groupWidget );
-
-                       itemWidgets = [];
-                       if ( groups[ group ].filters ) {
-                               for ( i = 0; i < groups[ group ].filters.length; i++ ) {
-                                       itemWidgets.push(
-                                               new mw.rcfilters.ui.FilterItemWidget(
-                                                       this.controller,
-                                                       groups[ group ].filters[ i ],
-                                                       {
-                                                               label: groups[ group ].filters[ i ].getLabel(),
-                                                               description: groups[ group ].filters[ i ].getDescription()
-                                                       }
-                                               )
-                                       );
-                               }
-
-                               groupWidget.addItems( itemWidgets );
+                               widget.groups[ groupName ] = groupWidget;
+                               return groupWidget;
+                       } )
+               );
+       };
+
+       mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
+               this.highlightButton.setActive( highlightEnabled );
+       };
+
+       /**
+        * Respond to highlight button click
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightButtonClick = function () {
+               this.controller.toggleHighlight();
+       };
+
+       /**
+        * Find the filter item widget that corresponds to the item name
+        *
+        * @param {string} itemName Filter name
+        * @return {mw.rcfilters.ui.FilterItemWidget} Filter widget
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.getItemWidget = function ( itemName ) {
+               var filterItem = this.model.getItemByName( itemName ),
+                       // Find the group
+                       groupWidget = this.groups[ filterItem.getGroupName() ];
+
+               // Find the item inside the group
+               return groupWidget.getItemWidget( itemName );
+       };
+
+       /**
+        * Mark an item widget as selected
+        *
+        * @param {string} itemName Filter name
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.select = function ( itemName ) {
+               var filterWidget;
+
+               if ( this.selected !== itemName ) {
+                       // Unselect previous
+                       if ( this.selected ) {
+                               filterWidget = this.getItemWidget( this.selected );
+                               filterWidget.toggleSelected( false );
+                       }
+
+                       // Select new one
+                       this.selected = itemName;
+                       if ( this.selected ) {
+                               filterWidget = this.getItemWidget( this.selected );
+                               filterWidget.toggleSelected( true );
                        }
                }
+       };
 
-               this.addItems( groupWidgets );
+       /**
+        * Reset selection and remove selected states from all items
+        */
+       mw.rcfilters.ui.FiltersListWidget.prototype.resetSelection = function () {
+               if ( this.selected !== null ) {
+                       this.selected = null;
+                       this.getItems().forEach( function ( groupWidget ) {
+                               groupWidget.getItems().forEach( function ( filterItemWidget ) {
+                                       filterItemWidget.toggleSelected( false );
+                               } );
+                       } );
+               }
        };
 
        /**