From fa9b4a5f6a00fd862ce3230a64d6c6c89c7fbb6c Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 13:56:51 -0700
Subject: [PATCH] Add/remove active class on map UI buttons

---
 app/assets/javascripts/index/notes.js.erb |  8 ++++----
 app/assets/javascripts/leaflet.key.js     |  4 ++--
 app/assets/javascripts/leaflet.layers.js  |  4 ++--
 app/assets/javascripts/leaflet.share.js   |  4 ++--
 app/assets/javascripts/leaflet.sidebar.js | 12 ++++++++++--
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 93b60c3e7..63576c06c 100644
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -190,7 +190,7 @@ function initializeNotes(map, params) {
       notes[feature.properties.id] = updateMarker(marker, feature);
       newNote = null;
 
-      addNoteButton.removeClass("disabled").addClass("geolink");
+      addNoteButton.removeClass("active").addClass("geolink");
     }
   }
 
@@ -223,9 +223,9 @@ function initializeNotes(map, params) {
     e.preventDefault();
     e.stopPropagation();
 
-    if (addNoteButton.hasClass("disabled")) return;
+    if (addNoteButton.hasClass("active")) return;
 
-    addNoteButton.removeClass("geolink").addClass("disabled");
+    addNoteButton.removeClass("geolink").addClass("active");
 
     map.addLayer(noteLayer);
 
@@ -262,7 +262,7 @@ function initializeNotes(map, params) {
     newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
 
     newNote.on("remove", function (e) {
-      addNoteButton.removeClass("disabled").addClass("geolink");
+      addNoteButton.removeClass("active").addClass("geolink");
     }).on("dragstart", function (e) {
       $(newNote).stopTime("removenote");
     }).on("dragend", function (e) {
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index c5124e39d..1c219d953 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -5,7 +5,7 @@ L.OSM.key = function (options) {
     var $container = $('<div>')
       .attr('class', 'control-key');
 
-    $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', I18n.t('javascripts.key.tooltip'))
@@ -51,7 +51,7 @@ L.OSM.key = function (options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     function update() {
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index edcbfbd4d..a364588c1 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -7,7 +7,7 @@ L.OSM.layers = function(options) {
     var $container = $('<div>')
       .attr('class', 'control-layers');
 
-    var link = $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', 'Layers')
@@ -156,7 +156,7 @@ L.OSM.layers = function(options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     return $container[0];
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 58879475b..6dd420cbe 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -10,7 +10,7 @@ L.OSM.share = function (options) {
     var $container = $('<div>')
       .attr('class', 'control-share');
 
-    $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', 'Share')
@@ -230,7 +230,7 @@ L.OSM.share = function (options) {
       marker.setLatLng(map.getCenter());
 
       update();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     function toggleMarker() {
diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index 8c4dee308..db9e7aef2 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -2,6 +2,7 @@ L.OSM.sidebar = function(selector) {
   var control = {},
     sidebar = $(selector),
     current = $(),
+    currentButton  = $(),
     map;
 
   control.addTo = function (_) {
@@ -15,17 +16,21 @@ L.OSM.sidebar = function(selector) {
       .appendTo(sidebar);
   };
 
-  control.togglePane = function(pane) {
+  control.togglePane = function(pane, button) {
     current
       .hide()
       .trigger('hide');
 
+    currentButton
+      .removeClass('active');
+
     if (current === pane) {
       $(sidebar).hide();
-      current = $();
+      current = currentButton = $();
     } else {
       $(sidebar).show();
       current = pane;
+      currentButton = button || $();
     }
 
     map.invalidateSize({pan: false, animate: false});
@@ -33,6 +38,9 @@ L.OSM.sidebar = function(selector) {
     current
       .show()
       .trigger('show');
+
+    currentButton
+      .addClass('active');
   };
 
   return control;
-- 
2.39.5