]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/index/history.js
Refine changeset browse behavior
[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.3});
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     var data = {};
47
48     if (window.location.pathname === '/history') {
49       data = {bbox: map.getBounds().wrap().toBBoxString()};
50     }
51
52     $.ajax({
53       url: window.location.pathname,
54       method: "GET",
55       data: data,
56       success: function(html, status, xhr) {
57         $('#sidebar_content .changesets').html(html);
58         updateMap();
59       }
60     });
61   }
62
63   function loadMore(e) {
64     e.preventDefault();
65     e.stopPropagation();
66
67     var div = $(this).parents(".changeset_more");
68
69     $(this).hide();
70     div.find(".loader").show();
71
72     $.get($(this).attr("href"), function(data) {
73       div.replaceWith(data);
74       updateMap();
75     });
76   }
77
78   function updateMap() {
79     group.clearLayers();
80
81     var changesets = [];
82
83     $("[data-changeset]").each(function () {
84       var changeset = $(this).data('changeset');
85       if (changeset.bbox) {
86         changeset.bounds = L.latLngBounds(
87           [changeset.bbox.minlat, changeset.bbox.minlon],
88           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
89         changesets.push(changeset);
90       }
91     });
92
93     changesets.sort(function (a, b) {
94       return b.bounds.getSize() - a.bounds.getSize();
95     });
96
97     for (var i = 0; i < changesets.length; ++i) {
98       var changeset = changesets[i],
99         rect = L.rectangle(changeset.bounds,
100           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
101       rect.id = changeset.id;
102       rect.addTo(group);
103     }
104
105     if (window.location.pathname !== '/history') {
106       var bounds = group.getBounds();
107       if (bounds.isValid()) map.fitBounds(bounds);
108     }
109   }
110
111   page.pushstate = page.popstate = function(path) {
112     $("#history_tab").addClass("current");
113     OSM.loadSidebarContent(path, page.load);
114   };
115
116   page.load = function() {
117     map.addLayer(group);
118
119     if (window.location.pathname === '/history') {
120       map.on("moveend", loadData)
121     }
122
123     loadData();
124   };
125
126   page.unload = function() {
127     map.removeLayer(group);
128
129     if (window.location.pathname === '/history') {
130       map.off("moveend", loadData)
131     }
132
133     $("#history_tab").removeClass("current");
134   };
135
136   return page;
137 };