.

src/resources/scripts/main.ts

@@ -1,8 +1,8 @@
 import { gt, coerce } from 'semver';
 import { inflate, deflate } from 'pako';
 
-let selectedVersion: string;
+let selectedVersion: string | undefined = undefined;
-let articleClosing = false;
+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) => {
+			modal.addEventListener(
-				if (event.target === modal) {
+				'animationend',
-					modal.removeEventListener('click', closeArticleHandler);
+				() => {
-					article.close(articleId);
+					articleAnimationLock = false;
-				}
+					const closeArticleHandler = (event: Event) => {
-			};
+						if (event.target === modal) {
-			modal.addEventListener('click', closeArticleHandler);
+							modal.removeEventListener('click', closeArticleHandler);
+							article.close(articleId);
+						}
+					};
+					modal.addEventListener('click', closeArticleHandler);
+				},
+				{ once: true }
+			);
 		}
 	},
 	close: function (articleId: string) {
-		if (!articleClosing) {
+		if (!articleAnimationLock) {
-			articleClosing = true;
+			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 }
 				);