refactor: rework the frontend to move topics to the top
This commit is contained in:
parent
fac8f409f4
commit
11ecd86bb9
14 changed files with 362 additions and 292 deletions
|
|
@ -4,7 +4,7 @@
|
|||
name="top-level-tabs"
|
||||
id="calendar-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/calendar"
|
||||
data-view="calendar"
|
||||
/>
|
||||
<label for="calendar-tab-input" class="tab-label"
|
||||
><div class="icon calendar"></div>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,7 @@
|
|||
#chat .tab-content {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
margin: 1rem 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.topic-list > li.topic a:before {
|
||||
position: absolute;
|
||||
left: -1.75rem;
|
||||
top: 0;
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
content: "#";
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.topic-list > li.topic a {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
margin-left: 1.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topic-list > li.topic.active a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#chat .sidebar {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
min-width: 10rem;
|
||||
max-width: 32rem;
|
||||
overflow-x: scroll;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#chat .sidebar #sidebar-toggle,
|
||||
#chat .sidebar #sidebar-toggle-icon {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat .sidebar .title {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
#chat #topic-chat-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#chat #topic-chat-content {
|
||||
|
|
@ -333,46 +277,7 @@
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#chat .sidebar {
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: -100%;
|
||||
overflow-y: scroll;
|
||||
overflow: visible;
|
||||
transition: all ease-in-out 0.33s;
|
||||
}
|
||||
|
||||
#chat .sidebar #sidebar-toggle-icon {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: -2.5rem;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.33s;
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#chat .sidebar .icon {
|
||||
transition: all ease-in-out 0.33s;
|
||||
}
|
||||
|
||||
#chat .sidebar:has(#sidebar-toggle:checked) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
|
||||
right: 0;
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#chat #topic-chat-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
name="top-level-tabs"
|
||||
id="chat-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/chat"
|
||||
data-view="chat"
|
||||
/>
|
||||
<label for="chat-tab-input" class="tab-label"
|
||||
><div class="icon chat"></div>
|
||||
|
|
@ -17,74 +17,6 @@
|
|||
<script src="/js/external/mimetypes.js" type="text/javascript"></script>
|
||||
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
||||
<script src="/tabs/chat/chat.js" type="text/javascript"></script>
|
||||
<div class="sidebar resizable">
|
||||
<input type="checkbox" id="sidebar-toggle" />
|
||||
<label id="sidebar-toggle-icon" for="sidebar-toggle">
|
||||
<div class="icon right"></div>
|
||||
</label>
|
||||
<div id="topic-creation-container" data-requires-permission="topics.create">
|
||||
<button
|
||||
id="toggle-topic-creation-form-button"
|
||||
onclick="((event) => {
|
||||
event.preventDefault();
|
||||
const topic_create_form = document.getElementById( 'topic-create' );
|
||||
topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
|
||||
})(event)"
|
||||
>
|
||||
<div class="icon plus"></div>
|
||||
</button>
|
||||
<form
|
||||
id="topic-create"
|
||||
data-smart="true"
|
||||
action="/api/topics"
|
||||
method="POST"
|
||||
style="
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
>
|
||||
<input
|
||||
id="new-topic-name-input"
|
||||
type="text"
|
||||
name="name"
|
||||
value=""
|
||||
placeholder="new topic"
|
||||
/>
|
||||
<!-- <button class="primary" type="submit">
|
||||
<div class="icon plus"></div>
|
||||
</button> -->
|
||||
<input type="submit" hidden />
|
||||
<script>
|
||||
{
|
||||
const form = document.currentScript.closest("form");
|
||||
const topic_create_form = document.getElementById("topic-create");
|
||||
const new_topic_name_input =
|
||||
document.getElementById("new-topic-name-input");
|
||||
|
||||
form.on_reply = (new_topic) => {
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
|
||||
);
|
||||
|
||||
new_topic_name_input.value = "";
|
||||
window.location.hash = `/chat/topic/${new_topic.id}`;
|
||||
topic_create_form.style["height"] = "0";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">chat topics</span>
|
||||
</div>
|
||||
<ul id="topic-list" class="topic-list"></ul>
|
||||
</div>
|
||||
<div id="topic-chat-container">
|
||||
<div id="topic-chat-content"></div>
|
||||
<div id="topic-chat-entry-container">
|
||||
|
|
|
|||
|
|
@ -311,23 +311,6 @@ function render_text_event(topic_chat_content, event, creator, existing_element)
|
|||
}
|
||||
}
|
||||
|
||||
async function get_new_topic_element() {
|
||||
const existing_new_topic_element = document.getElementById("new-topic");
|
||||
if (existing_new_topic_element) {
|
||||
return existing_new_topic_element;
|
||||
}
|
||||
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="new-topic" class="topic"><a href="" contenteditable="true">new topic</a></li>`,
|
||||
);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||
|
||||
const new_topic_element = document.getElementById("new-topic");
|
||||
return new_topic_element;
|
||||
}
|
||||
|
||||
const users = {};
|
||||
async function append_topic_events(events) {
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
|
|
@ -393,6 +376,8 @@ async function poll_for_new_events() {
|
|||
}
|
||||
|
||||
async function load_topic(topic_id) {
|
||||
if (!topic_id) return;
|
||||
|
||||
const topic_chat_content = document.getElementById("topic-chat-content");
|
||||
|
||||
if (topic_polling_request_abort_controller) {
|
||||
|
|
@ -435,66 +420,6 @@ async function load_topic(topic_id) {
|
|||
await append_topic_events(events);
|
||||
poll_for_new_events(topic_id);
|
||||
}
|
||||
|
||||
let last_topic_update = undefined;
|
||||
async function update_chat_topics() {
|
||||
const now = new Date();
|
||||
const time_since_last_update = now - (last_topic_update ?? 0);
|
||||
if (time_since_last_update < 5_000) {
|
||||
return;
|
||||
}
|
||||
|
||||
const topics_response = await api.fetch("/api/topics");
|
||||
if (topics_response.ok) {
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.innerHTML = "";
|
||||
const topics = await topics_response.json();
|
||||
for (const topic of topics) {
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="topic-selector-${topic.id}" class="topic"><a href="#/chat/topic/${topic.id}">${topic.name}</a></li>`,
|
||||
);
|
||||
}
|
||||
|
||||
last_topic_update = now;
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", update_chat_topics);
|
||||
|
||||
function check_for_topic_in_url() {
|
||||
const user_json = document.body.dataset.user;
|
||||
if (!user_json) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = window.location.hash;
|
||||
const chat_in_url = hash.indexOf("#/chat") === 0;
|
||||
if (!chat_in_url) {
|
||||
return;
|
||||
}
|
||||
|
||||
const first_topic_id = document.querySelector("li.topic")?.id.substring(14);
|
||||
|
||||
// #/chat/topic/{topic_id}
|
||||
// ^ 12
|
||||
const topic_id = hash.substring(12) || first_topic_id;
|
||||
|
||||
if (!topic_id) {
|
||||
setTimeout(check_for_topic_in_url, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const topic_chat_container = document.getElementById("topic-chat-container");
|
||||
|
||||
if (topic_chat_container.dataset.topic_id !== topic_id) {
|
||||
window.location.hash = `/chat/topic/${topic_id}`;
|
||||
topic_chat_container.dataset.topic_id = topic_id;
|
||||
load_topic(topic_id);
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", check_for_topic_in_url);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await update_chat_topics();
|
||||
check_for_topic_in_url();
|
||||
document.addEventListener("topic_changed", ({ detail: { topic } }) => {
|
||||
load_topic(topic);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
name="top-level-tabs"
|
||||
id="exchange-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/exchange"
|
||||
data-view="exchange"
|
||||
/>
|
||||
<label for="exchange-tab-input" class="tab-label"
|
||||
><div class="icon exchange"></div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
id="home-tab-input"
|
||||
checked="checked"
|
||||
class="tab-switch"
|
||||
data-hash="/"
|
||||
data-view="home"
|
||||
/>
|
||||
<label for="home-tab-input" class="tab-label">
|
||||
<div class="icon home"></div>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
name="top-level-tabs"
|
||||
id="user-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/profile"
|
||||
data-view="profile"
|
||||
/>
|
||||
<label for="user-tab-input" class="tab-label"
|
||||
><div class="icon user"></div>
|
||||
|
|
@ -163,6 +163,10 @@
|
|||
<span class="username" data-bind__user_username></span>
|
||||
</div>
|
||||
|
||||
<div class="notifications-settings-container">
|
||||
<button onclick="NOTIFICATIONS.request_permission()">Enable Notifications</button>
|
||||
</div>
|
||||
|
||||
<form data-smart="true" data-method="DELETE" action="/api/auth">
|
||||
<script>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
name="top-level-tabs"
|
||||
id="resources-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/resources"
|
||||
data-view="resources"
|
||||
/>
|
||||
<label for="resources-tab-input" class="tab-label"
|
||||
><div class="icon resources"></div>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,23 @@
|
|||
<script>
|
||||
function on_location_change() {
|
||||
const hash = window.location.hash?.slice(1);
|
||||
console.dir({ hash });
|
||||
if (hash) {
|
||||
const target_tab_url = hash.slice(0, hash.slice(1).indexOf("/") + 1);
|
||||
const target_tab = document.querySelector(`[data-hash="${target_tab_url}"]`);
|
||||
document.addEventListener("view_changed", ({ detail: { view } }) => {
|
||||
const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);
|
||||
|
||||
console.dir({
|
||||
target_tab_url,
|
||||
target_tab,
|
||||
});
|
||||
|
||||
if (target_tab) {
|
||||
target_tab.click();
|
||||
}
|
||||
if (target_tab) {
|
||||
target_tab.click();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("locationchange", on_location_change);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tab_switchers = document.querySelectorAll(".tab-switch");
|
||||
for (const tab_switch of tab_switchers) {
|
||||
tab_switch.addEventListener("input", (event) => {
|
||||
const tab_selector = event.target;
|
||||
const hash = tab_selector.dataset.hash;
|
||||
if (hash) {
|
||||
window.location.hash = hash;
|
||||
const view = tab_selector.dataset.view;
|
||||
if (view) {
|
||||
window.location.hash = `/topic/${document.body.dataset.topic}/${view}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
on_location_change();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
name="top-level-tabs"
|
||||
id="work-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/work"
|
||||
data-view="work"
|
||||
/>
|
||||
<label for="work-tab-input" class="tab-label"
|
||||
><div class="icon work"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue