]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/new_note.js.erb
c47cb563c9ffa91abc93e71ddb23d659ee93fafb
[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   addNoteButton.on("click", function (e) {
27     e.preventDefault();
28     e.stopPropagation();
29
30     OSM.route('/new_note');
31   });
32
33   function createNote(marker, form, url) {
34     var location = marker.getLatLng();
35
36     marker.options.draggable = false;
37     marker.dragging.disable();
38
39     $(form).find("input[type=submit]").prop("disabled", true);
40
41     $.ajax({
42       url: url,
43       type: "POST",
44       oauth: true,
45       data: {
46         lat: location.lat,
47         lon: location.lng,
48         text: $(form.text).val()
49       },
50       success: function (feature) {
51         noteCreated(feature, marker);
52       }
53     });
54
55     function noteCreated(feature, marker) {
56       content.find("textarea").val("");
57       updateMarker(feature);
58       newNote = null;
59       noteLayer.removeLayer(marker);
60       addNoteButton.removeClass("active");
61       OSM.route('/browse/note/' + feature.properties.id);
62     }
63   }
64
65   function updateMarker(feature) {
66     var marker = L.marker(feature.geometry.coordinates.reverse(), {
67       icon: noteIcons[feature.properties.status],
68       opacity: 0.9,
69       clickable: true
70     });
71     marker.id = feature.properties.id;
72     marker.addTo(noteLayer);
73     return marker;
74   }
75
76   page.pushstate = page.popstate = function (path) {
77     OSM.loadSidebarContent(path, page.load);
78   };
79
80   page.load = function () {
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.unload = function () {
130     noteLayer.removeLayer(newNote);
131     addNoteButton.removeClass("active");
132   };
133
134   return page;
135 };