From e76d8fba3ca182afe2351b6bb26f44d5894ea490 Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Thu, 26 Sep 2024 04:07:42 +0300
Subject: [PATCH] feat: reset guestbook entries anim when switching pages

---
 src/components/window.svelte      |  4 ++--
 src/routes/guestbook/+page.svelte | 13 +++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/window.svelte b/src/components/window.svelte
index 6ceaeb1..1d540d8 100644
--- a/src/components/window.svelte
+++ b/src/components/window.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import Layout from "../routes/+layout.svelte";
-
 	export let title: string;
 	export let iconUri: string = '';
+	export let id: string = '';
 
 	const scaleKeyframes = [
 		"window-open",
@@ -26,6 +25,7 @@
         bg-ralsei-black
 		animate-{chosenKeyframe}
     "
+	{id}
 >
 	<div
 		class="
diff --git a/src/routes/guestbook/+page.svelte b/src/routes/guestbook/+page.svelte
index 8c83c07..f403150 100644
--- a/src/routes/guestbook/+page.svelte
+++ b/src/routes/guestbook/+page.svelte
@@ -4,6 +4,14 @@
 	export let data;
 	$: hasPreviousPage = data.page > 1;
 	$: hasNextPage = data.hasNext;
+
+	function resetEntriesAnimation() {
+		var el = document.getElementById('guestbookentries');
+		if (el === null) { return }
+		el.style.animation = 'none';
+		el.offsetHeight; /* trigger reflow */
+		el.style.animation = ''; 
+	}
 </script>
 
 <div class="flex flex-col-reverse md:flex-row gap-2 md:gap-4">
@@ -55,7 +63,7 @@
 		</div>
 	</Window>
 	<div class="grow" />
-	<Window title="entries" iconUri="/icons/entries.png">
+	<Window id='guestbookentries' title="entries" iconUri="/icons/entries.png">
 		<div class="flex flex-col gap-2 md:gap-4 2xl:w-[60ch]">
 			{#if data.getRatelimited}
 				<p class="text-error">
@@ -95,6 +103,7 @@
 				<div class="flex flex-row w-full justify-center items-center font-monospace">
 					{#if hasPreviousPage}
 						<a href="/guestbook/?page={data.entries.length > 0 ? data.page - 1 : 1}"
+							on:click={resetEntriesAnimation}
 							>&lt;&lt; previous</a
 						>
 					{/if}
@@ -102,7 +111,7 @@
 						<div class="w-1/12" />
 					{/if}
 					{#if hasNextPage}
-						<a href="/guestbook/?page={data.page + 1}">next &gt;&gt;</a>
+						<a href="/guestbook/?page={data.page + 1}" on:click={resetEntriesAnimation}>next &gt;&gt;</a>
 					{/if}
 				</div>
 			{/if}