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

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

@ -1,99 +1,89 @@
{% 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>
<div class="chat-input"> <div class="chat-input">
<textarea placeholder="Type a message..." rows="2"></textarea> <textarea placeholder="Type a message..." rows="2"></textarea>
<upload-button channel="{{channel.channel_uid.value}}"></upload-button> <upload-button channel="{{ channel.channel_uid.value }}"></upload-button>
</div> </div>
</section> </section>
<script>
const channelUid = "{{channel.channel_uid.value}}"
function initInputField(textBox){ <script>
const channelUid = "{{ channel.channel_uid.value }}";
textBox.addEventListener('change', (e) => { function initInputField(textBox) {
e.preventDefault(); textBox.addEventListener('change', (e) => {
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true })); e.preventDefault();
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
});
}); textBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
textBox.addEventListener('keydown', (e) => { e.preventDefault();
if (e.key === 'Enter' && !e.shiftKey) { const message = e.target.value.trim();
e.preventDefault(); if (message) {
const message = e.target.value.trim(); app.rpc.sendMessage(channelUid, message);
if (!message) return; e.target.value = '';
app.rpc.sendMessage(channelUid, e.target.value)
e.target.value = '';
}
});
}
initInputField(document.querySelector("textarea"))
function updateTimes(){
document.querySelectorAll(".time").forEach((time) => {
time.innerText = app.timeDescription(time.dataset.created_at)
})
}
function updateLayout() {
document.querySelectorAll(".chat-messages").forEach((messages) => messages.scrollTop = messages.scrollHeight + 1000)
//document.querySelectorAll(".chat-messages .message:last-child").forEach((message) => message.scrollIntoView({block: "end"}))
updateTimes()
let previousUser = null;
document.querySelectorAll(".message").forEach((message) => {
if(previousUser != message.dataset.user_uid) {
message.classList.add("switch-user")
previousUser = message.dataset.user_uid
}else{
message.classList.remove("switch-user")
} }
})
}
setInterval(() => {
updateTimes()
}, 1000)
app.addEventListener("channel-message", (data) => {
if(data.channel_uid != channelUid) return
if(data.username != "{{user.username.value}}"){
app.playSound(0)
} }
const message = document.createElement("div") });
//message.classList.add("message") }
message.dataset.color = data.color
message.dataset.created_at = data.created_at function updateTimes() {
message.dataset.user_nick = data.user_nick document.querySelectorAll(".time").forEach((time) => {
message.dataset.uid = data.uid time.innerText = app.timeDescription(time.dataset.created_at);
message.innerHTML = data.html });
document.querySelector(".chat-messages").appendChild(message.firstChild) }
setTimeout(()=>{
updateLayout() function updateLayout() {
},50) const messagesContainer = document.querySelector(".chat-messages");
}) messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
updateLayout()
//.scrollTop = document.querySelector(".chat-messages").scrollHeight + 5000 updateTimes();
// }) let previousUser = null;
</script> document.querySelectorAll(".message").forEach((message) => {
if (previousUser !== message.dataset.user_uid) {
message.classList.add("switch-user");
previousUser = message.dataset.user_uid;
} else {
message.classList.remove("switch-user");
}
});
}
setInterval(updateTimes, 1000);
app.addEventListener("channel-message", (data) => {
if (data.channel_uid !== channelUid) return;
if (data.username !== "{{ user.username.value }}") {
app.playSound(0);
}
const message = document.createElement("div");
message.dataset.color = data.color;
message.dataset.created_at = data.created_at;
message.dataset.user_nick = data.user_nick;
message.dataset.uid = data.uid;
message.innerHTML = data.html;
document.querySelector(".chat-messages").appendChild(message.firstChild);
updateLayout();
});
initInputField(document.querySelector("textarea"));
updateLayout();
</script>
{% endblock %} {% endblock %}