WordPress.org

Make WordPress Core

Ticket #24388: 24388.4.diff

File 24388.4.diff, 7.3 KB (added by adamsilverstein, 5 years ago)
  • wp-admin/js/revisions.js

     
    3838                rightModelLoading: false,       // disallow slider interaction, also repeat loads, while loading
    3939                tickmarkView: null, // the slider tickmarks
    4040                slider: null, // the slider instance
     41                maxConcurrentRequests: 3,
     42                currentRequests: 1,
    4143
    4244                constructor: function() {
    4345                        var self    = this;
     
    5658                        }
    5759                },
    5860
    59                 loadDiffs: function( models ) {
     61                /*
     62                 * Time to load all the models, each model represents a comparison
     63                 */
     64                loadDiffs: function( models, otherModels ) {
     65                        // in two handle mode, pass the other handle's models and copy over scopeOfChanges (tick width)
     66                        // from that model for positions this handle can't reach (but the other handle can reach)
     67                        // (only do this once)
     68                        if ( 'undefined' !== typeof otherModels ) { // otherModels only passed in two handle mode
     69                                _.each( models.where( { loadedStatus: 'true' } ), // select just the models that are marked as not needing loading, eg. positions this handle can't reach
     70                                        function( theModel ) {
     71                                                foundModel = otherModels.findWhere( { ID: theModel.id } ); //find the matching position from the other handle's models
     72                                                if ( 'undefined' !== typeof foundModel ) {
     73                                                        theModel.set( 'scopeOfChanges', // set the displayed scope of changes for ticks this handle can't get to
     74                                                                foundModel
     75                                                                .get( 'scopeOfChanges' ) ); // copy the scope of changes from the other handle which can reach this spot
     76                                                }
     77                                        }
     78                                );
     79                        }
     80                        this.loadDiffsRecursive( models, otherModels ); // recursively load models that need loading
     81                },
     82
     83                /*
     84                 * load models that aren't loaded yet
     85                 */
     86                loadDiffsRecursive: function( models, otherModels ) {
    6087                        var self = this,
    61                                 revisionsToLoad = models.where( { completed: false } ),
    62                                 delay = 0,
    63                                 totalChanges;
    64 
    65                         // match slider to passed revision_id
    66                         _.each( revisionsToLoad, function( revision ) {
    67                                 if ( revision.get( 'ID' ) == revisions.model.settings.revision_id )
     88                                revision = models.findWhere( { loadedStatus: 'false' } ), // find the first model needing loading
     89                                totalChanges,
     90                                foundModel;
     91                        if ( 'undefined' === typeof revision ) { // nothing to load this time
     92                                self.tickmarkView.render();
     93                        } else {
     94                                if ( revision.get( 'ID' ) == revisions.model.settings.revision_id ) { // match slider to passed revision_id
    6895                                        self.rightDiff = self.revisions.indexOf( revision ) + 1;
    69                         });
     96                                        self.revisionsInteractions.render();
     97                                        self.tickmarkView.render();
     98                                }
     99                                revision.set( 'loadedStatus', 'loading' );
     100                                revision.fetch( {
     101                                        update: true,
     102                                        add: false,
     103                                        remove: false,
     104                                        success: function( model ) {
    70105
    71                         _.each( revisionsToLoad, function( revision ) {
    72                                         _.delay( function() {
    73                                                 revision.fetch( {
    74                                                         update: true,
    75                                                         add: false,
    76                                                         remove: false,
    77                                                         success: function( model ) {
    78                                                                 model.set( 'completed', true );
     106                                                // stop spinner when all models are loaded
     107                                                if ( 0 === models.where( { loadedStatus: 'false' } ).length )
     108                                                        self.stopModelLoadingSpinner();
    79109
    80                                                                 // stop spinner when all models are loaded
    81                                                                 if ( 0 === models.where( { completed: false } ).length )
    82                                                                         self.stopModelLoadingSpinner();
     110                                                totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
     111                                                        scopeOfChanges = 'vsmall';
    83112
    84                                                                 totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
    85                                                                         scopeOfChanges = 'vsmall';
     113                                                // Note: hard coded scope of changes
     114                                                // TODO change to dynamic based on range of values
     115                                                if ( totalChanges > 1 && totalChanges <= 3 ) {
     116                                                        scopeOfChanges = 'small';
     117                                                } else if ( totalChanges > 3 && totalChanges <= 5 ) {
     118                                                        scopeOfChanges = 'med';
     119                                                } else if ( totalChanges > 5 && totalChanges <= 10 ) {
     120                                                        scopeOfChanges = 'large';
     121                                                } else if ( totalChanges > 10 ) {
     122                                                        scopeOfChanges = 'vlarge';
     123                                                }
     124                                                model.set( 'scopeOfChanges', scopeOfChanges );
     125                                                if ( 0 !== self.rightDiff &&
     126                                                        model.get( 'ID' ) === self.revisions.at( self.rightDiff - 1 ).get( 'ID' ) ) {
    86127
    87                                                                 // Note: hard coded scope of changes
    88                                                                 // TODO change to dynamic based on range of values
    89                                                                 if ( totalChanges > 1 && totalChanges <= 3 ) {
    90                                                                         scopeOfChanges = 'small';
    91                                                                 } else if ( totalChanges > 3 && totalChanges <= 5 ) {
    92                                                                         scopeOfChanges = 'med';
    93                                                                 } else if ( totalChanges > 5 && totalChanges <= 10 ) {
    94                                                                         scopeOfChanges = 'large';
    95                                                                 } else if ( totalChanges > 10 ) {
    96                                                                         scopeOfChanges = 'vlarge';
    97                                                                 }
    98                                                                 model.set( 'scopeOfChanges', scopeOfChanges );
    99                                                                 if ( 0 !== self.rightDiff &&
    100                                                                         model.get( 'ID' ) === self.revisions.at( self.rightDiff - 1 ).get( 'ID' ) ) {
    101                                                                         // reload if current model refreshed
    102                                                                         self.revisionView.render();
    103                                                                 }
    104                                                                 self.tickmarkView.render();
    105                                                         }
    106                                         } );
    107                                         }, delay ) ;
    108                                         delay = delay + 150; // stagger model loads to avoid hammering server with requests
     128                                                                // reload if current model refreshed
     129                                                        self.revisionView.render();
     130                                                }
     131                                                model.set( 'loadedStatus', 'true' );
     132                                                self.loadDiffsRecursive( models, otherModels );
     133                                        }
    109134                                }
    110135                        );
     136                }
     137                        if ( self.currentRequests++ < self.maxConcurrentRequests ) { // limit concurrent requests
     138                                self.loadDiffsRecursive( models, otherModels ); // load another model without waiting
     139                        }
    111140                },
    112141
    113142                startLeftModelLoading: function() {
     
    218247                                        self.stopRightModelLoading();
    219248                                        self.loadDiffs( self.rightHandleRevisions );
    220249                                        self.tickmarkView.model = self.rightHandleRevisions;
     250                                        self.tickmarkView.render();
    221251                                        self.slider.refresh({
    222252                                                'max': self.revisions.length
    223253                                        }, true);
     
    472502                                        $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins
    473503                                });
    474504                                firstTick = $( '.revision-tick' ).first(); //cache selectors for optimization
    475                                 lastTick = $( '.revision-tick' ).last();
     505                                lastTick  = $( '.revision-tick' ).last();
    476506
    477507                                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick
    478508                                sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( firstTick.outerWidth() - firstTick.innerWidth() ) ) / 2 ); // room for the first tick
     
    750780                        titleFrom: '',
    751781                        diff: '<div class="diff-loading"><div class="spinner"></div></div>',
    752782                        restoreLink: '',
    753                         completed: false,
     783                        loadedStatus: 'false',
    754784                        linesAdded: 0,
    755785                        linesDeleted: 0,
    756786                        scopeOfChanges: 'none',
  • wp-admin/revision.php

     
    175175</script>
    176176
    177177<script id="tmpl-revision-ticks" type="text/html">
    178         <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}">
     178        <div class="revision-tick completed-{{{ data.loadedStatus }}} scope-of-changes-{{{ data.scopeOfChanges }}}">
    179179                <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span>
    180180        </div>
    181181</script>