feat(activities): screenshot

1 files changed, 40 insertions, 1 deletions

diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
index 57037f15..bbadf6fb 100644
--- a/src/lib/Tools/ActivityHistory.svelte
+++ b/src/lib/Tools/ActivityHistory.svelte
@@ -11,6 +11,7 @@
 		type AniListAuthorisation
 	} from '$lib/AniList/identity';
 	import { clearAllParameters } from './tool.js';
+	import { domToBlob } from 'modern-screenshot';
 
 	export let user: AniListAuthorisation;
 
@@ -41,6 +42,37 @@
 
 		return `hsl(${baseHue}, 100%, ${lightness}%)`;
 	};
+
+	const screenshot = async () => {
+		let element = document.querySelector('.grid') as HTMLElement;
+
+		if (element !== null) {
+			domToBlob(element, {
+				quality: 1,
+				scale: 2
+			}).then((blob) => {
+				const downloadWrapper = document.createElement('a');
+				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);
+
+				const gridFinal = document.getElementById('grid-final');
+
+				if (gridFinal !== null) {
+					gridFinal.innerHTML = '';
+
+					gridFinal.appendChild(downloadWrapper);
+				}
+
+				downloadWrapper.click();
+			});
+		}
+	};
 </script>
 
 <blockquote>
@@ -76,6 +108,12 @@
 
 			<p />
 
+			<div id="grid-final" />
+
+			<p />
+
+			<p><a href={'#'} on:click={screenshot}>Generate grid image</a></p>
+
 			<ul>
 				{#each fillMissingDays(activities) as activity}
 					{#if activity.amount === 0}
@@ -98,7 +136,8 @@
 		grid-template-rows: repeat(7, 1fr);
 		/* gap: 2px; */
 		grid-auto-flow: column;
-		width: fit-content;
+		width: min-content;
+		background-color: white;
 	}
 	.grid-item {
 		width: 20px;