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

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

@ -1,99 +1,89 @@
{% extends "app.html" %}
{% block main %}
<section class="chat-area" id="chat">
<div class="chat-header"><h2>{{ channel.label.value }}</h2></div>
<div class="chat-messages">
{% block main %}
<section class="chat-area" id="chat">
<div class="chat-header">
<h2>{{ channel.label.value }}</h2>
</div>
<div class="chat-messages">
{% for message in messages %}
{% autoescape false %}
{{message.html}}
{% 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 %}
</div>
<chat-window style="display:none" class="chat-area"></chat-window>
<div class="chat-input">
<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>
</section>
<script>
const channelUid = "{{channel.channel_uid.value}}"
</section>
function initInputField(textBox){
<script>
const channelUid = "{{ channel.channel_uid.value }}";
function initInputField(textBox) {
textBox.addEventListener('change', (e) => {
e.preventDefault();
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
});
textBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
const message = e.target.value.trim();
if (!message) return;
app.rpc.sendMessage(channelUid, e.target.value)
if (message) {
app.rpc.sendMessage(channelUid, message);
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()
function updateTimes() {
document.querySelectorAll(".time").forEach((time) => {
time.innerText = app.timeDescription(time.dataset.created_at);
});
}
function updateLayout() {
const messagesContainer = document.querySelector(".chat-messages");
messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
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")
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)
setInterval(updateTimes, 1000);
app.addEventListener("channel-message", (data) => {
if(data.channel_uid != channelUid) return
if(data.username != "{{user.username.value}}"){
app.playSound(0)
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
message.dataset.user_nick = data.user_nick
message.dataset.uid = data.uid
message.innerHTML = data.html
document.querySelector(".chat-messages").appendChild(message.firstChild)
setTimeout(()=>{
updateLayout()
},50)
})
updateLayout()
//.scrollTop = document.querySelector(".chat-messages").scrollHeight + 5000
// })
</script>
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 %}