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("mousedown", "[data-changeset]", function () {
  15       var moved = false;
  16       $(this).one("click", function (e) {
  17         if (!moved && !$(e.target).is('a')) {
  18           clickChangeset($(this).data("changeset").id, e);
  19         }
  20       }).one("mousemove", function () {
  21         moved = true;
  22       });
  23     });
  24
  25   var group = L.featureGroup()
  26     .on("mouseover", function (e) {
  27       highlightChangeset(e.layer.id);
  28     })
  29     .on("mouseout", function (e) {
  30       unHighlightChangeset(e.layer.id);
  31     })
  32     .on("click", function (e) {
  33       clickChangeset(e.layer.id, e);
  34     });
  35
  36   group.getLayerId = function(layer) {
  37     return layer.id;
  38   };
  39
  40   function highlightChangeset(id) {
  41     group.getLayer(id).setStyle({fillOpacity: 0.3});
  42     $("#changeset_" + id).addClass("selected");
  43   }
  44
  45   function unHighlightChangeset(id) {
  46     group.getLayer(id).setStyle({fillOpacity: 0});
  47     $("#changeset_" + id).removeClass("selected");
  48   }
  49
  50   function clickChangeset(id, e) {
  51     $("#changeset_" + id).find("a.changeset_id").simulate("click", e);
  52   }
  53
  54   function update() {
  55     var data = {list: '1'};
  56
  57     if (window.location.pathname === '/history') {
  58       data.bbox = map.getBounds().wrap().toBBoxString();
  59     }
  60
  61     $.ajax({
  62       url: window.location.pathname,
  63       method: "GET",
  64       data: data,
  65       success: function(html) {
  66         $('#sidebar_content .changesets').html(html);
  67         updateMap();
  68       }
  69     });
  70
  71     var feedLink = $('link[type="application/atom+xml"]'),
  72       feedHref = feedLink.attr('href').split('?')[0];
  73
  74     feedLink.attr('href', feedHref + '?bbox=' + data.bbox);
  75   }
  76
  77   function loadMore(e) {
  78     e.preventDefault();
  79     e.stopPropagation();
  80
  81     var div = $(this).parents(".changeset_more");
  82
  83     $(this).hide();
  84     div.find(".loader").show();
  85
  86     $.get($(this).attr("href"), function(data) {
  87       div.replaceWith(data);
  88       updateMap();
  89     });
  90   }
  91
  92   function updateMap() {
  93     group.clearLayers();
  94
  95     var changesets = [];
  96
  97     $("[data-changeset]").each(function () {
  98       var changeset = $(this).data('changeset');
  99       if (changeset.bbox) {
 100         var minProjection = map.project(L.latLng(changeset.bbox.minlat, changeset.bbox.minlon)),
 101             maxProjection = map.project(L.latLng(changeset.bbox.maxlat, changeset.bbox.maxlon)),
 102             xGap = maxProjection.x - minProjection.x,
 103             yGap = minProjection.y - maxProjection.y,
 104             minXGap = 40,  // Min width/height of changeset in pixels
 105             minYGap = 40;
 106
 107         if (xGap < minXGap) {
 108           minProjection.x -= ((minXGap - xGap) / 2);
 109           maxProjection.x += ((minXGap - xGap) / 2);
 110         }
 111
 112         if (yGap < minYGap) {
 113           minProjection.y += ((minYGap - yGap) / 2);
 114           maxProjection.y -= ((minYGap - yGap) / 2);
 115         }
 116
 117         var minUnProjection = map.unproject(minProjection),
 118             maxUnProjection = map.unproject(maxProjection),
 119             bounds = [minUnProjection,
 120                       maxUnProjection];
 121
 122         changeset.bounds = L.latLngBounds(bounds);
 123         changesets.push(changeset);
 124       }
 125     });
 126
 127     changesets.sort(function (a, b) {
 128       return b.bounds.getSize() - a.bounds.getSize();
 129     });
 130
 131     for (var i = 0; i < changesets.length; ++i) {
 132       var changeset = changesets[i],
 133         rect = L.rectangle(changeset.bounds,
 134           {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
 135       rect.id = changeset.id;
 136       rect.addTo(group);
 137     }
 138
 139     if (window.location.pathname !== '/history') {
 140       var bounds = group.getBounds();
 141       if (bounds.isValid()) map.fitBounds(bounds);
 142     }
 143   }
 144
 145   page.pushstate = page.popstate = function(path) {
 146     $("#history_tab").addClass("current");
 147     OSM.loadSidebarContent(path, page.load);
 148   };
 149
 150   page.load = function() {
 151     map.addLayer(group);
 152
 153     if (window.location.pathname === '/history') {
 154       map.on("moveend", update);
 155     }
 156
 157     update();
 158   };
 159
 160   page.unload = function() {
 161     map.removeLayer(group);
 162     map.off("moveend", update);
 163
 164     $("#history_tab").removeClass("current");
 165   };
 166
 167   return page;
 168 };