Added crude example of captcha usage

[bookstack] / resources / assets / js / components / overlay.js

diff --git a/resources/assets/js/components/overlay.js b/resources/assets/js/components/overlay.js
index 6e7a598ac58027d739e7efd7a178ae9498bdda01..ad6a01061ec033c0beaebc33fa003a665b57b0d7 100644 (file)
--- a/resources/assets/js/components/overlay.js
+++ b/resources/assets/js/components/overlay.js
@@ -6,12 +6,22 @@ class Overlay {
         elem.addEventListener('click', event => {
              if (event.target === elem) return this.hide();
         });
-        let closeButtons = elem.querySelectorAll('.overlay-close');
+
+        window.addEventListener('keyup', event => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        });
+
+        let closeButtons = elem.querySelectorAll('.popup-header-close');
         for (let i=0; i < closeButtons.length; i++) {
             closeButtons[i].addEventListener('click', this.hide.bind(this));
         }
     }
 
+    hide() { this.toggle(false); }
+    show() { this.toggle(true); }
+
     toggle(show = true) {
         let start = Date.now();
         let duration = 240;
@@ -22,6 +32,9 @@ class Overlay {
             this.container.style.opacity = targetOpacity;
             if (elapsedTime > duration) {
                 this.container.style.display = show ? 'flex' : 'none';
+                if (show) {
+                    this.focusOnBody();
+                }
                 this.container.style.opacity = '';
             } else {
                 requestAnimationFrame(setOpacity.bind(this));
@@ -31,9 +44,13 @@ class Overlay {
         requestAnimationFrame(setOpacity.bind(this));
     }
 
-    hide() { this.toggle(false); }
-    show() { this.toggle(true); }
+    focusOnBody() {
+        const body = this.container.querySelector('.popup-body');
+        if (body) {
+            body.focus();
+        }
+    }
 
 }
 
-module.exports = Overlay;
\ No newline at end of file
+export default Overlay;
\ No newline at end of file