440 lines
12 KiB
HTML
440 lines
12 KiB
HTML
<style>
|
|
#forum-posts.container {
|
|
padding: 2rem 0.5rem;
|
|
}
|
|
|
|
.post-container {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
grid-template-columns: auto auto 1fr;
|
|
grid-template-areas:
|
|
"expander preview info"
|
|
"expander preview subject"
|
|
"expander preview content";
|
|
max-height: 6rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--border-subtle);
|
|
overflow-y: hidden;
|
|
transition: all ease-in-out 0.33s;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.post-container:has(input[name="expanded"]:checked) {
|
|
max-height: 40rem;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.expand-toggle-container input[name="expanded"] {
|
|
display: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.post-container:has(input[name="expanded"]) .icon.minus,
|
|
.post-container:has(input[name="expanded"]:checked) .icon.plus {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.post-container:has(input[name="expanded"]) .icon.plus,
|
|
.post-container:has(input[name="expanded"]:checked) .icon.minus {
|
|
display: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.post-container .expand-toggle-container {
|
|
grid-area: expander;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.post-container .expand-toggle-container label {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.post-container .media-preview-container {
|
|
grid-area: preview;
|
|
width: 6rem;
|
|
height: 4rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.post-container .media-preview-container img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.post-container .info-container {
|
|
grid-area: info;
|
|
display: flex;
|
|
}
|
|
|
|
.post-container .info-container .avatar-container {
|
|
display: block;
|
|
margin: 0.5rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 16%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-container .info-container .avatar-container img {
|
|
width: 100%;
|
|
}
|
|
|
|
.post-container .info-container .username-container {
|
|
display: block;
|
|
margin: 0 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.post-container .info-container .datetime-container {
|
|
display: block;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.post-container .info-container .datetime-container .long {
|
|
font-size: x-small;
|
|
text-transform: uppercase;
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.post-container .info-container .datetime-container .short {
|
|
font-size: xx-small;
|
|
}
|
|
|
|
.post-container .subject-container {
|
|
grid-area: subject;
|
|
padding-left: 5rem;
|
|
margin-top: -2.5rem;
|
|
font-size: larger;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.post-container .content-container {
|
|
grid-area: content;
|
|
padding-left: 5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
|
|
<div id="forum" class="tab">
|
|
<input
|
|
type="radio"
|
|
name="top-level-tabs"
|
|
id="forum-tab-input"
|
|
class="tab-switch"
|
|
data-view="forum"
|
|
/>
|
|
<label for="forum-tab-input" class="tab-label"
|
|
><div class="icon forum"></div>
|
|
<div class="label">Forum</div></label
|
|
>
|
|
<div class="tab-content forum-container">
|
|
<div id="forum-posts" class="container">
|
|
<div id="forum-posts-list"></div>
|
|
<script>
|
|
const forum_posts_list = document.getElementById("forum-posts-list");
|
|
|
|
async function render_post(post) {
|
|
const creator = await USERS.get(post.creator_id);
|
|
const existing_element =
|
|
document.getElementById(`post-${post.id.substring(0, 49)}`) ??
|
|
document.getElementById(`post-${post.meta.temp_id}`);
|
|
const post_datetime = datetime_to_local(post.timestamps.created);
|
|
|
|
const html_content = `<div class="post-container" data-creator_id="${creator.id}">
|
|
<div class="expand-toggle-container">
|
|
<label>
|
|
<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="media-preview-container">
|
|
<img src="/images/placeholders/${String(post_datetime.ms % 10).padStart(2, "0")}.svg" />
|
|
</div>
|
|
|
|
<div class="info-container">
|
|
<div class="avatar-container">
|
|
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
|
|
</div>
|
|
<div class="username-container">
|
|
<span class="username">${creator.username}</span>
|
|
</div>
|
|
<div class="datetime-container">
|
|
<span class="long">${post_datetime.long}</span>
|
|
<span class="short">${post_datetime.short}</span>
|
|
</div>
|
|
</div>
|
|
<div class="subject-container">${post.data.subject}</div>
|
|
<div class="content-container">${htmlify(post.data.content)}</div>
|
|
</div>`;
|
|
|
|
if (existing_element) {
|
|
const template = document.createElement("template");
|
|
template.innerHTML = html_content;
|
|
existing_element.replaceWith(template.content.firstChild);
|
|
} else {
|
|
forum_posts_list.insertAdjacentHTML("beforeend", html_content);
|
|
}
|
|
}
|
|
|
|
async function append_posts(posts) {
|
|
let last_post_id = forum_posts_list.dataset.last_post_id ?? "";
|
|
for await (const post of posts) {
|
|
// if the last post is undefined, it becomes this event, otherwise, if this event's id is newer,
|
|
// it becomes the latest post
|
|
last_post_id =
|
|
post.id > last_post_id && post.id.indexOf("TEMP") !== 0
|
|
? post.id
|
|
: last_post_id;
|
|
|
|
// if the last post has been updated, update the content's dataset to reflect that
|
|
if (last_post_id !== forum_posts_list.dataset.last_post_id) {
|
|
forum_posts_list.dataset.last_post_id = last_post_id;
|
|
}
|
|
|
|
await render_post(post);
|
|
}
|
|
|
|
forum_posts_list.scrollTop = 0;
|
|
}
|
|
|
|
// TODO: we need some abortcontroller handling here or something
|
|
// similar for when we change topics, this is the most basic
|
|
// first pass outline
|
|
let post_polling_abort_controller = null;
|
|
async function poll_for_new_posts() {
|
|
const forum_posts_list = document.getElementById("forum-posts-list");
|
|
const topic_id = document.body.dataset.topic;
|
|
const last_post_id = forum_posts_list.dataset.last_post_id;
|
|
|
|
if (!topic_id) {
|
|
return;
|
|
}
|
|
|
|
const message_polling_url = `/api/topics/${topic_id}/events?type=post&limit=100&sort=newest&wait=true${last_post_id ? `&after_id=${last_post_id}` : ""}`;
|
|
|
|
post_polling_abort_controller =
|
|
post_polling_abort_controller || new AbortController();
|
|
|
|
api.fetch(message_polling_url, {
|
|
signal: post_polling_abort_controller.signal,
|
|
})
|
|
.then(async (new_events_response) => {
|
|
const new_events = (await new_events_response.json()) ?? [];
|
|
await append_posts(new_events);
|
|
poll_for_new_posts(topic_id);
|
|
})
|
|
.catch((error) => {
|
|
// TODO: poll again? back off?
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
async function load_active_topic_for_forum() {
|
|
const topic_id = document.body.dataset.topic;
|
|
if (!topic_id) return;
|
|
|
|
const user = document.body.dataset.user
|
|
? JSON.parse(document.body.dataset.user)
|
|
: null;
|
|
if (!user) return;
|
|
|
|
const forum_posts_list = document.getElementById("forum-posts-list");
|
|
|
|
if (post_polling_abort_controller) {
|
|
post_polling_abort_controller.abort();
|
|
post_polling_abort_controller = null;
|
|
delete forum_posts_list.dataset.last_post_id;
|
|
}
|
|
|
|
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
|
|
if (!topic_response.ok) {
|
|
const error = await topic_response.json();
|
|
alert(error.message ?? JSON.stringify(error));
|
|
return;
|
|
}
|
|
|
|
const topic = await topic_response.json();
|
|
|
|
forum_posts_list.innerHTML = "";
|
|
|
|
const events_response = await api.fetch(
|
|
`/api/topics/${topic_id}/events?type=post&limit=100&sort=newest`,
|
|
);
|
|
if (!events_response.ok) {
|
|
const error = await events_response.json();
|
|
alert(error.message ?? JSON.stringify(error));
|
|
return;
|
|
}
|
|
|
|
const events = await events_response.json();
|
|
|
|
await append_posts(events);
|
|
poll_for_new_posts();
|
|
}
|
|
document.addEventListener("topic_changed", load_active_topic_for_forum);
|
|
document.addEventListener("user_logged_in", load_active_topic_for_forum);
|
|
</script>
|
|
</div>
|
|
|
|
<div id="post-creation-container" data-requires-permission="topics.posts.create">
|
|
<button
|
|
onclick="(() => { document.querySelector( '#post-creation' ).classList.toggle( 'collapsed' ); })()"
|
|
>
|
|
<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Post
|
|
</button>
|
|
<form
|
|
id="post-creation"
|
|
data-smart="true"
|
|
method="POST"
|
|
class="collapsed"
|
|
style="
|
|
margin-top: 1rem
|
|
width: 100%;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
transition: all 0.5s;
|
|
"
|
|
>
|
|
<script>
|
|
const form = document.currentScript.closest("form");
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const file_input = form.querySelector('input[type="file"]');
|
|
const subject_input = form.querySelector('[name="data.subject"]');
|
|
const content_input = form.querySelector('[name="data.content"]');
|
|
const parent_id_input = form.querySelector('[name="parent_id"]');
|
|
|
|
form.on_submit = async (event) => {
|
|
const user = JSON.parse(document.body.dataset.user);
|
|
const topic_id = document.body.dataset.topic;
|
|
if (!topic_id) {
|
|
alert("Failed to get topic_id!");
|
|
return false;
|
|
}
|
|
|
|
form.uploaded_urls = [];
|
|
form.errors = [];
|
|
for await (const file of file_input.files) {
|
|
const body = new FormData();
|
|
body.append("file", file, encodeURIComponent(file.name));
|
|
|
|
const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
|
|
|
|
const file_upload_response = await api.fetch(file_path, {
|
|
method: "PUT",
|
|
body,
|
|
});
|
|
|
|
if (!file_upload_response.ok) {
|
|
const error = await file_upload_response.json();
|
|
form.errors.push(error?.error?.message ?? "Unknown error.");
|
|
continue;
|
|
}
|
|
|
|
const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
|
|
form.uploaded_urls.push(file_url);
|
|
}
|
|
|
|
if (form.errors.length) {
|
|
const errors = form.errors.join("\n\n");
|
|
alert(errors);
|
|
return false;
|
|
}
|
|
|
|
const subject = subject_input.value.trim();
|
|
const content = content_input.value.trim();
|
|
|
|
if (subject.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
form.action = `/api/topics/${topic_id}/events`;
|
|
};
|
|
|
|
form.on_parsed = (json) => {
|
|
const now = new Date().toISOString();
|
|
|
|
const temp_id = `TEMP-${now}`;
|
|
json.id = temp_id;
|
|
json.type = "post";
|
|
json.meta = {
|
|
temp_id,
|
|
};
|
|
json.timestamps = {
|
|
created: now,
|
|
updated: now,
|
|
};
|
|
json.data = json.data ?? {};
|
|
|
|
if (form.uploaded_urls.length) {
|
|
json.data.content =
|
|
(typeof json.data.content === "string" &&
|
|
json.data.content.trim().length
|
|
? json.data.content.trim() + "\n"
|
|
: "") + form.uploaded_urls.join("\n");
|
|
}
|
|
|
|
render_post(json);
|
|
document.getElementById(`post-${temp_id}`)?.classList.add("sending");
|
|
};
|
|
|
|
form.on_error = (error) => {
|
|
// TODO: mark the temporary message element with the failed class?
|
|
alert(error);
|
|
content_input.focus();
|
|
};
|
|
|
|
form.on_reply = (post) => {
|
|
const post_id = `post-${post.meta?.temp_id ?? ""}`;
|
|
document.getElementById(post_id)?.classList.remove("sending");
|
|
|
|
append_posts([post]);
|
|
parent_id_input.value = "";
|
|
subject_input.value = "";
|
|
content_input.value = "";
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<input type="hidden" name="parent_id" value="" />
|
|
|
|
<input
|
|
id="new-thread-subject"
|
|
type="text"
|
|
name="data.subject"
|
|
value=""
|
|
placeholder="Thread subject..."
|
|
style="margin-bottom: 1rem"
|
|
/>
|
|
|
|
<input
|
|
id="file-upload-and-share-input-for-thread"
|
|
aria-label="Upload and share file"
|
|
type="file"
|
|
multiple
|
|
/>
|
|
<label for="file-upload-and-share-input-for-thread">
|
|
<div class="icon attachment"></div>
|
|
</label>
|
|
|
|
<textarea
|
|
id="new-thread-content"
|
|
type="text"
|
|
name="data.content"
|
|
value=""
|
|
placeholder=" ... "
|
|
></textarea>
|
|
|
|
<input type="submit" value="Post" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|