From 59845e4e54756e9e5b910efa8cab501fbbe229cb Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sun, 4 Aug 2024 00:41:16 +0100
Subject: [PATCH] Added Archive element.

---
 frontend/src/lib/components/archive.svelte | 145 +++++++++++++++++++++
 frontend/src/lib/components/search.svelte  |   2 +-
 frontend/src/lib/css/archive.css           |  48 +++++++
 frontend/src/routes/style/+page.svelte     |   7 +-
 4 files changed, 199 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/archive.svelte
 create mode 100644 frontend/src/lib/css/archive.css

diff --git a/frontend/src/lib/components/archive.svelte b/frontend/src/lib/components/archive.svelte
new file mode 100644
index 0000000..08ebbac
--- /dev/null
+++ b/frontend/src/lib/components/archive.svelte
@@ -0,0 +1,145 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/archive.css';
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiChevronRight, mdiHomeVariantOutline } from '@mdi/js';
+	import anime from 'animejs';
+
+	export let fontPost = 1;
+	export let paddingPost = 0.5;
+	const posts = {
+		'Août 2024': [
+			'Est-ce que le lorem est Ipsum ?',
+			"J'aime bien le jeu Minecraft",
+			'Comment Installer Linus Torvalds sur sa tablette',
+			'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
+			"Peut-on vivre dans une maison en pain d'épices ?"
+		],
+		'Juillet 2024': [
+			'Les secrets du café qui ne refroidit jamais',
+			'Comment devenir un ninja en 10 leçons faciles',
+			'La vérité derrière les licornes: Mythe ou réalité ?',
+			"J'ai adopté un dragon, voici ce qui s'est passé"
+		],
+		'Juin 2024': [
+			'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
+			'La recette secrète de la pizza à la glace',
+			'Comment devenir un expert en pirouettes en 5 jours'
+		],
+		'Mai 2024': [
+			'Mon voyage au centre de la Terre en montgolfière',
+			'Pourquoi les pandas devraient être vos nouveaux colocataires',
+			'Les chats dominent-ils vraiment Internet ?'
+		]
+	};
+
+	const size = Object.keys(posts).length;
+	let archiveRefs = Array(size);
+	let archivePostRefs = Array(size);
+	let containerRef;
+
+	let isActive = Array(size).fill(false);
+	let indexArchive = -1;
+
+	function toggleArchive(date, index) {
+		const archive = archiveRefs[index];
+		const archivePost = archivePostRefs[index];
+		const svg = archiveRefs[index].children[1];
+		const rvalue = isActive[index] ? [90, 0] : [0, 90];
+		const ovalue = isActive[index] ? [1, 0] : [0, 1];
+		const shadow = isActive[index] ? '' : '0px 8px 18px -1px rgba(52, 42, 58, 0.2)';
+		const mbvalue = isActive[index] ? [0.5, 0] : [0, 0.5];
+		const hvalue = isActive[index]
+			? [posts[date].length * (2 * paddingPost + fontPost + 0.5), 0]
+			: [0, posts[date].length * (2 * paddingPost + fontPost + 0.5)];
+
+		isActive[index] = isActive[index] ? false : true;
+
+		if (!isActive[index]) {
+			indexArchive = -1;
+			archivePost.style.opacity = '0';
+		} else {
+			indexArchive = index;
+			archivePost.style.display = 'block';
+		}
+
+		anime({
+			targets: { transform: rvalue[0], opacity: ovalue[0], margin: mbvalue[0], height: hvalue[0] },
+			transform: rvalue,
+			opacity: ovalue,
+			margin: mbvalue,
+			height: hvalue,
+			duration: 300,
+			easing: 'easeInOutQuad',
+			update: function (anim) {
+				svg.style.transform = `rotate(${anim.animations[0].currentValue}deg)`;
+				archive.style.background = `linear-gradient(90deg, rgba(65,53,67,${anim.animations[1].currentValue}) 0%, rgba(38,28,44,${anim.animations[1].currentValue}) 100%)`;
+				archive.style.boxShadow = shadow;
+				archive.style.marginBottom = `${anim.animations[2].currentValue}rem`;
+				archivePost.style.height = `${anim.animations[3].currentValue}rem`;
+			},
+			complete: function () {
+				if (!isActive[index]) {
+					archivePost.style.display = 'none';
+					return;
+				}
+				anime({
+					targets: archivePost,
+					opacity: ovalue,
+					duration: 300,
+					easing: 'easeOutQuad'
+				});
+			}
+		});
+		anime({
+			targets: archive,
+			color: isActive[index] ? '#F8F1F1' : '#261C2C',
+			duration: 200,
+			easing: 'easeInOutQuad'
+		});
+
+		if (isActive[index]) {
+			scrollToPosition();
+		}
+	}
+
+	function scrollToPosition() {
+		const rect = containerRef.getBoundingClientRect().top + window.scrollY;
+		console.log(rect);
+		window.scrollTo({
+			top: rect,
+			behavior: 'smooth'
+		});
+	}
+</script>
+
+<div
+	class="archive-container"
+	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem;"
+	bind:this={containerRef}
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	{#each Object.keys(posts) as date, index}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			bind:this={archiveRefs[index]}
+			class="archive"
+			on:click={() => {
+				if (indexArchive != -1 && indexArchive != index) {
+					toggleArchive(date, indexArchive);
+				}
+				toggleArchive(date, index);
+			}}
+		>
+			<span>{date}</span>
+			<SvgIcon type="mdi" path={mdiChevronRight}></SvgIcon>
+		</div>
+		<div bind:this={archivePostRefs[index]} class="archive-post">
+			{#each posts[date] as p}
+				<div>
+					<span>{p}</span>
+				</div>
+			{/each}
+		</div>
+	{/each}
+</div>
diff --git a/frontend/src/lib/components/search.svelte b/frontend/src/lib/components/search.svelte
index b06b1c1..a1db255 100644
--- a/frontend/src/lib/components/search.svelte
+++ b/frontend/src/lib/components/search.svelte
@@ -3,7 +3,7 @@
 	import '$lib/css/search.css';
 
 	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
-	import { mdiContentSavePlusOutline, mdiMagnify } from '@mdi/js';
+	import { mdiMagnify } from '@mdi/js';
 	import anime from 'animejs';
 
 	let div_search;
diff --git a/frontend/src/lib/css/archive.css b/frontend/src/lib/css/archive.css
new file mode 100644
index 0000000..e47ca43
--- /dev/null
+++ b/frontend/src/lib/css/archive.css
@@ -0,0 +1,48 @@
+.archive-container {
+    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+    /* For now */
+    width: 50%;
+    border-radius: 1rem;
+    color: var(--color-text);
+}
+
+.archive {
+    font-family: 'JetBrains Mono';
+    font-size: 1.2rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: 1rem;
+}
+
+.archive-post {
+    font-family: 'JetBrains Mono';
+    font-size: var(--font-post);
+    padding-left: 1rem;
+    color: var(--color-subtext);
+    opacity: 0;
+    height: 0px;
+    display: none;
+}
+
+.archive-post span {
+    /* Overflow */
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+}
+
+.archive-post span:hover {
+    color: var(--palette-pink);
+    text-decoration: underline 2px;
+    cursor: pointer;
+}
+
+.archive-post div {
+    padding: var(--padding-post);
+}
\ No newline at end of file
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte
index 9c48de3..2df61a8 100644
--- a/frontend/src/routes/style/+page.svelte
+++ b/frontend/src/routes/style/+page.svelte
@@ -6,6 +6,7 @@
 
 	import Post from '$lib/components/post-min.svelte';
 	import Search from '$lib/components/search.svelte';
+	import Archive from '$lib/components/archive.svelte';
 </script>
 
 <div class="base">
@@ -26,9 +27,11 @@
 		date="26/07/2024"
 	/>
 	<div class="blank"></div>
-	<Post/>
-	<div class="blank"></div>
 	<Search/>
 	<div class="blank"></div>
 	<Post/>
+	<div class="blank"></div>
+	<Archive/>
+	<div class="blank"></div>
+	<div class="blank"></div>
 </div>