close modals with Escape key

static/js/utils/modal.js

@@ -34,14 +34,17 @@
       setupCloser();
 
       triggerElement.classList.add(MODAL_TRIGGER_CLASS);
-      triggerElement.addEventListener('click', open, false);
+      triggerElement.addEventListener('click', openHandler, false);
 
       modalElement.classList.add(JS_INITIALIZED_CLASS);
     }
 
-    function open(event) {
+    function openHandler(event) {
       event.preventDefault();
+      open();
+    }
 
+    function open() {
       modalElement.classList.add(MODAL_OPEN_CLASS);
       overlayElement.classList.add(OVERLAY_CLASS);
       document.body.insertBefore(overlayElement, modalElement);
@@ -51,12 +54,20 @@
       if (modalUrl && MODAL_DYNAMIC_FLAG in modalElement.dataset) {
         fillModal(modalUrl);
       }
+
+      document.addEventListener('keyup', keyupHandler);
     }
 
-    function close(event) {
+    function closeHandler(event) {
       event.preventDefault();
+      close();
+    }
+
+    function close() {
       overlayElement.classList.remove(OVERLAY_OPEN_CLASS);
       modalElement.classList.remove(MODAL_OPEN_CLASS);
+
+      document.removeEventListener('keyup', keyupHandler);
     };
 
     function setupForm() {
@@ -70,8 +81,8 @@
       if (MODAL_CLOSABLE_FLAG in modalElement.dataset) {
         modalElement.insertBefore(closerElement, null);
         closerElement.classList.add(CLOSER_CLASS);
-        closerElement.addEventListener('click', close, false);
-        overlayElement.addEventListener('click', close, false);
+        closerElement.addEventListener('click', closeHandler, false);
+        overlayElement.addEventListener('click', closeHandler, false);
       }
     }
 
@@ -105,6 +116,12 @@
       setupForm();
     }
 
+    function keyupHandler(event) {
+      if (event.key === 'Escape') {
+        close();
+      }
+    }
+
     setup();
   };
 })();