From 87058d79a3cc9c5d7a167014519d75ed2b291dd6 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 22 Jan 2024 01:21:28 -0800
Subject: feat(badges): remove download button

---
 src/routes/user/[user]/badges/+page.svelte | 126 +++++++++++++----------------
 1 file changed, 58 insertions(+), 68 deletions(-)

(limited to 'src/routes/user')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index b4eca4c3..fcea73e4 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -3,7 +3,7 @@
 	import { user } from '$lib/AniList/user';
 	import { nbsp } from '$lib/Utility/html';
 	import type { Badge } from '$lib/Database/badges';
-	import { domToBlob } from 'modern-screenshot';
+	// import { domToBlob } from 'modern-screenshot';
 	import { onMount } from 'svelte';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToDatabaseTime } from '$lib/Utility/time';
@@ -20,14 +20,14 @@
 	// const socket = io();
 	let badgesPromise: Promise<Response>;
 	let awcPromise: Promise<Response>;
-	let dark = true;
-	let transparent = false;
+	// let dark = true;
+	// let transparent = false;
 	let confirmDelete = 0;
 	let selectedBadge: Badge | undefined = undefined;
 	let loadError: string | null = null;
-	let badgeCount = 0;
+	// let badgeCount = 0;
 
-	$: downloadDisabled = badgeCount > 20;
+	// $: downloadDisabled = badgeCount > 20;
 
 	type GroupedBadges = { [key: string]: Badge[] };
 
@@ -201,62 +201,62 @@
 		});
 	};
 
-	const screenshot = async () => {
-		let element = document.querySelector('#badges') as HTMLElement;
-
-		element.classList.add('invert');
-
-		if (element !== null) {
-			domToBlob(element, {
-				style: {
-					backgroundColor: transparent ? 'transparent' : dark ? '#0b1622' : '#edf1f5'
-				},
-				quality: 1,
-				scale: 2,
-				fetch: {
-					requestInit: {
-						mode: 'cors'
-					}
-					// bypassingCache: true
-				}
-			}).then((blob) => {
-				const downloadWrapper = document.createElement('a');
-				const wrappedImageButton = document.getElementById(
-					'wrapped-image-download'
-				) as HTMLAnchorElement;
-				const image = document.createElement('img');
-				const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
-
-				downloadWrapper.href = object;
-				downloadWrapper.target = '_blank';
-				image.src = object;
-
-				downloadWrapper.appendChild(image);
-
-				if (wrappedImageButton !== null) {
-					wrappedImageButton.href = object;
-				}
-
-				const wrappedFinal = document.getElementById('wrapped-final');
-
-				if (wrappedFinal !== null) {
-					wrappedFinal.innerHTML = '';
-					wrappedFinal.appendChild(downloadWrapper);
-				}
-
-				downloadWrapper.click();
-			});
-
-			await new Promise((resolve) => setTimeout(resolve, 1000));
-
-			element.classList.remove('invert');
-		}
-	};
+	// const screenshot = async () => {
+	// 	let element = document.querySelector('#badges') as HTMLElement;
+
+	// 	element.classList.add('invert');
+
+	// 	if (element !== null) {
+	// 		domToBlob(element, {
+	// 			style: {
+	// 				backgroundColor: transparent ? 'transparent' : dark ? '#0b1622' : '#edf1f5'
+	// 			},
+	// 			quality: 1,
+	// 			scale: 2,
+	// 			fetch: {
+	// 				requestInit: {
+	// 					mode: 'cors'
+	// 				}
+	// 				// bypassingCache: true
+	// 			}
+	// 		}).then((blob) => {
+	// 			const downloadWrapper = document.createElement('a');
+	// 			const wrappedImageButton = document.getElementById(
+	// 				'wrapped-image-download'
+	// 			) as HTMLAnchorElement;
+	// 			const image = document.createElement('img');
+	// 			const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
+
+	// 			downloadWrapper.href = object;
+	// 			downloadWrapper.target = '_blank';
+	// 			image.src = object;
+
+	// 			downloadWrapper.appendChild(image);
+
+	// 			if (wrappedImageButton !== null) {
+	// 				wrappedImageButton.href = object;
+	// 			}
+
+	// 			const wrappedFinal = document.getElementById('wrapped-final');
+
+	// 			if (wrappedFinal !== null) {
+	// 				wrappedFinal.innerHTML = '';
+	// 				wrappedFinal.appendChild(downloadWrapper);
+	// 			}
+
+	// 			downloadWrapper.click();
+	// 		});
+
+	// 		await new Promise((resolve) => setTimeout(resolve, 1000));
+
+	// 		element.classList.remove('invert');
+	// 	}
+	// };
 
 	const groupBadges = (badges: Badge[]) => {
 		const groupedBadges: GroupedBadges = {};
 
-		badgeCount = badges.length;
+		// badgeCount = badges.length;
 
 		badges.forEach((badge) => {
 			if (!badge.category) badge.category = 'Uncategorised';
@@ -342,7 +342,7 @@
 							{#if isOwner}
 								<div class="card">
 									<a href={root(`/user/${data.username}`)}>Back to Profile</a>
-									•
+									<span style="margin: 0 0.625rem;">•</span>
 									<button
 										on:click={() => {
 											if (editMode) selectedBadge = undefined;
@@ -352,16 +352,6 @@
 									>
 										{editMode ? 'Disable' : 'Enable'} Edit Mode
 									</button>
-									•
-									<button
-										disabled={downloadDisabled}
-										on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button
-									>
-									•
-									<input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark
-									Mode
-									<input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} />
-									Transparent Background
 
 									{#if editMode && isOwner}
 										{@const groups = groupedBadges
-- 
cgit v1.2.3