blob: 58ec4bde92be3283ff0885950378f34fda91e85b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
let form on_validate init_name init_color init_icon =
let name = ref init_name in
let color = ref init_color in
let icon = ref init_icon in
let on_validate () =
let () = on_validate !name !color !icon in
Modal.hide ()
in
H.div
[| |]
[| Layout.section
[| |]
[| H.form
[| HA.class_ "g-MarkerForm"
; HE.on_submit (fun e ->
let () = Event.prevent_default e in
on_validate ())
|]
[| Layout.section
[| |]
[| 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 |]
|]
; Layout.line
[| |]
[| Button.action
[| HE.on_click (fun _ -> on_validate ()) |]
[| H.text "Save" |]
; Button.cancel
[| HE.on_click (fun _ -> Modal.hide ())
; HA.type_ "button"
|]
[| H.text "Cancel" |]
|]
|]
|]
|]
let create on_remove on_update pos init_name init_color init_icon =
let marker =
Leaflet.marker pos
{ title = init_name
; icon = Icon.create init_icon init_color
; draggable = true
}
in
(* Context menu *)
let () = Leaflet.on marker "contextmenu" (fun event ->
ContextMenu.show
(Leaflet.original_event event)
[| { label = "Modify"; action = fun _ -> Modal.show (form (on_update pos pos) init_name init_color init_icon) }
; { label = "Remove"; action = fun _ -> on_remove pos }
|])
in
(* Move the cursor on drag *)
let () = Leaflet.on marker "dragend" (fun e ->
let newPos = Leaflet.get_lat_lng (Leaflet.target e) () in
on_update pos newPos init_name init_color init_icon) in
let () = Leaflet.on marker "dblclick" (fun _ ->
Modal.show (form (on_update pos pos) init_name init_color init_icon)) in
marker
|
