302 lines
8.3 KiB
HTML
302 lines
8.3 KiB
HTML
<style>
|
|
#blurbs-container {
|
|
padding: 1rem;
|
|
max-width: 40rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.blurb-container {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto auto auto auto 1fr;
|
|
grid-template-columns: auto auto 1fr;
|
|
grid-template-areas:
|
|
"preview"
|
|
"info"
|
|
"content"
|
|
"newblurb"
|
|
"replies";
|
|
padding: 1rem;
|
|
border: 1px solid var(--border-subtle);
|
|
overflow-y: hidden;
|
|
transition: all ease-in-out 0.33s;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.blurb-container:has(> div > label > input[name="expanded"]:checked) {
|
|
max-height: unset;
|
|
}
|
|
|
|
.expand-toggle-container input[name="expanded"] {
|
|
display: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.blurb-container:has(> div > label > input[name="expanded"]) .icon.minus,
|
|
.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.plus {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.blurb-container:has(> div > label > input[name="expanded"]) .icon.plus,
|
|
.blurb-container:has(> div > label > input[name="expanded"]:checked) .icon.minus {
|
|
display: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.blurb-container .expand-toggle-container {
|
|
grid-area: expander;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.blurb-container .expand-toggle-container label {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.blurb-container .media-preview-container {
|
|
grid-area: preview;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.blurb-container .media-preview-container img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.blurb-container .info-container {
|
|
grid-area: info;
|
|
display: flex;
|
|
}
|
|
|
|
.blurb-container .info-container .avatar-container {
|
|
display: block;
|
|
margin: 0.5rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 20%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blurb-container .info-container .avatar-container img {
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.blurb-container .info-container .username-container {
|
|
display: block;
|
|
margin: 0 0.5rem;
|
|
font-weight: bold;
|
|
align-content: center;
|
|
}
|
|
|
|
.blurb-container .info-container .datetime-container {
|
|
display: block;
|
|
margin: 0 0.5rem;
|
|
align-content: center;
|
|
}
|
|
|
|
.blurb-container .info-container .datetime-container .long {
|
|
font-size: x-small;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.blurb-container .info-container .datetime-container .short {
|
|
font-size: xx-small;
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.blurb-container .content-container {
|
|
grid-area: content;
|
|
padding-left: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.blurb-container .new-blurb-container {
|
|
grid-area: newblurb;
|
|
display: none;
|
|
}
|
|
|
|
.blurb-container .replies-container {
|
|
grid-area: replies;
|
|
}
|
|
</style>
|
|
|
|
<div id="blurbs" class="tab">
|
|
<input
|
|
type="radio"
|
|
name="top-level-tabs"
|
|
id="blurb-tab-input"
|
|
class="tab-switch"
|
|
data-view="blurb"
|
|
/>
|
|
<label for="blurb-tab-input" class="tab-label"
|
|
><div class="icon blurb"></div>
|
|
<div class="label">Blurbs</div>
|
|
</label>
|
|
<div class="tab-content">
|
|
<div id="blurbs-container" class="container">
|
|
<!-- #include file="./README.md" -->
|
|
|
|
<div id="blurbs-list"></div>
|
|
<script>
|
|
const blurbs_list = document.getElementById("blurbs-list");
|
|
|
|
async function render_blurb(blurb, position = "afterbegin") {
|
|
const creator = await USERS.get(blurb.creator_id);
|
|
const existing_element =
|
|
document.getElementById(blurb.id) ??
|
|
document.getElementById(blurb.meta?.temp_id ?? "") ??
|
|
document.querySelector(`[data-temp_id="${blurb.meta?.temp_id ?? ""}"]`);
|
|
const blurb_datetime = datetime_to_local(blurb.timestamps.created);
|
|
|
|
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}" data-temp_id="${blurb.meta?.temp_id ?? ""}">
|
|
<div class="media-preview-container">
|
|
${blurb.data?.media?.length ? blurb.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
|
|
</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">${blurb_datetime.long}</span>
|
|
<span class="short">${blurb_datetime.short}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-container">${blurb.data.blurb}</div>
|
|
<!-- #include file="./new_blurb.html" -->
|
|
<div class="replies-container"></div>
|
|
</div>`;
|
|
|
|
if (existing_element) {
|
|
const template = document.createElement("template");
|
|
template.innerHTML = html_content;
|
|
existing_element.replaceWith(template.content.firstChild);
|
|
existing_element.classList.remove("sending");
|
|
} else {
|
|
const target_container =
|
|
document.querySelector(
|
|
`.blurb-container[data-blurb_id='${blurb.parent_id}'] > .replies-container`,
|
|
) ?? blurbs_list;
|
|
target_container.insertAdjacentHTML(position, html_content);
|
|
}
|
|
|
|
const new_blurb_forms = document.querySelectorAll(".blurb-creation-form");
|
|
for (const new_blurb_form of new_blurb_forms) {
|
|
new_blurb_form.action =
|
|
"/api/topics/" + document.body.dataset?.topic + "/events";
|
|
}
|
|
|
|
blurbs_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 blurb_polling_abort_controller = null;
|
|
async function poll_for_new_blurbs() {
|
|
const blurbs_list = document.getElementById("blurbs-list");
|
|
const topic_id = document.body.dataset.topic;
|
|
const last_blurb_id = blurbs_list.dataset.last_blurb_id;
|
|
|
|
if (!topic_id) {
|
|
return;
|
|
}
|
|
|
|
const message_polling_url = `/api/topics/${topic_id}/events?type=blurb&limit=100&sort=newest&wait=true${last_blurb_id ? `&after_id=${last_blurb_id}` : ""}`;
|
|
|
|
blurb_polling_abort_controller =
|
|
blurb_polling_abort_controller || new AbortController();
|
|
|
|
api.fetch(message_polling_url, {
|
|
signal: blurb_polling_abort_controller.signal,
|
|
})
|
|
.then(async (new_events_response) => {
|
|
const new_events = (await new_events_response.json()) ?? [];
|
|
|
|
for await (const blurb of new_events.reverse()) {
|
|
await render_blurb(blurb);
|
|
}
|
|
|
|
const last_blurb_id = new_events.reduce((_last_blurb_id, blurb) => {
|
|
return blurb.id > _last_blurb_id && blurb.id.indexOf("TEMP") < 0
|
|
? blurb.id
|
|
: _last_blurb_id;
|
|
}, blurb_list.dataset.last_blurb_id ?? "");
|
|
|
|
// if the last blurb has been updated, update the content's dataset to reflect that
|
|
if (last_blurb_id !== blurbs_list.dataset.last_blurb_id) {
|
|
blurbs_list.dataset.last_blurb_id = last_blurb_id;
|
|
}
|
|
|
|
poll_for_new_blurbs(topic_id);
|
|
})
|
|
.catch((error) => {
|
|
// TODO: poll again? back off?
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
async function load_active_topic_for_blurbs() {
|
|
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 blurbs_list = document.getElementById("blurbs-list");
|
|
|
|
if (blurb_polling_abort_controller) {
|
|
blurb_polling_abort_controller.abort();
|
|
blurb_polling_abort_controller = null;
|
|
delete blurbs_list.dataset.last_blurb_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();
|
|
|
|
blurbs_list.innerHTML = "";
|
|
|
|
const events_response = await api.fetch(
|
|
`/api/topics/${topic_id}/events?type=blurb&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();
|
|
|
|
for await (const blurb of events.reverse()) {
|
|
await render_blurb(blurb, "afterbegin");
|
|
}
|
|
|
|
poll_for_new_blurbs();
|
|
}
|
|
document.addEventListener("topic_changed", load_active_topic_for_blurbs);
|
|
document.addEventListener("user_logged_in", load_active_topic_for_blurbs);
|
|
</script>
|
|
|
|
<!-- #include file="./new_blurb.html" -->
|
|
</div>
|
|
</div>
|
|
</div>
|