<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[23898] trunk: Further cleanup of revisions code.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/23898">23898</a></dd>
<dt>Author</dt> <dd>markjaquith</dd>
<dt>Date</dt> <dd>2013-04-04 07:53:49 +0000 (Thu, 04 Apr 2013)</dd>
</dl>

<h3>Log Message</h3>
<pre>Further cleanup of revisions code. Probably not the last.

see <a href="http://core.trac.wordpress.org/ticket/23901">#23901</a>. props adamsilverstein, azaozz, ocean90.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminincludesajaxactionsphp">trunk/wp-admin/includes/ajax-actions.php</a></li>
<li><a href="#trunkwpadminjsrevisionsjs">trunk/wp-admin/js/revisions.js</a></li>
<li><a href="#trunkwpadminrevisionphp">trunk/wp-admin/revision.php</a></li>
<li><a href="#trunkwpincludesrevisionphp">trunk/wp-includes/revision.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminincludesajaxactionsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/ajax-actions.php (23897 => 23898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/ajax-actions.php        2013-04-04 04:28:12 UTC (rev 23897)
+++ trunk/wp-admin/includes/ajax-actions.php        2013-04-04 07:53:49 UTC (rev 23898)
</span><span class="lines">@@ -2092,22 +2092,22 @@
</span><span class="cx"> function wp_ajax_revisions_data() {
</span><span class="cx">         check_ajax_referer( 'revisions-ajax-nonce', 'nonce' );
</span><span class="cx"> 
</span><del>-        $compare_to = isset( $_GET['compare_to'] ) ? absint( $_GET['compare_to'] ) : 0;
-        $show_autosaves = isset( $_GET['show_autosaves'] ) ? $_GET['show_autosaves'] : '';
-        $show_split_view = isset( $_GET['show_split_view'] ) ? $_GET['show_split_view'] : '';
-        $post_id = isset( $_GET['post_id'] ) ? absint( $_GET['post_id'] ) : '';
-        $right_handle_at = isset( $_GET['right_handle_at'] ) ? $_GET['right_handle_at'] : 0;
-        $left_handle_at = isset( $_GET['left_handle_at'] ) ? $_GET['left_handle_at'] : 0;
-        $single_revision_id = isset( $_GET['single_revision_id'] ) ? $_GET['single_revision_id'] : 0;
</del><ins>+        $compare_to = ! empty( $_GET['compare_to'] ) ? absint( $_GET['compare_to'] ) : 0;
+        $show_autosaves = ! empty( $_GET['show_autosaves'] );
+        $show_split_view = ! empty( $_GET['show_split_view'] );
+        $post_id = ! empty( $_GET['post_id'] ) ? absint( $_GET['post_id'] ) : 0;
+        $right_handle_at = ! empty( $_GET['right_handle_at'] ) ? (int) $_GET['right_handle_at'] : 0;
+        $left_handle_at = ! empty( $_GET['left_handle_at'] ) ? (int) $_GET['left_handle_at'] : 0;
+        $single_revision_id = ! empty( $_GET['single_revision_id'] ) ? absint( $_GET['single_revision_id'] ) : 0;
+        $compare_two_mode = (bool) $post_id;
</ins><span class="cx"> 
</span><del>-        $compare_two_mode = ( '' == $post_id ) ? false : true;
</del><span class="cx">         //
</span><span class="cx">         //TODO: currently code returns all possible comparisons for the indicated 'compare_to' revision
</span><span class="cx">         //however, the front end prevents users from pulling the right handle past the left or the left pass the right,
</span><span class="cx">         //so only the possible diffs need be generated
</span><span class="cx">         //
</span><del>-        $alltherevisions = array();
-        if ( '' == $post_id )
</del><ins>+        $all_the_revisions = array();
+        if ( ! $post_id )
</ins><span class="cx">                 $post_id = $compare_to;
</span><span class="cx"> 
</span><span class="cx">         if ( ! current_user_can( 'read_post', $post_id ) )
</span><span class="lines">@@ -2116,33 +2116,26 @@
</span><span class="cx">         if ( ! $revisions = wp_get_post_revisions( $post_id ) )
</span><span class="cx">                 return;
</span><span class="cx"> 
</span><del>-        /* translators: revision date format, see http://php.net/date */
-        $datef = _x( 'j F, Y @ G:i:s', 'revision date format');
-
</del><span class="cx">         $left_revision = get_post( $compare_to );
</span><span class="cx"> 
</span><span class="cx">         //single model fetch mode
</span><span class="cx">         //return the diff of a single revision comparison
</span><del>-        if ( 0 != $single_revision_id ) {
</del><ins>+        if ( $single_revision_id ) {
</ins><span class="cx">                 $right_revision = get_post( $single_revision_id );
</span><span class="cx"> 
</span><del>-        if ( 0 == $compare_to )
</del><ins>+                if ( ! $compare_to )
</ins><span class="cx">                         $left_revision = get_post( $post_id );
</span><span class="cx"> 
</span><del>-        // make sure the right revision is the most recent
-        if ( $compare_two_mode &amp;&amp; $right_revision-&gt;ID &lt; $left_revision-&gt;ID ) {
-                $temp = $left_revision;
-                $left_revision = $right_revision;
-                $right_revision = $temp;
-        }
</del><ins>+                // make sure the right revision is the most recent
+                if ( $compare_two_mode &amp;&amp; $right_revision-&gt;ID &lt; $left_revision-&gt;ID ) {
+                        $temp = $left_revision;
+                        $left_revision = $right_revision;
+                        $right_revision = $temp;
+                }
</ins><span class="cx"> 
</span><del>-                $linesadded=0;
-                $linesdeleted=0;
-
-                //
</del><ins>+                $lines_added = $lines_deleted = 0;
+                $content = '';
</ins><span class="cx">                 //compare from left to right, passed from application
</span><del>-                //
-                $content='';
</del><span class="cx">                 foreach ( array_keys( _wp_post_revision_fields() ) as $field ) {
</span><span class="cx">                         $left_content = apply_filters( &quot;_wp_post_revision_field_$field&quot;, $left_revision-&gt;$field, $field, $left_revision, 'left' );
</span><span class="cx">                         $right_content = apply_filters( &quot;_wp_post_revision_field_$field&quot;, $right_revision-&gt;$field, $field, $right_revision, 'right' );
</span><span class="lines">@@ -2151,31 +2144,30 @@
</span><span class="cx"> 
</span><span class="cx">                         $args = array();
</span><span class="cx"> 
</span><del>-                        if ( ! empty( $show_split_view ) )
</del><ins>+                        if ( $show_split_view )
</ins><span class="cx">                                  $args = array( 'show_split_view' =&gt; true );
</span><span class="cx"> 
</span><span class="cx">                         // compare_to == 0 means first revision, so compare to a blank field to show whats changed
</span><del>-                        $diff = wp_text_diff_with_count( ( 0 == $compare_to) ? '' : $left_content, $right_content, $args );
</del><ins>+                        $diff = wp_text_diff_with_count( ( 0 == $compare_to ) ? '' : $left_content, $right_content, $args );
</ins><span class="cx"> 
</span><span class="cx">                         if ( isset( $diff[ 'html' ] ) )
</span><span class="cx">                                 $content .= $diff[ 'html' ];
</span><span class="cx"> 
</span><del>-                        if ( isset( $diff[ 'linesadded' ] ) )
-                                $linesadded = $linesadded + $diff[ 'linesadded' ];
</del><ins>+                        if ( isset( $diff[ 'lines_added' ] ) )
+                                $lines_added = $lines_added + $diff[ 'lines_added' ];
</ins><span class="cx"> 
</span><del>-                        if ( isset( $diff[ 'linesdeleted' ] ) )
-                                $linesdeleted = $linesdeleted + $diff[ 'linesdeleted' ];
-
-
</del><ins>+                        if ( isset( $diff[ 'lines_deleted' ] ) )
+                                $lines_deleted = $lines_deleted + $diff[ 'lines_deleted' ];
</ins><span class="cx">                 }
</span><span class="cx">                 $content = '' == $content ? __( 'No difference' ) : $content;
</span><span class="cx"> 
</span><del>-                $alltherevisions = array (
-                        'revisiondiff' =&gt; $content,
-                        'lines_deleted' =&gt; $linesdeleted,
-                        'lines_added' =&gt; $linesadded
</del><ins>+                $all_the_revisions = array (
+                        'diff'          =&gt; $content,
+                        'lines_deleted' =&gt; $lines_deleted,
+                        'lines_added'   =&gt; $lines_added
</ins><span class="cx">                 );
</span><del>-                echo json_encode( $alltherevisions );
</del><ins>+
+                echo json_encode( $all_the_revisions );
</ins><span class="cx">                 exit();
</span><span class="cx">         } //end single model fetch
</span><span class="cx"> 
</span><span class="lines">@@ -2186,18 +2178,20 @@
</span><span class="cx"> 
</span><span class="cx">         $previous_revision_id = 0;
</span><span class="cx"> 
</span><ins>+        /* translators: revision date format, see http://php.net/date */
+        $datef = _x( 'j F, Y @ G:i:s', 'revision date format');
+
</ins><span class="cx">         foreach ( $revisions as $revision ) :
</span><del>-                //error_log( ( $show_autosaves  ));
-                if ( empty( $show_autosaves ) &amp;&amp; wp_is_post_autosave( $revision ) )
-                                continue;
</del><ins>+                if ( ! $show_autosaves &amp;&amp; wp_is_post_autosave( $revision ) )
+                        continue;
</ins><span class="cx"> 
</span><span class="cx">                 $revision_from_date_author = '';
</span><span class="cx">                 $count++;
</span><span class="cx">                 // return blank data for diffs to the left of the left handle (for right handel model)
</span><span class="cx">                 // or to the right of the right handle (for left handel model)
</span><del>-                if ( ( 0 != $left_handle_at &amp;&amp; $count &lt;= $left_handle_at ) ||
-                         ( 0 != $right_handle_at &amp;&amp; $count &gt; $right_handle_at )) {
-                        $alltherevisions[] = array (
</del><ins>+                if ( ( 0 != $left_handle_at &amp;&amp; $count &lt; $left_handle_at ) ||
+                         ( 0 != $right_handle_at &amp;&amp; $count &gt; ( $right_handle_at - 2 ) ) ) {
+                        $all_the_revisions[] = array (
</ins><span class="cx">                                 'ID' =&gt; $revision-&gt;ID,
</span><span class="cx">                         );
</span><span class="cx">                         continue;
</span><span class="lines">@@ -2230,11 +2224,11 @@
</span><span class="cx">                         $date
</span><span class="cx">                 );
</span><span class="cx"> 
</span><del>-                $autosavef = __( '%1$s [Autosave]' );
-                $currentf  = __( '%1$s [Current Revision]' );
</del><ins>+                $autosavef = _x( '%1$s [Autosave]', 'post revision title extra' );
+                $currentf  = _x( '%1$s [Current Revision]', 'post revision title extra' );
</ins><span class="cx"> 
</span><del>-                if ( ! $post = get_post( $post_id))
-                        exit();
</del><ins>+                if ( ! $post = get_post( $post_id ) )
+                        continue;
</ins><span class="cx"> 
</span><span class="cx">                 if ( $left_revision-&gt;post_modified === $post-&gt;post_modified )
</span><span class="cx">                         $revision_from_date_author = sprintf( $currentf, $revision_from_date_author );
</span><span class="lines">@@ -2246,7 +2240,8 @@
</span><span class="cx">                 elseif ( wp_is_post_autosave( $revision ) )
</span><span class="cx">                         $revision_date_author = sprintf( $autosavef, $revision_date_author );
</span><span class="cx"> 
</span><del>-                $date_short_format = __( 'j M @ G:i' );
</del><ins>+                /* translators: revision date short format, see http://php.net/date */
+                $date_short_format = _x( 'j M @ G:i', 'revision date short format');
</ins><span class="cx">                 $date_short = date_i18n( $date_short_format, strtotime( $revision-&gt;post_modified ) );
</span><span class="cx"> 
</span><span class="cx">                 $revision_date_author_short = sprintf(
</span><span class="lines">@@ -2256,7 +2251,7 @@
</span><span class="cx">                         $date_short
</span><span class="cx">                 );
</span><span class="cx"> 
</span><del>-                $restoreaction = wp_nonce_url(
</del><ins>+                $restore_link = wp_nonce_url(
</ins><span class="cx">                         add_query_arg(
</span><span class="cx">                                 array( 'revision' =&gt; $revision-&gt;ID,
</span><span class="cx">                                         'action' =&gt; 'restore' ),
</span><span class="lines">@@ -2264,20 +2259,22 @@
</span><span class="cx">                         ),
</span><span class="cx">                         &quot;restore-post_{$revision-&gt;ID}&quot;
</span><span class="cx">                 );
</span><ins>+
</ins><span class="cx">                 // if this is a left handled calculation swap data
</span><span class="cx">                 if ( 0 != $right_handle_at ) {
</span><span class="cx">                         $tmp = $revision_from_date_author;
</span><span class="cx">                         $revision_from_date_author = $revision_date_author;
</span><span class="cx">                         $revision_date_author = $tmp;
</span><span class="cx">                 }
</span><ins>+
</ins><span class="cx">                 if ( ( $compare_two_mode || -1 !== $previous_revision_id ) ) {
</span><del>-                        $alltherevisions[] = array (
-                                'ID' =&gt; $revision-&gt;ID,
-                                'revision_date_author' =&gt; $revision_date_author,
-                                'revision_from_date_author' =&gt; $revision_from_date_author,
-                                'revision_date_author_short' =&gt; $revision_date_author_short,
-                                'restoreaction' =&gt; urldecode( $restoreaction ),
-                                'revision_toload' =&gt; true,
</del><ins>+                        $all_the_revisions[] = array (
+                                'ID'                   =&gt; $revision-&gt;ID,
+                                'titleTo'              =&gt; $revision_date_author,
+                                'titleFrom'            =&gt; $revision_from_date_author,
+                                'titleTooltip'         =&gt; $revision_date_author_short,
+                                'restoreLink'          =&gt; urldecode( $restore_link ),
+                                'revision_toload'      =&gt; true,
</ins><span class="cx">                                 'previous_revision_id' =&gt; $previous_revision_id
</span><span class="cx">                         );
</span><span class="cx">                 }
</span><span class="lines">@@ -2285,6 +2282,6 @@
</span><span class="cx"> 
</span><span class="cx">         endforeach;
</span><span class="cx"> 
</span><del>-        echo json_encode( $alltherevisions );
</del><ins>+        echo json_encode( $all_the_revisions );
</ins><span class="cx">         exit();
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminjsrevisionsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/revisions.js (23897 => 23898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js        2013-04-04 04:28:12 UTC (rev 23897)
+++ trunk/wp-admin/js/revisions.js        2013-04-04 07:53:49 UTC (rev 23898)
</span><span class="lines">@@ -1,772 +1,769 @@
</span><span class="cx"> window.wp = window.wp || {};
</span><span class="cx"> 
</span><span class="cx"> (function($) {
</span><del>-        wp.revisions = {
</del><ins>+        var Revision, Revisions, Diff, l10n, revisions;
</ins><span class="cx"> 
</span><del>-                views: {},
</del><ins>+        revisions = wp.revisions = function() {
+                Diff = revisions.Diff = new Diff();
+        };
</ins><span class="cx"> 
</span><del>-                Model: Backbone.Model.extend({
-                        idAttribute: 'ID',
-                        urlRoot: ajaxurl +        '?action=revisions-data' +
-                                '&amp;show_autosaves=true&amp;show_split_view=true&amp;nonce=' + wpRevisionsSettings.nonce,
-                        defaults: {
-                                ID: 0,
-                                revision_date_author: '',
-                                revision_date_author_short: '',
-                                revisiondiff: '&lt;div class=&quot;diff-loading&quot;&gt;&lt;div class=&quot;spinner&quot;&gt;&lt;/div&gt;&lt;/div&gt;',
-                                restoreaction: '',
-                                revision_from_date_author: '',
-                                revision_toload: false,
-                                lines_added: 0,
-                                lines_deleted: 0,
-                                scope_of_changes: 'none',
-                                previous_revision_id: 0
-                        },
</del><ins>+        _.extend( revisions, { model: {}, view: {}, controller: {} } );
</ins><span class="cx"> 
</span><del>-                        url: function() {
-                                if ( 1 === REVAPP._compareOneOrTwo ) {
-                                        return this.urlRoot +
-                                                '&amp;single_revision_id=' + this.id +
-                                                '&amp;compare_to=' + this.get( 'previous_revision_id' ) +
-                                                '&amp;post_id=' + wpRevisionsSettings.post_id;
-                                } else {
-                                        return this.urlRoot +
-                                '&amp;single_revision_id=' + this.id;
-                                }
</del><ins>+        // Link any localized strings.
+        l10n = revisions.model.l10n = typeof wpRevisionsL10n === 'undefined' ? {} : wpRevisionsL10n;
</ins><span class="cx"> 
</span><del>-                        }
</del><ins>+        // Link any settings.
+        revisions.model.settings = l10n.settings || {};
+        delete l10n.settings;
</ins><span class="cx"> 
</span><del>-                }),
</del><span class="cx"> 
</span><del>-                app: _.extend({}, Backbone.Events),
</del><ins>+        /**
+         * ========================================================================
+         * CONTROLLERS
+         * ========================================================================
+         */
</ins><span class="cx"> 
</span><del>-                App: Backbone.Router.extend({
-                        _revisions: null,
-                        _leftHandleRevisions: null,
-                        _rightHandleRevisions: null,
-                        _revisionsInteractions: null,
-                        _revisionsOptions: null,
-                        _leftDiff: 1,
-                        _rightDiff: 1,
-                        _autosaves: true,
-                        _showSplitView: true,
-                        _compareOneOrTwo: 1,
-                        _leftModelLoading: false,        // keep track of model loads
-                        _rightModelLoading: false,        // disallow slider interaction, also repeat loads, while loading
-                        _tickmarkView: null, // the slider tickmarks
</del><ins>+        /**
+         * wp.revisions.controller.Diff
+         *
+         * Controlls the diff
+         */
+        Diff = revisions.controller.Diff = Backbone.Model.extend( {
+                rightDiff: 1,
+                leftDiff: 1,
+                revisions: null,
+                leftHandleRevisions: null,
+                rightHandleRevisions: null,
+                revisionsInteractions: null,
+                autosaves: true,
+                showSplitView: true,
+                singleRevision: true,
+                leftModelLoading: false,        // keep track of model loads
+                rightModelLoading: false,        // disallow slider interaction, also repeat loads, while loading
+                tickmarkView: null, // the slider tickmarks
+                slider: null, // the slider instance
</ins><span class="cx"> 
</span><del>-                        routes: {
-                        },
</del><ins>+                constructor: function() {
+                        this.slider = new revisions.view.Slider();
+                        if ( null === this.revisions ) {
+                                this.revisions = new Revisions(); // set up collection
+                                this.startRightModelLoading();
</ins><span class="cx"> 
</span><del>-                        reloadToLoadRevisions: function( model_collection, reverse_direction ) {
-                                var self = this,
-                                    revisionsToLoad = model_collection.where( { revision_toload: true } ),
-                                    delay = 0;
-                                // match slider to passed revision_id
-                                _.each( revisionsToLoad, function( theModel ) {
-                                        if ( theModel.get( 'ID' )  == wpRevisionsSettings.revision_id ) {
-                                                self._rightDiff = self._revisions.indexOf( theModel ) + 1;
</del><ins>+                                var self = this;
+                                this.revisions.fetch({ // load revision data
+                                        success: function() {
+                                                self.stopRightModelLoading();
+                                                self.completeApplicationSetup();
</ins><span class="cx">                                         }
</span><del>-
</del><span class="cx">                                 });
</span><del>-                                _.each( revisionsToLoad, function( theModel ) {
-                                                theModel.urlRoot = model_collection.url;
-                                                _.delay( function() {
-                                                        theModel.fetch( {
-                                                                update: true,
-                                                                add: false,
-                                                                remove: false,
-                                                                success: function( model ) {
-                                                                        model.set( 'revision_toload', 'false' );
</del><ins>+                        }
+                },
</ins><span class="cx"> 
</span><del>-                                                                        // stop spinner when all models are loaded
-                                                                        if ( 0 === model_collection.where( { revision_toload: true } ).length )
-                                                                                self.stopModelLoadingSpinner();
</del><ins>+                reloadToLoadRevisions: function( models, reverse_direction ) {
+                        var self = this,
+                                revisionsToLoad = models.where( { revision_toload: true } ),
+                                delay = 0;
</ins><span class="cx"> 
</span><del>-                                                                        self._tickmarkView.render();
</del><ins>+                        // match slider to passed revision_id
+                        _.each( revisionsToLoad, function( revision ) {
+                                if ( revision.get( 'ID' ) == revisions.model.settings.revision_id )
+                                        self.rightDiff = self.revisions.indexOf( revision ) + 1;
+                        });
</ins><span class="cx"> 
</span><del>-                                                                        var total_changes = model.get( 'lines_added' ) + model.get( 'lines_deleted'),
-                                                                            scope_of_changes = 'vsmall';
</del><ins>+                        _.each( revisionsToLoad, function( revision ) {
+                                        _.delay( function() {
+                                                revision.fetch( {
+                                                        update: true,
+                                                        add: false,
+                                                        remove: false,
+                                                        success: function( model ) {
+                                                                model.set( 'revision_toload', 'false' );
</ins><span class="cx"> 
</span><del>-                                                                        // Note: hard coded scope of changes
-                                                                        // TODO change to dynamic based on range of values
-                                                                        if  ( total_changes &gt; 1 &amp;&amp; total_changes &lt;= 3 ) {
-                                                                                scope_of_changes = 'small';
-                                                                        } else if(total_changes &gt; 3 &amp;&amp; total_changes &lt;= 5 ) {
-                                                                                scope_of_changes = 'med';
-                                                                        } else if(total_changes &gt; 5 &amp;&amp; total_changes &lt;= 10 ) {
-                                                                                scope_of_changes = 'large';
-                                                                        } else if(total_changes &gt; 10 ) {
-                                                                                scope_of_changes = 'vlarge';
-                                                                        }
-                                                                        model.set( 'scope_of_changes', scope_of_changes );
-                                                                        if ( 0 !== self._rightDiff &amp;&amp;
-                                                                                model.get( 'ID' ) === self._revisions.at( self._rightDiff - 1 ).get( 'ID' ) ) {
-                                                                                // reload if current model refreshed
-                                                                                self._revisionView.render();
-                                                                        }
</del><ins>+                                                                // stop spinner when all models are loaded
+                                                                if ( 0 === models.where( { revision_toload: true } ).length )
+                                                                        self.stopModelLoadingSpinner();
</ins><span class="cx"> 
</span><del>-                                                                }
-                                                } );
-                                                }, delay ) ;
-                                                delay = delay + 150; // stagger model loads to avoid hammering server with requests
-                                        }
-                                );
-                        },
</del><ins>+                                                                self.tickmarkView.render();
</ins><span class="cx"> 
</span><del>-                        startLeftModelLoading: function() {
-                                this._leftModelLoading = true;
-                                $('.revisiondiffcontainer').addClass('leftmodelloading');
-                        },
</del><ins>+                                                                var total_changes = model.get( 'lines_added' ) + model.get( 'lines_deleted'),
+                                                                        scope_of_changes = 'vsmall';
</ins><span class="cx"> 
</span><del>-                        stopLeftModelLoading: function() {
-                                this._leftModelLoading = false;
-                        },
</del><ins>+                                                                // Note: hard coded scope of changes
+                                                                // TODO change to dynamic based on range of values
+                                                                if  ( total_changes &gt; 1 &amp;&amp; total_changes &lt;= 3 ) {
+                                                                        scope_of_changes = 'small';
+                                                                } else if( total_changes &gt; 3 &amp;&amp; total_changes &lt;= 5 ) {
+                                                                        scope_of_changes = 'med';
+                                                                } else if( total_changes &gt; 5 &amp;&amp; total_changes &lt;= 10 ) {
+                                                                        scope_of_changes = 'large';
+                                                                } else if( total_changes &gt; 10 ) {
+                                                                        scope_of_changes = 'vlarge';
+                                                                }
+                                                                model.set( 'scope_of_changes', scope_of_changes );
+                                                                if ( 0 !== self.rightDiff &amp;&amp;
+                                                                        model.get( 'ID' ) === self.revisions.at( self.rightDiff - 1 ).get( 'ID' ) ) {
+                                                                        // reload if current model refreshed
+                                                                        self.revisionView.render();
+                                                                }
</ins><span class="cx"> 
</span><del>-                        startRightModelLoading: function() {
-                                this._rightModelLoading = true;
-                                $('.revisiondiffcontainer').addClass('rightmodelloading');
-                        },
</del><ins>+                                                        }
+                                        } );
+                                        }, delay ) ;
+                                        delay = delay + 150; // stagger model loads to avoid hammering server with requests
+                                }
+                        );
+                },
</ins><span class="cx"> 
</span><del>-                        stopRightModelLoading: function() {
-                                this._rightModelLoading = false;
-                        },
</del><ins>+                startLeftModelLoading: function() {
+                        this.leftModelLoading = true;
+                        $('.revisiondiffcontainer').addClass('leftmodelloading');
+                },
</ins><span class="cx"> 
</span><del>-                        stopModelLoadingSpinner: function() {
-                                $('.revisiondiffcontainer').removeClass('rightmodelloading');
-                                $('.revisiondiffcontainer').removeClass('leftmodelloading');
-                        },
</del><ins>+                stopLeftModelLoading: function() {
+                        this.leftModelLoading = false;
+                },
</ins><span class="cx"> 
</span><del>-                        reloadModel: function() {
-                                if ( 2 === this._compareOneOrTwo ) {
-                                        this.reloadLeftRight();
-                                } else {
-                                        this.reloadModelSingle();
-                                }
-                        },
</del><ins>+                startRightModelLoading: function() {
+                        this.rightModelLoading = true;
+                        $('.revisiondiffcontainer').addClass('rightmodelloading');
+                },
</ins><span class="cx"> 
</span><del>-                        // load the models for the single handle mode
-                        reloadModelSingle: function() {
-                                var self = this;
-                                self._revisions.url = ajaxurl +        '?action=revisions-data&amp;compare_to=' + wpRevisionsSettings.post_id +
-                                                                                        '&amp;show_autosaves=' + self._autosaves +
-                                                                                        '&amp;show_split_view=' +  self._showSplitView +
-                                                                                        '&amp;nonce=' + wpRevisionsSettings.nonce;
-                                self.startRightModelLoading();
-                                self._revisions.fetch({ // reload revision data
-                                        success: function() {
-                                                console.log('loaded');
-                                                // self.stopRightModelLoading();
-                                                // REVAPP._rightDiff -= 1;
-                                                var revisionCount = self._revisions.length;
-                                                self._revisionView.model = self._revisions;
-                                                self._revisionView.render();
-                                                self.reloadToLoadRevisions( self._revisions );
-                                                self._tickmarkView.model = self._revisions;
-                                                self._tickmarkView.render();
-                                                $( '#slider' ).slider( 'option', 'max', revisionCount - 1 ); // TODO: test this, if autosave option changed
-                                                $( '#slider' ).slider( 'value', self._rightDiff - 1 ).trigger( 'slide' );
</del><ins>+                stopRightModelLoading: function() {
+                        this.rightModelLoading = false;
+                },
</ins><span class="cx"> 
</span><del>-                                        },
</del><ins>+                stopModelLoadingSpinner: function() {
+                        $('.revisiondiffcontainer').removeClass('rightmodelloading');
+                        $('.revisiondiffcontainer').removeClass('leftmodelloading');
+                },
</ins><span class="cx"> 
</span><del>-                                        error: function() {
-                                                self.stopRightModelLoading();
-                                        }
</del><ins>+                reloadModel: function() {
+                        if ( this.singleRevision ) {
+                                this.reloadModelSingle();
+                        } else {
+                                this.reloadLeftRight();
+                        }
+                },
</ins><span class="cx"> 
</span><del>-                                });
-                        },
</del><ins>+                // load the models for the single handle mode
+                reloadModelSingle: function() {
+                        var self = this;
</ins><span class="cx"> 
</span><del>-                        // load the models for the left handle
-                        reloadLeft: function() {
-                                var self = this;
-                                self.startLeftModelLoading();
-                                self._leftHandleRevisions = new wp.revisions.Collection();
</del><ins>+                        // TODO: Only updates the query args yet
+                        self.revisions.reload({
+                                'showAutosaves': self.autosaves,
+                                'showSplitView': self.showSplitView
+                        });
</ins><span class="cx"> 
</span><del>-                                self._leftHandleRevisions.url =
-                                        ajaxurl +
-                                        '?action=revisions-data&amp;compare_to=' + self._revisions.at( self._rightDiff - 1 ).get( 'ID' ) +
-                                        '&amp;post_id=' + wpRevisionsSettings.post_id +
-                                        '&amp;show_autosaves=' + REVAPP._autosaves +
-                                        '&amp;show_split_view=' +  REVAPP._showSplitView +
-                                        '&amp;nonce=' + wpRevisionsSettings.nonce +
-                                        '&amp;right_handle_at='  + ( self._rightDiff );
</del><ins>+                        self.startRightModelLoading();
+                        self.revisions.fetch({ // reload revision data
+                                success: function() {
+                                        var revisionCount = self.revisions.length;
+                                        self.revisionView.model = self.revisions;
+                                        self.revisionView.render();
+                                        self.reloadToLoadRevisions( self.revisions );
+                                        self.tickmarkView.model = self.revisions;
+                                        self.tickmarkView.render();
+                                        self.slider.refresh({
+                                                'max': revisionCount - 1,
+                                                'value': self.rightDiff - 1
+                                        }, true);
+                                },
</ins><span class="cx"> 
</span><del>-                                self._leftHandleRevisions.fetch({
</del><ins>+                                error: function() {
+                                        self.stopRightModelLoading();
+                                }
</ins><span class="cx"> 
</span><del>-                                        success: function(){
-                                                self.stopLeftModelLoading();
-                                                self.reloadToLoadRevisions( self._leftHandleRevisions );
-                                                self._tickmarkView.model = self._leftHandleRevisions;
-                                                $( '#slider' ).slider( 'option', 'max', self._revisions.length );
-                                                // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off
-                                                // the number of models in the collection might get shorter, this ensures right handle is not beyond last model
-                                                if ( self._rightDiff &gt; self._revisions.length )
-                                                        self._rightDiff = self._revisions.length;
-                                                },
</del><ins>+                        });
+                },
</ins><span class="cx"> 
</span><del>-                                        error: function() {
-                                                self.stopLeftModelLoading();
-                                        }
-                                });
-                        },
</del><ins>+                // load the models for the left handle
+                reloadLeft: function() {
+                        var self = this;
+                        self.startLeftModelLoading();
+                        self.leftHandleRevisions = new Revisions( {}, {
+                                'compareTo': self.revisions.at( self.rightDiff - 1 ).get( 'ID' ),
+                                'showAutosaves': self.autosaves,
+                                'showSplitView': self.showSplitView,
+                                'rightHandleAt': self.rightDiff
+                        });
</ins><span class="cx"> 
</span><del>-                        // load the models for the right handle
-                        reloadRight: function() {
-                                var self = this;
-                                self.startRightModelLoading();
-                                self._rightHandleRevisions = new wp.revisions.Collection();
</del><ins>+                        self.leftHandleRevisions.fetch({
+                                success: function(){
+                                        self.stopLeftModelLoading();
+                                        self.reloadToLoadRevisions( self.leftHandleRevisions );
+                                        self.tickmarkView.model = self.leftHandleRevisions;
+                                        self.slider.refresh({
+                                                'max': self.revisions.length
+                                        });
+                                        // ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off
+                                        // the number of models in the collection might get shorter, this ensures right handle is not beyond last model
+                                        if ( self.rightDiff &gt; self.revisions.length )
+                                                self.rightDiff = self.revisions.length;
+                                        },
</ins><span class="cx"> 
</span><del>-                                        self._rightHandleRevisions.url =
-                                                ajaxurl +
-                                                '?action=revisions-data&amp;compare_to=' + ( self._revisions.at( self._leftDiff ).get( 'ID' ) - 1 )+
-                                                '&amp;post_id=' + wpRevisionsSettings.post_id +
-                                                '&amp;show_autosaves=' + REVAPP._autosaves +
-                                                '&amp;show_split_view=' +  REVAPP._showSplitView +
-                                                '&amp;nonce=' + wpRevisionsSettings.nonce;
</del><ins>+                                error: function() {
+                                        self.stopLeftModelLoading();
+                                }
+                        });
+                },
</ins><span class="cx"> 
</span><del>-                                self._rightHandleRevisions.fetch({
</del><ins>+                // load the models for the right handle
+                reloadRight: function() {
+                        var self = this;
+                        self.startRightModelLoading();
+                        self.rightHandleRevisions = new Revisions( {}, {
+                                'compareTo': self.revisions.at( self.leftDiff ).get( 'ID' ) - 1,
+                                'showAutosaves': self.autosaves,
+                                'showSplitView': self.showSplitView,
+                                'leftHandleAt': self.leftDiff
+                        });
</ins><span class="cx"> 
</span><del>-                                        success: function(){
-                                                self.stopRightModelLoading();
-                                                self.reloadToLoadRevisions( self._rightHandleRevisions );
-                                                self._tickmarkView.model = self._rightHandleRevisions;
-                                                $( '#slider' ).slider( 'option', 'max', self._revisions.length );
-                                                $( '#slider' ).slider( 'values', [ REVAPP._leftDiff, REVAPP._rightDiff] ).trigger( 'slide' );
</del><ins>+                        self.rightHandleRevisions.fetch({
+                                success: function(){
+                                        self.stopRightModelLoading();
+                                        self.reloadToLoadRevisions( self.rightHandleRevisions );
+                                        self.tickmarkView.model = self.rightHandleRevisions;
+                                        self.slider.refresh({
+                                                'max': self.revisions.length,
+                                                'values': [ self.leftDiff, self.rightDiff]
+                                        }, true);
+                                },
</ins><span class="cx"> 
</span><del>-                                                // REVAPP._revisionView.render();
</del><ins>+                                error: function( response ) {
+                                        self.stopRightModelLoading();
+                                }
+                        });
</ins><span class="cx"> 
</span><del>-                                        },
</del><ins>+                },
</ins><span class="cx"> 
</span><del>-                                        error: function( response ) {
-                                                self.stopRightModelLoading();
-                                        }
-                                });
</del><ins>+                reloadLeftRight: function() {
+                        this.startRightModelLoading();
+                        this.startLeftModelLoading();
+                        this.reloadLeft();
+                        this.reloadRight();
+                },
</ins><span class="cx"> 
</span><del>-                        },
</del><ins>+                completeApplicationSetup: function() {
+                        this.revisionView = new revisions.view.Diff({
+                                model: this.revisions
+                        });
+                        this.revisionView.render();
</ins><span class="cx"> 
</span><del>-                        reloadLeftRight: function() {
-                                this.startRightModelLoading();
-                                this.startLeftModelLoading();
-                                this.reloadLeft();
-                                this.reloadRight();
-                        },
</del><ins>+                        this.reloadToLoadRevisions( this.revisions );
</ins><span class="cx"> 
</span><del>-                        /*
-                         * initialize the revision application
-                         */
-                        initialize: function( options ) {
-                                var self = this; // store the application instance
-                                if (this._revisions === null) {
-                                        self._revisions = new wp.revisions.Collection(); // set up collection
-                                        self.startRightModelLoading();
-                                        self._revisions.fetch({ // load revision data
</del><ins>+                        this.revisionsInteractions = new revisions.view.Interact({
+                                model: this.revisions
+                        });
+                        this.revisionsInteractions.render();
</ins><span class="cx"> 
</span><del>-                                                success: function() {
-                                                        self.stopRightModelLoading();
-                                                        // self._rightHandleRevisions = self._revisions;
-                                                        self.completeApplicationSetup();
-                                                }
-                                        });
-                                }
-                                return this;
-                        },
</del><ins>+                        this.tickmarkView = new revisions.view.Tickmarks({
+                                model: this.revisions
+                        });
+                        this.tickmarkView.render();
+                        this.tickmarkView.resetTicks();
</ins><span class="cx"> 
</span><del>-                        addTooltip: function( handle, message ) {
</del><ins>+                }
+        });
</ins><span class="cx"> 
</span><del>-                                handle.attr( 'title', '' ).tooltip({
-                                        track: false,
</del><span class="cx"> 
</span><del>-                                        position: {
-                                                my: &quot;left-30 top-66&quot;,
-                                                at: &quot;top left&quot;,
-                                                using: function( position, feedback ) {
-                                                        $( this ).css( position );
-                                                        $( &quot;&lt;div&gt;&quot; )
-                                                        .addClass( &quot;arrow&quot; )
-                                                        .addClass( feedback.vertical )
-                                                        .addClass( feedback.horizontal )
-                                                        .appendTo( $( this ) );
-                                                }
-                                        },
-                                        show: false,
-                                        hide: false,
-                                        content:  function() {
-                                                return message;
-                                        }
</del><ins>+        /**
+         * ========================================================================
+         * VIEWS
+         * ========================================================================
+         */
</ins><span class="cx"> 
</span><del>-                                } );
-                        },
-/**/
</del><ins>+        /**
+         * wp.revisions.view.Slider
+         *
+         * The slider
+         */
+        revisions.view.Slider = Backbone.View.extend({
+                el: $( '#slider' ),
+                singleRevision: true,
</ins><span class="cx"> 
</span><del>-                        completeApplicationSetup: function() {
-                                this._revisionView = new wp.revisions.views.View({
-                                        model: this._revisions
-                                });
-                                this._revisionView.render();
-                                $( '#slider' ).slider( 'option', 'max', this._revisions.length - 1 );
</del><ins>+                initialize: function( options ) {
+                        this.options = _.defaults( options || {}, {
+                                value: 0,
+                                min: 0,
+                                max: 1,
+                                step: 1
+                        });
+                },
</ins><span class="cx"> 
</span><del>-                                this.reloadToLoadRevisions( this._revisions );
</del><ins>+                slide: function( event, ui ) {
+                        if ( this.singleRevision ) {
+                                Diff.rightDiff = ( ui.value + 1 );
+                                Diff.revisionView.render();
+                        } else {
+                                if ( ui.values[0] === ui.values[1] ) // prevent compare to self
+                                        return false;
</ins><span class="cx"> 
</span><del>-                                this._revisionsInteractions = new wp.revisions.views.Interact({
-                                        model: this._revisions
-                                });
-                                this._revisionsInteractions.render();
</del><ins>+                                if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
+                                        // Left handler
+                                        if ( Diff.leftModelLoading ) // left model still loading, prevent sliding left handle
+                                                return false;
</ins><span class="cx"> 
</span><del>-                                this._tickmarkView = new wp.revisions.views.Tickmarks({
-                                        model: this._revisions
-                                });
-                                this._tickmarkView.render();
-                                this._tickmarkView.resetTicks();
</del><ins>+                                        Diff.leftDiff = ui.values[0];
+                                } else {
+                                        // Right handler
+                                        if ( Diff.rightModelLoading ) // right model still loading, prevent sliding right handle
+                                                return false;
</ins><span class="cx"> 
</span><ins>+                                        Diff.rightDiff = ui.values[1];
+                                }
</ins><span class="cx"> 
</span><del>-                                /*
-                                .on( 'mouseup', function( event ) {
-                                        REVAPP._keep_tooltip_open = false;
-                                        $( this ).find('.ui-slider-tooltip').hide();
-                                } ).on( 'mousedown', function( event ) {
-                                        REVAPP._keep_tooltip_open = true;
-                                } ).on( 'mouseout', function( event ) {
-                                        if ( REVAPP._keep_tooltip_open)
-                                                event.stopImmediatePropagation();
-                                        });
-                                */
-                                /*
-                                // Options hidden for now, moving to screen options
-                                this._revisionsOptions = new wp.revisions.views.Options({
-                                        model: this._revisions
-                                });
-                                this._revisionsOptions.render();
-                                */
</del><ins>+                                if ( 0 === Diff.leftDiff ) {
+                                        $( '.revisiondiffcontainer' ).addClass( 'currentversion' );
+                                } else {
+                                        $( '.revisiondiffcontainer' ).removeClass( 'currentversion' );
+                                }
</ins><span class="cx"> 
</span><ins>+                                Diff.revisionView.render();
</ins><span class="cx">                         }
</span><del>-                })
-        };
</del><ins>+                },
</ins><span class="cx"> 
</span><del>-        wp.revisions.Collection = Backbone.Collection.extend({
-                model: wp.revisions.Model,
-                url: ajaxurl +        '?action=revisions-data&amp;compare_to=' + wpRevisionsSettings.post_id +
-                        '&amp;show_autosaves=true&amp;show_split_view=true&amp;nonce=' + wpRevisionsSettings.nonce,
</del><ins>+                start: function( event, ui ) {
+                        // Not needed in one mode
+                        if ( this.singleRevision )
+                                return;
</ins><span class="cx"> 
</span><del>-                initialize: function() {
-                        }
-        } );
</del><ins>+                        if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
+                                // Left handler
+                                if ( Diff.leftModelLoading ) // left model still loading, prevent sliding left handle
+                                        return false;
</ins><span class="cx"> 
</span><del>-        _.extend(wp.revisions.views, {
</del><ins>+                                Diff.revisionView.draggingLeft = true;
</ins><span class="cx"> 
</span><del>-                // Ticks inside slider view
-                Tickmarks: Backbone.View.extend({
-                        el: $('#diff-slider-ticks')[0],
-                        tagName: 'diff-slider-ticks-view',
-                        className: 'diff-slider-ticks-container',
-                        template: wp.template('revision-ticks'),
-                        model: wp.revisions.Model,
</del><ins>+                                if ( Diff.revisionView.model !== Diff.leftHandleRevisions &amp;&amp;
+                                                null !== Diff.leftHandleRevisions ) {
+                                        Diff.revisionView.model = Diff.leftHandleRevisions;
+                                        Diff.tickmarkView.model = Diff.leftHandleRevisions;
+                                        Diff.tickmarkView.render();
+                                }
</ins><span class="cx"> 
</span><del>-                        resetTicks: function() {
-                                var sliderMax = $( '#slider' ).slider( 'option', 'max');
-                                var sliderWidth = $( '#slider' ).width();
-                                var adjustMax = ( 2 === REVAPP._compareOneOrTwo ) ? 1 : 0;
-                                var tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
</del><ins>+                                Diff.leftDiffStart = ui.values[ 0 ];
</ins><span class="cx"> 
</span><del>-                                // TODO: adjust right margins for wider ticks so they stay centered on handle stop point
</del><ins>+                        } else {
+                                // Right handler
+                                if ( Diff.rightModelLoading || 0 === Diff.rightHandleRevisions.length) // right model still loading, prevent sliding right handle
+                                        return false;
</ins><span class="cx"> 
</span><del>-                                // set minimum and maximum widths for tick marks
-                                tickWidth = (tickWidth &gt; 50 ) ? 50 : tickWidth;
-                                tickWidth = (tickWidth &lt; 10 ) ? 10 : tickWidth;
</del><ins>+                                if ( Diff.revisionView.model !== Diff.rightHandleRevisions &amp;&amp;
+                                                null !== Diff.rightHandleRevisions ) {
+                                        Diff.revisionView.model = Diff.rightHandleRevisions;
+                                        Diff.tickmarkView.model = Diff.rightHandleRevisions;
+                                        Diff.tickmarkView.render();
+                                }
</ins><span class="cx"> 
</span><del>-                                sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
</del><ins>+                                Diff.revisionView.draggingLeft = false;
+                                Diff.rightDiffStart = ui.values[1];
+                        }
+                },
</ins><span class="cx"> 
</span><del>-                                $( '#slider' ).width( sliderWidth );
-                                $( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
-                                $( '#diffslider' ).width( sliderWidth );
-                                $( '#diff-slider-ticks' ).width( sliderWidth );
</del><ins>+                stop: function( event, ui ) {
+                        // Not needed in one mode
+                        if ( this.singleRevision )
+                                return;
</ins><span class="cx"> 
</span><del>-                                var aTickWidth = $( '.revision-tick' ).width();
</del><ins>+                        // calculate and generate a diff for comparing to the left handle
+                        // and the right handle, swap out when dragging
+                        if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
+                                // Left hadnler
+                                if ( Diff.leftDiffStart !== ui.values[0] )
+                                        Diff.reloadRight();
+                        } else {
+                                // Right handler
+                                if ( Diff.rightDiffStart !== ui.values[1] )
+                                        Diff.reloadLeft();
+                        }
+                },
</ins><span class="cx"> 
</span><del>-                                if ( tickWidth !==  aTickWidth ) { // is the width already set correctly?
-                                        $( '.revision-tick' ).each( function( ) {
-                                                $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin
-                                        });
</del><ins>+                addTooltip: function( handle, message ) {
</ins><span class="cx"> 
</span><del>-                                        if( 2 === REVAPP._compareOneOrTwo ) {
-                                                $( '.revision-tick' ).first().remove(); // TODO - remove the check
</del><ins>+                        handle.attr( 'title', '' ).tooltip({
+                                track: false,
+
+                                position: {
+                                        my: &quot;left-30 top-66&quot;,
+                                        at: &quot;top left&quot;,
+                                        using: function( position, feedback ) {
+                                                $( this ).css( position );
+                                                $( &quot;&lt;div&gt;&quot; )
+                                                .addClass( &quot;arrow&quot; )
+                                                .addClass( feedback.vertical )
+                                                .addClass( feedback.horizontal )
+                                                .appendTo( $( this ) );
</ins><span class="cx">                                         }
</span><del>-                                        $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
</del><ins>+                                },
+                                show: false,
+                                hide: false,
+                                content:  function() {
+                                        return message;
</ins><span class="cx">                                 }
</span><span class="cx"> 
</span><del>-                        },
</del><ins>+                        } );
+                },
</ins><span class="cx"> 
</span><del>-                        // render the tickmark view
-                        render: function() {
-                                var self = this;
</del><ins>+                width: function() {
+                        return $( '#slider' ).width();
+                },
</ins><span class="cx"> 
</span><del>-                                if ( null !== self.model ) {
-                                        var addHtml = &quot;&quot;;
-                                        _.each ( self.model.models, function( theModel ) {
-                                                addHtml = addHtml + self.template ( theModel.toJSON() );
-                                        });
-                                        self.$el.html( addHtml );
</del><ins>+                setWidth: function( width ) {
+                        return $( '#slider' ).width( width );
+                },
</ins><span class="cx"> 
</span><del>-                                }
-                                self.resetTicks();
-                                return self;
-                        }
-                }),
</del><ins>+                refresh: function( options, slide ) {
+                        $( '#slider' ).slider( 'option', options );
</ins><span class="cx"> 
</span><del>-                // primary revision diff view
-                View: Backbone.View.extend({
-                        el: $('#backbonerevisionsdiff')[0],
-                        tagName: 'revisionvview',
-                        className: 'revisionview-container',
-                        template: wp.template('revision'),
-                        comparetwochecked: '',
-                        draggingLeft: false,
</del><ins>+                        // Triggers the slide event
+                        if ( slide )
+                                $( '#slider' ).trigger( 'slide' );
+                },
</ins><span class="cx"> 
</span><del>-                        // render the revisions
-                        render: function() {
-                                var addHtml = '';
-                                var thediff;
-                                // compare two revisions mode?
</del><ins>+                option: function( key ) {
+                        return $( '#slider' ).slider( 'option', key );
+                },
</ins><span class="cx"> 
</span><del>-                                if ( 2 === REVAPP._compareOneOrTwo ) {
</del><ins>+                render: function() {
+                        var self = this;
+                        // this.$el doesn't work, why?
+                        $( '#slider' ).slider( {
+                                slide: $.proxy( self.slide, self ),
+                                start: $.proxy( self.start, self ),
+                                stop: $.proxy( self.stop, self )
+                        } );
</ins><span class="cx"> 
</span><del>-                                        this.comparetwochecked = 'checked';
-                                        if ( this.draggingLeft ) {
-                                                thediff = REVAPP._leftDiff -1;
-                                                if ( this.model.at( thediff ) ) {
-                                                        addHtml = this.template( _.extend(
-                                                                this.model.at( thediff ).toJSON(),
-                                                                { comparetwochecked: this.comparetwochecked } // keep the checkmark checked
-                                                        ) );
-                                                }
-                                        } else { // dragging right handle
-                                                thediff = REVAPP._rightDiff -1;
-                                                if ( this.model.at( thediff ) ) {
-                                                        addHtml = this.template( _.extend(
-                                                                this.model.at( thediff ).toJSON(),
-                                                                { comparetwochecked: this.comparetwochecked } // keep the checkmark checked
-                                                        ) );
-                                                }
-                                        }
-                                } else { // end compare two revisions mode, eg only one slider handle
-                                        this.comparetwochecked = '';
-                                        if ( this.model.at( REVAPP._rightDiff - 1 ) ) {
-                                                addHtml = this.template( _.extend(
-                                                        this.model.at( REVAPP._rightDiff - 1 ).toJSON(),
-                                                        { comparetwochecked: this.comparetwochecked } // keep the checkmark unchecked
-                                                ) );
-                                        }
-                                }
-                                this.$el.html( addHtml );
-                                if ( this.model.length &lt; 3 ) {
-                                        $( 'div#comparetworevisions' ).hide(); // don't allow compare two if fewer than three revisions
-                                }
-                                if ( this.model.length &lt; 2 ) {
-                                        $( 'div#diffslider' ).hide(); // don't allow compare two if fewer than three revisions
-                                        $( 'div.diff-slider-ticks-wrapper' ).hide();
-                                }
</del><ins>+                        // Set options
+                        this.refresh( this.options );
+                }
+        });
</ins><span class="cx"> 
</span><del>-                                // add tooltips to the handles
-                                if ( 2 === REVAPP._compareOneOrTwo ) {
-                                        REVAPP.addTooltip ( $( 'a.ui-slider-handle.left-handle' ),
-                                                ( REVAPP._leftDiff &lt; 0 ) ? '' : REVAPP._revisions.at( REVAPP._leftDiff - 1 ).get( 'revision_date_author_short' ) );
-                                        REVAPP.addTooltip ( $( 'a.ui-slider-handle.right-handle' ),
-                                                ( REVAPP._rightDiff &gt; REVAPP._revisions.length ) ? '' : REVAPP._revisions.at( REVAPP._rightDiff - 1 ).get( 'revision_date_author_short' ) );
-                                } else {
-                                        REVAPP.addTooltip ( $( 'a.ui-slider-handle' ),
-                                                ( REVAPP._rightDiff &gt; REVAPP._revisions.length ) ? '' : REVAPP._revisions.at( REVAPP._rightDiff - 1 ).get( 'revision_date_author_short' ) );
-                                }
</del><ins>+        /**
+         * wp.revisions.view.Tickmarks
+         *
+         * The slider tickmarks.
+         */
+        revisions.view.Tickmarks = Backbone.View.extend({
+                el: $('#diff-slider-ticks'),
+                template: wp.template('revision-ticks'),
+                model: Revision,
</ins><span class="cx"> 
</span><del>-                                // hide the restore button when on the last sport/current post data
-                                if (  REVAPP._rightDiff === REVAPP._revisions.length ){
-                                        $( '.restore-button' ).hide();
-                                } else {
-                                        $( '.restore-button' ).show();
-                                }
</del><ins>+                resetTicks: function() {
+                        var sliderMax = Diff.slider.option( 'max' );
+                        var sliderWidth = Diff.slider.width();
+                        var adjustMax = Diff.singleRevision ? 0 : 1;
+                        var tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
</ins><span class="cx"> 
</span><del>-                                return this;
-                        },
</del><ins>+                        // TODO: adjust right margins for wider ticks so they stay centered on handle stop point
</ins><span class="cx"> 
</span><del>-                        // the compare two button is in this view, add the interaction here
-                        events: {
-                                'click #comparetwo': 'clickcomparetwo'
-                        },
</del><ins>+                        // set minimum and maximum widths for tick marks
+                        tickWidth = (tickWidth &gt; 50 ) ? 50 : tickWidth;
+                        tickWidth = (tickWidth &lt; 10 ) ? 10 : tickWidth;
</ins><span class="cx"> 
</span><del>-                        // turn on/off the compare two mmode
-                        clickcomparetwo: function(){
-                                self = this;
</del><ins>+                        sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
</ins><span class="cx"> 
</span><del>-                                if ( $( 'input#comparetwo' ).is( ':checked' ) ) { // compare 2 mode
-                                        REVAPP._compareOneOrTwo = 2 ;
</del><ins>+                        Diff.slider.setWidth( sliderWidth );
+                        $( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
+                        $( '#diffslider' ).width( sliderWidth );
+                        $( '#diff-slider-ticks' ).width( sliderWidth );
</ins><span class="cx"> 
</span><del>-                                        if ( 1 === REVAPP._rightDiff )
-                                                REVAPP._rightDiff = 2;
-                                                REVAPP._revisionView.draggingLeft = false;
</del><ins>+                        var aTickWidth = $( '.revision-tick' ).width();
</ins><span class="cx"> 
</span><del>-                                                wpRevisionsSettings.revision_id = ''; // reset passed revision id so switching back to one handle mode doesn't re-select revision
-                                                REVAPP.reloadLeftRight();
-                                                REVAPP._revisionView.model = REVAPP._rightHandleRevisions;
</del><ins>+                        if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
+                                $( '.revision-tick' ).each( function( ) {
+                                        $(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin
+                                });
</ins><span class="cx"> 
</span><del>-                                        } else { // compare one mode
-                                                REVAPP._compareOneOrTwo = 1 ;
-                                                REVAPP._revisionView.draggingLeft = false;
-                                                // REVAPP._leftDiff = 0;
-                                                // REVAPP._rightDiff = (REVAPP._revisions.length &lt;= REVAPP._rightDiff ) ? REVAPP._rightDiff + 1 : REVAPP._rightDiff + 1;
-                                                REVAPP.reloadModelSingle();
-                                        }
-                                        // REVAPP._revisionView.render();
-                                        REVAPP._revisionsInteractions.render();
-                                        REVAPP._tickmarkView.render();
-
</del><ins>+                                if( ! Diff.singleRevision ) {
+                                        $( '.revision-tick' ).first().remove(); // TODO - remove the check
+                                }
+                                $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
</ins><span class="cx">                         }
</span><del>-                }),
</del><span class="cx"> 
</span><del>-                // options view for show autosaves and show split view options
-                /* DISABLED for now
-                Options: Backbone.View.extend({
-                        el: $('#backbonerevisionsoptions')[0],
-                        tagName: 'revisionoptionsview',
-                        className: 'revisionoptions-container',
-                        template: wp.template('revisionoptions'),
</del><ins>+                },
</ins><span class="cx"> 
</span><del>-                        // render the options view
-                        render: function() {
-                                var addHtml = this.template;
-                                this.$el.html( addHtml );
-                                return this;
-                        },
</del><ins>+                // render the tickmark view
+                render: function() {
+                        var self = this;
</ins><span class="cx"> 
</span><del>-                        // add options interactions
-                        events: {
-                                'click #toggleshowautosaves': 'toggleshowautosaves',
-                                'click #showsplitview': 'showsplitview'
-                        },
</del><ins>+                        if ( null !== self.model ) {
+                                var addHtml = &quot;&quot;;
+                                _.each ( self.model.models, function( theModel ) {
+                                        addHtml = addHtml + self.template ( theModel.toJSON() );
+                                });
+                                self.$el.html( addHtml );
</ins><span class="cx"> 
</span><del>-                        // toggle include autosaves
-                        toggleshowautosaves: function() {
-                                var self = this;
-                                if ( $( '#toggleshowautosaves' ).is( ':checked' ) ) {
-                                        REVAPP._autosaves = true ;
-                                } else {
-                                        REVAPP._autosaves = false ;
-                                }
</del><ins>+                        }
+                        self.resetTicks();
+                        return self;
+                }
+        });
</ins><span class="cx"> 
</span><del>-                                // refresh the model data
-                                REVAPP.reloadModel();
-                        },
</del><ins>+        /**
+         * wp.revisions.view.Interact
+         *
+         * Next/Prev buttons and the slider
+         */
+        // TODO: Change Interact to something else.
+        revisions.view.Interact = Backbone.View.extend({
+                el: $('#backbonerevisionsinteract'),
+                template: wp.template('revision-interact'),
</ins><span class="cx"> 
</span><del>-                        // toggle showing the split diff view
-                        showsplitview:  function() {
-                                var self = this;
</del><ins>+                // next and previous buttons, only available in compare one mode
+                events: {
+                        'click #next':     'nextRevision',
+                        'click #previous': 'previousRevision'
+                },
</ins><span class="cx"> 
</span><del>-                                if ( $( 'input#showsplitview' ).is( ':checked' ) ) {
-                                        REVAPP._showSplitView = 'true';
-                                        $('.revisiondiffcontainer').addClass('diffsplit');
-                                } else {
-                                        REVAPP._showSplitView = '';
-                                        $('.revisiondiffcontainer').removeClass('diffsplit');
-                                }
</del><ins>+                render: function() {
+                        var self = this;
</ins><span class="cx"> 
</span><del>-                                REVAPP.reloadModel();
-                        }
-                }),
-                */
-                // main interactions view
-                Interact: Backbone.View.extend({
-                        el: $('#backbonerevisionsinteract')[0],
-                        tagName: 'revisionvinteract',
-                        className: 'revisionvinteract-container',
-                        template: wp.template('revisionvinteract'),
</del><ins>+                        var addHtml = this.template;
+                        this.$el.html( addHtml );
</ins><span class="cx"> 
</span><del>-                        initialize: function() {
-                        },
</del><ins>+                        var modelcount = Diff.revisions.length;
</ins><span class="cx"> 
</span><del>-                        render: function() {
-                                var self = this;
</del><ins>+                        Diff.slider.singleRevision = Diff.singleRevision;
+                        Diff.slider.render();
</ins><span class="cx"> 
</span><del>-                                var addHtml = this.template;
-                                this.$el.html( addHtml );
</del><ins>+                        if ( Diff.singleRevision ) {
+                                Diff.slider.refresh({
+                                        value: Diff.rightDiff - 1,
+                                        min: 0,
+                                        max: modelcount - 1
+                                });
</ins><span class="cx"> 
</span><del>-                                var modelcount = REVAPP._revisions.length;
</del><ins>+                                $( '.revisiondiffcontainer' ).removeClass( 'comparetwo' );
</ins><span class="cx"> 
</span><del>-                                slider = $( &quot;#slider&quot; );
-                                if ( 1 === REVAPP._compareOneOrTwo ) {
-                                        // set up the slider with a single handle
-                                        slider.slider({
-                                                value: REVAPP._rightDiff - 1,
-                                                min: 0,
-                                                max: modelcount - 1,
-                                                step: 1,
</del><ins>+                        } else {
+                                Diff.slider.refresh({
+                                        values: [ Diff.leftDiff, Diff.rightDiff + 1 ],
+                                        min: 1,
+                                        max: modelcount + 1,
+                                        range: true
+                                });
</ins><span class="cx"> 
</span><ins>+                                $( '.revisiondiffcontainer' ).addClass( 'comparetwo' );
+                                $( '#diffslider a.ui-slider-handle' ).first().addClass( 'left-handle' );
+                                $( '#diffslider a.ui-slider-handle' ).last().addClass( 'right-handle' );
</ins><span class="cx"> 
</span><del>-                                                // slide interactions for one handles slider
-                                                slide: function( event, ui ) {
</del><ins>+                        }
</ins><span class="cx"> 
</span><del>-                                                        REVAPP._rightDiff = ( ui.value + 1 );
-                                                        REVAPP._revisionView.render();
-                                                        /*
-                                                        $( 'a.ui-slider-handle' ).tooltip( {
-                                                                content: REVAPP._revisions.at( ui.value ).get( 'revision_date_author_short' ),
-                                                                position: {
-                                                                my: &quot;top-65&quot;,
-                                                                using: function( position, feedback ) {
-                                                                        $( this ).css( position );
-                                                                        $( &quot;&lt;div&gt;&quot; )
-                                                                        .addClass( &quot;arrow&quot; )
-                                                                        .addClass( feedback.vertical )
-                                                                        .addClass( feedback.horizontal )
-                                                                        .appendTo( this );
-                                                                        }
-                                                                }
-                                                        });// .trigger( 'close' ).trigger( 'open' );
-*/
-                                                        }
-                                        });
-                                        $( '.revisiondiffcontainer' ).removeClass( 'comparetwo' );
</del><ins>+                        return this;
+                },
</ins><span class="cx"> 
</span><del>-                                } else { // comparing more than one, eg 2
-                                        // set up the slider with two handles
-                                        slider.slider({
-                                                values: [ REVAPP._leftDiff, REVAPP._rightDiff + 1 ],
-                                                min: 1,
-                                                max: modelcount + 1,
-                                                step: 1,
-                                                range: true,
</del><ins>+                // go to the next revision
+                nextRevision: function() {
+                        if ( Diff.rightDiff &lt; this.model.length ) // unless at right boundry
+                                Diff.rightDiff = Diff.rightDiff + 1 ;
</ins><span class="cx"> 
</span><del>-                                                // in two handled mode when user starts dragging, swap in precalculated diff for handle
-                                                start: function(event, ui ) {
-                                                        var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
-                                                        switch ( index ) {
-                                                                case 1: // left handle drag
-                                                                        if ( REVAPP._leftModelLoading ) // left model still loading, prevent sliding left handle
-                                                                                return false;
</del><ins>+                        Diff.revisionView.render();
</ins><span class="cx"> 
</span><del>-                                                                        REVAPP._revisionView.draggingLeft = true;
</del><ins>+                        Diff.slider.refresh({
+                                value: Diff.rightDiff - 1
+                        }, true );
+                },
</ins><span class="cx"> 
</span><del>-                                                                        if ( REVAPP._revisionView.model !== REVAPP._leftHandleRevisions &amp;&amp;
-                                                                                        null !== REVAPP._leftHandleRevisions ) {
-                                                                                REVAPP._revisionView.model = REVAPP._leftHandleRevisions;
-                                                                                REVAPP._tickmarkView.model = REVAPP._leftHandleRevisions;
-                                                                                REVAPP._tickmarkView.render();
-                                                                        }
</del><ins>+                // go the the previous revision
+                previousRevision: function() {
+                        if ( Diff.rightDiff &gt; 1 ) // unless at left boundry
+                                Diff.rightDiff = Diff.rightDiff - 1 ;
</ins><span class="cx"> 
</span><del>-                                                                        REVAPP._leftDiffStart = ui.values[ 0 ];
-                                                                        break;
</del><ins>+                        Diff.revisionView.render();
</ins><span class="cx"> 
</span><del>-                                                                case 2: // right
-                                                                        if ( REVAPP._rightModelLoading || 0 === REVAPP._rightHandleRevisions.length) // right model still loading, prevent sliding right handle
-                                                                                return false;
</del><ins>+                        Diff.slider.refresh({
+                                value: Diff.rightDiff - 1
+                        }, true );
+                }
+        });
</ins><span class="cx"> 
</span><del>-                                                                        if ( REVAPP._revisionView.model !== REVAPP._rightHandleRevisions &amp;&amp;
-                                                                                        null !== REVAPP._rightHandleRevisions ) {
-                                                                                REVAPP._revisionView.model = REVAPP._rightHandleRevisions;
-                                                                                REVAPP._tickmarkView.model = REVAPP._rightHandleRevisions;
-                                                                                REVAPP._tickmarkView.render();
-                                                                        }
</del><ins>+        /**
+         * wp.revisions.view.Diff
+         *
+         * Next/Prev buttons and the slider
+         */
+        revisions.view.Diff = Backbone.View.extend({
+                el: $('#backbonerevisionsdiff'),
+                template: wp.template('revision'),
+                draggingLeft: false,
</ins><span class="cx"> 
</span><del>-                                                                        REVAPP._revisionView.draggingLeft = false;
-                                                                        REVAPP._rightDiffStart = ui.values[1];
-                                                                        break;
-                                                        }
-                                                },
</del><ins>+                // the compare two button is in this view, add the interaction here
+                events: {
+                        'click #comparetwo': 'compareTwo',
+                        'click #restore':    'restore'
+                },
</ins><span class="cx"> 
</span><del>-                                                // when sliding in two handled mode change appropriate value
-                                                slide: function( event, ui ) {
-                                                        if ( ui.values[0] === ui.values[1] ) // prevent compare to self
-                                                                return false;
</del><ins>+                // render the revisions
+                render: function() {
+                        var addHtml = '';
+                        var thediff;
</ins><span class="cx"> 
</span><del>-                                                        var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
</del><ins>+                        // compare two revisions mode?
+                        if ( ! Diff.singleRevision ) {
+                                if ( this.draggingLeft ) {
+                                        thediff = Diff.leftDiff - 1;
+                                        if ( this.model.at( thediff ) ) {
+                                                addHtml = this.template( this.model.at( thediff ).toJSON() );
+                                        }
+                                } else { // dragging right handle
+                                        thediff = Diff.rightDiff -1;
+                                        if ( this.model.at( thediff ) ) {
+                                                addHtml = this.template( this.model.at( thediff ).toJSON() );
+                                        }
+                                }
+                        } else { // end compare two revisions mode, eg only one slider handle
+                                this.comparetwochecked = '';
+                                if ( this.model.at( Diff.rightDiff - 1 ) ) {
+                                        addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() );
+                                }
+                        }
+                        this.$el.html( addHtml );
</ins><span class="cx"> 
</span><del>-                                                        switch ( index ) {
-                                                                case 1: // left
-                                                                        if ( REVAPP._leftModelLoading ) // left model still loading, prevent sliding left handle
-                                                                                return false;
</del><ins>+                        if ( this.model.length &lt; 2 ) {
+                                $( '#diffslider' ).hide(); // don't allow compare two if fewer than three revisions
+                                $( '.diff-slider-ticks-wrapper' ).hide();
+                        }
</ins><span class="cx"> 
</span><del>-                                                                        REVAPP._leftDiff = ui.values[0];
-                                                                        break;
</del><ins>+                        // add tooltips to the handles
+                        if ( ! Diff.singleRevision ) {
+                                Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ),
+                                        ( Diff.leftDiff &lt; 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) );
+                                Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ),
+                                        ( Diff.rightDiff &gt; Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
+                        } else {
+                                Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ),
+                                        ( Diff.rightDiff &gt; Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
+                        }
</ins><span class="cx"> 
</span><del>-                                                                case 2: // right
-                                                                        if ( REVAPP._rightModelLoading ) // right model still loading, prevent sliding right handle
-                                                                                return false;
</del><ins>+                        this.toogleCompareTwoCheckbox();
</ins><span class="cx"> 
</span><del>-                                                                        REVAPP._rightDiff = ui.values[1];
-                                                                        break;
-                                                        }
</del><ins>+                        // hide the restore button when on the last sport/current post data
+                        if ( Diff.rightDiff === Diff.revisions.length ){
+                                $( '#restore' ).hide();
+                        } else {
+                                $( '#restore' ).show();
+                        }
</ins><span class="cx"> 
</span><del>-                                                        if ( 0 === REVAPP._leftDiff ) {
-                                                                $( '.revisiondiffcontainer' ).addClass( 'currentversion' );
</del><ins>+                        return this;
+                },
</ins><span class="cx"> 
</span><del>-                                                        } else {
-                                                                $( '.revisiondiffcontainer' ).removeClass( 'currentversion' );
-                                                        }
</del><ins>+                toogleCompareTwoCheckbox: function() {
+                        // don't allow compare two if fewer than three revisions
+                        if ( this.model.length &lt; 3 )
+                                $( '#comparetworevisions' ).hide();
</ins><span class="cx"> 
</span><del>-                                                        REVAPP._revisionView.render();
</del><ins>+                        $( '#comparetwo' ).prop( 'checked', ! Diff.singleRevision );
+                },
</ins><span class="cx"> 
</span><del>-                                                },
</del><ins>+                // turn on/off the compare two mode
+                compareTwo: function() {
+                        if ( $( 'input#comparetwo' ).is( ':checked' ) ) { // compare 2 mode
+                                Diff.singleRevision = false ;
</ins><span class="cx"> 
</span><del>-                                                // when the user stops sliding  in 2 handle mode, recalculate diffs
-                                                stop: function( event, ui ) {
-                                                        if ( 2 === REVAPP._compareOneOrTwo ) {
-                                                                // calculate and generate a diff for comparing to the left handle
-                                                                // and the right handle, swap out when dragging
</del><ins>+                                if ( 1 === Diff.rightDiff )
+                                        Diff.rightDiff = 2;
</ins><span class="cx"> 
</span><del>-                                                                var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
</del><ins>+                                Diff.revisionView.draggingLeft = false;
</ins><span class="cx"> 
</span><del>-                                                                switch ( index ) {
-                                                                        case 1: // left
</del><ins>+                                revisions.model.settings.revision_id = ''; // reset passed revision id so switching back to one handle mode doesn't re-select revision
+                                Diff.reloadLeftRight();
+                                Diff.revisionView.model = Diff.rightHandleRevisions;
</ins><span class="cx"> 
</span><del>-                                                                                // left handle dragged &amp; changed, reload right handle model
-                                                                                if ( REVAPP._leftDiffStart !== ui.values[0] )
-                                                                                        REVAPP.reloadRight();
</del><ins>+                        } else { // compare one mode
+                                Diff.singleRevision = true;
+                                Diff.revisionView.draggingLeft = false;
+                                Diff.reloadModelSingle();
+                        }
+                        Diff.revisionsInteractions.render();
+                        Diff.tickmarkView.render();
+                },
</ins><span class="cx"> 
</span><del>-                                                                                break;
</del><ins>+                restore: function() {
+                        document.location = $( '#restore' ).data( 'restoreLink' );
+                }
+        });
</ins><span class="cx"> 
</span><del>-                                                                        case 2: // right
-                                                                                // REVAPP._rightDiff =  ( 1 &gt;= REVAPP._rightDiff ) ? 1 : REVAPP._rightDiff - 1;
-                                                                                // right handle dragged &amp; changed, reload left handle model if changed
-                                                                                if ( REVAPP._rightDiffStart !== ui.values[1] )
-                                                                                        REVAPP.reloadLeft();
</del><span class="cx"> 
</span><del>-                                                                                break;
-                                                                }
-                                                        }
-                                                }
-                                        });
-                                        $( '.revisiondiffcontainer' ).addClass( 'comparetwo' );
-                                        $( '#diffslider a.ui-slider-handle' ).first().addClass( 'left-handle' ).next().addClass( 'right-handle' );
-                                }
</del><ins>+        /**
+         * ========================================================================
+         * MODELS
+         * ========================================================================
+         */
</ins><span class="cx"> 
</span><del>-                                return this;
-                        },
</del><ins>+        /**
+         * wp.revisions.Revision
+         */
+        Revision = revisions.model.Revision = Backbone.Model.extend({
+                idAttribute: 'ID',
+                urlRoot: ajaxurl +        '?action=revisions-data' +
+                        '&amp;show_autosaves=true&amp;show_split_view=true&amp;nonce=' + revisions.model.settings.nonce,
+                defaults: {
+                        ID: 0,
+                        titleTo: '',
+                        titleTooltip: '',
+                        titleFrom: '',
+                        diff: '&lt;div class=&quot;diff-loading&quot;&gt;&lt;div class=&quot;spinner&quot;&gt;&lt;/div&gt;&lt;/div&gt;',
+                        restoreLink: '',
+                        revision_toload: false,
+                        lines_added: 0,
+                        lines_deleted: 0,
+                        scope_of_changes: 'none',
+                        previous_revision_id: 0
+                },
</ins><span class="cx"> 
</span><del>-                        // next and previous buttons, only available in compare one mode
-                        events: {
-                                'click #next': 'nextRevision',
-                                'click #previous': 'previousRevision'
-                        },
</del><ins>+                url: function() {
+                        if ( Diff.singleRevision ) {
+                                return this.urlRoot +
+                                        '&amp;single_revision_id=' + this.id +
+                                        '&amp;compare_to=' + this.get( 'previous_revision_id' ) +
+                                        '&amp;post_id=' + revisions.model.settings.post_id;
+                        } else {
+                                return this.collection.url() + '&amp;single_revision_id=' + this.id;
+                        }
</ins><span class="cx"> 
</span><del>-                        // go to the next revision
-                        nextRevision: function() {
-                                if ( REVAPP._rightDiff &lt; this.model.length ) // unless at right boundry
-                                        REVAPP._rightDiff = REVAPP._rightDiff + 1 ;
</del><ins>+                }
+        });
</ins><span class="cx"> 
</span><del>-                                REVAPP._revisionView.render();
</del><ins>+        /**
+         * wp.revisions.Revisions
+         */
+        Revisions = revisions.Revisions = Backbone.Collection.extend({
+                model: Revision,
+                urlRoot: ajaxurl + '?action=revisions-data',
</ins><span class="cx"> 
</span><del>-                                $( '#slider' ).slider( 'value', REVAPP._rightDiff - 1 ).trigger( 'slide' );
-                        },
</del><ins>+                initialize: function( models, options ) {
+                        this.options = _.defaults( options || {}, {
+                                'compareTo': revisions.model.settings.post_id,
+                                'post_id': revisions.model.settings.post_id,
+                                'showAutosaves': true,
+                                'showSplitView': true,
+                                'rightHandleAt': 0,
+                                'leftHandleAt': 0,
+                                'nonce': revisions.model.settings.nonce
+                        });
+                },
</ins><span class="cx"> 
</span><del>-                        // go the the previous revision
-                        previousRevision: function() {
-                                if ( REVAPP._rightDiff &gt; 1 ) // unless at left boundry
-                                        REVAPP._rightDiff = REVAPP._rightDiff - 1 ;
</del><ins>+                url: function() {
+                        return this.urlRoot +
+                                '&amp;compare_to=' + this.options.compareTo +
+                                '&amp;post_id=' + this.options.post_id +
+                                '&amp;show_autosaves=' + this.options.showAutosaves +
+                                '&amp;show_split_view=' + this.options.showSplitView +
+                                '&amp;right_handle_at=' + this.options.rightHandleAt +
+                                '&amp;left_handle_at=' + this.options.leftHandleAt +
+                                '&amp;nonce=' + this.options.nonce;
+                },
</ins><span class="cx"> 
</span><del>-                                REVAPP._revisionView.render();
</del><ins>+                reload: function( options ) {
+                        this.options = _.defaults( options || {}, this.options );
</ins><span class="cx"> 
</span><del>-                                $( '#slider' ).slider( 'value', REVAPP._rightDiff - 1 ).trigger( 'slide' );
-                        }
-                })
-        });
</del><ins>+                        // TODO
+                        //this.fetch();
+                }
</ins><span class="cx"> 
</span><del>-        // instantiate Revision Application
-        REVAPP = new wp.revisions.App();
</del><ins>+        } );
</ins><span class="cx"> 
</span><ins>+        $( wp.revisions );
+
</ins><span class="cx"> }(jQuery));
</span></span></pre></div>
<a id="trunkwpadminrevisionphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/revision.php (23897 => 23898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/revision.php        2013-04-04 04:28:12 UTC (rev 23897)
+++ trunk/wp-admin/revision.php        2013-04-04 07:53:49 UTC (rev 23898)
</span><span class="lines">@@ -79,13 +79,21 @@
</span><span class="cx"> 
</span><span class="cx"> require_once( './admin-header.php' );
</span><span class="cx"> 
</span><del>-//TODO - Some of the translations below split things into multiple strings that are contextually related and this makes it pretty impossible for RTL translation.
-//TODO can we pass the context in a better way
-$wpRevisionsSettings = array( 'post_id' =&gt; $post-&gt;ID,
-                                                'nonce' =&gt; wp_create_nonce( 'revisions-ajax-nonce' ),
-                                                'revision_id' =&gt; $revision_id );
-wp_localize_script( 'revisions', 'wpRevisionsSettings', $wpRevisionsSettings );
</del><ins>+$strings = array(
+        'diffFromTitle' =&gt; _x( 'From: %s', 'revision from title'  ),
+        'diffToTitle'   =&gt; _x( 'To: %s', 'revision to title' )
+);
</ins><span class="cx"> 
</span><ins>+$settings = array(
+        'post_id'     =&gt; $post-&gt;ID,
+        'nonce'       =&gt; wp_create_nonce( 'revisions-ajax-nonce' ),
+        'revision_id' =&gt; $revision_id
+);
+
+$strings['settings'] = $settings;
+
+wp_localize_script( 'revisions', 'wpRevisionsL10n', $strings );
+
</ins><span class="cx"> $comparetworevisionslink = get_edit_post_link( $revision-&gt;ID );
</span><span class="cx"> ?&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -112,36 +120,39 @@
</span><span class="cx"> &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx"> &lt;script id=&quot;tmpl-revision&quot; type=&quot;text/html&quot;&gt;
</span><ins>+        &lt;div id=&quot;comparetworevisions&quot;&gt;
+                &lt;label&gt;
+                        &lt;input type=&quot;checkbox&quot; id=&quot;comparetwo&quot; /&gt;
+                        &lt;?php esc_attr_e( 'Compare two revisions' ); ?&gt;
+                &lt;/label&gt;
+        &lt;/div&gt;
+
</ins><span class="cx">         &lt;div id=&quot;diffsubheader&quot; class=&quot;diff-left-hand-meta-row&quot;&gt;
</span><span class="cx">                 &lt;div id=&quot;diff_from_current_revision&quot;&gt;
</span><span class="cx">                         &lt;?php printf( '&lt;b&gt;%1$s&lt;/b&gt; %2$s.' , __( 'From:' ), __( 'the current version' ) ); ?&gt;
</span><span class="cx">                 &lt;/div&gt;
</span><span class="cx">                 &lt;div id=&quot;difftitlefrom&quot;&gt;
</span><del>-                        &lt;div class=&quot;diff-from-title&quot;&gt;&lt;?php _e( 'From:' ); ?&gt;&lt;/div&gt;{{{ data.revision_from_date_author }}}
</del><ins>+                        &lt;div class=&quot;diff-from-title&quot;&gt;&lt;?php _e( 'From:' ); ?&gt;&lt;/div&gt;{{{ data.titleFrom }}}
</ins><span class="cx">                 &lt;/div&gt;
</span><span class="cx">         &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx">         &lt;div id=&quot;diffsubheader&quot;&gt;
</span><span class="cx">                 &lt;div id=&quot;difftitle&quot;&gt;
</span><del>-                        &lt;div class=&quot;diff-to-title&quot;&gt;&lt;?php _e( 'To:' ); ?&gt;&lt;/div&gt;{{{ data.revision_date_author }}}
</del><ins>+                        &lt;div class=&quot;diff-to-title&quot;&gt;&lt;?php _e( 'To:' ); ?&gt;&lt;/div&gt;{{{ data.titleTo }}}
</ins><span class="cx">                 &lt;/div&gt;
</span><span class="cx">                 &lt;div id=&quot;diffrestore&quot;&gt;
</span><del>-                        &lt;input class=&quot;button button-primary restore-button&quot; onClick=&quot;document.location='{{{ data.restoreaction }}}'&quot; type=&quot;submit&quot; id=&quot;restore&quot; value=&quot;&lt;?php esc_attr_e( 'Restore This Revision' )?&gt;&quot; /&gt;
</del><ins>+                        &lt;input class=&quot;button button-primary&quot; data-restore-link=&quot;{{{ data.restoreLink }}}&quot; type=&quot;button&quot; id=&quot;restore&quot; value=&quot;&lt;?php esc_attr_e( 'Restore This Revision' )?&gt;&quot; /&gt;
</ins><span class="cx">                 &lt;/div&gt;
</span><del>-                &lt;div id=&quot;comparetworevisions&quot;&gt;
-                        &lt;input type=&quot;checkbox&quot; id=&quot;comparetwo&quot; value=&quot;comparetwo&quot; {{{ data.comparetwochecked }}} name=&quot;comparetwo&quot;/&gt;
-                                &lt;label for=&quot;comparetwo&quot;&gt;&lt;?php esc_attr_e( 'Compare two revisions' ); ?&gt;&lt;/a&gt;&lt;/label&gt;
-                &lt;/div&gt;
</del><span class="cx">         &lt;/div&gt;
</span><span class="cx"> 
</span><span class="cx">         &lt;div id=&quot;removedandadded&quot;&gt;
</span><span class="cx">                 &lt;div id=&quot;removed&quot;&gt;&lt;?php _e( 'Removed -' ); ?&gt;&lt;/div&gt;
</span><span class="cx">                 &lt;div id=&quot;added&quot;&gt;&lt;?php _e( 'Added +' ); ?&gt;&lt;/div&gt;
</span><span class="cx">         &lt;/div
</span><del>-        &lt;div&gt;{{{ data.revisiondiff }}}&lt;/div&gt;
</del><ins>+        &lt;div&gt;{{{ data.diff }}}&lt;/div&gt;
</ins><span class="cx"> &lt;/script&gt;
</span><span class="cx"> 
</span><del>-&lt;script id=&quot;tmpl-revisionvinteract&quot; type=&quot;text/html&quot;&gt;
</del><ins>+&lt;script id=&quot;tmpl-revision-interact&quot; type=&quot;text/html&quot;&gt;
</ins><span class="cx">         &lt;div id=&quot;diffheader&quot;&gt;
</span><span class="cx">                 &lt;div id=&quot;diffprevious&quot;&gt;&lt;input class=&quot;button&quot; type=&quot;submit&quot; id=&quot;previous&quot; value=&quot;&lt;?php esc_attr_e( 'Previous' ); ?&gt;&quot; /&gt;
</span><span class="cx">                 &lt;/div&gt;
</span><span class="lines">@@ -153,22 +164,10 @@
</span><span class="cx">                 &lt;/div&gt;
</span><span class="cx">         &lt;/div&gt;
</span><span class="cx"> &lt;/script&gt;
</span><ins>+
</ins><span class="cx"> &lt;script id=&quot;tmpl-revision-ticks&quot; type=&quot;text/html&quot;&gt;
</span><span class="cx">         &lt;div class=&quot;revision-tick revision-toload{{{ data.revision_toload }}} revision-scopeofchanges-{{{ data.scope_of_changes }}}&quot;&gt;
</span><span class="cx">         &lt;/div&gt;
</span><span class="cx"> &lt;/script&gt;
</span><span class="cx"> &lt;?php
</span><del>-/*
-TODO Convert these into screen options
-&lt;script id=&quot;tmpl-revisionoptions&quot; type=&quot;text/html&quot;&gt;
-        &lt;div id=&quot;revisionoptions&quot;&gt;
-                &lt;div id=&quot;showsplitviewoption&quot;&gt;
-                        &lt;input type='checkbox' id=&quot;show_split_view&quot; checked=&quot;checked&quot; value=&quot;1&quot; /&gt; &lt;?php _e( 'Show split diff view' ); ?&gt;
-                &lt;/div&gt;
-                &lt;div id=&quot;toggleshowautosavesoption&quot;&gt;
-                        &lt;input type='checkbox' id=&quot;toggleshowautosaves&quot; value=&quot;1&quot; /&gt; &lt;?php _e( 'Show autosaves' ); ?&gt;
-                &lt;/div&gt;
-        &lt;/div&gt;
-&lt;/script&gt;
-*/
-require_once( './admin-footer.php' );
</del><span class="cx">\ No newline at end of file
</span><ins>+require_once( './admin-footer.php' );
</ins></span></pre></div>
<a id="trunkwpincludesrevisionphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/revision.php (23897 => 23898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/revision.php        2013-04-04 04:28:12 UTC (rev 23897)
+++ trunk/wp-includes/revision.php        2013-04-04 07:53:49 UTC (rev 23898)
</span><span class="lines">@@ -675,7 +675,7 @@
</span><span class="cx">         $defaults = array( 'title' =&gt; '', 'title_left' =&gt; '', 'title_right' =&gt; '' );
</span><span class="cx">         $args = wp_parse_args( $args, $defaults );
</span><span class="cx"> 
</span><del>-        if ( !class_exists( 'WP_Text_Diff_Renderer_Table' ) )
</del><ins>+        if ( ! class_exists( 'WP_Text_Diff_Renderer_Table' ) )
</ins><span class="cx">                         require( ABSPATH . WPINC . '/wp-diff.php' );
</span><span class="cx"> 
</span><span class="cx">         $left_string  = normalize_whitespace( $left_string );
</span><span class="lines">@@ -685,8 +685,8 @@
</span><span class="cx">         $right_lines = explode( &quot;\n&quot;, $right_string) ;
</span><span class="cx"> 
</span><span class="cx">         $text_diff = new Text_Diff($left_lines, $right_lines  );
</span><del>-        $linesadded = $text_diff-&gt;countAddedLines();
-        $linesdeleted = $text_diff-&gt;countDeletedLines();
</del><ins>+        $lines_added = $text_diff-&gt;countAddedLines();
+        $lines_deleted = $text_diff-&gt;countDeletedLines();
</ins><span class="cx"> 
</span><span class="cx">         $renderer  = new WP_Text_Diff_Renderer_Table();
</span><span class="cx">         $diff = $renderer-&gt;render( $text_diff );
</span><span class="lines">@@ -718,5 +718,5 @@
</span><span class="cx">         $r .= &quot;&lt;tbody&gt;\n$diff\n&lt;/tbody&gt;\n&quot;;
</span><span class="cx">         $r .= &quot;&lt;/table&gt;&quot;;
</span><span class="cx"> 
</span><del>-        return array( 'html' =&gt; $r, 'linesadded' =&gt; $linesadded, 'linesdeleted' =&gt; $linesdeleted );
</del><ins>+        return array( 'html' =&gt; $r, 'lines_added' =&gt; $lines_added, 'lines_deleted' =&gt; $lines_deleted );
</ins><span class="cx"> }
</span></span></pre>
</div>
</div>

</body>
</html>