Make WordPress Core

Changeset 24667


Ignore:
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:
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.