Add note creation to the sidebar
[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 (e) {
108           addNoteButton.removeClass("active");
109         }).on("dragstart", function (e) {
110           $(newNote).stopTime("removenote");
111         }).on("dragend", function (e) {
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 }