Changeset 2544

Timestamp:

02/22/2016 08:50:25 PM (9 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 );
     }