From 8f4ed911e094d359ed630f034b76e02bc8d51705 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Fri, 23 Mar 2012 17:45:50 -0400
Subject: [PATCH] Introduce a new layer switcher

The new layer switcher behaves the same as the standard one but
has less cruft and more attractive styling.
---
 app/assets/images/carat.png                   | Bin 0 -> 279 bytes
 app/assets/javascripts/map.js.erb             |   2 +-
 app/assets/javascripts/openlayers.js.erb      |   1 +
 app/assets/javascripts/simplelayerswitcher.js | 175 ++++++++++++++++++
 app/assets/stylesheets/common.css.scss        |  47 +++++
 app/views/layouts/site.html.erb               |   3 +
 app/views/site/index.html.erb                 |  12 +-
 config/locales/en.yml                         |   2 +-
 8 files changed, 233 insertions(+), 9 deletions(-)
 create mode 100644 app/assets/images/carat.png
 create mode 100644 app/assets/javascripts/simplelayerswitcher.js

diff --git a/app/assets/images/carat.png b/app/assets/images/carat.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fdf17e3258203aa4350f577b49fd00f9090cd86
GIT binary patch
literal 279
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRZ!3HF6%}!4MQY^(zo*^7SP{WbZ0pxQQctjR6
zFz^L{FeBSXQ6Pgsvcxr_Bsf2<q&%@Gm7%=6TrV>(yEr+qAXP8FD1G)j8!4coDV{El
zArezddpGhPRuFN~Kj7c_k1gPTADdyTq@wJ+X2%IaCz%6xewNa^GeJ)&sOXaE`*|hX
zqh1RiVE+F($TB^7?cbeI*%OP+x;ngiK3<5b=ZwleBEheu<>lg+7U#rqU8hw*FD=gH
zNeF|2((dndrRNwK<`jRpw_a%zGs7{7`QPqszjo`z-h5;8&#Zz|r(BYCnE6wBqm|(i
UH=YHLf$n4QboFyt=akR{0OERKj{pDw

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb
index aff258ad2..d05d00993 100644
--- a/app/assets/javascripts/map.js.erb
+++ b/app/assets/javascripts/map.js.erb
@@ -11,7 +11,7 @@ function createMap(divName, options) {
       controls: options.controls || [
          new OpenLayers.Control.ArgParser(),
          new OpenLayers.Control.Attribution(),
-         new OpenLayers.Control.LayerSwitcher(),
+         new SimpleLayerSwitcher(),
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanZoom(),
          new OpenLayers.Control.PanZoomBar(),
diff --git a/app/assets/javascripts/openlayers.js.erb b/app/assets/javascripts/openlayers.js.erb
index c428da014..9119a7b43 100644
--- a/app/assets/javascripts/openlayers.js.erb
+++ b/app/assets/javascripts/openlayers.js.erb
@@ -1,5 +1,6 @@
 //= require OpenLayers
 //= require OpenStreetMap
+//= require simplelayerswitcher
 
 OpenLayers.Util.imageURLs = {
     "404.png": "<%= asset_path 'img/404.png' %>",
diff --git a/app/assets/javascripts/simplelayerswitcher.js b/app/assets/javascripts/simplelayerswitcher.js
new file mode 100644
index 000000000..db3c720bb
--- /dev/null
+++ b/app/assets/javascripts/simplelayerswitcher.js
@@ -0,0 +1,175 @@
+var SimpleLayerSwitcher = OpenLayers.Class(OpenLayers.Control, {
+    layerStates: null,
+    layersDiv: null,
+    ascending: true,
+
+    initialize: function(options) {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+        this.layerStates = [];
+    },
+
+    destroy: function() {
+        OpenLayers.Event.stopObservingElement(this.div);
+
+        //clear out layers info and unregister their events 
+        this.map.events.un({
+            "addlayer": this.redraw,
+            "changelayer": this.redraw,
+            "removelayer": this.redraw,
+            "changebaselayer": this.redraw,
+            scope: this
+        });
+        OpenLayers.Control.prototype.destroy.apply(this, arguments);
+    },
+
+    setMap: function(map) {
+        OpenLayers.Control.prototype.setMap.apply(this, arguments);
+
+        this.map.events.on({
+            "addlayer": this.redraw,
+            "changelayer": this.redraw,
+            "removelayer": this.redraw,
+            "changebaselayer": this.redraw,
+            scope: this
+        });
+    },
+
+    draw: function() {
+        OpenLayers.Control.prototype.draw.apply(this);
+        this.loadContents();
+        this.redraw();
+        return this.div;
+    },
+
+    checkRedraw: function() {
+        var redraw = false;
+        if ( !this.layerStates.length ||
+             (this.map.layers.length != this.layerStates.length) ) {
+            redraw = true;
+        } else {
+            for (var i=0, len=this.layerStates.length; i<len; i++) {
+                var layerState = this.layerStates[i];
+                var layer = this.map.layers[i];
+                if ( (layerState.name != layer.name) ||
+                     (layerState.inRange != layer.inRange) ||
+                     (layerState.id != layer.id) ||
+                     (layerState.visibility != layer.visibility) ) {
+                    redraw = true;
+                    break;
+                }
+            }
+        }
+        return redraw;
+    },
+
+    redraw: function() {
+        if (!this.checkRedraw()) {
+            return this.div;
+        }
+
+        this.div.innerHTML = '';
+        var len = this.map.layers.length;
+        this.layerStates = [];
+        for (var i = 0; i < this.map.layers.length; i++) {
+            var layer = this.map.layers[i];
+            this.layerStates[i] = {
+                'name': layer.name,
+                'visibility': layer.visibility,
+                'inRange': layer.inRange,
+                'id': layer.id
+            };
+        }
+
+        var layers = this.map.layers.slice();
+        if (!this.ascending) { layers.reverse(); }
+        for (var i = 0; i < layers.length; i++) {
+            var layer = layers[i];
+            var baseLayer = layer.isBaseLayer;
+
+            if (layer.displayInLayerSwitcher && baseLayer) {
+                var on = (baseLayer) ? (layer == this.map.baseLayer)
+                          : layer.getVisibility();
+                var layerElem = document.createElement('a');
+                layerElem.id = this.id + '_input_' + layer.name;
+                layerElem.innerHTML = layer.name;
+                layerElem.href = '#';
+
+                OpenLayers.Element.addClass(layerElem, 'basey');
+                OpenLayers.Element.addClass(layerElem,
+                    'basey-' + (on ? 'on' : 'off'));
+
+                if (!baseLayer && !layer.inRange) {
+                    layerElem.disabled = true;
+                }
+                var context = {
+                    'layer': layer
+                };
+                OpenLayers.Event.observe(layerElem, 'mouseup',
+                    OpenLayers.Function.bindAsEventListener(
+                        this.onInputClick,
+                        context)
+                );
+
+                this.div.appendChild(layerElem);
+            }
+        }
+
+        return this.div;
+    },
+
+    onInputClick: function(e) {
+        if (this.layer.isBaseLayer) {
+            this.layer.map.setBaseLayer(this.layer);
+        } else {
+            this.layer.setVisibility(!this.layer.getVisibility());
+        }
+        OpenLayers.Event.stop(e);
+    },
+
+    updateMap: function() {
+
+        // set the newly selected base layer
+        for(var i=0, len=this.baseLayers.length; i<len; i++) {
+            var layerEntry = this.baseLayers[i];
+            if (layerEntry.inputElem.checked) {
+                this.map.setBaseLayer(layerEntry.layer, false);
+            }
+        }
+
+        // set the correct visibilities for the overlays
+        for(var i=0, len=this.dataLayers.length; i<len; i++) {
+            var layerEntry = this.dataLayers[i];
+            layerEntry.layer.setVisibility(layerEntry.inputElem.checked);
+        }
+
+    },
+
+    loadContents: function() {
+        //configure main div
+        OpenLayers.Event.observe(this.div, 'mouseup',
+            OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
+        OpenLayers.Event.observe(this.div, 'click',
+                      this.ignoreEvent);
+        OpenLayers.Event.observe(this.div, 'mousedown',
+            OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
+        OpenLayers.Event.observe(this.div, 'dblclick', this.ignoreEvent);
+    },
+
+    ignoreEvent: function(evt) {
+        OpenLayers.Event.stop(evt);
+    },
+
+    mouseDown: function(evt) {
+        this.isMouseDown = true;
+        this.ignoreEvent(evt);
+    },
+
+    mouseUp: function(evt) {
+        if (this.isMouseDown) {
+            this.isMouseDown = false;
+            this.ignoreEvent(evt);
+        }
+    },
+
+    CLASS_NAME: "SimpleLayerSwitcher"
+});
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index b6aaf7371..ef2c46a8d 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1113,3 +1113,50 @@ abbr.geo {
     }
   }
 }
+
+/* Rules for the layer switcher */
+
+.SimpleLayerSwitcher {
+  position:absolute;
+  top:10px;
+  right:10px;
+  background:#fff;
+  border:1px solid #ccc;
+  min-width:150px;
+  background: #fff;
+}
+
+.SimpleLayerSwitcher a.basey {
+  display:block;
+  text-decoration:none;
+  color:#838383;
+  padding:2px 5px 2px 20px;
+}
+
+.SimpleLayerSwitcher a.basey-on {
+  color:#000;
+  background-color: #fff;
+  background-image: url('carat.png');
+  background-repeat: no-repeat;
+  background-position: 7px 9px;
+}
+
+.SimpleLayerSwitcher a.basey-off {
+  display:none;
+}
+
+.SimpleLayerSwitcher:hover a {
+  border-top:1px solid #eee;
+}
+
+.SimpleLayerSwitcher a:hover {
+  background-color:#f5f5f5;
+}
+
+.SimpleLayerSwitcher:hover a:first-child {
+  border-top:none;
+}
+
+.SimpleLayerSwitcher:hover a.basey-off {
+  display:block;
+}
diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 1123ff555..423a7b72c 100644
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -51,6 +51,9 @@
         <% Editors::ALL_EDITORS.each do |editor| %>
           <li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")), {:controller => 'site', :action => 'edit', :editor => editor}, {:id => editor + 'anchor', :class => "geolink llz object"} %></li>
         <% end %>
+        <% unless STATUS == :api_offline or STATUS == :database_offline %>
+            <li><%= link_to_function(t('browse.start_rjs.data_layer_name'), 'toggleData()') %></li>
+        <% end %>
       </ul>
     </div>
 
diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index 9102214af..fb8f4462e 100644
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -135,8 +135,10 @@ end
     map = createMap("map");
 
     <% unless STATUS == :api_offline or STATUS == :database_offline %>
-      map.dataLayer = new OpenLayers.Layer("<%= I18n.t 'browse.start_rjs.data_layer_name' %>", { "visibility": false });
-      map.dataLayer.events.register("visibilitychanged", map.dataLayer, toggleData);
+      map.dataLayer = new OpenLayers.Layer("<%= I18n.t 'browse.start_rjs.data_layer_name' %>", {
+          visibility: false,
+          displayInLayerSwitcher: false
+      });
       map.addLayer(map.dataLayer);
     <% end %>
 
@@ -187,11 +189,7 @@ end
   }
 
   function toggleData() {
-    if (map.dataLayer.visibility) {
-      $.ajax({ url: "<%= url_for :controller => :browse, :action => :start %>" });
-    } else if (map.dataLayer.active) {
-      closeSidebar();
-    }
+    $.ajax({ url: "<%= url_for :controller => :browse, :action => :start %>" });
   }
 
   function setPosition(lat, lon, zoom, min_lon, min_lat, max_lon, max_lat) {
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 70b95fb65..f31330ed7 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -221,7 +221,7 @@ en:
       view_data: "View data for current map view"
       manually_select: "Manually select a different area"
     start_rjs:
-      data_layer_name: "Data"
+      data_layer_name: "Browse Map Data"
       data_frame_title: "Data"
       zoom_or_select: "Zoom in or select an area of the map to view"
       drag_a_box: "Drag a box on the map to select an area"
-- 
2.43.2