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 loadData() {
  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
  67   function loadMore(e) {
  68     e.preventDefault();
  69     e.stopPropagation();
  70
  71     var div = $(this).parents(".changeset_more");
  72
  73     $(this).hide();
  74     div.find(".loader").show();
  75
  76     $.get($(this).attr("href"), function(data) {
  77       div.replaceWith(data);
  78       updateMap();
  79     });
  80   }
  81
  82   function updateMap() {
  83     group.clearLayers();
  84
  85     var changesets = [];
  86
  87     $("[data-changeset]").each(function () {
  88       var changeset = $(this).data('changeset');
  89       if (changeset.bbox) {
  90         changeset.bounds = L.latLngBounds(
  91           [changeset.bbox.minlat, changeset.bbox.minlon],
  92           [changeset.bbox.maxlat, changeset.bbox.maxlon]);
  93         changesets.push(changeset);
  94       }
  95     });
  96
  97     changesets.sort(function (a, b) {
  98       return b.bounds.getSize() - a.bounds.getSize();
  99     });
 100
 101     for (var i = 0; i < changesets.length; ++i) {
 102       var changeset = changesets[i],
 103         rect = L.rectangle(changeset.bounds,
 104           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
 105       rect.id = changeset.id;
 106       rect.addTo(group);
 107     }
 108
 109     if (window.location.pathname !== '/history') {
 110       var bounds = group.getBounds();
 111       if (bounds.isValid()) map.fitBounds(bounds);
 112     }
 113   }
 114
 115   page.pushstate = page.popstate = function(path) {
 116     $("#history_tab").addClass("current");
 117     OSM.loadSidebarContent(path, page.load);
 118   };
 119
 120   page.load = function() {
 121     map.addLayer(group);
 122
 123     if (window.location.pathname === '/history') {
 124       map.on("moveend", loadData)
 125     }
 126
 127     loadData();
 128   };
 129
 130   page.unload = function() {
 131     map.removeLayer(group);
 132
 133     if (window.location.pathname === '/history') {
 134       map.off("moveend", loadData)
 135     }
 136
 137     $("#history_tab").removeClass("current");
 138   };
 139
 140   return page;
 141 };