From b2c922daf5e8cd1130f41e19920d7fe40d13cd81 Mon Sep 17 00:00:00 2001 From: octo Date: Tue, 11 Jul 2023 16:11:57 +0300 Subject: [PATCH] implement subreddit list refresh (fix #36) --- css/userSidebar.css | 24 ++++++++++++ js/sidebar/userSidebar.js | 80 +++++++++++++++++++++++++++++---------- 2 files changed, 84 insertions(+), 20 deletions(-) diff --git a/css/userSidebar.css b/css/userSidebar.css index f62d2ff..6ec1b94 100644 --- a/css/userSidebar.css +++ b/css/userSidebar.css @@ -101,6 +101,7 @@ } .sidebar-headline { padding-left: 28px; + padding-right: 28px; margin-top: 16px; margin-bottom: 16px; font-family: var(--md-sys-typescale-title-small-font-family-name); @@ -108,8 +109,31 @@ font-size: var(--md-sys-typescale-title-small-font-size); font-weight: var(--md-sys-typescale-title-small-font-weight); color: var(--md-sys-color-on-surface-variant); + height: 24px; + align-items: center; + display: flex; + justify-content: space-between; +} +.sidebar-headline button { + border: 0; + background: none; + color: var(--md-sys-color-primary); + width: 24px; + height: 24px; + padding: 0; } #user-sidebar img { border-radius: 100%; margin-left: -8px; } +.spin { + animation: spin 0.5s forwards infinite; +} +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/js/sidebar/userSidebar.js b/js/sidebar/userSidebar.js index ba042c7..e4f7ddc 100644 --- a/js/sidebar/userSidebar.js +++ b/js/sidebar/userSidebar.js @@ -3,8 +3,11 @@ import localforage from "localforage"; import querySelectorAsync from "../utility/querySelectorAsync"; import buildSidebar from "./buildSidebar"; -function createSidebarItem(text, link, icon, isActive) { +function createSidebarItem(text, link, icon, isActive, cls) { const item = document.createElement("a"); + if (cls !== undefined) { + item.classList.add(cls); + } item.href = link; item.innerHTML = `forum test`; @@ -30,10 +33,15 @@ function createSidebarItem(text, link, icon, isActive) { return item; } -function createSidebarSubheading(text) { +function createSidebarSubheading(text, button) { const item = document.createElement("p"); - item.innerText = text; + const textel = document.createElement("span"); + textel.innerText = text; + item.appendChild(textel); item.classList.add("sidebar-headline"); + if (button !== undefined) { + item.appendChild(button); + } return item; } @@ -58,11 +66,24 @@ async function setupMultireddits(container) { } } -async function setupSubreddits(container) { +async function setupSubreddits(parent_container) { const age = parseInt(await localforage.getItem("subredditcache_age")); const now = Math.floor(Date.now() / 1000); const cached = JSON.parse(await localforage.getItem("subredditcache_act")); let subs = []; + const container = document.createElement("span"); + container.id = "oldlander-subredditlist"; + const refreshButton = document.createElement("button"); + refreshButton.classList.add("material-symbols-outlined"); + refreshButton.innerText = "refresh"; + const refreshHandler = () => { + refreshButton.removeEventListener("click", refreshHandler); + console.log("refresh"); + refreshButton.classList.add("spin"); + setupSubreddits(parent_container); + }; + refreshButton.addEventListener("click", refreshHandler); + if (age + 60 * 60 < now || isNaN(age) || cached === null) { console.log("Updating subreddit cache"); let after = ""; @@ -97,12 +118,24 @@ async function setupSubreddits(container) { console.log("Subreddit cache is up to date, created at", age, subs); } container.appendChild(document.createElement("hr")); - container.appendChild(createSidebarSubheading("Subreddits")); + container.appendChild(createSidebarSubheading("Subreddits", refreshButton)); container.appendChild( - createSidebarItem("Random", "/r/random", "shuffle", false) + createSidebarItem( + "Random", + "/r/random", + "shuffle", + false, + "oldlander-subreddit" + ) ); container.appendChild( - createSidebarItem("Random NSFW", "/r/randnsfw", "18_up_rating", false) + createSidebarItem( + "Random NSFW", + "/r/randnsfw", + "18_up_rating", + false, + "oldlander-subreddit" + ) ); for (const subreddit of subs) { container.appendChild( @@ -110,17 +143,31 @@ async function setupSubreddits(container) { subreddit.data.display_name, subreddit.data.url, subreddit.data.icon_img, - location.pathname === subreddit.url + location.pathname === subreddit.url, + "oldlander-subreddit" ) ); } + document + .querySelectorAll("#oldlander-subredditlist") + .forEach((el) => el.remove()); + parent_container.appendChild(container); } async function buildHeaderItems(container) { const rheader = await querySelectorAsync("#header-bottom-right"); container.appendChild(document.createElement("hr")); - + if (document.body.classList.contains("res")) { + container.appendChild( + createSidebarItem( + "RES settings console", + location.href + "#res:settings", + "settings_applications", + false + ) + ); + } const userlink = rheader.querySelector(".user a"); if (userlink.innerText.includes("Log in")) { const loginitem = createSidebarItem( @@ -145,7 +192,9 @@ async function buildHeaderItems(container) { ) ); const mail = rheader.querySelector("#mail"); - let mailicon = mail.classList.contains("nohavemail") ? "mail" : "mark_email_unread"; + let mailicon = mail.classList.contains("nohavemail") + ? "mail" + : "mark_email_unread"; container.appendChild( createSidebarItem( "Messages", @@ -163,16 +212,7 @@ async function buildHeaderItems(container) { location.href === prefslink ) ); - if (document.body.classList.contains("res")) { - container.appendChild( - createSidebarItem( - "RES settings console", - location.href + "#res:settings", - "settings_applications", - location.href === prefslink - ) - ); - } + const logoutItem = createSidebarItem( "Log out", "javascript:void(0)",