wp-admin/js/revisions.js

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