Simplify the sidebar code, before adding another

1 files changed, 47 insertions, 50 deletions

diff --git a/scripts.js b/scripts.js
index 5624fa8..0a9e221 100644
--- a/scripts.js
+++ b/scripts.js
@@ -4,62 +4,60 @@
     LS.imagePath = 'images/';
     LS.dataPath = 'data.json';
 
-    var $buildingsSidebar = $('#buildingsSidebar');
-    var $sitesSidebar = $('#sitesSidebar');
-
-    var $navBuildingsLi = $('#navBuildingsLi');
-    var $navSitesLi = $('#navSitesLi');
-
-    function hideSitesSidebar() {
-        $sitesSidebar.hide();
-        $navSitesLi.removeClass("active");
-    }
-
-    function hideBuildingsSidebar() {
-        $buildingsSidebar.hide();
-        $navBuildingsLi.removeClass("active");
+    var $sidebars = [
+        $('#buildingsSidebar'),
+        $('#sitesSidebar')
+    ];
+
+    var $sidebarLi = [
+        $('#navBuildingsLi'),
+        $('#navSitesLi')
+    ];
+
+    var sidebarHideButtons = [
+        "buildingsSidebarHideButton",
+        "sitesSidebarHideButton"
+    ];
+
+    function hideSidebars() {
+        $sidebars.forEach(function($sidebar) {
+            $sidebar.hide();
+        });
+        $sidebarLi.forEach(function($sidebarLi) {
+            $sidebarLi.removeClass('active');
+        });
     }
 
-    var buildingsSidebarLink = document.getElementById("buildingsSidebarLink")
-    buildingsSidebarLink.onclick = function() {
-        hideSitesSidebar();
-
-        $navBuildingsLi.toggleClass("active");
-        $buildingsSidebar.toggle();
-
-        map.invalidateSize();
-
-        return false;
-    };
-
-    var sitesSidebarLink = document.getElementById("sitesSidebarLink")
-    sitesSidebarLink.onclick = function() {
-        hideBuildingsSidebar();
-
-        $navSitesLi.toggleClass("active");
-        $sitesSidebar.toggle();
+    $sidebarLi.forEach(function($li, index) {
+        var liLink = $li.children('a')[0];
 
-        map.invalidateSize();
-
-        return false;
-    };
+        liLink.onclick = function() {
+            // hide the other sidebars
+            $sidebars.forEach(function($sidebar, hideIndex) {
+                if (index === hideIndex) return; // don't hide this sidebar
+                $sidebar.hide();
+                $sidebarLi[hideIndex].removeClass('active');
+            });
 
-    var buildingsSidebarHideButton = document.getElementById("buildingsSidebarHideButton");
-    buildingsSidebarHideButton.onclick = function() {
-        hideBuildingsSidebar();
+            $li.toggleClass("active");
+            $sidebars[index].toggle();
 
-        map.invalidateSize();
-        return false;
-    };
+            map.invalidateSize();
 
-    var sitesSidebarHideButton = document.getElementById("sitesSidebarHideButton");
-    sitesSidebarHideButton.onclick = function() {
-        hideSitesSidebar();
+            return false;
+        };
+    });
 
-        map.invalidateSize();
+    sidebarHideButtons.forEach(function(buttonId, index) {
+        var button = document.getElementById(buttonId);
+        button.onclick = function() {
+            $sidebars[index].hide();
+            $sidebarLi[index].removeClass('active');
 
-        return false;
-    };
+            map.invalidateSize();
+            return false;
+        };
+    });
 
     var map = LS.map('map', {
         workstations: true,
@@ -170,8 +168,7 @@
 
               /* Hide sidebars and go to the map on small screens */
               if (document.body.clientWidth <= 767) {
-                hideSitesSidebar();
-                hideBuildingsSidebar();
+                hideSidebars();
 
                 map.invalidateSize();
               }