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.

diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
index 4278f238504dc1a9e1dabd72918a71c31fca7be5..1232e990d8729b8158efafeabd7cdee8b88baf45 100644 (file)
--- a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
+++ b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
@@ -80,8 +80,9 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler {
                                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;

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 2be43172fb0545348bf1a6e3f2a5e5145cdf5e31..bfde435d787833dc14070cc84e32b2bdac7008d5 100644 (file)
--- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
+++ b/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(); });
        });
 });

diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index bdab20567bca440139d8647d0093d86d982a899e..906b555b237b3d479ed9e26cd38e85e124b915b9 100644 (file)
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -1492,10 +1492,10 @@ img.imgdiff-left {
 img.imagediff {\r
        user-select: none;\r
        /* Checkerboard background */\r
-    background-color: white;\r
-    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);\r
-    background-size: 16px 16px;\r
-    background-position: 0 0, 8px 8px;\r
+       background-color: white;\r
+       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);\r
+       background-size: 16px 16px;\r
+       background-position: 0 0, 8px 8px;\r
 }\r
 \r
 .diff-img {\r
@@ -1505,24 +1505,40 @@ img.imagediff {
 div.imgdiff-slider {\r
        display: inline-block;\r
        position: relative;\r
-       margin: 0px 2px;\r
-       width: 420px;\r
-       max-width: 420px;\r
-       height: 24px;\r
-       min-height: 18px;\r
-       overflow-x: scroll;\r
+       margin: 0px 5px;\r
+       width: 418px;\r
+       height: 18px;\r
        background: linear-gradient(to right, #F00, #0F0);\r
+       border: 1px solid #888;\r
 }\r
 \r
-div.imgdiff-slider-inner {\r
+div.imgdiff-slider-resizeable {\r
        position: absolute;\r
-       bottom: 0;\r
-       margin: 0;\r
-       padding: 0;\r
-       width : 1000%;\r
-       height: 1px;\r
-       border: none;\r
-       background: transparent;\r
+       top: 0px;\r
+       left: 0px;\r
+       bottom: 0px;\r
+       width: 18px;\r
+       min-width: 18px;\r
+       max-width: 100%;\r
+       overflow: hidden;\r
+       resize: horizontal;\r
+       border-right: 1px solid #888;\r
+       /* The "handle" */ \r
+       background-image: linear-gradient(to right, white, white);\r
+       background-size: 18px 18px;\r
+       background-position: top right;\r
+       background-repeat: no-repeat;\r
+       cursor: ew-resize;\r
+}\r
+\r
+/* Provides the *left* border of the "handle" */\r
+div.imagediff-slider-left {\r
+       position: absolute;\r
+       top: 0px;\r
+       right: 0px;\r
+       bottom: 0px;\r
+       margin-right:18px;\r
+       border-right: 1px solid #888;\r
 }\r
 \r
 /* End image diffs */\r