|
{% 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">
|
|
{% for message in messages %}
|
|
{% autoescape false %}
|
|
{{ message.html }}
|
|
{% endautoescape %}
|
|
{% 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.uid.value }}"></upload-button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const channelUid = "{{ 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) {
|
|
app.rpc.sendMessage(channelUid, message);
|
|
e.target.value = '';
|
|
}
|
|
}
|
|
});
|
|
textBox.focus();
|
|
}
|
|
|
|
function updateTimes() {
|
|
document.querySelectorAll(".time").forEach((time) => {
|
|
time.innerText = app.timeDescription(time.dataset.created_at);
|
|
});
|
|
}
|
|
function isElementVisible(element) {
|
|
const rect = element.getBoundingClientRect();
|
|
return (
|
|
rect.top >= 0 &&
|
|
rect.left >= 0 &&
|
|
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
|
);
|
|
}
|
|
|
|
const messagesContainer = document.querySelector(".chat-messages");
|
|
async function loadExtra() {
|
|
|
|
const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(1)");
|
|
if(!offsetMessage){
|
|
return
|
|
}
|
|
const firstMessage = messagesContainer.querySelector(".message:first-child");
|
|
if(offsetMessage.dataset.seen){
|
|
return
|
|
}
|
|
|
|
if(isElementVisible(offsetMessage)){
|
|
offsetMessage.dataset.seen = true
|
|
const messages = await app.rpc.getMessages(channelUid, 1, offsetMessage.dataset.created_at);
|
|
messages.forEach((message) => {
|
|
firstMessage.insertAdjacentHTML("beforebegin", message.html);
|
|
})
|
|
}
|
|
}
|
|
messagesContainer.addEventListener("scroll",()=>{
|
|
loadExtra()
|
|
});
|
|
function updateLayout(doScrollDown) {
|
|
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");
|
|
}
|
|
});
|
|
lastMessage = messagesContainer.querySelector(".message:last-child");
|
|
if(doScrollDown){
|
|
lastMessage.scrollIntoView({ inline: "nearest" });
|
|
}
|
|
|
|
}
|
|
|
|
setInterval(updateTimes, 1000);
|
|
|
|
app.addEventListener("channel-message", (data) => {
|
|
if (data.channel_uid !== channelUid) return;
|
|
|
|
if (data.username !== "{{ user.username.value }}") {
|
|
app.playSound(0);
|
|
}
|
|
|
|
const messagesContainer = document.querySelector(".chat-messages");
|
|
const lastMessage = messagesContainer.querySelector(".message:last-child");
|
|
const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
|
|
|
|
|
|
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(doScrollDownBecauseLastMessageIsVisible);
|
|
setTimeout(()=>{
|
|
updateLayout(doScrollDownBecauseLastMessageIsVisible)
|
|
},1000)
|
|
});
|
|
|
|
initInputField(document.querySelector("textarea"));
|
|
updateLayout(true);
|
|
</script>
|
|
{% endblock %}
|
|
|
|
|