293 lines
9.4 KiB
HTML
293 lines
9.4 KiB
HTML
<script>
|
|
const time_tick_tock_timeout = 60 * 1000; // 1 minute
|
|
let last_event_datetime_value = 0;
|
|
let time_tick_tock_class = "time-tock";
|
|
|
|
let last_creator_id = null;
|
|
let user_tick_tock_class = "user-tock";
|
|
async function render_chat_event(event) {
|
|
const creator = await USERS.get(event.creator_id);
|
|
|
|
const existing_element =
|
|
document.getElementById(event.id) ??
|
|
(event.meta?.temp_id ? document.getElementById(event.meta?.temp_id ?? "") : undefined);
|
|
|
|
const event_datetime = datetime_to_local(event.timestamps.created);
|
|
|
|
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
|
|
time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
|
|
}
|
|
last_event_datetime_value = event_datetime.value;
|
|
|
|
if (last_creator_id !== creator.id) {
|
|
user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
|
|
last_creator_id = creator.id;
|
|
}
|
|
|
|
const html_content = `<div id="${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
|
|
<div class="message-actions-container">
|
|
<input
|
|
type="checkbox"
|
|
id="show_message_actions-${event.id}"
|
|
class="message-actions-display-toggle"
|
|
/>
|
|
<label class="message-actions-display-toggle-label" for="show_message_actions-${event.id}">
|
|
<div class="icon more-borderless"></div>
|
|
</label>
|
|
|
|
<button class="message-action mockup" data-action="react"><i class="icon circle"></i><span class="action-name">React</span></button>
|
|
<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${event.id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
|
|
<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
|
|
<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
|
|
</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 ?? "unknown"}</span>
|
|
</div>
|
|
<div class="datetime-container">
|
|
<span class="long">${event_datetime.long}</span>
|
|
<span class="short">${event_datetime.short}</span>
|
|
</div>
|
|
</div>
|
|
<div class="message-content-container">${htmlify(event.data.content)}</div>
|
|
<div class="message-media-container">${htmlify(event.data.media?.join("\n") ?? "")}</div>
|
|
</div>`;
|
|
|
|
if (existing_element) {
|
|
const template = document.createElement("template");
|
|
template.innerHTML = html_content;
|
|
existing_element.replaceWith(template.content.firstChild);
|
|
} else {
|
|
// TODO: threading
|
|
document
|
|
.getElementById("topic-chat-content")
|
|
?.insertAdjacentHTML("beforeend", html_content);
|
|
}
|
|
}
|
|
|
|
async function append_chat_events(events) {
|
|
const topic_chat_content = document.getElementById("topic-chat-content");
|
|
let last_message_id = topic_chat_content.dataset.last_message_id ?? "";
|
|
for await (const event of events) {
|
|
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
|
|
// it becomes the latest message
|
|
last_message_id =
|
|
event.id > last_message_id && event.id.indexOf("TEMP") !== 0
|
|
? event.id
|
|
: last_message_id;
|
|
|
|
// if the last message has been updated, update the content's dataset to reflect that
|
|
if (last_message_id !== topic_chat_content.dataset.last_message_id) {
|
|
topic_chat_content.dataset.last_message_id = last_message_id;
|
|
}
|
|
|
|
await render_chat_event(event);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
|
|
console.dir({
|
|
scrollHeight: topic_chat_content.scrollHeight,
|
|
scrollTop: topic_chat_content.scrollTop,
|
|
});
|
|
}, 50);
|
|
}
|
|
|
|
// TODO: we need some abortcontroller handling here or something
|
|
// similar for when we change topics, this is the most basic
|
|
// first pass outline
|
|
let topic_polling_request_abort_controller = null;
|
|
async function poll_for_new_chat_events() {
|
|
const topic_chat_content = document.getElementById("topic-chat-content");
|
|
const topic_id = document.body.dataset.topic;
|
|
const last_message_id = topic_chat_content.dataset.last_message_id;
|
|
|
|
if (!topic_id) {
|
|
return;
|
|
}
|
|
|
|
const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
|
|
|
|
topic_polling_request_abort_controller =
|
|
topic_polling_request_abort_controller || new AbortController();
|
|
|
|
api.fetch(message_polling_url, {
|
|
signal: topic_polling_request_abort_controller.signal,
|
|
})
|
|
.then(async (new_events_response) => {
|
|
const new_events = ((await new_events_response.json()) ?? []).reverse();
|
|
await append_chat_events(new_events);
|
|
poll_for_new_chat_events(topic_id);
|
|
})
|
|
.catch((error) => {
|
|
// TODO: poll again? back off?
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
async function load_active_topic_for_chat() {
|
|
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 topic_chat_content = document.getElementById("topic-chat-content");
|
|
|
|
if (topic_polling_request_abort_controller) {
|
|
topic_polling_request_abort_controller.abort();
|
|
topic_polling_request_abort_controller = null;
|
|
delete topic_chat_content.dataset.last_message_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();
|
|
|
|
topic_chat_content.innerHTML = "";
|
|
|
|
const events_response = await api.fetch(
|
|
`/api/topics/${topic_id}/events?type=chat&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()).reverse();
|
|
|
|
await append_chat_events(events);
|
|
poll_for_new_chat_events();
|
|
}
|
|
document.addEventListener("topic_changed", load_active_topic_for_chat);
|
|
document.addEventListener("user_logged_in", load_active_topic_for_chat);
|
|
</script>
|
|
<div id="chat" class="tab">
|
|
<input
|
|
type="radio"
|
|
name="top-level-tabs"
|
|
id="chat-tab-input"
|
|
class="tab-switch"
|
|
data-view="chat"
|
|
/>
|
|
<label for="chat-tab-input" class="tab-label"
|
|
><div class="icon chat"></div>
|
|
<div class="label">Chat</div>
|
|
</label>
|
|
<div class="tab-content">
|
|
<style>
|
|
<!-- #include file="./chat.css" -->
|
|
</style>
|
|
<script src="/js/external/mimetypes.js" type="text/javascript"></script>
|
|
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
|
|
|
<div id="topic-chat-container">
|
|
<div id="topic-chat-content"></div>
|
|
<div id="topic-chat-entry-container">
|
|
<form
|
|
id="topic-chat-entry"
|
|
data-smart="true"
|
|
data-requires-permission="topics.posts.create"
|
|
method="POST"
|
|
class="post-creation-form collapsible"
|
|
style="
|
|
margin-top: 1rem
|
|
width: 100%;
|
|
transition: all 0.5s;
|
|
"
|
|
on_reply="async (event) => { await append_chat_events([event]); document.getElementById( 'chat-input' )?.focus(); }"
|
|
on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
|
|
>
|
|
<input type="hidden" name="type" value="chat" />
|
|
|
|
<input
|
|
type="hidden"
|
|
name="id"
|
|
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
|
|
reset-on-submit
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="meta.temp_id"
|
|
generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
|
|
reset-on-submit
|
|
/>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="creator_id"
|
|
generator="() => { return JSON.parse( document.body.dataset.user ?? '{}' ).id; }"
|
|
/>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="timestamps.created"
|
|
generator="(_input, form) => form.__submitted_at.toISOString()"
|
|
reset-on-submit
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="timestamps.updated"
|
|
generator="(_input, form) => form.__submitted_at.toISOString()"
|
|
reset-on-submit
|
|
/>
|
|
|
|
<input type="hidden" name="parent_id" reset-on-submit />
|
|
|
|
<label>
|
|
<input
|
|
aria-label="Upload and share file"
|
|
type="file"
|
|
multiple
|
|
data-smartforms-save-to-home="true"
|
|
name="data.media"
|
|
reset-on-submit
|
|
/>
|
|
<div class="icon attachment"></div>
|
|
</label>
|
|
|
|
<textarea
|
|
id="topic-chat-input"
|
|
class="topic-chat-input"
|
|
rows="1"
|
|
name="data.content"
|
|
reset-on-submit
|
|
></textarea>
|
|
|
|
<button id="topic-chat-send" class="primary" aria-label="Send a message">
|
|
<i class="icon send"></i>
|
|
</button>
|
|
|
|
<script>
|
|
{
|
|
const form = document.currentScript.closest("form");
|
|
const chat_input = form.querySelector('textarea[name="data.content"]');
|
|
|
|
document.addEventListener(
|
|
"topic_changed",
|
|
({ detail: { topic_id } }) => {
|
|
form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
|
|
},
|
|
);
|
|
|
|
chat_input.addEventListener("keypress", (event) => {
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
form.requestSubmit();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|