add: finish ui rewrite
This commit is contained in:
parent
e9846016e6
commit
5dec98d698
119 changed files with 8776 additions and 9350 deletions
|
|
@ -1,141 +1,117 @@
|
|||
{% extends "root.html" %} {% block head %}
|
||||
<title>Chats - {{ config.name }}</title>
|
||||
{% 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)"
|
||||
>
|
||||
{{ icon "panel-left" }} {% if community -%}
|
||||
<b class="name shorter">
|
||||
{% if community.context.display_name -%} {{
|
||||
community.context.display_name }} {% else %} {{ community.title }}
|
||||
{%- endif %}
|
||||
</b>
|
||||
{% else %}
|
||||
<b>{{ text "chats:label.my_chats" }}</b>
|
||||
{%- endif %}
|
||||
</button>
|
||||
</nav>
|
||||
(text "{% extends \"root.html\" %} {% block head %}")
|
||||
(title
|
||||
(text "Chats - {{ config.name }}"))
|
||||
|
||||
<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 quaternary channel_icon {% if selected_community == 0 -%}selected{%- endif %}"
|
||||
data-turbo="false"
|
||||
>
|
||||
{{ icon "message-circle" }}
|
||||
</a>
|
||||
(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 %}")))
|
||||
|
||||
{% for community in communities %} {% if community.id != 0 -%}
|
||||
<a
|
||||
href="/chats/{{ community.id }}/0"
|
||||
class="button quaternary channel_icon {% if selected_community == community.id -%}selected{%- endif %}"
|
||||
data-turbo="false"
|
||||
>
|
||||
{{ components::community_avatar(id=community.id,
|
||||
community=community, size="48px") }}
|
||||
</a>
|
||||
{%- endif %} {% endfor %}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{% if community -%}
|
||||
<b class="name shorter">
|
||||
{% if community.context.display_name -%} {{
|
||||
community.context.display_name }} {% else %} {{
|
||||
community.title }} {%- endif %}
|
||||
</b>
|
||||
{% else %}
|
||||
<b>{{ text "chats:label.my_chats" }}</b>
|
||||
{%- endif %} {% if selected_community != 0 -%}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
<a href="/community/{{ selected_community }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span
|
||||
>{{ text "communities:label.show_community"
|
||||
}}</span
|
||||
>
|
||||
</a>
|
||||
{% if can_manage_channels -%}
|
||||
<a href="/community/{{ selected_community }}/manage">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "general:action.manage" }}</span>
|
||||
</a>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
{% if can_manage_channels -%}
|
||||
<a
|
||||
class="button w-full justify-start quaternary"
|
||||
href="/community/{{ selected_community }}/manage#/channels"
|
||||
>
|
||||
{{ icon "plus" }}
|
||||
<span>{{ text "communities:action.create_channel" }}</span>
|
||||
</a>
|
||||
{%- endif %}
|
||||
|
||||
<turbo-frame
|
||||
id="channels_list_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
|
||||
target="_top"
|
||||
></turbo-frame>
|
||||
</div>
|
||||
|
||||
{{ components::user_plate(user=user, show_menu=true) }}
|
||||
</div>
|
||||
|
||||
{% if channel -%}
|
||||
<div class="w-full flex flex-col gap-2" id="stream" style="padding: 1rem">
|
||||
<turbo-frame
|
||||
id="stream_body_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}&message={{ message }}"
|
||||
></turbo-frame>
|
||||
|
||||
<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"
|
||||
></textarea>
|
||||
|
||||
<button class="camo send_button" title="Send">
|
||||
{{ icon "send-horizontal" }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{%- endif %}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
(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 quaternary 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 quaternary 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 quaternary")
|
||||
("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")
|
||||
("id" "stream")
|
||||
("style" "padding: 1rem")
|
||||
(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 %}")
|
||||
(style
|
||||
(text ":root {
|
||||
--list-bar-width: 64px;
|
||||
--channels-bar-width: 256px;
|
||||
--sidebar-height: calc(100dvh - 42px);
|
||||
|
|
@ -224,7 +200,7 @@ hide_user_menu=true) }}
|
|||
width: calc(100% - var(--list-bar-width));
|
||||
bottom: 0;
|
||||
left: var(--list-bar-width);
|
||||
content: "";
|
||||
content: \"\";
|
||||
}
|
||||
|
||||
nav .content_container {
|
||||
|
|
@ -352,44 +328,42 @@ hide_user_menu=true) }}
|
|||
.chats_nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.CURRENT_PAGE = Number.parseInt("{{ page }}");
|
||||
window.VIEWING_SINGLE = "{{ message }}".length > 0;
|
||||
}"))
|
||||
(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 }}"),
|
||||
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") {
|
||||
if (new URLSearchParams(window.location.search).get(\"nav\") === \"true\") {
|
||||
window.SIDEBARS_OPEN = true;
|
||||
}
|
||||
|
||||
if (
|
||||
window.SIDEBARS_OPEN &&
|
||||
!document.body.classList.contains("sidebars_shown")
|
||||
!document.body.classList.contains(\"sidebars_shown\")
|
||||
) {
|
||||
toggle_sidebars();
|
||||
window.SIDEBARS_OPEN = true;
|
||||
}
|
||||
|
||||
for (const anchor of document.querySelectorAll("[data-turbo=false]")) {
|
||||
for (const anchor of document.querySelectorAll(\"[data-turbo=false]\")) {
|
||||
anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
|
||||
}
|
||||
|
||||
function mention_user(username) {
|
||||
document.getElementById("content").value += ` @${username} `;
|
||||
document.getElementById(\"content\").value += ` @${username} `;
|
||||
}
|
||||
|
||||
function toggle_sidebars() {
|
||||
window.SIDEBARS_OPEN = !window.SIDEBARS_OPEN;
|
||||
|
||||
for (const anchor of document.querySelectorAll(
|
||||
"[data-turbo=false]",
|
||||
\"[data-turbo=false]\",
|
||||
)) {
|
||||
anchor.href = anchor.href.replace(
|
||||
`?nav=${!window.SIDEBARS_OPEN}`,
|
||||
|
|
@ -397,34 +371,34 @@ hide_user_menu=true) }}
|
|||
);
|
||||
}
|
||||
|
||||
const community_list = document.getElementById("community_list");
|
||||
const channels_list = document.getElementById("channels_list");
|
||||
const community_list = document.getElementById(\"community_list\");
|
||||
const channels_list = document.getElementById(\"channels_list\");
|
||||
|
||||
if (document.body.classList.contains("sidebars_shown")) {
|
||||
if (document.body.classList.contains(\"sidebars_shown\")) {
|
||||
// hide
|
||||
document.body.classList.remove("sidebars_shown");
|
||||
community_list.style.left = "-200%";
|
||||
channels_list.style.left = "-200%";
|
||||
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)";
|
||||
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:"]);
|
||||
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",
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
member,
|
||||
|
|
@ -432,25 +406,25 @@ hide_user_menu=true) }}
|
|||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
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:"]);
|
||||
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",
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
|
|
@ -458,8 +432,8 @@ hide_user_menu=true) }}
|
|||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
trigger(\"atto::toast\", [
|
||||
res.ok ? \"success\" : \"error\",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
|
|
@ -467,17 +441,17 @@ hide_user_menu=true) }}
|
|||
|
||||
globalThis.kick_member = async (cid, uid) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you would like to do this?",
|
||||
!(await trigger(\"atto::confirm\", [
|
||||
\"Are you sure you would like to do this?\",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/v1/channels/${cid}/kick`, {
|
||||
method: "POST",
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
member: uid,
|
||||
|
|
@ -485,8 +459,8 @@ hide_user_menu=true) }}
|
|||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
trigger(\"atto::toast\", [
|
||||
res.ok ? \"success\" : \"error\",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
|
|
@ -494,42 +468,42 @@ hide_user_menu=true) }}
|
|||
|
||||
globalThis.delete_channel = async (id) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you would like to do this?",
|
||||
!(await trigger(\"atto::confirm\", [
|
||||
\"Are you sure you would like to do this?\",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/v1/channels/${id}`, {
|
||||
method: "DELETE",
|
||||
method: \"DELETE\",
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
trigger(\"atto::toast\", [
|
||||
res.ok ? \"success\" : \"error\",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<script id="socket_init" data-turbo-permanent="true">
|
||||
globalThis.socket_init = () => {
|
||||
};"))
|
||||
(script
|
||||
("id" "socket_init")
|
||||
("data-turbo-permanent" "true")
|
||||
(text "globalThis.socket_init = () => {
|
||||
if (window.socket) {
|
||||
window.socket.send("Close");
|
||||
window.socket.send(\"Close\");
|
||||
window.socket.close();
|
||||
window.socket = undefined;
|
||||
console.log("closed lingering");
|
||||
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}`;
|
||||
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 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;
|
||||
|
|
@ -544,25 +518,25 @@ hide_user_menu=true) }}
|
|||
return;
|
||||
}
|
||||
|
||||
if (!window.location.href.includes("{{ selected_channel }}")) {
|
||||
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" },
|
||||
{ method: \"DELETE\" },
|
||||
);
|
||||
}, 10000);
|
||||
|
||||
window.socket.addEventListener("open", () => {
|
||||
window.socket.addEventListener(\"open\", () => {
|
||||
// auth
|
||||
window.socket.send(
|
||||
JSON.stringify({
|
||||
method: "Headers",
|
||||
method: \"Headers\",
|
||||
data: JSON.stringify({
|
||||
// SocketHeaders
|
||||
user: "{{ user.id }}",
|
||||
user: \"{{ user.id }}\",
|
||||
is_channel: window.SUBSCRIBE_CHANNEL,
|
||||
}),
|
||||
}),
|
||||
|
|
@ -571,15 +545,15 @@ hide_user_menu=true) }}
|
|||
|
||||
setTimeout(() => {
|
||||
window.LAST_MESSAGE_AUTHOR_ID = null;
|
||||
window.socket.addEventListener("message", async (event) => {
|
||||
if (event.data === "Ping") {
|
||||
return socket.send("Pong");
|
||||
window.socket.addEventListener(\"message\", async (event) => {
|
||||
if (event.data === \"Ping\") {
|
||||
return socket.send(\"Pong\");
|
||||
}
|
||||
|
||||
const msg = JSON.parse(event.data);
|
||||
|
||||
if (
|
||||
msg.method === "Message" &&
|
||||
msg.method === \"Message\" &&
|
||||
window.CURRENT_PAGE === 0 &&
|
||||
window.VIEWING_SINGLE
|
||||
) {
|
||||
|
|
@ -590,18 +564,18 @@ hide_user_menu=true) }}
|
|||
return;
|
||||
}
|
||||
|
||||
if (document.getElementById("stream_body")) {
|
||||
const element = document.createElement("div");
|
||||
element.style.display = "contents";
|
||||
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",
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
data: msg.data,
|
||||
|
|
@ -614,16 +588,16 @@ hide_user_menu=true) }}
|
|||
).text();
|
||||
|
||||
document
|
||||
.getElementById("stream_body")
|
||||
.getElementById(\"stream_body\")
|
||||
.prepend(element);
|
||||
clean_text();
|
||||
|
||||
window.LAST_MESSAGE_AUTHOR_ID = message_owner;
|
||||
} else {
|
||||
console.log("abandoned remote");
|
||||
console.log(\"abandoned remote\");
|
||||
socket.close();
|
||||
}
|
||||
} else if (msg.method === "Delete") {
|
||||
} else if (msg.method === \"Delete\") {
|
||||
const data = JSON.parse(msg.data);
|
||||
if (document.getElementById(`message-${data.id}`)) {
|
||||
document
|
||||
|
|
@ -635,12 +609,12 @@ hide_user_menu=true) }}
|
|||
|
||||
globalThis.create_message_from_form = async (e) => {
|
||||
e.preventDefault();
|
||||
await trigger("atto::debounce", ["messages::create"]);
|
||||
await trigger(\"atto::debounce\", [\"messages::create\"]);
|
||||
|
||||
fetch("/api/v1/messages", {
|
||||
method: "POST",
|
||||
fetch(\"/api/v1/messages\", {
|
||||
method: \"POST\",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
\"Content-Type\": \"application/json\",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value.trim(),
|
||||
|
|
@ -650,7 +624,7 @@ hide_user_menu=true) }}
|
|||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
trigger("atto::toast", ["error", res.message]);
|
||||
trigger(\"atto::toast\", [\"error\", res.message]);
|
||||
}
|
||||
|
||||
e.target.reset();
|
||||
|
|
@ -659,32 +633,32 @@ hide_user_menu=true) }}
|
|||
|
||||
globalThis.delete_message = async (id) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you would like to do this?",
|
||||
!(await trigger(\"atto::confirm\", [
|
||||
\"Are you sure you would like to do this?\",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/v1/messages/${id}`, {
|
||||
method: "DELETE",
|
||||
method: \"DELETE\",
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
trigger(\"atto::toast\", [
|
||||
res.ok ? \"success\" : \"error\",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
};
|
||||
|
||||
const clean_text = () => {
|
||||
trigger("atto::clean_date_codes");
|
||||
trigger("atto::hooks::online_indicator");
|
||||
trigger(\"atto::clean_date_codes\");
|
||||
trigger(\"atto::hooks::online_indicator\");
|
||||
};
|
||||
|
||||
document.addEventListener(
|
||||
"turbo:before-frame-render",
|
||||
\"turbo:before-frame-render\",
|
||||
(event) => {
|
||||
setTimeout(clean_text, 50);
|
||||
},
|
||||
|
|
@ -692,27 +666,24 @@ hide_user_menu=true) }}
|
|||
|
||||
setTimeout(clean_text, 150);
|
||||
}, 250);
|
||||
};
|
||||
</script>
|
||||
|
||||
{% if selected_channel -%}
|
||||
<script>
|
||||
window.SUBSCRIBE_CHANNEL = "{{ selected_community }}" === "0";
|
||||
};"))
|
||||
(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 }}") {
|
||||
if (window.socket_id !== \"{{ selected_community }}\") {
|
||||
socket_init();
|
||||
}
|
||||
} else {
|
||||
// sub channel
|
||||
if (window.socket_id !== "{{ selected_channel }}") {
|
||||
if (window.socket_id !== \"{{ selected_channel }}\") {
|
||||
socket_init();
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
</script>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
}, 100);"))
|
||||
(text "{%- endif %}"))
|
||||
|
||||
(text "{% endblock %}")
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
{%- import "components.html" as components -%}
|
||||
<turbo-frame id="channels_list_frame">
|
||||
<div
|
||||
class="channels_list_half flex flex-col gap-2 {% if selected_community != 0 or selected_channel == 0%}no_members{%- endif -%}"
|
||||
>
|
||||
{% for channel in channels %}
|
||||
<div class="flex flex-row gap-1">
|
||||
<a
|
||||
class="w-full justify-start button {% if selected_channel == channel.id -%}quaternary{% else %}camo{%- endif %}"
|
||||
href="/chats/{{ selected_community }}/{{ channel.id }}"
|
||||
data-turbo="{{ selected_community == '0' }}"
|
||||
>
|
||||
{{ icon "rss" }}
|
||||
<b class="name shortest">{{ channel.title }}</b>
|
||||
</a>
|
||||
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="big_icon {% if selected_channel == channel.id -%}quaternary{% else %}camo{%- endif %}"
|
||||
onclick="trigger('atto::hooks::dropdown', [event])"
|
||||
exclude="dropdown"
|
||||
style="width: 32px"
|
||||
>
|
||||
{{ icon "ellipsis" }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
{% if user.id == channel.owner -%} {% if selected_community
|
||||
== 0 %}
|
||||
<button
|
||||
class="quaternary small"
|
||||
onclick="add_member('{{ channel.id }}')"
|
||||
>
|
||||
{{ icon "user-plus" }}
|
||||
<span>{{ text "chats:action.add_someone" }}</span>
|
||||
</button>
|
||||
{%- endif %}
|
||||
|
||||
<button
|
||||
class="quaternary small"
|
||||
onclick="update_channel_title('{{ channel.id }}')"
|
||||
>
|
||||
{{ icon "pencil" }}
|
||||
<span>{{ text "chats:action.rename" }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onclick="delete_channel('{{ channel.id }}')"
|
||||
class="red"
|
||||
>
|
||||
{{ icon "trash" }}
|
||||
<span>{{ text "general:action.delete" }}</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<button
|
||||
onclick="kick_member('{{ channel.id }}', '{{ user.id }}')"
|
||||
class="red"
|
||||
>
|
||||
{{ icon "door-open" }}
|
||||
<span>{{ text "chats:action.leave" }}</span>
|
||||
</button>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if selected_community == 0 and selected_channel -%}
|
||||
<div class="members_list_half flex flex-col gap-2">
|
||||
{% for member in members %} {{ components::user_plate(user=member,
|
||||
show_kick=user.id == channel.owner) }} {% endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</turbo-frame>
|
||||
60
crates/app/src/public/html/chats/channels.lisp
Normal file
60
crates/app/src/public/html/chats/channels.lisp
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
(text "{%- import \"components.html\" as components -%}")
|
||||
(turbo-frame
|
||||
("id" "channels_list_frame")
|
||||
(div
|
||||
("class" "channels_list_half flex flex-col gap-2 {% if selected_community != 0 or selected_channel == 0%}no_members{%- endif -%}")
|
||||
(text "{% for channel in channels %}")
|
||||
(div
|
||||
("class" "flex flex-row gap-1")
|
||||
(a
|
||||
("class" "w-full justify-start button {% if selected_channel == channel.id -%}quaternary{% else %}camo{%- endif %}")
|
||||
("href" "/chats/{{ selected_community }}/{{ channel.id }}")
|
||||
("data-turbo" "{{ selected_community == '0' }}")
|
||||
(text "{{ icon \"rss\" }}")
|
||||
(b
|
||||
("class" "name shortest")
|
||||
(text "{{ channel.title }}")))
|
||||
(div
|
||||
("class" "dropdown")
|
||||
(button
|
||||
("class" "big_icon {% if selected_channel == channel.id -%}quaternary{% else %}camo{%- endif %}")
|
||||
("onclick" "trigger('atto::hooks::dropdown', [event])")
|
||||
("exclude" "dropdown")
|
||||
("style" "width: 32px")
|
||||
(text "{{ icon \"ellipsis\" }}"))
|
||||
(div
|
||||
("class" "inner")
|
||||
(text "{% if user.id == channel.owner -%} {% if selected_community == 0 %}")
|
||||
(button
|
||||
("class" "quaternary small")
|
||||
("onclick" "add_member('{{ channel.id }}')")
|
||||
(text "{{ icon \"user-plus\" }}")
|
||||
(span
|
||||
(text "{{ text \"chats:action.add_someone\" }}")))
|
||||
(text "{%- endif %}")
|
||||
(button
|
||||
("class" "quaternary small")
|
||||
("onclick" "update_channel_title('{{ channel.id }}')")
|
||||
(text "{{ icon \"pencil\" }}")
|
||||
(span
|
||||
(text "{{ text \"chats:action.rename\" }}")))
|
||||
(button
|
||||
("onclick" "delete_channel('{{ channel.id }}')")
|
||||
("class" "red")
|
||||
(text "{{ icon \"trash\" }}")
|
||||
(span
|
||||
(text "{{ text \"general:action.delete\" }}")))
|
||||
(text "{% else %}")
|
||||
(button
|
||||
("onclick" "kick_member('{{ channel.id }}', '{{ user.id }}')")
|
||||
("class" "red")
|
||||
(text "{{ icon \"door-open\" }}")
|
||||
(span
|
||||
(text "{{ text \"chats:action.leave\" }}")))
|
||||
(text "{%- endif %}"))))
|
||||
(text "{% endfor %}"))
|
||||
(text "{% if selected_community == 0 and selected_channel -%}")
|
||||
(div
|
||||
("class" "members_list_half flex flex-col gap-2")
|
||||
(text "{% for member in members %} {{ components::user_plate(user=member, show_kick=user.id == channel.owner) }} {% endfor %}"))
|
||||
(text "{%- endif %}"))
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
{%- import "components.html" as components -%} {{ components::message(user=user,
|
||||
message=message, grouped=grouped) }}
|
||||
1
crates/app/src/public/html/chats/message.lisp
Normal file
1
crates/app/src/public/html/chats/message.lisp
Normal file
|
|
@ -0,0 +1 @@
|
|||
(text "{%- import \"components.html\" as components -%} {{ components::message(user=user, message=message, grouped=grouped) }}")
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
{%- import "components.html" as components -%}
|
||||
<turbo-frame id="stream_body_frame">
|
||||
<!-- prettier-ignore -->
|
||||
<div class="gap-2" id="stream_body">
|
||||
{% if page != 0 -%}
|
||||
<div class="card flex gap-2 small tertiary flex-wrap">
|
||||
<b>{{ text "chats:label.viewing_old_messages" }}</b>
|
||||
<a href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1}}" class="button small" onclick="window.CURRENT_PAGE -= 1">
|
||||
{{ text "chats:label.go_back" }}
|
||||
</a>
|
||||
</div>
|
||||
{%- endif %}
|
||||
|
||||
{% if message -%}
|
||||
<div class="card flex gap-2 small tertiary flex-wrap">
|
||||
<b>{{ text "chats:label.viewing_single_message" }}</b>
|
||||
<a href="/chats/{{ community }}/{{ channel }}?page={{ page }}" class="button small" onclick="window.VIEWING_SINGLE = false" target="_top">
|
||||
{{ text "chats:label.go_back" }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{ components::message(user=message_owner, message=message, grouped=false) }}
|
||||
{% else %}
|
||||
{% for message in messages %}
|
||||
{{ components::message(user=message[1], message=message[0], grouped=message[2]) }}
|
||||
{% endfor %}
|
||||
{%- endif %}
|
||||
|
||||
{% if messages|length > 0 -%}
|
||||
<div class="flex gap-2 w-full justify-center">
|
||||
<a class="button" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page + 1 }}" onclick="window.CURRENT_PAGE += 1">
|
||||
{{ icon "clock" }}
|
||||
<span>{{ text "chats:label.view_older" }}</span>
|
||||
</a>
|
||||
|
||||
{% if page != 0 -%}
|
||||
<a class="button quaternary" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1 }}" onclick="window.CURRENT_PAGE -= 1">
|
||||
{{ icon "rewind" }}
|
||||
<span>{{ text "chats:label.view_more_recent" }}</span>
|
||||
</a>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#stream_body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column-reverse;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</turbo-frame>
|
||||
55
crates/app/src/public/html/chats/stream.lisp
Normal file
55
crates/app/src/public/html/chats/stream.lisp
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
(text "{%- import \"components.html\" as components -%}")
|
||||
(turbo-frame
|
||||
("id" "stream_body_frame")
|
||||
(div
|
||||
("class" "gap-2")
|
||||
("id" "stream_body")
|
||||
(text "{% if page != 0 -%}")
|
||||
(div
|
||||
("class" "card flex gap-2 small tertiary flex-wrap")
|
||||
(b
|
||||
(text "{{ text \"chats:label.viewing_old_messages\" }}"))
|
||||
(a
|
||||
("href" "/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1}}")
|
||||
("class" "button small")
|
||||
("onclick" "window.CURRENT_PAGE -= 1")
|
||||
(text "{{ text \"chats:label.go_back\" }}")))
|
||||
(text "{%- endif %} {% if message -%}")
|
||||
(div
|
||||
("class" "card flex gap-2 small tertiary flex-wrap")
|
||||
(b
|
||||
(text "{{ text \"chats:label.viewing_single_message\" }}"))
|
||||
(a
|
||||
("href" "/chats/{{ community }}/{{ channel }}?page={{ page }}")
|
||||
("class" "button small")
|
||||
("onclick" "window.VIEWING_SINGLE = false")
|
||||
("target" "_top")
|
||||
(text "{{ text \"chats:label.go_back\" }}")))
|
||||
(text "{{ components::message(user=message_owner, message=message, grouped=false) }} {% else %} {% for message in messages %} {{ components::message(user=message[1], message=message[0], grouped=message[2]) }} {% endfor %} {%- endif %} {% if messages|length > 0 -%}")
|
||||
(div
|
||||
("class" "flex gap-2 w-full justify-center")
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/chats/{{ community }}/{{ channel }}/_stream?page={{ page + 1 }}")
|
||||
("onclick" "window.CURRENT_PAGE += 1")
|
||||
(text "{{ icon \"clock\" }}")
|
||||
(span
|
||||
(text "{{ text \"chats:label.view_older\" }}")))
|
||||
(text "{% if page != 0 -%}")
|
||||
(a
|
||||
("class" "button quaternary")
|
||||
("href" "/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1 }}")
|
||||
("onclick" "window.CURRENT_PAGE -= 1")
|
||||
(text "{{ icon \"rewind\" }}")
|
||||
(span
|
||||
(text "{{ text \"chats:label.view_more_recent\" }}")))
|
||||
(text "{%- endif %}"))
|
||||
(text "{%- endif %}"))
|
||||
(style
|
||||
(text "#stream_body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column-reverse;
|
||||
overflow: auto;
|
||||
}")))
|
||||
Loading…
Add table
Add a link
Reference in a new issue