Prevent nav from collapsing after menu click

When users click a chapter link in the mobile menu, the
navigation bar immediately collapses due to the scroll
triggered by jumping to the chapter. Keep the nav expanded
make it easier to click through chapters.

Also ensure scroll margin matches height of the navigation bar.

Author: tf

entry_types/scrolled/package/spec/widgets/defaultNavigation/DefaultNavigationPresenceProvider-spec.js

@@ -1,15 +1,24 @@
 import React from 'react';
 
-import {DefaultNavigationPresenceProvider} from 'widgets/defaultNavigation/DefaultNavigationPresenceProvider';
+import {
+  DefaultNavigationPresenceProvider,
+  useDefaultNavigationState
+} from 'widgets/defaultNavigation/DefaultNavigationPresenceProvider';
 
 import styles from 'widgets/defaultNavigation/presenceClassNames.module.css';
 
 import {renderInEntry} from 'pageflow-scrolled/testHelpers';
 import {act} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
+function LockNavButton() {
+  const {lockNavExpanded} = useDefaultNavigationState();
+  return <button onClick={lockNavExpanded}>Lock</button>;
+}
+
 describe('DefaultNavigationPresenceProvider', () => {
   afterEach(() => jest.restoreAllMocks());
+
   it('renders wrapper with class setting --widget-margin-top-max by default', () => {
     const {container} = renderInEntry(
       <DefaultNavigationPresenceProvider configuration={{}}>
@@ -66,41 +75,114 @@ describe('DefaultNavigationPresenceProvider', () => {
     expect(container.firstChild).toHaveClass(styles.expanded);
   });
 
-  it('toggles expanded class based on scroll direction', () => {
-    Object.defineProperty(window, 'scrollY', {
-      writable: true,
-      value: 0
+  describe('scroll direction', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+
+      Object.defineProperty(window, 'scrollY', {
+        writable: true,
+        value: 0
+      });
+
+      jest.spyOn(document.body, 'getBoundingClientRect').mockImplementation(() => ({
+        top: -window.scrollY,
+        left: 0,
+        right: 1024,
+        bottom: 768 - window.scrollY,
+        width: 1024,
+        height: 768
+      }));
     });
 
-    jest.spyOn(document.body, 'getBoundingClientRect').mockImplementation(() => ({
-      top: -window.scrollY,
-      left: 0,
-      right: 1024,
-      bottom: 768 - window.scrollY,
-      width: 1024,
-      height: 768
-    }));
+    afterEach(() => {
+      jest.useRealTimers();
+    });
 
-    const {container} = renderInEntry(
-      <DefaultNavigationPresenceProvider configuration={{}}>
-        <div />
-      </DefaultNavigationPresenceProvider>
-    );
+    it('toggles expanded class based on scroll direction', () => {
+      const {container} = renderInEntry(
+        <DefaultNavigationPresenceProvider configuration={{}}>
+          <div />
+        </DefaultNavigationPresenceProvider>
+      );
 
-    expect(container.firstChild).toHaveClass(styles.expanded);
+      expect(container.firstChild).toHaveClass(styles.expanded);
+
+      act(() => {
+        window.scrollY = 100;
+        window.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(container.firstChild).not.toHaveClass(styles.expanded);
+
+      act(() => {
+        window.scrollY = 50;
+        window.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(container.firstChild).toHaveClass(styles.expanded);
+    });
 
-    act(() => {
-      window.scrollY = 100;
-      window.dispatchEvent(new Event('scroll'));
+    it('stays expanded during scroll lock', () => {
+      const {container, getByText} = renderInEntry(
+        <DefaultNavigationPresenceProvider configuration={{}}>
+          <LockNavButton />
+        </DefaultNavigationPresenceProvider>
+      );
+
+      act(() => {
+        getByText('Lock').click();
+      });
+
+      act(() => {
+        window.scrollY = 100;
+        window.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(container.firstChild).toHaveClass(styles.expanded);
     });
 
-    expect(container.firstChild).not.toHaveClass(styles.expanded);
+    it('resumes collapsing after scroll lock timeout', () => {
+      const {container, getByText} = renderInEntry(
+        <DefaultNavigationPresenceProvider configuration={{}}>
+          <LockNavButton />
+        </DefaultNavigationPresenceProvider>
+      );
+
+      act(() => {
+        getByText('Lock').click();
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
 
-    act(() => {
-      window.scrollY = 50;
-      window.dispatchEvent(new Event('scroll'));
+      act(() => {
+        window.scrollY = 100;
+        window.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(container.firstChild).not.toHaveClass(styles.expanded);
     });
 
-    expect(container.firstChild).toHaveClass(styles.expanded);
+    it('re-expands nav when lockNavExpanded is called while collapsed', () => {
+      const {container, getByText} = renderInEntry(
+        <DefaultNavigationPresenceProvider configuration={{}}>
+          <LockNavButton />
+        </DefaultNavigationPresenceProvider>
+      );
+
+      act(() => {
+        window.scrollY = 100;
+        window.dispatchEvent(new Event('scroll'));
+      });
+
+      expect(container.firstChild).not.toHaveClass(styles.expanded);
+
+      act(() => {
+        getByText('Lock').click();
+      });
+
+      expect(container.firstChild).toHaveClass(styles.expanded);
+    });
   });
 });

entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js

@@ -34,7 +34,7 @@ export function DefaultNavigation({
   logo,
   omitChapterNavigation
 }) {
-  const {navExpanded, setNavExpanded} = useDefaultNavigationState();
+  const {navExpanded, setNavExpanded, lockNavExpanded} = useDefaultNavigationState();
   const [menuOpen, setMenuOpen] = useState(!!configuration.defaultMobileNavVisible);
   const [readingProgress, setReadingProgress] = useState(0);
 
@@ -78,6 +78,7 @@ export function DefaultNavigation({
   };
 
   function handleMenuClick(chapterLinkId) {
+    lockNavExpanded();
     setMenuOpen(false);
   };
 

entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigationPresenceProvider.js

@@ -7,6 +7,7 @@ import {
   usePhonePlatform
 } from 'pageflow-scrolled/frontend';
 
+import {useTimeoutFlag} from './useTimeoutFlag';
 import styles from './presenceClassNames.module.css';
 
 const DefaultNavigationContext = createContext({
@@ -21,9 +22,17 @@ export function useDefaultNavigationState() {
 export function DefaultNavigationPresenceProvider({configuration, children}) {
   const [navExpanded, setNavExpanded] = useState(true);
   const isPhonePlatform = usePhonePlatform();
+  const [scrollLockRef, activateScrollLock] = useTimeoutFlag(200);
+
+  const lockNavExpanded = useCallback(() => {
+    activateScrollLock();
+    setNavExpanded(true);
+  }, [activateScrollLock]);
 
   useScrollPosition(
     ({prevPos, currPos}) => {
+      if (scrollLockRef.current) return;
+
       const expand = currPos.y > prevPos.y ||
                      // Mobile Safari reports positive scroll position
                      // during scroll bounce animation when scrolling
@@ -51,8 +60,8 @@ export function DefaultNavigationPresenceProvider({configuration, children}) {
   );
 
   const contextValue = useMemo(
-    () => ({navExpanded, setNavExpanded}),
-    [navExpanded]
+    () => ({navExpanded, setNavExpanded, lockNavExpanded}),
+    [navExpanded, lockNavExpanded]
   );
 
   return (

entry_types/scrolled/package/src/widgets/defaultNavigation/useTimeoutFlag.js

@@ -0,0 +1,20 @@
+import {useCallback, useEffect, useRef} from 'react';
+
+export function useTimeoutFlag(duration) {
+  const flagRef = useRef(false);
+  const timeoutRef = useRef(null);
+
+  const activate = useCallback(() => {
+    flagRef.current = true;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      flagRef.current = false;
+    }, duration);
+  }, [duration]);
+
+  useEffect(() => {
+    return () => clearTimeout(timeoutRef.current);
+  }, []);
+
+  return [flagRef, activate];
+}