nekrochan/static/js/expand-image.js

87 řádky
2.1 KiB
JavaScript

$(function () {
$(".expandable").click(function () {
let src_link = $(this).attr("href");
let is_video = [".mpeg", ".mov", ".mp4", ".webm", ".mkv", ".ogg"].some(
(ext) => src_link.endsWith(ext)
);
if (!is_video) {
toggle_image($(this), src_link);
} else {
toggle_video($(this), src_link);
}
$(this).toggleClass("expanded");
return false;
});
});
function toggle_image(parent, src_link) {
let expanded = parent.hasClass("expanded");
let thumb = parent.find(".thumb");
let src = parent.find(".src");
if (!expanded) {
if (src.length === 0) {
thumb.css("opacity", 0.5);
parent.append(`<img class="src" src="${src_link}">`);
let src = parent.find(".src");
src.hide();
src.on("load", function () {
thumb.hide();
thumb.css("opacity", "");
src.show();
});
} else {
thumb.hide();
src.show();
}
} else {
src.hide();
thumb.show();
}
}
function toggle_video(parent, src_link) {
let expanded = parent.hasClass("expanded");
let thumb = parent.find(".thumb");
let src = parent.parent().find(".src");
if (!expanded) {
if (src.length === 0) {
thumb.css("opacity", 0.5);
parent.append('<span class="closer">[Zavřít]<br></span>')
parent.parent().append(
`<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>`
);
let src = parent.parent().find(".src");
src.hide();
src.on("loadstart", function () {
thumb.hide();
thumb.css("opacity", "");
src.show();
});
} else {
thumb.hide();
src.show();
src.get(0).play();
parent.find(".closer").show();
}
} else {
src.get(0).pause();
src.hide();
thumb.show();
parent.find(".closer").hide();
}
}