From: Tom <tw201207@gmail.com>
Date: Thu, 13 Nov 2014 20:57:50 +0000 (+0100)
Subject: Fix that opacity slider
X-Git-Tag: v1.7.0~1^2~106^2~3
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=11e5e5d409e6c80617b3569199e404c8e4e44e06;p=gitblit.git

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 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 */