Merge "RCFilters: Add 'advanced filters' label to the view selection"
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterTagMultiselectWidget.js
index 6a6790f..3aa7161 100644 (file)
@@ -2,6 +2,7 @@
        /**
         * List displaying all filter groups
         *
+        * @class
         * @extends OO.ui.MenuTagMultiselectWidget
         * @mixins OO.ui.mixin.PendingElement
         *
@@ -14,7 +15,6 @@
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget = function MwRcfiltersUiFilterTagMultiselectWidget( controller, model, savedQueriesModel, config ) {
                var rcFiltersRow,
-                       areSavedQueriesEnabled = mw.config.get( 'wgStructuredChangeFiltersEnableSaving' ),
                        title = new OO.ui.LabelWidget( {
                                label: mw.msg( 'rcfilters-activefilters' ),
                                classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
@@ -29,7 +29,7 @@
                this.queriesModel = savedQueriesModel;
                this.$overlay = config.$overlay || this.$element;
                this.matchingQuery = null;
-               this.areSavedQueriesEnabled = areSavedQueriesEnabled;
+               this.currentView = this.model.getCurrentView();
 
                // Parent
                mw.rcfilters.ui.FilterTagMultiselectWidget.parent.call( this, $.extend( true, {
@@ -47,7 +47,6 @@
                                footers: [
                                        {
                                                name: 'viewSelect',
-                                               disabled: !mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ),
                                                sticky: false,
                                                // View select menu, appears on default view only
                                                $element: $( '<div>' )
                        classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
                } );
 
-               if ( areSavedQueriesEnabled ) {
-                       this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
-                               this.controller,
-                               this.queriesModel
-                       );
+               this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
+                       this.controller,
+                       this.queriesModel
+               );
 
-                       this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
+               this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
 
-                       this.saveQueryButton.connect( this, {
-                               click: 'onSaveQueryButtonClick',
-                               saveCurrent: 'setSavedQueryVisibility'
-                       } );
-               }
+               this.saveQueryButton.connect( this, {
+                       click: 'onSaveQueryButtonClick',
+                       saveCurrent: 'setSavedQueryVisibility'
+               } );
 
                this.emptyFilterMessage = new OO.ui.LabelWidget( {
                        label: mw.msg( 'rcfilters-empty-filter' ),
                                        .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
                        );
 
-               if ( areSavedQueriesEnabled ) {
-                       rcFiltersRow.append(
-                               $( '<div>' )
-                                       .addClass( 'mw-rcfilters-ui-cell' )
-                                       .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
-                                       .append( this.saveQueryButton.$element )
-                       );
-               }
+               rcFiltersRow.append(
+                       $( '<div>' )
+                               .addClass( 'mw-rcfilters-ui-cell' )
+                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
+                               .append( this.saveQueryButton.$element )
+               );
 
-               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' )
-                                       } )
-                               ]
-                       } );
-
-                       // 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 )
-                                                       )
-                                       )
-                       );
+               // 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: '',
+                                       disabled: true,
+                                       classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget-label' ],
+                                       label: mw.msg( 'rcfilters-view-advanced-filters-label' )
+                               } ),
+                               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' )
+                               } )
+                       ]
+               } );
 
-                       // Event
-                       this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
-               }
+               // 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' } );
 
                rcFiltersRow.append(
                        $( '<div>' )
         * @param {string} value Value of the input
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputChange = function ( value ) {
-               var view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
+               var view;
+
+               value = value.trim();
+
+               view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
 
                this.controller.switchView( view );
        };
 
                        // Clear input if the only thing in the input is the prefix
                        if (
-                               this.input.getValue() === this.model.getViewTrigger( this.model.getCurrentView() )
+                               this.input.getValue().trim() === this.model.getViewTrigger( this.model.getCurrentView() )
                        ) {
                                // Clear the input
                                this.input.setValue( '' );
        };
 
        /**
-        * @inheridoc
+        * @inheritdoc
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onChangeTags = function () {
                // Parent method
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.updateElementsForView = function () {
                var view = this.model.getCurrentView(),
-                       inputValue = this.input.getValue(),
+                       inputValue = this.input.getValue().trim(),
                        inputView = this.model.getViewByTrigger( inputValue.substr( 0, 1 ) );
 
                if ( inputView !== 'default' ) {
 
                // Update input
                this.input.setValue( inputValue );
+
+               if ( this.currentView !== view ) {
+                       this.scrollToTop( this.$element );
+                       this.currentView = view;
+               }
        };
 
        /**
         * Set the visibility of the saved query button
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
-               if ( this.areSavedQueriesEnabled ) {
-                       this.matchingQuery = this.controller.findQueryMatchingCurrentState();
+               this.matchingQuery = this.controller.findQueryMatchingCurrentState();
 
-                       this.savedQueryTitle.setLabel(
-                               this.matchingQuery ? this.matchingQuery.getLabel() : ''
-                       );
-                       this.savedQueryTitle.toggle( !!this.matchingQuery );
-                       this.saveQueryButton.toggle(
-                               !this.isEmpty() &&
-                               !this.matchingQuery
-                       );
+               this.savedQueryTitle.setLabel(
+                       this.matchingQuery ? this.matchingQuery.getLabel() : ''
+               );
+               this.savedQueryTitle.toggle( !!this.matchingQuery );
+               this.saveQueryButton.toggle(
+                       !this.isEmpty() &&
+                       !this.matchingQuery
+               );
 
-                       if ( this.matchingQuery ) {
-                               this.emphasize();
-                       }
+               if ( this.matchingQuery ) {
+                       this.emphasize();
                }
        };
 
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
                var widget = this,
                        menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
-                       oldInputValue = this.input.getValue();
+                       oldInputValue = this.input.getValue().trim();
 
                this.menu.setUserSelecting( true );