RCFilters UI: Highlight behavior

[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 4ef3461..ae9ee71 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,14 @@
 
                this.controller = controller;
                this.model = model;
+               this.$overlay = config.$overlay || this.$element;
+
+               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 +40,10 @@
                } );
 
                // Events
+               this.highlightButton.connect( this, { click: 'onHighlightButtonClick' } );
                this.model.connect( this, {
-                       initialize: 'onModelInitialize'
+                       initialize: 'onModelInitialize',
+                       highlightChange: 'onHighlightChange'
                } );
 
                // Initialize
@@ -69,12 +79,26 @@
                        Object.keys( this.model.getFilterGroups() ).map( function ( groupName ) {
                                return new mw.rcfilters.ui.FilterGroupWidget(
                                        widget.controller,
-                                       widget.model.getGroup( groupName )
+                                       widget.model.getGroup( groupName ),
+                                       {
+                                               $overlay: widget.$overlay
+                                       }
                                );
                        } )
                );
        };
 
+       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();
+       };
+
        /**
         * Switch between showing the 'no results' message for filtering results or the result list.
         *