← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-admin/js/revisions.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
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));