FIX: dropdowns

This commit is contained in:
Tony Air 2024-06-28 21:50:06 +02:00
parent 526b8648fe
commit 69c053905f

View File

@ -11,12 +11,15 @@ const DropdownHoverUI = ((window) => {
const NAME = 'js-dropdown'
const ACTIVECLS = ['active', 'active-dropdown']
// limit clicking rate and hover-touch-click events iterfere
const LockMenu = (menu) => {
menu.locked = true
setTimeout(() => {
if (window.app.dropdownTimer) {
clearTimeout(window.app.dropdownTimer)
}
window.app.dropdownTimer = setTimeout(() => {
menu.locked = false
}, 200)
}
@ -40,10 +43,13 @@ const DropdownHoverUI = ((window) => {
const Toggle = (el) => {
const menu = el.querySelector('.dropdown-menu')
const isOpenned = menu.classList.contains('show')
const isOpennedByToogle = menu.classList.contains('show') && menu.dropdownToggle
if (menu) {
if (!menu) {
return
}
if (menu.locked) {
return
}
@ -51,18 +57,22 @@ const DropdownHoverUI = ((window) => {
LockMenu(menu)
HideAll()
if (isOpenned) {
if (isOpennedByToogle) {
console.log(`${NAME}: Toggle hide`)
el.classList.remove(...ACTIVECLS)
menu.classList.remove('show')
menu.dropdownToggle = false
} else {
console.log(`${NAME}: Toggle show`)
el.classList.add(...ACTIVECLS)
menu.classList.add('show')
menu.dropdownToggle = true
}
}
}
const Show = (e) => {
@ -70,26 +80,30 @@ const DropdownHoverUI = ((window) => {
const el = e.currentTarget
const menu = el.querySelector('.dropdown-menu')
if (menu) {
if (!menu) {
return
}
if (menu.locked) {
return
}
LockMenu(menu)
//LockMenu(menu)
console.log(`${NAME}: Show`)
HideAll()
el.classList.add(...ACTIVECLS)
menu.classList.add('show')
}
}
const Hide = (e) => {
e.stopPropagation()
const el = e.currentTarget
const menu = el.querySelector('.dropdown-menu')
if (menu) {
if (!menu) {
return
}
if (menu.locked) {
return
}
@ -101,12 +115,11 @@ const DropdownHoverUI = ((window) => {
el.classList.remove(...ACTIVECLS)
menu.classList.remove('show')
}
}
const init = () => {
console.log(`${NAME}: init`)
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"],.dropdown-toggle`)
const clickableEls = document.querySelectorAll(`[data-bs-toggle="dropdown"]`)
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
const attachHoverEvents = (el) => {
@ -128,10 +141,13 @@ const DropdownHoverUI = ((window) => {
el.addEventListener('click', (e) => {
e.preventDefault()
const el = e.currentTarget
const parent = el.closest('.dropdown')
const href = el.getAttribute('href')
const link = el.querySelector('a')
const href = link && link.offsetParent !== null ? link.getAttribute('href') : null
console.log(`${NAME}: click`)
// nav second click
if (href && el.dataset.firstClick) {
@ -203,15 +219,20 @@ const DropdownHoverUI = ((window) => {
})
})
hoverableEls.forEach((el, i) => {
hoverableEls.forEach((el) => {
const parent = el.closest('.dropdown')
if (parent) {
attachHoverEvents(parent)
// for touch screen
attachClickEvents(parent)
}
})
clickableEls.forEach((el, i) => {
attachClickEvents(el)
clickableEls.forEach((el) => {
const parent = el.closest('.dropdown')
if (parent) {
attachClickEvents(parent)
}
})
}