Lazy creation for heavy menu

Assumptions:
* Generally if we have a model we don't need UI
* UI can be created lazy if it is not shown to user

Bug: T176250
Change-Id: Iba7f889d8610de2eb3056248cd1c664b0cd90940

diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 83e5796..7f1372c 100644 (file)
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -90,7 +90,12 @@
                }
        };
 
-       $( rcfilters.init );
+       // Early execute of init
+       if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
+               rcfilters.init();
+       } else {
+               $( rcfilters.init );
+       }
 
        module.exports = rcfilters;
 

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 07d4506..5ba42e7 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
@@ -32,6 +32,7 @@
                this.views = {};
                this.userSelecting = false;
 
+               this.menuInitialized = false;
                this.inputValue = '';
                this.$overlay = config.$overlay || this.$element;
                this.$body = $( '<div>' ).addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
@@ -129,13 +130,26 @@
        };
 
        /**
-        * Respond to model initialize event. Populate the menu from the model
+        * @inheritdoc
         */
-       mw.rcfilters.ui.MenuSelectWidget.prototype.onModelInitialize = function () {
+       mw.rcfilters.ui.MenuSelectWidget.prototype.toggle = function ( show ) {
+               this.lazyMenuCreation();
+               mw.rcfilters.ui.MenuSelectWidget.parent.prototype.toggle.call( this, show );
+       };
+
+       /**
+        * lazy creation of the menu
+        */
+       mw.rcfilters.ui.MenuSelectWidget.prototype.lazyMenuCreation = function () {
                var widget = this,
                        viewGroupCount = {},
                        groups = this.model.getFilterGroups();
 
+               if ( this.menuInitialized ) {
+                       return;
+               }
+
+               this.menuInitialized = true;
                // Reset
                this.clearItems();
 
@@ -190,6 +204,13 @@
                this.switchView( this.model.getCurrentView() );
        };
 
+       /**
+        * Respond to model initialize event. Populate the menu from the model
+        */
+       mw.rcfilters.ui.MenuSelectWidget.prototype.onModelInitialize = function () {
+               this.menuInitialized = false;
+       };
+
        /**
         * Switch view
         *
@@ -285,6 +306,7 @@
         * @return {mw.rcfilters.ui.ItemMenuOptionWidget} Option widget
         */
        mw.rcfilters.ui.MenuSelectWidget.prototype.getItemFromModel = function ( model ) {
+               this.lazyMenuCreation();
                return this.views[ model.getGroupModel().getView() ].filter( function ( item ) {
                        return item.getName() === model.getName();
                } )[ 0 ];