From 599c48227a94339f7e58bddc3fb0d0215baa58c4 Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Wed, 16 Apr 2008 23:45:16 +0000
Subject: [PATCH] Ajaxify the export tab.

---
 app/controllers/export_controller.rb |   1 -
 app/views/export/_start.rhtml        |  18 ++-
 app/views/layouts/site.rhtml         |   8 +-
 app/views/site/_key.rhtml            |   2 +-
 app/views/site/_sidebar.rhtml        |  18 ++-
 app/views/site/export.rhtml          | 162 ---------------------------
 public/javascripts/map.js            |  13 ++-
 public/javascripts/site.js           |  12 ++
 8 files changed, 58 insertions(+), 176 deletions(-)
 delete mode 100644 app/views/site/export.rhtml

diff --git a/app/controllers/export_controller.rb b/app/controllers/export_controller.rb
index a5766e99c..b1d992e6d 100644
--- a/app/controllers/export_controller.rb
+++ b/app/controllers/export_controller.rb
@@ -3,7 +3,6 @@ class ExportController < ApplicationController
     render :update do |page|
       page.replace_html :sidebar_title, 'Export'
       page.replace_html :sidebar_content, :partial => 'start'
-      page.call "openSidebar"
     end
   end
 
diff --git a/app/views/export/_start.rhtml b/app/views/export/_start.rhtml
index 749928c12..11fc61809 100644
--- a/app/views/export/_start.rhtml
+++ b/app/views/export/_start.rhtml
@@ -60,10 +60,11 @@
 
 <script type="text/javascript">
   <!--
+  var vectors;
   var box;
 
   function startExport() {
-    var vectors = new OpenLayers.Layer.Vector("Vector Layer", {
+    vectors = new OpenLayers.Layer.Vector("Vector Layer", {
       displayInLayerSwitcher: false,
     });
     map.addLayer(vectors);
@@ -83,9 +84,24 @@
     box.activate();
 
     map.events.register("moveend", map, mapMoved);
+
+    $("viewanchor").className = "";
+    $("exportanchor").className = "active";
+
+    openSidebar({ onclose: stopExport });
+
     updateRegion(map.getExtent());
   }
 
+  function stopExport() {
+    $("viewanchor").className = "active";
+    $("exportanchor").className = "";
+
+    map.events.unregister("moveend", map, mapMoved);
+    box.handler.clear();
+    map.removeLayer(vectors);
+  }
+
   function formatChanged() {
     if ($("format_osm").checked) {
       $("export_osm").style.display = "inline";
diff --git a/app/views/layouts/site.rhtml b/app/views/layouts/site.rhtml
index e0fd0e391..c5ecfbd7c 100644
--- a/app/views/layouts/site.rhtml
+++ b/app/views/layouts/site.rhtml
@@ -43,10 +43,10 @@
         exportclass = 'active' if params['controller'] == 'site' and params['action'] == 'export'
         traceclass = 'active' if params['controller'] == 'trace'
         %>
-        <li><%= link_to 'View', {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => 'view maps', :class => viewclass  } %></li>
-        <li><%= link_to 'Edit', {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => 'edit maps', :class => editclass } %></li>
-        <li><%= link_to 'Export', {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => 'export map data', :class => exportclass } %></li>
-        <li><%= link_to 'GPS traces', {:controller => 'trace', :action => 'list'}, {:id => 'traceanchor', :title => 'manage traces', :class => traceclass } %></li>
+        <li><%= link_to 'View', {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => 'view maps', :class => viewclass} %></li>
+        <li><%= link_to 'Edit', {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => 'edit maps', :class => editclass} %></li>
+        <li><%= link_to_remote 'Export', {:url => {:controller => 'export', :action => 'start'}}, {:id => 'exportanchor', :title => 'export map data', :class => exportclass, :href => url_for(:controller => 'site', :action => 'export')} %></li>
+        <li><%= link_to 'GPS traces', {:controller => 'trace', :action => 'list'}, {:id => 'traceanchor', :title => 'manage traces', :class => traceclass} %></li>
       </ul>
     </div>
 
diff --git a/app/views/site/_key.rhtml b/app/views/site/_key.rhtml
index c6b6fe29a..643099498 100644
--- a/app/views/site/_key.rhtml
+++ b/app/views/site/_key.rhtml
@@ -12,7 +12,7 @@
     else                   { var imgname = 'keymapnik13.png'; }
 
     updateSidebar("Map key", "<p><img src='images/"+imgname+"' /></p>");
-    openSidebar("210px");
+    openSidebar({ width: "210px" });
   }
 
   function updateKey() {
diff --git a/app/views/site/_sidebar.rhtml b/app/views/site/_sidebar.rhtml
index 7addbe177..d81363590 100644
--- a/app/views/site/_sidebar.rhtml
+++ b/app/views/site/_sidebar.rhtml
@@ -11,19 +11,33 @@
 
 <script type="text/javascript">
 <!--
-  function openSidebar() {
-    if (arguments.length) { $("sidebar").style.width = arguments[0]; }
+  var onclose;
+
+  function openSidebar(options) {
+    if (onclose) {
+       onclose();
+       onclose = null;
+    }
+
+    if (options.width) { $("sidebar").style.width = options.width; }
     else { $("sidebar").style.width = "30%"; }
 
     $("sidebar").style.display = "block";
 
     <%= onopen %>
+
+    onclose = options.onclose;
   }
 
   function closeSidebar() {
     $("sidebar").style.display = "none";
 
     <%= onclose %>
+
+    if (onclose) {
+       onclose();
+       onclose = null;
+    }
   }
 
   function updateSidebar(title, content) {
diff --git a/app/views/site/export.rhtml b/app/views/site/export.rhtml
deleted file mode 100644
index 1140a2583..000000000
--- a/app/views/site/export.rhtml
+++ /dev/null
@@ -1,162 +0,0 @@
-<% content_for :greeting do %>
-<% if @user and !@user.home_lon.nil? and !@user.home_lat.nil? %>
-<%= link_to_function 'home', "setPosition(#{@user.home_lat}, #{@user.home_lon}, 10)" %> |
-<% end %>
-<% end %>
-
-<%= render :partial => 'sidebar', :locals => { :onopen => "resizeMap();", :onclose => "resizeMap();" } %>
-
-<div id="map">
-</div>
-
-<% if params['mlon'] and params['mlat'] %>
-<% marker = true %>
-<% mlon = h(params['mlon']) %> 
-<% mlat = h(params['mlat']) %>
-<% end %>
-
-<% if params['minlon'] and params['minlat'] and params['maxlon'] and params['maxlat'] %>
-<% bbox = true %>
-<% minlon = h(params['minlon']) %>
-<% minlat = h(params['minlat']) %>
-<% maxlon = h(params['maxlon']) %>
-<% maxlat = h(params['maxlat']) %>
-<% end %>
-
-<% if params['lon'] and params['lat'] %>
-<% lon =  h(params['lon']) %>
-<% lat =  h(params['lat']) %>
-<% zoom =  h(params['zoom'] || '5') %>
-<% layers = h(params['layers']) %>
-<% elsif params['mlon'] and params['mlat'] %>
-<% lon = h(params['mlon']) %> 
-<% lat = h(params['mlat']) %>
-<% zoom =  h(params['zoom'] || '12') %>
-<% layers = h(params['layers']) %>
-<% elsif cookies.key?("location") %>
-<% lon,lat,zoom,layers = cookies["location"].split(",") %>
-<% elsif @user and !@user.home_lon.nil? and !@user.home_lat.nil? %> 
-<% lon =  @user.home_lon %>
-<% lat =  @user.home_lat %>
-<% zoom = '10' %>
-<% else %>
-<% session[:location] = OSM::IPLocation(request.env['REMOTE_ADDR']) unless session[:location] %>
-<% if session[:location] %>
-<% bbox = true %>
-<% minlon = session[:location][:minlon] %>
-<% minlat = session[:location][:minlat] %>
-<% maxlon = session[:location][:maxlon] %>
-<% maxlat = session[:location][:maxlat] %>
-<% else %>
-<% lon =  '-0.1' %>
-<% lat =  '51.5' %>
-<% zoom =  h(params['zoom'] || '5') %>
-<% layers = h(params['layers']) %>
-<% end %>
-<% end %>
-
-<%= javascript_include_tag '/openlayers/OpenLayers.js' %>
-<%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
-<%= javascript_include_tag 'map.js' %>
-
-
-<script type="text/javascript">
-  <!--
-  var brokenContentSize = $("content").offsetWidth == 0;
-  var marker;
-  var map;
-  function init(){
-    map = createMap("map");
-
-    <% if bbox %>
-    var min = lonLatToMercator(new OpenLayers.LonLat(<%= minlon %>, <%= minlat %>));
-    var max = lonLatToMercator(new OpenLayers.LonLat(<%= maxlon %>, <%= maxlat %>));
-    var bbox = new OpenLayers.Bounds(min.lon, min.lat, max.lon, max.lat);
-
-    map.zoomToExtent(bbox);
-    <% else %>
-    var centre = lonLatToMercator(new OpenLayers.LonLat(<%= lon %>, <%= lat %>));
-    var zoom = <%= zoom %>;
-
-    <% if params['scale'] and params['scale'].length > 0 then %>
-    zoom = scaleToZoom(<%= params['scale'].to_f() %>);
-    <% end %>
-
-    map.setCenter(centre, zoom);
-    <% end %>
-
-//    <% if layers %>
-//    setMapLayers("<%= layers %>");
-//    <% end %>
-
-//    <% if marker %>
-//    marker = addMarkerToMap(lonLatToMercator(new OpenLayers.LonLat(<%= mlon %>, <%= mlat %>)));
-//    <% end %>
-
-    map.events.register("moveend", map, updateLocation);
-    map.events.register("changelayer", map, updateLocation);
-    updateLocation();
-
-    handleResize();
-
-    <%= remote_function(:url => { :controller => :export, :action => :start }) %>
-  }
-
-  function setPosition(lat, lon, zoom) {
-    var centre = lonLatToMercator(new OpenLayers.LonLat(lon, lat));
-
-    map.setCenter(centre, zoom);
-
-    if (marker)
-      removeMarkerFromMap(marker);
-
-    marker = addMarkerToMap(centre, getArrowIcon());
-  }
-
-  function updateLocation() {
-    var lonlat = mercatorToLonLat(map.getCenter());
-    var zoom = map.getZoom();
-    var layers = getMapLayers();
-
-    updatelinks(lonlat.lon, lonlat.lat, zoom, layers);
-
-    document.cookie = "location=" + lonlat.lon + "," + lonlat.lat + "," + zoom + "," + layers;
-  }
-
-  function resizeContent() {
-    var content = $("content");
-    var rightMargin = parseInt(getStyle(content, "right"));
-    var bottomMargin = parseInt(getStyle(content, "bottom"));
-
-    content.style.width = document.documentElement.clientWidth - content.offsetLeft - rightMargin;
-    content.style.height = document.documentElement.clientHeight - content.offsetTop - bottomMargin;
-  }
-  
-  function resizeMap() {
-    var centre = map.getCenter();
-    var zoom = map.getZoom();
-    var sidebar_width = $("sidebar").offsetWidth;
-
-    if (sidebar_width > 0) {
-      sidebar_width = sidebar_width + 5
-    }
-
-    $("map").style.left = (sidebar_width) + "px";
-    $("map").style.width = ($("content").offsetWidth - sidebar_width) + "px";
-    $("map").style.height = ($("content").offsetHeight - 2) + "px";
-
-    map.setCenter(centre, zoom);
-  }
-
-  function handleResize() {
-    if (brokenContentSize) {
-      resizeContent();
-    }
-
-    resizeMap();
-  }
-
-  window.onresize = handleResize;
-  window.onload = init;
-// -->
-</script>
diff --git a/public/javascripts/map.js b/public/javascripts/map.js
index 07c6b32d1..9858d4576 100644
--- a/public/javascripts/map.js
+++ b/public/javascripts/map.js
@@ -124,12 +124,15 @@ function getMapLayers() {
 function setMapLayers(layers) {
    for (var i=0; i < layers.length; i++) {
       var layer = map.layers[i];
-      var c = layers.charAt(i);
 
-      if (c == "B") {
-         map.setBaseLayer(layer);
-      } else if ( (c == "T") || (c == "F") ) {
-         layer.setVisibility(c == "T");
+      if (layer) {
+         var c = layers.charAt(i);
+
+         if (c == "B") {
+            map.setBaseLayer(layer);
+         } else if ( (c == "T") || (c == "F") ) {
+            layer.setVisibility(c == "T");
+         }
       }
    }
 }
diff --git a/public/javascripts/site.js b/public/javascripts/site.js
index 6fb68e65a..a7651fa45 100644
--- a/public/javascripts/site.js
+++ b/public/javascripts/site.js
@@ -29,6 +29,18 @@ function updatelinks(lon,lat,zoom,layers) {
     node.href = setArgs(node.href, args);
   }
 
+  node = document.getElementById("exportanchor");
+  if (node) {
+    var args = getArgs(node.href);
+    args["lat"] = lat;
+    args["lon"] = lon;
+    args["zoom"] = zoom;
+    if (layers) {
+      args["layers"] = layers;
+    }
+    node.href = setArgs(node.href, args);
+  }
+
   node = document.getElementById("editanchor");
   if (node) {
     if (zoom >= 11) {
-- 
2.43.2