Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,459 Bytes
dd7ec11 a1d7896 dd7ec11 b1a4d81 e8410db b1a4d81 dd7ec11 e8410db f91a1ec e8410db f91a1ec e8410db dd7ec11 9043929 dd7ec11 e8410db dd7ec11 3d344de 9043929 dd7ec11 9043929 dd7ec11 e8410db a1d7896 9043929 a1d7896 dd7ec11 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<script lang="ts">
import { browser } from '$app/environment';
import Icon from "@iconify/svelte";
import { REACTION_EMOJIS } from "$lib/utils";
import UserIsLogged from '$lib/components/UserIsLogged.svelte';
export let count: number;
export let reactions: Array<{ emoji: string, count: number }> = [];
export let gallery_id: string;
export let onAdd: (emoji: string, id: string) => void;
let isOpen: boolean = false;
$: uuid = Math.random().toString(36).substring(7);
const handleClick = (event: MouseEvent) => {
const target = event.target as HTMLElement;
const addReaction = document.getElementById(uuid);
if (!addReaction) return;
if (!addReaction.contains(target)) {
isOpen = false;
}
}
if (browser) {
window.addEventListener("click", handleClick);
}
const handleReaction = async (emoji: string) => {
await fetch(`/api/community/${gallery_id}/reaction`, {
method: "POST",
body: JSON.stringify({ emoji }),
headers: {
"Content-Type": "application/json",
},
})
.then(res => res.json())
.then(data => {
if (!data.delete) {
onAdd(emoji, data.id)
}
})
}
$: AVAILABLE_EMOJIS = REACTION_EMOJIS.filter(e => !reactions.find(emj => emj.emoji === e));
</script>
<div
id="{uuid}"
class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-dashed border-white/80 hover:border-white relative z-[2]"
class:!border-white={isOpen}
class:!text-white={isOpen}
class:opacity-0={count >= 4}
>
<button on:click={(e) => {
e.preventDefault();
e.stopPropagation();
isOpen = !isOpen
}}>
<Icon icon="fluent:emoji-add-16-regular" class="w-6 h-6" />
</button>
<div
class={`opacity-0 pointer-events-none absolute max-w-max flex items-center justify-center bg-white px-2 py-1 rounded-full gap-0.5 text-2xl ${count > 0 ? "-translate-y-[calc(100%+8px)] -translate-x-1/2 left-0 top-0" : "right-0 translate-x-[calc(100%+8px)]"}`}
class:opacity-100={isOpen}
class:pointer-events-auto={isOpen}
>
{#each AVAILABLE_EMOJIS as emoji}
<UserIsLogged>
<button
class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center text flex items-center justify-center"
on:click={() => handleReaction(emoji)}
>
{emoji}
</button>
</UserIsLogged>
{/each}
</div>
</div> |