485 lines
19 KiB
Common Lisp
485 lines
19 KiB
Common Lisp
(text "{% extends \"root.html\" %} {% block head %}")
|
|
(title
|
|
(text "Chats - {{ config.name }}"))
|
|
(link ("rel" "stylesheet") ("data-turbo-temporary" "true") ("href" "/css/chats.css?v=tetratto-{{ random_cache_breaker }}"))
|
|
(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"chats\", hide_user_menu=true) }}")
|
|
(nav
|
|
("class" "chats_nav")
|
|
(button
|
|
("class" "flex gap-2 items-center active")
|
|
("onclick" "toggle_sidebars(event)")
|
|
(text "{{ icon \"panel-left\" }} {% if community -%}")
|
|
(b
|
|
("class" "name shorter")
|
|
(text "{% if community.context.display_name -%} {{ community.context.display_name }} {% else %} {{ community.title }} {%- endif %}"))
|
|
(text "{% else %}")
|
|
(b
|
|
(text "{{ text \"chats:label.my_chats\" }}"))
|
|
(text "{%- endif %}")))
|
|
(div
|
|
("class" "flex")
|
|
(div
|
|
("class" "sidebar flex flex-col items-center gap-2")
|
|
("id" "community_list")
|
|
("style" "width: var(--list-bar-width)")
|
|
(a
|
|
("href" "/chats/0/0")
|
|
("class" "button lowered channel_icon {% if selected_community == 0 -%}selected{%- endif %}")
|
|
("data-turbo" "false")
|
|
(text "{{ icon \"message-circle\" }}"))
|
|
(text "{% for community in communities %} {% if community.id != 0 -%}")
|
|
(a
|
|
("href" "/chats/{{ community.id }}/0")
|
|
("class" "button lowered channel_icon {% if selected_community == community.id -%}selected{%- endif %}")
|
|
("data-turbo" "false")
|
|
(text "{{ components::community_avatar(id=community.id, community=community, size=\"48px\") }}"))
|
|
(text "{%- endif %} {% endfor %}"))
|
|
(div
|
|
("class" "sidebar flex flex-col gap-2 justify-between")
|
|
("id" "channels_list")
|
|
(div
|
|
("class" "flex flex-col gap-2 w-full")
|
|
(div
|
|
("class" "title flex items-center justify-between channel_header")
|
|
(text "{% if community -%}")
|
|
(b
|
|
("class" "name shorter")
|
|
(text "{% if community.context.display_name -%} {{ community.context.display_name }} {% else %} {{ community.title }} {%- endif %}"))
|
|
(text "{% else %}")
|
|
(b
|
|
(text "{{ text \"chats:label.my_chats\" }}"))
|
|
(text "{%- endif %} {% if selected_community != 0 -%}")
|
|
(div
|
|
("class" "dropdown")
|
|
(button
|
|
("class" "camo small")
|
|
("onclick" "trigger('atto::hooks::dropdown', [event])")
|
|
("exclude" "dropdown")
|
|
(text "{{ icon \"ellipsis\" }}"))
|
|
(div
|
|
("class" "inner")
|
|
(a
|
|
("href" "/community/{{ selected_community }}")
|
|
(text "{{ icon \"book-heart\" }}")
|
|
(span
|
|
(text "{{ text \"communities:label.show_community\" }}")))
|
|
(text "{% if can_manage_channels -%}")
|
|
(a
|
|
("href" "/community/{{ selected_community }}/manage")
|
|
(text "{{ icon \"settings\" }}")
|
|
(span
|
|
(text "{{ text \"general:action.manage\" }}")))
|
|
(text "{%- endif %}")))
|
|
(text "{%- endif %}"))
|
|
(text "{% if can_manage_channels -%}")
|
|
(a
|
|
("class" "button w-full justify-start lowered")
|
|
("href" "/community/{{ selected_community }}/manage#/channels")
|
|
(text "{{ icon \"plus\" }}")
|
|
(span
|
|
(text "{{ text \"communities:action.create_channel\" }}")))
|
|
(text "{%- endif %}")
|
|
(turbo-frame
|
|
("id" "channels_list_frame")
|
|
("src" "/chats/{{ selected_community }}/{{ selected_channel }}/_channels")
|
|
("target" "_top")))
|
|
(text "{{ components::user_plate(user=user, show_menu=true) }}"))
|
|
(text "{% if channel -%}")
|
|
(div
|
|
("class" "w-full flex flex-col gap-2 padded_section")
|
|
("id" "stream")
|
|
("style" "padding: var(--pad-4)")
|
|
(turbo-frame
|
|
("id" "stream_body_frame")
|
|
("src" "/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}&message={{ message }}"))
|
|
(form
|
|
("class" "card flex flex-row gap-2")
|
|
("onsubmit" "create_message_from_form(event)")
|
|
(textarea
|
|
("type" "text")
|
|
("name" "content")
|
|
("id" "content")
|
|
("placeholder" "message {{ channel.title }}")
|
|
("required" "")
|
|
("minlength" "2")
|
|
("maxlength" "2048")
|
|
("style" "min-height: 48px !important; height: 48px"))
|
|
(button
|
|
("class" "camo send_button")
|
|
("title" "Send")
|
|
(text "{{ icon \"send-horizontal\" }}"))))
|
|
(text "{%- endif %}")
|
|
|
|
; emoji picker
|
|
(text "{{ components::emoji_picker(element_id=\"\", render_dialog=true, render_button=false) }}")
|
|
(input ("id" "react_emoji_picker_field") ("class" "hidden") ("type" "hidden"))
|
|
|
|
(script
|
|
(text "window.EMOJI_PICKER_MODE = \"replace\";
|
|
document.getElementById(\"react_emoji_picker_field\").addEventListener(\"change\", (e) => {
|
|
if (!EMOJI_PICKER_REACTION_MESSAGE_ID) {
|
|
return;
|
|
}
|
|
|
|
const emoji = e.target.value === \"::\" ? \":heart:\" : e.target.value;
|
|
trigger(\"me::message_react\", [document.getElementById(`message-${EMOJI_PICKER_REACTION_MESSAGE_ID}`), EMOJI_PICKER_REACTION_MESSAGE_ID, emoji]);
|
|
});"))
|
|
|
|
; ...
|
|
(script
|
|
(text "window.CURRENT_PAGE = Number.parseInt(\"{{ page }}\");
|
|
window.VIEWING_SINGLE = \"{{ message }}\".length > 0;
|
|
window.CHAT_PROPS = {
|
|
selected_community: \"{{ selected_community }}\",
|
|
selected_channel: \"{{ selected_channel }}\",
|
|
membership_role: Number.parseInt(\"{{ membership_role }}\"),
|
|
};
|
|
|
|
window.SIDEBARS_OPEN = false;
|
|
if (new URLSearchParams(window.location.search).get(\"nav\") === \"true\") {
|
|
window.SIDEBARS_OPEN = true;
|
|
}
|
|
|
|
if (
|
|
window.SIDEBARS_OPEN &&
|
|
!document.body.classList.contains(\"sidebars_shown\")
|
|
) {
|
|
toggle_sidebars();
|
|
window.SIDEBARS_OPEN = true;
|
|
}
|
|
|
|
for (const anchor of document.querySelectorAll(\"[data-turbo=false]\")) {
|
|
anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
|
|
}
|
|
|
|
function mention_user(username) {
|
|
document.getElementById(\"content\").value += ` @${username} `;
|
|
}
|
|
|
|
function toggle_sidebars() {
|
|
window.SIDEBARS_OPEN = !window.SIDEBARS_OPEN;
|
|
|
|
for (const anchor of document.querySelectorAll(
|
|
\"[data-turbo=false]\",
|
|
)) {
|
|
anchor.href = anchor.href.replace(
|
|
`?nav=${!window.SIDEBARS_OPEN}`,
|
|
`?nav=${window.SIDEBARS_OPEN}`,
|
|
);
|
|
}
|
|
|
|
const community_list = document.getElementById(\"community_list\");
|
|
const channels_list = document.getElementById(\"channels_list\");
|
|
|
|
if (document.body.classList.contains(\"sidebars_shown\")) {
|
|
// hide
|
|
document.body.classList.remove(\"sidebars_shown\");
|
|
community_list.style.left = \"-200%\";
|
|
channels_list.style.left = \"-200%\";
|
|
} else {
|
|
// show
|
|
document.body.classList.add(\"sidebars_shown\");
|
|
community_list.style.left = \"0\";
|
|
channels_list.style.left = \"var(--list-bar-width)\";
|
|
}
|
|
}
|
|
|
|
globalThis.add_member = async (id) => {
|
|
await trigger(\"atto::debounce\", [\"channels::add_member\"]);
|
|
const member = await trigger(\"atto::prompt\", [\"Member username:\"]);
|
|
|
|
if (!member) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/v1/channels/${id}/add`, {
|
|
method: \"POST\",
|
|
headers: {
|
|
\"Content-Type\": \"application/json\",
|
|
},
|
|
body: JSON.stringify({
|
|
member,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
trigger(\"atto::toast\", [
|
|
res.ok ? \"success\" : \"error\",
|
|
res.message,
|
|
]);
|
|
});
|
|
};
|
|
|
|
globalThis.update_channel_title = async (id) => {
|
|
await trigger(\"atto::debounce\", [\"channels::update_title\"]);
|
|
const title = await trigger(\"atto::prompt\", [\"New channel title:\"]);
|
|
|
|
if (!title) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/v1/channels/${id}/title`, {
|
|
method: \"POST\",
|
|
headers: {
|
|
\"Content-Type\": \"application/json\",
|
|
},
|
|
body: JSON.stringify({
|
|
title,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
trigger(\"atto::toast\", [
|
|
res.ok ? \"success\" : \"error\",
|
|
res.message,
|
|
]);
|
|
});
|
|
};
|
|
|
|
globalThis.kick_member = async (cid, uid) => {
|
|
if (
|
|
!(await trigger(\"atto::confirm\", [
|
|
\"Are you sure you would like to do this?\",
|
|
]))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/v1/channels/${cid}/kick`, {
|
|
method: \"POST\",
|
|
headers: {
|
|
\"Content-Type\": \"application/json\",
|
|
},
|
|
body: JSON.stringify({
|
|
member: uid,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
trigger(\"atto::toast\", [
|
|
res.ok ? \"success\" : \"error\",
|
|
res.message,
|
|
]);
|
|
});
|
|
};
|
|
|
|
globalThis.delete_channel = async (id) => {
|
|
if (
|
|
!(await trigger(\"atto::confirm\", [
|
|
\"Are you sure you would like to do this?\",
|
|
]))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/v1/channels/${id}`, {
|
|
method: \"DELETE\",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
trigger(\"atto::toast\", [
|
|
res.ok ? \"success\" : \"error\",
|
|
res.message,
|
|
]);
|
|
});
|
|
};"))
|
|
(script
|
|
("id" "socket_init")
|
|
("data-turbo-permanent" "true")
|
|
(text "globalThis.socket_init = () => {
|
|
if (window.socket) {
|
|
window.socket.send(\"Close\");
|
|
window.socket.close();
|
|
window.socket = undefined;
|
|
console.log(\"closed lingering\");
|
|
}
|
|
|
|
if (window.CHAT_PROPS.selected_community !== \"0\") {
|
|
const endpoint = `${window.location.origin.replace(\"http\", \"ws\")}/api/v1/_connect/${window.CHAT_PROPS.selected_community}`;
|
|
const socket = new WebSocket(endpoint);
|
|
window.socket = socket;
|
|
window.socket_id = window.CHAT_PROPS.selected_community;
|
|
} else {
|
|
const endpoint = `${window.location.origin.replace(\"http\", \"ws\")}/api/v1/_connect/${window.CHAT_PROPS.selected_channel}`;
|
|
const socket = new WebSocket(endpoint);
|
|
window.socket = socket;
|
|
window.socket_id = window.CHAT_PROPS.selected_channel;
|
|
}
|
|
|
|
if (window.CHANNEL_NOTIFS_INTERVAL) {
|
|
window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
|
|
}
|
|
|
|
window.CHANNEL_NOTIFS_INTERVAL = setInterval(() => {
|
|
if (!window.CHAT_PROPS.selected_channel) {
|
|
return;
|
|
}
|
|
|
|
if (!window.location.href.includes(\"{{ selected_channel }}\")) {
|
|
window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
|
|
return;
|
|
}
|
|
|
|
fetch(
|
|
`/api/v1/notifications/tag/chats/${window.CHAT_PROPS.selected_channel}`,
|
|
{ method: \"DELETE\" },
|
|
);
|
|
}, 10000);
|
|
|
|
window.socket.addEventListener(\"open\", () => {
|
|
// auth
|
|
window.socket.send(
|
|
JSON.stringify({
|
|
method: \"Headers\",
|
|
data: JSON.stringify({
|
|
// SocketHeaders
|
|
is_channel: window.SUBSCRIBE_CHANNEL,
|
|
}),
|
|
}),
|
|
);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
window.LAST_MESSAGE_AUTHOR_ID = null;
|
|
window.socket.addEventListener(\"message\", async (event) => {
|
|
if (event.data === \"Ping\") {
|
|
return socket.send(\"Pong\");
|
|
}
|
|
|
|
const msg = JSON.parse(event.data);
|
|
|
|
if (
|
|
msg.method === \"Message\" &&
|
|
window.CURRENT_PAGE === 0 &&
|
|
window.VIEWING_SINGLE
|
|
) {
|
|
const [channel_id, data] = JSON.parse(msg.data);
|
|
if (channel_id !== window.CHAT_PROPS.selected_channel) {
|
|
// message not for us... maybe send notification later
|
|
// something like /api/v1/messages/{id}/mark_unread
|
|
return;
|
|
}
|
|
|
|
if (document.getElementById(\"stream_body\")) {
|
|
const element = document.createElement(\"div\");
|
|
element.style.display = \"contents\";
|
|
|
|
const message_owner = JSON.parse(msg.data)[1].owner;
|
|
element.innerHTML = await (
|
|
await fetch(
|
|
`/chats/${window.CHAT_PROPS.selected_community}/${window.CHAT_PROPS.selected_channel}/_render`,
|
|
{
|
|
method: \"POST\",
|
|
headers: {
|
|
\"Content-Type\": \"application/json\",
|
|
},
|
|
body: JSON.stringify({
|
|
data: msg.data,
|
|
grouped:
|
|
message_owner ===
|
|
window.LAST_MESSAGE_AUTHOR_ID,
|
|
}),
|
|
},
|
|
)
|
|
).text();
|
|
|
|
document
|
|
.getElementById(\"stream_body\")
|
|
.prepend(element);
|
|
clean_text();
|
|
|
|
window.LAST_MESSAGE_AUTHOR_ID = message_owner;
|
|
} else {
|
|
console.log(\"abandoned remote\");
|
|
socket.close();
|
|
}
|
|
} else if (msg.method === \"Delete\") {
|
|
const data = JSON.parse(msg.data);
|
|
if (document.getElementById(`message-${data.id}`)) {
|
|
document
|
|
.getElementById(`message-${data.id}`)
|
|
.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
globalThis.create_message_from_form = async (e) => {
|
|
e.preventDefault();
|
|
await trigger(\"atto::debounce\", [\"messages::create\"]);
|
|
|
|
fetch(\"/api/v1/messages\", {
|
|
method: \"POST\",
|
|
headers: {
|
|
\"Content-Type\": \"application/json\",
|
|
},
|
|
body: JSON.stringify({
|
|
content: e.target.content.value.trim(),
|
|
channel: window.CHAT_PROPS.selected_channel,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
if (!res.ok) {
|
|
trigger(\"atto::toast\", [\"error\", res.message]);
|
|
}
|
|
|
|
e.target.reset();
|
|
});
|
|
};
|
|
|
|
globalThis.delete_message = async (id) => {
|
|
if (
|
|
!(await trigger(\"atto::confirm\", [
|
|
\"Are you sure you would like to do this?\",
|
|
]))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/v1/messages/${id}`, {
|
|
method: \"DELETE\",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
trigger(\"atto::toast\", [
|
|
res.ok ? \"success\" : \"error\",
|
|
res.message,
|
|
]);
|
|
});
|
|
};
|
|
|
|
const clean_text = () => {
|
|
trigger(\"atto::clean_date_codes\");
|
|
trigger(\"atto::hooks::online_indicator\");
|
|
trigger(\"atto::hooks::check_message_reactions\");
|
|
};
|
|
|
|
document.addEventListener(
|
|
\"turbo:before-frame-render\",
|
|
(event) => {
|
|
setTimeout(clean_text, 50);
|
|
},
|
|
);
|
|
|
|
setTimeout(clean_text, 150);
|
|
}, 250);
|
|
};"))
|
|
(text "{% if selected_channel -%}")
|
|
(script
|
|
(text "window.SUBSCRIBE_CHANNEL = \"{{ selected_community }}\" === \"0\";
|
|
|
|
setTimeout(() => {
|
|
if (!window.SUBSCRIBE_CHANNEL) {
|
|
// sub community
|
|
if (window.socket_id !== \"{{ selected_community }}\") {
|
|
socket_init();
|
|
}
|
|
} else {
|
|
// sub channel
|
|
if (window.socket_id !== \"{{ selected_channel }}\") {
|
|
socket_init();
|
|
}
|
|
}
|
|
}, 100);"))
|
|
(text "{%- endif %}"))
|
|
(text "{% endblock %}")
|