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