{"version":3,"file":"counter.js","mappings":";yGAEO,SAASA,EAAmBC,GACjC,OAAOA,EAAIC,WAAWC,QAAQ,wBAAyB,IACzD,CAEA,SAASC,EAAeC,EAAsBC,GAE5CD,EAAQE,SAAU,EAGlB,MAAMC,EAAoBH,EAAQI,KAG5BC,EAAgB,IAAO,GAGvBC,EAAcC,KAAKC,MAAML,EAAoBE,GAK5B,MACrB,IAAII,EAAQ,EACIT,EAAQU,QAAxB,MACMC,EAAWC,aAAY,KAC3BH,IACA,MAAMI,GAPWT,EAOYK,EAAQH,IAPK,EAAIF,GAA9B,IAACA,EAQjB,GAAGJ,EAAQc,UAAYd,EAAQU,QAAS,CACtC,MAAMK,EAAeR,KAAKC,OAAOR,EAAQc,UAAYd,EAAQU,SAAWG,GACxE,IAAIG,EAAoC,IAApBhB,EAAQU,QAAgB,EAAI,EAC5CV,EAAQc,YAAcC,IACxBd,EAAKgB,UAAYtB,EAAmBK,EAAQc,UAAYC,EAAgBC,QAErE,CACL,MAAMD,EAAeR,KAAKC,OAAOR,EAAQU,QAAUV,EAAQc,WAAaD,GACxE,IAAIG,EAAsC,IAAtBhB,EAAQc,UAAkB,EAAI,EAC9Cd,EAAQU,UAAYK,IACtBd,EAAKgB,UAAYtB,EAAkBK,EAAQc,UAAYC,EAAeC,IAItEP,IAAUH,GACZY,cAAcP,KAEfN,EAAc,EAGnBc,EACF,CAEe,SAASC,EAASpB,GAC/B,MAAMqB,EAAaC,SAASC,KAAKC,wBAC3BC,EAAcH,SAASI,eAAe1B,EAAQ2B,IAEpD,IAAKF,EACH,OAGF,MAAMG,EAAaH,EAAYD,wBACzBK,EAASD,EAAWE,IAAMT,EAAWS,IAE3CC,OAAOC,iBAAiB,QAAQ,MAC1BhC,EAAQE,SAAW0B,EAAWE,KAAO,GAAKC,OAAOE,QAAUF,OAAOG,aAAeL,GACnF9B,EAAcC,EAASyB,MAK3BM,OAAOC,iBAAiB,UAAU,MAC3BhC,EAAQE,SAAW6B,OAAOE,QAAUF,OAAOG,aAAeL,GAC7D9B,EAAcC,EAASyB,KAG7B","sources":["webpack://empori-base/./src/controls/Counter.tsx"],"sourcesContent":["import { CounterJson } from '../empracoTypes';\r\n\r\nexport function ThousandSeparator (num: number) {\r\n return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\r\n};\r\n\r\nfunction StartCounting (counter: CounterJson, node: HTMLElement) {\r\n\r\n counter.started = true;\r\n\r\n // How long you want the animation to take in milliseconds\r\n const animationDuration = counter.time;\r\n\r\n // Calculate how long each \"frame\" should last if we want to update the animation 60 times per second\r\n const frameDuration = 1000 / 60;\r\n\r\n // Use that to calculate how many frames we need to complete the animation\r\n const totalFrames = Math.round(animationDuration / frameDuration);\r\n\r\n // An ease-out function that slows the count as it progresses\r\n const easeOutQuad = (time: number) => time * (2 - time);\r\n\r\n const animateCountUp = () => {\r\n let frame = 0;\r\n const countTo = counter.countTo;\r\n const interval = setInterval(() => {\r\n frame++;\r\n const progress = easeOutQuad(frame / totalFrames);\r\n if(counter.countFrom > counter.countTo) {\r\n const currentCount = Math.round((counter.countFrom - counter.countTo) * progress);\r\n let value: number = counter.countTo === 0 ? 1 : 0;\r\n if (counter.countFrom !== currentCount) {\r\n node.innerHTML = ThousandSeparator((counter.countFrom - currentCount) - value);\r\n }\r\n } else {\r\n const currentCount = Math.round((counter.countTo - counter.countFrom) * progress);\r\n let value: number = counter.countFrom === 0 ? 1 : 0;\r\n if (counter.countTo !== currentCount) {\r\n node.innerHTML = ThousandSeparator(counter.countFrom + currentCount + value);\r\n }\r\n }\r\n\r\n if (frame === totalFrames) {\r\n clearInterval(interval);\r\n }\r\n }, frameDuration);\r\n };\r\n\r\n animateCountUp();\r\n}\r\n\r\nexport default function Counter (counter: CounterJson) {\r\n const bodyHeight = document.body.getBoundingClientRect();\r\n const counterNode = document.getElementById(counter.id);\r\n\r\n if (!counterNode) {\r\n return;\r\n }\r\n\r\n const counterPos = counterNode.getBoundingClientRect();\r\n const offset = counterPos.top - bodyHeight.top;\r\n\r\n window.addEventListener('load', () => {\r\n if(!counter.started && counterPos.top >= 0 && window.scrollY + window.innerHeight >= offset) {\r\n StartCounting(counter, counterNode);\r\n }\r\n });\r\n\r\n // Initialize counter upon reached/scrolled to\r\n window.addEventListener('scroll', () => {\r\n if (!counter.started && window.scrollY + window.innerHeight >= offset) {\r\n StartCounting(counter, counterNode);\r\n }\r\n });\r\n}"],"names":["ThousandSeparator","num","toString","replace","StartCounting","counter","node","started","animationDuration","time","frameDuration","totalFrames","Math","round","frame","countTo","interval","setInterval","progress","countFrom","currentCount","value","innerHTML","clearInterval","animateCountUp","Counter","bodyHeight","document","body","getBoundingClientRect","counterNode","getElementById","id","counterPos","offset","top","window","addEventListener","scrollY","innerHeight"],"sourceRoot":""}