Changeset 24667

Timestamp:

07/12/2013 05:11:56 AM (11 years ago)

Author:

markjaquith

Message:

Revisions: Loading indicator, cleanup, bug fixes.

• Loading indicator when the user is waiting for a trip to the server.
• Bug fixes for diff priming.
• Fix the date display.
• Forget about local comparator, instead order by modified on the server.
• Initialize the frame model before the view (this was the source of a LOT of heartache).

Location:

trunk/wp-admin

Files:

• css/wp-admin.css (modified) (1 diff)
• includes/ajax-actions.php (modified) (1 diff)
• includes/revision.php (modified) (4 diffs)
• js/revisions.js (modified) (8 diffs)
• revision.php (modified) (1 diff)

trunk/wp-admin/css/wp-admin.css

@@ -3539 +3539 @@
 }
 
+.revisions .loading-indicator {
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    opacity: 0;
+    margin: 0 auto;
+    width: 100%;
+    height: 32px;
+    top: 3em;
+    background: #fff url(../images/wpspin_light-2x.gif) no-repeat center top;
+    -webkit-transition: opacity 0.5s;
+    -moz-transition:    opacity 0.5s;
+    -ms-transition:     opacity 0.5s;
+    -o-transition:      opacity 0.5s;
+    transition:         opacity 0.5s;
+}
+
+.revisions.loading .loading-indicator {
+    opacity: 1;
+}
+
+.revisions .diff {
+    -webkit-transition: opacity 0.5s;
+    -moz-transition:    opacity 0.5s;
+    -ms-transition:     opacity 0.5s;
+    -o-transition:      opacity 0.5s;
+    transition:         opacity 0.5s;
+}
+
+.revisions.loading .diff {
+    opacity: 0.5;
+}
+
 .revisions-meta {
     margin-top: 15px;

trunk/wp-admin/includes/ajax-actions.php

@@ -2093 +2093 @@
     require ABSPATH . 'wp-admin/includes/revision.php';
 
-    // check_ajax_referer( 'revisions-ajax-nonce', 'nonce' );
-
     if ( ! $post = get_post( (int) $_REQUEST['post_id'] ) )
         wp_send_json_error();

trunk/wp-admin/includes/revision.php

@@ -67 +67 @@
     $now_gmt = time();
 
-    $revisions = wp_get_post_revisions( $post->ID );
+    $revisions = wp_get_post_revisions( $post->ID, array( 'order' => 'ASC', 'orderby' => 'modified' ) );
 
     cache_users( wp_list_pluck( $revisions, 'post_author' ) );
 
     foreach ( $revisions as $revision ) {
+        $modified = strtotime( $revision->post_modified );
         $modified_gmt = strtotime( $revision->post_modified_gmt );
         $restore_link = wp_nonce_url(
@@ -89 +90 @@
                 'name'   => get_the_author_meta( 'display_name', $revision->post_author ),
             ),
-            'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified_gmt ),
-            'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified_gmt ),
-            'dateUnix'     => $modified_gmt,
+            'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified ),
+            'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified ),
             'timeAgo'      => sprintf( __( '%s ago' ), human_time_diff( $modified_gmt, $now_gmt ) ),
             'autosave'     => wp_is_post_autosave( $revision ),
@@ -100 +100 @@
 
     // Now, grab the initial diff
-    if ( ! $from ) { // Single mode
-        $initial_revisions = array_reverse( array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ), 2, true ) ) );
-        $compare_two_mode = false;
-    } else { // Compare two
-        $compare_two_mode = true;
-        $initial_revisions = array( $from, $selected_revision_id );
-    }
+    $compare_two_mode = (bool) $from;
+    if ( ! $from ) // Single mode
+        $from = array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ) - 1, 1, true ) )[0];
+
     $diffs = array( array(
-        'id' => $initial_revisions[0] . ':' . $initial_revisions[1],
-        'fields' => wp_get_revision_ui_diff( $post->ID, $initial_revisions[0], $initial_revisions[1] ),
+        'id' => $from . ':' . $selected_revision_id,
+        'fields' => wp_get_revision_ui_diff( $post->ID, $from, $selected_revision_id ),
     ));
 
@@ -121 +118 @@
         'baseUrl'          => parse_url( admin_url( 'revision.php' ), PHP_URL_PATH ),
         'compareTwoMode'   => absint( $compare_two_mode ), // Apparently booleans are not allowed
+        'revisionIds'      => array_keys( $revisions ),
     );
 }

trunk/wp-admin/js/revisions.js

@@ -128 +128 @@
         initialize: function() {
             _.bindAll( this, 'next', 'prev' );
-        },
-
-        comparator: function( a, b ) {
-            var a_ = a.get('dateUnix');
-            var b_ = b.get('dateUnix');
-            var cmp = (a_ > b_) - (a_ < b_);
-            if (cmp === 0 && a.id != b.id)
-                cmp = a.id < b.id ? -1 : 1;
-            return cmp;
         },
 
@@ -336 +327 @@
             this.diffs.set( revisions.settings.diffData );
 
-            // Set the initial revisions, baseUrl, and mode as provided through settings
-            properties.to = this.revisions.get( revisions.settings.to );
-            properties.from = this.revisions.get( revisions.settings.from ) || this.revisions.prev( properties.to );
-            properties.compareTwoMode = revisions.settings.compareTwoMode;
-            properties.baseUrl = revisions.settings.baseUrl;
-            this.set( properties );
-
-            // Start the router. This will trigger a navigate event and ensure that
-            // the `from` and `to` revisions accurately reflect the hash.
-            this.router = new revisions.Router({ model: this });
-            Backbone.history.start({ pushState: true });
-
             // Set up internal listeners
             this.listenTo( this, 'change:from', this.changeRevisionHandler );
@@ -353 +332 @@
             this.listenTo( this, 'update:revisions', this.loadSurrounding );
             this.listenTo( this, 'change:compareTwoMode', this.changedMode );
+            this.listenTo( this.diffs, 'ensure:load', this.updateLoadingStatus );
+            this.listenTo( this, 'update:diff', this.updateLoadingStatus );
+
+            // Set the initial revisions, baseUrl, and mode as provided through settings
+            properties.to = this.revisions.get( revisions.settings.to );
+            properties.from = this.revisions.get( revisions.settings.from );
+            properties.compareTwoMode = revisions.settings.compareTwoMode;
+            properties.baseUrl = revisions.settings.baseUrl;
+            this.set( properties, { silent: true } );
+
+            // Start the router
+            this.router = new revisions.Router({ model: this });
+            Backbone.history.start({ pushState: true });
         },
 
@@ -358 +350 @@
             // This isn't passed from/to so we grab them from the model
             this.loadSurrounding( this.get( 'from' ), this.get( 'to' ) );
+        },
+
+        updateLoadingStatus: function() {
+            this.set( 'loading', ! this.diff() );
         },
 
@@ -442 +438 @@
 
         initialize: function() {
-            // Generate the frame model.
-            this.model = new revisions.model.FrameState({}, {
-                revisions: this.collection
-            });
-
             this.listenTo( this.model, 'update:diff', this.renderDiff );
             this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
+            this.listenTo( this.model, 'change:loading', this.updateLoadingStatus );
 
             this.views.set( '.revisions-control-frame', new revisions.view.Controls({
@@ -456 +448 @@
 
         render: function() {
+            console.log( 'diff', this.model.diff() );
             this.model.updateDiff({ immediate: true }).done( _.bind( function() {
                 wp.Backbone.View.prototype.render.apply( this, arguments );
@@ -471 +464 @@
                 model: diff
             }) );
+        },
+
+        updateLoadingStatus: function() {
+            this.$el.toggleClass( 'loading', this.model.get('loading') );
         },
 
@@ -1014 +1011 @@
     revisions.init = function() {
         revisions.view.frame = new revisions.view.Frame({
-            collection: new revisions.model.Revisions( revisions.settings.revisionData )
+            model: new revisions.model.FrameState({}, {
+                revisions: new revisions.model.Revisions( revisions.settings.revisionData )
+            })
         }).render();
     };

trunk/wp-admin/revision.php

@@ -186 +186 @@
 
 <script id="tmpl-revisions-diff" type="text/html">
+    <div class="loading-indicator"></div>
+    <div class="diff">
     <# _.each( data.fields, function( field ) { #>
         <h3>{{{ field.name }}}</h3>
         {{{ field.diff }}}
     <# }); #>
+    </div>
 </script>