Changeset 2544

Timestamp:

02/22/2016 08:50:25 PM (11 years ago)

Author:

ocean90

Message:

Rosetta, Roles: Improve performance of the edit page.

• When searching filter the sub-projects collection directly and re-render the list once. Previously a CSS class was added/removed and thus every item was re-rendered. H/t adamsilverstein.
• Only render the first 100 sub-projects of a project. The others can be revealed through a search.
• Add an Ajax handler for the projects data and store the JSON data in browser's local storage.

See #1590.

Location:

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles

Files:

• js/rosetta-roles.js (modified) (11 diffs)
• rosetta-roles.php (modified) (3 diffs)

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles/js/rosetta-roles.js

@@ -22 +22 @@
 
                 initialize: function() {
-                        var subProjects = this.get( 'sub_projects' );
+                        // Store the original sub-projects data, it's used to reset the collection on searches.
+                        this._subProjects = this.get( 'sub_projects' );
                         this.unset( 'sub_projects' );
 
-                        this.set( 'subProjects', new projects.model.subProjects( subProjects ) );
+                        this.set( 'subProjects', new projects.model.subProjects( this._subProjects, {
+                                project: this,
+                        } ) );
                         this.set( 'checked', _.contains( projects.settings.accessList, parseInt( this.get( 'id' ), 10 ) ) );
 
@@ -84 +87 @@
                         id: 0,
                         name: '',
-                        checked: false,
-                        isVisible: true
+                        checked: false
                 },
 
@@ -99 +101 @@
                 terms: '',
 
-                initialize: function() {
+                initialize: function( models, options ) {
+                        this.project = options.project;
                         this.on( 'uncheckall', this.uncheckall );
                 },
@@ -121 +124 @@
                         }
 
-                        if ( this.terms === '' ) {
-                                this.each( function( project ) {
-                                        project.set( 'isVisible', true );
-                                });
-                        }
+                        // If search is blank, show all projects.
+                        if ( '' === this.terms ) {
+                                this.reset( this.project._subProjects );
+                        }
+
+                        // Trigger a 'projects:update' event
+                        this.trigger( 'projects:update' );
                 },
 
@@ -131 +136 @@
                 // @uses RegExp
                 search: function( term ) {
-                        var match;
+                        var match, results;
+
+                        // Start with a full collection
+                        this.reset( this.project._subProjects, { silent: true } );
 
                         // Escape the term string for RegExp meta characters
@@ -141 +149 @@
                         match = new RegExp( '^(?=.*' + term + ').+', 'i' );
 
-                        // Find results
-                        this.each( function( project ) {
+                        results = this.filter( function( project ) {
                                 var haystack = _.union( [ project.get( 'name' ), project.get( 'slug' ) ] );
-                                project.set( 'isVisible', match.test( haystack ) );
-                        });
+                                return match.test( haystack );
+                        });
+
+                        this.reset( results );
                 },
 
@@ -172 +181 @@
                         });
 
+                        $( '#project-loading' ).remove();
+
                         this.views.ready();
 
@@ -263 +274 @@
                                 collection: collection
                         }) );
-                }
+                },
+
         });
 
@@ -270 +282 @@
                 className: 'sub-projects-list',
 
-                initialize: function() {
-                        var view = this;
-                        this.collection.each( function( project ) {
-                                view.views.add( new projects.view.SubProject({
-                                        model: project
-                                }) );
+                // Number of projects which should be rendered.
+                limit: 100,
+
+                initialize: function( options ) {
+                        var self = this;
+
+                        this.listenTo( self.collection, 'projects:update', function() {
+                                self.render( this );
+                        } );
+                },
+
+                render: function() {
+                        var self = this, subProjects;
+
+                        self.$el.empty();
+
+                        subProjects = self.collection.first( self.limit );
+                        _.each( subProjects, function( model ) {
+                                var subProjectView = new projects.view.SubProject({
+                                        model: model
+                                });
+
+                                subProjectView.render();
+                                self.$el.append( subProjectView.el );
                         });
                 }
@@ -287 +317 @@
                                 model: this.model
                         }) );
-
-                        this.listenTo( this.model, 'change:isVisible', this.changeVisibility );
-                },
-
-                changeVisibility: function() {
-                        if ( this.model.get( 'isVisible' ) ) {
-                                this.$el.removeClass( 'hidden' );
-                        } else {
-                                this.$el.addClass( 'hidden' );
-                        }
                 }
         });
@@ -333 +353 @@
                 doSearch: _.debounce( function( event ) {
                         this.collection.doSearch( event.target.value );
-                }, 200 )
-        });
+                }, 500 )
+        });
+
+        /**
+         * UTILS
+         */
+
+        projects._hasStorage = null;
+
+        // Check if the browser supports localStorage.
+        projects.hasStorage = function() {
+                if ( null !== projects._hasStorage ) {
+                        return projects._hasStorage;
+                }
+
+                var result = false;
+
+                try {
+                        window.localStorage.setItem( 'test', 'rosetta' );
+                        result = window.localStorage.getItem( 'test' ) === 'rosetta';
+                        window.localStorage.removeItem( 'test' );
+                } catch( e ) {}
+
+                projects._hasStorage = result;
+
+                return projects._hasStorage;
+        };
+
+        projects.getRemoteProjects = function() {
+                return wp.ajax.post( 'rosetta-get-projects' );
+        };
+
+        projects.getLocalProjects = function() {
+                var lastUpdated = window.localStorage.getItem( 'projectsLastUpdated' );
+                if ( ! lastUpdated ) {
+                        return false;
+                }
+
+                if ( lastUpdated < projects.settings.lastUpdated ) {
+                        return false;
+                }
+
+                var json = window.localStorage.getItem( 'projects' );
+                if ( ! json ) {
+                        return false;
+                }
+
+                return JSON.parse( json );
+        };
+
+        projects.storeLocalProjects = function( data ) {
+                window.localStorage.setItem( 'projectsLastUpdated', projects.settings.lastUpdated );
+                window.localStorage.setItem( 'projects', JSON.stringify( data ) );
+        };
+
+        projects.initFrame = function( projectData ) {
+                projects.view.frame = new projects.view.Frame({
+                        collection: new projects.model.Projects( projectData )
+                }).render();
+        };
 
         projects.init = function() {
-                projects.view.frame = new projects.view.Frame({
-                        collection: new projects.model.Projects( projects.settings.data )
-                }).render();
+                var data = null;
+
+                if ( projects.hasStorage() ) {
+                        data = projects.getLocalProjects();
+                }
+
+                if ( data && data.length ) {
+                        projects.initFrame( data );
+                        return;
+                }
+
+                projects.getRemoteProjects().done( function( response ) {
+                        projects.initFrame( response );
+                        if ( projects.hasStorage() ) {
+                                projects.storeLocalProjects( response );
+                        }
+                });
         };
 

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles/rosetta-roles.php

@@ -77 +77 @@
                 add_action( 'translation_editor_added', array( $this, 'update_wporg_profile_badge' ) );
                 add_action( 'translation_editor_removed', array( $this, 'update_wporg_profile_badge' ) );
+
+                add_action( 'wp_ajax_rosetta-get-projects', array( $this, 'ajax_rosetta_get_projects' ) );
         }
 
@@ -619 +621 @@
          */
         private function render_edit_translation_editor( $user_id ) {
+                global $wpdb;
+
+                $project_access_list = $this->get_users_projects( $user_id );
+
+                $last_updated = $wpdb->get_var( 'SELECT meta_value FROM translate_meta WHERE object_type = "gp_option" AND meta_key = "wporg_projects_last_updated"' );
+
+                wp_localize_script( 'rosetta-roles', '_rosettaProjectsSettings', array(
+                        'l10n' => array(
+                                'searchPlaceholder' => esc_attr__( 'Search...', 'rosetta' ),
+                        ),
+                        'lastUpdated' => $last_updated,
+                        'accessList' => $project_access_list,
+                ) );
+
+                $feedback_message = $this->get_feedback_message();
+
+                require __DIR__ . '/views/edit-translation-editor.php';
+        }
+
+        /**
+         * Ajax handler for retrieving projects.
+         */
+        public function ajax_rosetta_get_projects() {
                 $projects = $this->get_translate_projects();
                 $project_tree = $this->get_project_tree( $projects, 0, 1 );
@@ -632 +657 @@
                 $project_tree = array_values( $project_tree );
 
-                $project_access_list = $this->get_users_projects( $user_id );
-
-                wp_localize_script( 'rosetta-roles', '_rosettaProjectsSettings', array(
-                        'l10n' => array(
-                                'searchPlaceholder' => esc_attr__( 'Search...', 'rosetta' ),
-                        ),
-                        'data' => $project_tree,
-                        'accessList' => $project_access_list,
-                ) );
-
-                $feedback_message = $this->get_feedback_message();
-
-                require __DIR__ . '/views/edit-translation-editor.php';
+                ob_start( 'ob_gzhandler' ); // Compress JSON.
+                wp_send_json_success( $project_tree );
         }