Comprehensively update user manual and contributor guide, add Adam to core team

website/static/js/image-comparison.js

@@ -0,0 +1,57 @@
+const RECENTER_DELAY = 1;
+const RECENTER_ANIMATION_DURATION = 0.25;
+
+window.addEventListener("DOMContentLoaded", initializeImageComparison);
+
+function initializeImageComparison() {
+	Array.from(document.querySelectorAll("[data-image-comparison]")).forEach((element) => {
+		const moveHandler = (event) => {
+			const factor = (event.clientX - element.getBoundingClientRect().left) / element.getBoundingClientRect().width;
+			const capped = Math.max(0, Math.min(1, factor));
+
+			if (!(element instanceof HTMLElement)) return;
+			element.style.setProperty("--comparison-percent", `${capped * 100}%`);
+			element.dataset.lastInteraction = "";
+		};
+
+		const leaveHandler = (event) => {
+			moveHandler(event);
+
+			const randomCode = Math.random().toString().substring(2);
+			element.dataset.lastInteraction = randomCode;
+
+			setTimeout(() => {
+				if (element.dataset.lastInteraction === randomCode) {
+					element.dataset.recenterStartTime = Date.now();
+					element.dataset.recenterStartValue = parseFloat(element.style.getPropertyValue("--comparison-percent"));
+
+					recenterAnimationStep();
+				}
+			}, RECENTER_DELAY * 1000);
+		};
+
+		const recenterAnimationStep = () => {
+			if (element.dataset.lastInteraction === "") return;
+
+			const completionFactor = (Date.now() - element.dataset.recenterStartTime) / (RECENTER_ANIMATION_DURATION * 1000);
+			if (completionFactor > 1) {
+				element.dataset.lastInteraction = "";
+				return;
+			}
+
+			const factor = smootherstep(completionFactor);
+			const newLocation = lerp(element.dataset.recenterStartValue, 50, factor);
+			element.style.setProperty("--comparison-percent", `${newLocation}%`);
+
+			requestAnimationFrame(recenterAnimationStep);
+		};
+
+		const lerp = (a, b, t) => (1 - t) * a + t * b;
+		const smootherstep = (x) => x * x * x * (x * (x * 6 - 15) + 10);
+
+		element.addEventListener("pointermove", moveHandler);
+		element.addEventListener("pointerenter", moveHandler);
+		element.addEventListener("pointerleave", leaveHandler);
+		element.addEventListener("dragstart", (event) => event.preventDefault());
+	});
+}