Merge pull request #1365 from thelounge/astorije/image-viewer-previous-next

Add Previous/Next cycling buttons to the image viewer
This commit is contained in:
Jérémie Astori 2017-07-24 01:47:53 -04:00 committed by GitHub
commit 2a81af6949
3 changed files with 101 additions and 9 deletions

View File

@ -209,7 +209,9 @@ kbd {
#chat .action .from:before, #chat .action .from:before,
#chat .toggle-button:after, #chat .toggle-button:after,
.context-menu-item:before, .context-menu-item:before,
#nick button:before { #nick button:before,
#image-viewer .previous-image-btn:before,
#image-viewer .next-image-btn:before {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */ font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -332,6 +334,14 @@ kbd {
content: "\f00d"; /* http://fontawesome.io/icon/times/ */ content: "\f00d"; /* http://fontawesome.io/icon/times/ */
} }
#image-viewer .previous-image-btn:before {
content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
}
#image-viewer .next-image-btn:before {
content: "\f105"; /* http://fontawesome.io/icon/angle-right/ */
}
/* End icons */ /* End icons */
#wrap { #wrap {
@ -2051,20 +2061,45 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
opacity: 1; opacity: 1;
} }
#image-viewer .close-btn { #image-viewer .close-btn,
#image-viewer .previous-image-btn,
#image-viewer .next-image-btn {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0;
width: 2em; width: 2em;
height: 2em;
font-size: 36px; font-size: 36px;
color: white; color: white;
z-index: 1001;
opacity: .6; opacity: .6;
transition: .2s opacity; transition: .2s opacity;
} }
#image-viewer .close-btn:hover { #image-viewer .close-btn {
right: 0;
height: 2em;
z-index: 1002;
}
#image-viewer .close-btn:before {
content: "×";
}
#image-viewer .previous-image-btn,
#image-viewer .next-image-btn {
bottom: 0;
z-index: 1001;
}
#image-viewer .previous-image-btn {
left: 0;
}
#image-viewer .next-image-btn {
right: 0;
}
#image-viewer .close-btn:hover,
#image-viewer .previous-image-btn:hover,
#image-viewer .next-image-btn:hover {
opacity: 1; opacity: 1;
} }

View File

@ -100,19 +100,68 @@ $(document).keydown(function(e) {
case 27: // Escape case 27: // Escape
closeImageViewer(); closeImageViewer();
break; break;
case 37: // Left arrow
if ($(document.body).hasClass("image-viewer-opened")) {
$("#image-viewer .previous-image-btn").click();
}
break;
case 39: // Right arrow
if ($(document.body).hasClass("image-viewer-opened")) {
$("#image-viewer .next-image-btn").click();
}
break;
} }
}); });
function openImageViewer(link) { function openImageViewer(link) {
$(".previous-image").removeClass("previous-image");
$(".next-image").removeClass("next-image");
// The next two blocks figure out what are the previous/next images. We first
// look within the same message, as there can be multiple thumbnails per
// message, and if not, we look at previous/next messages and take the
// last/first thumbnail available.
// Only expanded thumbnails are being cycled through.
// Previous image
let previousCandidates = link.closest(".preview").prev(".preview");
if (!previousCandidates.length) {
previousCandidates = link.closest(".msg").prevAll();
}
const previousImage = previousCandidates
.find(".toggle-content.show .toggle-thumbnail").last();
previousImage.addClass("previous-image");
// Next image
let nextCandidates = link.closest(".preview").next(".preview");
if (!nextCandidates.length) {
nextCandidates = link.closest(".msg").nextAll();
}
const nextImage = nextCandidates
.find(".toggle-content.show .toggle-thumbnail").first();
nextImage.addClass("next-image");
$("#image-viewer").html(templates.image_viewer({ $("#image-viewer").html(templates.image_viewer({
image: link.find("img").attr("src"), image: link.find("img").attr("src"),
link: link.attr("href"), link: link.attr("href"),
type: link.parent().hasClass("toggle-type-image") ? "image" : "link" type: link.parent().hasClass("toggle-type-image") ? "image" : "link",
hasPreviousImage: previousImage.length > 0,
hasNextImage: nextImage.length > 0,
})); }));
$(document.body).addClass("image-viewer-opened"); $(document.body).addClass("image-viewer-opened");
} }
$("#image-viewer").on("click", ".previous-image-btn", function() {
$(".previous-image").click();
return false;
});
$("#image-viewer").on("click", ".next-image-btn", function() {
$(".next-image").click();
return false;
});
function closeImageViewer() { function closeImageViewer() {
$(document.body) $(document.body)
.removeClass("image-viewer-opened") .removeClass("image-viewer-opened")

View File

@ -1,7 +1,15 @@
<button class="close-btn" aria-label="Close">×</button> <button class="close-btn" aria-label="Close"></button>
{{#if hasPreviousImage}}
<button class="previous-image-btn" aria-label="Previous image"></button>
{{/if}}
{{#if hasNextImage}}
<button class="next-image-btn" aria-label="Next image"></button>
{{/if}}
<a class="image-link" href="{{link}}" target="_blank"> <a class="image-link" href="{{link}}" target="_blank">
<img src="{{image}}"> <img src="{{image}}" alt="Preview of {{link}}">
</a> </a>
<a class="btn open-btn" href="{{link}}" target="_blank"> <a class="btn open-btn" href="{{link}}" target="_blank">