Usability bug fix

If the opacity slider was moved to the far right faster than the
animation showing the image, the user would never see the old file
because opacity got adjusted right away.

Now we first move the overlay slider to the right, so that something
is visible, and then quickly animate opacity to the current value.

1 files changed, 20 insertions, 2 deletions

diff --git a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
index e993997a..61575132 100644
--- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
+++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
@@ -167,9 +167,27 @@ function setup() {
 				overlayAccess.moveAuto(newRatio);
 			}
 		});
+		
+		var autoShowing = false;
 		$opacitySlider.on('slider:pos', function(e, data) {
-			if ($div.width() <= 0 && !blinking) overlayAccess.moveAuto(1.0); // Make old image visible in a nice way
-			$img.css('opacity', 1.0 - data.ratio);
+			if ($div.width() <= 0 && !blinking) {
+				// Make old image visible in a nice way, *then* adjust opacity
+				autoShowing = true;
+				overlayAccess.moveAuto(1.0, 500, function() {
+					$img.stop().animate(
+						{opacity: 1.0 - opacityAccess.getRatio()},
+						{duration: 400,
+						 complete: function () {
+							// In case the opacity handle was moved while we were trying to catch up
+							$img.css('opacity', 1.0 - opacityAccess.getRatio());
+							autoShowing = false;
+						 }
+						}
+					);
+				});
+			} else if (!autoShowing) {
+				$img.css('opacity', 1.0 - data.ratio);
+			}
 		});
 		$opacitySlider.on('click', function(e) {
 			var newRatio = (e.pageX - $opacitySlider.offset().left) / $opacitySlider.innerWidth();