FIX: dropdowns

src/js/ui/dropdown.js

@@ -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)
+      }
     })
   }