Add enable dtoogle for checkbox

Selenite-GEOS · Sep 3, 2024 · 175ef71 · 175ef71
1 parent ca50001
commit 175ef71
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git 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
@@ -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,37 +41,48 @@ 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) {
 			node.click();
 		}
 	}
 
-	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
@@ -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>