So smooth.

Browse Source
This commit is contained in:
retoor 2025-02-09 13:06:12 +01:00
parent feb5234b3b
commit ecb77cf361
1 changed files with 74 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/snek/templates/web.html
View File

@ -1,23 +1,15 @@
{% extends "app.html" %} {% extends "app.html" %}
{% block main %} {% block main %}
<section class="chat-area" id="chat"> <section class="chat-area" id="chat">
<div class="chat-header"><h2>{{ channel.label.value }}</h2></div> <div class="chat-header">
<h2>{{ channel.label.value }}</h2>
</div>
<div class="chat-messages"> <div class="chat-messages">
{% for message in messages %} {% for message in messages %}
{% autoescape false %} {% autoescape false %}
{{ message.html }} {{ message.html }}
{% endautoescape %} {% endautoescape %}
<div style="display:none" class="message {% if loop.first or message.username != messages[loop.index0 - 1].username %}switch-user{% endif %}" data-uid="{{message.uid}}" data-color="{{message.color}}" data-user_nick="{{message.user_nick}}" data-created_at="{{message.created_at}}">
<div class="avatar no-select" style="background-color: {{message.color}}; color: black;">{{message.user_nick[0]}}</div>
<div class="message-content">
{% autoescape false %}
{{ message.html }}
{% endautoescape %}
<div class="time no-select" data-created_at="{{message.created_at}}">{{message.created_at}}</div>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
<chat-window style="display:none" class="chat-area"></chat-window> <chat-window style="display:none" class="chat-area"></chat-window>
@ -26,74 +18,72 @@
<upload-button channel="{{ channel.channel_uid.value }}"></upload-button> <upload-button channel="{{ channel.channel_uid.value }}"></upload-button>
</div> </div>
</section> </section>
<script> <script>
const channelUid = "{{channel.channel_uid.value}}" const channelUid = "{{ channel.channel_uid.value }}";
function initInputField(textBox) { function initInputField(textBox) {
textBox.addEventListener('change', (e) => { textBox.addEventListener('change', (e) => {
e.preventDefault(); e.preventDefault();
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true })); this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
}); });
textBox.addEventListener('keydown', (e) => { textBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
const message = e.target.value.trim(); const message = e.target.value.trim();
if (!message) return; if (message) {
app.rpc.sendMessage(channelUid, e.target.value) app.rpc.sendMessage(channelUid, message);
e.target.value = ''; e.target.value = '';
} }
}
}); });
} }
initInputField(document.querySelector("textarea"))
function updateTimes() { function updateTimes() {
document.querySelectorAll(".time").forEach((time) => { document.querySelectorAll(".time").forEach((time) => {
time.innerText = app.timeDescription(time.dataset.created_at) time.innerText = app.timeDescription(time.dataset.created_at);
}) });
} }
function updateLayout() {
document.querySelectorAll(".chat-messages").forEach((messages) => messages.scrollTop = messages.scrollHeight + 1000) function updateLayout() {
//document.querySelectorAll(".chat-messages .message:last-child").forEach((message) => message.scrollIntoView({block: "end"})) const messagesContainer = document.querySelector(".chat-messages");
updateTimes() messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
updateTimes();
let previousUser = null; let previousUser = null;
document.querySelectorAll(".message").forEach((message) => { document.querySelectorAll(".message").forEach((message) => {
if(previousUser != message.dataset.user_uid) { if (previousUser !== message.dataset.user_uid) {
message.classList.add("switch-user") message.classList.add("switch-user");
previousUser = message.dataset.user_uid previousUser = message.dataset.user_uid;
} else { } else {
message.classList.remove("switch-user") message.classList.remove("switch-user");
} }
}) });
} }
setInterval(() => {
setInterval(updateTimes, 1000);
updateTimes()
}, 1000)
app.addEventListener("channel-message", (data) => { app.addEventListener("channel-message", (data) => {
if(data.channel_uid != channelUid) return if (data.channel_uid !== channelUid) return;
if(data.username != "{{user.username.value}}"){
app.playSound(0) if (data.username !== "{{ user.username.value }}") {
app.playSound(0);
} }
const message = document.createElement("div")
//message.classList.add("message") const message = document.createElement("div");
message.dataset.color = data.color message.dataset.color = data.color;
message.dataset.created_at = data.created_at message.dataset.created_at = data.created_at;
message.dataset.user_nick = data.user_nick message.dataset.user_nick = data.user_nick;
message.dataset.uid = data.uid message.dataset.uid = data.uid;
message.innerHTML = data.html message.innerHTML = data.html;
document.querySelector(".chat-messages").appendChild(message.firstChild) document.querySelector(".chat-messages").appendChild(message.firstChild);
setTimeout(()=>{ updateLayout();
updateLayout() });
},50)
}) initInputField(document.querySelector("textarea"));
updateLayout() updateLayout();
//.scrollTop = document.querySelector(".chat-messages").scrollHeight + 5000
// })
</script> </script>
{% endblock %} {% endblock %}