RCFilters: Create one single source of truth for item display

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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
index 98acab0..07d8c88 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
@@ -33,7 +33,6 @@
                this.userSelecting = false;
 
                this.menuInitialized = false;
-               this.inputValue = '';
                this.$overlay = config.$overlay || this.$element;
                this.$body = $( '<div>' ).addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
                this.footers = [];
@@ -41,7 +40,9 @@
                // Parent
                mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
                        $autoCloseIgnore: this.$overlay,
-                       width: 650
+                       width: 650,
+                       // Our filtering is done through the model
+                       filterFromInput: false
                }, config ) );
                this.setGroupElement(
                        $( '<div>' )
@@ -65,8 +66,8 @@
 
                // Events
                this.model.connect( this, {
-                       update: 'onModelUpdate',
-                       initialize: 'onModelInitialize'
+                       initialize: 'onModelInitialize',
+                       searchChange: 'onModelSearchChange'
                } );
 
                // Initialization
@@ -104,7 +105,7 @@
                }.bind( this ) );
 
                // Switch to the correct view
-               this.switchView( this.model.getCurrentView() );
+               this.updateView();
        };
 
        /* Initialize */
@@ -113,20 +114,9 @@
 
        /* Events */
 
-       /**
-        * @event itemVisibilityChange
-        *
-        * Item visibility has changed
-        */
-
        /* Methods */
-
-       /**
-        * Respond to model update event
-        */
-       mw.rcfilters.ui.MenuSelectWidget.prototype.onModelUpdate = function () {
-               // Change view
-               this.switchView( this.model.getCurrentView() );
+       mw.rcfilters.ui.MenuSelectWidget.prototype.onModelSearchChange = function () {
+               this.updateView();
        };
 
        /**
@@ -144,6 +134,7 @@
         */
        mw.rcfilters.ui.MenuSelectWidget.prototype.lazyMenuCreation = function () {
                var widget = this,
+                       items = [],
                        viewGroupCount = {},
                        groups = this.model.getFilterGroups();
 
@@ -152,8 +143,6 @@
                }
 
                this.menuInitialized = true;
-               // Reset
-               this.clearItems();
 
                // Count groups per view
                $.each( groups, function ( groupName, groupModel ) {
@@ -202,10 +191,12 @@
                                // without rebuilding the widgets each time
                                widget.views[ view ] = widget.views[ view ] || [];
                                widget.views[ view ] = widget.views[ view ].concat( currentItems );
+                               items = items.concat( currentItems );
                        }
                } );
 
-               this.switchView( this.model.getCurrentView() );
+               this.addItems( items );
+               this.updateView();
        };
 
        /**
@@ -216,16 +207,12 @@
        };
 
        /**
-        * Switch view
-        *
-        * @param {string} [viewName] View name. If not given, default is used.
+        * Update view
         */
-       mw.rcfilters.ui.MenuSelectWidget.prototype.switchView = function ( viewName ) {
-               viewName = viewName || 'default';
+       mw.rcfilters.ui.MenuSelectWidget.prototype.updateView = function () {
+               var viewName = this.model.getCurrentView();
 
                if ( this.views[ viewName ] && this.currentView !== viewName ) {
-                       this.clearItems();
-                       this.addItems( this.views[ viewName ] );
                        this.updateFooterVisibility( viewName );
 
                        this.$element
@@ -235,8 +222,10 @@
 
                        this.currentView = viewName;
                        this.scrollToTop();
-                       this.clip();
                }
+
+               this.postProcessItems();
+               this.clip();
        };
 
        /**
@@ -258,24 +247,18 @@
        };
 
        /**
-        * @fires itemVisibilityChange
-        * @inheritdoc
+        * Post-process items after the visibility changed. Make sure
+        * that we always have an item selected, and that the no-results
+        * widget appears if the menu is empty.
         */
-       mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
+       mw.rcfilters.ui.MenuSelectWidget.prototype.postProcessItems = function () {
                var i,
                        itemWasSelected = false,
-                       inputVal = this.$input.val(),
                        items = this.getItems();
 
-               // Since the method hides/shows items, we don't want to
-               // call it unless the input actually changed
-               if (
-                       !this.userSelecting &&
-                       this.inputValue !== inputVal
-               ) {
-                       // Parent method
-                       mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
-
+               // If we are not already selecting an item, always make sure
+               // that the top item is selected
+               if ( !this.userSelecting ) {
                        // Select the first item in the list
                        for ( i = 0; i < items.length; i++ ) {
                                if (
@@ -291,11 +274,6 @@
                        if ( !itemWasSelected ) {
                                this.selectItem( null );
                        }
-
-                       // Cache value
-                       this.inputValue = inputVal;
-
-                       this.emit( 'itemVisibilityChange' );
                }
 
                this.noResults.toggle( !this.getItems().some( function ( item ) {
@@ -316,19 +294,6 @@
                } )[ 0 ];
        };
 
-       /**
-        * Override the item matcher to use the model's match process
-        *
-        * @inheritdoc
-        */
-       mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
-               var results = this.model.findMatches( s, true );
-
-               return function ( item ) {
-                       return results.indexOf( item.getModel() ) > -1;
-               };
-       };
-
        /**
         * @inheritdoc
         */