]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/note.js
Show spinner using delayed css animation in sidebar loader
[rails.git] / app / assets / javascripts / index / note.js
1 OSM.Note = function (map) {
2   var content = $("#sidebar_content"),
3       page = {};
4
5   var noteIcons = {
6     "new": L.icon({
7       iconUrl: OSM.NEW_NOTE_MARKER,
8       iconSize: [25, 40],
9       iconAnchor: [12, 40]
10     }),
11     "open": L.icon({
12       iconUrl: OSM.OPEN_NOTE_MARKER,
13       iconSize: [25, 40],
14       iconAnchor: [12, 40]
15     }),
16     "closed": L.icon({
17       iconUrl: OSM.CLOSED_NOTE_MARKER,
18       iconSize: [25, 40],
19       iconAnchor: [12, 40]
20     })
21   };
22
23   page.pushstate = page.popstate = function (path, id) {
24     OSM.loadSidebarContent(path, function () {
25       initialize(path, id);
26
27       var data = $(".details").data();
28       if (!data) return;
29       var latLng = L.latLng(data.coordinates.split(","));
30       if (!map.getBounds().contains(latLng)) moveToNote();
31     });
32   };
33
34   page.load = function (path, id) {
35     initialize(path, id);
36     moveToNote();
37   };
38
39   function initialize(path, id) {
40     content.find("button[type=submit]").on("click", function (e) {
41       e.preventDefault();
42       var data = $(e.target).data();
43       var form = e.target.form;
44
45       $(form).find("button[type=submit]").prop("disabled", true);
46
47       $.ajax({
48         url: data.url,
49         type: data.method,
50         oauth: true,
51         data: { text: $(form.text).val() },
52         success: function () {
53           OSM.loadSidebarContent(path, function () {
54             initialize(path, id);
55             moveToNote();
56           });
57         },
58         error: function (xhr) {
59           $(form).find("#comment-error")
60             .text(xhr.responseText)
61             .prop("hidden", false);
62           updateButtons(form);
63         }
64       });
65     });
66
67     content.find("textarea").on("input", function (e) {
68       updateButtons(e.target.form);
69     });
70
71     content.find("textarea").val("").trigger("input");
72
73     var data = $(".details").data();
74
75     if (data) {
76       map.addObject({
77         type: "note",
78         id: parseInt(id, 10),
79         latLng: L.latLng(data.coordinates.split(",")),
80         icon: noteIcons[data.status]
81       });
82     }
83   }
84
85   function updateButtons(form) {
86     $(form).find("button[type=submit]").prop("disabled", false);
87     if ($(form.text).val() === "") {
88       $(form.close).text($(form.close).data("defaultActionText"));
89       $(form.comment).prop("disabled", true);
90     } else {
91       $(form.close).text($(form.close).data("commentActionText"));
92       $(form.comment).prop("disabled", false);
93     }
94   }
95
96   function moveToNote() {
97     var data = $(".details").data();
98     if (!data) return;
99     var latLng = L.latLng(data.coordinates.split(","));
100
101     if (!window.location.hash || window.location.hash.match(/^#?c[0-9]+$/)) {
102       OSM.router.withoutMoveListener(function () {
103         map.setView(latLng, 15, { reset: true });
104       });
105     }
106   }
107
108   page.unload = function () {
109     map.removeObject();
110   };
111
112   return page;
113 };