wp-admin/js/revisions.js

   1 /* global _wpRevisionsSettings, isRtl */
   2 window.wp = window.wp || {};
   3
   4 (function($) {
   5         var revisions;
   6
   7         revisions = wp.revisions = { model: {}, view: {}, controller: {} };
   8
   9         // Link settings.
  10         revisions.settings = _.isUndefined( _wpRevisionsSettings ) ? {} : _wpRevisionsSettings;
  11
  12         // For debugging
  13         revisions.debug = false;
  14
  15         revisions.log = function() {
  16                 if ( window.console && revisions.debug ) {
  17                         window.console.log.apply( window.console, arguments );
  18                 }
  19         };
  20
  21         // Handy functions to help with positioning
  22         $.fn.allOffsets = function() {
  23                 var offset = this.offset() || {top: 0, left: 0}, win = $(window);
  24                 return _.extend( offset, {
  25                         right:  win.width()  - offset.left - this.outerWidth(),
  26                         bottom: win.height() - offset.top  - this.outerHeight()
  27                 });
  28         };
  29
  30         $.fn.allPositions = function() {
  31                 var position = this.position() || {top: 0, left: 0}, parent = this.parent();
  32                 return _.extend( position, {
  33                         right:  parent.outerWidth()  - position.left - this.outerWidth(),
  34                         bottom: parent.outerHeight() - position.top  - this.outerHeight()
  35                 });
  36         };
  37
  38         // wp_localize_script transforms top-level numbers into strings. Undo that.
  39         if ( revisions.settings.to ) {
  40                 revisions.settings.to = parseInt( revisions.settings.to, 10 );
  41         }
  42         if ( revisions.settings.from ) {
  43                 revisions.settings.from = parseInt( revisions.settings.from, 10 );
  44         }
  45
  46         // wp_localize_script does not allow for top-level booleans. Fix that.
  47         if ( revisions.settings.compareTwoMode ) {
  48                 revisions.settings.compareTwoMode = revisions.settings.compareTwoMode === '1';
  49         }
  50
  51         /**
  52          * ========================================================================
  53          * MODELS
  54          * ========================================================================
  55          */
  56         revisions.model.Slider = Backbone.Model.extend({
  57                 defaults: {
  58                         value: null,
  59                         values: null,
  60                         min: 0,
  61                         max: 1,
  62                         step: 1,
  63                         range: false,
  64                         compareTwoMode: false
  65                 },
  66
  67                 initialize: function( options ) {
  68                         this.frame = options.frame;
  69                         this.revisions = options.revisions;
  70
  71                         // Listen for changes to the revisions or mode from outside
  72                         this.listenTo( this.frame, 'update:revisions', this.receiveRevisions );
  73                         this.listenTo( this.frame, 'change:compareTwoMode', this.updateMode );
  74
  75                         // Listen for internal changes
  76                         this.listenTo( this, 'change:from', this.handleLocalChanges );
  77                         this.listenTo( this, 'change:to', this.handleLocalChanges );
  78                         this.listenTo( this, 'change:compareTwoMode', this.updateSliderSettings );
  79                         this.listenTo( this, 'update:revisions', this.updateSliderSettings );
  80
  81                         // Listen for changes to the hovered revision
  82                         this.listenTo( this, 'change:hoveredRevision', this.hoverRevision );
  83
  84                         this.set({
  85                                 max:   this.revisions.length - 1,
  86                                 compareTwoMode: this.frame.get('compareTwoMode'),
  87                                 from: this.frame.get('from'),
  88                                 to: this.frame.get('to')
  89                         });
  90                         this.updateSliderSettings();
  91                 },
  92
  93                 getSliderValue: function( a, b ) {
  94                         return isRtl ? this.revisions.length - this.revisions.indexOf( this.get(a) ) - 1 : this.revisions.indexOf( this.get(b) );
  95                 },
  96
  97                 updateSliderSettings: function() {
  98                         if ( this.get('compareTwoMode') ) {
  99                                 this.set({
 100                                         values: [
 101                                                 this.getSliderValue( 'to', 'from' ),
 102                                                 this.getSliderValue( 'from', 'to' )
 103                                         ],
 104                                         value: null,
 105                                         range: true // ensures handles cannot cross
 106                                 });
 107                         } else {
 108                                 this.set({
 109                                         value: this.getSliderValue( 'to', 'to' ),
 110                                         values: null,
 111                                         range: false
 112                                 });
 113                         }
 114                         this.trigger( 'update:slider' );
 115                 },
 116
 117                 // Called when a revision is hovered
 118                 hoverRevision: function( model, value ) {
 119                         this.trigger( 'hovered:revision', value );
 120                 },
 121
 122                 // Called when `compareTwoMode` changes
 123                 updateMode: function( model, value ) {
 124                         this.set({ compareTwoMode: value });
 125                 },
 126
 127                 // Called when `from` or `to` changes in the local model
 128                 handleLocalChanges: function() {
 129                         this.frame.set({
 130                                 from: this.get('from'),
 131                                 to: this.get('to')
 132                         });
 133                 },
 134
 135                 // Receives revisions changes from outside the model
 136                 receiveRevisions: function( from, to ) {
 137                         // Bail if nothing changed
 138                         if ( this.get('from') === from && this.get('to') === to ) {
 139                                 return;
 140                         }
 141
 142                         this.set({ from: from, to: to }, { silent: true });
 143                         this.trigger( 'update:revisions', from, to );
 144                 }
 145
 146         });
 147
 148         revisions.model.Tooltip = Backbone.Model.extend({
 149                 defaults: {
 150                         revision: null,
 151                         offset: {},
 152                         hovering: false, // Whether the mouse is hovering
 153                         scrubbing: false // Whether the mouse is scrubbing
 154                 },
 155
 156                 initialize: function( options ) {
 157                         this.frame = options.frame;
 158                         this.revisions = options.revisions;
 159                         this.slider = options.slider;
 160
 161                         this.listenTo( this.slider, 'hovered:revision', this.updateRevision );
 162                         this.listenTo( this.slider, 'change:hovering', this.setHovering );
 163                         this.listenTo( this.slider, 'change:scrubbing', this.setScrubbing );
 164                 },
 165
 166
 167                 updateRevision: function( revision ) {
 168                         this.set({ revision: revision });
 169                 },
 170
 171                 setHovering: function( model, value ) {
 172                         this.set({ hovering: value });
 173                 },
 174
 175                 setScrubbing: function( model, value ) {
 176                         this.set({ scrubbing: value });
 177                 }
 178         });
 179
 180         revisions.model.Revision = Backbone.Model.extend({});
 181
 182         revisions.model.Revisions = Backbone.Collection.extend({
 183                 model: revisions.model.Revision,
 184
 185                 initialize: function() {
 186                         _.bindAll( this, 'next', 'prev' );
 187                 },
 188
 189                 next: function( revision ) {
 190                         var index = this.indexOf( revision );
 191
 192                         if ( index !== -1 && index !== this.length - 1 ) {
 193                                 return this.at( index + 1 );
 194                         }
 195                 },
 196
 197                 prev: function( revision ) {
 198                         var index = this.indexOf( revision );
 199
 200                         if ( index !== -1 && index !== 0 ) {
 201                                 return this.at( index - 1 );
 202                         }
 203                 }
 204         });
 205
 206         revisions.model.Field = Backbone.Model.extend({});
 207
 208         revisions.model.Fields = Backbone.Collection.extend({
 209                 model: revisions.model.Field
 210         });
 211
 212         revisions.model.Diff = Backbone.Model.extend({
 213                 initialize: function() {
 214                         var fields = this.get('fields');
 215                         this.unset('fields');
 216
 217                         this.fields = new revisions.model.Fields( fields );
 218                 }
 219         });
 220
 221         revisions.model.Diffs = Backbone.Collection.extend({
 222                 initialize: function( models, options ) {
 223                         _.bindAll( this, 'getClosestUnloaded' );
 224                         this.loadAll = _.once( this._loadAll );
 225                         this.revisions = options.revisions;
 226                         this.requests  = {};
 227                 },
 228
 229                 model: revisions.model.Diff,
 230
 231                 ensure: function( id, context ) {
 232                         var diff     = this.get( id ),
 233                                 request  = this.requests[ id ],
 234                                 deferred = $.Deferred(),
 235                                 ids      = {},
 236                                 from     = id.split(':')[0],
 237                                 to       = id.split(':')[1];
 238                         ids[id] = true;
 239
 240                         wp.revisions.log( 'ensure', id );
 241
 242                         this.trigger( 'ensure', ids, from, to, deferred.promise() );
 243
 244                         if ( diff ) {
 245                                 deferred.resolveWith( context, [ diff ] );
 246                         } else {
 247                                 this.trigger( 'ensure:load', ids, from, to, deferred.promise() );
 248                                 _.each( ids, _.bind( function( id ) {
 249                                         // Remove anything that has an ongoing request
 250                                         if ( this.requests[ id ] ) {
 251                                                 delete ids[ id ];
 252                                         }
 253                                         // Remove anything we already have
 254                                         if ( this.get( id ) ) {
 255                                                 delete ids[ id ];
 256                                         }
 257                                 }, this ) );
 258                                 if ( ! request ) {
 259                                         // Always include the ID that started this ensure
 260                                         ids[ id ] = true;
 261                                         request   = this.load( _.keys( ids ) );
 262                                 }
 263
 264                                 request.done( _.bind( function() {
 265                                         deferred.resolveWith( context, [ this.get( id ) ] );
 266                                 }, this ) ).fail( _.bind( function() {
 267                                         deferred.reject();
 268                                 }) );
 269                         }
 270
 271                         return deferred.promise();
 272                 },
 273
 274                 // Returns an array of proximal diffs
 275                 getClosestUnloaded: function( ids, centerId ) {
 276                         var self = this;
 277                         return _.chain([0].concat( ids )).initial().zip( ids ).sortBy( function( pair ) {
 278                                 return Math.abs( centerId - pair[1] );
 279                         }).map( function( pair ) {
 280                                 return pair.join(':');
 281                         }).filter( function( diffId ) {
 282                                 return _.isUndefined( self.get( diffId ) ) && ! self.requests[ diffId ];
 283                         }).value();
 284                 },
 285
 286                 _loadAll: function( allRevisionIds, centerId, num ) {
 287                         var self = this, deferred = $.Deferred(),
 288                                 diffs = _.first( this.getClosestUnloaded( allRevisionIds, centerId ), num );
 289                         if ( _.size( diffs ) > 0 ) {
 290                                 this.load( diffs ).done( function() {
 291                                         self._loadAll( allRevisionIds, centerId, num ).done( function() {
 292                                                 deferred.resolve();
 293                                         });
 294                                 }).fail( function() {
 295                                         if ( 1 === num ) { // Already tried 1. This just isn't working. Give up.
 296                                                 deferred.reject();
 297                                         } else { // Request fewer diffs this time
 298                                                 self._loadAll( allRevisionIds, centerId, Math.ceil( num / 2 ) ).done( function() {
 299                                                         deferred.resolve();
 300                                                 });
 301                                         }
 302                                 });
 303                         } else {
 304                                 deferred.resolve();
 305                         }
 306                         return deferred;
 307                 },
 308
 309                 load: function( comparisons ) {
 310                         wp.revisions.log( 'load', comparisons );
 311                         // Our collection should only ever grow, never shrink, so remove: false
 312                         return this.fetch({ data: { compare: comparisons }, remove: false }).done( function() {
 313                                 wp.revisions.log( 'load:complete', comparisons );
 314                         });
 315                 },
 316
 317                 sync: function( method, model, options ) {
 318                         if ( 'read' === method ) {
 319                                 options = options || {};
 320                                 options.context = this;
 321                                 options.data = _.extend( options.data || {}, {
 322                                         action: 'get-revision-diffs',
 323                                         post_id: revisions.settings.postId
 324                                 });
 325
 326                                 var deferred = wp.ajax.send( options ),
 327                                         requests = this.requests;
 328
 329                                 // Record that we're requesting each diff.
 330                                 if ( options.data.compare ) {
 331                                         _.each( options.data.compare, function( id ) {
 332                                                 requests[ id ] = deferred;
 333                                         });
 334                                 }
 335
 336                                 // When the request completes, clear the stored request.
 337                                 deferred.always( function() {
 338                                         if ( options.data.compare ) {
 339                                                 _.each( options.data.compare, function( id ) {
 340                                                         delete requests[ id ];
 341                                                 });
 342                                         }
 343                                 });
 344
 345                                 return deferred;
 346
 347                         // Otherwise, fall back to `Backbone.sync()`.
 348                         } else {
 349                                 return Backbone.Model.prototype.sync.apply( this, arguments );
 350                         }
 351                 }
 352         });
 353
 354
 355         revisions.model.FrameState = Backbone.Model.extend({
 356                 defaults: {
 357                         loading: false,
 358                         error: false,
 359                         compareTwoMode: false
 360                 },
 361
 362                 initialize: function( attributes, options ) {
 363                         var properties = {};
 364
 365                         _.bindAll( this, 'receiveDiff' );
 366                         this._debouncedEnsureDiff = _.debounce( this._ensureDiff, 200 );
 367
 368                         this.revisions = options.revisions;
 369                         this.diffs = new revisions.model.Diffs( [], { revisions: this.revisions });
 370
 371                         // Set the initial diffs collection provided through the settings
 372                         this.diffs.set( revisions.settings.diffData );
 373
 374                         // Set up internal listeners
 375                         this.listenTo( this, 'change:from', this.changeRevisionHandler );
 376                         this.listenTo( this, 'change:to', this.changeRevisionHandler );
 377                         this.listenTo( this, 'change:compareTwoMode', this.changeMode );
 378                         this.listenTo( this, 'update:revisions', this.updatedRevisions );
 379                         this.listenTo( this.diffs, 'ensure:load', this.updateLoadingStatus );
 380                         this.listenTo( this, 'update:diff', this.updateLoadingStatus );
 381
 382                         // Set the initial revisions, baseUrl, and mode as provided through settings
 383                         properties.to = this.revisions.get( revisions.settings.to );
 384                         properties.from = this.revisions.get( revisions.settings.from );
 385                         properties.compareTwoMode = revisions.settings.compareTwoMode;
 386                         properties.baseUrl = revisions.settings.baseUrl;
 387                         this.set( properties );
 388
 389                         // Start the router if browser supports History API
 390                         if ( window.history && window.history.pushState ) {
 391                                 this.router = new revisions.Router({ model: this });
 392                                 Backbone.history.start({ pushState: true });
 393                         }
 394                 },
 395
 396                 updateLoadingStatus: function() {
 397                         this.set( 'error', false );
 398                         this.set( 'loading', ! this.diff() );
 399                 },
 400
 401                 changeMode: function( model, value ) {
 402                         // If we were on the first revision before switching, we have to bump them over one
 403                         if ( value && 0 === this.revisions.indexOf( this.get('to') ) ) {
 404                                 this.set({
 405                                         from: this.revisions.at(0),
 406                                         to: this.revisions.at(1)
 407                                 });
 408                         }
 409                 },
 410
 411                 updatedRevisions: function( from, to ) {
 412                         if ( this.get( 'compareTwoMode' ) ) {
 413                                 // TODO: compare-two loading strategy
 414                         } else {
 415                                 this.diffs.loadAll( this.revisions.pluck('id'), to.id, 40 );
 416                         }
 417                 },
 418
 419                 // Fetch the currently loaded diff.
 420                 diff: function() {
 421                         return this.diffs.get( this._diffId );
 422                 },
 423
 424                 // So long as `from` and `to` are changed at the same time, the diff
 425                 // will only be updated once. This is because Backbone updates all of
 426                 // the changed attributes in `set`, and then fires the `change` events.
 427                 updateDiff: function( options ) {
 428                         var from, to, diffId, diff;
 429
 430                         options = options || {};
 431                         from = this.get('from');
 432                         to = this.get('to');
 433                         diffId = ( from ? from.id : 0 ) + ':' + to.id;
 434
 435                         // Check if we're actually changing the diff id.
 436                         if ( this._diffId === diffId ) {
 437                                 return $.Deferred().reject().promise();
 438                         }
 439
 440                         this._diffId = diffId;
 441                         this.trigger( 'update:revisions', from, to );
 442
 443                         diff = this.diffs.get( diffId );
 444
 445                         // If we already have the diff, then immediately trigger the update.
 446                         if ( diff ) {
 447                                 this.receiveDiff( diff );
 448                                 return $.Deferred().resolve().promise();
 449                         // Otherwise, fetch the diff.
 450                         } else {
 451                                 if ( options.immediate ) {
 452                                         return this._ensureDiff();
 453                                 } else {
 454                                         this._debouncedEnsureDiff();
 455                                         return $.Deferred().reject().promise();
 456                                 }
 457                         }
 458                 },
 459
 460                 // A simple wrapper around `updateDiff` to prevent the change event's
 461                 // parameters from being passed through.
 462                 changeRevisionHandler: function() {
 463                         this.updateDiff();
 464                 },
 465
 466                 receiveDiff: function( diff ) {
 467                         // Did we actually get a diff?
 468                         if ( _.isUndefined( diff ) || _.isUndefined( diff.id ) ) {
 469                                 this.set({
 470                                         loading: false,
 471                                         error: true
 472                                 });
 473                         } else if ( this._diffId === diff.id ) { // Make sure the current diff didn't change
 474                                 this.trigger( 'update:diff', diff );
 475                         }
 476                 },
 477
 478                 _ensureDiff: function() {
 479                         return this.diffs.ensure( this._diffId, this ).always( this.receiveDiff );
 480                 }
 481         });
 482
 483
 484         /**
 485          * ========================================================================
 486          * VIEWS
 487          * ========================================================================
 488          */
 489
 490         // The frame view. This contains the entire page.
 491         revisions.view.Frame = wp.Backbone.View.extend({
 492                 className: 'revisions',
 493                 template: wp.template('revisions-frame'),
 494
 495                 initialize: function() {
 496                         this.listenTo( this.model, 'update:diff', this.renderDiff );
 497                         this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
 498                         this.listenTo( this.model, 'change:loading', this.updateLoadingStatus );
 499                         this.listenTo( this.model, 'change:error', this.updateErrorStatus );
 500
 501                         this.views.set( '.revisions-control-frame', new revisions.view.Controls({
 502                                 model: this.model
 503                         }) );
 504                 },
 505
 506                 render: function() {
 507                         wp.Backbone.View.prototype.render.apply( this, arguments );
 508
 509                         $('html').css( 'overflow-y', 'scroll' );
 510                         $('#wpbody-content .wrap').append( this.el );
 511                         this.updateCompareTwoMode();
 512                         this.renderDiff( this.model.diff() );
 513                         this.views.ready();
 514
 515                         return this;
 516                 },
 517
 518                 renderDiff: function( diff ) {
 519                         this.views.set( '.revisions-diff-frame', new revisions.view.Diff({
 520                                 model: diff
 521                         }) );
 522                 },
 523
 524                 updateLoadingStatus: function() {
 525                         this.$el.toggleClass( 'loading', this.model.get('loading') );
 526                 },
 527
 528                 updateErrorStatus: function() {
 529                         this.$el.toggleClass( 'diff-error', this.model.get('error') );
 530                 },
 531
 532                 updateCompareTwoMode: function() {
 533                         this.$el.toggleClass( 'comparing-two-revisions', this.model.get('compareTwoMode') );
 534                 }
 535         });
 536
 537         // The control view.
 538         // This contains the revision slider, previous/next buttons, the meta info and the compare checkbox.
 539         revisions.view.Controls = wp.Backbone.View.extend({
 540                 className: 'revisions-controls',
 541
 542                 initialize: function() {
 543                         _.bindAll( this, 'setWidth' );
 544
 545                         // Add the button view
 546                         this.views.add( new revisions.view.Buttons({
 547                                 model: this.model
 548                         }) );
 549
 550                         // Add the checkbox view
 551                         this.views.add( new revisions.view.Checkbox({
 552                                 model: this.model
 553                         }) );
 554
 555                         // Prep the slider model
 556                         var slider = new revisions.model.Slider({
 557                                 frame: this.model,
 558                                 revisions: this.model.revisions
 559                         }),
 560
 561                         // Prep the tooltip model
 562                         tooltip = new revisions.model.Tooltip({
 563                                 frame: this.model,
 564                                 revisions: this.model.revisions,
 565                                 slider: slider
 566                         });
 567
 568                         // Add the tooltip view
 569                         this.views.add( new revisions.view.Tooltip({
 570                                 model: tooltip
 571                         }) );
 572
 573                         // Add the tickmarks view
 574                         this.views.add( new revisions.view.Tickmarks({
 575                                 model: tooltip
 576                         }) );
 577
 578                         // Add the slider view
 579                         this.views.add( new revisions.view.Slider({
 580                                 model: slider
 581                         }) );
 582
 583                         // Add the Metabox view
 584                         this.views.add( new revisions.view.Metabox({
 585                                 model: this.model
 586                         }) );
 587                 },
 588
 589                 ready: function() {
 590                         this.top = this.$el.offset().top;
 591                         this.window = $(window);
 592                         this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) {
 593                                 var controls  = e.data.controls,
 594                                         container = controls.$el.parent(),
 595                                         scrolled  = controls.window.scrollTop(),
 596                                         frame     = controls.views.parent;
 597
 598                                 if ( scrolled >= controls.top ) {
 599                                         if ( ! frame.$el.hasClass('pinned') ) {
 600                                                 controls.setWidth();
 601                                                 container.css('height', container.height() + 'px' );
 602                                                 controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) {
 603                                                         e.data.controls.setWidth();
 604                                                 });
 605                                         }
 606                                         frame.$el.addClass('pinned');
 607                                 } else if ( frame.$el.hasClass('pinned') ) {
 608                                         controls.window.off('.wp.revisions.pinning');
 609                                         controls.$el.css('width', 'auto');
 610                                         frame.$el.removeClass('pinned');
 611                                         container.css('height', 'auto');
 612                                         controls.top = controls.$el.offset().top;
 613                                 } else {
 614                                         controls.top = controls.$el.offset().top;
 615                                 }
 616                         });
 617                 },
 618
 619                 setWidth: function() {
 620                         this.$el.css('width', this.$el.parent().width() + 'px');
 621                 }
 622         });
 623
 624         // The tickmarks view
 625         revisions.view.Tickmarks = wp.Backbone.View.extend({
 626                 className: 'revisions-tickmarks',
 627                 direction: isRtl ? 'right' : 'left',
 628
 629                 initialize: function() {
 630                         this.listenTo( this.model, 'change:revision', this.reportTickPosition );
 631                 },
 632
 633                 reportTickPosition: function( model, revision ) {
 634                         var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision );
 635                         thisOffset = this.$el.allOffsets();
 636                         parentOffset = this.$el.parent().allOffsets();
 637                         if ( index === this.model.revisions.length - 1 ) {
 638                                 // Last one
 639                                 offset = {
 640                                         rightPlusWidth: thisOffset.left - parentOffset.left + 1,
 641                                         leftPlusWidth: thisOffset.right - parentOffset.right + 1
 642                                 };
 643                         } else {
 644                                 // Normal tick
 645                                 tick = this.$('div:nth-of-type(' + (index + 1) + ')');
 646                                 offset = tick.allPositions();
 647                                 _.extend( offset, {
 648                                         left: offset.left + thisOffset.left - parentOffset.left,
 649                                         right: offset.right + thisOffset.right - parentOffset.right
 650                                 });
 651                                 _.extend( offset, {
 652                                         leftPlusWidth: offset.left + tick.outerWidth(),
 653                                         rightPlusWidth: offset.right + tick.outerWidth()
 654                                 });
 655                         }
 656                         this.model.set({ offset: offset });
 657                 },
 658
 659                 ready: function() {
 660                         var tickCount, tickWidth;
 661                         tickCount = this.model.revisions.length - 1;
 662                         tickWidth = 1 / tickCount;
 663                         this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
 664
 665                         _(tickCount).times( function( index ){
 666                                 this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' );
 667                         }, this );
 668                 }
 669         });
 670
 671         // The metabox view
 672         revisions.view.Metabox = wp.Backbone.View.extend({
 673                 className: 'revisions-meta',
 674
 675                 initialize: function() {
 676                         // Add the 'from' view
 677                         this.views.add( new revisions.view.MetaFrom({
 678                                 model: this.model,
 679                                 className: 'diff-meta diff-meta-from'
 680                         }) );
 681
 682                         // Add the 'to' view
 683                         this.views.add( new revisions.view.MetaTo({
 684                                 model: this.model
 685                         }) );
 686                 }
 687         });
 688
 689         // The revision meta view (to be extended)
 690         revisions.view.Meta = wp.Backbone.View.extend({
 691                 template: wp.template('revisions-meta'),
 692
 693                 events: {
 694                         'click .restore-revision': 'restoreRevision'
 695                 },
 696
 697                 initialize: function() {
 698                         this.listenTo( this.model, 'update:revisions', this.render );
 699                 },
 700
 701                 prepare: function() {
 702                         return _.extend( this.model.toJSON()[this.type] || {}, {
 703                                 type: this.type
 704                         });
 705                 },
 706
 707                 restoreRevision: function() {
 708                         document.location = this.model.get('to').attributes.restoreUrl;
 709                 }
 710         });
 711
 712         // The revision meta 'from' view
 713         revisions.view.MetaFrom = revisions.view.Meta.extend({
 714                 className: 'diff-meta diff-meta-from',
 715                 type: 'from'
 716         });
 717
 718         // The revision meta 'to' view
 719         revisions.view.MetaTo = revisions.view.Meta.extend({
 720                 className: 'diff-meta diff-meta-to',
 721                 type: 'to'
 722         });
 723
 724         // The checkbox view.
 725         revisions.view.Checkbox = wp.Backbone.View.extend({
 726                 className: 'revisions-checkbox',
 727                 template: wp.template('revisions-checkbox'),
 728
 729                 events: {
 730                         'click .compare-two-revisions': 'compareTwoToggle'
 731                 },
 732
 733                 initialize: function() {
 734                         this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
 735                 },
 736
 737                 ready: function() {
 738                         if ( this.model.revisions.length < 3 ) {
 739                                 $('.revision-toggle-compare-mode').hide();
 740                         }
 741                 },
 742
 743                 updateCompareTwoMode: function() {
 744                         this.$('.compare-two-revisions').prop( 'checked', this.model.get('compareTwoMode') );
 745                 },
 746
 747                 // Toggle the compare two mode feature when the compare two checkbox is checked.
 748                 compareTwoToggle: function() {
 749                         // Activate compare two mode?
 750                         this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') });
 751                 }
 752         });
 753
 754         // The tooltip view.
 755         // Encapsulates the tooltip.
 756         revisions.view.Tooltip = wp.Backbone.View.extend({
 757                 className: 'revisions-tooltip',
 758                 template: wp.template('revisions-meta'),
 759
 760                 initialize: function() {
 761                         this.listenTo( this.model, 'change:offset', this.render );
 762                         this.listenTo( this.model, 'change:hovering', this.toggleVisibility );
 763                         this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility );
 764                 },
 765
 766                 prepare: function() {
 767                         if ( _.isNull( this.model.get('revision') ) ) {
 768                                 return;
 769                         } else {
 770                                 return _.extend( { type: 'tooltip' }, {
 771                                         attributes: this.model.get('revision').toJSON()
 772                                 });
 773                         }
 774                 },
 775
 776                 render: function() {
 777                         var otherDirection,
 778                                 direction,
 779                                 directionVal,
 780                                 flipped,
 781                                 css      = {},
 782                                 position = this.model.revisions.indexOf( this.model.get('revision') ) + 1;
 783
 784                         flipped = ( position / this.model.revisions.length ) > 0.5;
 785                         if ( isRtl ) {
 786                                 direction = flipped ? 'left' : 'right';
 787                                 directionVal = flipped ? 'leftPlusWidth' : direction;
 788                         } else {
 789                                 direction = flipped ? 'right' : 'left';
 790                                 directionVal = flipped ? 'rightPlusWidth' : direction;
 791                         }
 792                         otherDirection = 'right' === direction ? 'left': 'right';
 793                         wp.Backbone.View.prototype.render.apply( this, arguments );
 794                         css[direction] = this.model.get('offset')[directionVal] + 'px';
 795                         css[otherDirection] = '';
 796                         this.$el.toggleClass( 'flipped', flipped ).css( css );
 797                 },
 798
 799                 visible: function() {
 800                         return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' );
 801                 },
 802
 803                 toggleVisibility: function() {
 804                         if ( this.visible() ) {
 805                                 this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
 806                         } else {
 807                                 this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
 808                         }
 809                         return;
 810                 }
 811         });
 812
 813         // The buttons view.
 814         // Encapsulates all of the configuration for the previous/next buttons.
 815         revisions.view.Buttons = wp.Backbone.View.extend({
 816                 className: 'revisions-buttons',
 817                 template: wp.template('revisions-buttons'),
 818
 819                 events: {
 820                         'click .revisions-next .button': 'nextRevision',
 821                         'click .revisions-previous .button': 'previousRevision'
 822                 },
 823
 824                 initialize: function() {
 825                         this.listenTo( this.model, 'update:revisions', this.disabledButtonCheck );
 826                 },
 827
 828                 ready: function() {
 829                         this.disabledButtonCheck();
 830                 },
 831
 832                 // Go to a specific model index
 833                 gotoModel: function( toIndex ) {
 834                         var attributes = {
 835                                 to: this.model.revisions.at( toIndex )
 836                         };
 837                         // If we're at the first revision, unset 'from'.
 838                         if ( toIndex ) {
 839                                 attributes.from = this.model.revisions.at( toIndex - 1 );
 840                         } else {
 841                                 this.model.unset('from', { silent: true });
 842                         }
 843
 844                         this.model.set( attributes );
 845                 },
 846
 847                 // Go to the 'next' revision
 848                 nextRevision: function() {
 849                         var toIndex = this.model.revisions.indexOf( this.model.get('to') ) + 1;
 850                         this.gotoModel( toIndex );
 851                 },
 852
 853                 // Go to the 'previous' revision
 854                 previousRevision: function() {
 855                         var toIndex = this.model.revisions.indexOf( this.model.get('to') ) - 1;
 856                         this.gotoModel( toIndex );
 857                 },
 858
 859                 // Check to see if the Previous or Next buttons need to be disabled or enabled.
 860                 disabledButtonCheck: function() {
 861                         var maxVal   = this.model.revisions.length - 1,
 862                                 minVal   = 0,
 863                                 next     = $('.revisions-next .button'),
 864                                 previous = $('.revisions-previous .button'),
 865                                 val      = this.model.revisions.indexOf( this.model.get('to') );
 866
 867                         // Disable "Next" button if you're on the last node.
 868                         next.prop( 'disabled', ( maxVal === val ) );
 869
 870                         // Disable "Previous" button if you're on the first node.
 871                         previous.prop( 'disabled', ( minVal === val ) );
 872                 }
 873         });
 874
 875
 876         // The slider view.
 877         revisions.view.Slider = wp.Backbone.View.extend({
 878                 className: 'wp-slider',
 879                 direction: isRtl ? 'right' : 'left',
 880
 881                 events: {
 882                         'mousemove' : 'mouseMove'
 883                 },
 884
 885                 initialize: function() {
 886                         _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
 887                         this.listenTo( this.model, 'update:slider', this.applySliderSettings );
 888                 },
 889
 890                 ready: function() {
 891                         this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
 892                         this.$el.slider( _.extend( this.model.toJSON(), {
 893                                 start: this.start,
 894                                 slide: this.slide,
 895                                 stop:  this.stop
 896                         }) );
 897
 898                         this.$el.hoverIntent({
 899                                 over: this.mouseEnter,
 900                                 out: this.mouseLeave,
 901                                 timeout: 800
 902                         });
 903
 904                         this.applySliderSettings();
 905                 },
 906
 907                 mouseMove: function( e ) {
 908                         var zoneCount         = this.model.revisions.length - 1, // One fewer zone than models
 909                                 sliderFrom        = this.$el.allOffsets()[this.direction], // "From" edge of slider
 910                                 sliderWidth       = this.$el.width(), // Width of slider
 911                                 tickWidth         = sliderWidth / zoneCount, // Calculated width of zone
 912                                 actualX           = ( isRtl ? $(window).width() - e.pageX : e.pageX ) - sliderFrom, // Flipped for RTL - sliderFrom;
 913                                 currentModelIndex = Math.floor( ( actualX  + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
 914
 915                         // Ensure sane value for currentModelIndex.
 916                         if ( currentModelIndex < 0 ) {
 917                                 currentModelIndex = 0;
 918                         } else if ( currentModelIndex >= this.model.revisions.length ) {
 919                                 currentModelIndex = this.model.revisions.length - 1;
 920                         }
 921
 922                         // Update the tooltip mode
 923                         this.model.set({ hoveredRevision: this.model.revisions.at( currentModelIndex ) });
 924                 },
 925
 926                 mouseLeave: function() {
 927                         this.model.set({ hovering: false });
 928                 },
 929
 930                 mouseEnter: function() {
 931                         this.model.set({ hovering: true });
 932                 },
 933
 934                 applySliderSettings: function() {
 935                         this.$el.slider( _.pick( this.model.toJSON(), 'value', 'values', 'range' ) );
 936                         var handles = this.$('a.ui-slider-handle');
 937
 938                         if ( this.model.get('compareTwoMode') ) {
 939                                 // in RTL mode the 'left handle' is the second in the slider, 'right' is first
 940                                 handles.first()
 941                                         .toggleClass( 'to-handle', !! isRtl )
 942                                         .toggleClass( 'from-handle', ! isRtl );
 943                                 handles.last()
 944                                         .toggleClass( 'from-handle', !! isRtl )
 945                                         .toggleClass( 'to-handle', ! isRtl );
 946                         } else {
 947                                 handles.removeClass('from-handle to-handle');
 948                         }
 949                 },
 950
 951                 start: function( event, ui ) {
 952                         this.model.set({ scrubbing: true });
 953
 954                         // Track the mouse position to enable smooth dragging,
 955                         // overrides default jQuery UI step behavior.
 956                         $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) {
 957                                 var handles,
 958                                         view              = e.data.view,
 959                                         leftDragBoundary  = view.$el.offset().left,
 960                                         sliderOffset      = leftDragBoundary,
 961                                         sliderRightEdge   = leftDragBoundary + view.$el.width(),
 962                                         rightDragBoundary = sliderRightEdge,
 963                                         leftDragReset     = '0',
 964                                         rightDragReset    = '100%',
 965                                         handle            = $( ui.handle );
 966
 967                                 // In two handle mode, ensure handles can't be dragged past each other.
 968                                 // Adjust left/right boundaries and reset points.
 969                                 if ( view.model.get('compareTwoMode') ) {
 970                                         handles = handle.parent().find('.ui-slider-handle');
 971                                         if ( handle.is( handles.first() ) ) { // We're the left handle
 972                                                 rightDragBoundary = handles.last().offset().left;
 973                                                 rightDragReset    = rightDragBoundary - sliderOffset;
 974                                         } else { // We're the right handle
 975                                                 leftDragBoundary = handles.first().offset().left + handles.first().width();
 976                                                 leftDragReset    = leftDragBoundary - sliderOffset;
 977                                         }
 978                                 }
 979
 980                                 // Follow mouse movements, as long as handle remains inside slider.
 981                                 if ( e.pageX < leftDragBoundary ) {
 982                                         handle.css( 'left', leftDragReset ); // Mouse to left of slider.
 983                                 } else if ( e.pageX > rightDragBoundary ) {
 984                                         handle.css( 'left', rightDragReset ); // Mouse to right of slider.
 985                                 } else {
 986                                         handle.css( 'left', e.pageX - sliderOffset ); // Mouse in slider.
 987                                 }
 988                         } );
 989                 },
 990
 991                 getPosition: function( position ) {
 992                         return isRtl ? this.model.revisions.length - position - 1: position;
 993                 },
 994
 995                 // Responds to slide events
 996                 slide: function( event, ui ) {
 997                         var attributes, movedRevision;
 998                         // Compare two revisions mode
 999                         if ( this.model.get('compareTwoMode') ) {
1000                                 // Prevent sliders from occupying same spot
1001                                 if ( ui.values[1] === ui.values[0] ) {
1002                                         return false;
1003                                 }
1004                                 if ( isRtl ) {
1005                                         ui.values.reverse();
1006                                 }
1007                                 attributes = {
1008                                         from: this.model.revisions.at( this.getPosition( ui.values[0] ) ),
1009                                         to: this.model.revisions.at( this.getPosition( ui.values[1] ) )
1010                                 };
1011                         } else {
1012                                 attributes = {
1013                                         to: this.model.revisions.at( this.getPosition( ui.value ) )
1014                                 };
1015                                 // If we're at the first revision, unset 'from'.
1016                                 if ( this.getPosition( ui.value ) > 0 ) {
1017                                         attributes.from = this.model.revisions.at( this.getPosition( ui.value ) - 1 );
1018                                 } else {
1019                                         attributes.from = undefined;
1020                                 }
1021                         }
1022                         movedRevision = this.model.revisions.at( this.getPosition( ui.value ) );
1023
1024                         // If we are scrubbing, a scrub to a revision is considered a hover
1025                         if ( this.model.get('scrubbing') ) {
1026                                 attributes.hoveredRevision = movedRevision;
1027                         }
1028
1029                         this.model.set( attributes );
1030                 },
1031
1032                 stop: function() {
1033                         $( window ).off('mousemove.wp.revisions');
1034                         this.model.updateSliderSettings(); // To snap us back to a tick mark
1035                         this.model.set({ scrubbing: false });
1036                 }
1037         });
1038
1039         // The diff view.
1040         // This is the view for the current active diff.
1041         revisions.view.Diff = wp.Backbone.View.extend({
1042                 className: 'revisions-diff',
1043                 template:  wp.template('revisions-diff'),
1044
1045                 // Generate the options to be passed to the template.
1046                 prepare: function() {
1047                         return _.extend({ fields: this.model.fields.toJSON() }, this.options );
1048                 }
1049         });
1050
1051         // The revisions router
1052         // takes URLs with #hash fragments and routes them
1053         revisions.Router = Backbone.Router.extend({
1054                 initialize: function( options ) {
1055                         this.model = options.model;
1056                         this.routes = _.object([
1057                                 [ this.baseUrl( '?from=:from&to=:to' ), 'handleRoute' ],
1058                                 [ this.baseUrl( '?from=:from&to=:to' ), 'handleRoute' ]
1059                         ]);
1060                         // Maintain state and history when navigating
1061                         this.listenTo( this.model, 'update:diff', _.debounce( this.updateUrl, 250 ) );
1062                         this.listenTo( this.model, 'change:compareTwoMode', this.updateUrl );
1063                 },
1064
1065                 baseUrl: function( url ) {
1066                         return this.model.get('baseUrl') + url;
1067                 },
1068
1069                 updateUrl: function() {
1070                         var from = this.model.has('from') ? this.model.get('from').id : 0,
1071                                 to   = this.model.get('to').id;
1072                         if ( this.model.get('compareTwoMode' ) ) {
1073                                 this.navigate( this.baseUrl( '?from=' + from + '&to=' + to ) );
1074                         } else {
1075                                 this.navigate( this.baseUrl( '?revision=' + to ) );
1076                         }
1077                 },
1078
1079                 handleRoute: function( a, b ) {
1080                         var compareTwo = _.isUndefined( b );
1081
1082                         if ( ! compareTwo ) {
1083                                 b = this.model.revisions.get( a );
1084                                 a = this.model.revisions.prev( b );
1085                                 b = b ? b.id : 0;
1086                                 a = a ? a.id : 0;
1087                         }
1088
1089                         this.model.set({
1090                                 from: this.model.revisions.get( parseInt( a, 10 ) ),
1091                                 to: this.model.revisions.get( parseInt( a, 10 ) ),
1092                                 compareTwoMode: compareTwo
1093                         });
1094                 }
1095         });
1096
1097         // Initialize the revisions UI.
1098         revisions.init = function() {
1099                 revisions.view.frame = new revisions.view.Frame({
1100                         model: new revisions.model.FrameState({}, {
1101                                 revisions: new revisions.model.Revisions( revisions.settings.revisionData )
1102                         })
1103                 }).render();
1104         };
1105
1106         $( revisions.init );
1107 }(jQuery));