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.

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 e993997a88a7be2b887b289e36a2ba4876b7c2ec..615751326064397061bb2a2a242f2f38c96dd39c 100644 (file)
--- 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();