[SimplePrimitives] Optimize checkbox

Author: hyazinthh

src/Aardvark.UI.Primitives/Primitives/SimplePrimitives.fs

@@ -9,14 +9,6 @@ open Aardvark.UI.Generic
 module SimplePrimitives =
     open System
 
-
-    let private bootCheckBox =
-        String.concat "" [
-            "$('#__ID__').checkbox().checkbox('__INITIALSTATE__');"
-            "$('#__ID__').get(0).addEventListener('click', function(e) { aardvark.processEvent('__ID__', 'onclick'); e.stopPropagation(); }, true);"
-            "isChecked.onmessage = function(s) { if (s) { $('#__ID__').checkbox('check'); } else { $('#__ID__').checkbox('uncheck'); } };"
-        ]
-        
     module internal Html =
 
         let semui =
@@ -200,37 +192,33 @@ module SimplePrimitives =
                     None
 
         let checkbox (atts : AttributeMap<'msg>) (state : aval<bool>) (toggle : 'msg) (l : list<DomNode<'msg>>) =
-            let state = if state.IsConstant then AVal.custom (fun t -> state.GetValue t) else state
-
-            let ev =
-                {
-                    clientSide = fun _ _ -> ""
-                    serverSide = fun _ _ _ -> Seq.singleton toggle
-                }
-
-            let boot = bootCheckBox.Replace("__INITIALSTATE__", if state.GetValue() then "check" else "uncheck")
+            let boot =
+                String.concat "" [
+                    "const $self = $('#__ID__');"
+                    "$self.checkbox();"
+                    "$self[0].addEventListener('click', function(e) { aardvark.processEvent('__ID__', 'onclick'); e.stopPropagation(); }, true);"
+                    "isChecked.onmessage = function(s) { const behavior = s ? 'set checked' : 'set unchecked'; $self.checkbox(behavior); };"
+                ]
 
             let myAtts =
                 AttributeMap.ofList [
-                    "onclick", AttributeValue.Event ev
-                    "class", AttributeValue.String "ui checkbox"
+                    clazz "ui checkbox"
+                    onClick (fun _ -> toggle)
                 ]
 
             let atts = AttributeMap.union atts myAtts
             require Html.semui (
                 onBoot' ["isChecked", AVal.channel state] boot (
-                    Incremental.div atts (
-                        alist {
-                            yield input [attribute "type" "checkbox"]
-                            match l with
-                            | [l] ->
-                                match l.NodeTag with
-                                | Some "label" -> yield l
-                                | _ -> yield label [] [l]
-                            | _ ->
-                                yield label [] l
-                        }
-                    )
+                    Incremental.div atts <| AList.ofList [
+                        yield input [attribute "type" "checkbox"]
+                        match l with
+                        | [l] ->
+                            match l.NodeTag with
+                            | Some "label" -> yield l
+                            | _ -> yield label [] [l]
+                        | _ ->
+                            yield label [] l
+                    ]
                 )
             )
 

src/Examples (dotnetcore)/23 - Inputs/App.fs

@@ -83,12 +83,12 @@ let view (model : AdaptiveModel) =
                 ]
             ]
 
-            accordionSimple false [ clazz "inverted item" ] [
+            accordionSimple true [ clazz "inverted item" ] [
                 // Checkboxes
                 "Checkboxes", div [ clazz "menu" ] [
                     div [ clazz "item" ] [
                         simplecheckbox {
-                            attributes [clazz "ui inverted checkbox"]
+                            attributes [clazz "inverted"]
                             state model.active
                             toggle ToggleActive
                             content [ text "Is the thing active?"; i [clazz "icon rocket" ] [] ]
@@ -97,7 +97,7 @@ let view (model : AdaptiveModel) =
                     ]
 
                     div [ clazz "item" ] [
-                        checkbox [clazz "ui inverted toggle checkbox"] model.active ToggleActive "Is the thing active?"
+                        checkbox [clazz "inverted toggle"] model.active ToggleActive "Is the thing active?"
                     ]
                 ]