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

Theme support!!!!!!

Browse source
This commit is contained in:
wearrrrr 2024-07-08 21:08:44 -05:00
parent 6953527d2a
commit fc77fccc55
10 changed files with 191 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/marketplace/oled-theme/theme.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 19 KiB

53
src/components/SettingsContent/CustomizationTab.astro
View file

@ -27,3 +27,56 @@ const languageList = [
<Dropdown buttonNameDefault="English" dropdownList={languageList} id="dropdown__selected-language" />
</div>
</div>
<script>
// import IDBManager, { type ExtensionMetadata } from "@components/ts/IDBManager";
// let idb = IDBManager.GetIDB();
// if (!(idb instanceof IDBDatabase)) {
// idb = await loadIndexedDB();
// }
// let store = IDBManager.GetStore("InstalledExtensions", "readonly");
// store.getAll().onsuccess = (event) => {
// const result = (event.target as IDBRequest).result;
// if (result) {
// result.forEach((extension: ExtensionMetadata) => {
// if (extension.type === "theme" && extension.themeName) {
// // Create a dropdown item for the theme
// addThemeToDropdown(extension);
// }
// });
// }
// };
// async function loadIndexedDB(): Promise<IDBDatabase> {
// return new Promise((resolve, reject) => {
// const load = IDBManager.loadIDB("AluDB", 1);
// load.onsuccess = () => {
// const db = load.result;
// IDBManager.SetIDB(db);
// resolve(idb);
// };
// });
// }
// function addThemeToDropdown(extension: ExtensionMetadata) {
// let dropdown = document.getElementById("dropdown__selected-theme-menu");
// if (dropdown) {
// let themeItem = document.createElement("li");
// themeItem.classList.add("dropdown-item");
// themeItem.dataset.setting = extension.themeName;
// themeItem.textContent = extension.title!;
// dropdown.appendChild(themeItem);
// themeItem.addEventListener("click", () => {
// localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: extension.title, value: extension.themeName }));
// });
// } else {
// setTimeout(() => {
// addThemeToDropdown(extension);
// }, 1000);
// }
// }
</script>

35
src/components/ThemeLoader.astro
View file

@ -1,4 +1,5 @@
<script>
function switchTheme() {
let currentTheme = localStorage.getItem("alu__selectedTheme");
@ -8,9 +9,43 @@
if (footer) {
footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
}
} else {
localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: "Alu", value: "alu" }));
switchTheme();
}
}
switchTheme();
document.addEventListener("astro:after-swap", switchTheme);
import IDBManager, { type ExtensionMetadata } from "@components/ts/IDBManager";
const idb = IDBManager.loadIDB("AluDB", 1);
idb.onsuccess = () => {
const db = idb.result;
IDBManager.SetIDB(db);
let store = IDBManager.GetStore("InstalledExtensions", "readonly");
store.getAll().onsuccess = (event) => {
const result = (event.target as IDBRequest).result;
if (result) {
result.forEach((extension: ExtensionMetadata) => {
if (extension.type === "theme" && extension.themeName) {
// Load theme CSS
window.loadedThemeAtob = atob(extension.scriptCopy!);
loadStyleFromAtob();
document.addEventListener("astro:after-swap", () => {
loadStyleFromAtob();
});
}
});
}
};
}
function loadStyleFromAtob() {
const style = document.createElement("style");
style.textContent = window.loadedThemeAtob;
document.head.appendChild(style);
}
</script>

2
src/components/UI/Dropdown.astro
View file

@ -19,7 +19,7 @@ const { buttonNameDefault, dropdownList, id, localStorageKey } = Astro.props;
}
</ul>
</div>
<style>
<style is:global>
.dropdown {
box-shadow: 4px 6px 15px 0px var(--background-color);
border-bottom-left-radius: 10px;

16
src/components/ts/IDBManager.ts
View file

@ -1,3 +1,19 @@
type VALID_EXT_TYPES = "serviceWorker" | "theme" | "page";
export interface ExtensionMetadata {
title: string;
// TODO: Add description to the manifest
// description: string;
// Versions should follow semantic versioning
version: string;
script: string;
entryNamespace?: string;
entryFunc?: string;
scriptCopy: string | null;
type: VALID_EXT_TYPES;
themeName?: string;
}
export let CurrentIDB: IDBDatabase;
export function loadIDB(name: string, version: number) {

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

@ -11,6 +11,8 @@ declare global {
};
loadFormContent: Function | null;
loadSelectedTransport: Function | null;
loadedThemeAtob: string;
idb: IDBDatabase;
}
}

71
src/components/ts/marketplace.ts
View file

@ -2,30 +2,17 @@ import "notyf/notyf.min.css";
import { Notyf } from "notyf";
import marketplaceManifest from "../../json/marketplace.json";
const installButtons = document.getElementsByClassName("btn-install");
import IDBManager from "./IDBManager";
import IDBManager, { type ExtensionMetadata } from "./IDBManager";
type VALID_EXT_TYPES = "serviceWorker" | "theme" | "page";
// This just makes it shorter to type
interface HTMLButton extends HTMLButtonElement {}
interface ExtensionMetadata {
title: string;
// TODO: Add description to the manifest
// description: string;
// Versions should follow semantic versioning
version: string;
script: string;
entryNamespace?: string;
entryFunc?: string;
scriptCopy: string | null;
type: VALID_EXT_TYPES;
themeName?: string;
}
enum EXT_RETURN {
INSTALL_SUCCESS = 0,
ACTION_SUCCESS = 0,
INSTALL_FAILED = -1,
ALREADY_INSTALLED = 1,
}
@ -54,7 +41,7 @@ Array.from(installButtons).forEach((btn) => {
let notifMessage: string;
let timeout = 2000;
switch (ret.code) {
case EXT_RETURN.INSTALL_SUCCESS:
case EXT_RETURN.ACTION_SUCCESS:
notifMessage = `Installed ${title} Successfully!`;
// Unregister the service worker if it's a service worker
if (obj.type === "serviceWorker") {
@ -82,8 +69,8 @@ Array.from(installButtons).forEach((btn) => {
notification.options.duration = 2000;
notification.success(notifMessage);
setTimeout(() => {
notification.success(`Please refresh the page to see the changes!`);
}, 200)
window.location.reload();
}, 1000)
notification.options.duration = 999999;
let btn = document.querySelector(`button[data-slug="${ret.slug}"]`) as HTMLButton;
setInstallBtnText(btn);
@ -125,7 +112,7 @@ async function installExtension(ext: ExtensionMetadata, slug: string): Promise<I
reject({ code: EXT_RETURN.INSTALL_FAILED, slug: slug });
};
addRequest.onsuccess = () => {
resolve({ code: EXT_RETURN.INSTALL_SUCCESS, slug: slug });
resolve({ code: EXT_RETURN.ACTION_SUCCESS, slug: slug });
};
}
};
@ -145,7 +132,7 @@ document.querySelectorAll("button[data-uninstall-slug]").forEach((btn) => {
ripple: true,
});
switch (uninst.code) {
case EXT_RETURN.INSTALL_SUCCESS:
case EXT_RETURN.ACTION_SUCCESS:
notification.success(`Uninstalled ${uninst.title}!`);
let btn = document.querySelector(`button[data-slug="${uninst.slug}"]`) as HTMLButton;
btn.disabled = false;
@ -171,20 +158,36 @@ async function uninstallExtension(slug: string): Promise<InstallReturn> {
const request = IDBManager.GetIDB();
const transaction = request.transaction("InstalledExtensions", "readwrite");
const store = transaction.objectStore("InstalledExtensions");
const deleteRequest = store.delete(slug);
deleteRequest.onerror = () => {
console.error(`Error uninstalling ${slug}!`);
reject({ code: EXT_RETURN.INSTALL_FAILED, slug: slug, title: slug });
};
deleteRequest.onsuccess = () => {
navigator.serviceWorker.getRegistration().then((reg) => {
if (reg) {
reg.unregister().then(() => {
console.log("Service worker unregistered!");
});
let ext = store.get(slug);
ext.onsuccess = async () => {
if (ext.result == null) {
reject({ code: EXT_RETURN.INSTALL_FAILED, slug: slug });
}
if (ext.result.type === "theme") {
let currTheme = localStorage.getItem("alu__selectedTheme");
if (currTheme) {
if (JSON.parse(currTheme!).value == ext.result.themeName) {
console.log("Reverting theme to default!")
localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: "Alu", value: "alu" }));
}
}
});
resolve({ code: EXT_RETURN.INSTALL_SUCCESS, slug: slug, title: slug });
}
const deleteRequest = store.delete(slug);
deleteRequest.onerror = () => {
console.error(`Error uninstalling ${slug}!`);
reject({ code: EXT_RETURN.INSTALL_FAILED, slug: slug, title: slug });
};
deleteRequest.onsuccess = () => {
navigator.serviceWorker.getRegistration().then((reg) => {
if (reg) {
reg.unregister().then(() => {
console.log("Service worker unregistered!");
});
}
});
resolve({ code: EXT_RETURN.ACTION_SUCCESS, slug: slug, title: ext.result.title });
};
};
});
};

2
src/json/marketplace.json
View file

@ -13,7 +13,7 @@
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "style",
"type": "theme",
"themeName": "oled"
}
}

3
src/layouts/Layout.astro
View file

@ -69,6 +69,9 @@ const { title, optionalPreloads } = Astro.props;
<Footer />
<style is:global>
:root {
--background-color: black;
}
[data-theme="alu"] {
--background-color: #211d29;
--background-highlight: #35314a;
--accent-color: #624978;

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

@ -55,8 +55,15 @@ export function getStaticPaths() {
<div id="current-content"></div>
</div>
</main>
<script>
import IDBManager, { type ExtensionMetadata } from "@components/ts/IDBManager";
let load = IDBManager.loadIDB("AluDB", 1);
load.onsuccess = () => {
window.idb = IDBManager.GetIDB();
};
</script>
<script is:inline>
window.loadedContentStorage = {};
loadedContentStorage = {};
window.currentlySelectedTab;
function settingsLoad() {
document.addEventListener("astro:before-swap", () => {
@ -67,7 +74,7 @@ export function getStaticPaths() {
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
let contentToLoad = document.getElementById("content-" + tab.id);
if (contentToLoad) {
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
loadedContentStorage[tab.id] = contentToLoad.innerHTML;
contentToLoad.remove();
}
@ -83,7 +90,7 @@ export function getStaticPaths() {
if (currentContent) {
currentContent.style.opacity = "0";
setTimeout(() => {
currentContent.innerHTML = window.loadedContentStorage[tabID];
currentContent.innerHTML = loadedContentStorage[tabID];
currentContent.style.opacity = "1";
document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
@ -193,17 +200,44 @@ export function getStaticPaths() {
});
}
function addThemeToDropdown(extension) {
let dropdown = document.getElementById("dropdown__selected-theme-menu");
if (dropdown) {
let themeItem = document.createElement("li");
themeItem.classList.add("dropdown-item");
themeItem.dataset.setting = extension.themeName;
themeItem.textContent = extension.title;
dropdown.appendChild(themeItem);
} else {
setTimeout(() => {
addThemeToDropdown(extension);
}, 1000);
}
}
document.addEventListener("setting-tabChange", determineListener);
loadContent("setting-tab-proxy");
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);
let 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");
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() {