-OSM.History = function(map) {
+//= require jquery-simulate/jquery.simulate
+
+OSM.History = function (map) {
var page = {};
$("#sidebar_content")
})
.on("mouseout", "[data-changeset]", function () {
unHighlightChangeset($(this).data("changeset").id);
- })
- .on("click", "[data-changeset]", function (e) {
- if (!$(e.target).is('a')) {
- clickChangeset($(this).data("changeset").id, e);
- }
});
var group = L.featureGroup()
unHighlightChangeset(e.layer.id);
})
.on("click", function (e) {
- clickChangeset(e.layer.id, e);
+ clickChangeset(e.layer.id, e.originalEvent);
});
- group.getLayerId = function(layer) {
+ group.getLayerId = function (layer) {
return layer.id;
};
function highlightChangeset(id) {
- group.getLayer(id).setStyle({fillOpacity: 0.3});
+ var layer = group.getLayer(id);
+ if (layer) layer.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
$("#changeset_" + id).addClass("selected");
}
function unHighlightChangeset(id) {
- group.getLayer(id).setStyle({fillOpacity: 0});
+ var layer = group.getLayer(id);
+ if (layer) layer.setStyle({ fillOpacity: 0, color: "#FF9500", weight: 2 });
$("#changeset_" + id).removeClass("selected");
}
function clickChangeset(id, e) {
- var evt, el = $("#changeset_" + id).find("a.changeset_id")[0];
- if ('createEvent' in document) {
- evt = document.createEvent('MouseEvents');
- evt.initMouseEvent('click',
- true, // canBubble
- true, // cancelable
- window, // 'AbstractView'
- e.clicks, // click count
- e.screenX, // screenX
- e.screenY, // screenY
- e.clientX, // clientX
- e.clientY, // clientY
- e.ctrlKey, // ctrl
- e.altKey, // alt
- e.shiftKey, // shift
- e.metaKey, // meta
- e.button, // mouse button
- e.relatedTarget // relatedTarget
- );
- el.dispatchEvent(evt);
- } else {
- evt = document.createEventObject();
- el.fireEvent('onclick', evt);
- }
+ $("#changeset_" + id).find("a.changeset_id").simulate("click", e);
}
- function loadData() {
- var data = {list: '1'};
+ function displayFirstChangesets(html) {
+ $("#sidebar_content .changesets").html(html);
+ }
- if (window.location.pathname === '/history') {
+ function displayMoreChangesets(html) {
+ $("#sidebar_content .changeset_more").replaceWith(html);
+ var oldList = $("#sidebar_content .changesets ol").first();
+ var newList = oldList.next("ol");
+ newList.children().appendTo(oldList);
+ newList.remove();
+ }
+
+ function update() {
+ var data = { list: "1" };
+
+ if (window.location.pathname === "/history") {
data.bbox = map.getBounds().wrap().toBBoxString();
+ var feedLink = $("link[type=\"application/atom+xml\"]"),
+ feedHref = feedLink.attr("href").split("?")[0];
+ feedLink.attr("href", feedHref + "?bbox=" + data.bbox);
}
$.ajax({
url: window.location.pathname,
method: "GET",
data: data,
- success: function(html, status, xhr) {
- $('#sidebar_content .changesets').html(html);
+ success: function (html) {
+ displayFirstChangesets(html);
updateMap();
}
});
$(this).hide();
div.find(".loader").show();
- $.get($(this).attr("href"), function(data) {
- div.replaceWith(data);
+ $.get($(this).attr("href"), function (html) {
+ displayMoreChangesets(html);
updateMap();
});
}
- function updateMap() {
+ var changesets = [];
+
+ function updateBounds() {
group.clearLayers();
- var changesets = [];
+ changesets.forEach(function (changeset) {
+ var bottomLeft = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
+ topRight = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
+ width = topRight.x - bottomLeft.x,
+ height = bottomLeft.y - topRight.y,
+ minSize = 20; // Min width/height of changeset in pixels
- $("[data-changeset]").each(function () {
- var changeset = $(this).data('changeset');
- if (changeset.bbox) {
- changeset.bounds = L.latLngBounds(
- [changeset.bbox.minlat, changeset.bbox.minlon],
- [changeset.bbox.maxlat, changeset.bbox.maxlon]);
- changesets.push(changeset);
+ if (width < minSize) {
+ bottomLeft.x -= ((minSize - width) / 2);
+ topRight.x += ((minSize - width) / 2);
}
+
+ if (height < minSize) {
+ bottomLeft.y += ((minSize - height) / 2);
+ topRight.y -= ((minSize - height) / 2);
+ }
+
+ changeset.bounds = L.latLngBounds(map.unproject(bottomLeft),
+ map.unproject(topRight));
});
changesets.sort(function (a, b) {
for (var i = 0; i < changesets.length; ++i) {
var changeset = changesets[i],
- rect = L.rectangle(changeset.bounds,
- {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
+ rect = L.rectangle(changeset.bounds,
+ { weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFAF", fillOpacity: 0 });
rect.id = changeset.id;
rect.addTo(group);
}
+ }
+
+ function updateMap() {
+ changesets = $("[data-changeset]").map(function (index, element) {
+ return $(element).data("changeset");
+ }).get().filter(function (changeset) {
+ return changeset.bbox;
+ });
+
+ updateBounds();
- if (window.location.pathname !== '/history') {
+ if (window.location.pathname !== "/history") {
var bounds = group.getBounds();
if (bounds.isValid()) map.fitBounds(bounds);
}
}
- page.pushstate = page.popstate = function(path) {
+ page.pushstate = page.popstate = function (path) {
$("#history_tab").addClass("current");
OSM.loadSidebarContent(path, page.load);
};
- page.load = function() {
+ page.load = function () {
map.addLayer(group);
- if (window.location.pathname === '/history') {
- map.on("moveend", loadData)
+ if (window.location.pathname === "/history") {
+ map.on("moveend", update);
}
- loadData();
+ map.on("zoomend", updateBounds);
+
+ update();
};
- page.unload = function() {
+ page.unload = function () {
map.removeLayer(group);
-
- if (window.location.pathname === '/history') {
- map.off("moveend", loadData)
- }
+ map.off("moveend", update);
$("#history_tab").removeClass("current");
};