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.

3 files changed, 48 insertions, 24 deletions

diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
index 4278f238..1232e990 100644
--- 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 2be43172..bfde435d 100644
--- 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 bdab2056..906b555b 100644
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -1492,10 +1492,10 @@ img.imgdiff-left {
 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 @@ img.imagediff {
 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 */