Merge remote-tracking branch 'osmlab/map-ui'

[rails.git] / app / assets / javascripts / changeset.js

diff --git a/app/assets/javascripts/changeset.js b/app/assets/javascripts/changeset.js
index 094605661f61b3418c16990f16b48c4ef5bfafb8..6d4881547b4d07bba65eecaf661c64462b0aa2c0 100644 (file)
--- a/app/assets/javascripts/changeset.js
+++ b/app/assets/javascripts/changeset.js
@@ -1,75 +1,79 @@
-var highlight;
+$(document).ready(function () {
+  var changesets = [], rects = {};
 
-function highlightChangeset(id) {
-  var feature = vectors.getFeatureByFid(id);
-  var bounds = feature.geometry.getBounds();
+  var map = L.map("changeset_list_map", {
+    attributionControl: false,
+    zoomControl: false
+  }).addLayer(new L.OSM.Mapnik());
 
-  if (bounds.containsBounds(map.getExtent())) {
-    bounds = map.getExtent().scale(1.1);
-  }
+  L.OSM.zoom()
+    .addTo(map);
 
-  if (highlight) vectors.removeFeatures(highlight);
+  var group = L.featureGroup().addTo(map);
 
-  highlight = new OpenLayers.Feature.Vector(bounds.toGeometry(), {}, {
-    strokeWidth: 2,
-    strokeColor: "#ee9900",
-    fillColor: "#ffff55",
-    fillOpacity: 0.5
+  $("[data-changeset]").each(function () {
+    var changeset = $(this).data('changeset');
+    if (changeset.bbox) {
+      changeset.bounds = L.latLngBounds([changeset.bbox.minlat, changeset.bbox.minlon],
+                                        [changeset.bbox.maxlat, changeset.bbox.maxlon]);
+      changesets.push(changeset);
+    }
   });
 
-  vectors.addFeatures(highlight);
-
-  $("#tr-changeset-" + id).addClass("selected");
-}
-
-function unHighlightChangeset(id) {
-  vectors.removeFeatures(highlight);
-
-  $("#tr-changeset-" + id).removeClass("selected");
-}
-
-$(document).ready(function () {
-  var map = createMap("changeset_list_map", {
-    controls: [
-      new OpenLayers.Control.Navigation(),
-      new OpenLayers.Control.Zoom(),
-      new OpenLayers.Control.SimplePanZoom()
-    ]
+  changesets.sort(function (a, b) {
+    return b.bounds.getSize() - a.bounds.getSize();
   });
 
-  var bounds = new OpenLayers.Bounds();
+  for (var i = 0; i < changesets.length; ++i) {
+    var changeset = changesets[i],
+        rect = L.rectangle(changeset.bounds,
+                           {weight: 2, color: "#ee9900", fillColor: "#ffff55", fillOpacity: 0});
+    rect.id = changeset.id;
+    rects[changeset.id] = rect;
+    rect.addTo(group);
+  }
 
-  $("[data-changeset]").each(function () {
-    var changeset = $(this).data('changeset');
-    if (changeset.bbox) {
-      var bbox = new OpenLayers.Bounds(changeset.bbox.minlon, changeset.bbox.minlat, changeset.bbox.maxlon, changeset.bbox.maxlat);
+  function highlightChangeset(id) {
+    rects[id].setStyle({fillOpacity: 0.5});
+    $("#changeset_" + id).addClass("selected");
+  }
 
-      bounds.extend(bbox);
+  function unHighlightChangeset(id) {
+    rects[id].setStyle({fillOpacity: 0});
+    $("#changeset_" + id).removeClass("selected");
+  }
 
-      addBoxToMap(bbox, changeset.id, true);
+  group.on({
+    mouseover: function (e) {
+      highlightChangeset(e.layer.id);
+    },
+    mouseout: function (e) {
+      unHighlightChangeset(e.layer.id);
     }
   });
 
-  vectors.events.on({
-    "featureselected": function(feature) {
-      highlightChangeset(feature.feature.fid);
+  $("[data-changeset]").on({
+    mouseover: function () {
+      highlightChangeset($(this).data("changeset").id);
     },
-    "featureunselected": function(feature) {
-      unHighlightChangeset(feature.feature.fid);
+    mouseout: function () {
+      unHighlightChangeset($(this).data("changeset").id);
     }
   });
 
-  var selectControl = new OpenLayers.Control.SelectFeature(vectors, {
-    multiple: false,
-    hover: true
+  $(window).scroll(function() {
+        if ($(window).scrollTop() > $('.content-heading').outerHeight() + $('#top-bar').outerHeight() ) {
+            $('#changeset_list_map_wrapper').addClass('scrolled');
+        } else {
+            $('#changeset_list_map_wrapper').removeClass('scrolled');
+        }
   });
-  map.addControl(selectControl);
-  selectControl.activate();
 
   var params = OSM.mapParams();
   if (params.bbox) {
-    map.zoomToExtent(proj(new OpenLayers.Bounds(params.minlon, params.minlat, params.maxlon, params.maxlat)));
+    map.fitBounds([[params.minlat, params.minlon],
+                   [params.maxlat, params.maxlon]]);
   } else {
-    map.zoomToExtent(proj(bounds));
+    map.fitBounds(group.getBounds());
   }
 });