]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/new_note.js
Merge remote-tracking branch 'upstream/pull/3126'
[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       newNote,
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(marker, form, url) {
39     var location = marker.getLatLng().wrap();
40
41     marker.options.draggable = false;
42     marker.dragging.disable();
43
44     $(form).find("input[type=submit]").prop("disabled", true);
45
46     $.ajax({
47       url: url,
48       type: "POST",
49       oauth: true,
50       data: {
51         lat: location.lat,
52         lon: location.lng,
53         text: $(form.text).val()
54       },
55       success: function (feature) {
56         noteCreated(feature, marker);
57       }
58     });
59
60     function noteCreated(feature, marker) {
61       content.find("textarea").val("");
62       updateMarker(feature);
63       newNote = null;
64       noteLayer.removeLayer(marker);
65       addNoteButton.removeClass("active");
66       OSM.router.route("/note/" + feature.properties.id);
67     }
68   }
69
70   function updateMarker(feature) {
71     var marker = L.marker(feature.geometry.coordinates.reverse(), {
72       icon: noteIcons[feature.properties.status],
73       opacity: 0.9,
74       interactive: true
75     });
76     marker.id = feature.properties.id;
77     marker.addTo(noteLayer);
78     return marker;
79   }
80
81   page.pushstate = page.popstate = function (path) {
82     OSM.loadSidebarContent(path, function () {
83       page.load(path);
84     });
85   };
86
87   function newHalo(loc, a) {
88     var hasHalo = halo && map.hasLayer(halo);
89
90     if (a === "dragstart" && hasHalo) {
91       map.removeLayer(halo);
92     } else {
93       if (hasHalo) map.removeLayer(halo);
94
95       halo = L.circleMarker(loc, {
96         weight: 2.5,
97         radius: 20,
98         fillOpacity: 0.5,
99         color: "#FF6200"
100       });
101
102       map.addLayer(halo);
103     }
104   }
105
106   page.load = function (path) {
107     if (addNoteButton.hasClass("disabled")) return;
108     if (addNoteButton.hasClass("active")) return;
109
110     addNoteButton.addClass("active");
111
112     map.addLayer(noteLayer);
113
114     var params = Qs.parse(path.substring(path.indexOf("?") + 1));
115     var markerLatlng;
116
117     if (params.lat && params.lon) {
118       markerLatlng = L.latLng(params.lat, params.lon);
119     } else {
120       markerLatlng = map.getCenter();
121     }
122
123     map.panInside(markerLatlng, {
124       padding: [50, 50]
125     });
126
127     newNote = L.marker(markerLatlng, {
128       icon: noteIcons.new,
129       opacity: 0.9,
130       draggable: true
131     });
132
133     newNote.on("dragstart dragend", function (a) {
134       newHalo(newNote.getLatLng(), a.type);
135     });
136
137     newNote.addTo(noteLayer);
138     newHalo(newNote.getLatLng());
139
140     newNote.on("remove", function () {
141       addNoteButton.removeClass("active");
142     }).on("dragstart", function () {
143       $(newNote).stopTime("removenote");
144     }).on("dragend", function () {
145       content.find("textarea").focus();
146     });
147
148     content.find("textarea")
149       .on("input", disableWhenBlank)
150       .focus();
151
152     function disableWhenBlank(e) {
153       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
154     }
155
156     content.find("input[type=submit]").on("click", function (e) {
157       e.preventDefault();
158       createNote(newNote, e.target.form, "/api/0.6/notes.json");
159     });
160
161     return map.getState();
162   };
163
164   page.unload = function () {
165     if (newNote) noteLayer.removeLayer(newNote);
166     if (halo) map.removeLayer(halo);
167     addNoteButton.removeClass("active");
168   };
169
170   return page;
171 };