mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-16 03:26:19 +02:00
Code Issues Releases Wiki Activity

add focus trapping to modals.

Browse Source
This commit is contained in:
Kushagra Gour
2018-04-30 11:07:03 +05:30
parent ed124bac0f
commit 22a6995c33
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/script.js
View File

@ -1891,9 +1891,23 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
*/ */
scope.toggleModal = function(modal) { scope.toggleModal = function(modal) {
modal.classList.toggle('is-modal-visible'); modal.classList.toggle('is-modal-visible');
document.body.classList[ const hasOpened = modal.classList.contains('is-modal-visible');
modal.classList.contains('is-modal-visible') ? 'add' : 'remove' document.body.classList[hasOpened ? 'add' : 'remove']('overlay-visible');
]('overlay-visible');
if (hasOpened) {
/* eslint-disable no-inner-declarations */
function onTransitionEnd() {
modal.querySelector('.js-modal__close-btn').focus();
modal
.querySelector('.modal__content')
.removeEventListener('transitionend', onTransitionEnd);
}
/* eslint-enable no-inner-declarations */
modal
.querySelector('.modal__content')
.addEventListener('transitionend', onTransitionEnd);
}
}; };
scope.onSearchInputChange = function(e) { scope.onSearchInputChange = function(e) {
const text = e.target.value; const text = e.target.value;
@ -2653,6 +2667,19 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
document.querySelector('[data-setting="editorTheme"]').innerHTML = options; document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
requestAnimationFrame(compileNodes); requestAnimationFrame(compileNodes);
window.addEventListener('focusin', e => {
if (document.body.classList.contains('overlay-visible')) {
const modal = $('.is-modal-visible');
if (!modal) {
return;
}
if (!modal.contains(e.target)) {
e.preventDefault();
modal.querySelector('.js-modal__close-btn').focus();
}
}
});
} }
// Set few stuff on a 'scope' object so that they can be referenced dynamically. // Set few stuff on a 'scope' object so that they can be referenced dynamically.