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 };