From 175ef71ee7400b9fdab65062ed10d21f6b71992a Mon Sep 17 00:00:00 2001
From: MoonLyss <shaitan.lyssm@gmail.com>
Date: Tue, 3 Sep 2024 19:17:43 +0200
Subject: [PATCH] Add enable dtoogle for checkbox

---
 package.json                     |  2 +-
 src/lib/actions/inputs.ts        | 39 +++++++++++++++++++++-----------
 src/routes/checkbox/+page.svelte |  2 +-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index b17544c..eceb4b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@selenite/commons",
-	"version": "0.22.11",
+	"version": "0.22.12",
 	"repository": "github:ShaitanLyss/selenite-commons",
 	"license": "MIT",
 	"keywords": [
diff --git a/src/lib/actions/inputs.ts b/src/lib/actions/inputs.ts
index 71f5930..db2d81e 100644
--- a/src/lib/actions/inputs.ts
+++ b/src/lib/actions/inputs.ts
@@ -22,12 +22,14 @@ export const autosize: Action<HTMLTextAreaElement, unknown | undefined> = (texta
 
 let isCheckboxSetup = false;
 let pointedDownCheckbox: HTMLInputElement | undefined = undefined;
-export const checkbox: Action<HTMLInputElement> = (node) => {
+export const checkbox: Action<HTMLInputElement, boolean | undefined> = (node, enabled : boolean | undefined = true ) => {
 	if (!isCheckboxSetup) {
 		isCheckboxSetup = true;
 		document.addEventListener('pointerdown', (event) => {
 			pointedDownCheckbox =
-				event.target instanceof HTMLInputElement && event.target.type === 'checkbox' && event.target.dataset['seleniteCheckbox'] === 'true'
+				event.target instanceof HTMLInputElement &&
+				event.target.type === 'checkbox' &&
+				event.target.dataset['seleniteCheckbox'] === 'true'
 					? event.target
 					: undefined;
 			if (pointedDownCheckbox) {
@@ -39,16 +41,12 @@ export const checkbox: Action<HTMLInputElement> = (node) => {
 			pointedDownCheckbox = undefined;
 		});
 	}
-	node.type = 'checkbox';
-	node.dataset['seleniteCheckbox'] = 'true';
-	node.classList.add('checkbox');
 
 	function triggerOnEnter(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
 			node.click();
 		}
 	}
-	node.addEventListener('keydown', triggerOnEnter);
 
 	function triggerOnHoverWhenPointerDown() {
 		if (pointedDownCheckbox && pointedDownCheckbox !== node) {
@@ -56,20 +54,35 @@ export const checkbox: Action<HTMLInputElement> = (node) => {
 		}
 	}
 
-	node.addEventListener('pointerenter', triggerOnHoverWhenPointerDown);
-
 	function triggerOnLeaveWhenPointerDown() {
 		if (pointedDownCheckbox === node) {
 			node.click();
 		}
 	}
-	node.addEventListener('pointerleave', triggerOnLeaveWhenPointerDown);
+	function setup() {
+		node.dataset['seleniteCheckbox'] = 'true';
+		node.addEventListener('keydown', triggerOnEnter);
+		node.addEventListener('pointerenter', triggerOnHoverWhenPointerDown);
+		node.addEventListener('pointerleave', triggerOnLeaveWhenPointerDown);
+	}
+
+	function destroy() {
+		node.dataset['seleniteCheckbox'] = 'false';
+		node.removeEventListener('keydown', triggerOnEnter);
+		node.removeEventListener('pointerenter', triggerOnHoverWhenPointerDown);
+		node.removeEventListener('pointerleave', triggerOnLeaveWhenPointerDown);
+	}
+
+	if (enabled) setup();
 
 	return {
-		destroy() {
-			node.removeEventListener('keydown', triggerOnEnter);
-			node.removeEventListener('pointerenter', triggerOnHoverWhenPointerDown);
-			node.removeEventListener('pointerleave', triggerOnLeaveWhenPointerDown);
+		destroy,
+		update(enabled) {
+			if (enabled ?? true) {
+				setup();
+			} else {
+				destroy();
+			}
 		}
 	};
 };
diff --git a/src/routes/checkbox/+page.svelte b/src/routes/checkbox/+page.svelte
index 0dbf48e..18b77a4 100644
--- a/src/routes/checkbox/+page.svelte
+++ b/src/routes/checkbox/+page.svelte
@@ -11,7 +11,7 @@
 		{#each range(10) as i}
         <label class="flex gap-2 items-center">
             {i}
-			<input use:checkbox use:keyboardNavigation />
+			<input type="checkbox" class="checkbox" use:checkbox use:keyboardNavigation />
             </label>
 		{/each}
 	</ul>