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