add: better mobile chats state
add: move channels list to turbo-frame fix: don't spam _render (socket)
This commit is contained in:
trisua
parent
0dbf660399
commit
c549fdd274
5 changed files with 265 additions and 170 deletions
|
|
@ -90,58 +90,13 @@
|
|||
{{ icon "plus" }}
|
||||
<span>{{ text "communities:action.create_channel" }}</span>
|
||||
</a>
|
||||
{% endif %} {% for channel in channels %} {% if selected_community == 0
|
||||
%}
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
<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 %}
|
||||
<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>
|
||||
{% else %}
|
||||
<a
|
||||
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
|
||||
href="/chats/{{ selected_community }}/{{ channel.id }}"
|
||||
>
|
||||
{{ icon "rss" }}
|
||||
<b class="name shortest">{{ channel.title }}</b>
|
||||
</a>
|
||||
{% endif %} {% endfor %}
|
||||
<turbo-frame
|
||||
id="channels_list_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
|
||||
target="_top"
|
||||
></turbo-frame>
|
||||
</div>
|
||||
|
||||
{% if channel %}
|
||||
|
|
@ -149,6 +104,7 @@
|
|||
<turbo-frame
|
||||
id="stream_body_frame"
|
||||
src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}"
|
||||
target="_top"
|
||||
></turbo-frame>
|
||||
|
||||
<form
|
||||
|
|
@ -368,6 +324,11 @@
|
|||
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")
|
||||
|
|
@ -376,8 +337,22 @@
|
|||
window.SIDEBARS_OPEN = true;
|
||||
}
|
||||
|
||||
for (const anchor of document.querySelectorAll("[data-turbo=false]")) {
|
||||
anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
|
|
@ -452,16 +427,16 @@
|
|||
console.log("closed lingering");
|
||||
}
|
||||
|
||||
if ("{{ selected_community }}" !== "0") {
|
||||
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ 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 = "{{ selected_community }}";
|
||||
window.socket_id = window.CHAT_PROPS.selected_community;
|
||||
} else {
|
||||
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ 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 = "{{ selected_channel }}";
|
||||
window.socket_id = window.CHAT_PROPS.selected_channel;
|
||||
}
|
||||
|
||||
window.socket.addEventListener("open", () => {
|
||||
|
|
@ -477,6 +452,117 @@
|
|||
}),
|
||||
);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
window.socket.addEventListener("message", async (event) => {
|
||||
if (event.data === "Ping") {
|
||||
return socket.send("Pong");
|
||||
}
|
||||
|
||||
const msg = JSON.parse(event.data);
|
||||
const [channel_id, data] = JSON.parse(msg.data);
|
||||
|
||||
if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
|
||||
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";
|
||||
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,
|
||||
}),
|
||||
},
|
||||
)
|
||||
).text();
|
||||
|
||||
document
|
||||
.getElementById("stream_body")
|
||||
.prepend(element);
|
||||
clean_text();
|
||||
} else {
|
||||
console.log("abandoned remote");
|
||||
socket.close();
|
||||
}
|
||||
} else if (msg.method === "Delete") {
|
||||
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,
|
||||
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");
|
||||
};
|
||||
|
||||
document.addEventListener(
|
||||
"turbo:before-frame-render",
|
||||
(event) => {
|
||||
setTimeout(clean_text, 50);
|
||||
},
|
||||
);
|
||||
|
||||
setTimeout(clean_text, 150);
|
||||
}, 250);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -497,108 +583,6 @@
|
|||
}
|
||||
}
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
window.socket.addEventListener("message", async (event) => {
|
||||
if (event.data === "Ping") {
|
||||
return socket.send("Pong");
|
||||
}
|
||||
|
||||
const msg = JSON.parse(event.data);
|
||||
const [channel_id, data] = JSON.parse(msg.data);
|
||||
|
||||
if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
|
||||
if (channel_id !== "{{ 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";
|
||||
element.innerHTML = await (
|
||||
await fetch(
|
||||
"/chats/{{ selected_community }}/{{ selected_channel }}/_render",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ data: msg.data }),
|
||||
},
|
||||
)
|
||||
).text();
|
||||
|
||||
document.getElementById("stream_body").prepend(element);
|
||||
clean_text();
|
||||
} else {
|
||||
console.log("abandoned remote");
|
||||
socket.close();
|
||||
}
|
||||
} else if (msg.method === "Delete") {
|
||||
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,
|
||||
channel: "{{ 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");
|
||||
};
|
||||
|
||||
document.addEventListener("turbo:before-frame-render", (event) => {
|
||||
setTimeout(clean_text, 50);
|
||||
});
|
||||
|
||||
setTimeout(clean_text, 150);
|
||||
}, 250);
|
||||
</script>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
53
crates/app/src/public/html/chats/channels.html
Normal file
53
crates/app/src/public/html/chats/channels.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<turbo-frame id="channels_list_frame">
|
||||
{% for channel in channels %} {% if selected_community == 0 %}
|
||||
<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 %}
|
||||
<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>
|
||||
{% else %}
|
||||
<a
|
||||
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
|
||||
href="/chats/{{ selected_community }}/{{ channel.id }}"
|
||||
>
|
||||
{{ icon "rss" }}
|
||||
<b class="name shortest">{{ channel.title }}</b>
|
||||
</a>
|
||||
{% endif %} {% endfor %}
|
||||
</turbo-frame>
|
||||
Loading…
Add table
Add a link
Reference in a new issue