RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Format settings code nicer and run prettier

Browse source
This commit is contained in:
wearrrrr 2024-07-28 22:31:52 -05:00
parent 33e80ef1eb
commit 90e5bbb7f2
4 changed files with 257 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.eslintrc.cjs
View file

@ -32,9 +32,7 @@ module.exports = {
project: "./tsconfig.json", project: "./tsconfig.json",
}, },
plugins: ["@typescript-eslint"], plugins: ["@typescript-eslint"],
extends: [ extends: ["plugin:@typescript-eslint/recommended"],
"plugin:@typescript-eslint/recommended",
],
}, },
{ {
// Define the configuration for `<script>` tag. // Define the configuration for `<script>` tag.

1
src/components/ts/TransportManager.ts
View file

@ -66,7 +66,6 @@ export async function registerAndUpdateSW(): Promise<void> {
} }
} }
export async function initTransport() { export async function initTransport() {
await TransportMgr.setTransport(TransportMgr.getTransport(), localStorage.getItem("alu__wispUrl") || wispURLDefault); await TransportMgr.setTransport(TransportMgr.getTransport(), localStorage.getItem("alu__wispUrl") || wispURLDefault);
} }

1
src/pages/[lang]/index.astro
View file

@ -60,7 +60,6 @@ export function getStaticPaths() {
</div> </div>
</div> </div>
</section> </section>
<script src="@components/ts/WispServerTiming.ts"></script>
</main> </main>
<ProxyRegistrar /> <ProxyRegistrar />
<script> <script>

516
src/pages/[lang]/settings.astro
View file

@ -73,224 +73,182 @@ export function getStaticPaths() {
loadContent(event.target.id); loadContent(event.target.id);
}); });
}); });
}
function loadContent(tabID) { function loadContent(tabID) {
if (window.currentlySelectedTab == tabID) return; if (window.currentlySelectedTab == tabID) return;
else window.currentlySelectedTab = tabID; else window.currentlySelectedTab = tabID;
const currentContent = document.getElementById("current-content"); const currentContent = document.getElementById("current-content");
if (currentContent) { if (currentContent) {
currentContent.style.opacity = "0"; currentContent.style.opacity = "0";
setTimeout(() => { setTimeout(() => {
currentContent.innerHTML = window.loadedContentStorage[tabID]; currentContent.innerHTML = window.loadedContentStorage[tabID];
currentContent.style.opacity = "1"; currentContent.style.opacity = "1";
document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID })); document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
}, 250); }, 250);
}
} }
}
function addDropdownListener() { function addDropdownListener() {
const dropdown_toggles = document.getElementsByClassName("dropdown-toggle"); const dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
Array.from(dropdown_toggles).forEach((toggle) => { Array.from(dropdown_toggles).forEach((toggle) => {
toggle.onclick = function () { toggle.onclick = function () {
closeOtherDropdowns(toggle.id); closeOtherDropdowns(toggle.id);
toggleDropdown(toggle); toggleDropdown(toggle);
}; };
}); });
}
function toggleDropdown(toggle) {
const 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 toggleDropdown(toggle) { function determineListener(event) {
const dropdown = document.getElementById(toggle.id + "-menu"); if (event.detail == "setting-tab-proxy") {
if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") { addDropdownListener();
dropdown.style.maxHeight = dropdown.scrollHeight + "px"; } else if (event.detail == "setting-tab-customization") {
toggle.style.borderRadius = "10px 10px 0 0"; addDropdownListener();
} else {
dropdown.style.maxHeight = "0px";
setTimeout(() => {
toggle.style.borderRadius = "10px";
}, 300);
}
} }
}
function determineListener(event) { function closeOtherDropdowns(dropdownIDToExclude) {
if (event.detail == "setting-tab-proxy") { const dropdowns = document.getElementsByClassName("dropdown-menu");
addDropdownListener(); Array.from(dropdowns).forEach((dropdown) => {
} else if (event.detail == "setting-tab-customization") { dropdown.style.maxHeight = "0px";
addDropdownListener(); setTimeout(() => {
} if (dropdown.id != dropdownIDToExclude + "-menu") {
} const dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", ""));
function closeOtherDropdowns(dropdownIDToExclude) {
const dropdowns = document.getElementsByClassName("dropdown-menu");
Array.from(dropdowns).forEach((dropdown) => {
dropdown.style.maxHeight = "0px";
setTimeout(() => {
if (dropdown.id != dropdownIDToExclude + "-menu") {
const dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", ""));
dropdown_toggle.style.borderRadius = "10px";
}
}, 300);
});
}
function closeDropdown(dropdownID) {
const dropdown = document.getElementById(dropdownID);
if (dropdown) {
dropdown.style.maxHeight = "0px";
setTimeout(() => {
const dropdown_toggle = document.getElementById(dropdownID.replace("-menu", ""));
dropdown_toggle.style.borderRadius = "10px"; dropdown_toggle.style.borderRadius = "10px";
}, 300);
}
}
function getLocalStorageValue(localStorageItem, dropdownID) {
// I was kinda dumb for not doing this earlier.
const dropdown = document.getElementById(dropdownID);
const dropdownMenu = document.getElementById(dropdownID + "-menu");
if (dropdown && dropdownMenu) {
// Now we find the child that matches localStorageItem.value.
const 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)) {
const dropdown_toggle = document.getElementById(dropdownID);
if (dropdown_toggle) {
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
} }
}, 300);
});
}
function closeDropdown(dropdownID) {
const dropdown = document.getElementById(dropdownID);
if (dropdown) {
dropdown.style.maxHeight = "0px";
setTimeout(() => {
const 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.
const dropdown = document.getElementById(dropdownID);
const dropdownMenu = document.getElementById(dropdownID + "-menu");
if (dropdown && dropdownMenu) {
// Now we find the child that matches localStorageItem.value.
const 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)) {
const dropdown_toggle = document.getElementById(dropdownID);
if (dropdown_toggle) {
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
} }
} }
}
function applyDropdownEventListeners(dropdown, optionalCallback) { function applyDropdownEventListeners(dropdown, optionalCallback) {
const dropdownSibling = document.getElementById(dropdown.id + "-menu"); const dropdownSibling = document.getElementById(dropdown.id + "-menu");
const localStorageItem = dropdown.dataset.localStorageKey; const localStorageItem = dropdown.dataset.localStorageKey;
Array.from(dropdownSibling.children).forEach((child) => { Array.from(dropdownSibling.children).forEach((child) => {
child.onclick = () => { child.onclick = () => {
const localStorageItemContent = { const localStorageItemContent = {
name: child.innerText, name: child.innerText,
value: child.dataset.setting, value: child.dataset.setting,
};
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
applySavedLocalStorage(localStorageItem, dropdown.id);
closeDropdown(dropdownSibling.id);
if (typeof optionalCallback == "function") {
optionalCallback();
}
}; };
}); localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
} applySavedLocalStorage(localStorageItem, dropdown.id);
closeDropdown(dropdownSibling.id);
function applyInputListeners(item, localStorageItem) { if (typeof optionalCallback == "function") {
item.addEventListener("input", () => { optionalCallback();
localStorage.setItem(localStorageItem, item.value);
});
}
function addThemeToDropdown(extension) {
const dropdown = document.getElementById("dropdown__selected-theme-menu");
if (dropdown) {
// TODO: Figure out why addThemeToDropdown is being called 6 times
// This when you go from another page and back to settings->customization.
const duplicateItem = Array.from(dropdown.children).find((item) => {
return item.dataset.setting == extension.themeName;
});
if (duplicateItem) return;
const themeItem = document.createElement("li");
themeItem.classList.add("dropdown-item");
themeItem.dataset.setting = extension.themeName;
themeItem.textContent = extension.title;
dropdown.appendChild(themeItem);
}
}
document.addEventListener("setting-tabLoad", determineListener);
loadContent("setting-tab-proxy");
function setupCustomizationSettings() {
const store = window.idb.transaction("InstalledExtensions", "readonly").objectStore("InstalledExtensions");
store.getAll().onsuccess = (event) => {
const result = event.target.result;
if (result) {
result.forEach((extension) => {
if (extension.type === "theme" && extension.themeName) {
// Create a dropdown item for the theme
addThemeToDropdown(extension);
}
});
} }
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
const themeDropdown = document.getElementById("dropdown__selected-theme");
const languageDropdown = document.getElementById("dropdown__selected-language");
applyDropdownEventListeners(themeDropdown, changeTheme);
applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
}; };
});
}
function applyInputListeners(item, localStorageItem) {
item.addEventListener("input", () => {
localStorage.setItem(localStorageItem, item.value);
});
}
function addThemeToDropdown(extension) {
const dropdown = document.getElementById("dropdown__selected-theme-menu");
if (dropdown) {
// TODO: Figure out why addThemeToDropdown is being called 6 times
// This when you go from another page and back to settings->customization.
const duplicateItem = Array.from(dropdown.children).find((item) => {
return item.dataset.setting == extension.themeName;
});
if (duplicateItem) return;
const themeItem = document.createElement("li");
themeItem.classList.add("dropdown-item");
themeItem.dataset.setting = extension.themeName;
themeItem.textContent = extension.title;
dropdown.appendChild(themeItem);
} }
}
function setupCloakingSettings() { document.addEventListener("setting-tabLoad", determineListener);
Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
cloak.addEventListener("click", () => {
let cloakName = cloak.dataset.cloakName;
let cloakIcon = cloak.dataset.cloakIcon;
const localStorageItem = { loadContent("setting-tab-proxy");
name: cloakName,
icon: cloakIcon,
isCustom: false,
};
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
if (cloakName == "None") { function setupCustomizationSettings() {
localStorage.removeItem("alu__selectedCloak"); const store = window.idb.transaction("InstalledExtensions", "readonly").objectStore("InstalledExtensions");
cloakName = "Settings | Alu"; store.getAll().onsuccess = (event) => {
cloakIcon = "/favicon.svg"; const result = event.target.result;
} if (result) {
let link = document.querySelector("link[rel~='icon']"); result.forEach((extension) => {
if (!link) { if (extension.type === "theme" && extension.themeName) {
link = document.createElement("link"); // Create a dropdown item for the theme
link.rel = "icon"; addThemeToDropdown(extension);
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");
} }
}); });
});
const customNameInput = document.getElementById("cloak-custom-name-input");
const customFaviconInput = document.getElementById("cloak-custom-favicon-input");
if (localStorage.getItem("alu__selectedCloak")) {
const selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
if (selectedCloak.isCustom) {
customNameInput.value = selectedCloak.name;
customFaviconInput.value = selectedCloak.icon;
}
} }
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
document.getElementById("cloak-custom-button").addEventListener("click", () => { const themeDropdown = document.getElementById("dropdown__selected-theme");
let cloakName = document.getElementById("cloak-custom-name-input").value; const languageDropdown = document.getElementById("dropdown__selected-language");
let cloakIcon = document.getElementById("cloak-custom-favicon-input").value; applyDropdownEventListeners(themeDropdown, changeTheme);
const localStorageItem = { applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
name: cloakName,
icon: cloakIcon,
isCustom: true,
}; };
}
function setupCloakingSettings() {
Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
cloak.addEventListener("click", () => {
let cloakName = cloak.dataset.cloakName;
let cloakIcon = cloak.dataset.cloakIcon;
const localStorageItem = {
name: cloakName,
icon: cloakIcon,
isCustom: false,
};
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem)); localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
if (cloakName == "None") { if (cloakName == "None") {
localStorage.removeItem("alu__selectedCloak"); localStorage.removeItem("alu__selectedCloak");
cloakName = "Settings | Alu"; cloakName = "Settings | Alu";
@ -304,91 +262,127 @@ export function getStaticPaths() {
} }
link.href = cloakIcon; link.href = cloakIcon;
document.title = cloakName; 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");
}
}); });
} });
function changeTheme() { const customNameInput = document.getElementById("cloak-custom-name-input");
const theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value; const customFaviconInput = document.getElementById("cloak-custom-favicon-input");
if (theme) { if (localStorage.getItem("alu__selectedCloak")) {
document.documentElement.setAttribute("data-theme", theme.toLowerCase()); const selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
const footer = document.getElementById("footer"); if (selectedCloak.isCustom) {
if (footer) { customNameInput.value = selectedCloak.name;
footer.dataset.theme = theme.toLowerCase(); customFaviconInput.value = selectedCloak.icon;
}
} }
} }
function setupSettings(event) { document.getElementById("cloak-custom-button").addEventListener("click", () => {
if (event.detail == "setting-tab-proxy") { let cloakName = document.getElementById("cloak-custom-name-input").value;
applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy"); let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine"); const localStorageItem = {
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with"); name: cloakName,
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport"); icon: cloakIcon,
// Dropdowns isCustom: true,
const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy"); };
const searchEngineDropdown = document.getElementById("dropdown__search-engine"); localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
const openWithDropdown = document.getElementById("dropdown__open-with"); if (cloakName == "None") {
const currentTransportDropdown = document.getElementById("dropdown__transport"); localStorage.removeItem("alu__selectedCloak");
const wispURLDropdown = document.getElementById("dropdown__wisp-url"); 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;
});
}
// Inputs function changeTheme() {
const searxngUrlInput = document.getElementById("searxng-url-input"); const theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
const bareURLInput = document.getElementById("bare-url-input"); if (theme) {
const savedSearxngUrl = localStorage.getItem("alu__searxngUrl"); document.documentElement.setAttribute("data-theme", theme.toLowerCase());
if (savedSearxngUrl != null) { const footer = document.getElementById("footer");
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/"); if (footer) {
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl"); footer.dataset.theme = theme.toLowerCase();
}
// const useWss = location.protocol == "https:";
// const webSocketProtocol = useWss ? "wss://" : "ws://";
// let savedWispUrl = localStorage.getItem("alu__wispUrl");
// if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
const savedBareUrl = localStorage.getItem("alu__bareUrl");
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
bareURLInput.value = localStorage.getItem("alu__bareUrl");
// Proxy settings
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
applyDropdownEventListeners(dropdown);
});
applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
checkSearxng();
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
applyInputListeners(bareURLInput, "alu__bareUrl");
} else if (event.detail == "setting-tab-customization") {
setupCustomizationSettings();
} else if (event.detail == "setting-tab-cloaking") {
setupCloakingSettings();
} }
} }
}
function checkSearxng() { function setupSettings(event) {
// This function checks if the "searxng" option was clicked, display an additional option if so. if (event.detail == "setting-tab-proxy") {
const search_engine = JSON.parse(localStorage.getItem("alu__search_engine")); applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
if (search_engine) { applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
if (search_engine.value.toLowerCase() == "searx") { applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1"; applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
} else { // Dropdowns
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0"; const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
} const searchEngineDropdown = document.getElementById("dropdown__search-engine");
const openWithDropdown = document.getElementById("dropdown__open-with");
const currentTransportDropdown = document.getElementById("dropdown__transport");
const wispURLDropdown = document.getElementById("dropdown__wisp-url");
// Inputs
const searxngUrlInput = document.getElementById("searxng-url-input");
const bareURLInput = document.getElementById("bare-url-input");
const savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
if (savedSearxngUrl != null) {
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
}
const savedBareUrl = localStorage.getItem("alu__bareUrl");
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
bareURLInput.value = localStorage.getItem("alu__bareUrl");
// Proxy settings
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
applyDropdownEventListeners(dropdown);
});
applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
checkSearxng();
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
applyInputListeners(bareURLInput, "alu__bareUrl");
} else if (event.detail == "setting-tab-customization") {
setupCustomizationSettings();
} else if (event.detail == "setting-tab-cloaking") {
setupCloakingSettings();
}
}
function checkSearxng() {
// Callback for search engine dropdown
const search_engine = JSON.parse(localStorage.getItem("alu__search_engine"));
if (search_engine) {
if (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); document.addEventListener("setting-tabLoad", setupSettings);
function navigateToNewLangaugePage() { function navigateToNewLangaugePage() {
const value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value; const value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
const currentLanguage = window.location.pathname.split("/")[1]; const currentLanguage = window.location.pathname.split("/")[1];
// Do nothing.. because we're already on the page. if (value == currentLanguage) return;
if (value == currentLanguage) return; window.location.href = `/${value}/settings`;
window.location.href = `/${value}/settings`;
}
} }
document.addEventListener("astro:after-swap", () => { document.addEventListener("astro:after-swap", () => {
setTimeout(() => { setTimeout(() => {
settingsLoad(); settingsLoad();
}, 300); }, 200);
}); });
settingsLoad(); settingsLoad();
</script> </script>