mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-04-21 19:21:55 +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
Show Stats 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) {
modal.classList.toggle('is-modal-visible');
document.body.classList[
modal.classList.contains('is-modal-visible') ? 'add' : 'remove'
]('overlay-visible');
const hasOpened = modal.classList.contains('is-modal-visible');
document.body.classList[hasOpened ? 'add' : 'remove']('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) {
const text = e.target.value;
@ -2653,6 +2667,19 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
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.