diff options
Diffstat (limited to 'src/routes/user')
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 126 |
1 files changed, 58 insertions, 68 deletions
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 |