Usability bug fix

Tom

2014-11-19 add899d48daaec9b4df1a0fdcbdd5fc6cce0da0b

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.

 src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js

@@ -167,9 +167,27 @@
                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();