kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: JavaScript errors

Browse Source
This commit is contained in:
Stefan Imhoff
2025-01-04 17:25:09 +01:00
parent 6e36071dcd
commit a7312cb106
3 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Pagination.astro
View File

@@ -45,29 +45,39 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
) )
} }
<script is:inline> <script>
const body = document.body; function initializeScrollListener() {
const scrollUp = 'scroll-up'; const body = document.body;
const scrollDown = 'scroll-down'; const scrollUp = 'scroll-up';
let lastScroll = 0; const scrollDown = 'scroll-down';
let lastScroll = 0;
window.addEventListener('scroll', () => { const scrollHandler = () => {
const currentScroll = window.pageYOffset; const currentScroll = window.pageYOffset;
if (currentScroll <= 0) { if (currentScroll <= 0) {
body.classList.remove(scrollUp); body.classList.remove(scrollUp);
return; return;
} }
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) { if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
body.classList.remove(scrollUp); body.classList.remove(scrollUp);
body.classList.add(scrollDown); body.classList.add(scrollDown);
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) { } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
body.classList.remove(scrollDown); body.classList.remove(scrollDown);
body.classList.add(scrollUp); body.classList.add(scrollUp);
} }
lastScroll = currentScroll; lastScroll = currentScroll;
}); };
window.addEventListener('scroll', scrollHandler);
}
// Initialize on load
initializeScrollListener();
// Re-initialize after view transitions
document.addEventListener('astro:after-swap', initializeScrollListener);
</script> </script>
<style is:global> <style is:global>

39
src/components/ThemeToggle.astro
View File

@@ -23,29 +23,32 @@ import { Circle } from './icons';
// Remove no-js class after transitions // Remove no-js class after transitions
document.documentElement.classList.remove('no-js'); document.documentElement.classList.remove('no-js');
class ThemeToggle extends HTMLElement { // Only define the custom element if it hasn't been defined yet
constructor() { if (!customElements.get('theme-toggle')) {
super(); class ThemeToggle extends HTMLElement {
const button = this.querySelector('button')!; constructor() {
const setTheme = (dark: boolean) => { super();
document.documentElement.classList[dark ? 'add' : 'remove']('dark'); const button = this.querySelector('button')!;
button.setAttribute('aria-pressed', String(dark)); const setTheme = (dark: boolean) => {
}; document.documentElement.classList[dark ? 'add' : 'remove']('dark');
button.setAttribute('aria-pressed', String(dark));
};
button.addEventListener('click', () => { button.addEventListener('click', () => {
setTheme(!this.isDark()); setTheme(!this.isDark());
button.blur(); button.blur();
}); });
setTheme(this.isDark()); setTheme(this.isDark());
}
isDark() {
return document.documentElement.classList.contains('dark');
}
} }
isDark() { customElements.define('theme-toggle', ThemeToggle);
return document.documentElement.classList.contains('dark');
}
} }
customElements.define('theme-toggle', ThemeToggle);
} }
// Run on initial load // Run on initial load

3
src/layouts/BaseLayout.astro
View File

@@ -155,7 +155,7 @@ const webManifest = isProduction && {
document.documentElement.classList.remove('no-js'); document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js'); document.documentElement.classList.add('js');
</script> </script>
<ViewTransitions />
<ThemeProvider /> <ThemeProvider />
{ {
isProduction && ( isProduction && (
@@ -166,7 +166,6 @@ const webManifest = isProduction && {
/> />
) )
} }
<ViewTransitions />
<Scripts /> <Scripts />
</head> </head>
<body <body