27774f05b55476eddf0cc5fe628c061e0a944e45
[rails.git] / app / assets / javascripts / index / history.js
1 OSM.History = function(map) {
2   var page = {};
3
4   $("#sidebar_content")
5     .on("click", ".changeset_more a", loadMore)
6     .on("mouseover", "[data-changeset]", function () {
7       highlightChangeset($(this).data("changeset").id);
8     })
9     .on("mouseout", "[data-changeset]", function () {
10       unHighlightChangeset($(this).data("changeset").id);
11     })
12     .on("click", "[data-changeset]", function (e) {
13       if (!$(e.target).is('a')) {
14         clickChangeset($(this).data("changeset").id, e);
15       }
16     });
17
18   var group = L.featureGroup()
19     .on("mouseover", function (e) {
20       highlightChangeset(e.layer.id);
21     })
22     .on("mouseout", function (e) {
23       unHighlightChangeset(e.layer.id);
24     })
25     .on("click", function (e) {
26       clickChangeset(e.layer.id, e);
27     });
28
29   group.getLayerId = function(layer) {
30     return layer.id;
31   };
32
33   function highlightChangeset(id) {
34     group.getLayer(id).setStyle({fillOpacity: 0.3});
35     $("#changeset_" + id).addClass("selected");
36   }
37
38   function unHighlightChangeset(id) {
39     group.getLayer(id).setStyle({fillOpacity: 0});
40     $("#changeset_" + id).removeClass("selected");
41   }
42
43   function clickChangeset(id, e) {
44     var evt, el = $("#changeset_" + id).find("a.changeset_id")[0];
45     if ('createEvent' in document) {
46       evt = document.createEvent('MouseEvents');
47       evt.initMouseEvent('click',
48         true, // canBubble
49         true, // cancelable
50         window, // 'AbstractView'
51         e.clicks, // click count
52         e.screenX, // screenX
53         e.screenY, // screenY
54         e.clientX, // clientX
55         e.clientY, // clientY
56         e.ctrlKey, // ctrl
57         e.altKey, // alt
58         e.shiftKey, // shift
59         e.metaKey, // meta
60         e.button, // mouse button
61         e.relatedTarget // relatedTarget
62       );
63       el.dispatchEvent(evt);
64     } else {
65       evt = document.createEventObject();
66       el.fireEvent('onclick', evt);
67     }
68   }
69
70   function loadData() {
71     var data = {list: '1'};
72
73     if (window.location.pathname === '/history') {
74       data.bbox = map.getBounds().wrap().toBBoxString();
75     }
76
77     $.ajax({
78       url: window.location.pathname,
79       method: "GET",
80       data: data,
81       success: function(html, status, xhr) {
82         $('#sidebar_content .changesets').html(html);
83         updateMap();
84       }
85     });
86   }
87
88   function loadMore(e) {
89     e.preventDefault();
90     e.stopPropagation();
91
92     var div = $(this).parents(".changeset_more");
93
94     $(this).hide();
95     div.find(".loader").show();
96
97     $.get($(this).attr("href"), function(data) {
98       div.replaceWith(data);
99       updateMap();
100     });
101   }
102
103   function updateMap() {
104     group.clearLayers();
105
106     var changesets = [];
107
108     $("[data-changeset]").each(function () {
109       var changeset = $(this).data('changeset');
110       if (changeset.bbox) {
111         changeset.bounds = L.latLngBounds(
112           [changeset.bbox.minlat, changeset.bbox.minlon],
113           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
114         changesets.push(changeset);
115       }
116     });
117
118     changesets.sort(function (a, b) {
119       return b.bounds.getSize() - a.bounds.getSize();
120     });
121
122     for (var i = 0; i < changesets.length; ++i) {
123       var changeset = changesets[i],
124         rect = L.rectangle(changeset.bounds,
125           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
126       rect.id = changeset.id;
127       rect.addTo(group);
128     }
129
130     if (window.location.pathname !== '/history') {
131       var bounds = group.getBounds();
132       if (bounds.isValid()) map.fitBounds(bounds);
133     }
134   }
135
136   page.pushstate = page.popstate = function(path) {
137     $("#history_tab").addClass("current");
138     OSM.loadSidebarContent(path, page.load);
139   };
140
141   page.load = function() {
142     map.addLayer(group);
143
144     if (window.location.pathname === '/history') {
145       map.on("moveend", loadData)
146     }
147
148     loadData();
149   };
150
151   page.unload = function() {
152     map.removeLayer(group);
153
154     if (window.location.pathname === '/history') {
155       map.off("moveend", loadData)
156     }
157
158     $("#history_tab").removeClass("current");
159   };
160
161   return page;
162 };