Merge "RCFilters: Make namespace and tag features no longer experimental"

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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index dcada85..b1f152d 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -2,6 +2,7 @@
        /**
         * List displaying all filter groups
         *
+        * @class
         * @extends OO.ui.MenuTagMultiselectWidget
         * @mixins OO.ui.mixin.PendingElement
         *
@@ -47,7 +48,6 @@
                                footers: [
                                        {
                                                name: 'viewSelect',
-                                               disabled: !mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ),
                                                sticky: false,
                                                // View select menu, appears on default view only
                                                $element: $( '<div>' )
@@ -141,49 +141,47 @@
                        );
                }
 
-               if ( mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ) {
-                       // Add a selector at the right of the input
-                       this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
-                               classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
-                               items: [
-                                       new OO.ui.ButtonOptionWidget( {
-                                               framed: false,
-                                               data: 'namespaces',
-                                               icon: 'article',
-                                               title: mw.msg( 'rcfilters-view-namespaces-tooltip' )
-                                       } ),
-                                       new OO.ui.ButtonOptionWidget( {
-                                               framed: false,
-                                               data: 'tags',
-                                               icon: 'tag',
-                                               title: mw.msg( 'rcfilters-view-tags-tooltip' )
-                                       } )
-                               ]
-                       } );
+               // Add a selector at the right of the input
+               this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
+                       classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
+                       items: [
+                               new OO.ui.ButtonOptionWidget( {
+                                       framed: false,
+                                       data: 'namespaces',
+                                       icon: 'article',
+                                       title: mw.msg( 'rcfilters-view-namespaces-tooltip' )
+                               } ),
+                               new OO.ui.ButtonOptionWidget( {
+                                       framed: false,
+                                       data: 'tags',
+                                       icon: 'tag',
+                                       title: mw.msg( 'rcfilters-view-tags-tooltip' )
+                               } )
+                       ]
+               } );
 
-                       // Rearrange the UI so the select widget is at the right of the input
-                       this.$element.append(
-                               $( '<div>' )
-                                       .addClass( 'mw-rcfilters-ui-table' )
-                                       .append(
-                                               $( '<div>' )
-                                                       .addClass( 'mw-rcfilters-ui-row' )
-                                                       .append(
-                                                               $( '<div>' )
-                                                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                                                       .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
-                                                                       .append( this.input.$element ),
-                                                               $( '<div>' )
-                                                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                                                       .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
-                                                                       .append( this.viewsSelectWidget.$element )
-                                                       )
-                                       )
-                       );
+               // Rearrange the UI so the select widget is at the right of the input
+               this.$element.append(
+                       $( '<div>' )
+                               .addClass( 'mw-rcfilters-ui-table' )
+                               .append(
+                                       $( '<div>' )
+                                               .addClass( 'mw-rcfilters-ui-row' )
+                                               .append(
+                                                       $( '<div>' )
+                                                               .addClass( 'mw-rcfilters-ui-cell' )
+                                                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
+                                                               .append( this.input.$element ),
+                                                       $( '<div>' )
+                                                               .addClass( 'mw-rcfilters-ui-cell' )
+                                                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
+                                                               .append( this.viewsSelectWidget.$element )
+                                               )
+                               )
+               );
 
-                       // Event
-                       this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
-               }
+               // Event
+               this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
 
                rcFiltersRow.append(
                        $( '<div>' )
@@ -290,6 +288,9 @@
                                // Clear the input
                                this.input.setValue( '' );
                        }
+
+                       // Log filter grouping
+                       this.controller.trackFilterGroupings( 'filtermenu' );
                }
 
                this.input.setIcon( isVisible ? 'search' : 'menu' );
@@ -318,7 +319,7 @@
        };
 
        /**
-        * @inheridoc
+        * @inheritdoc
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onChangeTags = function () {
                // Parent method
@@ -378,6 +379,10 @@
                                !this.isEmpty() &&
                                !this.matchingQuery
                        );
+
+                       if ( this.matchingQuery ) {
+                               this.emphasize();
+                       }
                }
        };
 
@@ -387,6 +392,10 @@
         * @param {mw.rcfilters.dm.FilterItem} item Filter item model
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelItemUpdate = function ( item ) {
+               if ( item.getGroupModel().isHidden() ) {
+                       return;
+               }
+
                if (
                        item.isSelected() ||
                        (
@@ -588,6 +597,26 @@
                }
        };
 
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.emphasize = function () {
+               if (
+                       !this.$handle.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
+               ) {
+                       this.$handle
+                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
+                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+
+                       setTimeout( function () {
+                               this.$handle
+                                       .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
+
+                               setTimeout( function () {
+                                       this.$handle
+                                               .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+                               }.bind( this ), 1000 );
+                       }.bind( this ), 500 );
+
+               }
+       };
        /**
         * Scroll the element to top within its container
         *