Files
czchan/web/ts/expand.ts
2026-04-16 21:39:15 +02:00

134 lines
3.1 KiB
TypeScript

import $ from "jquery";
const expand = () => {
setup_events($(".thumb-link"));
function setup_events(elements: JQuery<HTMLElement>) {
elements.each(function () {
$(this).on("click", function () {
const srcLink = $(this).attr("href");
const type = $(this).attr("data-type");
switch (type) {
case "image":
toggleImage($(this), srcLink);
break;
case "video":
toggleVideo($(this), srcLink);
break;
case "audio":
toggleAudio($(this), srcLink);
break;
}
$(this).parent().toggleClass("expanded-file");
return false;
});
});
}
function toggleImage(parent: JQuery<any>, srcLink: string | undefined) {
const thumb = parent.find(".thumb");
const src = parent.find(".src");
if (src.length === 0) {
thumb.addClass("loading");
parent.append(`<img class="src" src="${srcLink}">`);
const src = parent.find(".src");
src.hide();
src.on("load", function () {
thumb.removeClass("loading");
thumb.hide();
src.show();
parent.closest(".post-files").addClass("expanded-files");
});
return;
}
thumb.toggle();
src.toggle();
parent.closest(".post-files").toggleClass("expanded-files");
}
function toggleVideo(parent: JQuery<any>, srcLink: string | undefined) {
const expanded = parent.parent().hasClass("expanded-file");
const thumb = parent.find(".thumb");
const src = parent.parent().find(".src");
if (src.length === 0) {
parent.append('<div class="center"><b class="closer">[Zavřít]</b></div>');
parent
.parent()
.append(
`<video class="src" src="${srcLink}" controls="" loop=""></video>`,
);
const src = parent.parent().find(".src");
thumb.hide();
src.show();
(src.get(0) as any).play();
return;
}
thumb.toggle();
src.toggle();
if (expanded) {
(src.get(0) as any).pause();
(src.get(0) as any).currentTime = 0;
} else {
(src.get(0) as any).play();
}
parent.closest(".post-files").toggleClass("expanded-files");
parent.find(".closer").toggle();
}
function toggleAudio(parent: JQuery<any>, srcLink: string | undefined) {
const expanded = parent.parent().hasClass("expanded-file");
const thumb = parent.find(".thumb");
const src = parent.parent().find(".src");
if (src.length === 0) {
parent.append('<div class="center"><b class="closer">[Zavřít]</b></div>');
parent
.parent()
.append(
`<audio class="src" src="${srcLink}" controls="" loop=""></audio>`,
);
const src = parent.parent().find(".src");
thumb.hide();
src.show();
(src.get(0) as any).play();
return;
}
thumb.toggle();
src.toggle();
if (expanded) {
(src.get(0) as any).pause();
(src.get(0) as any).currentTime = 0;
} else {
(src.get(0) as any).play();
}
parent.closest(".post-files").toggleClass("expanded-files");
parent.find(".closer").toggle();
}
};
export default expand;