Tom
2014-11-14 12de8838924c8f14e803bf090da34fe0ef5de102
refs
author Tom <tw201207@gmail.com>
Friday, November 14, 2014 16:14 -0500
committer Tom <tw201207@gmail.com>
Friday, November 14, 2014 16:14 -0500
commit12de8838924c8f14e803bf090da34fe0ef5de102
tree 9f628a5c14202c34fedf9633f5c66da9996dad0c tree | zip | gz
parent 11e5e5d409e6c80617b3569199e404c8e4e44e06 view | diff
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.)
3 files modified
333 ■■■■ changed files
src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java 13 ●●●● diff | view | raw | blame | history
src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js 143 ●●●●● diff | view | raw | blame | history
src/main/resources/gitblit.css 177 ●●●●● diff | view | raw | blame | history