WordPress.org
Get WordPress

Make WordPress Core

Changeset 24667


Ignore:
Timestamp:
07/12/2013 05:11:56 AM (13 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:
5 edited

Legend:

Unmodified
Added
Removed

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

    r24660 r24667  
    35393539}
    35403540
     3541.revisions .loading-indicator {
     3542        position: absolute;
     3543        text-align: center;
     3544        vertical-align: middle;
     3545        opacity: 0;
     3546        margin: 0 auto;
     3547        width: 100%;
     3548        height: 32px;
     3549        top: 3em;
     3550        background: #fff url(../images/wpspin_light-2x.gif) no-repeat center top;
     3551        -webkit-transition: opacity 0.5s;
     3552        -moz-transition:    opacity 0.5s;
     3553        -ms-transition:     opacity 0.5s;
     3554        -o-transition:      opacity 0.5s;
     3555        transition:         opacity 0.5s;
     3556}
     3557
     3558.revisions.loading .loading-indicator {
     3559        opacity: 1;
     3560}
     3561
     3562.revisions .diff {
     3563        -webkit-transition: opacity 0.5s;
     3564        -moz-transition:    opacity 0.5s;
     3565        -ms-transition:     opacity 0.5s;
     3566        -o-transition:      opacity 0.5s;
     3567        transition:         opacity 0.5s;
     3568}
     3569
     3570.revisions.loading .diff {
     3571        opacity: 0.5;
     3572}
     3573
    35413574.revisions-meta {
    35423575        margin-top: 15px;

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

    r24651 r24667  
    20932093        require ABSPATH . 'wp-admin/includes/revision.php';
    20942094
    2095         // check_ajax_referer( 'revisions-ajax-nonce', 'nonce' );
    2096 
    20972095        if ( ! $post = get_post( (int) $_REQUEST['post_id'] ) )
    20982096                wp_send_json_error();

  • trunk/wp-admin/includes/revision.php

    r24664 r24667  
    6767        $now_gmt = time();
    6868
    69         $revisions = wp_get_post_revisions( $post->ID );
     69        $revisions = wp_get_post_revisions( $post->ID, array( 'order' => 'ASC', 'orderby' => 'modified' ) );
    7070
    7171        cache_users( wp_list_pluck( $revisions, 'post_author' ) );
    7272
    7373        foreach ( $revisions as $revision ) {
     74                $modified = strtotime( $revision->post_modified );
    7475                $modified_gmt = strtotime( $revision->post_modified_gmt );
    7576                $restore_link = wp_nonce_url(
    … …  
    8990                                'name'   => get_the_author_meta( 'display_name', $revision->post_author ),
    9091                        ),
    91                         'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified_gmt ),
    92                         'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified_gmt ),
    93                         'dateUnix'     => $modified_gmt,
     92                        'date'         => date_i18n( __( 'M j, Y @ G:i' ), $modified ),
     93                        'dateShort'    => date_i18n( _x( 'j M @ G:i', 'revision date short format' ), $modified ),
    9494                        'timeAgo'      => sprintf( __( '%s ago' ), human_time_diff( $modified_gmt, $now_gmt ) ),
    9595                        'autosave'     => wp_is_post_autosave( $revision ),
    … …  
    100100
    101101        // Now, grab the initial diff
    102         if ( ! $from ) { // Single mode
    103                 $initial_revisions = array_reverse( array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ), 2, true ) ) );
    104                 $compare_two_mode = false;
    105         } else { // Compare two
    106                 $compare_two_mode = true;
    107                 $initial_revisions = array( $from, $selected_revision_id );
    108         }
     102        $compare_two_mode = (bool) $from;
     103        if ( ! $from ) // Single mode
     104                $from = array_keys( array_slice( $revisions, array_search( $selected_revision_id, array_keys( $revisions ) ) - 1, 1, true ) )[0];
     105
    109106        $diffs = array( array(
    110                 'id' => $initial_revisions[0] . ':' . $initial_revisions[1],
    111                 'fields' => wp_get_revision_ui_diff( $post->ID, $initial_revisions[0], $initial_revisions[1] ),
     107                'id' => $from . ':' . $selected_revision_id,
     108                'fields' => wp_get_revision_ui_diff( $post->ID, $from, $selected_revision_id ),
    112109        ));
    113110
    … …  
    121118                'baseUrl'          => parse_url( admin_url( 'revision.php' ), PHP_URL_PATH ),
    122119                'compareTwoMode'   => absint( $compare_two_mode ), // Apparently booleans are not allowed
     120                'revisionIds'      => array_keys( $revisions ),
    123121        );
    124122}

  • trunk/wp-admin/js/revisions.js

    r24666 r24667  
    128128                initialize: function() {
    129129                        _.bindAll( this, 'next', 'prev' );
    130                 },
    131 
    132                 comparator: function( a, b ) {
    133                         var a_ = a.get('dateUnix');
    134                         var b_ = b.get('dateUnix');
    135                         var cmp = (a_ > b_) - (a_ < b_);
    136                         if (cmp === 0 && a.id != b.id)
    137                                 cmp = a.id < b.id ? -1 : 1;
    138                         return cmp;
    139130                },
    140131
    … …  
    336327                        this.diffs.set( revisions.settings.diffData );
    337328
    338                         // Set the initial revisions, baseUrl, and mode as provided through settings
    339                         properties.to = this.revisions.get( revisions.settings.to );
    340                         properties.from = this.revisions.get( revisions.settings.from ) || this.revisions.prev( properties.to );
    341                         properties.compareTwoMode = revisions.settings.compareTwoMode;
    342                         properties.baseUrl = revisions.settings.baseUrl;
    343                         this.set( properties );
    344 
    345                         // Start the router. This will trigger a navigate event and ensure that
    346                         // the `from` and `to` revisions accurately reflect the hash.
    347                         this.router = new revisions.Router({ model: this });
    348                         Backbone.history.start({ pushState: true });
    349 
    350329                        // Set up internal listeners
    351330                        this.listenTo( this, 'change:from', this.changeRevisionHandler );
    … …  
    353332                        this.listenTo( this, 'update:revisions', this.loadSurrounding );
    354333                        this.listenTo( this, 'change:compareTwoMode', this.changedMode );
     334                        this.listenTo( this.diffs, 'ensure:load', this.updateLoadingStatus );
     335                        this.listenTo( this, 'update:diff', this.updateLoadingStatus );
     336
     337                        // Set the initial revisions, baseUrl, and mode as provided through settings
     338                        properties.to = this.revisions.get( revisions.settings.to );
     339                        properties.from = this.revisions.get( revisions.settings.from );
     340                        properties.compareTwoMode = revisions.settings.compareTwoMode;
     341                        properties.baseUrl = revisions.settings.baseUrl;
     342                        this.set( properties, { silent: true } );
     343
     344                        // Start the router
     345                        this.router = new revisions.Router({ model: this });
     346                        Backbone.history.start({ pushState: true });
    355347                },
    356348
    … …  
    358350                        // This isn't passed from/to so we grab them from the model
    359351                        this.loadSurrounding( this.get( 'from' ), this.get( 'to' ) );
     352                },
     353
     354                updateLoadingStatus: function() {
     355                        this.set( 'loading', ! this.diff() );
    360356                },
    361357
    … …  
    442438
    443439                initialize: function() {
    444                         // Generate the frame model.
    445                         this.model = new revisions.model.FrameState({}, {
    446                                 revisions: this.collection
    447                         });
    448 
    449440                        this.listenTo( this.model, 'update:diff', this.renderDiff );
    450441                        this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
     442                        this.listenTo( this.model, 'change:loading', this.updateLoadingStatus );
    451443
    452444                        this.views.set( '.revisions-control-frame', new revisions.view.Controls({
    … …  
    456448
    457449                render: function() {
     450                        console.log( 'diff', this.model.diff() );
    458451                        this.model.updateDiff({ immediate: true }).done( _.bind( function() {
    459452                                wp.Backbone.View.prototype.render.apply( this, arguments );
    … …  
    471464                                model: diff
    472465                        }) );
     466                },
     467
     468                updateLoadingStatus: function() {
     469                        this.$el.toggleClass( 'loading', this.model.get('loading') );
    473470                },
    474471
    … …  
    10141011        revisions.init = function() {
    10151012                revisions.view.frame = new revisions.view.Frame({
    1016                         collection: new revisions.model.Revisions( revisions.settings.revisionData )
     1013                        model: new revisions.model.FrameState({}, {
     1014                                revisions: new revisions.model.Revisions( revisions.settings.revisionData )
     1015                        })
    10171016                }).render();
    10181017        };

  • trunk/wp-admin/revision.php

    r24664 r24667  
    186186
    187187<script id="tmpl-revisions-diff" type="text/html">
     188        <div class="loading-indicator"></div>
     189        <div class="diff">
    188190        <# _.each( data.fields, function( field ) { #>
    189191                <h3>{{{ field.name }}}</h3>
    190192                {{{ field.diff }}}
    191193        <# }); #>
     194        </div>
    192195</script>
    193196
Note: See TracChangeset for help on using the changeset viewer.