blob: 1c0c0d6479af2331dd992a7c825bd16571aa1105 (
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
let form on_validate colors 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"
[| HE.on_input (fun e -> name := (Element.value (Event.target e)))
; HA.value init_name
|]
; Form.color_input colors "g-MarkerForm__Color" "Color" init_color (fun newColor -> color := newColor)
; 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
[| HA.class_ "g-MarkerForm__AutocompleteAndIcon" |]
[| Autocomplete.create
[| HA.value init_icon
; HA.class_ "g-MarkerForm__Autocomplete"
|]
"g-MarkerForm__IconInput"
FontAwesome.icons
(fun icon ->
[| H.div
[| HA.class_ ("g-MarkerForm__IconEntry fa fa-" ^ icon) |]
[| |]
; H.text icon
|])
(fun newIcon ->
let () = icon := newIcon in
Element.set_class_name dom_icon ("fa fa-" ^ newIcon))
; H.div [| HA.class_ "g-MarkerForm__Icon" |] [| dom_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 colors 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) colors 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) colors init_name init_color init_icon)) in
marker
|
