app/assets/javascripts/index/history.js

   1 //= require jquery.simulate
   2
   3 OSM.History = function(map) {
   4   var page = {};
   5
   6   $("#sidebar_content")
   7     .on("click", ".changeset_more a", loadMore)
   8     .on("mouseover", "[data-changeset]", function () {
   9       highlightChangeset($(this).data("changeset").id);
  10     })
  11     .on("mouseout", "[data-changeset]", function () {
  12       unHighlightChangeset($(this).data("changeset").id);
  13     })
  14     .on("click", "[data-changeset]", function (e) {
  15       if (!$(e.target).is('a')) {
  16         clickChangeset($(this).data("changeset").id, e);
  17       }
  18     });
  19
  20   var group = L.featureGroup()
  21     .on("mouseover", function (e) {
  22       highlightChangeset(e.layer.id);
  23     })
  24     .on("mouseout", function (e) {
  25       unHighlightChangeset(e.layer.id);
  26     })
  27     .on("click", function (e) {
  28       clickChangeset(e.layer.id, e);
  29     });
  30
  31   group.getLayerId = function(layer) {
  32     return layer.id;
  33   };
  34
  35   function highlightChangeset(id) {
  36     group.getLayer(id).setStyle({fillOpacity: 0.3});
  37     $("#changeset_" + id).addClass("selected");
  38   }
  39
  40   function unHighlightChangeset(id) {
  41     group.getLayer(id).setStyle({fillOpacity: 0});
  42     $("#changeset_" + id).removeClass("selected");
  43   }
  44
  45   function clickChangeset(id, e) {
  46     $("#changeset_" + id).find("a.changeset_id").simulate("click", e);
  47   }
  48
  49   function update() {
  50     var data = {list: '1'};
  51
  52     if (window.location.pathname === '/history') {
  53       data.bbox = map.getBounds().wrap().toBBoxString();
  54     }
  55
  56     $.ajax({
  57       url: window.location.pathname,
  58       method: "GET",
  59       data: data,
  60       success: function(html, status, xhr) {
  61         $('#sidebar_content .changesets').html(html);
  62         updateMap();
  63       }
  64     });
  65
  66     var feedLink = $('link[type="application/atom+xml"]'),
  67       feedHref = feedLink.attr('href').split('?')[0];
  68
  69     feedLink.attr('href', feedHref + '?bbox=' + data.bbox);
  70   }
  71
  72   function loadMore(e) {
  73     e.preventDefault();
  74     e.stopPropagation();
  75
  76     var div = $(this).parents(".changeset_more");
  77
  78     $(this).hide();
  79     div.find(".loader").show();
  80
  81     $.get($(this).attr("href"), function(data) {
  82       div.replaceWith(data);
  83       updateMap();
  84     });
  85   }
  86
  87   function updateMap() {
  88     group.clearLayers();
  89
  90     var changesets = [];
  91
  92     $("[data-changeset]").each(function () {
  93       var changeset = $(this).data('changeset');
  94       if (changeset.bbox) {
  95         changeset.bounds = L.latLngBounds(
  96           [changeset.bbox.minlat, changeset.bbox.minlon],
  97           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
  98         changesets.push(changeset);
  99       }
 100     });
 101
 102     changesets.sort(function (a, b) {
 103       return b.bounds.getSize() - a.bounds.getSize();
 104     });
 105
 106     for (var i = 0; i < changesets.length; ++i) {
 107       var changeset = changesets[i],
 108         rect = L.rectangle(changeset.bounds,
 109           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
 110       rect.id = changeset.id;
 111       rect.addTo(group);
 112     }
 113
 114     if (window.location.pathname !== '/history') {
 115       var bounds = group.getBounds();
 116       if (bounds.isValid()) map.fitBounds(bounds);
 117     }
 118   }
 119
 120   page.pushstate = page.popstate = function(path) {
 121     $("#history_tab").addClass("current");
 122     OSM.loadSidebarContent(path, page.load);
 123   };
 124
 125   page.load = function() {
 126     map.addLayer(group);
 127
 128     if (window.location.pathname === '/history') {
 129       map.on("moveend", update);
 130     }
 131
 132     update();
 133   };
 134
 135   page.unload = function() {
 136     map.removeLayer(group);
 137     map.off("moveend", update);
 138
 139     $("#history_tab").removeClass("current");
 140   };
 141
 142   return page;
 143 };