<!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>[24174] trunk/wp-admin: Revisions UI: Just another update - Now with improved tick marks and tooltips.</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/24174">24174</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2013-05-03 23:17:06 +0000 (Fri, 03 May 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Revisions UI: Just another update - Now with improved tick marks and tooltips.
props adamsilverstein. see <a href="http://core.trac.wordpress.org/ticket/23935">#23935</a>.</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="#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 (24173 => 24174)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-classic.css 2013-05-03 23:00:14 UTC (rev 24173)
+++ trunk/wp-admin/css/colors-classic.css 2013-05-03 23:17:06 UTC (rev 24174)
</span><span class="lines">@@ -1482,7 +1482,8 @@
</span><span class="cx"> border: 1px solid #d1e5ee;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#diff-slider .ui-slider-tooltip {
</del><ins>+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
</ins><span class="cx"> border-color: #d1e5ee;
</span><span class="cx"> background-color: #fff;
</span><span class="cx"> }
</span><span class="lines">@@ -1502,26 +1503,30 @@
</span><span class="cx"> background-image: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-vsmall {
</del><ins>+.revision-tick.scope-of-changes-none {
</ins><span class="cx"> background-color: #d1e5ee;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-small {
</del><ins>+.revision-tick.scope-of-changes-vsmall {
</ins><span class="cx"> background-color: #b4d5e3;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-med {
</del><ins>+.revision-tick.scope-of-changes-small {
</ins><span class="cx"> background-color: #98c5d9;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-large {
</del><ins>+.revision-tick.scope-of-changes-med {
</ins><span class="cx"> background-color: #7bb4ce;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-vlarge {
</del><ins>+.revision-tick.scope-of-changes-large {
</ins><span class="cx"> background-color: #5ea4c4;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.revision-tick.scope-of-changes-vlarge {
+ background-color: #4493b7;
+}
+
</ins><span class="cx"> .diff-label {
</span><span class="cx"> color: #666;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsscolorsfreshcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-fresh.css (24173 => 24174)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-fresh.css 2013-05-03 23:00:14 UTC (rev 24173)
+++ trunk/wp-admin/css/colors-fresh.css 2013-05-03 23:17:06 UTC (rev 24174)
</span><span class="lines">@@ -1376,7 +1376,8 @@
</span><span class="cx"> border: 1px solid #dfdfdf;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#diff-slider .ui-slider-tooltip {
</del><ins>+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
</ins><span class="cx"> border-color: #d7d7d7;
</span><span class="cx"> background-color: #fff;
</span><span class="cx"> }
</span><span class="lines">@@ -1400,35 +1401,34 @@
</span><span class="cx"> background-image: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-vsmall {
</del><ins>+.revision-tick.scope-of-changes-none {
</ins><span class="cx"> background-color: #d7d7d7;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-small {
</del><ins>+.revision-tick.scope-of-changes-vsmall {
</ins><span class="cx"> background-color: #c3c3c3;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-med {
</del><ins>+.revision-tick.scope-of-changes-small {
</ins><span class="cx"> background-color: #b0b0b0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-large {
</del><ins>+.revision-tick.scope-of-changes-med {
</ins><span class="cx"> background-color: #9c9c9c;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-vlarge {
</del><ins>+.revision-tick.scope-of-changes-large {
</ins><span class="cx"> background-color: #898989;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.revision-tick.scope-of-changes-vlarge {
+ background-color: #757575;
+}
+
</ins><span class="cx"> .diff-label {
</span><span class="cx"> color: #666;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-body .ui-tooltip {
- border-color: #d7d7d7;
- background-color: #fff;
-}
-
</del><span class="cx"> /* jQuery UI Slider */
</span><span class="cx"> .wp-slider.ui-slider {
</span><span class="cx"> border-color: #d7d7d7;
</span></span></pre></div>
<a id="trunkwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.css (24173 => 24174)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css 2013-05-03 23:00:14 UTC (rev 24173)
+++ trunk/wp-admin/css/wp-admin.css 2013-05-03 23:17:06 UTC (rev 24174)
</span><span class="lines">@@ -3585,6 +3585,9 @@
</span><span class="cx">
</span><span class="cx"> #loading-status {
</span><span class="cx"> display: none;
</span><ins>+ position: absolute;
+ top: 8px;
+ z-index: 1000;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #loading-status .spinner {
</span><span class="lines">@@ -3619,11 +3622,12 @@
</span><span class="cx"> width: 95%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#diff-slider .ui-slider-tooltip {
</del><ins>+#diff-slider .ui-slider-tooltip,
+#diff-slider-ticks .ui-slider-tooltip {
</ins><span class="cx"> display: none;
</span><span class="cx"> position: absolute;
</span><del>- bottom: 20px;
- margin-left: -4em;
</del><ins>+ bottom: 21px;
+ margin-left: -74px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #diff-slider .ui-state-active .ui-slider-tooltip,
</span><span class="lines">@@ -3640,17 +3644,6 @@
</span><span class="cx"> display: inline;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.diff-slider-ticks-wrapper {
- margin: 0 auto;
- text-align: center;
-}
-
-#diff-slider-ticks {
- position: absolute;
- z-index: 2;
- margin-top: 20px;
-}
-
</del><span class="cx"> .diff-label {
</span><span class="cx"> margin: 20px 0 5px;
</span><span class="cx"> padding-left: 3px;
</span><span class="lines">@@ -3705,38 +3698,59 @@
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.diff-slider-ticks-wrapper {
+ margin: 0 auto;
+ text-align: left;
+}
+
+#diff-slider-ticks {
+ position: absolute;
+ z-index: 2;
+ margin-top: 20px;
+}
+
</ins><span class="cx"> .revision-tick {
</span><span class="cx"> width: 1px;
</span><span class="cx"> float: left;
</span><del>- margin: 1px 15px 0 0;
</del><ins>+ margin: 1px 0 0 0;
</ins><span class="cx"> height: .8em;
</span><span class="cx"> padding: 0;
</span><span class="cx"> margin-left: 0px;
</span><ins>+ cursor: pointer;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-vsmall {
</del><ins>+#diff-slider-ticks .revision-tick:first-child {
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px;
+}
+
+#diff-slider-ticks .revision-tick:last-child {
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.revision-tick.scope-of-changes-none {
</ins><span class="cx"> width: 1px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-small {
</del><ins>+.revision-tick.scope-of-changes-vsmall {
</ins><span class="cx"> width: 2px;
</span><del>- margin-left: -1px;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-med {
</del><ins>+.revision-tick.scope-of-changes-small {
</ins><span class="cx"> width: 3px;
</span><del>- margin-left: -2px;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.revision-tick.scope-of-changes-large {
</del><ins>+.revision-tick.scope-of-changes-med {
</ins><span class="cx"> width: 4px;
</span><del>- margin-left: -3px;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+.revision-tick.scope-of-changes-large {
+ width: 5px;
+}
+
</ins><span class="cx"> .revision-tick.scope-of-changes-vlarge {
</span><del>- margin-left: -3px;
- width: 4px;
- left: 1;
</del><ins>+ width: 6px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .diff-loading {
</span><span class="lines">@@ -3757,6 +3771,7 @@
</span><span class="cx"> .ui-slider-tooltip img {
</span><span class="cx"> float: left;
</span><span class="cx"> margin-right: 5px;
</span><ins>+ margin-top: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span><span class="lines">@@ -3852,13 +3867,8 @@
</span><span class="cx"> font-size: .7em;
</span><span class="cx"> display: block;
</span><span class="cx"> border: 0;
</span><del>-
- background-color: #8cc1e9;
- background-image: -webkit-gradient(linear, left bottom, left top, from(#72a7cf), to(#8cc1e9));
- background-image: -webkit-linear-gradient(bottom, #72a7cf, #8cc1e9);
- background-image: -moz-linear-gradient(bottom, #72a7cf, #8cc1e9);
- background-image: -o-linear-gradient(bottom, #72a7cf, #8cc1e9);
- background-image: linear-gradient(to top, #72a7cf, #8cc1e9);
</del><ins>+ background-color: transparent;
+ background-image: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .wp-slider.ui-slider-horizontal {
</span></span></pre></div>
<a id="trunkwpadminjsrevisionsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/revisions.js (24173 => 24174)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/revisions.js 2013-05-03 23:00:14 UTC (rev 24173)
+++ trunk/wp-admin/js/revisions.js 2013-05-03 23:17:06 UTC (rev 24174)
</span><span class="lines">@@ -40,12 +40,13 @@
</span><span class="cx"> slider: null, // the slider instance
</span><span class="cx">
</span><span class="cx"> constructor: function() {
</span><ins>+ var self = this;
</ins><span class="cx"> this.slider = new revisions.view.Slider();
</span><ins>+
</ins><span class="cx"> if ( null === this.revisions ) {
</span><span class="cx"> this.revisions = new Revisions(); // set up collection
</span><span class="cx"> this.startRightModelLoading();
</span><span class="cx">
</span><del>- var self = this;
</del><span class="cx"> this.revisions.fetch({ // load revision data
</span><span class="cx"> success: function() {
</span><span class="cx"> self.stopRightModelLoading();
</span><span class="lines">@@ -58,7 +59,8 @@
</span><span class="cx"> loadDiffs: function( models ) {
</span><span class="cx"> var self = this,
</span><span class="cx"> revisionsToLoad = models.where( { completed: false } ),
</span><del>- delay = 0;
</del><ins>+ delay = 0,
+ totalChanges;
</ins><span class="cx">
</span><span class="cx"> // match slider to passed revision_id
</span><span class="cx"> _.each( revisionsToLoad, function( revision ) {
</span><span class="lines">@@ -79,9 +81,7 @@
</span><span class="cx"> if ( 0 === models.where( { completed: false } ).length )
</span><span class="cx"> self.stopModelLoadingSpinner();
</span><span class="cx">
</span><del>- self.tickmarkView.render();
-
- var totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
</del><ins>+ totalChanges = model.get( 'linesAdded' ) + model.get( 'linesDeleted' ),
</ins><span class="cx"> scopeOfChanges = 'vsmall';
</span><span class="cx">
</span><span class="cx"> // Note: hard coded scope of changes
</span><span class="lines">@@ -101,7 +101,7 @@
</span><span class="cx"> // reload if current model refreshed
</span><span class="cx"> self.revisionView.render();
</span><span class="cx"> }
</span><del>-
</del><ins>+ self.tickmarkView.render();
</ins><span class="cx"> }
</span><span class="cx"> } );
</span><span class="cx"> }, delay ) ;
</span><span class="lines">@@ -191,8 +191,7 @@
</span><span class="cx"> self.slider.refresh({
</span><span class="cx"> 'max': self.revisions.length
</span><span class="cx"> });
</span><del>- // 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
</del><ins>+ // ensure right handle not beyond length
</ins><span class="cx"> if ( self.rightDiff > self.revisions.length )
</span><span class="cx"> self.rightDiff = self.revisions.length;
</span><span class="cx"> },
</span><span class="lines">@@ -274,7 +273,6 @@
</span><span class="cx"> model: this.revisions
</span><span class="cx"> });
</span><span class="cx"> this.tickmarkView.render();
</span><del>- this.tickmarkView.resetTicks();
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -401,10 +399,6 @@
</span><span class="cx"> refresh: function( options, slide ) {
</span><span class="cx"> $( '#diff-slider' ).slider( 'option', options );
</span><span class="cx">
</span><del>- // reset all of the slider tooltips during a refresh, but not on prev/next button actions
- if ( ! slide )
- $( 'a.ui-slider-handle' ).html( '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"></span>' );
-
</del><span class="cx"> // Triggers the slide event
</span><span class="cx"> if ( slide )
</span><span class="cx"> $( '#diff-slider' ).trigger( 'slide' );
</span><span class="lines">@@ -441,41 +435,87 @@
</span><span class="cx"> model: Revision,
</span><span class="cx">
</span><span class="cx"> resetTicks: function() {
</span><del>- var sliderMax = Diff.slider.option( 'max' );
- var sliderWidth = Diff.slider.width();
- var adjustMax = Diff.singleRevision ? 0 : 1;
- var tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
</del><ins>+ var sliderMax, sliderWidth, adjustMax, tickWidth, tickCount = 0, aTickWidth, tickMargin, self = this, firstTick, lastTick;
+ sliderMax = Diff.slider.option( 'max' );
+ sliderWidth = Diff.slider.width();
+ adjustMax = Diff.singleRevision ? 0 : 1;
+ tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
+ tickWidth = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks
+ tickWidth = ( tickWidth < 10 ) ? 10 : tickWidth;
+ sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width
+ aTickWidth = $( '.revision-tick' ).width();
</ins><span class="cx">
</span><del>- // TODO: adjust right margins for wider ticks so they stay centered on handle stop point
</del><ins>+ if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
+ $( '.revision-tick' ).each( function() {
+ tickMargin = Math.floor( ( tickWidth - $( this ).width() ) / 2 ) + 1;
+ $( this ).css( 'border-left', tickMargin + 'px solid #f7f7f7'); // space the ticks out using margins
+ $( this ).css( 'border-right', ( tickWidth - tickMargin - $( this ).width() ) + 'px solid #f7f7f7'); // space the ticks out using margins
+ });
+ firstTick = $( '.revision-tick' ).first(); //cache selectors for optimization
+ lastTick = $( '.revision-tick' ).last();
</ins><span class="cx">
</span><del>- // set minimum and maximum widths for tick marks
- tickWidth = (tickWidth > 50 ) ? 50 : tickWidth;
- tickWidth = (tickWidth < 10 ) ? 10 : tickWidth;
</del><ins>+ sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( lastTick.outerWidth() - lastTick.innerWidth() ) ) / 2 ); // room for the last tick
+ sliderWidth = sliderWidth + Math.ceil( ( tickWidth - ( firstTick.outerWidth() - firstTick.innerWidth() ) ) / 2 ); // room for the first tick
+ firstTick.css( 'border-left', 'none' ); // first tick gets no left border
+ lastTick.css( 'border-right', 'none' ); // last tick gets no right border
+ }
</ins><span class="cx">
</span><del>- sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
-
</del><ins>+ /**
+ * reset the slider width
+ */
</ins><span class="cx"> Diff.slider.setWidth( sliderWidth );
</span><span class="cx"> $( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
</span><span class="cx"> $( '#diff-slider-ticks' ).width( sliderWidth );
</span><span class="cx">
</span><del>- var aTickWidth = $( '.revision-tick' ).width();
</del><ins>+ /**
+ * go through all ticks, add hover and click interactions
+ */
+ $( '.revision-tick' ).each( function() {
+ Diff.slider.addTooltip ( $( this ), Diff.revisions.at( tickCount++ ).get( 'titleTooltip' ) );
+ $( this ).hover(
+ function() {
+ $( this ).find( '.ui-slider-tooltip' ).show().append('<div class="arrow"></div>');
+ },
+ function() {
+ $( this ).find( '.ui-slider-tooltip' ).hide().find( '.arrow' ).remove();
+ }
+ );
</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
- });
-
- $( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
- }
-
</del><ins>+ /**
+ * move the slider handle when the tick marks are clicked
+ */
+ $( this ).on( 'click',
+ { tickCount: tickCount }, // //pass the tick through so we know where to move the handle
+ function( event ) {
+ if ( Diff.slider.singleRevision ) { //single handle mode
+ Diff.rightDiff = event.data.tickCount; //reposition the right handle
+ Diff.slider.refresh({
+ value: Diff.rightDiff - 1
+ } );
+ } else { //compare two mode
+ 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
+ }
+ Diff.slider.refresh( { // set the slider handle positions
+ values: [ Diff.leftDiff, Diff.rightDiff ]
+ } );
+ }
+ Diff.revisionView.render(); // render the main view
+ } );
+ } );
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- // render the tickmark view
</del><ins>+ // render the tick mark view
</ins><span class="cx"> render: function() {
</span><del>- var self = this;
</del><ins>+ var self = this, addHtml;
</ins><span class="cx">
</span><span class="cx"> if ( null !== self.model ) {
</span><del>- var addHtml = "";
</del><ins>+ addHtml = "";
</ins><span class="cx"> _.each ( self.model.models, function( theModel ) {
</span><span class="cx"> addHtml = addHtml + self.template ( theModel.toJSON() );
</span><span class="cx"> });
</span><span class="lines">@@ -485,7 +525,7 @@
</span><span class="cx"> self.resetTicks();
</span><span class="cx"> return self;
</span><span class="cx"> }
</span><del>- });
</del><ins>+ } );
</ins><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * wp.revisions.view.Interact
</span><span class="lines">@@ -504,9 +544,10 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><ins>+ var modelcount;
</ins><span class="cx"> this.$el.html( this.template );
</span><span class="cx">
</span><del>- var modelcount = Diff.revisions.length;
</del><ins>+ modelcount = Diff.revisions.length;
</ins><span class="cx">
</span><span class="cx"> Diff.slider.singleRevision = Diff.singleRevision;
</span><span class="cx"> Diff.slider.render();
</span><span class="lines">@@ -580,8 +621,7 @@
</span><span class="cx">
</span><span class="cx"> // render the revisions
</span><span class="cx"> render: function() {
</span><del>- var addHtml = '';
- var thediff;
</del><ins>+ var addHtml = '', thediff;
</ins><span class="cx">
</span><span class="cx"> // compare two revisions mode?
</span><span class="cx"> if ( ! Diff.singleRevision ) {
</span><span class="lines">@@ -608,17 +648,6 @@
</span><span class="cx"> $( '.diff-slider-ticks-wrapper' ).hide();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // add tooltips to the handles
- if ( ! Diff.singleRevision ) {
- Diff.slider.addTooltip ( $( 'a.ui-slider-handle.left-handle' ),
- ( Diff.leftDiff < 0 ) ? '' : Diff.revisions.at( Diff.leftDiff - 1 ).get( 'titleTooltip' ) );
- Diff.slider.addTooltip ( $( 'a.ui-slider-handle.right-handle' ),
- ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
- } else {
- Diff.slider.addTooltip ( $( 'a.ui-slider-handle' ),
- ( Diff.rightDiff > Diff.revisions.length ) ? '' : Diff.revisions.at( Diff.rightDiff - 1 ).get( 'titleTooltip' ) );
- }
-
</del><span class="cx"> this.toggleCompareTwoCheckbox();
</span><span class="cx">
</span><span class="cx"> // hide the restore button when on the last sport/current post data
</span></span></pre></div>
<a id="trunkwpadminrevisionphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/revision.php (24173 => 24174)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/revision.php 2013-05-03 23:00:14 UTC (rev 24173)
+++ trunk/wp-admin/revision.php 2013-05-03 23:17:06 UTC (rev 24174)
</span><span class="lines">@@ -118,7 +118,7 @@
</span><span class="cx"> <h2 class="long-header"><?php echo $h2; ?></h2>
</span><span class="cx">
</span><span class="cx"> <div id="loading-status" class="updated message">
</span><del>- <p><span class="spinner" ></span> <?php _e( 'Calculating revision diffs' ); ?></p>
</del><ins>+ <p><span class="spinner" ></span></p>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div class="diff-slider-ticks-wrapper">
</span><span class="lines">@@ -173,7 +173,9 @@
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script id="tmpl-revision-ticks" type="text/html">
</span><del>- <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}"></div>
</del><ins>+ <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}">
+ <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span>
+ </div>
</ins><span class="cx"> </script>
</span><span class="cx"> <?php
</span><span class="cx"> require_once( './admin-footer.php' );
</span></span></pre>
</div>
</div>
</body>
</html>