X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/adc823ce1b02bb11e833ba4555f6d2640955d4ee..dffe87909dabac40186ee647282cd6220a4836fd:/app/views/browse/start.rjs

diff --git a/app/views/browse/start.rjs b/app/views/browse/start.rjs
index f21969398..12a5f070c 100644
--- a/app/views/browse/start.rjs
+++ b/app/views/browse/start.rjs
@@ -1,25 +1,36 @@
-page.replace_html :sidebar_title, 'Browse'
+page.replace_html :sidebar_title, 'Data'
 page.replace_html :sidebar_content, :partial => 'start'
 page << <<EOJ
     
-    var gml, sf, objList, currentFeature, featureList;
+    var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds;
     OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
     OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
     
     function start() {
-      openSidebar({ onclose: stopBrowse });
-      var vectors = new OpenLayers.Layer.Vector();
+        openSidebar({ onclose: stopBrowse });
+        var vectors = new OpenLayers.Layer.Vector();
     
-      box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
-        handlerOptions: {
-          sides: 4,
-          snapAngle: 90,
-          irregular: true,
-          persist: true,
-          callbacks: { done: endDrag }
-        }
-      });
-      map.addControl(box);
+        box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
+          handlerOptions: {
+            sides: 4,
+            snapAngle: 90,
+            irregular: true,
+            persist: true,
+            callbacks: { done: endDrag }
+          }
+        });
+        map.addControl(box);
+        map.events.register("moveend", map, showData);
+        map.events.triggerEvent("moveend");
+    }
+
+    function showData() {
+        if (mode == "manual") { return; }
+        if (map.getZoom() >= 15) {
+            useMap();
+        } else {
+            $("status").innerHTML = "Zoom in or Select an area of the map to view.";
+        }    
     }
     
     function stopBrowse() {
@@ -35,6 +46,7 @@ page << <<EOJ
             currentFeature.destroy(); 
             currentFeature = null; 
         } 
+        map.events.unregister("moveend", map, showData);
     }
     
     function startDrag() {
@@ -46,20 +58,39 @@ page << <<EOJ
     
     function useMap() {
         var bounds = map.getExtent();
-        setBounds(bounds);
-        getData(bounds);
+        var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+        if (!currentBounds || !currentBounds.containsBounds(projected)) {
+            var center = bounds.getCenterLonLat();
+            var tileWidth = bounds.getWidth() * 1.2;
+            var tileHeight = bounds.getHeight() * 1.2;
+            var tileBounds =
+                new OpenLayers.Bounds(center.lon - (tileWidth / 2),
+                                      center.lat - (tileHeight / 2),
+                                      center.lon + (tileWidth / 2),
+                                      center.lat + (tileHeight / 2));
+
+            currentBounds = tileBounds;
+            getData(tileBounds);
+            mode = "auto";
+            $("drag_box").style.display="inline";
+            $("use_map").style.display="none";
+        }
         return false;
     }
     $("use_map").onclick = useMap;
     
     function endDrag(bbox) {
         var bounds = bbox.getBounds();
-        setBounds(bounds);
         box.deactivate();
         getData(bounds);
         $("drag_box").innerHTML = "Manually select a different area";
+        mode = "manual";  
+        $("use_map").style.display="inline";
+        $("drag_box").style.display="none";
     }
+    
     function displayFeatureWarning() {
+        $("status").innerHTML = "";
         var div = document.createElement("div");
         var p = document.createElement("p");
         p.appendChild(document.createTextNode("You have loaded an area which contains " + featureList.length + " features. In general, some browsers may not cope well with displaying this quantity of data. Generally, browsers work best at displaying less than 100 features at a time: doing anything else may make your browser slow/unresponsive. If you are sure you want to display this data, you may do so by clicking the button below.")); 
@@ -76,6 +107,7 @@ page << <<EOJ
     function loadFeatureList() {
         gml.addFeatures(featureList);
         gml.events.triggerEvent("loadend");
+        return false;
     }    
 
     function customDataLoader(request) { 
@@ -106,13 +138,22 @@ page << <<EOJ
     }
 
     function getData(bounds) {
-        $("status").innerHTML = "Loading...";
         
         bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+        var size = bounds.getWidth() * bounds.getHeight(); 
+        if (size > 0.25) {
+            $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />"; 
+            return;
+        }
+
         var url = "/api/0.5/map?bbox="+bounds.toBBOX();
         
+        loadGML(url);
+    }
+    function loadGML(url) {
+        $("status").innerHTML = "Loading...";
+        $("object").innerHTML = "";
         if (!gml) {
-            var def = OpenLayers.Feature.Vector.style['default'];
             var style = new OpenLayers.Style();
             style.addRules([new OpenLayers.Rule( 
               {'symbolizer': 
@@ -124,7 +165,7 @@ page << <<EOJ
             gml = new OpenLayers.Layer.GML("Data",url, 
                     {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
                      maxFeatures: 100, requestSuccess: customDataLoader,
-                     styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
+                     styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff', strokeWidth: 8}})
                     }
             );
             gml.events.register("loadend", gml, dataLoaded );
@@ -142,7 +183,6 @@ page << <<EOJ
 
         currentFeature = null;
     }
-    
     function dataLoaded() { 
         $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
         
@@ -181,7 +221,9 @@ page << <<EOJ
             layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
         }
         onFeatureSelect(this.feature);
-        map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        if (mode != "auto") {
+            map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        }
         return false;
     }
     
@@ -240,23 +282,52 @@ page << <<EOJ
             li.appendChild(document.createTextNode(": " + feature.attributes[key]));
             ul.appendChild(li);
         }
+        
+        var li = document.createElement("li");
+        var link = document.createElement("a");   
+        link.href =  "/browse/"+type+"/"+feature.osm_id+"/history";
+        link.appendChild(document.createTextNode("History"));
+        li.appendChild(link);
+        ul.appendChild(li);
+        link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
         $("object").appendChild(ul);
         
+        
         // Stash the currently drawn feature
         currentFeature = feature; 
     }   
-    
-    function setBounds(bounds) {
-      var epsg4326 = new OpenLayers.Projection("EPSG:4326");
-      var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
-
-      bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
-
-      $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
-      $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
-      $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
-      $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
+    function loadHistory() {
+        this.link.href = "";
+        this.link.innerHTML = "Wait...";
+        new Ajax.Request("/api/0.5/"+this.type+"/"+this.feature.osm_id+"/history", {onComplete: OpenLayers.Function.bind(displayHistory, this)});
+        return false;
     }
-
+    function displayHistory(request) {
+        if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList)  { 
+            return false;
+        } 
+        this.link.parentNode.parentNode.removeChild(this.link.parentNode);
+        var doc = request.responseXML;
+        var div = document.createElement("div");
+        var h3 = document.createElement("h3"); 
+        h3.appendChild(document.createTextNode("History"));
+        div.appendChild(h3);
+        var nodes = doc.getElementsByTagName(this.type);
+        var history = document.createElement("ul");  
+        for (var i = 0; i < nodes.length; i++) {
+            var user = nodes[i].getAttribute("user") || "private user";
+            var timestamp = nodes[i].getAttribute("timestamp");
+            var item = document.createElement("li");
+            item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
+            history.appendChild(item);
+        }
+        div.appendChild(history);
+        var link = document.createElement("a");
+        link.appendChild(document.createTextNode("History"));
+        link.href = "/browse/"+this.type+"/"+this.feature.osm_id+"/history";
+        div.appendChild(link);
+        $("object").appendChild(div); 
+    }
+    
     start();
 EOJ