Migrate window.loadedContentStorage and window.currentlySelectedTab to Alu namespace vars.
This commit is contained in:
parent
2fc7f56b47
commit
73077c7565
3 changed files with 18 additions and 16 deletions
7
src/alu.d.ts
vendored
7
src/alu.d.ts
vendored
|
|
@ -1,6 +1,13 @@
|
||||||
export declare global {
|
export declare global {
|
||||||
namespace Alu {
|
namespace Alu {
|
||||||
let store: AluStore;
|
let store: AluStore;
|
||||||
|
// Settings Content Store (orig. window.loadedContentStorage)
|
||||||
|
let settings: {
|
||||||
|
contentStore: {
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
currentPage: string;
|
||||||
|
}
|
||||||
|
|
||||||
type DefaultKeys = {
|
type DefaultKeys = {
|
||||||
[key: string]: AluKey;
|
[key: string]: AluKey;
|
||||||
|
|
|
||||||
|
|
@ -158,21 +158,15 @@ const { title, optionalPreloads } = Astro.props;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
body,
|
|
||||||
html {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
font-family: "Varela Round", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "Varela Round", sans-serif;
|
||||||
}
|
}
|
||||||
body > * {
|
body > * {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
||||||
|
|
@ -56,16 +56,16 @@ export function getStaticPaths() {
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
window.loadedContentStorage = {};
|
Alu.settings.contentStore = {};
|
||||||
window.currentlySelectedTab;
|
Alu.settings.currentPage;
|
||||||
function settingsLoad() {
|
function settingsLoad() {
|
||||||
document.addEventListener("astro:before-swap", () => {
|
document.addEventListener("astro:before-swap", () => {
|
||||||
window.currentlySelectedTab = "";
|
Alu.settings.currentPage = "";
|
||||||
});
|
});
|
||||||
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
||||||
const contentToLoad = document.getElementById("content-" + tab.id);
|
const contentToLoad = document.getElementById("content-" + tab.id);
|
||||||
if (contentToLoad) {
|
if (contentToLoad) {
|
||||||
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
|
Alu.settings.contentStore[tab.id] = contentToLoad.innerHTML;
|
||||||
contentToLoad.remove();
|
contentToLoad.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -75,13 +75,14 @@ export function getStaticPaths() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function loadContent(tabID) {
|
function loadContent(tabID) {
|
||||||
if (window.currentlySelectedTab == tabID) return;
|
let curTabID = Alu.settings.currentPage
|
||||||
else window.currentlySelectedTab = tabID;
|
if (curTabID == tabID) return;
|
||||||
|
else curTabID = 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 = Alu.settings.contentStore[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);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue