{"version":3,"file":"ReadingProgressBar.chunk.3f2ea8a29ab74c89d2c8.js","mappings":"6LAKO,MAAMA,EAETC,IACA,MAAM,gBAAEC,GAAoBD,GAErBE,EAAiBC,GAAsBC,EAAAA,SAAe,GAE7D,IAAIC,EACAC,EACAC,EACAC,EAEJ,MAAMC,EAAWA,KACb,GAAIJ,GAAYG,EAAa,CACzB,MAAME,EACFC,OAAOC,aAAeC,SAASC,gBAAgBC,WAAaF,SAASG,KAAKD,WAAa,EAE3F,GAAwB,IAApBL,EACA,OAAOP,EAAmB,GAG9B,GAAIO,EAAkBF,EAClB,OAAOL,EAAmB,KAG9BA,EAAoBO,EAAkBF,EAAe,IACzD,GAGES,EAAWA,KACbC,GAAS,EAGPA,EAAUA,KACRb,IACAC,EAAeD,EAASc,wBAAwBC,OAChDb,EAAiBc,KAAKC,IAAIT,SAASC,gBAAgBS,aAAcZ,OAAOa,aAAe,GACvFhB,EAAcF,EAAeC,EAAiBF,EAASoB,UAC3D,EAiBJ,OAdArB,EAAAA,WAAgB,KACZC,EAAWQ,SAASa,cAAczB,GAClC,MAAM0B,EAAoBC,IAASnB,EAAU,KACvCoB,EAAoBD,IAASX,EAAU,KAK7C,OAJAN,OAAOmB,iBAAiB,SAAUH,GAClChB,OAAOmB,iBAAiB,SAAUD,GAClCX,IAEO,KACHP,OAAOoB,oBAAoB,SAAUJ,GACrChB,OAAOoB,oBAAoB,SAAUF,EAAkB,CAC1D,GACF,IAGCzB,EAAAA,cAAA,OAAK4B,UC5DwB,wBD6DzB5B,EAAAA,cAAA,OAAK6B,MAAO,CAAEC,MAAO,GAAFC,OAAKjC,EAAe,MAAO8B,UC7DQ,yBD8DpD,C","sources":["webpack://Kristiania.Web/./Features/Partials/ReadingProgressBar/ReadingProgressBar.tsx","webpack://Kristiania.Web/./Features/Partials/ReadingProgressBar/ReadingProgressBar.module.css?160c"],"sourcesContent":["import throttle from 'lodash/throttle';\nimport * as React from 'react';\nimport styles from './ReadingProgressBar.module.css';\nimport type { ReadingProgressBarViewModel } from './ReadingProgressBarViewModel.csharp';\n\nexport const ReadingProgressBar: React.FunctionComponent<\n    React.PropsWithChildren<ReadingProgressBarViewModel>\n> = props => {\n    const { elementSelector } = props;\n\n    const [readingProgress, setReadingProgress] = React.useState(0);\n\n    let targetEl: HTMLElement | null;\n    let targetHeight: number;\n    let viewportHeight: number;\n    let totalHeight: number;\n\n    const onScroll = () => {\n        if (targetEl && totalHeight) {\n            const windowScrollTop =\n                window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n\n            if (windowScrollTop === 0) {\n                return setReadingProgress(0);\n            }\n\n            if (windowScrollTop > totalHeight) {\n                return setReadingProgress(100);\n            }\n\n            setReadingProgress((windowScrollTop / totalHeight) * 100);\n        }\n    };\n\n    const onResize = () => {\n        measure();\n    };\n\n    const measure = () => {\n        if (targetEl) {\n            targetHeight = targetEl.getBoundingClientRect().height;\n            viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n            totalHeight = targetHeight - viewportHeight + targetEl.offsetTop;\n        }\n    };\n\n    React.useEffect(() => {\n        targetEl = document.querySelector(elementSelector);\n        const throttledOnScroll = throttle(onScroll, 100);\n        const throttledOnResize = throttle(onResize, 100);\n        window.addEventListener('scroll', throttledOnScroll);\n        window.addEventListener('resize', throttledOnResize);\n        measure();\n\n        return () => {\n            window.removeEventListener('scroll', throttledOnScroll);\n            window.removeEventListener('resize', throttledOnResize);\n        };\n    }, []);\n\n    return (\n        <div className={styles.ReadingProgressBar}>\n            <div style={{ width: `${readingProgress}%` }} className={styles.Bar} />\n        </div>\n    );\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"ReadingProgressBar\":\"kuvzRZlS6ToNxTRdGGYO\",\"Bar\":\"YimfpneTSknkmd8AIZxN\"};"],"names":["ReadingProgressBar","props","elementSelector","readingProgress","setReadingProgress","React","targetEl","targetHeight","viewportHeight","totalHeight","onScroll","windowScrollTop","window","pageYOffset","document","documentElement","scrollTop","body","onResize","measure","getBoundingClientRect","height","Math","max","clientHeight","innerHeight","offsetTop","querySelector","throttledOnScroll","throttle","throttledOnResize","addEventListener","removeEventListener","className","style","width","concat"],"sourceRoot":""}