Javascript-based sliders styled with CSS

This works better for small images. The previous CSS-resize based
attempt worked reasonably well, but had two problems on WebKit
(Safari):

1. For very small images the red resize handle would overlap the image
   itself. In that case, the image became un-draggable as soon as the
   opacity was reduced below 1.0.
   
2. Safari apparently doesn't send mousemove events during a CSS
   resize, so the opacity was changed only on mouseup.
   
Both observed on Safari 6.1.6 and 7.1. FF 33.1 had no problems.

Therefore I've switched to a Javascript slider. Since I didn't find
any that was simple, did not require HTML 5, appeared to be well
maintained, had a bug tracker and not too many outstanding bug reports,
didn't pull in umpteen other dependencies, didn't suffer from feature
bloat, was compatible with jQuery 1.7.1, and was freely licensed, I
ended up writing my own.

imgdiff.js contains a small Javascript slider (only horizontal) that is
styled completely in CSS. It reports ratios in the range [0..1] and
fires nice jQuery events 'slider:pos' on value changes. Base element
is a plain div that is positioned. It's not a general-purpose do-it-all
slider, but it's small, simple, and works for what we need it.

(imgdiff.js also sets up the ese sliders on the diff pages.)

1 files changed, 97 insertions, 70 deletions

diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index 906b555b..5a62de0b 100644
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -1438,107 +1438,134 @@ div.diff > table {
 	color: #555;

 }

 

-/* Image diffs.

-   Kudos to Lea Verou: http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/ 

-   Slightly modified by Tom to allow moving the slider fully at the left edge of the images. */

+/* Image diffs. */

+

+/* Set on body during mouse tracking. */

+.no-select {

+	-webkit-touch-callout:none;

+	-webkit-user-select:none;

+	-khtml-user-select:none;

+	-moz-user-select:none;

+	-ms-user-select:none;

+	user-select:none;

+}

+

+div.imgdiff-container {

+	padding: 10px;

+	background: #EEE;

+}

+

 div.imgdiff {

-	margin: 5px 2px;

-	position: relative;

+	margin: 10px 20px;

+	position:relative;

 	display: inline-block;

-	line-height: 0;

-	padding-left: 18px;

+	/* Checkerboard background to reveal transparency. */

+    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;

 }

 

-/* Note: width defines the initial position of the slider. Would have liked to have it

-   at 50% initially, but that fails on webkit, which refuses to go below the specified

-   width. (min-width won't help.) This is known behavior of webkit, see

-   https://codereview.chromium.org/239983004 and https://bugs.webkit.org/show_bug.cgi?id=72948

-   There is a hack (setting width to 1px in :hover) to work around this, but that causes

-   ugly screen flicker and makes for a dreadful UI. We're better off setting the slider

-   to the far left initially. */

 div.imgdiff-left {

 	position: absolute;

 	top: 0;

 	bottom: 0;

 	left: 0;

-	width: 18px;

+	width: 0;

 	max-width: 100%;

 	overflow: hidden;

-	resize: horizontal;

-	/* Some border that should be visible on most images, combined of a dark color (red)

-	   and white in case the image was all red itself or used other colors that would make

-	   a thin red line hard to make out. */

-	border-right: 1px solid red;

-	box-shadow: 1px 0px 0px 0px white;

 }

 

-div.imgdiff-left:before {

+img.imgdiff {

+	user-select: none;

+	border: 1px solid #0F0;

+}

+img.imgdiff-old {

+	user-select: none;

+	border: 1px solid #F00;

+}

+.imgdiff-opa-container {

+	width: 200px;

+	height: 4px;

+	margin: 12px 35px;

+	padding: 0;

+	position: relative;

+	border-left: 1px solid #888;

+	border-right: 1px solid #888;

+	background: linear-gradient(to bottom, #888, #EEE 50%, #888);

+}

+

+.imgdiff-opa-container:before {

 	content: '';

 	position: absolute;

-	right: 0;

-	bottom: 0;

-	width: 13px;

-	height: 13px;

-	background: linear-gradient(-45deg, red 50%, transparent 0);

-	background-clip: content-box;

-	cursor: ew-resize;

+	left: -20px;

+	top: -4px;

+	width : 12px;

+	height: 12px;

+	background-image: radial-gradient(6px at 50% 50%, rgba(255, 255, 255, 255) 50%, rgba(255, 255, 255, 0) 6px);

 }

 

-img.imgdiff-left {

-	margin-left: 18px; /* Compensate for padding on outer div. */

-	user-select: none;

+.imgdiff-opa-container:after {

+	content: '';

+	position: absolute;

+	right: -20px;

+	top: -4px;

+	width : 12px;

+	height: 12px;

+	background-image: radial-gradient(6px at 50% 50%, #888, #888 1px, transparent 6px);

 }

 

-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;

+.imgdiff-opa-slider {

+	position:absolute;

+	top : 0;

+	left: -5px;

+	bottom: 0;

+	right: -5px;

+	text-align: left;

 }

 

-.diff-img {

-	margin: 2px;

+.imgdiff-opa-handle {

+	width: 10px;

+	height: 10px;

+	position: absolute;

+	top: -3px;

+	background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);

 }

 

-div.imgdiff-slider {

+.imgdiff-ovr-slider {

 	display: inline-block;

+	margin: 0;

+	padding: 0;

 	position: relative;

-	margin: 0px 5px;

-	width: 418px;

-	height: 18px;

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

-	border: 1px solid #888;

+	text-align: left;

 }

 

-div.imgdiff-slider-resizeable {

-	position: absolute;

+.imgdiff-ovr-handle {

+	width : 2px;

+	height: 100%;

 	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;

+	background: linear-gradient(to right, #444, #FFF);

 }

 

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

-div.imagediff-slider-left {

+.imgdiff-ovr-handle:before {

+	content: '';

 	position: absolute;

-	top: 0px;

-	right: 0px;

-	bottom: 0px;

-	margin-right:18px;

-	border-right: 1px solid #888;

+	right: -4px;

+	bottom: -5px;

+	width : 10px;

+	height: 10px;

+	background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);

+}

+

+.imgdiff-ovr-handle:after {

+	content: '';

+	position: absolute;

+	right: -4px;

+	top: -5px;

+	width : 10px;

+	height: 10px;

+	/* border: 1px solid red; */

+	background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);

 }

 

 /* End image diffs */