<!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>[24751] trunk/wp-admin: Revisions: Re-work how tick marks and tooltips are aligned.</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/24751">24751</a></dd>
<dt>Author</dt> <dd>markjaquith</dd>
<dt>Date</dt> <dd>2013-07-19 13:49:15 +0000 (Fri, 19 Jul 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Revisions: Re-work how tick marks and tooltips are aligned. IE fixes.
* Pixel-based alignment of tooltips.
* Bottom-based alignment, so arrow lines up using CSS only.
* Better RTL styles (mostly mirror-imaged).
* Better RTL calculations in `revisions.js` (less logic).
* Better IE support.
See <a href="http://core.trac.wordpress.org/ticket/24736">#24736</a>. Props markjaquith, adamsilverstein, ocean90.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsscolorsclassiccss">trunk/wp-admin/css/colors-classic.css</a></li>
<li><a href="#trunkwpadmincsscolorsfreshcss">trunk/wp-admin/css/colors-fresh.css</a></li>
<li><a href="#trunkwpadmincssiecss">trunk/wp-admin/css/ie.css</a></li>
<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="#trunkwpadminjsrevisionsjs">trunk/wp-admin/js/revisions.js</a></li>
<li><a href="#trunkwpadminrevisionphp">trunk/wp-admin/revision.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsscolorsclassiccss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-classic.css (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-classic.css 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/css/colors-classic.css 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -1486,7 +1486,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions-tooltip,
</span><del>-.revisions-tooltip-arrow:after {
</del><ins>+.revisions-tooltip-arrow span {
</ins><span class="cx"> border-color: #d1e5ee;
</span><span class="cx"> background-color: #fff;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsscolorsfreshcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-fresh.css (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-fresh.css 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/css/colors-fresh.css 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -1380,16 +1380,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions-tooltip,
</span><del>-.revisions-tooltip-arrow:after {
</del><ins>+.revisions-tooltip-arrow span {
</ins><span class="cx"> border-color: #d7d7d7;
</span><span class="cx"> background-color: #fff;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-
-.revisions-tickmarks {
- background-color: #f7f7f7;
-}
-
</del><span class="cx"> .revisions-tickmarks > div {
</span><span class="cx"> border-color: #aaa;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincssiecss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/ie.css (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/ie.css 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/css/ie.css 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -630,3 +630,16 @@
</span><span class="cx"> * html #adminmenu div.wp-menu-image {
</span><span class="cx"> height: 29px;
</span><span class="cx"> }
</span><ins>+
+/* Revisions */
+.revisions-tooltip-arrow span {
+ left: 25px;
+ top: -24px;
+ filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
+}
+
+.revisions-controls .revisions-tickmarks > div {
+ margin-right: -1px;
+ border-width: 0 0 0 0;
+ border-style: none;
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpadmincsswpadminrtlcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin-rtl.css (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin-rtl.css 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/css/wp-admin-rtl.css 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -954,18 +954,18 @@
</span><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 11.2 - Post Revisions
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><del>-.wp-slider .ui-slider-handle.left-handle:before,
-.wp-slider .ui-slider-handle.right-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.from-handle:before,
+.wp-slider .ui-slider-handle.to-handle:before {
</ins><span class="cx"> height: 8px;
</span><span class="cx"> width: 7px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-slider .ui-slider-handle.left-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.from-handle:before {
</ins><span class="cx"> background-position: -5px -10px;
</span><span class="cx"> left: 6px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-slider .ui-slider-handle.right-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.to-handle:before {
</ins><span class="cx"> background-position: -4px -29px;
</span><span class="cx"> left: 6px;
</span><span class="cx"> }
</span><span class="lines">@@ -1025,8 +1025,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions-tooltip {
</span><del>- margin-right: -73px;
</del><span class="cx"> margin-left: 0;
</span><ins>+ margin-right: -70px;
</ins><span class="cx"> -webkit-transition: right 15ms;
</span><span class="cx"> -moz-transition: right 15ms;
</span><span class="cx"> -ms-transition: right 15ms;
</span><span class="lines">@@ -1034,17 +1034,30 @@
</span><span class="cx"> transition: right 15ms;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.ie8 .revisions-tooltip {
+ margin-right: -75px;
+}
+
</ins><span class="cx"> .revisions-tooltip-arrow {
</span><span class="cx"> right: 0;
</span><span class="cx"> margin-left: 0;
</span><span class="cx"> margin-right: 35px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revisions-tooltip-image {
</del><ins>+.revisions-tooltip-arrow > span {
+ right: 20px;
+}
+
+.revisions-tooltip img {
</ins><span class="cx"> float: right;
</span><span class="cx"> margin: 2px 0 0 5px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.revisions-tickmarks > div {
+ float: right;
+ border-width: 0 0 0 1px;
+}
+
</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 (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/css/wp-admin.css 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -3511,10 +3511,6 @@
</span><span class="cx"> /*------------------------------------------------------------------------------
</span><span class="cx"> 11.2 - Post Revisions
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><del>-body.revision-php {
- overflow-y: scroll; /* Force a scrollbar, so centering doesn't jump */
-}
-
</del><span class="cx"> .revisions-control-frame,
</span><span class="cx"> .revisions-diff-frame {
</span><span class="cx"> position: relative;
</span><span class="lines">@@ -3533,14 +3529,14 @@
</span><span class="cx">
</span><span class="cx"> .revisions-tickmarks {
</span><span class="cx"> position: relative;
</span><del>- margin: 0 auto 0;
</del><ins>+ margin: 0 auto;
</ins><span class="cx"> height: 0.8em;
</span><span class="cx"> z-index: 2;
</span><span class="cx"> top: 7px;
</span><del>- width: 70%;
</del><ins>+ width: 100%;
+ padding: 0 15%;
</ins><span class="cx"> -moz-box-sizing: border-box;
</span><span class="cx"> -webkit-box-sizing: border-box;
</span><del>- -ms-box-sizing: border-box; /* ie8 only */
</del><span class="cx"> box-sizing: border-box;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -3548,17 +3544,16 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> height: 100%;
</span><span class="cx"> float: left;
</span><del>- z-index: 10002;
</del><ins>+ z-index: 3;
</ins><span class="cx"> border-style: solid;
</span><del>- border-width: 0 0 0 1px;
</del><ins>+ border-width: 0 1px 0 0;
</ins><span class="cx"> -moz-box-sizing: border-box;
</span><span class="cx"> -webkit-box-sizing: border-box;
</span><del>- -ms-box-sizing: border-box; /* ie8 only */
</del><span class="cx"> box-sizing: border-box;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revisions-tickmarks > div:first-of-type {
- border-left-width: 0;
</del><ins>+.revisions-tickmarks > div:last-child {
+ border-width: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .comparing-two-revisions .revisions-controls {
</span><span class="lines">@@ -3588,6 +3583,7 @@
</span><span class="cx"> -ms-transition: opacity 0.5s;
</span><span class="cx"> -o-transition: opacity 0.5s;
</span><span class="cx"> transition: opacity 0.5s;
</span><ins>+ filter: alpha(opacity=0); /* ie8 and earlier */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions .loading-indicator span.spinner {
</span><span class="lines">@@ -3598,6 +3594,7 @@
</span><span class="cx">
</span><span class="cx"> .revisions.loading .loading-indicator {
</span><span class="cx"> opacity: 1;
</span><ins>+ filter: alpha(opacity=100); /* ie8 and earlier */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions .diff {
</span><span class="lines">@@ -3610,6 +3607,7 @@
</span><span class="cx">
</span><span class="cx"> .revisions.loading .diff {
</span><span class="cx"> opacity: 0.5;
</span><ins>+ filter: alpha(opacity=50); /* ie8 and earlier */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .revisions.diff-error .diff {
</span><span class="lines">@@ -3631,6 +3629,12 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.revisions-previous,
+.revisions-next {
+ position: relative;
+ z-index: 4;
+}
+
</ins><span class="cx"> .revisions-previous {
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><span class="lines">@@ -3641,7 +3645,7 @@
</span><span class="cx">
</span><span class="cx"> .wp-slider {
</span><span class="cx"> width: 70%;
</span><del>- margin: 0 auto 0;
</del><ins>+ margin: 0 auto;
</ins><span class="cx"> top: -3px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -3736,7 +3740,8 @@
</span><span class="cx"> .revisions-tooltip {
</span><span class="cx"> position: absolute;
</span><span class="cx"> bottom: 105px;
</span><del>- margin-left: -69px;
</del><ins>+ margin-right: 0;
+ margin-left: -70px;
</ins><span class="cx"> line-height: 28px;
</span><span class="cx"> z-index: 9999;
</span><span class="cx"> max-width: 350px;
</span><span class="lines">@@ -3773,7 +3778,7 @@
</span><span class="cx"> z-index: 10000;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revisions-tooltip-arrow:after {
</del><ins>+.revisions-tooltip-arrow > span {
</ins><span class="cx"> content: "";
</span><span class="cx"> position: absolute;
</span><span class="cx"> left: 20px;
</span><span class="lines">@@ -3787,8 +3792,14 @@
</span><span class="cx"> tranform: rotate(45deg);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.ie8 .revisions-tooltip-arrow > span {
+ left: 14px;
+ top: -25px;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
+}
+
</ins><span class="cx"> .revisions-tooltip,
</span><del>-.revisions-tooltip-arrow:after {
</del><ins>+.revisions-tooltip-arrow > span {
</ins><span class="cx"> border-width: 1px;
</span><span class="cx"> border-style: solid;
</span><span class="cx"> }
</span><span class="lines">@@ -3828,18 +3839,18 @@
</span><span class="cx"> background: url(../images/arrows-pr.png) no-repeat -2px -47px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-slider .ui-slider-handle.left-handle:before,
-.wp-slider .ui-slider-handle.right-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.from-handle:before,
+.wp-slider .ui-slider-handle.to-handle:before {
</ins><span class="cx"> height: 8px;
</span><span class="cx"> width: 7px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-slider .ui-slider-handle.left-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.from-handle:before {
</ins><span class="cx"> background-position: -5px -84px;
</span><span class="cx"> left: 7px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.wp-slider .ui-slider-handle.right-handle:before {
</del><ins>+.wp-slider .ui-slider-handle.to-handle:before {
</ins><span class="cx"> background-position: -4px -65px;
</span><span class="cx"> left: 5px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminjsrevisionsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/revisions.js (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/js/revisions.js 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -16,6 +16,23 @@
</span><span class="cx"> console.log.apply( console, arguments );
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+ // Handy functions to help with positioning
+ $.fn.allOffsets = function() {
+ var offset = this.offset() || {top: 0, left: 0}, win = $(window);
+ return _.extend( offset, {
+ right: win.width() - offset.left - this.outerWidth(),
+ bottom: win.height() - offset.top - this.outerHeight()
+ });
+ };
+
+ $.fn.allPositions = function() {
+ var position = this.position() || {top: 0, left: 0}, parent = this.parent();
+ return _.extend( position, {
+ right: parent.outerWidth() - position.left - this.outerWidth(),
+ bottom: parent.outerHeight() - position.top - this.outerHeight()
+ });
+ };
+
</ins><span class="cx"> // wp_localize_script transforms top-level numbers into strings. Undo that.
</span><span class="cx"> if ( revisions.settings.to )
</span><span class="cx"> revisions.settings.to = parseInt( revisions.settings.to, 10 );
</span><span class="lines">@@ -125,19 +142,24 @@
</span><span class="cx"> revisions.model.Tooltip = Backbone.Model.extend({
</span><span class="cx"> defaults: {
</span><span class="cx"> revision: null,
</span><ins>+ offset: {},
</ins><span class="cx"> hovering: false, // Whether the mouse is hovering
</span><span class="cx"> scrubbing: false // Whether the mouse is scrubbing
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function( options ) {
</span><ins>+ this.frame = options.frame;
</ins><span class="cx"> this.revisions = options.revisions;
</span><span class="cx"> this.slider = options.slider;
</span><span class="cx">
</span><span class="cx"> this.listenTo( this.slider, 'hovered:revision', this.updateRevision );
</span><span class="cx"> this.listenTo( this.slider, 'change:hovering', this.setHovering );
</span><span class="cx"> this.listenTo( this.slider, 'change:scrubbing', this.setScrubbing );
</span><ins>+
+ this.set({ revision: this.frame.diff() });
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+
</ins><span class="cx"> updateRevision: function( revision ) {
</span><span class="cx"> this.set({ revision: revision });
</span><span class="cx"> },
</span><span class="lines">@@ -475,6 +497,7 @@
</span><span class="cx"> render: function() {
</span><span class="cx"> wp.Backbone.View.prototype.render.apply( this, arguments );
</span><span class="cx">
</span><ins>+ $('html').css( 'overflow-y', 'scroll' );
</ins><span class="cx"> $('#wpbody-content .wrap').append( this.el );
</span><span class="cx"> this.updateCompareTwoMode();
</span><span class="cx"> this.renderDiff( this.model.diff() );
</span><span class="lines">@@ -524,17 +547,21 @@
</span><span class="cx"> revisions: this.model.revisions
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ // Prep the tooltip model
+ var tooltip = new revisions.model.Tooltip({
+ frame: this.model,
+ revisions: this.model.revisions,
+ slider: slider
+ });
+
</ins><span class="cx"> // Add the tooltip view
</span><span class="cx"> this.views.add( new revisions.view.Tooltip({
</span><del>- model: new revisions.model.Tooltip({
- revisions: this.model.revisions,
- slider: slider
- })
</del><ins>+ model: tooltip
</ins><span class="cx"> }) );
</span><span class="cx">
</span><span class="cx"> // Add the tickmarks view
</span><span class="cx"> this.views.add( new revisions.view.Tickmarks({
</span><del>- model: this.model
</del><ins>+ model: tooltip
</ins><span class="cx"> }) );
</span><span class="cx">
</span><span class="cx"> // Add the slider view
</span><span class="lines">@@ -554,12 +581,37 @@
</span><span class="cx"> revisions.view.Tickmarks = wp.Backbone.View.extend({
</span><span class="cx"> className: 'revisions-tickmarks',
</span><span class="cx">
</span><ins>+ initialize: function() {
+ this.listenTo( this.model, 'change:revision', this.reportTickPosition );
+ },
+
+ reportTickPosition: function( model, revision ) {
+ var elWidth, offset, tick, index = this.model.revisions.indexOf( revision );
+ if ( index === this.model.revisions.length - 1 ) {
+ // Last one
+ tick = this.$('div:nth-of-type(' + index + ')');
+ offset = tick.allPositions();
+ elWidth = tick.outerWidth();
+ // adjust
+ _.extend( offset, {
+ right: offset.right + elWidth + 1,
+ left: offset.left + elWidth + 1
+ });
+ } else {
+ // Normal tick
+ tick = this.$('div:nth-of-type(' + (index + 1) + ')');
+ offset = tick.allPositions();
+ }
+ this.model.set({ offset: offset });
+ },
+
</ins><span class="cx"> ready: function() {
</span><span class="cx"> var tickCount, tickWidth;
</span><span class="cx"> tickCount = this.model.revisions.length - 1;
</span><span class="cx"> tickWidth = 1 / tickCount;
</span><span class="cx">
</span><span class="cx"> _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
</span><ins>+
</ins><span class="cx"> this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="lines">@@ -625,13 +677,25 @@
</span><span class="cx"> revisions.view.Tooltip = wp.Backbone.View.extend({
</span><span class="cx"> className: 'revisions-tooltip',
</span><span class="cx"> template: wp.template('revisions-tooltip'),
</span><ins>+ direction: isRtl ? 'right' : 'left',
</ins><span class="cx">
</span><span class="cx"> initialize: function( options ) {
</span><del>- this.listenTo( this.model, 'change:revision', this.render );
</del><ins>+ this.listenTo( this.model, 'change:offset', this.render );
</ins><span class="cx"> this.listenTo( this.model, 'change:hovering', this.toggleVisibility );
</span><span class="cx"> this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility );
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ prepare: function() {
+ return this.model.get('revision').toJSON();
+ },
+
+ render: function() {
+ var css = {};
+ wp.Backbone.View.prototype.render.apply( this, arguments );
+ css[this.direction] = this.model.get('offset')[this.direction] + 'px';
+ this.$el.css( css );
+ },
+
</ins><span class="cx"> visible: function() {
</span><span class="cx"> return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' );
</span><span class="cx"> },
</span><span class="lines">@@ -642,23 +706,6 @@
</span><span class="cx"> else
</span><span class="cx"> this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
</span><span class="cx"> return;
</span><del>- },
-
- render: function() {
- var offset;
- // Check if a revision exists.
- if ( _.isNull( this.model.get('revision') ) )
- return;
-
- this.$el.html( this.template( this.model.get('revision').toJSON() ) );
-
- // Set the position.
- offset = this.model.revisions.indexOf( this.model.get('revision') ) / ( this.model.revisions.length - 1 );
- // 15% to get us to the start of the slider
- // 0.7 to convert the slider-relative percentage to a page-relative percentage
- // 100 to convert to a percentage
- offset = 15 + (0.7 * offset * 100 ); // Now in a percentage
- this.$el.css( isRtl ? 'right' : 'left', offset + '%' );
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -681,31 +728,29 @@
</span><span class="cx"> this.disabledButtonCheck();
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // Go to a specific modelindex, taking into account RTL mode.
</del><ins>+ // Go to a specific model index
</ins><span class="cx"> gotoModel: function( toIndex ) {
</span><span class="cx"> var attributes = {
</span><del>- to: this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL.
</del><ins>+ to: this.model.revisions.at( toIndex )
</ins><span class="cx"> };
</span><span class="cx"> // If we're at the first revision, unset 'from'.
</span><del>- if ( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL
- attributes.from = this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 2 : toIndex - 1 );
</del><ins>+ if ( toIndex )
+ attributes.from = this.model.revisions.at( toIndex - 1 );
</ins><span class="cx"> else
</span><span class="cx"> this.model.unset('from', { silent: true });
</span><span class="cx">
</span><span class="cx"> this.model.set( attributes );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // Go to the 'next' revision, direction takes into account RTL mode.
</del><ins>+ // Go to the 'next' revision
</ins><span class="cx"> nextRevision: function() {
</span><del>- var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
- toIndex = isRtl ? toIndex - 1 : toIndex + 1;
</del><ins>+ var toIndex = this.model.revisions.indexOf( this.model.get('to') ) + 1;
</ins><span class="cx"> this.gotoModel( toIndex );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // Go to the 'previous' revision, direction takes into account RTL mode.
</del><ins>+ // Go to the 'previous' revision
</ins><span class="cx"> previousRevision: function() {
</span><del>- var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
- toIndex = isRtl ? toIndex + 1 : toIndex - 1;
</del><ins>+ var toIndex = this.model.revisions.indexOf( this.model.get('to') ) - 1;
</ins><span class="cx"> this.gotoModel( toIndex );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -729,6 +774,7 @@
</span><span class="cx"> // The slider view.
</span><span class="cx"> revisions.view.Slider = wp.Backbone.View.extend({
</span><span class="cx"> className: 'wp-slider',
</span><ins>+ direction: isRtl ? 'right' : 'left',
</ins><span class="cx">
</span><span class="cx"> events: {
</span><span class="cx"> 'mousemove' : 'mouseMove'
</span><span class="lines">@@ -757,23 +803,20 @@
</span><span class="cx">
</span><span class="cx"> mouseMove: function( e ) {
</span><span class="cx"> var zoneCount = this.model.revisions.length - 1, // One fewer zone than models
</span><del>- sliderLeft = this.$el.offset().left, // Left edge of slider
</del><ins>+ sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider
</ins><span class="cx"> sliderWidth = this.$el.width(), // Width of slider
</span><span class="cx"> tickWidth = sliderWidth / zoneCount, // Calculated width of zone
</span><del>- actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
- currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 ) ) / tickWidth ); // Calculate the model index
</del><ins>+ actualX = isRtl? $(window).width() - e.pageX : e.pageX; // Flipped for RTL - sliderFrom;
+ actualX = actualX - sliderFrom; // Offset of mouse position in slider
+ var currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 ) ) / tickWidth ); // Calculate the model index
</ins><span class="cx">
</span><del>- // Reverse direction in RTL mode.
- if ( isRtl )
- currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
-
</del><span class="cx"> // Ensure sane value for currentModelIndex.
</span><span class="cx"> if ( currentModelIndex < 0 )
</span><span class="cx"> currentModelIndex = 0;
</span><span class="cx"> else if ( currentModelIndex >= this.model.revisions.length )
</span><span class="cx"> currentModelIndex = this.model.revisions.length - 1;
</span><span class="cx">
</span><del>- // Update the tooltip model
</del><ins>+ // Update the tooltip mode
</ins><span class="cx"> this.model.set({ hoveredRevision: this.model.revisions.at( currentModelIndex ) });
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -792,103 +835,84 @@
</span><span class="cx"> if ( this.model.get('compareTwoMode') ) {
</span><span class="cx"> // in RTL mode the 'left handle' is the second in the slider, 'right' is first
</span><span class="cx"> handles.first()
</span><del>- .toggleClass( 'right-handle', !! isRtl )
- .toggleClass( 'left-handle', ! isRtl );
</del><ins>+ .toggleClass( 'to-handle', !! isRtl )
+ .toggleClass( 'from-handle', ! isRtl );
</ins><span class="cx"> handles.last()
</span><del>- .toggleClass( 'left-handle', !! isRtl )
- .toggleClass( 'right-handle', ! isRtl );
</del><ins>+ .toggleClass( 'from-handle', !! isRtl )
+ .toggleClass( 'to-handle', ! isRtl );
</ins><span class="cx"> } else {
</span><del>- handles.removeClass('left-handle right-handle');
</del><ins>+ handles.removeClass('from-handle to-handle');
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- getSliderPosition: function( ui ){
- return isRtl ? this.model.revisions.length - ui.value - 1 : ui.value;
- },
-
</del><span class="cx"> start: function( event, ui ) {
</span><span class="cx"> this.model.set({ scrubbing: true });
</span><span class="cx">
</span><span class="cx"> // Track the mouse position to enable smooth dragging,
</span><span class="cx"> // overrides default jQuery UI step behavior.
</span><span class="cx"> $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) {
</span><del>- var view = e.data.view,
- leftDragBoundary = view.$el.offset().left, // Initial left boundary
- sliderOffset = leftDragBoundary,
- sliderRightEdge = leftDragBoundary + view.$el.width(),
- rightDragBoundary = sliderRightEdge, // Initial right boundary
- leftDragReset = 0, // Initial left drag reset
- rightDragReset = sliderRightEdge - sliderOffset; // Initial right drag reset
</del><ins>+ var view = e.data.view,
+ leftDragBoundary = view.$el.offset().left,
+ sliderOffset = leftDragBoundary,
+ sliderRightEdge = leftDragBoundary + view.$el.width(),
+ rightDragBoundary = sliderRightEdge,
+ leftDragReset = '0',
+ rightDragReset = '100%',
+ handle = $( ui.handle );
</ins><span class="cx">
</span><span class="cx"> // In two handle mode, ensure handles can't be dragged past each other.
</span><span class="cx"> // Adjust left/right boundaries and reset points.
</span><span class="cx"> if ( view.model.get('compareTwoMode') ) {
</span><del>- var rightHandle = $( ui.handle ).parent().find('.right-handle'),
- leftHandle = $( ui.handle ).parent().find('.left-handle');
-
- if ( $( ui.handle ).hasClass('left-handle') ) {
- // Dragging the left handle, boundary is right handle.
- // RTL mode calculations reverse directions.
- if ( isRtl ) {
- leftDragBoundary = rightHandle.offset().left + rightHandle.width();
- leftDragReset = leftDragBoundary - sliderOffset;
- } else {
- rightDragBoundary = rightHandle.offset().left;
- rightDragReset = rightDragBoundary - sliderOffset;
- }
- } else {
- // Dragging the right handle, boundary is the left handle.
- // RTL mode calculations reverse directions.
- if ( isRtl ) {
- rightDragBoundary = leftHandle.offset().left;
- rightDragReset = rightDragBoundary - sliderOffset;
- } else {
- leftDragBoundary = leftHandle.offset().left + leftHandle.width() ;
- leftDragReset = leftDragBoundary - sliderOffset;
- }
</del><ins>+ var handles = handle.parent().find('.ui-slider-handle');
+ if ( handle.is( handles.first() ) ) { // We're the left handle
+ rightDragBoundary = handles.last().offset().left;
+ rightDragReset = rightDragBoundary - sliderOffset;
+ } else { // We're the right handle
+ leftDragBoundary = handles.first().offset().left + handles.first().width();
+ leftDragReset = leftDragBoundary - sliderOffset;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Follow mouse movements, as long as handle remains inside slider.
</span><del>- if ( e.clientX < leftDragBoundary ) {
- $( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
- } else if ( e.clientX > rightDragBoundary ) {
- $( ui.handle ).css( 'left', rightDragReset ); // Mouse to right of slider.
</del><ins>+ if ( e.pageX < leftDragBoundary ) {
+ handle.css( 'left', leftDragReset ); // Mouse to left of slider.
+ } else if ( e.pageX > rightDragBoundary ) {
+ handle.css( 'left', rightDragReset ); // Mouse to right of slider.
</ins><span class="cx"> } else {
</span><del>- $( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
</del><ins>+ handle.css( 'left', e.pageX - sliderOffset ); // Mouse in slider.
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ getPosition: function( position ) {
+ return isRtl ? this.model.revisions.length - position - 1: position;
+ },
+
</ins><span class="cx"> // Responds to slide events
</span><span class="cx"> slide: function( event, ui ) {
</span><del>- var attributes, movedRevision, sliderPosition;
</del><ins>+ var attributes, movedRevision;
</ins><span class="cx"> // Compare two revisions mode
</span><span class="cx"> if ( this.model.get('compareTwoMode') ) {
</span><span class="cx"> // Prevent sliders from occupying same spot
</span><span class="cx"> if ( ui.values[1] === ui.values[0] )
</span><span class="cx"> return false;
</span><del>-
</del><ins>+ if ( isRtl )
+ ui.values.reverse();
</ins><span class="cx"> attributes = {
</span><del>- to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[1] ),
- from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[0] )
</del><ins>+ from: this.model.revisions.at( this.getPosition( ui.values[0] ) ),
+ to: this.model.revisions.at( this.getPosition( ui.values[1] ) )
</ins><span class="cx"> };
</span><del>- if ( isRtl )
- movedRevision = ui.value === ui.values[1] ? attributes.from : attributes.to;
- else
- movedRevision = ui.value === ui.values[0] ? attributes.from : attributes.to;
</del><span class="cx"> } else {
</span><del>- sliderPosition = this.getSliderPosition( ui );
</del><span class="cx"> attributes = {
</span><del>- to: this.model.revisions.at( sliderPosition )
</del><ins>+ to: this.model.revisions.at( this.getPosition( ui.value ) )
</ins><span class="cx"> };
</span><del>- movedRevision = attributes.to;
</del><span class="cx"> // If we're at the first revision, unset 'from'.
</span><del>- if ( sliderPosition ) // Reverse directions for RTL.
- attributes.from = this.model.revisions.at( sliderPosition - 1 );
</del><ins>+ if ( this.getPosition( ui.value ) > 0 )
+ attributes.from = this.model.revisions.at( this.getPosition( ui.value ) - 1 );
</ins><span class="cx"> else
</span><span class="cx"> attributes.from = undefined;
</span><span class="cx"> }
</span><ins>+ movedRevision = this.model.revisions.at( this.getPosition( ui.value ) );
</ins><span class="cx">
</span><span class="cx"> // If we are scrubbing, a scrub to a revision is considered a hover
</span><span class="cx"> if ( this.model.get('scrubbing') )
</span></span></pre></div>
<a id="trunkwpadminrevisionphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/revision.php (24750 => 24751)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/revision.php 2013-07-19 02:58:49 UTC (rev 24750)
+++ trunk/wp-admin/revision.php 2013-07-19 13:49:15 UTC (rev 24751)
</span><span class="lines">@@ -138,7 +138,7 @@
</span><span class="cx"> ({{ data.dateShort }})
</span><span class="cx"> <# } #>
</span><span class="cx"> </div>
</span><del>- <div class="revisions-tooltip-arrow"></div>
</del><ins>+ <div class="revisions-tooltip-arrow"><span></span></div>
</ins><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script id="tmpl-revisions-checkbox" type="text/html">
</span></span></pre>
</div>
</div>
</body>
</html>