@@ -61,6 +60,6 @@ - + \ No newline at end of file diff --git a/src/main/java/com/gitblit/wicket/pages/BlobPage.java b/src/main/java/com/gitblit/wicket/pages/BlobPage.java index 3c244f9a..df30e4cc 100644 --- a/src/main/java/com/gitblit/wicket/pages/BlobPage.java +++ b/src/main/java/com/gitblit/wicket/pages/BlobPage.java @@ -137,6 +137,7 @@ public class BlobPage extends RepositoryPage { table = missingBlob(blobPath, commit); } else { table = generateSourceView(source, extension, type == 1); + addBottomScriptInline("jQuery(prettyPrint);"); } add(new Label("blobText", table).setEscapeModelStrings(false)); add(new Image("blobImage").setVisible(false)); @@ -150,6 +151,7 @@ public class BlobPage extends RepositoryPage { table = missingBlob(blobPath, commit); } else { table = generateSourceView(source, null, false); + addBottomScriptInline("jQuery(prettyPrint);"); } add(new Label("blobText", table).setEscapeModelStrings(false)); add(new Image("blobImage").setVisible(false)); -- cgit v1.2.3 From 3e1336cc6d32511daf2acab9c45a517cd3b10058 Mon Sep 17 00:00:00 2001 From: Tom Date: Wed, 12 Nov 2014 20:31:12 +0100 Subject: Opacity adjustments for image diffs * ImageDiffHandler adds the slider; styled in gitblit.css * imgdiff.js is a little bottom-loaded Javascript that adjusts the opacity on sliders' scroll events. * The three diff pages add this bottom script to the page if needed * GitBlitDiffFormatter: center image diffs. --- .../com/gitblit/utils/GitBlitDiffFormatter.java | 2 +- .../com/gitblit/wicket/pages/BlobDiffPage.java | 6 +++++ .../com/gitblit/wicket/pages/CommitDiffPage.java | 3 +++ .../java/com/gitblit/wicket/pages/ComparePage.java | 3 +++ .../com/gitblit/wicket/pages/ImageDiffHandler.java | 16 +++++++++-- .../com/gitblit/wicket/pages/scripts/imgdiff.js | 23 ++++++++++++++++ src/main/resources/gitblit.css | 31 +++++++++++++++++++++- 7 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js (limited to 'src/main/java/com/gitblit/wicket') diff --git a/src/main/java/com/gitblit/utils/GitBlitDiffFormatter.java b/src/main/java/com/gitblit/utils/GitBlitDiffFormatter.java index edaed70f..3c65267b 100644 --- a/src/main/java/com/gitblit/utils/GitBlitDiffFormatter.java +++ b/src/main/java/com/gitblit/utils/GitBlitDiffFormatter.java @@ -150,7 +150,7 @@ public class GitBlitDiffFormatter extends DiffFormatter { { String binaryDiff = binaryDiffHandler.renderBinaryDiff(formatter.entry); if (binaryDiff != null) { - byte[] bb = ("" + binaryDiff + "").getBytes(StandardCharsets.UTF_8); + byte[] bb = ("" + binaryDiff + "").getBytes(StandardCharsets.UTF_8); super.write(bb, 0, bb.length); return; } diff --git a/src/main/java/com/gitblit/wicket/pages/BlobDiffPage.java b/src/main/java/com/gitblit/wicket/pages/BlobDiffPage.java index 517e80b8..71516ec8 100644 --- a/src/main/java/com/gitblit/wicket/pages/BlobDiffPage.java +++ b/src/main/java/com/gitblit/wicket/pages/BlobDiffPage.java @@ -55,6 +55,9 @@ public class BlobDiffPage extends RepositoryPage { ImageDiffHandler handler = new ImageDiffHandler(getContextUrl(), repositoryName, parent.getName(), commit.getName(), imageExtensions); diff = DiffUtils.getDiff(r, commit, blobPath, DiffOutputType.HTML, handler).content; + if (handler.getImgDiffCount() > 0) { + addBottomScript("scripts/imgdiff.js"); // Tiny support script for image diffs + } add(new BookmarkablePageLink("patchLink", PatchPage.class, WicketUtils.newPathParameter(repositoryName, objectId, blobPath))); } else { @@ -63,6 +66,9 @@ public class BlobDiffPage extends RepositoryPage { ImageDiffHandler handler = new ImageDiffHandler(getContextUrl(), repositoryName, baseCommit.getName(), commit.getName(), imageExtensions); diff = DiffUtils.getDiff(r, baseCommit, commit, blobPath, DiffOutputType.HTML, handler).content; + if (handler.getImgDiffCount() > 0) { + addBottomScript("scripts/imgdiff.js"); // Tiny support script for image diffs + } add(new BookmarkablePageLink("patchLink", PatchPage.class, WicketUtils.newBlobDiffParameter(repositoryName, baseObjectId, objectId, blobPath))); diff --git a/src/main/java/com/gitblit/wicket/pages/CommitDiffPage.java b/src/main/java/com/gitblit/wicket/pages/CommitDiffPage.java index 77d5ccf3..e40af515 100644 --- a/src/main/java/com/gitblit/wicket/pages/CommitDiffPage.java +++ b/src/main/java/com/gitblit/wicket/pages/CommitDiffPage.java @@ -85,6 +85,9 @@ public class CommitDiffPage extends RepositoryPage { final ImageDiffHandler handler = new ImageDiffHandler(getContextUrl(), repositoryName, parents.isEmpty() ? null : parents.get(0), commit.getName(), imageExtensions); final DiffOutput diff = DiffUtils.getCommitDiff(r, commit, DiffOutputType.HTML, handler); + if (handler.getImgDiffCount() > 0) { + addBottomScript("scripts/imgdiff.js"); // Tiny support script for image diffs + } // add commit diffstat int insertions = 0; diff --git a/src/main/java/com/gitblit/wicket/pages/ComparePage.java b/src/main/java/com/gitblit/wicket/pages/ComparePage.java index dae8d8ea..c0141eba 100644 --- a/src/main/java/com/gitblit/wicket/pages/ComparePage.java +++ b/src/main/java/com/gitblit/wicket/pages/ComparePage.java @@ -117,6 +117,9 @@ public class ComparePage extends RepositoryPage { fromCommit.getName(), toCommit.getName(), imageExtensions); final DiffOutput diff = DiffUtils.getDiff(r, fromCommit, toCommit, DiffOutputType.HTML, handler); + if (handler.getImgDiffCount() > 0) { + addBottomScript("scripts/imgdiff.js"); // Tiny support script for image diffs + } // add compare diffstat int insertions = 0; diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java index 69d84f4e..4278f238 100644 --- a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java +++ b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java @@ -40,6 +40,8 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { private final String baseUrl; 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; @@ -62,8 +64,10 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { String oldUrl = getImageUrl(diffEntry, Side.OLD); String newUrl = getImageUrl(diffEntry, Side.NEW); if (oldUrl != null && newUrl != null) { + imgDiffCount++; + String id = "imgdiff" + imgDiffCount; HtmlBuilder builder = new HtmlBuilder("div"); - Element container = builder.root().appendElement("div").attr("class", "imgdiff"); + Element container = builder.root().attr("align", "center").appendElement("div").attr("class", "imgdiff"); Element resizeable = 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, @@ -73,8 +77,11 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { // 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 imgdiff-left").attr("style", "max-width:640px;").attr("src", oldUrl); + 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"); return builder.toString(); } break; @@ -90,6 +97,11 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { return null; } + /** Returns the number of image diffs generated so far by this {@link ImageDiffHandler}. */ + public int getImgDiffCount() { + return imgDiffCount; + } + /** * Constructs a URL that will fetch the designated resource in the git repository. The returned string will * contain the URL fully URL-escaped, but note that it may still contain unescaped ampersands, so the result diff --git a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js new file mode 100644 index 00000000..faa2f334 --- /dev/null +++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js @@ -0,0 +1,23 @@ +/* + * Copyright 2014 Tom + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +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); + }) +}); diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css index f6d6b24d..bdab2056 100644 --- a/src/main/resources/gitblit.css +++ b/src/main/resources/gitblit.css @@ -1486,14 +1486,43 @@ div.imgdiff-left:before { img.imgdiff-left { margin-left: 18px; /* Compensate for padding on outer div. */ + user-select: none; } 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; } .diff-img { - margin: 2px 2px; + margin: 2px; +} + +div.imgdiff-slider { + display: inline-block; + position: relative; + margin: 0px 2px; + width: 420px; + max-width: 420px; + height: 24px; + min-height: 18px; + overflow-x: scroll; + background: linear-gradient(to right, #F00, #0F0); +} + +div.imgdiff-slider-inner { + position: absolute; + bottom: 0; + margin: 0; + padding: 0; + width : 1000%; + height: 1px; + border: none; + background: transparent; } /* End image diffs */ -- cgit v1.2.3 From b95f47005679e25e2da67e0747edfec81d973cfe Mon Sep 17 00:00:00 2001 From: Tom Date: Thu, 13 Nov 2014 08:41:25 +0100 Subject: Typo in comment, and optional semicolon in JS --- src/main/java/com/gitblit/wicket/pages/BasePage.java | 2 +- src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/main/java/com/gitblit/wicket') diff --git a/src/main/java/com/gitblit/wicket/pages/BasePage.java b/src/main/java/com/gitblit/wicket/pages/BasePage.java index 534c196b..fbe5861b 100644 --- a/src/main/java/com/gitblit/wicket/pages/BasePage.java +++ b/src/main/java/com/gitblit/wicket/pages/BasePage.java @@ -515,7 +515,7 @@ public abstract class BasePage extends SessionPage { * Adds a HTML script element loading the javascript designated by the given path. * * @param scriptPath - * page-relative path to the Javascript resource; normally starts with "script/" + * page-relative path to the Javascript resource; normally starts with "scripts/" */ protected void addBottomScript(String scriptPath) { Component bottomScriptContainer = get("bottomScripts"); 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 faa2f334..2be43172 100644 --- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js +++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js @@ -19,5 +19,5 @@ jQuery(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); - }) + }); }); -- cgit v1.2.3 From 11e5e5d409e6c80617b3569199e404c8e4e44e06 Mon Sep 17 00:00:00 2001 From: Tom Date: Thu, 13 Nov 2014 21:57:50 +0100 Subject: Fix that opacity slider Using the browser's built-in slider doesn't work if the browser hides scrollbars (like Firefox on Mac). So,construct our own slider with three divs and some CSS. Event-handling Javascript changed to match this new implementation. --- .../com/gitblit/wicket/pages/ImageDiffHandler.java | 5 ++- .../com/gitblit/wicket/pages/scripts/imgdiff.js | 15 +++++-- src/main/resources/gitblit.css | 52 ++++++++++++++-------- 3 files changed, 48 insertions(+), 24 deletions(-) (limited to 'src/main/java/com/gitblit/wicket') 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(); }); }); }); diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css index bdab2056..906b555b 100644 --- a/src/main/resources/gitblit.css +++ b/src/main/resources/gitblit.css @@ -1492,10 +1492,10 @@ img.imgdiff-left { 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; + 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; } .diff-img { @@ -1505,24 +1505,40 @@ img.imagediff { div.imgdiff-slider { display: inline-block; position: relative; - margin: 0px 2px; - width: 420px; - max-width: 420px; - height: 24px; - min-height: 18px; - overflow-x: scroll; + margin: 0px 5px; + width: 418px; + height: 18px; background: linear-gradient(to right, #F00, #0F0); + border: 1px solid #888; } -div.imgdiff-slider-inner { +div.imgdiff-slider-resizeable { position: absolute; - bottom: 0; - margin: 0; - padding: 0; - width : 1000%; - height: 1px; - border: none; - background: transparent; + 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; +} + +/* Provides the *left* border of the "handle" */ +div.imagediff-slider-left { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + margin-right:18px; + border-right: 1px solid #888; } /* End image diffs */ -- cgit v1.2.3 From 12de8838924c8f14e803bf090da34fe0ef5de102 Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 14 Nov 2014 22:14:28 +0100 Subject: 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.) --- .../com/gitblit/wicket/pages/ImageDiffHandler.java | 13 +- .../com/gitblit/wicket/pages/scripts/imgdiff.js | 143 ++++++++++++++++-- src/main/resources/gitblit.css | 167 ++++++++++++--------- 3 files changed, 233 insertions(+), 90 deletions(-) (limited to 'src/main/java/com/gitblit/wicket') diff --git a/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java b/src/main/java/com/gitblit/wicket/pages/ImageDiffHandler.java index 1232e990..52bf13b9 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 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { 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 @@ public class ImageDiffHandler implements DiffUtils.BinaryDiffHandler { // 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; 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 bfde435d..2b2f4f9f 100644 --- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js +++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js @@ -13,18 +13,135 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -jQuery(function () { - // Runs on jQuery's document.ready and sets up the scroll event handlers for all image diffs. - 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); +(function($) { + +/** + * Sets up elem as a slider; returns an access object. Elem must be positioned! + * Note that the element may contain other elements; this is used for instance + * for the image diff overlay slider. + * + * The styling of the slider is to be done in CSS. Currently recognized options: + * - initial: clipped to [0..1], default 0 + * - handleClass: to assign to the handle div element created. + * If no handleClass is specified, a very plain default style is assigned. + */ +function rangeSlider(elem, options) { + options = $.extend({ initial : 0 }, options || {}); + options.initial = Math.min(1.0, Math.max(0, options.initial)); + + var $elem = $(elem); + var $handle = $('

').css({ position: 'absolute', left: 0, cursor: 'ew-resize' }); + var $root = $(document.documentElement); + var $doc = $(document); + var lastRatio = options.initial; + + /** Mousemove event handler to track the mouse and move the slider. Generates slider:pos events. */ + function track(e) { + var pos = $elem.offset().left; + var width = $elem.width(); + var handleWidth = $handle.width(); + var range = width - handleWidth; + if (range <= 0) return; + var delta = Math.min(range, Math.max (0, e.pageX - pos - handleWidth / 2)); + lastRatio = delta / range; + $handle.css('left', "" + (delta * 100 / width) + '%'); + $elem.trigger('slider:pos', { ratio: lastRatio, handle: $handle[0] }); + } + + /** Mouseup event handler to stop mouse tracking. */ + function end(e) { + $doc.off('mousemove', track); + $doc.off('mouseup', end); + $root.removeClass('no-select'); + } + + /** Snaps the slider to the given ratio and generates a slider:pos event with the new ratio. */ + function setTo(ratio) { + var w = $elem.width(); + if (w <= 0 || $elem.is(':hidden')) return; + lastRatio = Math.min( 1.0, Math.max(0, ratio)); + $handle.css('left', "" + Math.max(0, 100 * (lastRatio * (w - $handle.width())) / w) + '%'); + $elem.trigger('slider:pos', { ratio: lastRatio, handle: $handle[0] }); + } + + /** + * Moves the slider to the given ratio, clipped to [0..1], in duration milliseconds. + * Generates slider:pos events during the animation. If duration === 0, same as setTo. + * Default duration is 500ms. + */ + function moveTo(ratio, duration) { + ratio = Math.min(1.0, Math.max(0, ratio)); + if (ratio === lastRatio) return; + if (typeof duration == 'undefined') duration = 500; + if (duration === 0) { + setTo(ratio); + } else { + var target = ratio * ($elem.width() - $handle.width()); + if (ratio > lastRatio) target--; else target++; + $handle.animate({left: target}, + { 'duration' : duration, + 'step' : function() { + lastRatio = Math.min(1.0, Math.max(0, $handle.offset().left / ($elem.width() - $handle.width()))); + $elem.trigger('slider:pos', { ratio : lastRatio, handle : $handle[0] }); + }, + 'complete' : function() { setTo(ratio); } // Last step gives us a % value again. + } + ); } - // 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(); }); + } + + /** Returns the current ratio. */ + function getValue() { + return lastRatio; + } + + $elem.append($handle); + if (options.handleClass) { + $handle.addClass(options.handleClass); + } else { // Provide a default style so that it is at least visible + $handle.css({ width: '10px', height: '10px', background: 'white', border: '1px solid black' }); + } + if (options.initial) setTo(options.initial); + + /** Install mousedown handler to start mouse tracking. */ + $handle.on('mousedown', function(e) { + $root.addClass('no-select'); + $doc.on('mousemove', track); + $doc.on('mouseup', end); + }); + + return { setRatio: setTo, moveRatio: moveTo, getRatio: getValue, handle: $handle[0] }; +} + +function setup() { + $('.imgdiff-container').each(function() { + var $this = $(this); + var $overlaySlider = $this.find('.imgdiff-ovr-slider').first(); + var $opacitySlider = $this.find('.imgdiff-opa-slider').first(); + var overlayAccess = rangeSlider($overlaySlider, {handleClass: 'imgdiff-ovr-handle'}); + rangeSlider($opacitySlider, {handleClass: 'imgdiff-opa-handle'}); + var $img = $('#' + this.id.substr(this.id.indexOf('-')+1)); // Here we change opacity + var $div = $img.parent(); // This controls visibility: here we change width. + + $overlaySlider.on('slider:pos', function(e, data) { + var pos = $(data.handle).offset().left; + var imgLeft = $img.offset().left; // Global + var imgW = $img.width() + $img.position().left; // From left edge of $div + if (pos <= imgLeft) { + $div.width(0); + } else if (pos <= imgLeft + imgW) { + $div.width(pos - imgLeft); + } else if ($div.width() < imgW) { + $div.width(imgW); + } + }); + $opacitySlider.on('slider:pos', function(e, data) { + if ($div.width() <= 0) overlayAccess.moveRatio(1.0, 500); // Make old image visible in a nice way + $img.css('opacity', 1.0 - data.ratio); + }); }); -}); +} + +$(setup); // Run on jQuery's dom-ready + +})(jQuery); \ No newline at end of file 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 */ -- cgit v1.2.3 From feefe7a2febab2e9fecc44b170ae900215816f7c Mon Sep 17 00:00:00 2001 From: Tom Date: Sat, 15 Nov 2014 01:09:47 +0100 Subject: Minor corrections in Javascript 1. Stop running animation before starting a new one. 2. Fix ratio in animation 3. Fix div width None of these change have any visible effect in the current use of this script. (1) is just being safe, in (2) , the wrongly calculated value was never used,and in (3), the div was a little too wide before. --- src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'src/main/java/com/gitblit/wicket') 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 2b2f4f9f..27cca8ca 100644 --- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js +++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js @@ -78,10 +78,10 @@ function rangeSlider(elem, options) { } else { var target = ratio * ($elem.width() - $handle.width()); if (ratio > lastRatio) target--; else target++; - $handle.animate({left: target}, + $handle.stop().animate({left: target}, { 'duration' : duration, 'step' : function() { - lastRatio = Math.min(1.0, Math.max(0, $handle.offset().left / ($elem.width() - $handle.width()))); + lastRatio = Math.min(1.0, Math.max(0, $handle.position().left / ($elem.width() - $handle.width()))); $elem.trigger('slider:pos', { ratio : lastRatio, handle : $handle[0] }); }, 'complete' : function() { setTo(ratio); } // Last step gives us a % value again. @@ -126,13 +126,14 @@ function setup() { $overlaySlider.on('slider:pos', function(e, data) { var pos = $(data.handle).offset().left; var imgLeft = $img.offset().left; // Global - var imgW = $img.width() + $img.position().left; // From left edge of $div + var imgW = $img.outerWidth(); + var imgOff = $img.position().left; // From left edge of $div if (pos <= imgLeft) { $div.width(0); } else if (pos <= imgLeft + imgW) { - $div.width(pos - imgLeft); - } else if ($div.width() < imgW) { - $div.width(imgW); + $div.width(pos - imgLeft + imgOff); + } else if ($div.width() < imgW + imgOff) { + $div.width(imgW + imgOff); } }); $opacitySlider.on('slider:pos', function(e, data) { -- cgit v1.2.3 From 4fdbcf55a0d9938e1a131f65f5b61f9f79ad2452 Mon Sep 17 00:00:00 2001 From: Tom Date: Sat, 15 Nov 2014 20:04:48 +0100 Subject: Make the sliders clickable. Always having to drag is cumbersome. Now the slider's handle can also be set by clicking on the slider. Heh :-) I see the GitHub UI designers hadn't thought of that. --- .../com/gitblit/wicket/pages/scripts/imgdiff.js | 78 +++++++++++++++++----- 1 file changed, 61 insertions(+), 17 deletions(-) (limited to 'src/main/java/com/gitblit/wicket') 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 27cca8ca..c98a05a4 100644 --- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js +++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js @@ -38,8 +38,8 @@ function rangeSlider(elem, options) { /** Mousemove event handler to track the mouse and move the slider. Generates slider:pos events. */ function track(e) { var pos = $elem.offset().left; - var width = $elem.width(); - var handleWidth = $handle.width(); + var width = $elem.innerWidth(); + var handleWidth = $handle.outerWidth(false); var range = width - handleWidth; if (range <= 0) return; var delta = Math.min(range, Math.max (0, e.pageX - pos - handleWidth / 2)); @@ -57,44 +57,64 @@ function rangeSlider(elem, options) { /** Snaps the slider to the given ratio and generates a slider:pos event with the new ratio. */ function setTo(ratio) { - var w = $elem.width(); + var w = $elem.innerWidth(); if (w <= 0 || $elem.is(':hidden')) return; lastRatio = Math.min( 1.0, Math.max(0, ratio)); - $handle.css('left', "" + Math.max(0, 100 * (lastRatio * (w - $handle.width())) / w) + '%'); + $handle.css('left', "" + Math.max(0, 100 * (lastRatio * (w - $handle.outerWidth(false))) / w) + '%'); $elem.trigger('slider:pos', { ratio: lastRatio, handle: $handle[0] }); } /** * Moves the slider to the given ratio, clipped to [0..1], in duration milliseconds. - * Generates slider:pos events during the animation. If duration === 0, same as setTo. - * Default duration is 500ms. + * Generates slider:pos events during the animation. If duration <= 30, same as setTo. + * Default duration is 500ms. If a callback is given, it's called once the animation + * has completed. */ - function moveTo(ratio, duration) { + function moveTo(ratio, duration, callback) { ratio = Math.min(1.0, Math.max(0, ratio)); - if (ratio === lastRatio) return; + if (ratio === lastRatio) { + if (typeof callback == 'function') callback(); + return; + } if (typeof duration == 'undefined') duration = 500; - if (duration === 0) { + if (duration <= 30) { + // Cinema is 24 or 48 frames/sec, so 20-40ms per frame. Makes no sense to animate for such a short duration. setTo(ratio); + if (typeof callback == 'function') callback(); } else { - var target = ratio * ($elem.width() - $handle.width()); + var target = ratio * ($elem.innerWidth() - $handle.outerWidth(false)); if (ratio > lastRatio) target--; else target++; $handle.stop().animate({left: target}, { 'duration' : duration, 'step' : function() { - lastRatio = Math.min(1.0, Math.max(0, $handle.position().left / ($elem.width() - $handle.width()))); + lastRatio = Math.min(1.0, Math.max(0, $handle.position().left / ($elem.innerWidth() - $handle.outerWidth(false)))); $elem.trigger('slider:pos', { ratio : lastRatio, handle : $handle[0] }); }, - 'complete' : function() { setTo(ratio); } // Last step gives us a % value again. + 'complete' : function() { setTo(ratio); if (typeof callback == 'function') callback(); } // Ensure we have again a % value } ); } } + /** + * As moveTo, but determines an appropriate duration in the range [0..maxDuration] on its own, + * depending on the distance the handle would move. If no maxDuration is given it defaults + * to 1500ms. + */ + function moveAuto(ratio, maxDuration, callback) { + if (typeof maxDuration == 'undefined') maxDuration = 1500; + var delta = ratio - lastRatio; + if (delta < 0) delta = -delta; + var speed = $elem.innerWidth() * delta * 2; + if (speed > maxDuration) speed = maxDuration; + moveTo(ratio, speed, callback); + } + /** Returns the current ratio. */ function getValue() { return lastRatio; } - + $elem.append($handle); if (options.handleClass) { $handle.addClass(options.handleClass); @@ -108,9 +128,11 @@ function rangeSlider(elem, options) { $root.addClass('no-select'); $doc.on('mousemove', track); $doc.on('mouseup', end); + e.stopPropagation(); + e.preventDefault(); }); - return { setRatio: setTo, moveRatio: moveTo, getRatio: getValue, handle: $handle[0] }; + return { setRatio: setTo, moveRatio: moveTo, 'moveAuto': moveAuto, getRatio: getValue, handle: $handle[0] }; } function setup() { @@ -119,14 +141,14 @@ function setup() { var $overlaySlider = $this.find('.imgdiff-ovr-slider').first(); var $opacitySlider = $this.find('.imgdiff-opa-slider').first(); var overlayAccess = rangeSlider($overlaySlider, {handleClass: 'imgdiff-ovr-handle'}); - rangeSlider($opacitySlider, {handleClass: 'imgdiff-opa-handle'}); + var opacityAccess = rangeSlider($opacitySlider, {handleClass: 'imgdiff-opa-handle'}); var $img = $('#' + this.id.substr(this.id.indexOf('-')+1)); // Here we change opacity var $div = $img.parent(); // This controls visibility: here we change width. $overlaySlider.on('slider:pos', function(e, data) { var pos = $(data.handle).offset().left; var imgLeft = $img.offset().left; // Global - var imgW = $img.outerWidth(); + var imgW = $img.outerWidth(true); var imgOff = $img.position().left; // From left edge of $div if (pos <= imgLeft) { $div.width(0); @@ -136,10 +158,32 @@ function setup() { $div.width(imgW + imgOff); } }); + $overlaySlider.css('cursor', 'pointer'); + $overlaySlider.on('mousedown', function(e) { + var newRatio = (e.pageX - $overlaySlider.offset().left) / $overlaySlider.innerWidth(); + var oldRatio = overlayAccess.getRatio(); + if (newRatio !== oldRatio) { + overlayAccess.moveAuto(newRatio); + } + }); $opacitySlider.on('slider:pos', function(e, data) { - if ($div.width() <= 0) overlayAccess.moveRatio(1.0, 500); // Make old image visible in a nice way + if ($div.width() <= 0) overlayAccess.moveAuto(1.0); // Make old image visible in a nice way $img.css('opacity', 1.0 - data.ratio); }); + $opacitySlider.css('cursor', 'pointer'); + $opacitySlider.on('mousedown', function(e) { + var newRatio = (e.pageX - $opacitySlider.offset().left) / $opacitySlider.innerWidth(); + var oldRatio = opacityAccess.getRatio(); + if (newRatio !== oldRatio) { + if ($div.width() <= 0) { + overlayAccess.moveRatio(1.0, 500, function() {opacityAccess.moveAuto(newRatio);}); // Make old image visible in a nice way + } else { + opacityAccess.moveAuto(newRatio) + } + } + e.preventDefault(); + }); + }); } -- cgit v1.2.3