From 11c6ee1fb5b00486bfc69da88d18b672b19384c5 Mon Sep 17 00:00:00 2001
From: Justin Cano <jstncno@gmail.com>
Date: Sat, 18 May 2024 00:01:05 -0700
Subject: [PATCH] Implement fullscreen toggle

---
 src/components/ArtCard.astro  | 63 +++++++++++++++++++++++++++++++++++
 src/components/BlogCard.astro |  1 -
 src/layouts/Layout.astro      |  1 +
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/components/ArtCard.astro b/src/components/ArtCard.astro
index 23c8262..016c44e 100644
--- a/src/components/ArtCard.astro
+++ b/src/components/ArtCard.astro
@@ -1,11 +1,22 @@
+---
+import {Icon} from 'astro-icon/components';
+---
+
 <div class="art-card">
   <slot />
+	<div class="exit-fullscreen button-container">
+		<Icon name="mdi:fullscreen-exit" size={24} />
+	</div>
+	<div class="fullscreen button-container">
+		<Icon name="mdi:fullscreen" size={24} />
+	</div>
 </div>
 
 <style>
 	div.art-card {
     /* Mobile first */
 		height: 120vw;
+		position: relative;
 		width: 100%;
 
 		@media only screen and (min-width: 768px) {
@@ -14,4 +25,56 @@
 			overflow: hidden;
 		}
 	}
+
+	div.art-card div.button-container {
+		background-color: var(--panel-color);
+		border-radius: 3px;
+		bottom: 0.5rem;
+		cursor: pointer;
+		display: flex;
+		right: 0.5rem;
+		position: absolute;
+	}
+	div.art-card div.button-container svg {
+		margin: auto;
+	}
 </style>
+
+<script>
+	function setFullScreenListeners() {
+		const card = document.querySelector('div.art-card');
+		card?.addEventListener('click', () => toggleFullScreen(card));
+	}
+
+	function isFullScreen(el: Element|null): boolean {
+		if (!el) return false;
+		return window.innerWidth === el.clientWidth &&
+			window.innerHeight === el.clientHeight;
+	}
+
+	function toggleFullScreen(el: Element|null) {
+		if (!el) return;
+		if (!isFullScreen(el)) {
+			el.requestFullscreen().catch(reason => console.error(reason));
+		} else {
+			document.exitFullscreen();
+		}
+	}
+
+	addEventListener('fullscreenchange', (event) => {
+		const card = document.querySelector('div.art-card');
+		if (!card) return;
+		const icon = card.querySelector('div.fullscreen.button-container') as HTMLElement;
+		if (!icon) return;
+		if (isFullScreen(card)) icon.style.visibility = 'hidden';
+		else icon.style.visibility = 'initial';
+
+		const iframe = card.querySelector('iframe');
+		if (!iframe) return;
+		setTimeout(() => iframe.src = iframe.src);
+	});
+
+	document.addEventListener('astro:after-swap', () => setFullScreenListeners());
+
+	setFullScreenListeners();
+</script>
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
index 5a16952..6cfdc85 100644
--- a/src/components/BlogCard.astro
+++ b/src/components/BlogCard.astro
@@ -25,7 +25,6 @@ const {links} = Astro.props;
 <style>
 	:root {
     --font-color: #4b4b4b;
-		--panel-color: #fbf9f5;
 	}
 
 	div.blog-card {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b569cd4..714d0be 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -34,6 +34,7 @@ const favicon = `${import.meta.env.BASE_URL}/favicon.svg`;
 		--background-color: rgb(82, 107, 92);
 		--font-color: black;
 		--footer-height: 200px;
+		--panel-color: #fbf9f5;
 		--subtitle-color: rgb(36 47 40);
 	}
 	html {