the overlay should disappear when the user resizes the screen

sethladd · sethladd · commit 497b4b0d36c8 · 2015-07-29T15:27:30.000-07:00
Closes #744 Closes #742 LGTM given by: @sethladd Squashed commit of the following: commit f829c5c Author: Seth Ladd <sethladd@google.com> Date: Wed Jul 29 15:22:21 2015 -0700 from review commit 499c84f Author: Seth Ladd <sethladd@google.com> Date: Wed Jul 29 14:57:42 2015 -0700
diff --git a/lib/resources/script.js b/lib/resources/script.js
@@ -28,20 +28,27 @@ function initScroller() {
 function initSideNav() {
   var leftNavToggle = document.getElementById('sidenav-left-toggle');
   var leftDrawer = document.querySelector('.sidebar-offcanvas-left');
+  var overlay = document.getElementById('overlay-under-drawer');
 
-  var overlay = document.createElement('div');
-  overlay.id = 'overlay-under-drawer';
-  overlay.addEventListener('click', function(e) {
-    if (leftDrawer) leftDrawer.classList.remove('active');
-    document.body.removeChild(overlay);
-  });
+  function toggleBoth() {
+    if (leftDrawer) {
+      leftDrawer.classList.toggle('active');
+    }
+
+    if (overlay) {
+      overlay.classList.toggle('active');
+    }
+  }
+
+  if (overlay) {
+    overlay.addEventListener('click', function(e) {
+      toggleBoth();
+    });
+  }
 
   if (leftNavToggle) {
     leftNavToggle.addEventListener('click', function(e) {
-      if (leftDrawer) {
-        leftDrawer.classList.toggle('active');
-        document.body.appendChild(overlay);
-      }
+      toggleBoth();
     });
   }
 }
diff --git a/lib/resources/styles.css b/lib/resources/styles.css
@@ -562,6 +562,19 @@ button {
     margin-right: 24px;
   }
 
+  #overlay-under-drawer.active {
+    opacity: 0.7;
+    height: 100%;
+    z-index: 1999;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: black;
+    display: block;
+  }
+
   .sidebar-offcanvas-left {
     left:-100%;
     position:fixed;
@@ -610,12 +623,5 @@ button {
 }
 
 #overlay-under-drawer {
-  opacity: 0.7;
-  width: 100%;
-  height: 100%;
-  z-index: 1999;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  background-color: black;
+  display: none;
 }
diff --git a/lib/templates/_head.html b/lib/templates/_head.html
@@ -22,6 +22,8 @@
 
 <body>
 
+<div id="overlay-under-drawer"></div>
+
 <header class="container-fluid" id="title">
     <nav class="navbar navbar-fixed-top">
         <div class="container">
