Upgraded app to Laravel 5.7

resources/js/components/overlay.js

@@ -0,0 +1,56 @@
+
+class Overlay {
+
+    constructor(elem) {
+        this.container = elem;
+        elem.addEventListener('click', event => {
+             if (event.target === elem) return this.hide();
+        });
+
+        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;
+
+        function setOpacity() {
+            let elapsedTime = (Date.now() - start);
+            let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
+            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));
+            }
+        }
+
+        requestAnimationFrame(setOpacity.bind(this));
+    }
+
+    focusOnBody() {
+        const body = this.container.querySelector('.popup-body');
+        if (body) {
+            body.focus();
+        }
+    }
+
+}
+
+export default Overlay;