very minor ui niggles

[rails.git] / app / views / browse / start.rjs

diff --git a/app/views/browse/start.rjs b/app/views/browse/start.rjs
index 2c48c70ff9f1df7bafd0472fb7303b9825348bd6..84a03ce1c0a2a42e8a4d6a8b043d543ed7e41e98 100644 (file)
--- a/app/views/browse/start.rjs
+++ b/app/views/browse/start.rjs
@@ -1,8 +1,8 @@
-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, browsing;
     OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
     OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
     
@@ -20,9 +20,14 @@ page << <<EOJ
           }
         });
         map.addControl(box);
-        map.events.register("moveend", map, validateLinks);
+        map.events.register("moveend", map, showData);
         map.events.triggerEvent("moveend");
-        if (map.getZoom() >= 16) {
+        browsing = true;
+    }
+
+    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.";
@@ -42,7 +47,8 @@ page << <<EOJ
             currentFeature.destroy(); 
             currentFeature = null; 
         } 
-        map.events.unregister("moveend", map, validateLinks);
+        map.events.unregister("moveend", map, showData);
+        browsing = false; 
     }
     
     function startDrag() {
@@ -54,7 +60,22 @@ page << <<EOJ
     
     function useMap() {
         var bounds = map.getExtent();
-        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";
+            $("use_map").style.display="none";
+        }
         return false;
     }
     $("use_map").onclick = useMap;
@@ -64,6 +85,8 @@ page << <<EOJ
         box.deactivate();
         getData(bounds);
         $("drag_box").innerHTML = "Manually select a different area";
+        mode = "manual";  
+        $("use_map").style.display="inline";
     }
     
     function displayFeatureWarning() {
@@ -88,6 +111,7 @@ page << <<EOJ
     }    
 
     function customDataLoader(request) { 
+        if (!browsing) { return; } 
         var doc = request.responseXML;
         
         if (!doc || !doc.documentElement) {
@@ -129,6 +153,7 @@ page << <<EOJ
     }
     function loadGML(url) {
         $("status").innerHTML = "Loading...";
+        $("object").innerHTML = "";
         if (!gml) {
             var style = new OpenLayers.Style();
             style.addRules([new OpenLayers.Rule( 
@@ -159,7 +184,8 @@ page << <<EOJ
 
         currentFeature = null;
     }
-    function dataLoaded() { 
+    function dataLoaded() {
+        if (!browsing) { return; } 
         $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
         
         objList = document.createElement("ul");
@@ -197,7 +223,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;
     }
     
@@ -256,21 +284,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 validateLinks() {
-        var bounds = this.getExtent();
-        bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
-
-        if (bounds.getWidth() * bounds.getHeight() > 0.25) {
-          $("use_map").style.display = "none";
-        } else {
-          $("use_map").style.display = "inline";
-        }  
+    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 = nodes.length - 1; i >= 0; 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