Pārlūkot izejas kodu

Add escape to close dropdowns

Jeremy Thomas 8 gadi atpakaļ
vecāks
revīzija
39a09d204a
2 mainītis faili ar 22 papildinājumiem un 16 dzēšanām
  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) {
     $dropdowns.forEach($el => {
       $el.addEventListener('click', event => {
-        console.log('dropdown', event);
         event.stopPropagation();
         $el.classList.toggle('is-active');
       });
     });
 
     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) {
     $modalCloses.forEach($el => {
       $el.addEventListener('click', () => {
-        $html.classList.remove('is-clipped');
         closeModals();
       });
     });
   }
 
-  document.addEventListener('keydown', e => {
+  document.addEventListener('keydown', event => {
+    const e = event || window.event;
     if (e.keyCode === 27) {
-      $html.classList.remove('is-clipped');
       closeModals();
+      closeDropdowns();
     }
   });
 
   function closeModals() {
+    $html.classList.remove('is-clipped');
     $modals.forEach($el => {
       $el.classList.remove('is-active');
     });

+ 11 - 8
docs/lib/main.js

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