From 3d8cbf3e72a73b50a35959973973fe57395d442a Mon Sep 17 00:00:00 2001 From: wearrrrr Date: Thu, 22 Feb 2024 20:03:15 -0600 Subject: [PATCH] WAY better system for iframe / topbar handling, and topbar url changes when the iframe url does. --- index.js | 11 +- public/games | 2 +- src/components/ProxyRegistrar.astro | 112 ++++-- src/components/SettingsTablist.astro | 538 ++++++++++++++------------- src/layouts/Layout.astro | 22 +- src/pages/[lang]/index.astro | 11 +- 6 files changed, 370 insertions(+), 326 deletions(-) diff --git a/index.js b/index.js index 89b0987..c9f7e06 100644 --- a/index.js +++ b/index.js @@ -30,15 +30,14 @@ const rammerheadScopes = [ "/editsession", "/needpassword", "/syncLocalStorage", - "/api/shuffleDict" + "/api/shuffleDict", ]; const rammerheadSession = /^\/[a-z0-9]{32}/; const bare = createBareServer("/bare/"); console.log(chalk.gray("Starting Bare...")); const app = express(); -app.use(compression({ threshold: 0, filter: () => true }) -); +app.use(compression({ threshold: 0, filter: () => true })); app.use(express.static(path.join(process.cwd(), "static"))); app.use(express.static(path.join(process.cwd(), "build"))); app.use("/uv/", express.static(uvPath)); @@ -89,10 +88,7 @@ server.on("upgrade", (req, socket, head) => { function shouldRouteRh(req) { const url = new URL(req.url, "http://0.0.0.0"); - return ( - rammerheadScopes.includes(url.pathname) || - rammerheadSession.test(url.pathname) - ); + return rammerheadScopes.includes(url.pathname) || rammerheadSession.test(url.pathname); } function routeRhRequest(req, res) { @@ -103,7 +99,6 @@ function routeRhUpgrade(req, socket, head) { rh.emit("upgrade", req, socket, head); } - console.log(chalk.gray("Starting Alu...")); console.log(chalk.green("Alu started successfully!")); server.on("listening", () => { diff --git a/public/games b/public/games index 2e6cd67..11287d0 160000 --- a/public/games +++ b/public/games @@ -1 +1 @@ -Subproject commit 2e6cd673ab519025af951713868860b7895b11b8 +Subproject commit 11287d0a834c672a55d10164dbfefe9ee1922d3d diff --git a/src/components/ProxyRegistrar.astro b/src/components/ProxyRegistrar.astro index b25ea89..0f45ae8 100644 --- a/src/components/ProxyRegistrar.astro +++ b/src/components/ProxyRegistrar.astro @@ -1,6 +1,6 @@ - diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro index b02278f..fe72117 100644 --- a/src/components/SettingsTablist.astro +++ b/src/components/SettingsTablist.astro @@ -54,174 +54,214 @@ const t = useTranslations(lang); // Cleanup event, this should remove all added event listeners to prepare for if the page is visited again. window.currentlySelectedTab = ""; document.removeEventListener("setting-tabChange", determineListener); - }); Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => { - let contentToLoad = document.getElementById("content-" + tab.id); - if (contentToLoad) { - window.loadedContentStorage[tab.id] = contentToLoad.innerHTML; - contentToLoad.remove(); - } + let contentToLoad = document.getElementById("content-" + tab.id); + if (contentToLoad) { + window.loadedContentStorage[tab.id] = contentToLoad.innerHTML; + contentToLoad.remove(); + } - tab.addEventListener("click", (event) => { - loadContent(event.target.id); - }); - }); - - function loadContent(tabID) { - if (window.currentlySelectedTab == tabID) return; - else window.currentlySelectedTab = tabID; - let currentContent = document.getElementById("current-content"); - if (currentContent) { - currentContent.style.opacity = "0"; - setTimeout(() => { - currentContent.innerHTML = window.loadedContentStorage[tabID]; - currentContent.style.opacity = "1"; - document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID })); - document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID })); - }, 250); - } - } - - function addDropdownListener() { - let dropdown_toggles = document.getElementsByClassName("dropdown-toggle"); - Array.from(dropdown_toggles).forEach((toggle) => { - toggle.onclick = function() { - closeOtherDropdowns(toggle.id); - toggleDropdown(toggle); - }; - }); - } - - function toggleDropdown(toggle) { - let dropdown = document.getElementById(toggle.id + "-menu"); - if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") { - dropdown.style.maxHeight = dropdown.scrollHeight + "px"; - toggle.style.borderRadius = "10px 10px 0 0"; - } else { - dropdown.style.maxHeight = "0px"; - setTimeout(() => { - toggle.style.borderRadius = "10px"; - }, 300); - } - } - - - function determineListener(event) { - if (event.detail == "setting-tab-proxy") { - addDropdownListener(); - } else if (event.detail == "setting-tab-customization") { - addDropdownListener(); - } - } - - function closeOtherDropdowns(dropdownIDToExclude) { - let dropdowns = document.getElementsByClassName("dropdown-menu"); - Array.from(dropdowns).forEach((dropdown) => { - dropdown.style.maxHeight = "0px"; - setTimeout(() => { - if (dropdown.id != dropdownIDToExclude + "-menu") { - let dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", "")); - dropdown_toggle.style.borderRadius = "10px"; - } - }, 300); - }); - } - - function closeDropdown(dropdownID) { - let dropdown = document.getElementById(dropdownID); - if (dropdown) { - dropdown.style.maxHeight = "0px"; - setTimeout(() => { - let dropdown_toggle = document.getElementById(dropdownID.replace("-menu", "")); - dropdown_toggle.style.borderRadius = "10px"; - }, 300); - } - } - - function getLocalStorageValue(localStorageItem, dropdownID) { - // I was kinda dumb for not doing this earlier. - let dropdown = document.getElementById(dropdownID); - let dropdownMenu = document.getElementById(dropdownID + "-menu"); - - if (dropdown && dropdownMenu) { - // Now we find the child that matches localStorageItem.value. - let dropdownItem = Array.from(dropdownMenu.children).find((item) => { - return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting; + tab.addEventListener("click", (event) => { + loadContent(event.target.id); }); - // Now set the inner text to the name in the dropdownItem. - return dropdownItem.innerText; - } - } + }); - function applySavedLocalStorage(localStorageItem, dropdownID) { - if (localStorage.getItem(localStorageItem)) { - let dropdown_toggle = document.getElementById(dropdownID); - if (dropdown_toggle) { - dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID); + function loadContent(tabID) { + if (window.currentlySelectedTab == tabID) return; + else window.currentlySelectedTab = tabID; + let currentContent = document.getElementById("current-content"); + if (currentContent) { + currentContent.style.opacity = "0"; + setTimeout(() => { + currentContent.innerHTML = window.loadedContentStorage[tabID]; + currentContent.style.opacity = "1"; + document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID })); + document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID })); + }, 250); } } - } - function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) { - Array.from(item.children).forEach((item) => { - item.onclick = () => { - let localStorageItemContent = { - name: item.innerText, - value: item.dataset.setting, + function addDropdownListener() { + let dropdown_toggles = document.getElementsByClassName("dropdown-toggle"); + Array.from(dropdown_toggles).forEach((toggle) => { + toggle.onclick = function () { + closeOtherDropdowns(toggle.id); + toggleDropdown(toggle); }; - localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent)); - applySavedLocalStorage(localStorageItem, dropdownID); - closeDropdown(item.parentElement.id); - if (typeof optionalCallback == "function") { - optionalCallback(); + }); + } + + function toggleDropdown(toggle) { + let dropdown = document.getElementById(toggle.id + "-menu"); + if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") { + dropdown.style.maxHeight = dropdown.scrollHeight + "px"; + toggle.style.borderRadius = "10px 10px 0 0"; + } else { + dropdown.style.maxHeight = "0px"; + setTimeout(() => { + toggle.style.borderRadius = "10px"; + }, 300); + } + } + + function determineListener(event) { + if (event.detail == "setting-tab-proxy") { + addDropdownListener(); + } else if (event.detail == "setting-tab-customization") { + addDropdownListener(); + } + } + + function closeOtherDropdowns(dropdownIDToExclude) { + let dropdowns = document.getElementsByClassName("dropdown-menu"); + Array.from(dropdowns).forEach((dropdown) => { + dropdown.style.maxHeight = "0px"; + setTimeout(() => { + if (dropdown.id != dropdownIDToExclude + "-menu") { + let dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", "")); + dropdown_toggle.style.borderRadius = "10px"; + } + }, 300); + }); + } + + function closeDropdown(dropdownID) { + let dropdown = document.getElementById(dropdownID); + if (dropdown) { + dropdown.style.maxHeight = "0px"; + setTimeout(() => { + let dropdown_toggle = document.getElementById(dropdownID.replace("-menu", "")); + dropdown_toggle.style.borderRadius = "10px"; + }, 300); + } + } + + function getLocalStorageValue(localStorageItem, dropdownID) { + // I was kinda dumb for not doing this earlier. + let dropdown = document.getElementById(dropdownID); + let dropdownMenu = document.getElementById(dropdownID + "-menu"); + + if (dropdown && dropdownMenu) { + // Now we find the child that matches localStorageItem.value. + let dropdownItem = Array.from(dropdownMenu.children).find((item) => { + return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting; + }); + // Now set the inner text to the name in the dropdownItem. + return dropdownItem.innerText; + } + } + + function applySavedLocalStorage(localStorageItem, dropdownID) { + if (localStorage.getItem(localStorageItem)) { + let dropdown_toggle = document.getElementById(dropdownID); + if (dropdown_toggle) { + dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID); } - }; - }); - } + } + } - function applyInputListeners(item, localStorageItem) { - item.addEventListener("input", () => { - localStorage.setItem(localStorageItem, item.value); - }); - } + function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) { + Array.from(item.children).forEach((item) => { + item.onclick = () => { + let localStorageItemContent = { + name: item.innerText, + value: item.dataset.setting, + }; + localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent)); + applySavedLocalStorage(localStorageItem, dropdownID); + closeDropdown(item.parentElement.id); + if (typeof optionalCallback == "function") { + optionalCallback(); + } + }; + }); + } - document.addEventListener("setting-tabChange", determineListener); + function applyInputListeners(item, localStorageItem) { + item.addEventListener("input", () => { + localStorage.setItem(localStorageItem, item.value); + }); + } - loadContent("setting-tab-proxy"); + document.addEventListener("setting-tabChange", determineListener); - function setupCustomizationSettings() { - applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme"); - applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language"); - let themeDropdown = document.getElementById("dropdown__selected-theme-menu"); - let languageDropdown = document.getElementById("dropdown__selected-language-menu"); - applyDropdownEventListeners( - themeDropdown, - "dropdown__selected-theme", - "alu__selectedTheme", - changeTheme - ); - applyDropdownEventListeners( - languageDropdown, - "dropdown__selected-language", - "alu__selectedLanguage", - navigateToNewLangaugePage - ); - } + loadContent("setting-tab-proxy"); - function setupCloakingSettings() { - Array.from(document.getElementById("cloak-list").children).forEach((cloak) => { - cloak.addEventListener("click", () => { - let cloakName = cloak.dataset.cloakName; - let cloakIcon = cloak.dataset.cloakIcon; + function setupCustomizationSettings() { + applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme"); + applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language"); + let themeDropdown = document.getElementById("dropdown__selected-theme-menu"); + let languageDropdown = document.getElementById("dropdown__selected-language-menu"); + applyDropdownEventListeners( + themeDropdown, + "dropdown__selected-theme", + "alu__selectedTheme", + changeTheme + ); + applyDropdownEventListeners( + languageDropdown, + "dropdown__selected-language", + "alu__selectedLanguage", + navigateToNewLangaugePage + ); + } + function setupCloakingSettings() { + Array.from(document.getElementById("cloak-list").children).forEach((cloak) => { + cloak.addEventListener("click", () => { + let cloakName = cloak.dataset.cloakName; + let cloakIcon = cloak.dataset.cloakIcon; + + let localStorageItem = { + name: cloakName, + icon: cloakIcon, + isCustom: false, + }; + localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem)); + + if (cloakName == "None") { + localStorage.removeItem("alu__selectedCloak"); + cloakName = "Settings | Alu"; + cloakIcon = "/favicon.svg"; + } + let link = document.querySelector("link[rel~='icon']"); + if (!link) { + link = document.createElement("link"); + link.rel = "icon"; + document.head.appendChild(link); + } + link.href = cloakIcon; + document.title = cloakName; + + if (!cloak.classList.contains("selected")) { + Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => { + cloak2.classList.remove("selected"); + }); + cloak.classList.add("selected"); + } + }); + }); + + let customNameInput = document.getElementById("cloak-custom-name-input"); + let customFaviconInput = document.getElementById("cloak-custom-favicon-input"); + if (localStorage.getItem("alu__selectedCloak")) { + let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak")); + if (selectedCloak.isCustom) { + customNameInput.value = selectedCloak.name; + customFaviconInput.value = selectedCloak.icon; + } + } + + document.getElementById("cloak-custom-button").addEventListener("click", () => { + let cloakName = document.getElementById("cloak-custom-name-input").value; + let cloakIcon = document.getElementById("cloak-custom-favicon-input").value; let localStorageItem = { name: cloakName, icon: cloakIcon, - isCustom: false, + isCustom: true, }; localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem)); - if (cloakName == "None") { localStorage.removeItem("alu__selectedCloak"); cloakName = "Settings | Alu"; @@ -235,140 +275,102 @@ const t = useTranslations(lang); } link.href = cloakIcon; document.title = cloakName; - - if (!cloak.classList.contains("selected")) { - Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => { - cloak2.classList.remove("selected"); - }); - cloak.classList.add("selected"); - } }); - }); + } - let customNameInput = document.getElementById("cloak-custom-name-input"); - let customFaviconInput = document.getElementById("cloak-custom-favicon-input"); - if (localStorage.getItem("alu__selectedCloak")) { - let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak")); - if (selectedCloak.isCustom) { - customNameInput.value = selectedCloak.name; - customFaviconInput.value = selectedCloak.icon; + function changeTheme() { + let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value; + if (theme) { + document.documentElement.setAttribute("data-theme", theme.toLowerCase()); + let footer = document.getElementById("footer"); + if (footer) { + footer.dataset.theme = theme.toLowerCase(); + } } } - document.getElementById("cloak-custom-button").addEventListener("click", () => { - let cloakName = document.getElementById("cloak-custom-name-input").value; - let cloakIcon = document.getElementById("cloak-custom-favicon-input").value; - let localStorageItem = { - name: cloakName, - icon: cloakIcon, - isCustom: true, - }; - localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem)); - if (cloakName == "None") { - localStorage.removeItem("alu__selectedCloak"); - cloakName = "Settings | Alu"; - cloakIcon = "/favicon.svg"; + function setupSettings(event) { + if (event.detail == "setting-tab-proxy") { + applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy"); + applySavedLocalStorage("alu__search_engine", "dropdown__search-engine"); + applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with"); + let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu"); + let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu"); + let openWithDropdown = document.getElementById("dropdown__open-with-menu"); + let bareUrlInput = document.getElementById("bare-url-input"); + let searxngUrlInput = document.getElementById("searxng-url-input"); + let savedSearxngUrl = localStorage.getItem("alu__searxngUrl"); + if (savedSearxngUrl != undefined) { + if (savedSearxngUrl == "") + localStorage.setItem("alu__searxngUrl", "https://searxng.site/"); + searxngUrlInput.value = localStorage.getItem("alu__searxngUrl"); + } + // Proxy settings + applyInputListeners(bareUrlInput, "alu__bareUrl"); + applyInputListeners(searxngUrlInput, "alu__searxngUrl"); + applyDropdownEventListeners( + searchEngineDropdown, + "dropdown__search-engine", + "alu__search_engine", + checkSearxng + ); + applyDropdownEventListeners( + selectedProxyDropdown, + "dropdown__selected-proxy", + "alu__selectedProxy" + ); + applyDropdownEventListeners( + openWithDropdown, + "dropdown__open-with", + "alu__selectedOpenWith" + ); + if (localStorage.getItem("bareUrl")) { + bareUrlInput.value = localStorage.getItem("bareUrl"); + } else { + bareUrlInput.value = "/bare/"; + } + checkSearxng(); + } else if (event.detail == "setting-tab-customization") { + setupCustomizationSettings(); + } else if (event.detail == "setting-tab-cloaking") { + setupCloakingSettings(); } - let link = document.querySelector("link[rel~='icon']"); - if (!link) { - link = document.createElement("link"); - link.rel = "icon"; - document.head.appendChild(link); - } - link.href = cloakIcon; - document.title = cloakName; - }); - } + } - function changeTheme() { - let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value; - if (theme) { - document.documentElement.setAttribute("data-theme", theme.toLowerCase()); - let footer = document.getElementById("footer"); - if (footer) { - footer.dataset.theme = theme.toLowerCase(); + function checkSearxng() { + // This function checks if the "searxng" option was clicked, display an additional option if so. + if (localStorage.getItem("alu__search_engine")) { + if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") { + document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1"; + } else { + document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0"; + } + } + } + + document.addEventListener("setting-tabLoad", setupSettings); + + function navigateToNewLangaugePage() { + let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value; + let currentLanguage = window.location.pathname.split("/")[1]; + // Do nothing.. because we're already on the page. + if (value == currentLanguage) return; + switch (value) { + case "en": + window.location.href = "/en/settings/"; + break; + case "jp": + window.location.href = "/jp/settings/"; + break; } } } - - function setupSettings(event) { - if (event.detail == "setting-tab-proxy") { - applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy"); - applySavedLocalStorage("alu__search_engine", "dropdown__search-engine"); - applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with"); - let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu"); - let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu"); - let openWithDropdown = document.getElementById("dropdown__open-with-menu"); - let bareUrlInput = document.getElementById("bare-url-input"); - let searxngUrlInput = document.getElementById("searxng-url-input"); - let savedSearxngUrl = localStorage.getItem("alu__searxngUrl"); - if (savedSearxngUrl != undefined) { - if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/"); - searxngUrlInput.value = localStorage.getItem("alu__searxngUrl"); - } - // Proxy settings - applyInputListeners(bareUrlInput, "alu__bareUrl"); - applyInputListeners(searxngUrlInput, "alu__searxngUrl"); - applyDropdownEventListeners( - searchEngineDropdown, - "dropdown__search-engine", - "alu__search_engine", - checkSearxng - ); - applyDropdownEventListeners( - selectedProxyDropdown, - "dropdown__selected-proxy", - "alu__selectedProxy" - ); - applyDropdownEventListeners(openWithDropdown, "dropdown__open-with", "alu__selectedOpenWith"); - if (localStorage.getItem("bareUrl")) { - bareUrlInput.value = localStorage.getItem("bareUrl"); - } else { - bareUrlInput.value = "/bare/"; - } - checkSearxng(); - } else if (event.detail == "setting-tab-customization") { - setupCustomizationSettings(); - } else if (event.detail == "setting-tab-cloaking") { - setupCloakingSettings(); - } - } - - function checkSearxng() { - // This function checks if the "searxng" option was clicked, display an additional option if so. - if (localStorage.getItem("alu__search_engine")) { - if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") { - document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1"; - } else { - document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0"; - } - } - } - - document.addEventListener("setting-tabLoad", setupSettings); - - function navigateToNewLangaugePage() { - let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value; - let currentLanguage = window.location.pathname.split("/")[1]; - // Do nothing.. because we're already on the page. - if (value == currentLanguage) return; - switch (value) { - case "en": - window.location.href = "/en/settings/"; - break; - case "jp": - window.location.href = "/jp/settings/"; - break; - } - } - } - document.addEventListener('astro:after-swap', () => { + document.addEventListener("astro:after-swap", () => { setTimeout(() => { settingsLoad(); }, 300); - - }) - settingsLoad() + }); + settingsLoad();