OnChange/OnInput

aardvark-community · Sep 29, 2022 · 9f997b0 · 9f997b0
1 parent 8e624e8
commit 9f997b0
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 7 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,3 +1,6 @@
+### 1.0.0-prerelease0006
+* OnChange/OnInput
+
 ### 1.0.0-prerelease0005
 * respecting depth-writes
 

diff --git a/src/Aardvark.Dom.Remote/aardvark-dom.js b/src/Aardvark.Dom.Remote/aardvark-dom.js
@@ -253,7 +253,15 @@
             }
 
             return JSON.stringify(e, (k, v) => {
-                if (v instanceof Node) return v.id;
+                if (v instanceof Node) {
+
+                    return {
+                        id: v.id,
+                        type: v.type,
+                        value: v.value,
+                        checked: v.checked
+                    };
+                }
                 if (v instanceof Window) return 'Window';
                 if (v instanceof Event) {
                     const obj = {};

diff --git a/src/Aardvark.Dom/Frontend.fs b/src/Aardvark.Dom/Frontend.fs
@@ -393,7 +393,9 @@ type Dom private() =
 
     /// For <button> elements, the type attribute specifies the type of button.
     static member inline Type(typ : string) = Attribute("type", AttributeValue.String typ)
-
+
+    static member inline Role(role : string) = Attribute("role", AttributeValue.String role)
+
     /// The usemap attribute specifies an image (or an object) as an image map (an image map is an image with clickable areas).
     static member inline UseMap(name : string) = Attribute("useMap", AttributeValue.String name)
 
@@ -628,7 +630,33 @@ type Dom private() =
 
     static member inline OnShutdown(code : #seq<string>) =
         Attribute("shutdown", AttributeValue.Execute([||], fun _ -> [String.concat "\n" code]))
-
+
+    static member OnChange(callback : ChangeEvent -> bool, ?preventDefault : bool) =
+        Dom.On(
+            "change", 
+            callback, 
+            ?preventDefault = preventDefault
+        )
+
+    static member OnChange(callback : ChangeEvent -> unit, ?preventDefault : bool) =
+        Dom.On(
+            "change", 
+            callback, 
+            ?preventDefault = preventDefault
+        )
+    static member OnInput(callback : InputEvent -> bool, ?preventDefault : bool) =
+        Dom.On(
+            "input", 
+            callback, 
+            ?preventDefault = preventDefault
+        )
+
+    static member OnInput(callback : InputEvent -> unit, ?preventDefault : bool) =
+        Dom.On(
+            "input", 
+            callback, 
+            ?preventDefault = preventDefault
+        )
 
 [<AbstractClass; Sealed; AutoOpen>]
 type RenderControl private() =

diff --git a/src/Aardvark.Dom/UI/Events.fs b/src/Aardvark.Dom/UI/Events.fs
@@ -109,7 +109,7 @@ type Event(target : string, timeStamp : float, isTrusted : bool, typ : string, c
             let! (isTrusted : bool) = str?isTrusted
             let! (typ : string) = str?``type``
             let! (timeStamp : float) = str?timeStamp
-            let! (target : string) = str?target
+            let! (target : string) = str?target?id
 
             let! (rect : System.Text.Json.JsonElement) = str?clientRect
             let! (x : float) = rect?x
@@ -158,7 +158,7 @@ type MouseEvent(
             let! (isTrusted : bool) = str?isTrusted
             let! (typ : string) = str?``type``
             let! (timeStamp : float) = str?timeStamp
-            let! (target : string) = str?target
+            let! (target : string) = str?target?id
 
             let! (screenX : float) = str?screenX
             let! (screenY : float) = str?screenY
@@ -242,7 +242,7 @@ type WheelEvent(
             let! (isTrusted : bool) = str?isTrusted
             let! (typ : string) = str?``type``
             let! (timeStamp : float) = str?timeStamp
-            let! (target : string) = str?target
+            let! (target : string) = str?target?id
 
             let! (screenX : float) = str?screenX
             let! (screenY : float) = str?screenY
@@ -367,7 +367,7 @@ type PointerEvent(
             let! (isTrusted : bool) = str?isTrusted
             let! (typ : string) = str?``type``
             let! (timeStamp : float) = str?timeStamp
-            let! (target : string) = str?target
+            let! (target : string) = str?target?id
 
             let! (screenX : float) = str?screenX
             let! (screenY : float) = str?screenY
@@ -413,3 +413,90 @@ type PointerEvent(
                     defaultArg tiltX 0.0, defaultArg tiltY 0.0, defaultArg pointerType ""
                 )
         }
+
+type ChangeEvent(  
+        target : string, timeStamp : float, 
+        isTrusted : bool, typ : string, clientRect : Box2d, nodeType : string, value : string, isChecked : bool) =
+    inherit Event(target, timeStamp, isTrusted, typ, clientRect)
+
+    member x.Value = value
+    member x.Checked = isChecked
+    member x.NodeType = nodeType
+    static member TryParse(str : System.Text.Json.JsonElement) =
+
+        opt {
+            let targetObj = str?target
+            let! (isTrusted : bool) = str?isTrusted
+            let! (typ : string) = str?``type``
+            let! (timeStamp : float) = str?timeStamp
+            let! (target : string) = targetObj?id
+
+            let! (nodeType : string) = targetObj?``type``
+
+            let isChecked =
+                match targetObj.TryGetProperty "checked" with
+                | (true, v) -> v.GetBoolean()
+                | _ -> false
+            let value =
+                match targetObj.TryGetProperty "value" with
+                | (true, v) -> v.GetString()
+                | _ -> ""
+
+            let! (rect : System.Text.Json.JsonElement) = str?clientRect
+            let! (x : float) = rect?x
+            let! (y : float) = rect?y
+            let! (w : float) = rect?width
+            let! (h : float) = rect?height
+            let clientRect = Box2d.FromMinAndSize(V2d(x,y), V2d(w,h))
+
+            return
+                ChangeEvent(
+                    target, timeStamp, isTrusted, typ, clientRect,
+                    nodeType, value, isChecked
+                )
+        }
+
+type InputEvent(  
+        target : string, timeStamp : float, 
+        isTrusted : bool, typ : string, clientRect : Box2d, nodeType : string, value : string, isChecked : bool, data : string, inputType : string) =
+    inherit ChangeEvent(target, timeStamp, isTrusted, typ, clientRect, nodeType, value, isChecked)
+
+    member x.Data = data
+    member x.InputType = inputType
+
+    static member TryParse(str : System.Text.Json.JsonElement) =
+
+        opt {
+            let targetObj = str?target
+            let! (isTrusted : bool) = str?isTrusted
+            let! (typ : string) = str?``type``
+            let! (timeStamp : float) = str?timeStamp
+            let! (target : string) = targetObj?id
+
+            let! (nodeType : string) = targetObj?``type``
+
+            let isChecked =
+                match targetObj.TryGetProperty "checked" with
+                | (true, v) -> v.GetBoolean()
+                | _ -> false
+            let value =
+                match targetObj.TryGetProperty "value" with
+                | (true, v) -> v.GetString()
+                | _ -> ""
+
+            let! (rect : System.Text.Json.JsonElement) = str?clientRect
+            let! (x : float) = rect?x
+            let! (y : float) = rect?y
+            let! (w : float) = rect?width
+            let! (h : float) = rect?height
+            let clientRect = Box2d.FromMinAndSize(V2d(x,y), V2d(w,h))
+
+            let! data = str?data
+            let! inputType = str?inputType
+
+            return
+                InputEvent(
+                    target, timeStamp, isTrusted, typ, clientRect,
+                    nodeType, value, isChecked, data, inputType
+                )
+        }
diff --git a/src/Demo/Program.fs b/src/Demo/Program.fs
@@ -35,6 +35,19 @@ let testApp (_runtime : IRuntime) =
                 FontFamily "monospace"
             ]
 
+            input {
+                Type "checkbox"
+                Checked true
+                OnChange (fun e -> printfn "%A" e.Checked)
+            }   
+
+            input {
+                Type "text"
+                Value "hans"
+                OnChange (fun e -> printfn "%A" e.Value)
+                OnInput (fun e -> printfn "%A %A %A" e.InputType e.Data e.Value)
+            }   
+
             h1 {
                 Id "foo"
                 Class "bar"