@brillout/docpress 0.15.13-commit-f8fc961 → 0.15.13-commit-39924f0

package/Layout.tsx

@@ -15,7 +15,12 @@ import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemCom
 import { parseMarkdownMini } from './parseMarkdownMini'
 import { usePageContext } from './renderer/usePageContext'
 import { ExternalLinks } from './ExternalLinks'
-import { coseMenuModalOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
+import {
+  closeMenuModalOnMouseLeaveToggle,
+  ignoreHoverOnTouchStart,
+  openMenuModalOnMouseEnter,
+  toggleMenuModal,
+} from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { initializeJsToggle_SSR } from './code-blocks/hooks/useSelectCodeLang'
@@ -562,7 +567,6 @@ function isProjectNameShort(name: string) {
   return name.length <= 4
 }
 
-let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
 type PropsDiv = React.HTMLProps<HTMLDivElement>
 function MenuToggleMain(props: PropsDiv) {
   return (
@@ -607,20 +611,12 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
         toggleMenuModal(menuId)
       }}
       onMouseEnter={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        openMenuModal(menuId)
+        openMenuModalOnMouseEnter(menuId)
       }}
       onMouseLeave={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        coseMenuModalOnMouseLeave(menuId)
-      }}
-      onTouchStart={() => {
-        onMouseIgnore = setTimeout(() => {
-          onMouseIgnore = undefined
-        }, 1000)
+        closeMenuModalOnMouseLeaveToggle(menuId)
       }}
+      onTouchStart={ignoreHoverOnTouchStart}
     >
       <Style>{getAnimation()}</Style>
       {props.children}
@@ -728,7 +724,3 @@ function MenuIcon() {
     </svg>
   )
 }
-
-function isMobileNav() {
-  return window.innerWidth <= viewTablet
-}

package/MenuModal/toggleMenuModal.ts

@@ -1,8 +1,11 @@
 export { toggleMenuModal }
-export { openMenuModal }
-export { keepMenuModalOpen }
 export { closeMenuModal }
-export { coseMenuModalOnMouseLeave }
+// Hover handling
+export { ignoreHoverOnTouchStart }
+export { openMenuModalOnMouseEnter }
+export { keepMenuModalOpenOnMouseOver }
+export { closeMenuModalOnMouseLeave }
+export { closeMenuModalOnMouseLeaveToggle }
 
 import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
@@ -11,9 +14,6 @@ import { isBrowser } from '../utils/isBrowser'
 
 initScrollListener()
 
-function keepMenuModalOpen() {
-  open()
-}
 function openMenuModal(menuNavigationId: number) {
   open(menuNavigationId)
 }
@@ -72,7 +72,8 @@ let toggleLock:
       timeoutAction: NodeJS.Timeout
     }
   | undefined
-function coseMenuModalOnMouseLeave(menuId: number) {
+function closeMenuModalOnMouseLeaveToggle(menuId: number) {
+  if (ignoreHover()) return
   clearTimeout(toggleLock?.timeoutAction)
   const timeoutAction = setTimeout(action, 100)
   toggleLock = {
@@ -111,7 +112,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < viewTablet) autoScroll()
+    if (isMobileNav()) autoScroll()
   }
 }
 
@@ -137,3 +138,29 @@ function findCollapsibleEl(navLink: HTMLElement | undefined) {
   }
   return null
 }
+
+function closeMenuModalOnMouseLeave() {
+  if (ignoreHover()) return
+  closeMenuModal()
+}
+function keepMenuModalOpenOnMouseOver() {
+  if (ignoreHover()) return
+  open()
+}
+
+let isTouchStart: ReturnType<typeof setTimeout> | undefined
+function ignoreHoverOnTouchStart() {
+  isTouchStart = setTimeout(() => {
+    isTouchStart = undefined
+  }, 1000)
+}
+function openMenuModalOnMouseEnter(menuId: number) {
+  if (ignoreHover()) return
+  openMenuModal(menuId)
+}
+function ignoreHover() {
+  return isTouchStart || isMobileNav()
+}
+function isMobileNav() {
+  return getViewportWidth() <= viewTablet
+}

package/MenuModal.tsx

@@ -7,7 +7,7 @@ import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
-import { closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
+import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
@@ -27,8 +27,8 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
         }}
-        onMouseOver={() => keepMenuModalOpen()}
-        onMouseLeave={closeMenuModal}
+        onMouseOver={keepMenuModalOpenOnMouseOver}
+        onMouseLeave={closeMenuModalOnMouseLeave}
       >
         <div
           id="menu-modal-scroll-container"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-f8fc961",
+  "version": "0.15.13-commit-39924f0",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/utils/getViewportWidth.ts

@@ -1,4 +1,4 @@
 export function getViewportWidth(): number {
-  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  return document.documentElement.clientWidth
+  // Width without scrollbar
+  return document.documentElement.scrollWidth
 }