Browse Source

Add escape to close dropdowns

Jeremy Thomas 8 years ago
parent
commit
39a09d204a
2 changed files with 22 additions and 16 deletions
  1. 11 8
      docs/_javascript/main.js
  2. 11 8
      docs/lib/main.js

+ 11 - 8
docs/_javascript/main.js

@@ -7,17 +7,19 @@ document.addEventListener('DOMContentLoaded', () => {
   if ($dropdowns.length > 0) {
   if ($dropdowns.length > 0) {
     $dropdowns.forEach($el => {
     $dropdowns.forEach($el => {
       $el.addEventListener('click', event => {
       $el.addEventListener('click', event => {
-        console.log('dropdown', event);
         event.stopPropagation();
         event.stopPropagation();
         $el.classList.toggle('is-active');
         $el.classList.toggle('is-active');
       });
       });
     });
     });
 
 
     document.addEventListener('click', event => {
     document.addEventListener('click', event => {
-      console.log('document', event);
-      $dropdowns.forEach($el => {
-        $el.classList.remove('is-active');
-      });
+      closeDropdowns();
+    });
+  }
+
+  function closeDropdowns() {
+    $dropdowns.forEach($el => {
+      $el.classList.remove('is-active');
     });
     });
   }
   }
 
 
@@ -57,20 +59,21 @@ document.addEventListener('DOMContentLoaded', () => {
   if ($modalCloses.length > 0) {
   if ($modalCloses.length > 0) {
     $modalCloses.forEach($el => {
     $modalCloses.forEach($el => {
       $el.addEventListener('click', () => {
       $el.addEventListener('click', () => {
-        $html.classList.remove('is-clipped');
         closeModals();
         closeModals();
       });
       });
     });
     });
   }
   }
 
 
-  document.addEventListener('keydown', e => {
+  document.addEventListener('keydown', event => {
+    const e = event || window.event;
     if (e.keyCode === 27) {
     if (e.keyCode === 27) {
-      $html.classList.remove('is-clipped');
       closeModals();
       closeModals();
+      closeDropdowns();
     }
     }
   });
   });
 
 
   function closeModals() {
   function closeModals() {
+    $html.classList.remove('is-clipped');
     $modals.forEach($el => {
     $modals.forEach($el => {
       $el.classList.remove('is-active');
       $el.classList.remove('is-active');
     });
     });

+ 11 - 8
docs/lib/main.js

@@ -9,17 +9,19 @@ document.addEventListener('DOMContentLoaded', function () {
   if ($dropdowns.length > 0) {
   if ($dropdowns.length > 0) {
     $dropdowns.forEach(function ($el) {
     $dropdowns.forEach(function ($el) {
       $el.addEventListener('click', function (event) {
       $el.addEventListener('click', function (event) {
-        console.log('dropdown', event);
         event.stopPropagation();
         event.stopPropagation();
         $el.classList.toggle('is-active');
         $el.classList.toggle('is-active');
       });
       });
     });
     });
 
 
     document.addEventListener('click', function (event) {
     document.addEventListener('click', function (event) {
-      console.log('document', event);
-      $dropdowns.forEach(function ($el) {
-        $el.classList.remove('is-active');
-      });
+      closeDropdowns();
+    });
+  }
+
+  function closeDropdowns() {
+    $dropdowns.forEach(function ($el) {
+      $el.classList.remove('is-active');
     });
     });
   }
   }
 
 
@@ -59,20 +61,21 @@ document.addEventListener('DOMContentLoaded', function () {
   if ($modalCloses.length > 0) {
   if ($modalCloses.length > 0) {
     $modalCloses.forEach(function ($el) {
     $modalCloses.forEach(function ($el) {
       $el.addEventListener('click', function () {
       $el.addEventListener('click', function () {
-        $html.classList.remove('is-clipped');
         closeModals();
         closeModals();
       });
       });
     });
     });
   }
   }
 
 
-  document.addEventListener('keydown', function (e) {
+  document.addEventListener('keydown', function (event) {
+    var e = event || window.event;
     if (e.keyCode === 27) {
     if (e.keyCode === 27) {
-      $html.classList.remove('is-clipped');
       closeModals();
       closeModals();
+      closeDropdowns();
     }
     }
   });
   });
 
 
   function closeModals() {
   function closeModals() {
+    $html.classList.remove('is-clipped');
     $modals.forEach(function ($el) {
     $modals.forEach(function ($el) {
       $el.classList.remove('is-active');
       $el.classList.remove('is-active');
     });
     });