mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 20:54:30 -07:00
Add escape to close dropdowns
This commit is contained in:
@@ -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');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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');
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user