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", "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.", "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>", "author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",

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

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