Skip to content

Commit

Permalink
Merge pull request #55 from shawninder/typescript-fixes
Browse files Browse the repository at this point in the history
Remove Typescript errors from Navigation.astro
  • Loading branch information
markteekman authored Mar 19, 2023
2 parents 77a1ed2 + 5db5e25 commit 29c1354
Showing 1 changed file with 11 additions and 9 deletions.
20 changes: 11 additions & 9 deletions src/components/Navigation.astro
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import { DarkMode } from 'accessible-astro-components'
const currenPathname = window.location.pathname

mobileDesktopMenus.forEach((menu) => {
const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')]
const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')] as HTMLAnchorElement[]

menuItems.forEach((menuItem) => {
if (currenPathname.includes(menuItem.pathname.replaceAll('/', '')) && menuItem.textContent !== 'Home') {
Expand All @@ -56,7 +56,7 @@ import { DarkMode } from 'accessible-astro-components'
const mainNavWidth = mainNav.getBoundingClientRect().width
const desktopMenuWidth = document.querySelector('.desktop-menu').getBoundingClientRect().width
const logoWidthBuffer = 300
const totalMenuWidth = parseInt(desktopMenuWidth) + logoWidthBuffer
const totalMenuWidth = Math.round(desktopMenuWidth) + logoWidthBuffer

if (totalMenuWidth >= mainNavWidth) {
mainNav.classList.remove('is-desktop')
Expand Down Expand Up @@ -106,10 +106,11 @@ import { DarkMode } from 'accessible-astro-components'
// execution
mainMenu &&
mainMenu.addEventListener('keydown', (event) => {
const currentMenuItem = event.target.closest('li')
const element = event.target as Element
const currentMenuItem = element.closest('li')
const menuItems = [...mainMenu.querySelectorAll('.menu-item')]
const currentDropdownMenu = event.target.closest('.has-dropdown button')
const currentDropdownMenuItem = event.target.closest('.has-dropdown li')
const currentDropdownMenu = element.closest('.has-dropdown button')
const currentDropdownMenuItem = element.closest('.has-dropdown li')
const currentIndex = menuItems.findIndex((item) => item === currentMenuItem)

const key = event.key
Expand Down Expand Up @@ -157,7 +158,7 @@ import { DarkMode } from 'accessible-astro-components'
if (key === 'ArrowDown') {
event.preventDefault()

if (dropdownMenuItems.indexOf(currentDropdownMenuItem) === dropdownMenuItems.length - 1) {
if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
targetItem = dropdownMenuItems[0]
} else {
targetItem = dropdownMenuItems[currentIndex + 1]
Expand All @@ -167,15 +168,15 @@ import { DarkMode } from 'accessible-astro-components'
if (key === 'ArrowUp') {
event.preventDefault()

if (dropdownMenuItems.indexOf(currentDropdownMenuItem) === 0) {
if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === 0) {
targetItem = dropdownMenuItems[dropdownMenuItems.length - 1]
} else {
targetItem = dropdownMenuItems[currentIndex - 1]
}
}

if (key === 'Escape') {
const currentDropdownMenu = currentDropdownList.previousElementSibling
const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
targetItem = currentDropdownMenu.parentNode
closeAllDropdownMenus()
}
Expand All @@ -196,7 +197,8 @@ import { DarkMode } from 'accessible-astro-components'

window.addEventListener('resize', checkMenuSize)
window.addEventListener('click', (event) => {
if (!event.target.hasAttribute('aria-haspopup') && !event.target.classList.contains('submenu-item')) {
const element = event.target as Element
if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
closeAllDropdownMenus()
}
})
Expand Down

0 comments on commit 29c1354

Please sign in to comment.