120 lines
4.7 KiB
JavaScript
120 lines
4.7 KiB
JavaScript
(function () {
|
|
const BUTTON_ID = "rscord-settings-btn";
|
|
const CONTENT_CONTAINER_ID = "custom-content";
|
|
const SWITCH_CONTAINER_ID = "switch-container";
|
|
|
|
const CSS_CLASSES = {
|
|
tabItem: "item-3XjbnG",
|
|
selected: "selected-g-kMVV",
|
|
contentColumn: "contentColumn-1C7as6",
|
|
settingsSidebar: "standardSidebarView-E9Pc3j",
|
|
title: "colorStandard-1Xxp1s size14-k_3Hy4 h1-34Txb0 title-3hptVQ defaultColor-2cKwKo defaultMarginh1-EURXsm"
|
|
};
|
|
|
|
const TAB_CONTENT = `
|
|
<h2 class="${CSS_CLASSES.title}">RSCord Settings</h2>
|
|
<div id="${SWITCH_CONTAINER_ID}"></div>
|
|
`;
|
|
|
|
function addSwitches(container) {
|
|
container.appendChild(createSwitch(
|
|
"Push Notifications",
|
|
"Sends you notifications even when you close the app",
|
|
"push-notifications",
|
|
false,
|
|
async () => {
|
|
const publicKey = window.GLOBAL_ENV.VAPID_KEY;
|
|
if (!publicKey) {
|
|
alert("Server has not enabled push notifications")
|
|
return false;
|
|
}
|
|
try {
|
|
await registerPush(publicKey);
|
|
return true;
|
|
} catch(err) {
|
|
alert(err.message);
|
|
return false;
|
|
}
|
|
}
|
|
));
|
|
}
|
|
|
|
function addSettingsTab() {
|
|
const advancedTab = document.querySelector(`.${CSS_CLASSES.tabItem}[aria-controls='advanced-tab']`);
|
|
if (!advancedTab) return;
|
|
if (document.getElementById(BUTTON_ID)) return;
|
|
|
|
const settingsBtn = document.createElement("div");
|
|
settingsBtn.id = BUTTON_ID;
|
|
settingsBtn.className = advancedTab.className;
|
|
settingsBtn.role = "tab";
|
|
settingsBtn.tabIndex = -1;
|
|
settingsBtn.ariaSelected = "false";
|
|
settingsBtn.textContent = "RSCord Settings";
|
|
|
|
settingsBtn.addEventListener("click", () => {
|
|
const tabs = settingsBtn.parentElement.querySelectorAll('[role="tab"]');
|
|
tabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
|
|
tabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
|
|
settingsBtn.classList.add(CSS_CLASSES.selected);
|
|
settingsBtn.setAttribute("aria-selected", "true");
|
|
|
|
let customContent = document.getElementById(CONTENT_CONTAINER_ID);
|
|
if (!customContent) {
|
|
customContent = document.createElement("div");
|
|
customContent.id = CONTENT_CONTAINER_ID;
|
|
customContent.innerHTML = TAB_CONTENT;
|
|
|
|
const switchContainer = customContent.querySelector(`#${SWITCH_CONTAINER_ID}`);
|
|
addSwitches(switchContainer);
|
|
|
|
document.querySelector(`.${CSS_CLASSES.contentColumn}`).appendChild(customContent);
|
|
}
|
|
|
|
const contentColumn = document.querySelector(`.${CSS_CLASSES.contentColumn}`);
|
|
Array.from(contentColumn.children).forEach(child => {
|
|
if (child.id !== CONTENT_CONTAINER_ID) child.style.display = "none";
|
|
});
|
|
customContent.style.display = "block";
|
|
});
|
|
|
|
advancedTab.insertAdjacentElement("afterend", settingsBtn);
|
|
return true;
|
|
}
|
|
|
|
function startObserver() {
|
|
const observer = new MutationObserver(() => {
|
|
const sidebar = document.querySelector(`.${CSS_CLASSES.settingsSidebar}`);
|
|
if (sidebar) addSettingsTab();
|
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
}
|
|
|
|
startObserver();
|
|
|
|
document.body.addEventListener("click", (e) => {
|
|
const clickedTab = e.target.closest('[role="tab"]');
|
|
if (!clickedTab) return;
|
|
|
|
const allTabs = document.querySelectorAll('[role="tab"]');
|
|
allTabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
|
|
allTabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
|
|
clickedTab.classList.add(CSS_CLASSES.selected);
|
|
clickedTab.setAttribute("aria-selected", "true");
|
|
|
|
const contentColumn = document.querySelector(`.${CSS_CLASSES.contentColumn}`);
|
|
if (!contentColumn) return;
|
|
|
|
if (clickedTab.id === BUTTON_ID) {
|
|
Array.from(contentColumn.children).forEach(child => {
|
|
if (child.id === CONTENT_CONTAINER_ID) child.style.display = "block";
|
|
else child.style.display = "none";
|
|
});
|
|
} else {
|
|
Array.from(contentColumn.children).forEach(child => {
|
|
if (child.id !== CONTENT_CONTAINER_ID) child.style.display = "";
|
|
else child.style.display = "none";
|
|
});
|
|
}
|
|
});
|
|
})(); |