]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/new_note.js.erb
e544c1a93b4c55db4e16144c80dbf561261c05e2
[rails.git] / app / assets / javascripts / index / new_note.js.erb
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
8   var noteIcons = {
9     "new": L.icon({
10       iconUrl: "<%= image_path 'new_note_marker.png' %>",
11       iconSize: [25, 40],
12       iconAnchor: [12, 40]
13     }),
14     "open": L.icon({
15       iconUrl: "<%= image_path 'open_note_marker.png' %>",
16       iconSize: [25, 40],
17       iconAnchor: [12, 40]
18     }),
19     "closed": L.icon({
20       iconUrl: "<%= image_path 'closed_note_marker.png' %>",
21       iconSize: [25, 40],
22       iconAnchor: [12, 40]
23     })
24   };
25
26   page.pushstate = page.popstate = function () {
27     page.load();
28   };
29
30   addNoteButton.on("click", function (e) {
31     e.preventDefault();
32     e.stopPropagation();
33
34     OSM.route('/new_note');
35   });
36
37   function createNote(marker, form, url) {
38     var location = marker.getLatLng();
39
40     marker.options.draggable = false;
41     marker.dragging.disable();
42
43     $(form).find("input[type=submit]").prop("disabled", true);
44
45     $.ajax({
46       url: url,
47       type: "POST",
48       oauth: true,
49       data: {
50         lat: location.lat,
51         lon: location.lng,
52         text: $(form.text).val()
53       },
54       success: function (feature) {
55         noteCreated(feature, marker);
56       }
57     });
58
59     function noteCreated(feature, marker) {
60       content.find("textarea").val("");
61       updateMarker(feature);
62       newNote = null;
63       noteLayer.removeLayer(marker);
64       addNoteButton.removeClass("active");
65       OSM.route('/browse/note/' + feature.properties.id);
66     }
67   }
68
69   function updateMarker(feature) {
70     marker = L.marker(feature.geometry.coordinates.reverse(), {
71       icon: noteIcons[feature.properties.status],
72       opacity: 0.9,
73       clickable: true
74     });
75     marker.id = feature.properties.id;
76     marker.addTo(noteLayer);
77     return marker;
78   }
79
80   function initialize() {
81     if (addNoteButton.hasClass("disabled")) return;
82     if (addNoteButton.hasClass("active")) return;
83
84     addNoteButton.addClass("active");
85
86     map.addLayer(noteLayer);
87
88     var mapSize = map.getSize();
89     var markerPosition;
90
91     if (mapSize.y > 800) {
92       markerPosition = [mapSize.x / 2, mapSize.y / 2];
93     } else if (mapSize.y > 400) {
94       markerPosition = [mapSize.x / 2, 400];
95     } else {
96       markerPosition = [mapSize.x / 2, mapSize.y];
97     }
98
99     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
100       icon: noteIcons["new"],
101       opacity: 0.9,
102       draggable: true
103     });
104
105     newNote.addTo(noteLayer);
106
107     newNote.on("remove", function () {
108       addNoteButton.removeClass("active");
109     }).on("dragstart",function () {
110       $(newNote).stopTime("removenote");
111     }).on("dragend", function () {
112       content.find("textarea").focus();
113     });
114
115     content.find("textarea")
116       .on("input", disableWhenBlank)
117       .focus();
118
119     function disableWhenBlank(e) {
120       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
121     }
122
123     content.find('input[type=submit]').on('click', function (e) {
124       e.preventDefault();
125       createNote(newNote, e.target.form, '/api/0.6/notes.json');
126     });
127   }
128
129   page.load = function () {
130     content.load(window.location.pathname + "?xhr=1", function (a, b, xhr) {
131       if (xhr.getResponseHeader('X-Page-Title')) {
132         document.title = xhr.getResponseHeader('X-Page-Title');
133       }
134       initialize();
135     });
136   };
137
138   page.unload = function () {
139     noteLayer.removeLayer(newNote);
140     addNoteButton.removeClass("active");
141   };
142
143   return page;
144 };