{"version":3,"sources":["webpack:///./Scripts/Hooks/useScroll.js","webpack:///./Scripts/Hooks/useWindowSize.js","webpack:///./Styles/Fondprodukter/variables/_foundation.scss","webpack:///./Scripts/Hooks/useIsMobile.js","webpack:///./Scripts/Hooks/useParseCssList.js","webpack:///./Scripts/Components/ProductInfoNav.js"],"names":["useScroll","shouldDebounce","React","useState","window","scrollY","scroll","setScroll","storeScroll","useEffect","document","addEventListener","fn","params","frame","cancelAnimationFrame","requestAnimationFrame","passive","useWindowSize","initialWidth","innerWidth","initialHeight","innerHeight","size","setSize","useLayoutEffect","updateSize","removeEventListener","module","exports","breakpoints","useParseCssList","FoundationVariables","mediumBreakpoint","medium","replace","useIsMobile","windowWidth","isMobile","setIsMobile","cssList","splitted","split","result","str","ProductInfoNav","props","sections","activeLink","setActiveLink","active","setIsActive","ref","createRef","dispatch","useDispatch","sectionElements","s","element","current","headerHeight","querySelector","offsetHeight","getBoundingClientRect","top","setMargin","index","length","section","yPos","y","yPosEnd","id","undefined","parent","parentNode","classList","contains","add","remove","onLinkClick","e","preventDefault","titleElemSelector","target","getAttribute","pageYOffset","scrollTo","behavior","className","key","href","onClick","link","name"],"mappings":"6KAEO,SAASA,EAAUC,GAAgB,MACVC,IAAMC,SAASC,OAAOC,SADZ,WAC/BC,EAD+B,KACvBC,EADuB,KA4BhCC,EAAc,WAChBD,EAAUH,OAAOC,UAWrB,OARAH,IAAMO,WAAU,WAKZ,OAHAD,IAGOE,SAASC,iBAAiB,SAAUV,GAlC7BW,EAkCuDJ,EA5B9D,WAAe,2BAAXK,EAAW,yBAAXA,EAAW,gBAGlBC,GACAC,qBAAqBD,GAIzBA,EAAQE,uBAAsB,WAG1BJ,EAAE,WAAF,EAAMC,QAiB0EL,EAAa,CAAES,SAAS,IAlC/F,IAACL,EAGVE,KAkCDR,I,yGCxCI,SAASY,IACpB,IAAIC,EAAef,QAAUA,OAAOgB,WAAahB,OAAOgB,WAAa,EACjEC,EAAgBjB,QAAUA,OAAOkB,YAAclB,OAAOkB,YAAc,EAFpC,EAGZnB,mBAAS,CAACgB,EAAcE,IAHZ,WAG7BE,EAH6B,KAGvBC,EAHuB,KAYpC,OARAC,2BAAgB,WACd,SAASC,IACPF,EAAQ,CAACpB,OAAOgB,WAAYhB,OAAOkB,cAIrC,OAFAlB,OAAOO,iBAAiB,SAAUe,GAClCA,IACO,kBAAMtB,OAAOuB,oBAAoB,SAAUD,MACjD,IACIH,I,qBCbXK,EAAOC,QAAU,CAAC,YAAc,mF,oLCI1BC,EAAcC,YAAgBC,IAAoBF,aAClDG,EAAmB,IAASH,EAAYI,OAAOC,QAAQ,KAAM,KAEpD,SAASC,IAAc,MACdlB,cAAfmB,EAD6B,cAEJnC,IAAMC,SAASkC,GAAeJ,EAAiB,GAF3C,WAE7BK,EAF6B,KAEnBC,EAFmB,KAMpC,OAHArC,IAAMO,WAAU,WACZ8B,EAAYF,GAAeJ,EAAiB,KAC7C,CAACI,IACGC,I,kHCdM,SAASP,EAAgBS,GACpC,IAAIC,EAAWD,EAAQL,QAAQ,IAAK,IAAIA,QAAQ,IAAK,IAAIO,MAAM,KAC3DC,EAAS,GAKb,OAJA,IAAAF,GAAQ,KAARA,GAAa,SAAAG,GAAO,QACZF,EAAQE,EAAIF,MAAM,KACtBC,EAAO,MAAAD,EAAM,IAAN,SAAmB,MAAAA,EAAM,IAAN,WAEvBC,I,8MCGI,SAASE,EAAeC,GAAO,IAClCC,EAAaD,EAAbC,SADkC,EAEN7C,IAAMC,WAFA,WAEnC6C,EAFmC,KAEvBC,EAFuB,OAGZ/C,IAAMC,UAAS,GAHH,WAGnC+C,EAHmC,KAG3BC,EAH2B,KAIpC7C,EAASN,aAAU,GACnBoD,EAAMlD,IAAMmD,YACZC,EAAWC,cACXjB,EAAWF,cACXoB,EAAkB,IAAAT,GAAQ,KAARA,GAAa,SAAAU,GAAC,OAAIA,EAAEC,WAE5CxD,IAAMO,WAAU,WACZ,GAAG2C,GAAOA,EAAIO,QAAS,CACnB,IAAIC,EAAelD,SAASmD,cAAc,UAAUC,aAcpD,GAbGV,EAAIO,QAAQI,wBAAwBC,KAAOJ,EAC1CN,EAASW,aAAWL,EAAeR,EAAIO,QAAQI,wBAAwBC,MAEvEV,EAASW,YAAU,IAGpBb,EAAIO,QAAQI,wBAAwBC,KAAO,GAC1CV,EAASW,aAAWL,IACpBT,GAAY,IAEZA,GAAY,GAGbD,EACC,IAAI,IAAIgB,EAAQ,EAAGA,EAAQV,EAAgBW,OAAQD,IAAS,CACxD,IAAIE,EAAUZ,EAAgBU,GAE1BG,EAAOD,EAAQL,wBAAwBO,EACvCC,EAAUF,EAAOD,EAAQN,aAC1BO,GAnCD,IAmC0BE,EAnC1B,IAoCEtB,EAAcmB,EAAQI,SAI9BvB,OAAcwB,MAIvB,CAACnE,IAEJJ,IAAMO,WAAU,WACZ,IAAIiE,EAAStB,EAAIO,QAAQgB,WAEtBzB,IAAWwB,EAAOE,UAAUC,SAAS,4BACpCH,EAAOE,UAAUE,IAAI,4BAChB5B,GACLwB,EAAOE,UAAUG,OAAO,8BAC7B,CAAC7B,IAEJ,IAEM8B,EAAc,SAAAC,GAChBA,EAAEC,iBAEF,IAAIC,EAAoBF,EAAEG,OAAOC,aAAa,QAE1Cf,EADY5D,SAASmD,cAAcsB,GACrBpB,wBAAwBC,IAAM5D,OAAOkF,aAAgBhD,EA7DlD,GADP,IA+DdlC,OAAOmF,SAAS,CAAEvB,IAAKM,EAAGkB,SAAU,YAGxC,OAAO,yBAAKC,UAAU,gCAAgCrC,IAAKA,GACvD,yBAAKqC,UAAU,oBACV,IAAA1C,GAAQ,KAARA,GAAa,SAAAqB,GAAO,OAAI,uBAAGsB,IAAKtB,EAAQI,GAAImB,KAAM,IAAIvB,EAAQI,GAAIoB,QAASZ,EAAaS,WAb1EI,EAaoGzB,EAAQI,GAbpGxB,GAAc6C,EAAO,SAAW,KAa0EzB,EAAQ0B,MAb1H,IAAAD","file":"4.888aafebe73decf2e8be.js","sourcesContent":["import React from 'react';\r\n\r\nexport function useScroll(shouldDebounce) {\r\n const [scroll, setScroll] = React.useState(window.scrollY)\r\n // The debounce function receives our function as a parameter\r\n const debounce = (fn) => {\r\n\r\n // This holds the requestAnimationFrame reference, so we can cancel it if we wish\r\n let frame;\r\n \r\n // The debounce function returns a new function that can receive a variable number of arguments\r\n return (...params) => {\r\n \r\n // If the frame variable has been defined, clear it now, and queue for next frame\r\n if (frame) { \r\n cancelAnimationFrame(frame);\r\n }\r\n \r\n // Queue our function call for the next frame\r\n frame = requestAnimationFrame(() => {\r\n \r\n // Call our function and pass any params we received\r\n fn(...params);\r\n });\r\n \r\n } \r\n };\r\n \r\n // Reads out the scroll position and stores it in the data attribute\r\n // so we can use it in our stylesheets\r\n const storeScroll = () => {\r\n setScroll(window.scrollY)\r\n }\r\n\r\n React.useEffect(() => {\r\n // Update scroll position for first time\r\n storeScroll();\r\n\r\n // Listen for new scroll events, here we debounce our `storeScroll` function\r\n return document.addEventListener('scroll', shouldDebounce ? debounce(storeScroll) : storeScroll, { passive: true })\r\n })\r\n\r\n return scroll\r\n}","import { useState, useLayoutEffect } from 'react';\r\n\r\nexport default function useWindowSize() {\r\n var initialWidth = window && window.innerWidth ? window.innerWidth : 0\r\n var initialHeight = window && window.innerHeight ? window.innerHeight : 0\r\n const [size, setSize] = useState([initialWidth, initialHeight]);\r\n useLayoutEffect(() => {\r\n function updateSize() {\r\n setSize([window.innerWidth, window.innerHeight]);\r\n }\r\n window.addEventListener('resize', updateSize);\r\n updateSize();\r\n return () => window.removeEventListener('resize', updateSize);\r\n }, []);\r\n return size;\r\n}","// extracted by mini-css-extract-plugin\nmodule.exports = {\"breakpoints\":\"(small: 0, medium: 768px, medium-large: 1080px, large: 1440px, xlarge: 1920px)\"};","import useWindowSize from \"./useWindowSize\"\r\nimport FoundationVariables from \"../../Styles/Fondprodukter/variables/_foundation.scss\"\r\nimport useParseCssList from \"./useParseCssList\"\r\nimport React from \"react\";\r\n\r\nconst breakpoints = useParseCssList(FoundationVariables.breakpoints);\r\nconst mediumBreakpoint = parseInt(breakpoints.medium.replace(\"px\", \"\"))\r\n\r\nexport default function useIsMobile() {\r\n const [windowWidth] = useWindowSize()\r\n const [isMobile, setIsMobile] = React.useState(windowWidth <= mediumBreakpoint-1)\r\n React.useEffect(() => {\r\n setIsMobile(windowWidth <= mediumBreakpoint-1)\r\n }, [windowWidth])\r\n return isMobile\r\n}","export default function useParseCssList(cssList) {\r\n var splitted = cssList.replace(\"(\", \"\").replace(\")\", \"\").split(\",\")\r\n var result = {}\r\n splitted.map(str => {\r\n var split = str.split(\":\")\r\n result[split[0].trim()] = split[1].trim()\r\n })\r\n return result\r\n}","import React from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport { setMargin } from \"../Actions/Navigation.action\"\r\nimport useIsMobile from \"../Hooks/useIsMobile\"\r\nimport { useScroll } from \"../Hooks/useScroll\"\r\nimport { translate } from \"../Services/translation\"\r\n\r\nconst HEADER_HEIGHT = 88\r\nconst HEADER_HEIGHT_MOBILE = 53\r\n\r\nexport default function ProductInfoNav(props) {\r\n const { sections } = props\r\n const [activeLink, setActiveLink] = React.useState()\r\n const [active, setIsActive] = React.useState(false)\r\n const scroll = useScroll(false)\r\n const ref = React.createRef()\r\n const dispatch = useDispatch()\r\n const isMobile = useIsMobile()\r\n const sectionElements = sections.map(s => s.element)\r\n\r\n React.useEffect(() => {\r\n if(ref && ref.current) {\r\n var headerHeight = document.querySelector(\"header\").offsetHeight\r\n if(ref.current.getBoundingClientRect().top <= headerHeight) {\r\n dispatch(setMargin(-headerHeight + ref.current.getBoundingClientRect().top))\r\n }else{\r\n dispatch(setMargin(0))\r\n }\r\n\r\n if(ref.current.getBoundingClientRect().top <= 8) {\r\n dispatch(setMargin(-headerHeight))\r\n setIsActive(true)\r\n }else{\r\n setIsActive(false)\r\n }\r\n\r\n if(active) {\r\n for(var index = 0; index < sectionElements.length; index++) {\r\n var section = sectionElements[index]\r\n \r\n var yPos = section.getBoundingClientRect().y\r\n var yPosEnd = yPos + section.offsetHeight\r\n if(yPos <= HEADER_HEIGHT && yPosEnd > HEADER_HEIGHT) {\r\n setActiveLink(section.id)\r\n }\r\n }\r\n }else{\r\n setActiveLink(undefined)\r\n }\r\n \r\n }\r\n }, [scroll])\r\n\r\n React.useEffect(() => {\r\n var parent = ref.current.parentNode\r\n \r\n if(active && !parent.classList.contains(\"product-info-nav--active\"))\r\n parent.classList.add(\"product-info-nav--active\")\r\n else if(!active)\r\n parent.classList.remove(\"product-info-nav--active\")\r\n }, [active])\r\n\r\n const getActiveClass = link => activeLink == link ? \"active\" : \"\"\r\n\r\n const onLinkClick = e => {\r\n e.preventDefault()\r\n\r\n var titleElemSelector = e.target.getAttribute(\"href\")\r\n var titleElem = document.querySelector(titleElemSelector)\r\n var y = titleElem.getBoundingClientRect().top + window.pageYOffset - (!isMobile ? HEADER_HEIGHT : HEADER_HEIGHT_MOBILE)\r\n window.scrollTo({ top: y, behavior: 'smooth' })\r\n }\r\n\r\n return
\r\n
\r\n {sections.map(section => {section.name})}\r\n
\r\n
\r\n}"],"sourceRoot":""}