From 71a3a812d2e6957ae856f666034e45c1f3e9c916 Mon Sep 17 00:00:00 2001
From: zumbiepig <121742281+zumbiepig@users.noreply.github.com>
Date: Thu, 5 Sep 2024 14:32:58 -0700
Subject: [PATCH] add tutorial open and close animation

---
 public/articles/index.html                 |  8 +++---
 public/resources/styles/themes/default.css | 29 +++++++++++++++++++++-
 src/resources/scripts/main.ts              | 14 ++++++++---
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/public/articles/index.html b/public/articles/index.html
index 365517f..0782a78 100644
--- a/public/articles/index.html
+++ b/public/articles/index.html
@@ -66,7 +66,7 @@
 							<div class="article-item" onclick="article.open('cloudflare-tunnel')">
 								<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
 								<div class="article-details">
-									<strong class="article-name">How To Make A Cloudflare Tunnel Domain</strong>
+									<strong class="article-name">How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
 									<p class="article-description">This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
 								</div>
 							</div>
@@ -88,7 +88,7 @@
 		</div>
 		<div id="article-mc-server" class="article">
 			<div class="article-content">
-				<span class="close-button" onclick="article.close()">&times;</span>
+				<span class="close-button" onclick="article.close('mc-server')">&times;</span>
 				<h1>How To Make An Eaglercraft Server</h1>
 				<h5>Written by ServerDotSo and revised by zumbiepig</h5>
 				<p>Have you ever wondered how to make an Eaglercraft Server?</p>
@@ -168,8 +168,8 @@
 		</div>
 		<div id="article-cloudflare-tunnel" class="article">
 			<div class="article-content">
-				<span class="close-button" onclick="article.close()">&times;</span>
-				<h1>How to Set Up A Cloudflare Tunnel for Eaglercraft Server</h1>
+				<span class="close-button" onclick="article.close('cloudflare-tunnel')">&times;</span>
+				<h1>How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
 				<h5>Written by zumbiepig and SpeedSlicer</h5>
 				<p>In this guide, we'll walk you through the steps to set up a Cloudflare Tunnel for your Eaglercraft server, which is running on <code>ws://localhost:8081</code>.</p>
 				<h3>Prerequisites</h3>
diff --git a/public/resources/styles/themes/default.css b/public/resources/styles/themes/default.css
index ffab536..76803dd 100644
--- a/public/resources/styles/themes/default.css
+++ b/public/resources/styles/themes/default.css
@@ -353,7 +353,6 @@ nav {
 	0% {
 		transform: scale(1);
 	}
-
 	100% {
 		transform: scale(1.1);
 	}
@@ -777,6 +776,34 @@ nav {
 	align-items: center;
 }
 
+@keyframes openArticle {
+	0% {
+		opacity: 0;
+		scale: 0;
+	}
+	80% {
+		scale: 1.1;
+	}
+	100% {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes closeArticle {
+	0% {
+		opacity: 1;
+		scale: 1;
+	}
+	20% {
+		scale: 1.1;
+	}
+	100% {
+		opacity: 0;
+		scale: 0;
+	}
+}
+
 .article .article-content {
 	background-color: #333;
 	padding: 20px;
diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index 976b867..7281f2a 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -155,11 +155,17 @@ const navigate = {
 const article = {
 	open: function (articleId: string) {
 		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
-		if (modal) modal.style.display = 'flex';
+		if (modal) {
+			modal.style.animation = 'openArticle 0.5s ease-in-out';
+			modal.style.display = 'flex';
+		}
 	},
-	close: function () {
-		const modals = document.querySelectorAll(`.article`);
-		modals.forEach((modal) => ((modal as HTMLElement).style.display = 'none'));
+	close: function (articleId: string) {
+		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
+		if (modal) {
+			modal.style.animation = 'closeArticle 0.5s ease-in-out';
+			modal.addEventListener('animationend', () => (modal.style.display = 'none'), { once: true });
+		}
 	},
 };