Add escape to close dropdowns

This commit is contained in:
Jeremy Thomas
2017-07-21 09:30:56 +02:00
parent 7b395a8ad8
commit 39a09d204a
2 changed files with 22 additions and 16 deletions

View File

@@ -7,17 +7,19 @@ document.addEventListener('DOMContentLoaded', () => {
if ($dropdowns.length > 0) { if ($dropdowns.length > 0) {
$dropdowns.forEach($el => { $dropdowns.forEach($el => {
$el.addEventListener('click', event => { $el.addEventListener('click', event => {
console.log('dropdown', event);
event.stopPropagation(); event.stopPropagation();
$el.classList.toggle('is-active'); $el.classList.toggle('is-active');
}); });
}); });
document.addEventListener('click', event => { document.addEventListener('click', event => {
console.log('document', event); closeDropdowns();
$dropdowns.forEach($el => { });
$el.classList.remove('is-active'); }
});
function closeDropdowns() {
$dropdowns.forEach($el => {
$el.classList.remove('is-active');
}); });
} }
@@ -57,20 +59,21 @@ document.addEventListener('DOMContentLoaded', () => {
if ($modalCloses.length > 0) { if ($modalCloses.length > 0) {
$modalCloses.forEach($el => { $modalCloses.forEach($el => {
$el.addEventListener('click', () => { $el.addEventListener('click', () => {
$html.classList.remove('is-clipped');
closeModals(); closeModals();
}); });
}); });
} }
document.addEventListener('keydown', e => { document.addEventListener('keydown', event => {
const e = event || window.event;
if (e.keyCode === 27) { if (e.keyCode === 27) {
$html.classList.remove('is-clipped');
closeModals(); closeModals();
closeDropdowns();
} }
}); });
function closeModals() { function closeModals() {
$html.classList.remove('is-clipped');
$modals.forEach($el => { $modals.forEach($el => {
$el.classList.remove('is-active'); $el.classList.remove('is-active');
}); });

View File

@@ -9,17 +9,19 @@ document.addEventListener('DOMContentLoaded', function () {
if ($dropdowns.length > 0) { if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) { $dropdowns.forEach(function ($el) {
$el.addEventListener('click', function (event) { $el.addEventListener('click', function (event) {
console.log('dropdown', event);
event.stopPropagation(); event.stopPropagation();
$el.classList.toggle('is-active'); $el.classList.toggle('is-active');
}); });
}); });
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
console.log('document', event); closeDropdowns();
$dropdowns.forEach(function ($el) { });
$el.classList.remove('is-active'); }
});
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
$el.classList.remove('is-active');
}); });
} }
@@ -59,20 +61,21 @@ document.addEventListener('DOMContentLoaded', function () {
if ($modalCloses.length > 0) { if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) { $modalCloses.forEach(function ($el) {
$el.addEventListener('click', function () { $el.addEventListener('click', function () {
$html.classList.remove('is-clipped');
closeModals(); closeModals();
}); });
}); });
} }
document.addEventListener('keydown', function (e) { document.addEventListener('keydown', function (event) {
var e = event || window.event;
if (e.keyCode === 27) { if (e.keyCode === 27) {
$html.classList.remove('is-clipped');
closeModals(); closeModals();
closeDropdowns();
} }
}); });
function closeModals() { function closeModals() {
$html.classList.remove('is-clipped');
$modals.forEach(function ($el) { $modals.forEach(function ($el) {
$el.classList.remove('is-active'); $el.classList.remove('is-active');
}); });