Language switching suboptimally implemented.
This commit is contained in:
wearrrrr
parent
64a31c0daf
commit
e98458148a
2 changed files with 88 additions and 47 deletions
|
|
@ -1,4 +0,0 @@
|
|||
export default {
|
||||
defaultLocale: "en",
|
||||
locales: ["en", "jp"],
|
||||
};
|
||||
|
|
@ -42,35 +42,53 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline>
|
||||
<script>
|
||||
import { navigate } from 'astro:transitions/client';
|
||||
|
||||
// Extend window object to store currently selected tab.
|
||||
declare global {
|
||||
interface Window {
|
||||
currentlySelectedTab: string,
|
||||
loadedContentStorage: any // Technically this is an object storing strings of html, but im lazy.
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("astro:before-swap", () => {
|
||||
window.currentlySelectedTab = ""
|
||||
document.removeEventListener('setting-tabChange', determineListener)
|
||||
document.removeEventListener('setting-tabChange', determineListener as EventListener)
|
||||
})
|
||||
window.currentlySelectedTab;
|
||||
window.loadedContentStorage = {}
|
||||
|
||||
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()
|
||||
}
|
||||
function beginLoad() {
|
||||
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()
|
||||
}
|
||||
|
||||
tab.addEventListener('click', (event) => {
|
||||
loadContent(event.target.id)
|
||||
tab.addEventListener('click', (event) => {
|
||||
loadContent((event.target as HTMLElement).id)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
beginLoad();
|
||||
|
||||
function loadContent(tabID) {
|
||||
|
||||
function loadContent(tabID: string) {
|
||||
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'
|
||||
if (currentContent) {
|
||||
currentContent.innerHTML = window.loadedContentStorage[tabID]
|
||||
currentContent.style.opacity = '1'
|
||||
} else {
|
||||
throw new Error("Current content not found!")
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
|
||||
document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
|
||||
}, 250);
|
||||
|
|
@ -85,11 +103,11 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
if (dropdown) {
|
||||
if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
|
||||
dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
|
||||
toggle.style.borderRadius = '10px 10px 0 0';
|
||||
document.getElementById(toggle.id)!.style.borderRadius = '10px 10px 0 0';
|
||||
} else {
|
||||
dropdown.style.maxHeight = '0px';
|
||||
setTimeout(() => {
|
||||
toggle.style.borderRadius = '10px';
|
||||
document.getElementById(toggle.id)!.style.borderRadius = '10px';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
|
@ -97,7 +115,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
})
|
||||
}
|
||||
|
||||
function determineListener(event) {
|
||||
function determineListener(event: CustomEvent) {
|
||||
if (event.detail == "setting-tab-proxy") {
|
||||
addDropdownListener()
|
||||
} else if (event.detail == "setting-tab-customization") {
|
||||
|
|
@ -105,32 +123,39 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
}
|
||||
}
|
||||
|
||||
function closeDropdown(dropdownID) {
|
||||
function closeDropdown(dropdownID: string) {
|
||||
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';
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.style.borderRadius = '10px';
|
||||
} else {
|
||||
throw new Error("Dropdown toggle not found!")
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function applySavedLocalStorage(localStorageItem, dropdownID) {
|
||||
function applySavedLocalStorage(localStorageItem: string, dropdownID: string) {
|
||||
if (localStorage.getItem(localStorageItem)) {
|
||||
let dropdown_toggle = document.getElementById(dropdownID);
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.innerText = localStorage.getItem(localStorageItem).charAt(0).toUpperCase() + localStorage.getItem(localStorageItem).slice(1)
|
||||
dropdown_toggle.innerText = (localStorage.getItem(localStorageItem) || "").charAt(0).toUpperCase() + (localStorage.getItem(localStorageItem) || "").slice(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
||||
function applyDropdownEventListeners(item: HTMLElement, dropdownID: string, localStorageItem: string, optionalCallback: Function | undefined = undefined) {
|
||||
Array.from(item.children).forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
localStorage.setItem(localStorageItem, item.dataset.setting)
|
||||
// TODO: Allow an optional field for a custom localStorage value, instead of the input value.
|
||||
localStorage.setItem(localStorageItem, ((item as HTMLElement).dataset.setting) || "")
|
||||
applySavedLocalStorage(localStorageItem, dropdownID)
|
||||
closeDropdown(item.parentElement.id);
|
||||
if (item.parentElement) {
|
||||
closeDropdown(item.parentElement.id);
|
||||
}
|
||||
|
||||
if (typeof optionalCallback == "function") {
|
||||
optionalCallback();
|
||||
|
|
@ -139,27 +164,45 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
})
|
||||
}
|
||||
|
||||
function applyInputListeners(item, localStorageItem) {
|
||||
function applyInputListeners(item: HTMLInputElement, localStorageItem: string) {
|
||||
item.addEventListener('input', () => {
|
||||
// TODO: Allow an optional field for a custom localStorage value, instead of the input value.
|
||||
localStorage.setItem(localStorageItem, item.value)
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('setting-tabChange', determineListener)
|
||||
document.addEventListener('setting-tabChange', determineListener as EventListener)
|
||||
|
||||
loadContent('setting-tab-proxy')
|
||||
|
||||
function setupCustomizationSettings() {
|
||||
applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
|
||||
applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
|
||||
let dropdownTheme = document.getElementById('dropdown__selected-theme-menu')
|
||||
let dropdownLanguage = document.getElementById('dropdown__selected-language-menu')
|
||||
// TODO: Null checking lol.
|
||||
let dropdownTheme = document.getElementById('dropdown__selected-theme-menu') as HTMLElement
|
||||
let dropdownLanguage = document.getElementById('dropdown__selected-language-menu') as HTMLElement
|
||||
applyDropdownEventListeners(dropdownTheme, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
|
||||
applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage');
|
||||
applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
|
||||
}
|
||||
|
||||
function navigateToNewLangaugePage() {
|
||||
console.log("Here")
|
||||
console.log(localStorage.getItem("alu__selectedLanguage"))
|
||||
switch (localStorage.getItem("alu__selectedLanguage")) {
|
||||
case "English":
|
||||
window.location.href = "/en/settings/"
|
||||
break;
|
||||
case "日本語":
|
||||
window.location.href = "/jp/settings/"
|
||||
break;
|
||||
}
|
||||
beginLoad();
|
||||
|
||||
}
|
||||
|
||||
function changeTheme() {
|
||||
let theme = localStorage.getItem('alu__selectedTheme')
|
||||
// || "" is safe to use here, because it will default to the default theme if the localStorage item is not found.
|
||||
let theme = localStorage.getItem('alu__selectedTheme') || ""
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme.toLowerCase())
|
||||
}
|
||||
|
|
@ -169,20 +212,21 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
}
|
||||
}
|
||||
|
||||
function setupSettings(event) {
|
||||
function setupSettings(event: CustomEvent) {
|
||||
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 selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu') as HTMLElement
|
||||
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu') as HTMLElement
|
||||
let openWithDropdown = document.getElementById('dropdown__open-with-menu') as HTMLElement
|
||||
let bareUrlInput = document.getElementById('bare-url-input') as HTMLInputElement
|
||||
let searxngUrlInput = document.getElementById('searxng-url-input') as HTMLInputElement
|
||||
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
|
||||
if (savedSearxngUrl != undefined) {
|
||||
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
|
||||
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
|
||||
// Typescript.. we literally make sure that it won't be undefined RIGHT ABOVE THIS COMMENT.
|
||||
if (searxngUrlInput) searxngUrlInput.value = localStorage.getItem("alu__searxngUrl") || "https://searxng.site/"
|
||||
}
|
||||
// Proxy settings
|
||||
applyInputListeners(bareUrlInput, 'alu__bareUrl')
|
||||
|
|
@ -190,8 +234,9 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
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')
|
||||
// Currently does nothing functionally, but it's here for future use.
|
||||
if (localStorage.getItem('alu__bareUrl')) {
|
||||
bareUrlInput.value = localStorage.getItem('bareUrl') || ""
|
||||
} else {
|
||||
bareUrlInput.value = '/bare/'
|
||||
}
|
||||
|
|
@ -204,15 +249,15 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
function checkSearxng() {
|
||||
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
||||
if (localStorage.getItem("alu__search_engine")) {
|
||||
if (localStorage.getItem("alu__search_engine").toLowerCase() == "searx") {
|
||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
|
||||
if ((localStorage.getItem("alu__search_engine") || "").toLowerCase() == "searx") {
|
||||
(document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '1'
|
||||
} else {
|
||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
|
||||
(document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('setting-tabLoad', setupSettings)
|
||||
document.addEventListener('setting-tabLoad', setupSettings as EventListener);
|
||||
</script>
|
||||
<style is:global>
|
||||
.content-hidden {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue