f63cee25045af6fd0c2762275fb4a271675c9ba0
[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 () {
13       clickChangeset($(this).data("changeset").id);
14     });
15
16   var group = L.featureGroup()
17     .on("mouseover", function (e) {
18       highlightChangeset(e.layer.id);
19     })
20     .on("mouseout", function (e) {
21       unHighlightChangeset(e.layer.id);
22     })
23     .on("click", function (e) {
24       clickChangeset(e.layer.id);
25     });
26
27   group.getLayerId = function(layer) {
28     return layer.id;
29   };
30
31   function highlightChangeset(id) {
32     group.getLayer(id).setStyle({fillOpacity: 0.5});
33     $("#changeset_" + id).addClass("selected");
34   }
35
36   function unHighlightChangeset(id) {
37     group.getLayer(id).setStyle({fillOpacity: 0});
38     $("#changeset_" + id).removeClass("selected");
39   }
40
41   function clickChangeset(id) {
42     OSM.route($("#changeset_" + id).find(".changeset_id").attr("href"));
43   }
44
45   function loadData() {
46     $.ajax({
47       url: window.location.pathname,
48       method: "GET",
49       data: {bbox: map.getBounds().toBBoxString()},
50       success: function(html) {
51         $('#sidebar_content .changesets').html(html);
52         updateMap();
53       }
54     });
55   }
56
57   function loadMore(e) {
58     e.preventDefault();
59     e.stopPropagation();
60
61     var div = $(this).parents(".changeset_more");
62
63     $(this).hide();
64     div.find(".loader").show();
65
66     $.get($(this).attr("href"), function(data) {
67       div.replaceWith(data);
68       updateMap();
69     });
70   }
71
72   function updateMap() {
73     group.clearLayers();
74
75     var changesets = [];
76
77     $("[data-changeset]").each(function () {
78       var changeset = $(this).data('changeset');
79       if (changeset.bbox) {
80         changeset.bounds = L.latLngBounds(
81           [changeset.bbox.minlat, changeset.bbox.minlon],
82           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
83         changesets.push(changeset);
84       }
85     });
86
87     changesets.sort(function (a, b) {
88       return b.bounds.getSize() - a.bounds.getSize();
89     });
90
91     for (var i = 0; i < changesets.length; ++i) {
92       var changeset = changesets[i],
93         rect = L.rectangle(changeset.bounds,
94           {weight: 2, color: "#ee9900", fillColor: "#ffff55", fillOpacity: 0});
95       rect.id = changeset.id;
96       rect.addTo(group);
97     }
98   }
99
100   page.pushstate = page.popstate = function(path) {
101     $("#history_tab").addClass("current");
102     $("#sidebar").removeClass("minimized");
103     map.invalidateSize();
104     $("#sidebar_content").load(path, page.load);
105   };
106
107   page.load = function() {
108     map
109       .on("moveend", loadData)
110       .addLayer(group);
111
112     loadData();
113   };
114
115   page.unload = function() {
116     map
117       .off("moveend", loadData)
118       .removeLayer(group);
119
120     group.clearLayers();
121     $("#history_tab").removeClass("current");
122   };
123
124   return page;
125 };