Show icons in marker form

2 files changed, 42 insertions, 22 deletions

diff --git a/src/View/Form/Autocomplete.ml b/src/View/Form/Autocomplete.ml
index 537316d..324a834 100644
--- a/src/View/Form/Autocomplete.ml
+++ b/src/View/Form/Autocomplete.ml
@@ -1,11 +1,8 @@
 let search s xs =
-  if s == "" then
-    [| |]
-  else
-    let results = Js.Array.filter (Js.String.includes s) xs in
-    if Js.Array.length results == 1 && results.(0) == s then [| |] else results
+  let results = Js.Array.filter (Js.String.includes s) xs in
+  if Js.Array.length results == 1 && results.(0) == s then [| |] else results
 
-let render_completion on_select entries =
+let render_completion render_entry on_select entries =
   H.div
     [| HA.class_ "g-Autocomplete__Completion" |]
     (entries
@@ -13,11 +10,14 @@ let render_completion on_select entries =
           H.button
             [| HA.class_ "g-Autocomplete__Entry"
             ;  HA.type_ "button"
-            ;  HE.on_click (fun _ -> on_select c)
+            ;  HE.on_click (fun e ->
+                let () = Event.stop_propagation e in
+                let () = Event.prevent_default e in
+                on_select c)
             |]
-            [| H.text c |]))
+            (render_entry c)))
 
-let create id label values on_input attrs =
+let create attrs id values render_entry on_input =
 
   let completion =
     H.div [| |] [| |]
@@ -26,6 +26,7 @@ let create id label values on_input attrs =
   let update_completion target value =
     let entries = search value values in
     Element.mount_on completion (render_completion
+      render_entry
       (fun selected ->
         let () = Element.set_value target selected in
         let () = Element.remove_children completion in
@@ -33,15 +34,13 @@ let create id label values on_input attrs =
       entries)
   in
 
+  let hide_completion () =
+    Element.mount_on completion (H.text "")
+  in
+
   H.div
     [| HA.class_ "g-Autocomplete" |]
-    [| H.div
-        [| HA.class_ "g-Form__Label" |]
-        [| H.label
-          [| HA.for_ id |]
-          [| H.text label |]
-        |]
-    ; H.input
+    [| H.input
       (Js.Array.concat
         [| HA.id id
         ; HA.class_ "g-Autocomplete__Input"
@@ -55,6 +54,11 @@ let create id label values on_input attrs =
             let value = Element.value target in
             let () = update_completion target value in
             on_input value)
+        ; HE.on_blur (fun _ ->
+            let _ = Js.Global.setTimeout
+              (fun _ -> hide_completion ())
+              100
+            in ())
         |]
         attrs)
       [| |]
diff --git a/src/View/Map/Marker.ml b/src/View/Map/Marker.ml
index 58ec4bd..e793742 100644
--- a/src/View/Map/Marker.ml
+++ b/src/View/Map/Marker.ml
@@ -20,12 +20,28 @@ let form on_validate init_name init_color init_icon =
                 [| |]
                 [| Form.input "g-MarkerForm__Name" "Name" init_name (fun newName -> name := newName)
                 ;  Form.color_input "g-MarkerForm__Color" "Color" init_color (fun newColor -> color := newColor)
-                ;  Autocomplete.create
-                    "g-MarkerForm__Icon"
-                    "Icon"
-                    FontAwesome.icons
-                    (fun newIcon -> let () = Js.log newIcon in icon := newIcon)
-                    [| HA.value init_icon |]
+                ;  H.div
+                    [| HA.class_ "g-Form__Field" |]
+                    [| H.div
+                        [| HA.class_ "g-Form__Label" |]
+                        [| H.label
+                          [| HA.for_ "g-MarkerForm__IconInput" |]
+                          [| H.text "Icon" |]
+                        |]
+                    ; let dom_icon = H.div [| HA.class_ ("fa fa-" ^ !icon) |] [| |] in
+                      Layout.line
+                        [| |]
+                        [| H.div [| HA.class_ "g-MarkerForm__Icon" |] [| dom_icon |]
+                        ;  Autocomplete.create
+                            [| HA.value init_icon |]
+                            "g-MarkerForm__IconInput"
+                            FontAwesome.icons
+                            (fun icon -> [| H.div [| HA.class_ ("fa fa-" ^ icon) |] [| |] ; H.text icon |])
+                            (fun newIcon ->
+                              let () = icon := newIcon in
+                              Element.set_class_name dom_icon ("fa fa-" ^ newIcon))
+                        |]
+                    |]
                 |]
             ;  Layout.line
                 [| |]