{"mappings":"A,I,E,A,C,A,a,O,W,W,A,a,O,K,K,A,a,O,O,O,A,a,O,O,O,C,C,E,iB,C,A,C,E,E,Q,A,E,Q,S,C,C,C,E,O,c,C,E,O,C,a,C,M,C,E,a,C,C,G,O,c,C,E,O,C,U,C,I,W,O,C,E,I,K,E,W,C,E,a,C,C,GCAA,IAAA,EAAA,EAAA,S,E,E,S,E,E,S,E,E,SAoFA,EA/EmB,KACjB,GAAM,CAAA,UAAE,CAAS,CAAE,CAAG,AAAA,CAAA,EAAA,EAAA,UAAS,AAAT,EAAW,EAAA,mBAAkB,EAC7C,EAAkB,AAAA,CAAA,EAAA,EAAA,WAAU,AAAV,EACtB,AAAC,GAAmB,EAAQ,EAAM,OAAO,CAAC,QAAS,IAAM,IACzD,EAAE,EAEE,CAAC,EAAe,EAAiB,CAAG,AAAA,CAAA,EAAA,EAAA,QAAO,AAAP,EAAiB,EAAgB,OAAO,QAAQ,CAAC,IAAI,GAG/F,AAAA,CAAA,EAAA,EAAA,SAAQ,AAAR,EAAU,KACR,IAAM,EAAa,KAEjB,IAAM,EAAa,EADN,OAAO,QAAQ,CAAC,IAAI,CAGjC,CAAA,EAAU,OAAO,CAAG,EACpB,EAAiB,EACnB,EAIA,OAFA,OAAO,gBAAgB,CAAC,aAAc,EAAY,CAAA,GAE3C,KACL,OAAO,mBAAmB,CAAC,aAAc,EAC3C,CACF,EAAG,CAAC,EAAgB,EAEpB,IAAM,EAAY,AAAA,CAAA,EAAA,EAAA,MAAK,AAAL,EAAO,GACnB,EAAY,AAAA,EAAA,IAAG,CAAE,KAAK,CAuC5B,MArCA,AAAA,CAAA,EAAA,EAAA,SAAQ,AAAR,EAAU,KACR,IAAM,EAAW,MAAM,IAAI,CAAC,SAAS,gBAAgB,CAAC,0CAChD,EAAM,EAAS,GAAG,CAAC,AAAA,GAAK,EAAE,EAAE,EAC5B,EAAW,IAAI,qBACnB,AAAA,IACE,EAAQ,OAAO,CAAC,AAAA,IACd,IAAM,EAAK,EAAM,MAAM,CAAC,YAAY,CAAC,OAAS,GAE9C,GAAI,EAAM,cAAc,CAAE,CACxB,EAAiB,EAAgB,IACjC,EAAU,OAAO,CAAG,OAAO,OAAO,CAClC,MACF,CACA,IAAM,EAAO,EAAU,OAAO,CAAG,OAAO,OAAO,CAEzC,EAAe,EAAI,OAAO,CAAC,GAC3B,EAAY,CAAG,CAAC,EAAe,EAAE,CAFjB,EAAO,GAK3B,EAAiB,EADN,GAGf,EACF,EACA,CACE,WAAY,gBACZ,UAAW,EACb,GAMF,OAJA,EAAS,OAAO,CAAC,AAAA,IACf,EAAS,OAAO,CAAC,EACnB,GAEO,KACL,EAAS,UAAU,EACrB,CACF,EAAG,EAAE,EAGH,AAAA,CAAA,EAAA,EAAA,GAAA,AAAA,EAAC,SADH,CAEI,UAAU,yCACV,QAAS,KACP,EAAU,CAAA,EACZ,EAEA,SAAA,AAAA,CAAA,EAAA,EAAA,IAAA,AAAA,EAAC,MAAD,CAAK,UAAU,sE,S,CACZ,EAAU,IAAE,E,A,E,EAIrB,C","sources":["<anon>","src/js/Root/BookHeader.tsx"],"sourcesContent":["\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true, configurable: true});\n}\n\nfunction $parcel$export(e, n, v, s) {\n  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});\n}\n\n      var $parcel$global =\n        typeof globalThis !== 'undefined'\n          ? globalThis\n          : typeof self !== 'undefined'\n          ? self\n          : typeof window !== 'undefined'\n          ? window\n          : typeof global !== 'undefined'\n          ? global\n          : {};\n  var parcelRequire = $parcel$global[\"parcelRequire3976\"];\nvar parcelRegister = parcelRequire.register;\nparcelRegister(\"5w9ds\", function(module, exports) {\n\n$parcel$defineInteropFlag(module.exports);\n\n$parcel$export(module.exports, \"default\", function () { return $526d5f99ae71f983$export$2e2bcd8739ae039; });\n/* eslint-disable tailwindcss/classnames-order */ \nvar $e1vzu = parcelRequire(\"e1vzu\");\n\nvar $3QbnI = parcelRequire(\"3QbnI\");\n\nvar $3usLb = parcelRequire(\"3usLb\");\n\nvar $ctHcP = parcelRequire(\"ctHcP\");\nconst $526d5f99ae71f983$var$BookHeader = ()=>{\n    const { setIsOpen: setIsOpen } = (0, $3QbnI.useContext)((0, $ctHcP.BookNavModalContext));\n    const chapterToNumber = (0, $3QbnI.useCallback)((value)=>value ? value.replace(/#?ch-/, \"\") : \"1\", []);\n    const [chapterNumber, setChapterNumber] = (0, $3QbnI.useState)(chapterToNumber(window.location.hash));\n    // @TODO: consider switching link updates with `pushState`\n    (0, $3QbnI.useEffect)(()=>{\n        const hashChange = ()=>{\n            const hash = window.location.hash;\n            const newChapter = chapterToNumber(hash);\n            // reset scrollRef so observer doesn't think this is scrolling up\n            scrollRef.current = 0;\n            setChapterNumber(newChapter);\n        };\n        window.addEventListener(\"hashchange\", hashChange, false);\n        return ()=>{\n            window.removeEventListener(\"hashchange\", hashChange);\n        };\n    }, [\n        chapterToNumber\n    ]);\n    const scrollRef = (0, $3QbnI.useRef)(0);\n    const bookTitle = (0, $3usLb.data).title;\n    // @see https://reacthustle.com/blog/how-to-track-scroll-direction-inside-intersection-observer-in-react\n    (0, $3QbnI.useEffect)(()=>{\n        const chapters = Array.from(document.querySelectorAll(\".Chapter-number, .Psalm-Chapter-Title\"));\n        const ids = chapters.map((e)=>e.id);\n        const observer = new IntersectionObserver((entries)=>{\n            entries.forEach((entry)=>{\n                const id = entry.target.getAttribute(\"id\") ?? \"\";\n                if (entry.isIntersecting) {\n                    setChapterNumber(chapterToNumber(id));\n                    scrollRef.current = window.scrollY;\n                    return;\n                }\n                const diff = scrollRef.current - window.scrollY;\n                const isScrollingUp = diff > 0;\n                const currentIndex = ids.indexOf(id);\n                const prevEntry = ids[currentIndex - 1];\n                if (isScrollingUp) {\n                    const id = prevEntry;\n                    setChapterNumber(chapterToNumber(id));\n                }\n            });\n        }, {\n            rootMargin: \"0% 0% -77% 0%\",\n            threshold: 0.2\n        });\n        chapters.forEach((el)=>{\n            observer.observe(el);\n        });\n        return ()=>{\n            observer.disconnect();\n        };\n    }, []);\n    return /*#__PURE__*/ (0, $e1vzu.jsx)(\"button\", {\n        className: \"whitespace-nowrap rounded-md px-2 py-1\",\n        onClick: ()=>{\n            setIsOpen(true);\n        },\n        children: /*#__PURE__*/ (0, $e1vzu.jsxs)(\"div\", {\n            className: \"border-b-2 border-dotted border-white px-2 py-0 text-2xl text-white\",\n            children: [\n                bookTitle,\n                \" \",\n                chapterNumber\n            ]\n        })\n    });\n};\nvar $526d5f99ae71f983$export$2e2bcd8739ae039 = $526d5f99ae71f983$var$BookHeader;\n\n});\n\n\n//# sourceMappingURL=BookHeader.dc1db030.js.map\n","/* eslint-disable tailwindcss/classnames-order */\nimport { useCallback, useContext, useEffect, useRef, useState } from \"react\"\nimport { data } from \"../app\"\nimport { BookNavModalContext } from \"./Contexts\"\n\nconst BookHeader = () => {\n  const { setIsOpen } = useContext(BookNavModalContext)\n  const chapterToNumber = useCallback(\n    (value: string) => (value ? value.replace(/#?ch-/, \"\") : \"1\"),\n    []\n  )\n  const [chapterNumber, setChapterNumber] = useState<string>(chapterToNumber(window.location.hash))\n\n  // @TODO: consider switching link updates with `pushState`\n  useEffect(() => {\n    const hashChange = () => {\n      const hash = window.location.hash\n      const newChapter = chapterToNumber(hash)\n      // reset scrollRef so observer doesn't think this is scrolling up\n      scrollRef.current = 0\n      setChapterNumber(newChapter)\n    }\n\n    window.addEventListener(\"hashchange\", hashChange, false)\n\n    return () => {\n      window.removeEventListener(\"hashchange\", hashChange)\n    }\n  }, [chapterToNumber])\n\n  const scrollRef = useRef(0)\n  const bookTitle = data.title\n  // @see https://reacthustle.com/blog/how-to-track-scroll-direction-inside-intersection-observer-in-react\n  useEffect(() => {\n    const chapters = Array.from(document.querySelectorAll(\".Chapter-number, .Psalm-Chapter-Title\"))\n    const ids = chapters.map(e => e.id)\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          const id = entry.target.getAttribute(\"id\") ?? \"\"\n\n          if (entry.isIntersecting) {\n            setChapterNumber(chapterToNumber(id))\n            scrollRef.current = window.scrollY\n            return\n          }\n          const diff = scrollRef.current - window.scrollY\n          const isScrollingUp = diff > 0\n          const currentIndex = ids.indexOf(id)\n          const prevEntry = ids[currentIndex - 1]\n          if (isScrollingUp) {\n            const id = prevEntry\n            setChapterNumber(chapterToNumber(id))\n          }\n        })\n      },\n      {\n        rootMargin: \"0% 0% -77% 0%\",\n        threshold: 0.2,\n      }\n    )\n    chapters.forEach(el => {\n      observer.observe(el)\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <button\n      className=\"whitespace-nowrap rounded-md px-2 py-1\"\n      onClick={() => {\n        setIsOpen(true)\n      }}\n    >\n      <div className=\"border-b-2 border-dotted border-white px-2 py-0 text-2xl text-white\">\n        {bookTitle} {chapterNumber}\n      </div>\n    </button>\n  )\n}\n\nexport default BookHeader\n"],"names":["parcelRequire","$parcel$global","globalThis","self","window","global","parcelRegister","register","module","exports","Object","defineProperty","value","configurable","get","$526d5f99ae71f983$export$2e2bcd8739ae039","set","s","enumerable","$e1vzu","$3QbnI","$3usLb","$ctHcP","setIsOpen","useContext","BookNavModalContext","chapterToNumber","useCallback","replace","chapterNumber","setChapterNumber","useState","location","hash","useEffect","hashChange","newChapter","scrollRef","current","addEventListener","removeEventListener","useRef","bookTitle","data","title","chapters","Array","from","document","querySelectorAll","ids","map","e","id","observer","IntersectionObserver","entries","forEach","entry","target","getAttribute","isIntersecting","scrollY","diff","currentIndex","indexOf","prevEntry","rootMargin","threshold","el","observe","disconnect","jsx","className","onClick","children","jsxs"],"version":3,"file":"BookHeader.dc1db030.js.map"}