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:
commit
2a81af6949
@ -209,7 +209,9 @@ kbd {
|
||||
#chat .action .from:before,
|
||||
#chat .toggle-button:after,
|
||||
.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-size: inherit; /* Can't have font-size inherit on line above, so need to override */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -332,6 +334,14 @@ kbd {
|
||||
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 */
|
||||
|
||||
#wrap {
|
||||
@ -2051,20 +2061,45 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#image-viewer .close-btn {
|
||||
#image-viewer .close-btn,
|
||||
#image-viewer .previous-image-btn,
|
||||
#image-viewer .next-image-btn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
font-size: 36px;
|
||||
color: white;
|
||||
z-index: 1001;
|
||||
opacity: .6;
|
||||
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;
|
||||
}
|
||||
|
||||
|
@ -100,19 +100,68 @@ $(document).keydown(function(e) {
|
||||
case 27: // Escape
|
||||
closeImageViewer();
|
||||
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) {
|
||||
$(".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: link.find("img").attr("src"),
|
||||
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");
|
||||
}
|
||||
|
||||
$("#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() {
|
||||
$(document.body)
|
||||
.removeClass("image-viewer-opened")
|
||||
|
@ -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">
|
||||
<img src="{{image}}">
|
||||
<img src="{{image}}" alt="Preview of {{link}}">
|
||||
</a>
|
||||
|
||||
<a class="btn open-btn" href="{{link}}" target="_blank">
|
||||
|
Loading…
Reference in New Issue
Block a user