Revisions improvements

* Enable smooth sliding in Compare two mode

props adamsilverstein. see #24425.

git-svn-id: https://develop.svn.wordpress.org/trunk@24579 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/js/revisions.js

@@ -236,6 +236,8 @@ window.wp = window.wp || {};
 
 			this.listenTo( this.model, 'change:diffId', this.updateDiff );
 
+			this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
+
 			this.views.set( '.revisions-control-frame', new revisions.view.Controls({
 				model: this.model
 			}) );
@@ -275,6 +277,10 @@ window.wp = window.wp || {};
 				}));
 				this.model.trigger( 'renderDiff' );
 			});
+		},
+
+		updateCompareTwoMode: function() {
+			this.$el.toggleClass( 'comparing-two-revisions' );
 		}
 	});
 
@@ -336,11 +342,8 @@ window.wp = window.wp || {};
 
 		updateMeta: function() {
 			this.$el.html( this.template( this.model.toJSON() ) );
-			if( this.model.get( 'to' ).attributes.current ) {
+
-				$( '#restore-revision' ).prop( 'disabled', true );
+			$( '#restore-revision' ).prop( 'disabled', this.model.get( 'to' ).attributes.current );
-			} else {
-				$( '#restore-revision' ).prop( 'disabled', false );
-			}
 		}
 	});
 
@@ -375,11 +378,7 @@ window.wp = window.wp || {};
 		// Toggle the compare two mode feature when the compare two checkbox is checked.
 		compareTwoToggle: function( event ) {
 			// Activate compare two mode?
-			if ( $( '.compare-two-revisions' ).is( ':checked' ) ) {
+			this.model.set( { compareTwoMode: $( '.compare-two-revisions' ).prop( 'checked' ) } );
-				this.model.set( { compareTwoMode: true } );
-			} else {
-				this.model.set( { compareTwoMode: false } );
-			}
 
 			// Update route
 			this.model.revisionsRouter.navigateRoute( this.model.get( 'to').id, this.model.get( 'from' ).id );
@@ -545,9 +544,7 @@ window.wp = window.wp || {};
 
 			// And update the slider in case the route has set it.
 			this.updateSliderSettings();
-
 			this.slide( '', this.settings.attributes );
-
 			this.$el.slider( this.settings.toJSON() );
 
 			// Listen for changes in Compare Two Mode setting
@@ -568,7 +565,7 @@ window.wp = window.wp || {};
 				actualX = e.clientX - sliderLeft,
 				hoveringAt = Math.floor( actualX / tickWidth );
 
-			// Reverse direction in Rtl mode.
+			// Reverse direction in RTL mode.
 			if ( isRtl )
 				hoveringAt = this.model.revisions.length - hoveringAt - 1;
 
@@ -606,7 +603,7 @@ window.wp = window.wp || {};
 						rightValue = leftValue + 1;
 					}
 				} else {
-					leftValue  = isRtl ?	this.model.revisions.length -  this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
+					leftValue = isRtl ?	this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
 											this.model.revisions.indexOf( this.model.get( 'from' ) ),
 					rightValue = isRtl ?	this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
 											this.model.revisions.indexOf( this.model.get( 'to' ) );
@@ -631,9 +628,8 @@ window.wp = window.wp || {};
 					range: false
 				} );
 			}
-			if ( this.model.get( 'compareTwoMode' ) ){
-				$( '.revisions' ).addClass( 'comparing-two-revisions' );
 
+			if ( this.model.get( 'compareTwoMode' ) ){
 				// in RTL mode the 'left handle' is the second in the slider, 'right' is first
 				$( 'a.ui-slider-handle', this.$el )
 					.first()
@@ -643,8 +639,6 @@ window.wp = window.wp || {};
 					.last()
 					.addClass( isRtl ? 'left-handle' : 'right-handle' )
 					.removeClass( isRtl ? 'right-handle' : 'left-handle' );
-			} else {
-				$( '.revisions' ).removeClass( 'comparing-two-revisions' );
 			}
 		},
 
@@ -665,23 +659,53 @@ window.wp = window.wp || {};
 		},
 
 		start: function( event, ui ) {
-			if ( this.model.get( 'compareTwoMode' ) )
-				return;
-
 			// Track the mouse position to enable smooth dragging,
-			// overrides default jQuery UI step behaviour.
+			// overrides default jQuery UI step behavior.
-			$( window ).on( 'mousemove', { slider: this }, function( e ) {
+			$( window ).on( 'mousemove', { view: this }, function( e ) {
-				var slider = e.data.slider,
+				var view              = e.data.view,
-					sliderLeft = slider.$el.offset().left,
+					leftDragBoundary  = view.$el.offset().left, // Initial left boundary
-					sliderRight = sliderLeft + slider.$el.width();
+					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
+
+				// In two handle mode, ensure handles can't be dragged past each other.
+				// Adjust left/right boundaries and reset points.
+				if ( view.model.get( 'compareTwoMode' ) ) {
+					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;
+						}
+					}
+				}
 
 				// Follow mouse movements, as long as handle remains inside slider.
-				if ( e.clientX < sliderLeft ) {
+				if ( e.clientX < leftDragBoundary ) {
-					$( ui.handle ).css( 'left', 0 ); // Mouse to left of slider.
+					$( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
-				} else if ( e.clientX > sliderRight ) {
+				} else if ( e.clientX > rightDragBoundary ) {
-					$( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider.
+					$( ui.handle ).css( 'left', rightDragReset ); // Mouse to right of slider.
 				} else {
-					$( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
+					$( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
 				}
 			} );
 		},
@@ -716,9 +740,6 @@ window.wp = window.wp || {};
 		},
 
 		stop: function( event, ui ) {
-			if ( this.model.get( 'compareTwoMode' ) )
-				return;
-
 			$( window ).off( 'mousemove' );
 
 			// Reset settings props handle back to the step position.