101 lines
3.6 KiB
JavaScript
101 lines
3.6 KiB
JavaScript
function insertHeaderReplies() {
|
|
const posts = Array.from(document.querySelectorAll("article"));
|
|
const replies = {};
|
|
|
|
for (const post of posts) {
|
|
const postId = +post.id.split("-")[1];
|
|
const postBody = post.querySelector("p").textContent;
|
|
|
|
const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
|
|
for (const replyLinkId of replyLinkIds) {
|
|
replies[replyLinkId] = replies[replyLinkId] ?
|
|
replies[replyLinkId].add(postId) :
|
|
replies[replyLinkId] = new Set([postId]);
|
|
}
|
|
}
|
|
|
|
for (const postId in replies) {
|
|
const post = $(`post-${postId}`);
|
|
if (!post) break;
|
|
|
|
const postRepliesContainer = post.querySelector(".post-replies");
|
|
|
|
const replyIds = Array.from(replies[postId]);
|
|
for (const replyId of replyIds) {
|
|
const replyLink = document.createElement("a");
|
|
replyLink.textContent = `>>${replyId}`;
|
|
replyLink.classList.add("reply-link-header");
|
|
replyLink.setAttribute("href", `#post-${replyId}`);
|
|
|
|
replyLink.onmouseover = (e) => highlightPost(+replyId, e);
|
|
replyLink.onmouseleave = (e) => highlightPost(+replyId, e, false);
|
|
replyLink.onclick = onReplyLinkClick;
|
|
|
|
postRepliesContainer.append(replyLink);
|
|
}
|
|
}
|
|
}
|
|
|
|
function togglePostFile(el) {
|
|
function makeOpaqueUntilReady(el, readyEvt) {
|
|
el.classList.add('post-file-loading');
|
|
el.addEventListener(readyEvt, () => el.classList.remove('post-file-loading'), { once: true });
|
|
}
|
|
|
|
const imgEl = el.parentElement.parentElement.querySelector("img");
|
|
const isVideo = imgEl.dataset.full.endsWith(".mp4") || imgEl.dataset.full.endsWith(".webm") || imgEl.dataset.full.endsWith(".ogg");
|
|
|
|
if (isVideo) {
|
|
const vidEl = imgEl.parentElement.querySelector("video");
|
|
|
|
const closeVidBtn = imgEl.parentElement.querySelector(".link-button");
|
|
if (vidEl.style.display === "none") {
|
|
vidEl.src = "/media/posts/full/" + imgEl.dataset.full;
|
|
makeOpaqueUntilReady(vidEl, 'canplay');
|
|
vidEl.style.display = "";
|
|
imgEl.style.display = "none";
|
|
closeVidBtn.style.display = "";
|
|
}
|
|
else {
|
|
vidEl.src = "";
|
|
vidEl.style.display = "none";
|
|
imgEl.style.display = "";
|
|
closeVidBtn.style.display = "none";
|
|
}
|
|
}
|
|
else {
|
|
if (imgEl.classList.contains("post-img-full")) {
|
|
imgEl.classList.remove("post-img-full");
|
|
imgEl.src = "/media/posts/thumb/" + imgEl.dataset.thumb;
|
|
}
|
|
else {
|
|
imgEl.classList.add("post-img-full");
|
|
imgEl.src = "/media/posts/full/" + imgEl.dataset.full;
|
|
if (!imgEl.complete)
|
|
makeOpaqueUntilReady(imgEl, 'load');
|
|
}
|
|
}
|
|
}
|
|
|
|
function initializePosts() {
|
|
// set dates to correct timezone
|
|
document.querySelectorAll('.post-datetime').forEach(el => {
|
|
const utcDateStr = el.getAttribute('data-utc');
|
|
const localDate = new Date(utcDateStr);
|
|
|
|
const hours = localDate.getHours() % 12 || 12;
|
|
const minutes = String(localDate.getMinutes()).padStart(2, '0');
|
|
const ampm = localDate.getHours() >= 12 ? 'PM' : 'AM';
|
|
|
|
const month = String(localDate.getMonth() + 1).padStart(2, '0');
|
|
const day = String(localDate.getDate()).padStart(2, '0');
|
|
const year = localDate.getFullYear();
|
|
|
|
el.textContent = `${month}/${day}/${year} ${hours}:${minutes} ${ampm}`;
|
|
});
|
|
|
|
insertHeaderReplies()
|
|
}
|
|
|
|
initializePosts();
|