diff options
Diffstat (limited to 'src/View')
| -rw-r--r-- | src/View/Form/Autocomplete.ml | 36 | ||||
| -rw-r--r-- | src/View/Map/Marker.ml | 28 |
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 [| |] |