Fix that opacity slider

Tom

2014-11-13 11e5e5d409e6c80617b3569199e404c8e4e44e06

Fix that opacity slider

Using the browser's built-in slider doesn't work if the browser hides
scrollbars (like Firefox on Mac). So,construct our own slider with
three divs and some CSS. Event-handling Javascript changed to match
this new implementation.

 src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java

@@ -80,8 +80,9 @@
                resizeable.appendElement("img").attr("class", "imgdiff-left").attr("id", id).attr("style", "max-width:640px;").attr("src", oldUrl);
                container.appendElement("img").attr("class", "imgdiff").attr("style", "max-width:640px;").attr("src", newUrl);
                builder.root().appendElement("br");
                Element slider = builder.root().appendElement("div").attr("class", "imgdiff-slider").attr("id", "slider-" + id);
                slider.appendElement("div").attr("class", "imgdiff-slider-inner");
                Element slider = builder.root().appendElement("div").attr("class", "imgdiff-slider");
                slider.appendElement("div").attr("class", "imgdiff-slider-resizeable").attr("id", "slider-" + id)
                    .appendElement("div").attr("class", "imgdiff-slider-left");
                return builder.toString();
            }
            break;

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

@@ -15,9 +15,16 @@
 */
jQuery(function () {
    // Runs on jQuery's document.ready and sets up the scroll event handlers for all image diffs.
    jQuery(".imgdiff-slider").scroll(function() {
        var w = 1.0 - (this.scrollLeft / (this.scrollWidth - (this.clientWidth || this.offsetWidth)));
        // We encode the target img id in the slider's id: slider-imgdiffNNN.
        jQuery('#' + this.id.substr(this.id.indexOf('-') + 1)).css("opacity", w);
    jQuery(".imgdiff-slider-resizeable").each(function () {
        var $el = jQuery(this);
        var $img = jQuery('#' + this.id.substr(this.id.indexOf('-') + 1));
        function fade() {
            var w = Math.max(0, $el.width() - 18); // Must correspond to CSS: 18 px is handle width, 400 px is slider width
            w = Math.max(0, 1.0 - w / 400.0);
            $img.css("opacity", w);
        }
        // Unfortunately, not even jQuery triggers resize events for our resizeable... so let's track the mouse.
        $el.on('mousedown', function() { $el.on('mousemove', fade); });
        $el.on('mouseup', function() { $el.off('mousemove', fade); fade(); });
    });
});

 src/main/resources/gitblit.css

@@ -1492,10 +1492,10 @@
img.imagediff {

    user-select: none;

    /* Checkerboard background */

    background-color: white;

    background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);

    background-size: 16px 16px;

    background-position: 0 0, 8px 8px;

    background-color: white;

    background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);

    background-size: 16px 16px;

    background-position: 0 0, 8px 8px;

}



.diff-img {

@@ -1505,24 +1505,40 @@
div.imgdiff-slider {

    display: inline-block;

    position: relative;

    margin: 0px 2px;

    width: 420px;

    max-width: 420px;

    height: 24px;

    min-height: 18px;

    overflow-x: scroll;

    margin: 0px 5px;

    width: 418px;

    height: 18px;

    background: linear-gradient(to right, #F00, #0F0);

    border: 1px solid #888;

}



div.imgdiff-slider-inner {

div.imgdiff-slider-resizeable {

    position: absolute;

    bottom: 0;

    margin: 0;

    padding: 0;

    width : 1000%;

    height: 1px;

    border: none;

    background: transparent;

    top: 0px;

    left: 0px;

    bottom: 0px;

    width: 18px;

    min-width: 18px;

    max-width: 100%;

    overflow: hidden;

    resize: horizontal;

    border-right: 1px solid #888;

    /* The "handle" */ 
    background-image: linear-gradient(to right, white, white);

    background-size: 18px 18px;

    background-position: top right;

    background-repeat: no-repeat;

    cursor: ew-resize;

}



/* Provides the *left* border of the "handle" */

div.imagediff-slider-left {

    position: absolute;

    top: 0px;

    right: 0px;

    bottom: 0px;

    margin-right:18px;

    border-right: 1px solid #888;

}



/* End image diffs */