From add899d48daaec9b4df1a0fdcbdd5fc6cce0da0b Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 19 Nov 2014 18:41:29 +0100 Subject: 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. --- .../com/gitblit/wicket/pages/scripts/imgdiff.js | 22 ++++++++++++++++++++-- 1 file 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(); -- cgit v1.2.3