diff --git a/static/js/utils/modal.js b/static/js/utils/modal.js index 7c7cc5953..63d7471d3 100644 --- a/static/js/utils/modal.js +++ b/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(); }; })();