From 11e1f4593ab1025a49149fa8da7bb73aa72f615a Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Thu, 1 Aug 2024 23:31:24 +0100
Subject: [PATCH] Added search bar.

---
 frontend/src/lib/components/post-min.svelte   |   8 +-
 frontend/src/lib/components/search.svelte     | 107 ++++++++++++++++++
 .../src/lib/components/svg-icon-custom.svelte |  56 +++++++++
 frontend/src/lib/css/search.css               |  49 ++++++++
 frontend/src/lib/css/style.css                |  50 ++++++++
 frontend/src/routes/style/+page.svelte        |  34 ++++++
 6 files changed, 300 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/components/search.svelte
 create mode 100644 frontend/src/lib/components/svg-icon-custom.svelte
 create mode 100644 frontend/src/lib/css/search.css
 create mode 100644 frontend/src/lib/css/style.css
 create mode 100644 frontend/src/routes/style/+page.svelte

diff --git a/frontend/src/lib/components/post-min.svelte b/frontend/src/lib/components/post-min.svelte
index a1c3aa7..563039d 100644
--- a/frontend/src/lib/components/post-min.svelte
+++ b/frontend/src/lib/components/post-min.svelte
@@ -14,7 +14,7 @@
 	export let profile = 'https://i.pravatar.cc/300';
 
 	let post_div;
-    let title_h1;
+	let title_h1;
 	let cursorX = 0;
 	let cursorY = 0;
 	let updateX = true;
@@ -26,12 +26,12 @@
 		}
 		cursorY = event.clientY - rect.top;
 		post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
-    }
+	}
 
 	function animateForeground(isEntering) {
 		const targetOpacity = isEntering ? 1 : 0;
-        title_h1.style.textDecoration = isEntering ? "underline 3px" : "";
-		animation = anime({
+		title_h1.style.textDecoration = isEntering ? 'underline 3px' : '';
+		anime({
 			targets: post_div,
 			opacity: [1 - targetOpacity, targetOpacity],
 			duration: 400,
diff --git a/frontend/src/lib/components/search.svelte b/frontend/src/lib/components/search.svelte
new file mode 100644
index 0000000..b06b1c1
--- /dev/null
+++ b/frontend/src/lib/components/search.svelte
@@ -0,0 +1,107 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/search.css';
+
+	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
+	import { mdiContentSavePlusOutline, mdiMagnify } from '@mdi/js';
+	import anime from 'animejs';
+
+	let div_search;
+	let input_search;
+	let svgIcon;
+	let search_box;
+	let selected = false;
+
+	function animate() {
+		// Animating the Svg Icon
+		if (selected) {
+			return;
+		}
+		selected = true;
+		animateButton(true);
+		showSearch(true);
+
+		// Animating the div
+		const max = div_search.getBoundingClientRect().right - div_search.getBoundingClientRect().left;
+		anime({
+			targets: { position_var: 0 },
+			position_var: [0, max],
+			easing: 'linear',
+			duration: 300,
+			update: function (anim) {
+				div_search.style.background = `radial-gradient(circle farthest-corner at ${anim.animations[0].currentValue}px 0px, #958a98 0%, var(--color-background) 100%)`;
+			},
+			complete: function () {
+				anime({
+					targets: { percent_var: 0, opacity_var: 1 },
+					percent_var: [0, 100],
+					opacity_var: [1, 0],
+					easing: 'easeOutQuad',
+					duration: 400,
+					update: function (anim) {
+						div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`;
+					}
+				});
+			}
+		});
+	}
+
+	function closeSearch(event) {
+		if (selected && event.target != input_search && event.target != svgIcon.svgElement) {
+			animateButton(false);
+			showSearch(false);
+			selected = false;
+		}
+	}
+
+	function animateButton(isEntering) {
+		const tvalue = isEntering ? [0, -0.8] : [-0.8, 0];
+		const svalue = isEntering ? [1, 1.2] : [1.2, 1];
+		anime({
+			targets: { transform: 0, scale: 1 },
+			transform: tvalue,
+			scale: svalue,
+			duration: 300,
+			easing: 'easeOutQuad',
+			update: function (anim) {
+				svgIcon.svgElement.style.transform = `scale(${anim.animations[1].currentValue}) translateX(${anim.animations[0].currentValue}rem)`;
+			}
+		});
+	}
+
+	function showSearch(isEntering) {
+		//transform: ;
+		if (isEntering) {
+			search_box.style.display = 'block';
+		}
+
+		const ovalue = isEntering ? [0, 1] : [1, 0];
+		anime({
+			targets: { opacity: 0 },
+			opacity: ovalue,
+			duration: 200,
+			easing: 'easeInOutQuad',
+			update: function (anim) {
+				search_box.style.opacity = `${anim.animations[0].currentValue}`;
+				search_box.style.transform = `translateX(-1rem) translateY(${anim.animations[0].currentValue}rem)`;
+			},
+			complete: function () {
+				if (!isEntering) {
+					search_box.style.display = 'none';
+				}
+			}
+		});
+	}
+</script>
+
+<svelte:window on:click={closeSearch} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div style="width:50%;">
+	<div class="search" on:click={animate} bind:this={div_search}>
+		<SvgIcon type="mdi" path={mdiMagnify} size="20" bind:this={svgIcon}></SvgIcon>
+		<input type="text" placeholder="Rechercher..." bind:this={input_search} />
+	</div>
+	<div class="search-box" bind:this={search_box}></div>
+</div>
diff --git a/frontend/src/lib/components/svg-icon-custom.svelte b/frontend/src/lib/components/svg-icon-custom.svelte
new file mode 100644
index 0000000..90a079d
--- /dev/null
+++ b/frontend/src/lib/components/svg-icon-custom.svelte
@@ -0,0 +1,56 @@
+<svelte:options accessors={true} />
+
+<script>
+	const types = {
+		mdi: {
+			size: 24,
+			viewbox: '0 0 24 24'
+		},
+		'simple-icons': {
+			size: 24,
+			viewbox: '0 0 24 24'
+		},
+		default: {
+			size: 0,
+			viewbox: '0 0 0 0'
+		}
+	};
+
+	export let type = null;
+	export let path;
+	export let size = null;
+	export let viewbox = null;
+	export let flip = 'none';
+	export let rotate = 0;
+
+	// Reactive statements to set default values based on type
+	$: defaults = types[type] || types.default;
+	$: sizeValue = size || defaults.size;
+	$: viewboxValue = viewbox || defaults.viewbox;
+	$: sx = ['both', 'horizontal'].includes(flip) ? '-1' : '1';
+	$: sy = ['both', 'vertical'].includes(flip) ? '-1' : '1';
+	$: r = isNaN(rotate) ? rotate : rotate + 'deg';
+
+	export let svgElement; // To expose the reference
+</script>
+
+<svg
+	bind:this={svgElement}
+	width={sizeValue}
+	height={sizeValue}
+	viewBox={viewboxValue}
+	style="--sx: {sx}; --sy: {sy}; --r: {r}"
+	{...$$restProps}
+>
+	<path d={path} />
+</svg>
+
+<style>
+	svg {
+		transform: rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1));
+	}
+
+	path {
+		fill: currentColor;
+	}
+</style>
diff --git a/frontend/src/lib/css/search.css b/frontend/src/lib/css/search.css
new file mode 100644
index 0000000..775ed9b
--- /dev/null
+++ b/frontend/src/lib/css/search.css
@@ -0,0 +1,49 @@
+.search {
+    display: flex;
+    flex-direction: row;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    border-radius: 5rem;
+}
+
+.search input {
+    padding: 1rem;
+    background-color: var(--color-background);
+    font-family: 'JetBrains Mono';
+    font-size: 1.2rem;
+    background-color: #00000000;
+    color: var(--color-subtext);
+    border: 0;
+    width: 100%;
+    border-top-right-radius: 5rem;
+    border-bottom-right-radius: 5rem;
+}
+
+.search input:focus {
+    border: 0;
+    outline: none;
+}
+
+.search svg {
+    width: 3rem;
+    height: auto;
+    padding: 1rem;
+    color: var(--color-background);
+    background-color: var(--color-text);
+    border-radius: 3rem;
+    box-shadow: #4f325d40 15px 0px 60px -12px, #0000004d 15px 0px 36px -18px;
+    background: radial-gradient(circle farthest-corner at 0px 0px, var(--color-subtext) 0%, var(--color-text) 80%);
+    cursor: pointer;
+}
+
+.search-box {
+    width: inherit;
+    height: 16rem;
+    background-color: var(--color-background);
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    border-radius: 1rem;
+    position: absolute;
+    z-index: 1;
+    transform: translateX(-1rem);
+    display: none;
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/css/style.css b/frontend/src/lib/css/style.css
new file mode 100644
index 0000000..1ac9494
--- /dev/null
+++ b/frontend/src/lib/css/style.css
@@ -0,0 +1,50 @@
+.base {
+    margin-left: 3rem;
+}
+
+.blank {
+    height: 10rem;
+    background-color: #00000000;
+}
+
+/* Menu */
+
+.menu-border {
+    background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
+    background-image: -webkit-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: -moz-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: -o-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: linear-gradient(to left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    padding: 0.8rem;
+    width: 40rem;
+    border-radius: 1rem;
+    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+}
+
+
+.menu {
+    border-radius: 0.8rem;
+    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
+    background-image: -webkit-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: -moz-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: -o-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    background-image: linear-gradient(to right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
+    justify-content: center;
+    align-items: center;
+    min-height: 10rem;
+}
+
+.menu p {
+    font-family: 'JetBrains Mono';
+    font-weight: 600;
+    margin: 0 !important;
+    font-size: 5rem;
+    color: var(--color-background);
+    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.3)) drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
+}
+
+.menu svg {
+    margin-right: 3rem;
+    color: var(--color-background);
+    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 15px 25px) drop-shadow(rgba(0, 0, 0, 0.1) 0px 5px 10px);
+}
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte
new file mode 100644
index 0000000..9c48de3
--- /dev/null
+++ b/frontend/src/routes/style/+page.svelte
@@ -0,0 +1,34 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/style.css';
+	import SvgIcon from '@jamescoyle/svelte-icon';
+	import { mdiAccount } from '@mdi/js';
+
+	import Post from '$lib/components/post-min.svelte';
+	import Search from '$lib/components/search.svelte';
+</script>
+
+<div class="base">
+	<br /><br />
+	<div class="menu-border">
+		<div class="menu flex-row">
+			<SvgIcon type="mdi" path={mdiAccount} size="120"></SvgIcon>
+			<p>Test</p>
+		</div>
+	</div>
+	<div class="blank"></div>
+	<Post
+		cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
+		profile="https://avatars.githubusercontent.com/u/115081848?v=4"
+		title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
+		text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
+		author="Yohan boujon"
+		date="26/07/2024"
+	/>
+	<div class="blank"></div>
+	<Post/>
+	<div class="blank"></div>
+	<Search/>
+	<div class="blank"></div>
+	<Post/>
+</div>