From b6f47539cd1a1dafe05ffd6fdc40bce4547c479d Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 18 Nov 2014 00:25:41 +0100 Subject: Add a blink comparator and pixel difference to image diffs Pixel difference uses CSS mix-blend-mode, which is supported currently only on Firefox >= 32 and on Safari >= 7.1. Implementation is behind a Javascript feature test. For other browsers, there's a blink comparator. Code changes: * ImageDiffHandler now takes the page it's used on as argument. We need that to get labels. DOM generated is a little bit different (new controls). * Diff pages adapted to new constructor of ImageDiffHandler. * CSS and Javascript changes implementing the new controls, making use of two new static image resources. Since I felt that the new controls deserved tooltips, I also gave the opacity slider a tooltip: changed to , and slider handle changed from
to . CSS ensures everything still displays the same (basically display:inline-block). * Supplied messages for English, French, and German for the new tooltips. Tested on IE8, Safari 6.1.6 & 7.1, Chrome 38, FF 33.1 & FF 3.6.13 --- .../com/gitblit/wicket/pages/ImageDiffHandler.java | 32 ++++++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) (limited to 'src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java') diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java index 52bf13b9..dc0c5ae8 100644 --- a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java +++ b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java @@ -18,6 +18,7 @@ package com.gitblit.wicket.pages; import java.nio.charset.StandardCharsets; import java.util.List; +import org.apache.wicket.protocol.http.WebApplication; import org.apache.wicket.protocol.http.WicketURLEncoder; import org.eclipse.jgit.diff.DiffEntry; import org.eclipse.jgit.diff.DiffEntry.Side; @@ -37,14 +38,14 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { private final String oldCommitId; private final String newCommitId; private final String repositoryName; - private final String baseUrl; + private final BasePage page; private final List imageExtensions; private int imgDiffCount = 0; - public ImageDiffHandler(final String baseUrl, final String repositoryName, final String oldCommitId, - final String newCommitId, final List imageExtensions) { - this.baseUrl = baseUrl; + public ImageDiffHandler(final BasePage page, final String repositoryName, final String oldCommitId, final String newCommitId, + final List imageExtensions) { + this.page = page; this.repositoryName = repositoryName; this.oldCommitId = oldCommitId; this.newCommitId = newCommitId; @@ -81,7 +82,19 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { 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); wrapper.appendElement("br"); - wrapper.appendElement("div").attr("class", "imgdiff-opa-container").appendElement("div").attr("class", "imgdiff-opa-slider"); + Element controls = wrapper.appendElement("div"); + // Opacity slider + controls.appendElement("div").attr("class", "imgdiff-opa-container").appendElement("a").attr("class", "imgdiff-opa-slider") + .attr("href", "#").attr("title", page.getString("gb.opacityAdjust")); + // Blink comparator: find Pluto! + controls.appendElement("a").attr("class", "imgdiff-link imgdiff-blink").attr("href", "#") + .attr("title", page.getString("gb.blinkComparator")) + .appendElement("img").attr("src", getStaticResourceUrl("blink32.png")).attr("width", "20"); + // Pixel subtraction, initially not displayed, will be shown by imgdiff.js depending on feature test. + // (Uses CSS mix-blend-mode, which isn't supported on all browsers yet). + controls.appendElement("a").attr("class", "imgdiff-link imgdiff-subtract").attr("href", "#") + .attr("title", page.getString("gb.imgdiffSubtract")).attr("style", "display:none;") + .appendElement("img").attr("src", getStaticResourceUrl("sub32.png")).attr("width", "20"); return builder.toString(); } break; @@ -118,7 +131,7 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { if (ext.equalsIgnoreCase(extension)) { String commitId = Side.NEW.equals(side) ? newCommitId : oldCommitId; if (commitId != null) { - return RawServlet.asLink(baseUrl, urlencode(repositoryName), commitId, urlencode(path)); + return RawServlet.asLink(page.getContextUrl(), urlencode(repositoryName), commitId, urlencode(path)); } else { return null; } @@ -128,6 +141,13 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { return null; } + /** + * Returns a URL that will fetch the designated static resource from within GitBlit. + */ + protected String getStaticResourceUrl(String contextRelativePath) { + return WebApplication.get().getRequestCycleProcessor().getRequestCodingStrategy().rewriteStaticRelativeUrl(contextRelativePath); + } + /** * Encode a URL component of a {@link RawServlet} URL in the special way that the servlet expects it. Note that * the %-encoding used does not encode '&' or '<'. Slashes are not encoded in the result. -- cgit v1.2.3