<!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>[24205] trunk/wp-admin: Revisions UI: RTL support.</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 { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { 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/24205">24205</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2013-05-08 21:22:01 +0000 (Wed, 08 May 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Revisions UI: RTL support. (And inline docs.)
props DrewAPicture, adamsilverstein. fixes <a href="http://core.trac.wordpress.org/ticket/23897">#23897</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsswpadminrtlcss">trunk/wp-admin/css/wp-admin-rtl.css</a></li>
<li><a href="#trunkwpadmincsswpadmincss">trunk/wp-admin/css/wp-admin.css</a></li>
<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>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsswpadminrtlcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin-rtl.css (24204 => 24205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin-rtl.css 2013-05-08 20:54:30 UTC (rev 24204)
+++ trunk/wp-admin/css/wp-admin-rtl.css 2013-05-08 21:22:01 UTC (rev 24205)
</span><span class="lines">@@ -955,10 +955,60 @@
</span><span class="cx"> 11.2 - Post Revisions
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><span class="cx">
</span><del>-table.diff td, table.diff th {
- font-family: Consolas, Monaco, monospace;
</del><ins>+#toggle-revision-compare-mode {
+ right: auto;
+ left: 0;
+ padding: 9px 0 0 9px;
+
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+
+#diff-next-revision {
+ float: left;
+}
+
+#diff-previous-revision {
+ float: right;
+}
+
+.diff-title {
+ float: right;
+}
+
+.diff-title strong {
+ text-align: left;
+ float: right;
+ margin-right: 0;
+ margin-left: 5px;
+}
+
+#restore-revision {
+ margin-left: 0;
+ margin-right: 10px;
+}
+
+.diff-col-title-added,
+.diff-col-title-removed {
+ text-align: right;
+ float: right;
+}
+
+.diff-col-title-added {
+ float: left;
+}
+
+.ui-tooltip-content img {
+ float: right;
+ margin-right: 0;
+ margin-left: 5px;
+}
+
+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
+ margin-left: 0;
+ margin-right: -78px;
+}
+
</ins><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 11.3 - Featured Images
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span></span></pre></div>
<a id="trunkwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.css (24204 => 24205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css 2013-05-08 20:54:30 UTC (rev 24204)
+++ trunk/wp-admin/css/wp-admin.css 2013-05-08 21:22:01 UTC (rev 24205)
</span><span class="lines">@@ -3761,8 +3761,7 @@
</span><span class="cx">
</span><span class="cx"> .diff-loading .spinner {
</span><span class="cx"> clear: both;
</span><del>- margin-left: auto;
- margin-right: auto;
</del><ins>+ margin: 0 auto;
</ins><span class="cx"> display: block;
</span><span class="cx"> float: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminincludesajaxactionsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/ajax-actions.php (24204 => 24205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/ajax-actions.php 2013-05-08 20:54:30 UTC (rev 24204)
+++ trunk/wp-admin/includes/ajax-actions.php 2013-05-08 21:22:01 UTC (rev 24205)
</span><span class="lines">@@ -2119,11 +2119,6 @@
</span><span class="cx"> $single_revision_id = ! empty( $_GET['single_revision_id'] ) ? absint( $_GET['single_revision_id'] ) : 0;
</span><span class="cx"> $compare_two_mode = (bool) $post_id;
</span><span class="cx">
</span><del>- //
- //TODO: currently code returns all possible comparisons for the indicated 'compare_to' revision
- //however, the front end prevents users from pulling the right handle past the left or the left pass the right,
- //so only the possible diffs need be generated
- //
</del><span class="cx"> $all_the_revisions = array();
</span><span class="cx"> if ( ! $post_id )
</span><span class="cx"> $post_id = $compare_to;
</span><span class="lines">@@ -2136,8 +2131,8 @@
</span><span class="cx">
</span><span class="cx"> $left_revision = get_post( $compare_to );
</span><span class="cx">
</span><del>- //single model fetch mode
- //return the diff of a single revision comparison
</del><ins>+ // single model fetch mode
+ // return the diff of a single revision comparison
</ins><span class="cx"> if ( $single_revision_id ) {
</span><span class="cx"> $right_revision = get_post( $single_revision_id );
</span><span class="cx">
</span><span class="lines">@@ -2153,7 +2148,7 @@
</span><span class="cx">
</span><span class="cx"> $lines_added = $lines_deleted = 0;
</span><span class="cx"> $content = '';
</span><del>- //compare from left to right, passed from application
</del><ins>+ // compare from left to right, passed from application
</ins><span class="cx"> foreach ( _wp_post_revision_fields() as $field => $field_value ) {
</span><span class="cx"> $left_content = apply_filters( "_wp_post_revision_field_$field", $left_revision->$field, $field, $left_revision, 'left' );
</span><span class="cx"> $right_content = apply_filters( "_wp_post_revision_field_$field", $right_revision->$field, $field, $right_revision, 'right' );
</span><span class="lines">@@ -2182,18 +2177,18 @@
</span><span class="cx"> $content = '' == $content ? __( 'No difference' ) : $content;
</span><span class="cx">
</span><span class="cx"> $all_the_revisions = array (
</span><del>- 'diff' => $content,
</del><ins>+ 'diff' => $content,
</ins><span class="cx"> 'linesDeleted' => $lines_deleted,
</span><span class="cx"> 'linesAdded' => $lines_added
</span><span class="cx"> );
</span><span class="cx">
</span><span class="cx"> echo json_encode( $all_the_revisions );
</span><span class="cx"> exit();
</span><del>- } //end single model fetch
</del><ins>+ } // end single model fetch
</ins><span class="cx">
</span><span class="cx"> $count = -1;
</span><span class="cx">
</span><del>- //reverse the list to start with oldes revision
</del><ins>+ // reverse the list to start with oldest revision
</ins><span class="cx"> $revisions = array_reverse( $revisions );
</span><span class="cx">
</span><span class="cx"> $previous_revision_id = 0;
</span><span class="lines">@@ -2208,14 +2203,28 @@
</span><span class="cx"> $revision_from_date_author = '';
</span><span class="cx"> $is_current_revision = false;
</span><span class="cx"> $count++;
</span><del>- // return blank data for diffs to the left of the left handle (for right handel model)
- // or to the right of the right handle (for left handel model)
- if ( ( 0 != $left_handle_at && $count < $left_handle_at ) ||
- ( 0 != $right_handle_at && $count > ( $right_handle_at - 2 ) ) ) {
- $all_the_revisions[] = array (
- 'ID' => $revision->ID,
- );
- continue;
</del><ins>+
+ /**
+ * return blank data for diffs to the left of the left handle (for right handel model)
+ * or to the right of the right handle (for left handel model)
+ * and visa versa in RTL mode
+ */
+ if( ! is_rtl() ) {
+ if ( ( ( 0 != $left_handle_at && $count < $left_handle_at ) ||
+ ( 0 != $right_handle_at && $count > ( $right_handle_at - 2 ) ) ) ) {
+ $all_the_revisions[] = array (
+ 'ID' => $revision->ID,
+ );
+ continue;
+ }
+ } else { // is_rtl
+ if ( ( 0 != $left_handle_at && $count > ( $left_handle_at - 1 ) ||
+ ( 0 != $left_handle_at && $count < $right_handle_at ) ) ) {
+ $all_the_revisions[] = array (
+ 'ID' => $revision->ID,
+ );
+ continue;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( $compare_two_mode ) {
</span><span class="lines">@@ -2307,6 +2316,10 @@
</span><span class="cx">
</span><span class="cx"> endforeach;
</span><span class="cx">
</span><ins>+ // in RTL + single handle mode, reverse the revision direction
+ if ( is_rtl() && $compare_two_mode )
+ $all_the_revisions = array_reverse( $all_the_revisions );
+
</ins><span class="cx"> echo json_encode( $all_the_revisions );
</span><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 (24204 => 24205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js 2013-05-08 20:54:30 UTC (rev 24204)
+++ trunk/wp-admin/js/revisions.js 2013-05-08 21:22:01 UTC (rev 24205)
</span><span class="lines">@@ -161,8 +161,8 @@
</span><span class="cx"> self.tickmarkView.model = self.revisions;
</span><span class="cx"> self.tickmarkView.render();
</span><span class="cx"> self.slider.refresh({
</span><del>- 'max': revisionCount - 1,
- 'value': self.rightDiff - 1
</del><ins>+ 'max': revisionCount - 1, // slider starts at 0 in single handle mode
+ 'value': self.rightDiff - 1 // slider starts at 0 in single handle mode
</ins><span class="cx"> }, true);
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -172,12 +172,12 @@
</span><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // load the models for the left handle
</del><ins>+ // load the models for the left handle (the right handler has moved)
</ins><span class="cx"> reloadLeft: function() {
</span><span class="cx"> var self = this;
</span><span class="cx"> self.startLeftModelLoading();
</span><span class="cx"> self.leftHandleRevisions = new Revisions( {}, {
</span><del>- 'compareTo': self.revisions.at( self.rightDiff - 1 ).get( 'ID' ),
</del><ins>+ 'compareTo': self.revisions.at( self.rightDiff - 1 ).get( 'ID' ), // diff and model count off by 1
</ins><span class="cx"> 'showAutosaves': self.autosaves,
</span><span class="cx"> 'showSplitView': self.showSplitView,
</span><span class="cx"> 'rightHandleAt': self.rightDiff
</span><span class="lines">@@ -202,12 +202,12 @@
</span><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // load the models for the right handle
</del><ins>+ // load the models for the right handle (the left handle has moved)
</ins><span class="cx"> reloadRight: function() {
</span><span class="cx"> var self = this;
</span><span class="cx"> self.startRightModelLoading();
</span><span class="cx"> self.rightHandleRevisions = new Revisions( {}, {
</span><del>- 'compareTo': self.revisions.at( self.leftDiff - 1 ).get( 'ID' ),
</del><ins>+ 'compareTo': self.revisions.at( self.leftDiff - 1 ).get( 'ID' ), // diff and model count off by 1
</ins><span class="cx"> 'showAutosaves': self.autosaves,
</span><span class="cx"> 'showSplitView': self.showSplitView,
</span><span class="cx"> 'leftHandleAt': self.leftDiff
</span><span class="lines">@@ -219,8 +219,7 @@
</span><span class="cx"> self.loadDiffs( self.rightHandleRevisions );
</span><span class="cx"> self.tickmarkView.model = self.rightHandleRevisions;
</span><span class="cx"> self.slider.refresh({
</span><del>- 'max': self.revisions.length,
- 'values': [ self.leftDiff, self.rightDiff]
</del><ins>+ 'max': self.revisions.length
</ins><span class="cx"> }, true);
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -231,6 +230,9 @@
</span><span class="cx">
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * reloadLeftRight reload models for both the left and right handles
+ */
</ins><span class="cx"> reloadLeftRight: function() {
</span><span class="cx"> this.startRightModelLoading();
</span><span class="cx"> this.startLeftModelLoading();
</span><span class="lines">@@ -240,8 +242,8 @@
</span><span class="cx">
</span><span class="cx"> disabledButtonCheck: function( val ) {
</span><span class="cx"> var maxVal = this.revisions.length - 1,
</span><del>- next = $( '#next' ),
- prev = $( '#previous' );
</del><ins>+ next = ! isRtl ? $( '#next' ) : $( '#previous' ),
+ prev = ! isRtl ? $( '#previous' ) : $( '#next' );
</ins><span class="cx">
</span><span class="cx"> // Disable "Next" button if you're on the last node
</span><span class="cx"> if ( maxVal === val )
</span><span class="lines">@@ -256,23 +258,26 @@
</span><span class="cx"> prev.prop( 'disabled', false );
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * completeApplicationSetup finishes loading all views once the initial model load is complete
+ */
</ins><span class="cx"> completeApplicationSetup: function() {
</span><span class="cx"> this.revisionView = new revisions.view.Diff({
</span><span class="cx"> model: this.revisions
</span><span class="cx"> });
</span><del>- this.revisionView.render();
</del><ins>+ this.revisionView.render(); // render the revision view
</ins><span class="cx">
</span><del>- this.loadDiffs( this.revisions );
</del><ins>+ this.loadDiffs( this.revisions ); // get the actual revisions data
</ins><span class="cx">
</span><span class="cx"> this.revisionsInteractions = new revisions.view.Interact({
</span><span class="cx"> model: this.revisions
</span><span class="cx"> });
</span><del>- this.revisionsInteractions.render();
</del><ins>+ this.revisionsInteractions.render(); // render the interaction view
</ins><span class="cx">
</span><span class="cx"> this.tickmarkView = new revisions.view.Tickmarks({
</span><span class="cx"> model: this.revisions
</span><span class="cx"> });
</span><del>- this.tickmarkView.render();
</del><ins>+ this.tickmarkView.render(); // render the tickmark view
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -301,6 +306,11 @@
</span><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * respond to slider slide events
+ * Note: in one handle mode, jQuery UI reports leftmost position as 0
+ * in two handle mode, jQuery UI Slider reports leftmost position as 1
+ */
</ins><span class="cx"> slide: function( event, ui ) {
</span><span class="cx"> if ( this.singleRevision ) {
</span><span class="cx"> Diff.rightDiff = ( ui.value + 1 );
</span><span class="lines">@@ -315,19 +325,24 @@
</span><span class="cx"> if ( Diff.leftModelLoading ) // left model still loading, prevent sliding left handle
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- Diff.leftDiff = ui.values[0];
</del><ins>+ Diff.leftDiff = isRtl ? ui.values[1] : ui.values[0]; // handles are reversed in RTL mode
</ins><span class="cx"> } else {
</span><span class="cx"> // Right handler
</span><span class="cx"> if ( Diff.rightModelLoading ) // right model still loading, prevent sliding right handle
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- Diff.rightDiff = ui.values[1];
</del><ins>+ Diff.rightDiff = isRtl ? ui.values[0] : ui.values[1]; // handles are reversed in RTL mode
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> Diff.revisionView.render();
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * responds to slider start sliding events
+ * in two handle mode stores start position, so if unchanged at stop event no need to reload diffs
+ * also swaps in the appropriate models - left handled or right handled
+ */
</ins><span class="cx"> start: function( event, ui ) {
</span><span class="cx"> // Not needed in one mode
</span><span class="cx"> if ( this.singleRevision )
</span><span class="lines">@@ -342,12 +357,12 @@
</span><span class="cx">
</span><span class="cx"> if ( Diff.revisionView.model !== Diff.leftHandleRevisions &&
</span><span class="cx"> null !== Diff.leftHandleRevisions ) {
</span><del>- Diff.revisionView.model = Diff.leftHandleRevisions;
</del><ins>+ Diff.revisionView.model = Diff.leftHandleRevisions; // use the left handle models
</ins><span class="cx"> Diff.tickmarkView.model = Diff.leftHandleRevisions;
</span><span class="cx"> Diff.tickmarkView.render();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- Diff.leftDiffStart = ui.values[ 0 ];
</del><ins>+ Diff.leftDiffStart = isRtl ? ui.values[1] : ui.values[0]; // in RTL mode the 'left handle' is the second in the slider, 'right' is first
</ins><span class="cx">
</span><span class="cx"> } else {
</span><span class="cx"> // Right handler
</span><span class="lines">@@ -356,16 +371,21 @@
</span><span class="cx">
</span><span class="cx"> if ( Diff.revisionView.model !== Diff.rightHandleRevisions &&
</span><span class="cx"> null !== Diff.rightHandleRevisions ) {
</span><del>- Diff.revisionView.model = Diff.rightHandleRevisions;
</del><ins>+ Diff.revisionView.model = Diff.rightHandleRevisions; // use the right handle models
</ins><span class="cx"> Diff.tickmarkView.model = Diff.rightHandleRevisions;
</span><span class="cx"> Diff.tickmarkView.render();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> Diff.revisionView.draggingLeft = false;
</span><del>- Diff.rightDiffStart = ui.values[1];
</del><ins>+ Diff.rightDiffStart = isRtl ? ui.values[0] : ui.values[1]; // in RTL mode the 'left handle' is the second in the slider, 'right' is first
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * responds to slider stop events
+ * in two handled mode, if the handle that stopped has moved, reload the diffs for the other handle
+ * the other handle compares to this handle's position, so if it changes they need to be recalculated
+ */
</ins><span class="cx"> stop: function( event, ui ) {
</span><span class="cx"> // Not needed in one mode
</span><span class="cx"> if ( this.singleRevision )
</span><span class="lines">@@ -374,12 +394,12 @@
</span><span class="cx"> // calculate and generate a diff for comparing to the left handle
</span><span class="cx"> // and the right handle, swap out when dragging
</span><span class="cx"> if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
</span><del>- // Left hadnler
- if ( Diff.leftDiffStart !== ui.values[0] )
</del><ins>+ // Left handler
+ if ( Diff.leftDiffStart !== isRtl ? ui.values[1] : ui.values[0] ) // in RTL mode the 'left handle' is the second in the slider, 'right' is first
</ins><span class="cx"> Diff.reloadRight();
</span><span class="cx"> } else {
</span><span class="cx"> // Right handler
</span><del>- if ( Diff.rightDiffStart !== ui.values[1] )
</del><ins>+ if ( Diff.rightDiffStart !== isRtl ? ui.values[0] : ui.values[1] ) // in RTL mode the 'left handle' is the second in the slider, 'right' is first
</ins><span class="cx"> Diff.reloadLeft();
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="lines">@@ -416,7 +436,7 @@
</span><span class="cx"> $( '#diff-slider' ).slider( {
</span><span class="cx"> slide: $.proxy( self.slide, self ),
</span><span class="cx"> start: $.proxy( self.start, self ),
</span><del>- stop: $.proxy( self.stop, self )
</del><ins>+ stop: $.proxy( self.stop, self )
</ins><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> // Set options
</span><span class="lines">@@ -442,7 +462,7 @@
</span><span class="cx"> tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
</span><span class="cx"> tickWidth = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks
</span><span class="cx"> tickWidth = ( tickWidth < 10 ) ? 10 : tickWidth;
</span><del>- sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width
</del><ins>+ sliderWidth = tickWidth * ( sliderMax - adjustMax ); // calculate the slider width
</ins><span class="cx"> aTickWidth = $( '.revision-tick' ).width();
</span><span class="cx">
</span><span class="cx"> if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
</span><span class="lines">@@ -485,24 +505,33 @@
</span><span class="cx"> * move the slider handle when the tick marks are clicked
</span><span class="cx"> */
</span><span class="cx"> $( this ).on( 'click',
</span><del>- { tickCount: tickCount }, // //pass the tick through so we know where to move the handle
</del><ins>+ { tickCount: tickCount }, // pass the tick through so we know where to move the handle
</ins><span class="cx"> function( event ) {
</span><del>- if ( Diff.slider.singleRevision ) { //single handle mode
- Diff.rightDiff = event.data.tickCount; //reposition the right handle
</del><ins>+ if ( Diff.slider.singleRevision ) { // single handle mode
+ Diff.rightDiff = event.data.tickCount; // reposition the right handle
</ins><span class="cx"> Diff.slider.refresh({
</span><span class="cx"> value: Diff.rightDiff - 1
</span><span class="cx"> } );
</span><span class="cx"> } else { //compare two mode
</span><del>- if ( event.data.tickCount < Diff.leftDiff ||
- isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side
- Diff.leftDiff = event.data.tickCount; // set the left handle location
- Diff.reloadRight(); //reload the right handle comparison models
- } else { //middle or 'right' clicks
- Diff.rightDiff = event.data.tickCount; // set the right handle location
- Diff.reloadLeft(); //reload left handle models
</del><ins>+ if ( isRtl ) {
+ if ( event.data.tickCount < Diff.leftDiff ) { // click was on the 'left' side
+ Diff.rightDiff = event.data.tickCount; // set the 'right' handle location
+ Diff.reloadLeft(); // reload the left handle comparison models
+ } else { // middle or 'right' clicks
+ Diff.leftDiff = event.data.tickCount; // set the 'left' handle location
+ Diff.reloadRight(); // reload right handle models
+ }
+ } else {
+ if ( event.data.tickCount < Diff.leftDiff ) { // click was on the 'left' side
+ Diff.leftDiff = event.data.tickCount; // set the left handle location
+ Diff.reloadRight(); // reload the right handle comparison models
+ } else { // middle or 'right' clicks
+ Diff.rightDiff = event.data.tickCount; // set the right handle location
+ Diff.reloadLeft(); // reload left handle models
+ }
</ins><span class="cx"> }
</span><span class="cx"> Diff.slider.refresh( { // set the slider handle positions
</span><del>- values: [ Diff.leftDiff, Diff.rightDiff ]
</del><ins>+ values: [ isRtl ? Diff.rightDiff : Diff.leftDiff, isRtl ? Diff.leftDiff : Diff.rightDiff ]
</ins><span class="cx"> } );
</span><span class="cx"> }
</span><span class="cx"> Diff.revisionView.render(); // render the main view
</span><span class="lines">@@ -539,8 +568,8 @@
</span><span class="cx">
</span><span class="cx"> // next and previous buttons, only available in compare one mode
</span><span class="cx"> events: {
</span><del>- 'click #next': 'nextRevision',
- 'click #previous': 'previousRevision'
</del><ins>+ 'click #next': ! isRtl ? 'nextRevision' : 'previousRevision',
+ 'click #previous': ! isRtl ? 'previousRevision' : 'nextRevision'
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><span class="lines">@@ -554,7 +583,7 @@
</span><span class="cx">
</span><span class="cx"> if ( Diff.singleRevision ) {
</span><span class="cx"> Diff.slider.refresh({
</span><del>- value: Diff.rightDiff - 1,
</del><ins>+ value: Diff.rightDiff - 1, // rightDiff value is off model index by 1
</ins><span class="cx"> min: 0,
</span><span class="cx"> max: modelcount - 1
</span><span class="cx"> });
</span><span class="lines">@@ -563,15 +592,17 @@
</span><span class="cx">
</span><span class="cx"> } else {
</span><span class="cx"> Diff.slider.refresh({
</span><del>- values: [ Diff.leftDiff, Diff.rightDiff + 1 ],
</del><ins>+ // in RTL mode the 'left handle' is the second in the slider, 'right' is first
+ values: [ isRtl ? Diff.rightDiff : Diff.leftDiff, isRtl ? Diff.leftDiff : Diff.rightDiff ],
</ins><span class="cx"> min: 1,
</span><span class="cx"> max: modelcount + 1,
</span><span class="cx"> range: true
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $( '#revision-diff-container' ).addClass( 'comparing-two-revisions' );
</span><del>- $( '#diff-slider a.ui-slider-handle' ).first().addClass( 'left-handle' );
- $( '#diff-slider a.ui-slider-handle' ).last().addClass( 'right-handle' );
</del><ins>+ // in RTL mode the 'left handle' is the second in the slider, 'right' is first
+ $( '#diff-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
+ $( '#diff-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' );
</ins><span class="cx">
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -626,18 +657,18 @@
</span><span class="cx"> // compare two revisions mode?
</span><span class="cx"> if ( ! Diff.singleRevision ) {
</span><span class="cx"> if ( this.draggingLeft ) {
</span><del>- thediff = Diff.leftDiff - 1;
</del><ins>+ thediff = Diff.leftDiff - 1; //leftDiff value is off model index by 1
</ins><span class="cx"> if ( this.model.at( thediff ) ) {
</span><span class="cx"> addHtml = this.template( this.model.at( thediff ).toJSON() );
</span><span class="cx"> }
</span><span class="cx"> } else { // dragging right handle
</span><del>- thediff = Diff.rightDiff -1;
</del><ins>+ thediff = Diff.rightDiff - 1; // rightDiff value is off model index by 1
</ins><span class="cx"> if ( this.model.at( thediff ) ) {
</span><span class="cx"> addHtml = this.template( this.model.at( thediff ).toJSON() );
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> } else { // end compare two revisions mode, eg only one slider handle
</span><del>- if ( this.model.at( Diff.rightDiff - 1 ) ) {
</del><ins>+ if ( this.model.at( Diff.rightDiff - 1 ) ) { // rightDiff value is off model index by 1
</ins><span class="cx"> addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() );
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -669,13 +700,21 @@
</span><span class="cx"> if ( $( '#compare-two-revisions' ).is( ':checked' ) ) { // compare 2 mode
</span><span class="cx"> Diff.singleRevision = false ;
</span><span class="cx">
</span><del>- if ( 1 === Diff.rightDiff )
- Diff.rightDiff = 2;
</del><ins>+ // in RTL mode handles are swapped, so boundary checks are different;
+ if ( isRtl ){
+ Diff.leftDiff = Diff.revisions.length; // put the left handle at the rightmost position, representing current revision
</ins><span class="cx">
</span><ins>+ if ( Diff.revisions.length === Diff.rightDiff ) // make sure 'left' handle not in rightmost slot
+ Diff.rightDiff = Diff.rightDiff - 1;
+ } else {
+ if ( 1 === Diff.rightDiff ) // make sure right handle not in leftmost slot
+ Diff.rightDiff = 2;
+ }
+
</ins><span class="cx"> Diff.revisionView.draggingLeft = false;
</span><span class="cx">
</span><span class="cx"> revisions.model.settings.revision_id = ''; // reset passed revision id so switching back to one handle mode doesn't re-select revision
</span><del>- Diff.reloadLeftRight();
</del><ins>+ Diff.reloadLeftRight(); // load diffs for left and right handles
</ins><span class="cx"> Diff.revisionView.model = Diff.rightHandleRevisions;
</span><span class="cx">
</span><span class="cx"> } else { // compare one mode
</span><span class="lines">@@ -758,12 +797,12 @@
</span><span class="cx"> url: function() {
</span><span class="cx"> return ajaxurl +
</span><span class="cx"> '?action=revisions-data' +
</span><del>- '&compare_to=' + this.options.compareTo +
- '&post_id=' + this.options.post_id +
- '&show_autosaves=' + this.options.showAutosaves +
- '&show_split_view=' + this.options.showSplitView +
- '&right_handle_at=' + this.options.rightHandleAt +
- '&left_handle_at=' + this.options.leftHandleAt +
</del><ins>+ '&compare_to=' + this.options.compareTo + // revision are we comparing to
+ '&post_id=' + this.options.post_id + // the post id
+ '&show_autosaves=' + this.options.showAutosaves + // show or hide autosaves
+ '&show_split_view=' + this.options.showSplitView + // show in split view or single column view
+ '&right_handle_at=' + this.options.rightHandleAt + // mark point for comparison list
+ '&left_handle_at=' + this.options.leftHandleAt + // mark point for comparison list
</ins><span class="cx"> '&nonce=' + this.options.nonce;
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>