X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/091818da5d4619e02f3093cff6ac9ca31f0ea84e..754a0a9cb5c49114181fd1d1181eea0d757dbac4:/app/assets/javascripts/index/history.js?ds=inline diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js index b0f34a2ad..c6ba0c2ed 100644 --- a/app/assets/javascripts/index/history.js +++ b/app/assets/javascripts/index/history.js @@ -1,6 +1,6 @@ -//= require jquery.simulate +//= require jquery-simulate/jquery.simulate -OSM.History = function(map) { +OSM.History = function (map) { var page = {}; $("#sidebar_content") @@ -10,16 +10,6 @@ OSM.History = function(map) { }) .on("mouseout", "[data-changeset]", function () { unHighlightChangeset($(this).data("changeset").id); - }) - .on("mousedown", "[data-changeset]", function () { - var moved = false; - $(this).one("click", function (e) { - if (!moved && !$(e.target).is('a')) { - clickChangeset($(this).data("changeset").id, e); - } - }).one("mousemove", function () { - moved = true; - }); }); var group = L.featureGroup() @@ -30,20 +20,22 @@ OSM.History = function(map) { 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"); } @@ -51,27 +43,37 @@ OSM.History = function(map) { $("#changeset_" + id).find("a.changeset_id").simulate("click", e); } + function displayFirstChangesets(html) { + $("#sidebar_content .changesets").html(html); + } + + 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'}; + var data = { list: "1" }; - if (window.location.pathname === '/history') { + 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) { - $('#sidebar_content .changesets').html(html); + success: function (html) { + displayFirstChangesets(html); updateMap(); } }); - - var feedLink = $('link[type="application/atom+xml"]'), - feedHref = feedLink.attr('href').split('?')[0]; - - feedLink.attr('href', feedHref + '?bbox=' + data.bbox); } function loadMore(e) { @@ -83,42 +85,36 @@ OSM.History = function(map) { $(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() { - group.clearLayers(); - - var changesets = []; - - $("[data-changeset]").each(function () { - var changeset = $(this).data('changeset'); - if (changeset.bbox) { - 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 + var changesets = []; - if (width < minSize) { - bottomLeft.x -= ((minSize - width) / 2); - topRight.x += ((minSize - width) / 2); - } + function updateBounds() { + group.clearLayers(); - if (height < minSize) { - bottomLeft.y += ((minSize - height) / 2); - topRight.y -= ((minSize - height) / 2); - } + 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 - var bounds = [map.unproject(bottomLeft), - map.unproject(topRight)]; + if (width < minSize) { + bottomLeft.x -= ((minSize - width) / 2); + topRight.x += ((minSize - width) / 2); + } - changeset.bounds = L.latLngBounds(bounds); - changesets.push(changeset); + 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) { @@ -127,38 +123,47 @@ OSM.History = function(map) { 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) { - $("#history_tab").addClass("current"); + page.pushstate = page.popstate = function (path) { OSM.loadSidebarContent(path, page.load); }; - page.load = function() { + page.load = function () { map.addLayer(group); - if (window.location.pathname === '/history') { + if (window.location.pathname === "/history") { map.on("moveend", update); } + map.on("zoomend", updateBounds); + update(); }; - page.unload = function() { + page.unload = function () { map.removeLayer(group); map.off("moveend", update); - - $("#history_tab").removeClass("current"); }; return page;