{"version":3,"file":"index-CxeQMUfE.js","sources":["../../Assets/Scripts/components/scaleOnScroll/index.ts"],"sourcesContent":["// Higher number = more zoom\nconst scaleAmount = 0.25;\n// Starting scale\nconst scaleBase = 1;\nconst viewportHeight = window.innerHeight;\nconst scrollBuffer = viewportHeight * scaleAmount;\n\nconst observerConfig = {\n  rootMargin: \"0% 0% 0% 0%\",\n  threshold: 0,\n};\n\n/*\n * Calculates the \"percentage seen\" based on when the element first enters\n * the screen until the moment it leaves\n */\nconst percentageSeen = ($element: HTMLElement): number => {\n  if (!$element.parentNode) {\n    return 0;\n  }\n\n  const viewportHeight = window.innerHeight;\n  const scrollY = window.scrollY;\n\n  const parentNode = $element.parentNode;\n  if (!(parentNode instanceof HTMLElement)) {\n    return 0;\n  }\n\n  const { top } = parentNode.getBoundingClientRect();\n  const elPosY = top + scrollY;\n  const borderHeight\n    = parseFloat(\n      getComputedStyle(parentNode).getPropertyValue(\"border-bottom-width\")\n    )\n    + parseFloat(getComputedStyle($element).getPropertyValue(\"border-top-width\"));\n  const elHeight = parentNode.offsetHeight + borderHeight;\n\n  // If we haven't reached the element yet\n  if (elPosY > scrollY + viewportHeight) {\n    return 0;\n  }\n\n  // If we've completely scrolled past\n  if (scrollY > elPosY + elHeight + scrollBuffer) {\n    return 100;\n  }\n\n  // When the element is in the viewport\n  const distance = scrollY + viewportHeight - elPosY - scrollBuffer;\n\n  return Math.round(distance / ((viewportHeight + elHeight) / 100));\n};\n\nconst instance = (element: Element) => {\n  const $element = element as HTMLElement;\n  const scaleAmountPercentage = scaleAmount / 100;\n  let isVisible = false;\n  const observer = new IntersectionObserver((elements) => {\n    elements.forEach((element) => {\n      isVisible = element.isIntersecting;\n    });\n  }, observerConfig);\n\n  observer.observe($element);\n\n  // Set initial scale on page load\n  $element.style.scale = `${\n    scaleBase + scaleAmountPercentage * percentageSeen($element)\n  }`;\n\n  // Only fires if IntersectionObserver is intersecting\n  window.addEventListener(\"scroll\", () => {\n    if (isVisible) {\n      $element.style.scale = `${\n        scaleBase + scaleAmountPercentage * percentageSeen($element)\n      }`;\n    }\n  });\n};\n\nexport default () => {\n  const $elements = document.querySelectorAll(\".js-scale-on-scroll\");\n\n  $elements.forEach((element) => {\n    instance(element);\n  });\n};\n"],"names":["viewportHeight","scrollBuffer","observerConfig","percentageSeen","$element","scrollY","parentNode","top","elPosY","borderHeight","elHeight","distance","instance","element","scaleAmountPercentage","isVisible","elements","index"],"mappings":"AAIA,MAAMA,EAAiB,OAAO,YACxBC,EAAeD,EAAiB,IAEhCE,EAAiB,CACrB,WAAY,cACZ,UAAW,CACb,EAMMC,EAAkBC,GAAkC,CACpD,GAAA,CAACA,EAAS,WACL,MAAA,GAGT,MAAMJ,EAAiB,OAAO,YACxBK,EAAU,OAAO,QAEjBC,EAAaF,EAAS,WACxB,GAAA,EAAEE,aAAsB,aACnB,MAAA,GAGT,KAAM,CAAE,IAAAC,CAAA,EAAQD,EAAW,sBAAsB,EAC3CE,EAASD,EAAMF,EACfI,EACF,WACA,iBAAiBH,CAAU,EAAE,iBAAiB,qBAAqB,CAAA,EAEnE,WAAW,iBAAiBF,CAAQ,EAAE,iBAAiB,kBAAkB,CAAC,EACxEM,EAAWJ,EAAW,aAAeG,EAGvC,GAAAD,EAASH,EAAUL,EACd,MAAA,GAIL,GAAAK,EAAUG,EAASE,EAAWT,EACzB,MAAA,KAIH,MAAAU,EAAWN,EAAUL,EAAiBQ,EAASP,EAErD,OAAO,KAAK,MAAMU,IAAaX,EAAiBU,GAAY,IAAI,CAClE,EAEME,EAAYC,GAAqB,CACrC,MAAMT,EAAWS,EACXC,EAAwB,IAAc,IAC5C,IAAIC,EAAY,GACC,IAAI,qBAAsBC,GAAa,CAC7CA,EAAA,QAASH,GAAY,CAC5BE,EAAYF,EAAQ,cAAA,CACrB,GACAX,CAAc,EAER,QAAQE,CAAQ,EAGzBA,EAAS,MAAM,MAAQ,GACrB,EAAYU,EAAwBX,EAAeC,CAAQ,CAC7D,GAGO,OAAA,iBAAiB,SAAU,IAAM,CAClCW,IACFX,EAAS,MAAM,MAAQ,GACrB,EAAYU,EAAwBX,EAAeC,CAAQ,CAC7D,GACF,CACD,CACH,EAEAa,EAAe,IAAM,CACD,SAAS,iBAAiB,qBAAqB,EAEvD,QAASJ,GAAY,CAC7BD,EAASC,CAAO,CAAA,CACjB,CACH"}