2022-03-19 21:20:23 +00:00
{% extends "default.html" %}
{% block title %}
2022-03-22 02:35:12 +00:00
< title > Chat< / title >
< meta name = "description" content = "Chat" >
2022-03-19 21:20:23 +00:00
{% endblock %}
{% block content %}
2022-03-22 00:56:41 +00:00
< div class = "border-right py-3 px-3" >
2022-03-22 02:35:12 +00:00
< span data-toggle = "tooltip" data-placement = "bottom" title = "people online right now" class = "text-muted" >
< i class = "far fa-user fa-sm mr-1" > < / i >
< span class = "board-chat-count" > 0< / span >
< / span >
2022-03-22 00:56:41 +00:00
< / div >
2022-03-19 23:14:44 +00:00
< div id = "chat-line-template" class = "d-none" >
2022-03-22 02:35:12 +00:00
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle = "tooltip" data-placement = "right" >
< a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > < / a >
< div style = "overflow:hidden" >
< span class = "chat-message text-black text-break" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
2022-03-19 23:14:44 +00:00
< / div >
2022-03-19 21:20:23 +00:00
2022-03-19 23:14:44 +00:00
< div class = "container p-md-0 chat-container" >
2022-03-22 02:35:12 +00:00
< div id = "chat-window" >
< div id = "chat-text" class = "fullchat" >
< / div >
< div id = "system-template" >
< div class = "system-line" >
< p class = "message text-muted" > < / p >
< / div >
< / div >
< / div >
< div class = "position-relative form-group d-flex pb-3" >
< div class = "position-absolute text-muted text-small" style = "bottom: -1.5rem; line-height: 1;" >
< span id = "typing-indicator" > < / span >
< span id = "loading-indicator" class = "d-none" > < / span >
< / div >
2022-03-22 03:11:10 +00:00
< i class = "btn btn-secondary mr-2 fas fa-smile-beam" style = "padding-top:0.75rem" onclick = "loadEmojis('input-text')" aria-hidden = "true" data-bs-toggle = "modal" data-bs-target = "#emojiModal" data-bs-placement = "bottom" title = "Add Emoji" > < / i >
2022-03-22 02:35:12 +00:00
< input id = "input-text" type = "text" class = "form-control" placeholder = "Message" autocomplete = "off" autofocus / >
< button id = "chatsend" onclick = "send()" class = "btn btn-primary ml-3" type = "submit" > Send< / button >
< / div >
2022-03-19 21:20:23 +00:00
< / div >
< script src = "/assets/js/socketio.js" > < / script >
< style >
2022-03-22 02:35:12 +00:00
#chat-window {
max-height:calc(100vh - 300px);
overflow-y: scroll;
}
2022-03-19 21:20:23 +00:00
2022-03-22 02:35:12 +00:00
.fullchat .chat-profile {
min-width: 42px;
width: 42px;
height: 42px;
}
2022-03-19 21:20:23 +00:00
2022-03-22 02:35:12 +00:00
#chat-window::-webkit-scrollbar {
display: none;
}
2022-03-19 21:20:23 +00:00
2022-03-22 02:35:12 +00:00
#chat-window {
-ms-overflow-style: none;
scrollbar-width: none;
}
2022-03-19 23:08:22 +00:00
2022-03-22 02:35:12 +00:00
.chat-mention {
background-color: rgba(128, 90, 213, 0.3);
}
2022-03-19 21:20:23 +00:00
< / style >
2022-03-22 02:35:12 +00:00
< script >
let socket=io()
let chatline = document.getElementsByClassName('chat-line')[0]
let box = document.getElementById('chat-window')
let textbox = document.getElementById('input-text')
let icon = document.getElementById('favicon')
let notifs = 0;
let scrolled_down = true;
let focused = true;
let is_typing = false;
let alert=true;
function flash(){
let title = document.getElementsByTagName('title')[0]
if (notifs >= 1 & & !focused){
title.innerHTML = `[+${notifs}] Chat`;
if (alert) {
2022-03-22 02:52:23 +00:00
icon.href = '/static/assets/images/{{SITE_NAME}}/alert.webp?v=1'
2022-03-22 02:35:12 +00:00
alert=false;
}
else {
2022-03-22 02:52:35 +00:00
icon.href = '/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012'
2022-03-22 02:35:12 +00:00
alert=true;
}
setTimeout(flash, 500)
}
else {
2022-03-22 02:52:35 +00:00
icon.href = '/static/assets/images/{{SITE_NAME}}/icon.webp?v=1012'
2022-03-22 02:35:12 +00:00
notifs = 0
title.innerHTML = 'Chat';
}
}
socket.on('speak', function(json) {
let text = json['text']
if (text.includes('< a href = "/id/{{v.id}}" > ')){
chatline.classList.add('chat-mention');
}
else {
chatline.classList.remove('chat-mention');
};
notifs = notifs + 1;
if (notifs == 1) {
setTimeout(flash, 500);
}
scrolled_down = (box.scrollHeight - box.scrollTop < = window.innerHeight-109)
document.getElementsByClassName('desktop-avatar')[0].src = json['avatar']
document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
document.getElementsByClassName('userlink')[0].innerHTML = json['username']
document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
document.getElementsByClassName('chat-message')[0].innerHTML = text
document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
if (scrolled_down) box.scrollTo(0,box.scrollHeight)
})
function send() {
socket.emit('speak', textbox.value);
textbox.value = ''
is_typing = false
socket.emit('typing', false);
}
textbox.addEventListener("keyup", function(event) {
if (event.key === 'Enter') {
event.preventDefault();
send()
}
})
socket.on('count', function(data){
document.getElementsByClassName('board-chat-count')[0].innerHTML = data
})
window.addEventListener('blur', function(){
focused=false
})
window.addEventListener('focus', function(){
focused=true
})
textbox.addEventListener("input", function() {
text = textbox.value
if (!text & & is_typing==true){
is_typing=false;
socket.emit('typing', false);
}
else if (text & & is_typing==false) {
is_typing=true;
socket.emit('typing', true);
}
})
socket.on('typing', function (users){
if (users.length==0){
document.getElementById('typing-indicator').innerHTML = '';
document.getElementById('loading-indicator').classList.add('d-none');
}
else if (users.length==1){
document.getElementById('typing-indicator').innerHTML = '< b > '+users[0]+"< / b > is typing...";
document.getElementById('loading-indicator').classList.remove('d-none');
}
else if (users.length==2){
document.getElementById('typing-indicator').innerHTML = '< b > '+users[0]+"< / b > and < b > "+users[1]+"< / b > are typing...";
document.getElementById('loading-indicator').classList.remove('d-none');
}
else if (users.length==3){
document.getElementById('typing-indicator').innerHTML = '< b > '+users[0]+"< / b > , < b > "+users[1]+"< / b > , and < b > "+users[2]+"< / b > are typing...";
document.getElementById('loading-indicator').classList.remove('d-none');
}
else if (users.length>=4){
more=users.length-3
document.getElementById('typing-indicator').innerHTML = '< b > '+users[0]+"< / b > , < b > "+users[1]+"< / b > , < b > "+users[2]+"< / b > and "+more.toString()+" more are typing...";
document.getElementById('loading-indicator').classList.remove('d-none');
}
})
< / script >
2022-03-22 03:08:00 +00:00
{% include "emoji_modal.html" %}
2022-03-19 22:47:52 +00:00
{% endblock %}