From 1a1afd4a7ccefed302dcabddffb2ce33d72da3f4 Mon Sep 17 00:00:00 2001
From: zumbiepig <121742281+zumbiepig@users.noreply.github.com>
Date: Thu, 5 Sep 2024 15:50:27 -0700
Subject: [PATCH] .

---
 src/resources/scripts/main.ts | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index 72f826f..9735257 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -1,8 +1,8 @@
 import { gt, coerce } from 'semver';
 import { inflate, deflate } from 'pako';
 
-let selectedVersion: string;
-let articleClosing = false;
+let selectedVersion: string | undefined = undefined;
+let articleAnimationLock = false;
 
 const theme = {
 	load: function (themeToLoad?: string) {
@@ -157,20 +157,28 @@ const article = {
 	open: function (articleId: string) {
 		const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
 		if (modal) {
+			articleAnimationLock = true;
 			modal.style.animation = 'article-open 0.5s ease-in-out';
 			modal.style.display = 'flex';
-			const closeArticleHandler = (event: Event) => {
-				if (event.target === modal) {
-					modal.removeEventListener('click', closeArticleHandler);
-					article.close(articleId);
-				}
-			};
-			modal.addEventListener('click', closeArticleHandler);
+			modal.addEventListener(
+				'animationend',
+				() => {
+					articleAnimationLock = false;
+					const closeArticleHandler = (event: Event) => {
+						if (event.target === modal) {
+							modal.removeEventListener('click', closeArticleHandler);
+							article.close(articleId);
+						}
+					};
+					modal.addEventListener('click', closeArticleHandler);
+				},
+				{ once: true }
+			);
 		}
 	},
 	close: function (articleId: string) {
-		if (!articleClosing) {
-			articleClosing = true;
+		if (!articleAnimationLock) {
+			articleAnimationLock = true;
 			const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
 			if (modal) {
 				modal.style.animation = 'article-close 0.5s ease-in-out';
@@ -178,7 +186,7 @@ const article = {
 					'animationend',
 					() => {
 						modal.style.display = 'none';
-						articleClosing = false;
+						articleAnimationLock = false;
 					},
 					{ once: true }
 				);