fix: make sure chat entry is working correctly through some cleanup
This commit is contained in:
parent
ac64473749
commit
46090d944a
2 changed files with 56 additions and 49 deletions
|
|
@ -1,10 +1,10 @@
|
|||
#chat #topic-chat-container {
|
||||
#chat #chat-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#chat #topic-chat-content {
|
||||
#chat #chat-content {
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
padding: 1.5rem 1.5rem 0.75rem 1.5rem;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
#chat #topic-chat-content {
|
||||
#chat #chat-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
#chat #topic-chat-entry-container {
|
||||
#chat #chat-entry-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
#chat #topic-chat-entry-container form {
|
||||
#chat #chat-entry-container form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -39,13 +39,13 @@
|
|||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#chat #topic-chat-entry-container form input[type="file"] {
|
||||
#chat #chat-entry-container form input[type="file"] {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat #topic-chat-entry-container form button,
|
||||
#chat #topic-chat-entry-container form label {
|
||||
#chat #chat-entry-container form button,
|
||||
#chat #chat-entry-container form label {
|
||||
position: relative;
|
||||
top: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
#chat #topic-chat-entry-container form textarea {
|
||||
#chat #chat-entry-container form textarea {
|
||||
flex-grow: 1;
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#chat #topic-chat-container {
|
||||
#chat #chat-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -292,13 +292,13 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
#chat #topic-chat-container #topic-chat-entry-container,
|
||||
#chat #topic-chat-container #topic-chat-entry-container form {
|
||||
#chat #chat-container #chat-entry-container,
|
||||
#chat #chat-container #chat-entry-container form {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
#chat #topic-chat-container #topic-chat-entry-container form button,
|
||||
#chat #topic-chat-container #topic-chat-entry-container form label {
|
||||
#chat #chat-container #chat-entry-container form button,
|
||||
#chat #chat-container #chat-entry-container form label {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,14 +63,18 @@
|
|||
existing_element.replaceWith(template.content.firstChild);
|
||||
} else {
|
||||
// TODO: threading
|
||||
document
|
||||
.getElementById("topic-chat-content")
|
||||
?.insertAdjacentHTML(position, html_content);
|
||||
document.getElementById("chat-content")?.insertAdjacentHTML(position, html_content);
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_chat_events(events) {
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
if (!Array.isArray(events)) {
|
||||
debugger;
|
||||
console.warn("got unexpected value for handle_chat_events `events` argument.");
|
||||
return;
|
||||
}
|
||||
|
||||
const topic_chat_content = document.getElementById("chat-content");
|
||||
|
||||
const sorted = events.sort((lhs, rhs) => lhs.id.localeCompare(rhs.id));
|
||||
for await (const event of sorted) {
|
||||
|
|
@ -98,7 +102,7 @@
|
|||
// 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_chat_content = document.getElementById("chat-content");
|
||||
const topic_id = document.body.dataset.topic;
|
||||
const last_message_id = topic_chat_content.dataset.last_message_id;
|
||||
|
||||
|
|
@ -129,7 +133,7 @@
|
|||
const topic_id = event?.detail?.topic_id ?? document.body.dataset.topic;
|
||||
if (!topic_id) return;
|
||||
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
const topic_chat_content = document.getElementById("chat-content");
|
||||
topic_chat_content.innerHTML = "";
|
||||
|
||||
const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
|
||||
|
|
@ -185,13 +189,13 @@
|
|||
<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">
|
||||
<div id="chat-container">
|
||||
<div id="chat-content"></div>
|
||||
<div id="chat-entry-container">
|
||||
<form
|
||||
id="topic-chat-entry"
|
||||
id="chat-entry"
|
||||
data-smart="true"
|
||||
data-requires-permission="topics.posts.create"
|
||||
data-requires-permission="topics.chat.write"
|
||||
method="POST"
|
||||
class="post-creation-form collapsible"
|
||||
style="
|
||||
|
|
@ -199,9 +203,32 @@
|
|||
width: 100%;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); document.getElementById( 'chat-input' )?.focus(); }"
|
||||
on_reply="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.remove('sending'); document.getElementById( 'chat-input' ).value = ''; document.getElementById( 'chat-input' ).focus(); }"
|
||||
on_parsed="async (event) => { await render_chat_event(event); document.getElementById(event.id)?.classList.add('sending'); }"
|
||||
>
|
||||
<script>
|
||||
{
|
||||
const form = document.currentScript.closest("form");
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const chat_input = form.querySelector(
|
||||
'textarea[name="data.content"]',
|
||||
);
|
||||
chat_input.addEventListener("keypress", (event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
form.requestSubmit();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener(
|
||||
"topic_changed",
|
||||
({ detail: { topic_id } }) => {
|
||||
form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<input type="hidden" name="type" value="chat" />
|
||||
|
||||
<input
|
||||
|
|
@ -251,36 +278,16 @@
|
|||
</label>
|
||||
|
||||
<textarea
|
||||
id="topic-chat-input"
|
||||
class="topic-chat-input"
|
||||
id="chat-input"
|
||||
class="chat-input"
|
||||
rows="1"
|
||||
name="data.content"
|
||||
reset-on-submit
|
||||
></textarea>
|
||||
|
||||
<button id="topic-chat-send" class="primary" aria-label="Send a message">
|
||||
<button id="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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue