Extract input handler into lib file

There are input handlers used on three different pages right now. The code was basically the same on
all of them.
Recently one of them got updated slightly by adding a paste event listener. The others did not get
an update.

Even though the handler itself is not something complex it is better to have it extracted into a
library function that gets used by all functions. Less code duplication and if there is an update
to it in the future, it automatically gets applied everywhere.

src/lib/inputhandler.js

+import { browser } from "$app/environment";
+
+const functions = new Map();
+
+export function addInputHandler(handler) {
+	if(!browser) return;
+	let input = "";
+	const keydown = (e) => {
+		if(e.key === "Enter"){
+			handler(input);
+			input = "";
+		}else if(e.key === "Backspace"){
+			input = input.slice(0, -1);
+		}else if(e.key === "Escape"){
+			input = "";
+		}else if(e.key === "v" && e.ctrlKey){
+			return; // let paste event handle this
+		}else if(e.key.length === 1){
+			input += e.key;
+		}
+	};
+	const paste = (e) => {
+		handler(e.clipboardData.getData("text"));
+	};
+	window.addEventListener("keydown", keydown);
+	window.addEventListener("paste", paste);
+	functions.set(handler, {keydown, paste});
+}
+
+export function removeInputHandler(handler) {
+	if(!browser) return;
+	const funcs = functions.get(handler);
+	if(funcs) {
+		window.removeEventListener("keydown", funcs.keydown);
+		window.removeEventListener("paste", funcs.paste);
+		functions.delete(handler);
+	}
+}

src/routes/+page.svelte

@@ -4,6 +4,7 @@ import { browser, dev } from "$app/environment";
 import { goto } from "$app/navigation";
 import { addMessage, MessageType } from "$lib/messages";
 import { Codes } from "$lib/customcodes";
+import { addInputHandler, removeInputHandler } from "$lib/inputhandler";
 
 import Cart from "../components/Cart.svelte";
 import ItemList from "../components/ItemList.svelte";
@@ -125,23 +126,8 @@ import ItemList from "../components/ItemList.svelte";
 		}
 	}
 	
-	let currentCode = "";
-	onMount(() => {
-		window.addEventListener("keydown", handleKeydown);
-	});
-	onDestroy(() => {
-		if(browser) window.removeEventListener("keydown", handleKeydown);
-	});
-	function handleKeydown(e){
-		if(e.key === "Enter"){
-			handleCode(currentCode);
-			currentCode = "";
-		} else if(e.key === "Backspace"){
-			currentCode = currentCode.slice(0, -1);
-		} else if(e.key.length === 1) {
-			currentCode += e.key;
-		}
-	}
+	onMount(() => addInputHandler(handleCode));
+	onDestroy(() => removeInputHandler(handleCode));
 </script>
 
 <style>

src/routes/admin/restock/+page.svelte

 <script>
 	import { onDestroy, onMount } from "svelte";
-	import { browser } from "$app/environment";
 	import RestockList from "./RestockList.svelte";
+	import { addInputHandler, removeInputHandler } from "$lib/inputhandler";
 
 	export let data;
 	let products = data.products;
 	
-	let currentCode = "";
-	onMount(async ()=>{
-		window.addEventListener("keydown", handleKeydown);
-	});
-	onDestroy(()=>{
-		if(browser) window.removeEventListener("keydown", handleKeydown);
-	});
-	function handleKeydown(e){
-		if(e.key === "Escape"){
-			currentCode = "";
-		}else if(e.key === "Enter"){
-			handleCode(currentCode);
-			currentCode = "";
-		}else if(e.key == "Backspace"){
-			currentCode = currentCode.slice(0, -1);
-		}else if(e.key.length === 1){
-			currentCode += e.key;
-		}
-	}
+	onMount(()=>addInputHandler(handleCode));
+	onDestroy(()=>removeInputHandler(handleCode));
 	
 	let restockProducts = {};
 	function handleCode(code){

src/routes/login/+page.svelte

@@ -4,6 +4,7 @@ import { goto } from "$app/navigation";
 import { browser } from "$app/environment";
 import PinCodeInput from "../../components/PinCodeInput.svelte";
 import { addMessage, MessageType } from "$lib/messages";
+import { addInputHandler, removeInputHandler } from "$lib/inputhandler";
 
 	function login(card){
 		const data = new FormData();
@@ -25,32 +26,8 @@ import { addMessage, MessageType } from "$lib/messages";
 	}
 	
 	let input = "";
-	onMount(() => {
-		window.addEventListener("keydown", handleKeydown);
-		window.addEventListener("paste", handlePaste);
-	});
-	onDestroy(() => {
-		if(!browser) return;
-		window.removeEventListener("keydown", handleKeydown);
-		window.removeEventListener("paste", handlePaste);
-	});
-	function handleKeydown(e){
-		if(e.key === "Enter"){
-			login(input);
-			input = "";
-		} else if(e.key === "Escape"){
-			input = "";
-		} else if(e.key === "Backspace"){
-			input = input.slice(0, -1);
-		} else if(e.key === "v" && e.ctrlKey){
-			return; // let the paste event handle this
-		} else if(e.key.length === 1) {
-			input += e.key;
-		}
-	}
-	function handlePaste(e){
-		login(e.clipboardData.getData("text"));
-	}
+	onMount(() => addInputHandler(login));
+	onDestroy(() => removeInputHandler(login));
 	
 	let showInputField = true;
 </script>