intercal/interchan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add inline image expansion

Browse Source 
Clicking an image will expand it.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>
This commit is contained in:
Alek Ratzloff
2022-07-12 22:26:51 -07:00
parent 0d6b6ca5b5
commit 925c17675f
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
board/static/board/post.js
View File

@@ -220,6 +220,11 @@ $(window).on("load", (e) => {
// Load the original image and display it
let thumbnail = e.target;
let url = $(thumbnail).attr("data-url");
let imgSrc = $(thumbnail).attr("src");
if (url === imgSrc) {
// don't do hover if the image is already expanded
return;
}
$("<img>")
.attr("src", url)
.attr("id", "image_hover")
@@ -229,7 +234,7 @@ $(window).on("load", (e) => {
let thumbRect = thumbnail.getBoundingClientRect();
// get max width based on thumbnail size so there isn't overlap
let maxWidth = window.innerWidth - thumbRect.right - 10;
let maxHeight = window.innerHeight;
let maxHeight = window.innerHeight - 10;
$(e.target)
.css("max-width", maxWidth)
.css("max-height", maxHeight)
@@ -242,6 +247,24 @@ $(window).on("load", (e) => {
$(".post_image").on("mouseout", (e) => {
$("#image_hover").remove();
});
$(".post_image").on("click", (e) => {
e.preventDefault();
let url = $(e.target).attr("data-url");
let thumbUrl = $(e.target).attr("data-thumb");
let imgSrc = $(e.target).attr("src");
if (imgSrc === thumbUrl) {
let thumbRect = e.target.getBoundingClientRect();
let maxWidth = window.innerWidth - thumbRect.left - 20;
let maxHeight = window.innerHeight - 10;
$(e.target).attr("src", url)
.css("max-width", maxWidth)
.css("max-height", maxHeight);
$("#image_hover").remove();
} else {
$(e.target).attr("src", thumbUrl);
}
});
});
window.menuItemFactories = [];