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

FIX: Dropdown toggler

Browse Source
This commit is contained in:
Tony Air 2023-12-30 12:59:52 +02:00
parent daafb8fa2b
commit a0e7845bce
2 changed files with 22 additions and 6 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.2.2", "version": "5.2.3",
"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",

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

@ -18,16 +18,21 @@ const DropdownHoverUI = ((window) => {
if (next) { if (next) {
next.classList.remove(...ACTIVECLS) next.classList.remove(...ACTIVECLS)
} }
el.classList.remove('show') el.classList.remove('show')
}) })
} }
const Toggle = (el) => { const Toggle = (el) => {
HideAll() console.log(`${NAME}: nav toggle`)
const menu = el.querySelector('.dropdown-menu') const menu = el.querySelector('.dropdown-menu')
if (menu) { const isOpenned = menu.classList.contains('show')
menu.classList.toggle('show')
HideAll()
if (menu && !isOpenned) {
menu.classList.add('show')
} }
} }
@ -60,13 +65,22 @@ const DropdownHoverUI = ((window) => {
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]') const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
const attachHoverEvents = (el) => { const attachHoverEvents = (el) => {
if (el.classList.contains(`${NAME}-hover-active`)) {
return
}
el.addEventListener('mouseover', Show, false) el.addEventListener('mouseover', Show, false)
el.addEventListener('mouseleave', Hide, false) el.addEventListener('mouseleave', Hide, false)
el.classList.add(`${NAME}-active`) el.classList.add(`${NAME}-active`)
el.classList.add(`${NAME}-hover-active`)
} }
const attachClickEvents = (el) => { const attachClickEvents = (el) => {
if (el.classList.contains(`${NAME}-click-active`)) {
return
}
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
e.preventDefault() e.preventDefault()
@ -86,7 +100,7 @@ const DropdownHoverUI = ((window) => {
window.app.Router.openURL(href) window.app.Router.openURL(href)
} }
el.dataset.firstClick = true
if (parent) { if (parent) {
// big screen click // big screen click
@ -102,12 +116,14 @@ const DropdownHoverUI = ((window) => {
window.app.Router.openURL(href) window.app.Router.openURL(href)
} }
console.log(`${NAME}: nav toggle`)
Toggle(parent) Toggle(parent)
} }
el.dataset.firstClick = true
}) })
el.classList.add(`${NAME}-active`) el.classList.add(`${NAME}-active`)
el.classList.add(`${NAME}-click-active`)
} }
// Hide all for outside clicks // Hide all for outside clicks