diff options
Diffstat (limited to 'src/main/java')
| -rw-r--r-- | src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java | 5 | ||||
| -rw-r--r-- | src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js | 15 |
2 files changed, 14 insertions, 6 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(); }); }); }); |