From 3da727667b725e91402863f449228ab2d43325f5 Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Tue, 11 Oct 2022 09:15:53 +0200
Subject: [PATCH] Refactor color palette code

---
 templates/palette.html | 104 +++++++++++++++--------------------------
 1 file changed, 38 insertions(+), 66 deletions(-)

diff --git a/templates/palette.html b/templates/palette.html
index beb476d..9c0ce3e 100644
--- a/templates/palette.html
+++ b/templates/palette.html
@@ -15,15 +15,6 @@
 	<h2>Primary</h2>
 	<!-- Only override values here for slight tweaking -->
 	<colour-palette style="--hue: var(--base-hue);">
-		<button style="--lightness: 05%"></button>
-		<button style="--lightness: 15%"></button>
-		<button style="--lightness: 30%"></button>
-		<button style="--lightness: 40%"></button>
-		<button style="--lightness: 50%"></button>
-		<button style="--lightness: 60%"></button>
-		<button style="--lightness: 70%"></button>
-		<button style="--lightness: 80%"></button>
-		<button style="--lightness: 95%"></button>
 	</colour-palette>
 
 	<section class="hint box">
@@ -32,17 +23,7 @@
 	</section>
 
 	<h2>Secondary</h2>
-	<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));">
-		<button style="--lightness: 05%"></button>
-		<button style="--lightness: 15%"></button>
-		<button style="--lightness: 30%"></button>
-		<button style="--lightness: 40%"></button>
-		<button style="--lightness: 50%"></button>
-		<button style="--lightness: 60%"></button>
-		<button style="--lightness: 70%"></button>
-		<button style="--lightness: 80%"></button>
-		<button style="--lightness: 95%"></button>
-	</colour-palette>
+	<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette>
 
 	<section class="hint box">
 		You can copy any colour to the clipboard by just clicking on its box.
@@ -51,17 +32,7 @@
 	</section>
 
 	<h2>Tertiary</h2>
-	<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));">
-		<button style="--lightness: 05%"></button>
-		<button style="--lightness: 15%"></button>
-		<button style="--lightness: 30%"></button>
-		<button style="--lightness: 40%"></button>
-		<button style="--lightness: 50%"></button>
-		<button style="--lightness: 60%"></button>
-		<button style="--lightness: 70%"></button>
-		<button style="--lightness: 80%"></button>
-		<button style="--lightness: 95%"></button>
-	</colour-palette>
+	<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette>
 
 	<section class="hint box">
 		By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@@ -69,17 +40,7 @@
 	</section>
 
 	<h2>Neutral</h2>
-	<colour-palette style="--hue: 210deg; --saturation: 5%;">
-		<button style="--lightness: 05%"></button>
-		<button style="--lightness: 15%"></button>
-		<button style="--lightness: 30%"></button>
-		<button style="--lightness: 40%"></button>
-		<button style="--lightness: 50%"></button>
-		<button style="--lightness: 60%"></button>
-		<button style="--lightness: 70%"></button>
-		<button style="--lightness: 80%"></button>
-		<button style="--lightness: 95%"></button>
-	</colour-palette>
+	<colour-palette style="--hue: 210deg; --saturation: 5%;"></colour-palette>
 
 	<section class="hint box">
 		By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@@ -176,13 +137,6 @@
 
 	/* === Popup notification shenanigans === */
 
-	@keyframes fade {
-		0%   { opacity: 0; transform: translate(-50%, -10%)}
-		20%  { opacity: 1;}
-		50%  { opacity: 1;}
-		100% { opacity: 0; transform: translate(-50%, -150%)}
-	}
-
 	div.notification {
 		top: 0em;
 		border: 1px solid currentcolor;
@@ -263,26 +217,17 @@
 
 		document.querySelector("body").appendChild(box);
 
-		box.style.setProperty('animation', 'fade 1s');
-		box.style.setProperty('animation-fill-mode', 'forwards');
+		box.animate([
+			{ offset:  0, opacity: 1,  transform: "translate(-50%, -10%)"},
+			{ offset: .3, opacity: 1 },
+			{ offset:  1, opacity: 0,  transform: "translate(-50%, -200%)"},
+		], {
+			duration: 1e3
+		}).finished.then(() => box.remove())
+
 		box.style.setProperty('color', color);
-
-		box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
 	}
 
-	document.querySelectorAll('colour-palette button').forEach(button => {
-		button.addEventListener('click', event => {
-			const prop = name => getComputedStyle(button)
-				.getPropertyValue(name)
-				.replace(/^ *| *$/g, "")
-			const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
-			navigator.clipboard.writeText(colour).then(() => {
-				const box = button.getBoundingClientRect()
-				showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
-			});
-		});
-	});
-
 	const register = (type, name, initial=undefined) => CSS.registerProperty({
 		name: `--${name}`,
 		syntax: `<${type}>`,
@@ -295,6 +240,7 @@
 	register("percentage", "lightness", "50%")
 
 	const backgroundColourButton = document.getElementById("background-color")
+
 	backgroundColourButton.addEventListener("input", event => {
 		const rgb = backgroundColourButton.value
 		document.body.style.background = rgb
@@ -317,6 +263,32 @@
 				.map(colour => colour.match(/\d+/g))
 				.map(match  => `${match[0]} ${match[1]} ${match[2]}`)
 		}
+
+		connectedCallback() {
+			this.innerHTML = `
+				<button style="--lightness: 05%"></button>
+				<button style="--lightness: 15%"></button>
+				<button style="--lightness: 30%"></button>
+				<button style="--lightness: 40%"></button>
+				<button style="--lightness: 50%"></button>
+				<button style="--lightness: 60%"></button>
+				<button style="--lightness: 70%"></button>
+				<button style="--lightness: 80%"></button>
+				<button style="--lightness: 95%"></button>
+			`
+			this.querySelectorAll('button').forEach(button => {
+				button.addEventListener('click', event => {
+					const prop = name => getComputedStyle(button)
+						.getPropertyValue(name)
+						.replace(/^ *| *$/g, "")
+					const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
+					navigator.clipboard.writeText(colour).then(() => {
+						const box = button.getBoundingClientRect()
+						showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
+					});
+				});
+			});
+		}
 	})