mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for View Transitions. Fix issue #290

Browse Source
This commit is contained in:
prototypa
2023-12-03 12:12:49 -05:00
parent dfcccf436b
commit 132788934f
2 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/common/BasicScripts.astro
View File

@ -3,6 +3,12 @@ import { UI } from '~/utils/config';
--- ---
<script is:inline define:vars={{ defaultTheme: UI.theme }}> <script is:inline define:vars={{ defaultTheme: UI.theme }}>
if (window.basic_script) {
return;
}
window.basic_script = true;
function applyTheme(theme) { function applyTheme(theme) {
if (theme === 'dark') { if (theme === 'dark') {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
@ -31,28 +37,28 @@ import { UI } from '~/utils/config';
} }
} }
window.onload = function () { const onLoad = function () {
let lastKnownScrollPosition = window.scrollY; let lastKnownScrollPosition = window.scrollY;
let ticking = true; let ticking = true;
attachEvent('#header nav', 'click', function () { attachEvent('#header nav', 'click', function () {
document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded"); document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
document.body.classList.remove("overflow-hidden"); document.body.classList.remove('overflow-hidden');
document.getElementById("header")?.classList.remove("h-screen"); document.getElementById('header')?.classList.remove('h-screen');
document.getElementById("header")?.classList.remove("expanded"); document.getElementById('header')?.classList.remove('expanded');
document.getElementById("header")?.classList.remove("bg-page"); document.getElementById('header')?.classList.remove('bg-page');
document.querySelector("#header nav")?.classList.add("hidden"); document.querySelector('#header nav')?.classList.add('hidden');
document.querySelector("#header > div > div:last-child")?.classList.add("hidden"); document.querySelector('#header > div > div:last-child')?.classList.add('hidden');
}); });
attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) { attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
elem.classList.toggle("expanded"); elem.classList.toggle('expanded');
document.body.classList.toggle("overflow-hidden"); document.body.classList.toggle('overflow-hidden');
document.getElementById("header")?.classList.toggle("h-screen"); document.getElementById('header')?.classList.toggle('h-screen');
document.getElementById("header")?.classList.toggle("expanded"); document.getElementById('header')?.classList.toggle('expanded');
document.getElementById("header")?.classList.toggle("bg-page"); document.getElementById('header')?.classList.toggle('bg-page');
document.querySelector("#header nav")?.classList.toggle("hidden"); document.querySelector('#header nav')?.classList.toggle('hidden');
document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden"); document.querySelector('#header > div > div:last-child')?.classList.toggle('hidden');
}); });
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () { attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@ -97,7 +103,7 @@ import { UI } from '~/utils/config';
}); });
function appyHeaderStylesOnScroll() { function appyHeaderStylesOnScroll() {
const header = document.querySelector("#header[data-aw-sticky-header]"); const header = document.querySelector('#header[data-aw-sticky-header]');
if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) { if (lastKnownScrollPosition > 60 && !header.classList.contains('scroll')) {
document.getElementById('header').classList.add('scroll'); document.getElementById('header').classList.add('scroll');
} else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) { } else if (lastKnownScrollPosition <= 60 && header.classList.contains('scroll')) {
@ -118,16 +124,23 @@ import { UI } from '~/utils/config';
} }
}); });
}; };
const onPageShow = function () {
window.onpageshow = function () {
document.documentElement.classList.add('motion-safe:scroll-smooth'); document.documentElement.classList.add('motion-safe:scroll-smooth');
const elem = document.querySelector('[data-aw-toggle-menu]'); const elem = document.querySelector('[data-aw-toggle-menu]');
if (elem) { if (elem) {
elem.classList.remove('expanded'); elem.classList.remove('expanded');
} }
document.body.classList.remove("overflow-hidden"); document.body.classList.remove('overflow-hidden');
document.getElementById("header")?.classList.remove("h-screen"); document.getElementById('header')?.classList.remove('h-screen');
document.getElementById("header")?.classList.remove("expanded"); document.getElementById('header')?.classList.remove('expanded');
document.querySelector("#header nav")?.classList.add("hidden"); document.querySelector('#header nav')?.classList.add('hidden');
}; }
window.onload = onLoad;
window.onpageshow = onPageShow;
document.addEventListener('astro:after-swap', () => {
onLoad();
onPageShow();
});
</script> </script>

19
src/layouts/Layout.astro
View File

@ -1,17 +1,20 @@
--- ---
import '~/assets/styles/tailwind.css'; import '~/assets/styles/tailwind.css';
import { I18N } from "~/utils/config"; import { I18N } from '~/utils/config';
import CommonMeta from '~/components/common/CommonMeta.astro'; import CommonMeta from '~/components/common/CommonMeta.astro';
import Favicons from '~/components/Favicons.astro'; import Favicons from '~/components/Favicons.astro';
import CustomStyles from "~/components/CustomStyles.astro" import CustomStyles from '~/components/CustomStyles.astro';
import ApplyColorMode from "~/components/common/ApplyColorMode.astro" import ApplyColorMode from '~/components/common/ApplyColorMode.astro';
import Metadata from '~/components/common/Metadata.astro'; import Metadata from '~/components/common/Metadata.astro';
import SiteVerification from "~/components/common/SiteVerification.astro" import SiteVerification from '~/components/common/SiteVerification.astro';
import Analytics from "~/components/common/Analytics.astro" import Analytics from '~/components/common/Analytics.astro';
import BasicScripts from '~/components/common/BasicScripts.astro'; import BasicScripts from '~/components/common/BasicScripts.astro';
// Uncomment line below to activate View Transitions
// import { ViewTransitions } from 'astro:transitions';
import type { MetaData as MetaDataType } from '~/types'; import type { MetaData as MetaDataType } from '~/types';
export interface Props { export interface Props {
@ -22,9 +25,8 @@ const { metadata = {} } = Astro.props;
const { language, textDirection } = I18N; const { language, textDirection } = I18N;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang={language} dir={textDirection} class="2xl:text-[20px]"> <html lang={language} dir={textDirection} class="2xl:text-[20px]">
<head> <head>
<CommonMeta /> <CommonMeta />
<Favicons /> <Favicons />
@ -33,6 +35,9 @@ const { language, textDirection } = I18N;
<Metadata {...metadata} /> <Metadata {...metadata} />
<SiteVerification /> <SiteVerification />
<Analytics /> <Analytics />
<!-- Uncomment line below to activate View Transitions -->
<!-- <ViewTransitions fallback="swap" /> -->
</head> </head>
<body class="antialiased text-default bg-page tracking-tight"> <body class="antialiased text-default bg-page tracking-tight">