rDrama/files/templates/chat.html

274 lines
8.3 KiB
HTML
Raw Normal View History

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 03:32:24 +00:00
<span data-toggle="tooltip" data-placement="bottom" data-bs-title="Users online right now" title="Users online right now" class="text-muted">
2022-03-22 02:35:12 +00:00
<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>
2022-03-22 05:19:56 +00:00
<img class="mobile-avatar profile-pic-30 mr-1 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
2022-03-22 02:35:12 +00:00
<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>
2022-03-22 14:50:01 +00:00
<span class="text d-none"></span>
<button class="quote-btn btn d-inline-block pt-0" onclick="quote2()"><i class="fas fa-reply" aria-hidden="true"></i></button>
2022-03-22 02:35:12 +00:00
</div>
</div>
</div>
</div>
</div>
2022-03-19 23:14:44 +00:00
</div>
2022-03-19 21:20:23 +00:00
2022-03-22 05:19:56 +00:00
<div class="container py-0 chat-container">
2022-03-22 02:35:12 +00:00
<div id="chat-window">
<div id="chat-text" class="fullchat">
2022-03-22 05:19:56 +00:00
{% for m in messages %}
<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" src="{{m['avatar']}}">
</span>
<div class="pl-md-3 text-muted">
<div>
<img src="{{m['avatar']}}" class="mobile-avatar profile-pic-30 mr-1 d-inline-block d-md-none" data-toggle="tooltip" data-placement="right">
<a class="font-weight-bold text-black userlink" style="color:#{{m['namecolor']}}" target="_blank" href="/@{{m['username']}}">{{m['username']}}</a>
<div style="overflow:hidden">
2022-03-22 14:39:52 +00:00
<span class="chat-message text-black text-break">{{m['text_html'] | safe}}</span>
2022-03-22 14:42:41 +00:00
{% set text=m['text'] %}
2022-03-22 14:39:52 +00:00
<button class="btn d-inline-block pt-0"><i onclick="quote('{{text}}')" class="fas fa-reply" aria-hidden="true"></i></button>
2022-03-22 05:19:56 +00:00
</div>
</div>
</div>
</div>
</div>
{% endfor %}
2022-03-22 02:35:12 +00:00
</div>
<div id="system-template">
<div class="system-line">
<p class="message text-muted"></p>
</div>
</div>
</div>
2022-03-23 16:08:57 +00:00
<div id='message' class="d-none position-relative form-group d-flex pb-3">
2022-03-22 02:35:12 +00:00
<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:12:13 +00:00
<i class="btn btn-secondary mr-2 fas fa-smile-beam" style="padding-top:0.65rem" 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 04:07:35 +00:00
<textarea id="input-text" minlength="1" maxlength="1000" type="text" class="form-control" placeholder="Message" autocomplete="off" autofocus rows="1"></textarea>
2022-03-22 02:35:12 +00:00
<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>
2022-03-23 16:08:57 +00:00
<script data-cfasync="false" src="/assets/js/socketio.js?v=1"></script>
2022-03-19 21:20:23 +00:00
2022-03-22 14:56:08 +00:00
<script data-cfasync="false">
2022-03-22 02:35:12 +00:00
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;
2022-03-22 05:19:56 +00:00
box.scrollTo(0, box.scrollHeight)
2022-03-22 02:35:12 +00:00
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) {
2022-03-22 14:42:41 +00:00
let text = json['text']
let text_html = json['text_html']
2022-03-22 02:35:12 +00:00
2022-03-22 14:42:41 +00:00
if (text_html.includes('<a href="/id/{{v.id}}">')){
2022-03-22 02:35:12 +00:00
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']
2022-03-22 05:19:56 +00:00
document.getElementsByClassName('mobile-avatar')[0].src = json['avatar']
2022-03-22 02:35:12 +00:00
document.getElementsByClassName('userlink')[0].href = '/@' + json['username']
document.getElementsByClassName('userlink')[0].innerHTML = json['username']
document.getElementsByClassName('userlink')[0].style.color = '#' + json['namecolor']
2022-03-22 14:50:01 +00:00
document.getElementsByClassName('text')[0].innerHTML = text
2022-03-22 14:42:41 +00:00
document.getElementsByClassName('chat-message')[0].innerHTML = text_html
2022-03-22 02:35:12 +00:00
document.getElementById('chat-text').append(document.getElementsByClassName('chat-line')[0].cloneNode(true))
2022-03-22 03:41:27 +00:00
if (scrolled_down) box.scrollTo(0, box.scrollHeight)
2022-03-22 02:35:12 +00:00
})
function send() {
2022-03-22 04:12:28 +00:00
text = textbox.value.trim()
if (text)
{
socket.emit('speak', text);
textbox.value = ''
2022-03-22 05:19:56 +00:00
textbox.style.height = '40px'
2022-03-22 04:12:28 +00:00
is_typing = false
socket.emit('typing', false);
}
2022-03-22 02:35:12 +00:00
}
2022-03-22 14:26:42 +00:00
function quote(text) {
2022-03-22 14:35:53 +00:00
textbox.style.height = '80px'
2022-03-22 14:33:39 +00:00
textbox.value = '> ' + text + '\n\n'
2022-03-22 14:26:42 +00:00
textbox.focus()
}
2022-03-22 04:07:20 +00:00
2022-03-22 14:50:01 +00:00
function quote2() {
textbox.style.height = '80px'
text = document.getElementsByClassName('text')[0].innerHTML
textbox.value = '> ' + text + '\n\n'
textbox.focus()
}
2022-03-22 04:07:20 +00:00
textbox.addEventListener("keyup", function(e) {
if (!e.shiftKey && e.key === 'Enter') {
e.preventDefault();
send()
}
})
2022-03-22 03:32:24 +00:00
socket.on('online', function(data){
document.getElementsByClassName('board-chat-count')[0].innerHTML = data.length
let online = ''
for (const u of data)
online += `<li><a href="/@${u}" class="text-lg">${u}</a></li>`
document.getElementById('online').innerHTML = online
2022-03-22 02:35:12 +00:00
})
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 14:57:04 +00:00
<style>
#chat-window {
max-height:calc(100vh - 300px);
overflow-y: scroll;
}
.fullchat .chat-profile {
min-width: 42px;
width: 42px;
height: 42px;
}
#chat-window::-webkit-scrollbar {
display: none;
}
#chat-window {
-ms-overflow-style: none;
scrollbar-width: none;
}
.chat-mention {
background-color: var(--primary55);
border-radius: 5px;
}
.profile-pic-30 {
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
object-fit: cover;
}
.chat-message p {
display: inline-block;
}
</style>
2022-03-22 03:08:00 +00:00
{% include "emoji_modal.html" %}
2022-03-19 22:47:52 +00:00
{% endblock %}