]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/new_note.js
76d134ce6bd4de0d6282bb25d148451f8c6e96d7
[rails.git] / app / assets / javascripts / index / new_note.js
1 //= require qs/dist/qs
2
3 OSM.NewNote = function (map) {
4   var noteLayer = map.noteLayer,
5       content = $("#sidebar_content"),
6       page = {},
7       addNoteButton = $(".control-note .control-button"),
8       newNoteMarker,
9       halo;
10
11   var noteIcons = {
12     "new": L.icon({
13       iconUrl: OSM.NEW_NOTE_MARKER,
14       iconSize: [25, 40],
15       iconAnchor: [12, 40]
16     }),
17     "open": L.icon({
18       iconUrl: OSM.OPEN_NOTE_MARKER,
19       iconSize: [25, 40],
20       iconAnchor: [12, 40]
21     }),
22     "closed": L.icon({
23       iconUrl: OSM.CLOSED_NOTE_MARKER,
24       iconSize: [25, 40],
25       iconAnchor: [12, 40]
26     })
27   };
28
29   addNoteButton.on("click", function (e) {
30     e.preventDefault();
31     e.stopPropagation();
32
33     if ($(this).hasClass("disabled")) return;
34
35     OSM.router.route("/note/new");
36   });
37
38   function createNote(location, text, callback) {
39     $.ajax({
40       url: "/api/0.6/notes.json",
41       type: "POST",
42       oauth: true,
43       data: {
44         lat: location.lat,
45         lon: location.lng,
46         text
47       },
48       success: callback
49     });
50   }
51
52   function addCreatedNoteMarker(feature) {
53     var marker = L.marker(feature.geometry.coordinates.reverse(), {
54       icon: noteIcons[feature.properties.status],
55       opacity: 0.9,
56       interactive: true
57     });
58     marker.id = feature.properties.id;
59     marker.addTo(noteLayer);
60   }
61
62   function addHalo(latlng) {
63     if (halo) map.removeLayer(halo);
64
65     halo = L.circleMarker(latlng, {
66       weight: 2.5,
67       radius: 20,
68       fillOpacity: 0.5,
69       color: "#FF6200"
70     });
71
72     map.addLayer(halo);
73   }
74
75   function removeHalo() {
76     if (halo) map.removeLayer(halo);
77     halo = null;
78   }
79
80   function addNewNoteMarker(latlng) {
81     if (newNoteMarker) map.removeLayer(newNoteMarker);
82
83     newNoteMarker = L.marker(latlng, {
84       icon: noteIcons.new,
85       opacity: 0.9,
86       draggable: true
87     });
88
89     newNoteMarker.on("dragstart dragend", function (a) {
90       removeHalo();
91       if (a.type === "dragend") {
92         addHalo(newNoteMarker.getLatLng());
93       }
94     });
95
96     newNoteMarker.addTo(map);
97     addHalo(newNoteMarker.getLatLng());
98
99     newNoteMarker.on("dragend", function () {
100       content.find("textarea").focus();
101     });
102   }
103
104   function removeNewNoteMarker() {
105     removeHalo();
106     if (newNoteMarker) map.removeLayer(newNoteMarker);
107     newNoteMarker = null;
108   }
109
110   function updateControls() {
111     const zoomedOut = addNoteButton.hasClass("disabled");
112     const withoutText = content.find("textarea").val() === "";
113
114     content.find("#new-note-zoom-warning").prop("hidden", !zoomedOut);
115     content.find("input[type=submit]").prop("disabled", zoomedOut || withoutText);
116     if (newNoteMarker) newNoteMarker.setOpacity(zoomedOut ? 0.5 : 0.9);
117   }
118
119   page.pushstate = page.popstate = function (path) {
120     OSM.loadSidebarContent(path, function () {
121       page.load(path);
122     });
123   };
124
125   page.load = function (path) {
126     addNoteButton.addClass("active");
127
128     map.addLayer(noteLayer);
129
130     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
131     var markerLatlng;
132
133     if (params.lat && params.lon) {
134       markerLatlng = L.latLng(params.lat, params.lon);
135     } else {
136       markerLatlng = map.getCenter();
137     }
138
139     map.panInside(markerLatlng, {
140       padding: [50, 50]
141     });
142
143     addNewNoteMarker(markerLatlng);
144
145     content.find("textarea")
146       .on("input", updateControls)
147       .focus();
148
149     content.find("input[type=submit]").on("click", function (e) {
150       const location = newNoteMarker.getLatLng().wrap();
151       const text = content.find("textarea").val();
152
153       e.preventDefault();
154       $(this).prop("disabled", true);
155       newNoteMarker.options.draggable = false;
156       newNoteMarker.dragging.disable();
157
158       createNote(location, text, (feature) => {
159         content.find("textarea").val("");
160         addCreatedNoteMarker(feature);
161         OSM.router.route("/note/" + feature.properties.id);
162       });
163     });
164
165     addNoteButton.on("disabled enabled", updateControls);
166     updateControls();
167
168     return map.getState();
169   };
170
171   page.unload = function () {
172     addNoteButton.off("disabled enabled", updateControls);
173     removeNewNoteMarker();
174     addNoteButton.removeClass("active");
175   };
176
177   return page;
178 };