WAY better system for iframe / topbar handling, and topbar url changes when the iframe url does.
This commit is contained in:
wearrrrr
parent
2bf4c596d8
commit
3d8cbf3e72
6 changed files with 370 additions and 326 deletions
11
index.js
11
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", () => {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 2e6cd673ab519025af951713868860b7895b11b8
|
||||
Subproject commit 11287d0a834c672a55d10164dbfefe9ee1922d3d
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script src="/uv/uv.bundle.js" transition:persist is:inline></script>
|
||||
<script src="/uv.config.js" transition:persist is:inline></script>
|
||||
<script>
|
||||
<script is:inline>
|
||||
//@ts-nocheck
|
||||
let form = document.querySelector("form");
|
||||
let input = document.querySelector("input");
|
||||
|
|
@ -25,6 +25,8 @@
|
|||
else if (!(url.startsWith("https://") || url.startsWith("http://"))) url = "http://" + url;
|
||||
|
||||
let iframe = document.getElementById("proxy-frame");
|
||||
let topbar = document.getElementById("top-bar");
|
||||
let closeButton = document.getElementById("close-button");
|
||||
let preference = getProxyPreference();
|
||||
if (preference === "ultraviolet") {
|
||||
iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
|
||||
|
|
@ -34,6 +36,8 @@
|
|||
if (!rammerheadSession) {
|
||||
let session = await fetch("/newsession");
|
||||
let sessionID = await session.text();
|
||||
// Disable URL shuffling on rewrite, eventually I'll try and figure out how it works, but for now, it's disabled.
|
||||
await fetch("/editsession?id=" + sessionID + "&enableShuffling=0");
|
||||
// Now save it in a cookie that expires in 72 hours.
|
||||
document.cookie = `rammerhead-session=${sessionID}; max-age=${60 * 60 * 72}; path=/`;
|
||||
}
|
||||
|
|
@ -45,46 +49,28 @@
|
|||
iframe.style.pointerEvents = "auto";
|
||||
iframe.classList.add("proxy-frame");
|
||||
document.body.appendChild(iframe);
|
||||
iframe.addEventListener("load", () => {
|
||||
let topBar = document.getElementById("top-bar");
|
||||
loadingContent.style.opacity = 0;
|
||||
topBar.innerHTML = "";
|
||||
topBar.classList.add("top-bar");
|
||||
let closeButton = document.createElement("button");
|
||||
closeButton.classList.add("close-button");
|
||||
closeButton.innerText = "Close";
|
||||
closeButton.addEventListener("click", () => {
|
||||
iframe.style.opacity = 0;
|
||||
topBar.style.opacity = 0;
|
||||
iframe.style.pointerEvents = "none";
|
||||
topBar.style.pointerEvents = "none";
|
||||
setTimeout(() => {
|
||||
iframe.remove();
|
||||
topBar.remove();
|
||||
iframeURLChange(iframe, (newURL) => updateTopbarURL(preference, newURL));
|
||||
const boundIFrameLoad = iframeLoad.bind(null, iframe, loadingContent, topbar, closeButton);
|
||||
iframe.addEventListener("load", boundIFrameLoad);
|
||||
|
||||
// recreate them
|
||||
iframe = document.createElement("iframe");
|
||||
iframe.id = "proxy-frame";
|
||||
iframe.style.opacity = 0;
|
||||
iframe.style.pointerEvents = "none";
|
||||
topBar = document.createElement("div");
|
||||
topBar.id = "top-bar";
|
||||
topBar.style.opacity = 0;
|
||||
topBar.style.pointerEvents = "none";
|
||||
document.body.appendChild(topBar);
|
||||
document.body.appendChild(iframe);
|
||||
}, 500);
|
||||
});
|
||||
let urlText = document.createElement("p");
|
||||
urlText.classList.add("url-text");
|
||||
urlText.innerText = window.__uv$config.decodeUrl(iframe.src.split(__uv$config.prefix)[1]);
|
||||
function iframeLoad(iframe, loadingContent, topbar, closeButton) {
|
||||
loadingContent.style.opacity = 0;
|
||||
iframe.style.opacity = 1;
|
||||
topBar.style.opacity = 1;
|
||||
topBar.style.pointerEvents = "auto";
|
||||
topBar.appendChild(closeButton);
|
||||
topBar.appendChild(urlText);
|
||||
document.body.appendChild(topBar);
|
||||
});
|
||||
topbar.style.opacity = 1;
|
||||
topbar.style.pointerEvents = "auto";
|
||||
|
||||
closeButton.onclick = () => {
|
||||
iframe.style.opacity = 0;
|
||||
topbar.style.opacity = 0;
|
||||
iframe.style.pointerEvents = "none";
|
||||
topbar.style.pointerEvents = "none";
|
||||
iframe.removeEventListener("load", boundIFrameLoad);
|
||||
|
||||
setTimeout(() => {
|
||||
iframe.src = "about:blank";
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function formEventListener(event) {
|
||||
|
|
@ -153,4 +139,52 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function iframeURLChange(iframe, callback) {
|
||||
var lastDispatched = null;
|
||||
|
||||
var dispatchChange = function () {
|
||||
var newHref = iframe.contentWindow.location.href;
|
||||
|
||||
if (newHref !== lastDispatched) {
|
||||
callback(newHref);
|
||||
lastDispatched = newHref;
|
||||
}
|
||||
};
|
||||
|
||||
var unloadHandler = function () {
|
||||
// Timeout needed because the URL changes immediately after
|
||||
// the `unload` event is dispatched.
|
||||
setTimeout(dispatchChange, 0);
|
||||
};
|
||||
|
||||
function attachUnload() {
|
||||
// Remove the unloadHandler in case it was already attached.
|
||||
// Otherwise, there will be two handlers, which is unnecessary.
|
||||
iframe.contentWindow.removeEventListener("unload", unloadHandler);
|
||||
iframe.contentWindow.addEventListener("unload", unloadHandler);
|
||||
}
|
||||
|
||||
iframe.addEventListener("load", function () {
|
||||
attachUnload();
|
||||
|
||||
// Just in case the change wasn't dispatched during the unload event...
|
||||
dispatchChange();
|
||||
});
|
||||
|
||||
attachUnload();
|
||||
}
|
||||
function updateTopbarURL(preference, newURL) {
|
||||
if (newURL === "about:blank") return;
|
||||
let urlText = document.getElementById("url-text");
|
||||
if (urlText) {
|
||||
if (preference === "rammerhead")
|
||||
urlText.innerText = newURL.slice(
|
||||
newURL.indexOf("/" + getCookie("rammerhead-session")) +
|
||||
getCookie("rammerhead-session").length +
|
||||
2
|
||||
);
|
||||
else urlText.innerText = window.__uv$config.decodeUrl(newURL.split(__uv$config.prefix)[1]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
</script>
|
||||
<style is:global>
|
||||
.content-hidden {
|
||||
|
|
|
|||
|
|
@ -28,16 +28,25 @@ const { title, optionalPreloads } = Astro.props;
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="title" content="Alu" />
|
||||
<meta name="description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
|
||||
<meta
|
||||
name="description"
|
||||
content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://aluu.xyz" />
|
||||
<meta property="og:title" content="Alu" />
|
||||
<meta property="og:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization."
|
||||
/>
|
||||
<meta property="og:image" content="/logo.png" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://aluu.xyz" />
|
||||
<meta property="twitter:title" content="Alu" />
|
||||
<meta property="twitter:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization."
|
||||
/>
|
||||
<meta property="twitter:image" content="/logo.png" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
|
@ -166,7 +175,7 @@ const { title, optionalPreloads } = Astro.props;
|
|||
#proxy-frame {
|
||||
opacity: 0;
|
||||
}
|
||||
.top-bar {
|
||||
#top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -179,10 +188,11 @@ const { title, optionalPreloads } = Astro.props;
|
|||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 100;
|
||||
transition: opacity 350ms ease-in-out;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.close-button {
|
||||
#close-button {
|
||||
padding: 5px;
|
||||
padding-inline: 40px;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -25,9 +25,12 @@ export function getStaticPaths() {
|
|||
/>
|
||||
<div id="search-suggestions"></div>
|
||||
<div id="loading-content">Loading...</div>
|
||||
<div id="top-bar"></div>
|
||||
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
||||
</form>
|
||||
<div id="top-bar">
|
||||
<button id="close-button">Close</button>
|
||||
<span id="url-text"></span>
|
||||
</div>
|
||||
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="faq-section">
|
||||
|
|
@ -44,8 +47,8 @@ export function getStaticPaths() {
|
|||
<p>
|
||||
Spreading the word of Alu is a great start, but if you really enjoy Alu, and want private
|
||||
links, consider supporting me through Patreon! You can support me
|
||||
<Link href="https://www.patreon.com/wearr/membership" newTab content="Here!" />,
|
||||
thank you for helping to make Alu great!
|
||||
<Link href="https://www.patreon.com/wearr/membership" newTab content="Here!" />, thank you
|
||||
for helping to make Alu great!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue