From 48c07e792d2c87c4ce03642f9a37be3b9f3f276d Mon Sep 17 00:00:00 2001
From: Tangent Wantwight <tangent128@gmail.com>
Date: Mon, 20 Nov 2023 20:39:02 -0500
Subject: [PATCH] Render buttons with the data needed to locate click handlers

---
 TODO              |  4 ++--
 src/lib/button.ts | 19 ++++++++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/TODO b/TODO
index f1e2e8a..25f14a3 100644
--- a/TODO
+++ b/TODO
@@ -2,6 +2,8 @@
 
 - path to event listener:
 
+  - rerender w/ a signal to branch into handler
+  - capture correct position information in script blocks
   - card fields (vars maybe not needed yet?)
     - set field command
       - buffer output/side-effects in VM
@@ -9,8 +11,6 @@
         - unit test
       - command
       - set field inline instead of separate data???
-  - capture VM status (variables, procs?)?
-    - or is it sufficient to rerender w/ a signal to branch into handler?
 
 - impl vars
 
diff --git a/src/lib/button.ts b/src/lib/button.ts
index 92c8514..780f7de 100644
--- a/src/lib/button.ts
+++ b/src/lib/button.ts
@@ -4,8 +4,17 @@ import { CardContext } from './card';
 import { getOptRaw } from './options';
 
 export const Button: Proc<CardContext> = (vm, argv: TextPiece[]): ProcResult =>
-  getOptRaw(argv, { $min: 1, $max: 1 }, (_opts, [label]) => {
-    return {
-      html: `<button>${AsHtml(label)}</button>`,
-    };
-  });
+  getOptRaw(
+    argv,
+    { $min: 1, $max: 1, onClick: 1 },
+    ({ onClick: [onClick = null] }, [label]) => {
+      let buttonTrigger = "disabled";
+      if (onClick && "pos" in onClick && onClick.pos != undefined) {
+        buttonTrigger = `data-notcl-onClick="${onClick.pos}"`;
+      }
+
+      return {
+        html: `<button ${buttonTrigger}>${AsHtml(label)}</button>`,
+      };
+    }
+  );