BookStack/resources/assets/js/components/overlay.js
Dan Brown b27a5c7fb8
Made a mass of accessibility improvements
- Changed default focus styles
- Updated dropdowns with keyboard navigation
- Updated modals with esc exiting
- Added accessibility attirbutes where needed
- Made many more elements focusable
- Updated hover effects of many items to also apply when focused within

Related to #1320 and #1198
2019-08-24 18:29:02 +01:00

56 lines
1.5 KiB
JavaScript

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;