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                         var toIndex = this.revisions.indexOf( this.get( 'to' ) );
 403
 404                         // If we were on the first revision before switching to two-handled mode,
 405                         // bump the 'to' position over one
 406                         if ( value && 0 === toIndex ) {
 407                                 this.set({
 408                                         from: this.revisions.at( toIndex ),
 409                                         to:   this.revisions.at( toIndex + 1 )
 410                                 });
 411                         }
 412
 413                         // When switching back to single-handled mode, reset 'from' model to
 414                         // one position before the 'to' model
 415                         if ( ! value && 0 !== toIndex ) { // '! value' means switching to single-handled mode
 416                                 this.set({
 417                                         from: this.revisions.at( toIndex - 1 ),
 418                                         to:   this.revisions.at( toIndex )
 419                                 });
 420                         }
 421                 },
 422
 423                 updatedRevisions: function( from, to ) {
 424                         if ( this.get( 'compareTwoMode' ) ) {
 425                                 // TODO: compare-two loading strategy
 426                         } else {
 427                                 this.diffs.loadAll( this.revisions.pluck('id'), to.id, 40 );
 428                         }
 429                 },
 430
 431                 // Fetch the currently loaded diff.
 432                 diff: function() {
 433                         return this.diffs.get( this._diffId );
 434                 },
 435
 436                 // So long as `from` and `to` are changed at the same time, the diff
 437                 // will only be updated once. This is because Backbone updates all of
 438                 // the changed attributes in `set`, and then fires the `change` events.
 439                 updateDiff: function( options ) {
 440                         var from, to, diffId, diff;
 441
 442                         options = options || {};
 443                         from = this.get('from');
 444                         to = this.get('to');
 445                         diffId = ( from ? from.id : 0 ) + ':' + to.id;
 446
 447                         // Check if we're actually changing the diff id.
 448                         if ( this._diffId === diffId ) {
 449                                 return $.Deferred().reject().promise();
 450                         }
 451
 452                         this._diffId = diffId;
 453                         this.trigger( 'update:revisions', from, to );
 454
 455                         diff = this.diffs.get( diffId );
 456
 457                         // If we already have the diff, then immediately trigger the update.
 458                         if ( diff ) {
 459                                 this.receiveDiff( diff );
 460                                 return $.Deferred().resolve().promise();
 461                         // Otherwise, fetch the diff.
 462                         } else {
 463                                 if ( options.immediate ) {
 464                                         return this._ensureDiff();
 465                                 } else {
 466                                         this._debouncedEnsureDiff();
 467                                         return $.Deferred().reject().promise();
 468                                 }
 469                         }
 470                 },
 471
 472                 // A simple wrapper around `updateDiff` to prevent the change event's
 473                 // parameters from being passed through.
 474                 changeRevisionHandler: function() {
 475                         this.updateDiff();
 476                 },
 477
 478                 receiveDiff: function( diff ) {
 479                         // Did we actually get a diff?
 480                         if ( _.isUndefined( diff ) || _.isUndefined( diff.id ) ) {
 481                                 this.set({
 482                                         loading: false,
 483                                         error: true
 484                                 });
 485                         } else if ( this._diffId === diff.id ) { // Make sure the current diff didn't change
 486                                 this.trigger( 'update:diff', diff );
 487                         }
 488                 },
 489
 490                 _ensureDiff: function() {
 491                         return this.diffs.ensure( this._diffId, this ).always( this.receiveDiff );
 492                 }
 493         });
 494
 495
 496         /**
 497          * ========================================================================
 498          * VIEWS
 499          * ========================================================================
 500          */
 501
 502         // The frame view. This contains the entire page.
 503         revisions.view.Frame = wp.Backbone.View.extend({
 504                 className: 'revisions',
 505                 template: wp.template('revisions-frame'),
 506
 507                 initialize: function() {
 508                         this.listenTo( this.model, 'update:diff', this.renderDiff );
 509                         this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
 510                         this.listenTo( this.model, 'change:loading', this.updateLoadingStatus );
 511                         this.listenTo( this.model, 'change:error', this.updateErrorStatus );
 512
 513                         this.views.set( '.revisions-control-frame', new revisions.view.Controls({
 514                                 model: this.model
 515                         }) );
 516                 },
 517
 518                 render: function() {
 519                         wp.Backbone.View.prototype.render.apply( this, arguments );
 520
 521                         $('html').css( 'overflow-y', 'scroll' );
 522                         $('#wpbody-content .wrap').append( this.el );
 523                         this.updateCompareTwoMode();
 524                         this.renderDiff( this.model.diff() );
 525                         this.views.ready();
 526
 527                         return this;
 528                 },
 529
 530                 renderDiff: function( diff ) {
 531                         this.views.set( '.revisions-diff-frame', new revisions.view.Diff({
 532                                 model: diff
 533                         }) );
 534                 },
 535
 536                 updateLoadingStatus: function() {
 537                         this.$el.toggleClass( 'loading', this.model.get('loading') );
 538                 },
 539
 540                 updateErrorStatus: function() {
 541                         this.$el.toggleClass( 'diff-error', this.model.get('error') );
 542                 },
 543
 544                 updateCompareTwoMode: function() {
 545                         this.$el.toggleClass( 'comparing-two-revisions', this.model.get('compareTwoMode') );
 546                 }
 547         });
 548
 549         // The control view.
 550         // This contains the revision slider, previous/next buttons, the meta info and the compare checkbox.
 551         revisions.view.Controls = wp.Backbone.View.extend({
 552                 className: 'revisions-controls',
 553
 554                 initialize: function() {
 555                         _.bindAll( this, 'setWidth' );
 556
 557                         // Add the button view
 558                         this.views.add( new revisions.view.Buttons({
 559                                 model: this.model
 560                         }) );
 561
 562                         // Add the checkbox view
 563                         this.views.add( new revisions.view.Checkbox({
 564                                 model: this.model
 565                         }) );
 566
 567                         // Prep the slider model
 568                         var slider = new revisions.model.Slider({
 569                                 frame: this.model,
 570                                 revisions: this.model.revisions
 571                         }),
 572
 573                         // Prep the tooltip model
 574                         tooltip = new revisions.model.Tooltip({
 575                                 frame: this.model,
 576                                 revisions: this.model.revisions,
 577                                 slider: slider
 578                         });
 579
 580                         // Add the tooltip view
 581                         this.views.add( new revisions.view.Tooltip({
 582                                 model: tooltip
 583                         }) );
 584
 585                         // Add the tickmarks view
 586                         this.views.add( new revisions.view.Tickmarks({
 587                                 model: tooltip
 588                         }) );
 589
 590                         // Add the slider view
 591                         this.views.add( new revisions.view.Slider({
 592                                 model: slider
 593                         }) );
 594
 595                         // Add the Metabox view
 596                         this.views.add( new revisions.view.Metabox({
 597                                 model: this.model
 598                         }) );
 599                 },
 600
 601                 ready: function() {
 602                         this.top = this.$el.offset().top;
 603                         this.window = $(window);
 604                         this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) {
 605                                 var controls  = e.data.controls,
 606                                         container = controls.$el.parent(),
 607                                         scrolled  = controls.window.scrollTop(),
 608                                         frame     = controls.views.parent;
 609
 610                                 if ( scrolled >= controls.top ) {
 611                                         if ( ! frame.$el.hasClass('pinned') ) {
 612                                                 controls.setWidth();
 613                                                 container.css('height', container.height() + 'px' );
 614                                                 controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) {
 615                                                         e.data.controls.setWidth();
 616                                                 });
 617                                         }
 618                                         frame.$el.addClass('pinned');
 619                                 } else if ( frame.$el.hasClass('pinned') ) {
 620                                         controls.window.off('.wp.revisions.pinning');
 621                                         controls.$el.css('width', 'auto');
 622                                         frame.$el.removeClass('pinned');
 623                                         container.css('height', 'auto');
 624                                         controls.top = controls.$el.offset().top;
 625                                 } else {
 626                                         controls.top = controls.$el.offset().top;
 627                                 }
 628                         });
 629                 },
 630
 631                 setWidth: function() {
 632                         this.$el.css('width', this.$el.parent().width() + 'px');
 633                 }
 634         });
 635
 636         // The tickmarks view
 637         revisions.view.Tickmarks = wp.Backbone.View.extend({
 638                 className: 'revisions-tickmarks',
 639                 direction: isRtl ? 'right' : 'left',
 640
 641                 initialize: function() {
 642                         this.listenTo( this.model, 'change:revision', this.reportTickPosition );
 643                 },
 644
 645                 reportTickPosition: function( model, revision ) {
 646                         var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision );
 647                         thisOffset = this.$el.allOffsets();
 648                         parentOffset = this.$el.parent().allOffsets();
 649                         if ( index === this.model.revisions.length - 1 ) {
 650                                 // Last one
 651                                 offset = {
 652                                         rightPlusWidth: thisOffset.left - parentOffset.left + 1,
 653                                         leftPlusWidth: thisOffset.right - parentOffset.right + 1
 654                                 };
 655                         } else {
 656                                 // Normal tick
 657                                 tick = this.$('div:nth-of-type(' + (index + 1) + ')');
 658                                 offset = tick.allPositions();
 659                                 _.extend( offset, {
 660                                         left: offset.left + thisOffset.left - parentOffset.left,
 661                                         right: offset.right + thisOffset.right - parentOffset.right
 662                                 });
 663                                 _.extend( offset, {
 664                                         leftPlusWidth: offset.left + tick.outerWidth(),
 665                                         rightPlusWidth: offset.right + tick.outerWidth()
 666                                 });
 667                         }
 668                         this.model.set({ offset: offset });
 669                 },
 670
 671                 ready: function() {
 672                         var tickCount, tickWidth;
 673                         tickCount = this.model.revisions.length - 1;
 674                         tickWidth = 1 / tickCount;
 675                         this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
 676
 677                         _(tickCount).times( function( index ){
 678                                 this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' );
 679                         }, this );
 680                 }
 681         });
 682
 683         // The metabox view
 684         revisions.view.Metabox = wp.Backbone.View.extend({
 685                 className: 'revisions-meta',
 686
 687                 initialize: function() {
 688                         // Add the 'from' view
 689                         this.views.add( new revisions.view.MetaFrom({
 690                                 model: this.model,
 691                                 className: 'diff-meta diff-meta-from'
 692                         }) );
 693
 694                         // Add the 'to' view
 695                         this.views.add( new revisions.view.MetaTo({
 696                                 model: this.model
 697                         }) );
 698                 }
 699         });
 700
 701         // The revision meta view (to be extended)
 702         revisions.view.Meta = wp.Backbone.View.extend({
 703                 template: wp.template('revisions-meta'),
 704
 705                 events: {
 706                         'click .restore-revision': 'restoreRevision'
 707                 },
 708
 709                 initialize: function() {
 710                         this.listenTo( this.model, 'update:revisions', this.render );
 711                 },
 712
 713                 prepare: function() {
 714                         return _.extend( this.model.toJSON()[this.type] || {}, {
 715                                 type: this.type
 716                         });
 717                 },
 718
 719                 restoreRevision: function() {
 720                         document.location = this.model.get('to').attributes.restoreUrl;
 721                 }
 722         });
 723
 724         // The revision meta 'from' view
 725         revisions.view.MetaFrom = revisions.view.Meta.extend({
 726                 className: 'diff-meta diff-meta-from',
 727                 type: 'from'
 728         });
 729
 730         // The revision meta 'to' view
 731         revisions.view.MetaTo = revisions.view.Meta.extend({
 732                 className: 'diff-meta diff-meta-to',
 733                 type: 'to'
 734         });
 735
 736         // The checkbox view.
 737         revisions.view.Checkbox = wp.Backbone.View.extend({
 738                 className: 'revisions-checkbox',
 739                 template: wp.template('revisions-checkbox'),
 740
 741                 events: {
 742                         'click .compare-two-revisions': 'compareTwoToggle'
 743                 },
 744
 745                 initialize: function() {
 746                         this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
 747                 },
 748
 749                 ready: function() {
 750                         if ( this.model.revisions.length < 3 ) {
 751                                 $('.revision-toggle-compare-mode').hide();
 752                         }
 753                 },
 754
 755                 updateCompareTwoMode: function() {
 756                         this.$('.compare-two-revisions').prop( 'checked', this.model.get('compareTwoMode') );
 757                 },
 758
 759                 // Toggle the compare two mode feature when the compare two checkbox is checked.
 760                 compareTwoToggle: function() {
 761                         // Activate compare two mode?
 762                         this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') });
 763                 }
 764         });
 765
 766         // The tooltip view.
 767         // Encapsulates the tooltip.
 768         revisions.view.Tooltip = wp.Backbone.View.extend({
 769                 className: 'revisions-tooltip',
 770                 template: wp.template('revisions-meta'),
 771
 772                 initialize: function() {
 773                         this.listenTo( this.model, 'change:offset', this.render );
 774                         this.listenTo( this.model, 'change:hovering', this.toggleVisibility );
 775                         this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility );
 776                 },
 777
 778                 prepare: function() {
 779                         if ( _.isNull( this.model.get('revision') ) ) {
 780                                 return;
 781                         } else {
 782                                 return _.extend( { type: 'tooltip' }, {
 783                                         attributes: this.model.get('revision').toJSON()
 784                                 });
 785                         }
 786                 },
 787
 788                 render: function() {
 789                         var otherDirection,
 790                                 direction,
 791                                 directionVal,
 792                                 flipped,
 793                                 css      = {},
 794                                 position = this.model.revisions.indexOf( this.model.get('revision') ) + 1;
 795
 796                         flipped = ( position / this.model.revisions.length ) > 0.5;
 797                         if ( isRtl ) {
 798                                 direction = flipped ? 'left' : 'right';
 799                                 directionVal = flipped ? 'leftPlusWidth' : direction;
 800                         } else {
 801                                 direction = flipped ? 'right' : 'left';
 802                                 directionVal = flipped ? 'rightPlusWidth' : direction;
 803                         }
 804                         otherDirection = 'right' === direction ? 'left': 'right';
 805                         wp.Backbone.View.prototype.render.apply( this, arguments );
 806                         css[direction] = this.model.get('offset')[directionVal] + 'px';
 807                         css[otherDirection] = '';
 808                         this.$el.toggleClass( 'flipped', flipped ).css( css );
 809                 },
 810
 811                 visible: function() {
 812                         return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' );
 813                 },
 814
 815                 toggleVisibility: function() {
 816                         if ( this.visible() ) {
 817                                 this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
 818                         } else {
 819                                 this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
 820                         }
 821                         return;
 822                 }
 823         });
 824
 825         // The buttons view.
 826         // Encapsulates all of the configuration for the previous/next buttons.
 827         revisions.view.Buttons = wp.Backbone.View.extend({
 828                 className: 'revisions-buttons',
 829                 template: wp.template('revisions-buttons'),
 830
 831                 events: {
 832                         'click .revisions-next .button': 'nextRevision',
 833                         'click .revisions-previous .button': 'previousRevision'
 834                 },
 835
 836                 initialize: function() {
 837                         this.listenTo( this.model, 'update:revisions', this.disabledButtonCheck );
 838                 },
 839
 840                 ready: function() {
 841                         this.disabledButtonCheck();
 842                 },
 843
 844                 // Go to a specific model index
 845                 gotoModel: function( toIndex ) {
 846                         var attributes = {
 847                                 to: this.model.revisions.at( toIndex )
 848                         };
 849                         // If we're at the first revision, unset 'from'.
 850                         if ( toIndex ) {
 851                                 attributes.from = this.model.revisions.at( toIndex - 1 );
 852                         } else {
 853                                 this.model.unset('from', { silent: true });
 854                         }
 855
 856                         this.model.set( attributes );
 857                 },
 858
 859                 // Go to the 'next' revision
 860                 nextRevision: function() {
 861                         var toIndex = this.model.revisions.indexOf( this.model.get('to') ) + 1;
 862                         this.gotoModel( toIndex );
 863                 },
 864
 865                 // Go to the 'previous' revision
 866                 previousRevision: function() {
 867                         var toIndex = this.model.revisions.indexOf( this.model.get('to') ) - 1;
 868                         this.gotoModel( toIndex );
 869                 },
 870
 871                 // Check to see if the Previous or Next buttons need to be disabled or enabled.
 872                 disabledButtonCheck: function() {
 873                         var maxVal   = this.model.revisions.length - 1,
 874                                 minVal   = 0,
 875                                 next     = $('.revisions-next .button'),
 876                                 previous = $('.revisions-previous .button'),
 877                                 val      = this.model.revisions.indexOf( this.model.get('to') );
 878
 879                         // Disable "Next" button if you're on the last node.
 880                         next.prop( 'disabled', ( maxVal === val ) );
 881
 882                         // Disable "Previous" button if you're on the first node.
 883                         previous.prop( 'disabled', ( minVal === val ) );
 884                 }
 885         });
 886
 887
 888         // The slider view.
 889         revisions.view.Slider = wp.Backbone.View.extend({
 890                 className: 'wp-slider',
 891                 direction: isRtl ? 'right' : 'left',
 892
 893                 events: {
 894                         'mousemove' : 'mouseMove'
 895                 },
 896
 897                 initialize: function() {
 898                         _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
 899                         this.listenTo( this.model, 'update:slider', this.applySliderSettings );
 900                 },
 901
 902                 ready: function() {
 903                         this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px');
 904                         this.$el.slider( _.extend( this.model.toJSON(), {
 905                                 start: this.start,
 906                                 slide: this.slide,
 907                                 stop:  this.stop
 908                         }) );
 909
 910                         this.$el.hoverIntent({
 911                                 over: this.mouseEnter,
 912                                 out: this.mouseLeave,
 913                                 timeout: 800
 914                         });
 915
 916                         this.applySliderSettings();
 917                 },
 918
 919                 mouseMove: function( e ) {
 920                         var zoneCount         = this.model.revisions.length - 1, // One fewer zone than models
 921                                 sliderFrom        = this.$el.allOffsets()[this.direction], // "From" edge of slider
 922                                 sliderWidth       = this.$el.width(), // Width of slider
 923                                 tickWidth         = sliderWidth / zoneCount, // Calculated width of zone
 924                                 actualX           = ( isRtl ? $(window).width() - e.pageX : e.pageX ) - sliderFrom, // Flipped for RTL - sliderFrom;
 925                                 currentModelIndex = Math.floor( ( actualX  + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
 926
 927                         // Ensure sane value for currentModelIndex.
 928                         if ( currentModelIndex < 0 ) {
 929                                 currentModelIndex = 0;
 930                         } else if ( currentModelIndex >= this.model.revisions.length ) {
 931                                 currentModelIndex = this.model.revisions.length - 1;
 932                         }
 933
 934                         // Update the tooltip mode
 935                         this.model.set({ hoveredRevision: this.model.revisions.at( currentModelIndex ) });
 936                 },
 937
 938                 mouseLeave: function() {
 939                         this.model.set({ hovering: false });
 940                 },
 941
 942                 mouseEnter: function() {
 943                         this.model.set({ hovering: true });
 944                 },
 945
 946                 applySliderSettings: function() {
 947                         this.$el.slider( _.pick( this.model.toJSON(), 'value', 'values', 'range' ) );
 948                         var handles = this.$('a.ui-slider-handle');
 949
 950                         if ( this.model.get('compareTwoMode') ) {
 951                                 // in RTL mode the 'left handle' is the second in the slider, 'right' is first
 952                                 handles.first()
 953                                         .toggleClass( 'to-handle', !! isRtl )
 954                                         .toggleClass( 'from-handle', ! isRtl );
 955                                 handles.last()
 956                                         .toggleClass( 'from-handle', !! isRtl )
 957                                         .toggleClass( 'to-handle', ! isRtl );
 958                         } else {
 959                                 handles.removeClass('from-handle to-handle');
 960                         }
 961                 },
 962
 963                 start: function( event, ui ) {
 964                         this.model.set({ scrubbing: true });
 965
 966                         // Track the mouse position to enable smooth dragging,
 967                         // overrides default jQuery UI step behavior.
 968                         $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) {
 969                                 var handles,
 970                                         view              = e.data.view,
 971                                         leftDragBoundary  = view.$el.offset().left,
 972                                         sliderOffset      = leftDragBoundary,
 973                                         sliderRightEdge   = leftDragBoundary + view.$el.width(),
 974                                         rightDragBoundary = sliderRightEdge,
 975                                         leftDragReset     = '0',
 976                                         rightDragReset    = '100%',
 977                                         handle            = $( ui.handle );
 978
 979                                 // In two handle mode, ensure handles can't be dragged past each other.
 980                                 // Adjust left/right boundaries and reset points.
 981                                 if ( view.model.get('compareTwoMode') ) {
 982                                         handles = handle.parent().find('.ui-slider-handle');
 983                                         if ( handle.is( handles.first() ) ) { // We're the left handle
 984                                                 rightDragBoundary = handles.last().offset().left;
 985                                                 rightDragReset    = rightDragBoundary - sliderOffset;
 986                                         } else { // We're the right handle
 987                                                 leftDragBoundary = handles.first().offset().left + handles.first().width();
 988                                                 leftDragReset    = leftDragBoundary - sliderOffset;
 989                                         }
 990                                 }
 991
 992                                 // Follow mouse movements, as long as handle remains inside slider.
 993                                 if ( e.pageX < leftDragBoundary ) {
 994                                         handle.css( 'left', leftDragReset ); // Mouse to left of slider.
 995                                 } else if ( e.pageX > rightDragBoundary ) {
 996                                         handle.css( 'left', rightDragReset ); // Mouse to right of slider.
 997                                 } else {
 998                                         handle.css( 'left', e.pageX - sliderOffset ); // Mouse in slider.
 999                                 }
1000                         } );
1001                 },
1002
1003                 getPosition: function( position ) {
1004                         return isRtl ? this.model.revisions.length - position - 1: position;
1005                 },
1006
1007                 // Responds to slide events
1008                 slide: function( event, ui ) {
1009                         var attributes, movedRevision;
1010                         // Compare two revisions mode
1011                         if ( this.model.get('compareTwoMode') ) {
1012                                 // Prevent sliders from occupying same spot
1013                                 if ( ui.values[1] === ui.values[0] ) {
1014                                         return false;
1015                                 }
1016                                 if ( isRtl ) {
1017                                         ui.values.reverse();
1018                                 }
1019                                 attributes = {
1020                                         from: this.model.revisions.at( this.getPosition( ui.values[0] ) ),
1021                                         to: this.model.revisions.at( this.getPosition( ui.values[1] ) )
1022                                 };
1023                         } else {
1024                                 attributes = {
1025                                         to: this.model.revisions.at( this.getPosition( ui.value ) )
1026                                 };
1027                                 // If we're at the first revision, unset 'from'.
1028                                 if ( this.getPosition( ui.value ) > 0 ) {
1029                                         attributes.from = this.model.revisions.at( this.getPosition( ui.value ) - 1 );
1030                                 } else {
1031                                         attributes.from = undefined;
1032                                 }
1033                         }
1034                         movedRevision = this.model.revisions.at( this.getPosition( ui.value ) );
1035
1036                         // If we are scrubbing, a scrub to a revision is considered a hover
1037                         if ( this.model.get('scrubbing') ) {
1038                                 attributes.hoveredRevision = movedRevision;
1039                         }
1040
1041                         this.model.set( attributes );
1042                 },
1043
1044                 stop: function() {
1045                         $( window ).off('mousemove.wp.revisions');
1046                         this.model.updateSliderSettings(); // To snap us back to a tick mark
1047                         this.model.set({ scrubbing: false });
1048                 }
1049         });
1050
1051         // The diff view.
1052         // This is the view for the current active diff.
1053         revisions.view.Diff = wp.Backbone.View.extend({
1054                 className: 'revisions-diff',
1055                 template:  wp.template('revisions-diff'),
1056
1057                 // Generate the options to be passed to the template.
1058                 prepare: function() {
1059                         return _.extend({ fields: this.model.fields.toJSON() }, this.options );
1060                 }
1061         });
1062
1063         // The revisions router.
1064         // Maintains the URL routes so browser URL matches state.
1065         revisions.Router = Backbone.Router.extend({
1066                 initialize: function( options ) {
1067                         this.model = options.model;
1068
1069                         // Maintain state and history when navigating
1070                         this.listenTo( this.model, 'update:diff', _.debounce( this.updateUrl, 250 ) );
1071                         this.listenTo( this.model, 'change:compareTwoMode', this.updateUrl );
1072                 },
1073
1074                 baseUrl: function( url ) {
1075                         return this.model.get('baseUrl') + url;
1076                 },
1077
1078                 updateUrl: function() {
1079                         var from = this.model.has('from') ? this.model.get('from').id : 0,
1080                                 to   = this.model.get('to').id;
1081                         if ( this.model.get('compareTwoMode' ) ) {
1082                                 this.navigate( this.baseUrl( '?from=' + from + '&to=' + to ), { replace: true } );
1083                         } else {
1084                                 this.navigate( this.baseUrl( '?revision=' + to ), { replace: true } );
1085                         }
1086                 },
1087
1088                 handleRoute: function( a, b ) {
1089                         var compareTwo = _.isUndefined( b );
1090
1091                         if ( ! compareTwo ) {
1092                                 b = this.model.revisions.get( a );
1093                                 a = this.model.revisions.prev( b );
1094                                 b = b ? b.id : 0;
1095                                 a = a ? a.id : 0;
1096                         }
1097                 }
1098         });
1099
1100         // Initialize the revisions UI.
1101         revisions.init = function() {
1102                 revisions.view.frame = new revisions.view.Frame({
1103                         model: new revisions.model.FrameState({}, {
1104                                 revisions: new revisions.model.Revisions( revisions.settings.revisionData )
1105                         })
1106                 }).render();
1107         };
1108
1109         $( revisions.init );
1110 }(jQuery));