From 12de8838924c8f14e803bf090da34fe0ef5de102 Mon Sep 17 00:00:00 2001
From: Tom <tw201207@gmail.com>
Date: Fri, 14 Nov 2014 16:14:28 -0500
Subject: [PATCH] Javascript-based sliders styled with CSS

---
 src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java |   13 ++++++-------
 1 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
index 1232e99..52bf13b 100644
--- a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
+++ b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java
@@ -67,8 +67,9 @@
 				imgDiffCount++;
 				String id = "imgdiff" + imgDiffCount;
 				HtmlBuilder builder = new HtmlBuilder("div");
-				Element container = builder.root().attr("align", "center").appendElement("div").attr("class", "imgdiff");
-				Element resizeable = container.appendElement("div").attr("class", "imgdiff-left");
+				Element wrapper = builder.root().attr("class", "imgdiff-container").attr("id", "imgdiff-" + id);
+				Element container = wrapper.appendElement("div").attr("class", "imgdiff-ovr-slider").appendElement("div").attr("class", "imgdiff");
+				Element old = container.appendElement("div").attr("class", "imgdiff-left");
 				// style='max-width:640px;' is necessary for ensuring that the browser limits large images
 				// to some reasonable width, and to override the "img { max-width: 100%; }" from bootstrap.css,
 				// which would scale the left image to the width of its resizeable container, which isn't what
@@ -77,12 +78,10 @@
 				// is too wide.
 				// XXX: Maybe add a max-height, too, to limit portrait-oriented images to some reasonable height?
 				// (Like a 300x10000px image...)
-				resizeable.appendElement("img").attr("class", "imgdiff-left").attr("id", id).attr("style", "max-width:640px;").attr("src", oldUrl);
+				old.appendElement("img").attr("class", "imgdiff-old").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");
-				slider.appendElement("div").attr("class", "imgdiff-slider-resizeable").attr("id", "slider-" + id)
-					.appendElement("div").attr("class", "imgdiff-slider-left");
+				wrapper.appendElement("br");
+				wrapper.appendElement("div").attr("class", "imgdiff-opa-container").appendElement("div").attr("class", "imgdiff-opa-slider");
 				return builder.toString();
 			}
 			break;

--
Gitblit v1.9.1