Fix #map-ui tooltip styling
[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     halo;
8
9   var noteIcons = {
10     "new": L.icon({
11       iconUrl: "<%= image_path 'new_note_marker.png' %>",
12       iconSize: [25, 40],
13       iconAnchor: [12, 40]
14     }),
15     "open": L.icon({
16       iconUrl: "<%= image_path 'open_note_marker.png' %>",
17       iconSize: [25, 40],
18       iconAnchor: [12, 40]
19     }),
20     "closed": L.icon({
21       iconUrl: "<%= image_path 'closed_note_marker.png' %>",
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.route('/new_note');
34   });
35
36   function createNote(marker, form, url) {
37     var location = marker.getLatLng();
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.route('/browse/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       clickable: 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, page.load);
81   };
82
83   page.load = function () {
84     if (addNoteButton.hasClass("disabled")) return;
85     if (addNoteButton.hasClass("active")) return;
86
87     addNoteButton.addClass("active");
88
89     map.addLayer(noteLayer);
90
91     var mapSize = map.getSize();
92     var markerPosition;
93
94     if (mapSize.y > 800) {
95       markerPosition = [mapSize.x / 2, mapSize.y / 2];
96     } else if (mapSize.y > 400) {
97       markerPosition = [mapSize.x / 2, 400];
98     } else {
99       markerPosition = [mapSize.x / 2, mapSize.y];
100     }
101
102     newNote = L.marker(map.containerPointToLatLng(markerPosition), {
103       icon: noteIcons["new"],
104       opacity: 0.9,
105       draggable: true
106     });
107
108     newNote.addTo(noteLayer);
109
110     halo = L.circleMarker(map.containerPointToLatLng(markerPosition), {
111       weight: 2.5,
112       radius: 20,
113       fillOpacity: 0.5,
114       color: "#FF6200"
115     });
116
117     map.addLayer(halo);
118
119     newNote.on("remove", function () {
120       addNoteButton.removeClass("active");
121     }).on("dragstart",function () {
122       $(newNote).stopTime("removenote");
123     }).on("dragend", function () {
124       content.find("textarea").focus();
125     });
126
127     content.find("textarea")
128       .on("input", disableWhenBlank)
129       .focus();
130
131     function disableWhenBlank(e) {
132       $(e.target.form.add).prop("disabled", $(e.target).val() === "");
133     }
134
135     content.find('input[type=submit]').on('click', function (e) {
136       e.preventDefault();
137       createNote(newNote, e.target.form, '/api/0.6/notes.json');
138     });
139   };
140
141   page.unload = function () {
142     noteLayer.removeLayer(newNote);
143     map.removeLayer(halo);
144     addNoteButton.removeClass("active");
145   };
146
147   return page;
148 };