tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: Hide only siblings of dropdown

Browse Source
This commit is contained in:
Tony Air 2024-06-28 23:11:33 +02:00
parent bf087b9a8d
commit 9e9f75c124
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"version": "5.4.3",
"version": "5.4.4",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",

52
src/js/ui/dropdown.js
View File

@ -24,8 +24,13 @@ const DropdownHoverUI = ((window) => {
}, timeout)
}
// debuging
const LogMsg = (msg) => {
//console.log(msg)
}
const HideAll = () => {
console.log(`${NAME}: HideAll`)
LogMsg(`${NAME}: HideAll`)
// hide others
document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
if (el.locked) {
@ -55,24 +60,39 @@ const DropdownHoverUI = ((window) => {
}
LockMenu(menu, 800)
HideAll()
HideSiblings(el)
if (isOpennedByToogle) {
console.log(`${NAME}: Toggle hide`)
LogMsg(`${NAME}: Toggle hide`)
el.classList.remove(...ACTIVECLS)
menu.classList.remove('show')
menu.dropdownToggle = false
} else {
console.log(`${NAME}: Toggle show`)
LogMsg(`${NAME}: Toggle show`)
el.classList.add(...ACTIVECLS)
menu.classList.add('show')
}
menu.dropdownToggle = true
}
const HideSiblings = (el) => {
const parent = el.parentNode
if (!parent) {
return
}
[...parent.children].forEach((el2) => {
if (el === el2) {
return
}
const dropdown = el2.querySelector('.dropdown-menu')
if (dropdown) {
dropdown.classList.remove('show')
}
})
}
const Show = (e) => {
@ -88,9 +108,10 @@ const DropdownHoverUI = ((window) => {
return
}
menu.dropdownToggle = false
//LockMenu(menu)
console.log(`${NAME}: Show`)
HideAll()
LogMsg(`${NAME}: Show`)
HideSiblings(el)
el.classList.add(...ACTIVECLS)
menu.classList.add('show')
@ -108,16 +129,17 @@ const DropdownHoverUI = ((window) => {
return
}
menu.dropdownToggle = false
LockMenu(menu)
console.log(`${NAME}: Hide`)
LogMsg(`${NAME}: Hide`)
el.classList.remove(...ACTIVECLS)
menu.classList.remove('show')
}
const init = () => {
console.log(`${NAME}: init`)
LogMsg(`${NAME}: init`)
const clickableEls = document.querySelectorAll(`[data-bs-toggle="dropdown"]`)
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
@ -144,7 +166,7 @@ const DropdownHoverUI = ((window) => {
const el = e.currentTarget
const parent = el.closest('.dropdown')
console.log(`${NAME}: click`)
LogMsg(`${NAME}: click`)
if (parent) {
Toggle(parent)
@ -156,14 +178,6 @@ const DropdownHoverUI = ((window) => {
}
// Hide all for outside clicks
/* document.addEventListener('click', function (event) {
const isClickInside = clickableEls.contains(event.target)
if (!isClickInside) {
HideAll()
}
}) */
document.addEventListener('click', (event) => {
let breakPath = false
const path = event.path || (event.composedPath && event.composedPath())