{"version":3,"file":"index-BnVJvgNw.js","sources":["../../Assets/Scripts/components/rolodex/index.ts"],"sourcesContent":["interface ScrollState {\n  completionPercentage: number;\n}\n\nconst SELECTOR = {\n  main: \".js-rolodex\",\n  itemsContainer: \".js-rolodex-item-container\",\n  itemScroller: \".js-rolodex-item-scroller\",\n  item: \".js-rolodex-item\",\n};\n\nconst getScrollState = (): ScrollState => ({\n  completionPercentage: 0,\n});\n\nconst calculateCompletionPercentage = (\n  $el: HTMLElement,\n  verticalOffsetEnd: number = 0,\n): number => {\n  const start = $el.offsetTop;\n  const end = $el.offsetTop + $el.clientHeight - verticalOffsetEnd;\n\n  if (window.scrollY < start) {\n    return 0;\n  }\n\n  if (window.scrollY > end) {\n    return 100;\n  }\n\n  const totalScrollDistance = end - start;\n  const currentScrollDistance = window.scrollY - start;\n\n  return Math.floor((currentScrollDistance / totalScrollDistance) * 100);\n};\n\nconst updateAnimationState = ($el: HTMLElement, scrollState: ScrollState) => {\n  const itemContainer = $el.querySelector(SELECTOR.itemsContainer);\n  const itemScroller = $el.querySelector(SELECTOR.itemScroller);\n  const items = $el.querySelectorAll(SELECTOR.item);\n  const item = $el.querySelector(SELECTOR.item);\n\n  if (!itemContainer || !itemScroller || !items || !item) {\n    return;\n  }\n\n  scrollState.completionPercentage = calculateCompletionPercentage(\n    $el,\n    itemContainer?.clientHeight * 1.5,\n  );\n\n  if (\n    itemScroller instanceof HTMLElement &&\n    scrollState.completionPercentage >= 0 &&\n    scrollState.completionPercentage <= 100\n  ) {\n    // Set scroll position\n    const itemsTransformRange =\n      itemScroller.clientHeight - itemContainer.clientHeight;\n    itemScroller.style.transform = `translateY(-${\n      (scrollState.completionPercentage / 100) * itemsTransformRange\n    }px)`;\n  }\n};\n\nconst instance = ($el: HTMLElement, scrollState: ScrollState) => {\n  const rolodex = $el.querySelector(SELECTOR.main);\n\n  if (!rolodex) {\n    return;\n  }\n\n  window.addEventListener(\"scroll\", () => {\n    updateAnimationState($el, scrollState);\n  });\n\n  updateAnimationState($el, scrollState);\n};\n\nconst rolodex = () => {\n  document.querySelectorAll(SELECTOR.main).forEach(($el: Element) => {\n    const scrollState = getScrollState();\n    const $parent = $el.closest(\".section\") as HTMLElement;\n\n    if (!$parent) {\n      return;\n    }\n\n    instance($parent, scrollState);\n  });\n};\n\nexport default rolodex;\n"],"names":["SELECTOR","getScrollState","calculateCompletionPercentage","$el","verticalOffsetEnd","start","end","totalScrollDistance","currentScrollDistance","updateAnimationState","scrollState","itemContainer","itemScroller","items","item","itemsTransformRange","instance","rolodex","$parent"],"mappings":"AAIA,MAAMA,EAAW,CACf,KAAM,cACN,eAAgB,6BAChB,aAAc,4BACd,KAAM,kBACR,EAEMC,EAAiB,KAAoB,CACzC,qBAAsB,CACxB,GAEMC,EAAgC,CACpCC,EACAC,EAA4B,IACjB,CACX,MAAMC,EAAQF,EAAI,UACZG,EAAMH,EAAI,UAAYA,EAAI,aAAeC,EAE3C,GAAA,OAAO,QAAUC,EACZ,MAAA,GAGL,GAAA,OAAO,QAAUC,EACZ,MAAA,KAGT,MAAMC,EAAsBD,EAAMD,EAC5BG,EAAwB,OAAO,QAAUH,EAE/C,OAAO,KAAK,MAAOG,EAAwBD,EAAuB,GAAG,CACvE,EAEME,EAAuB,CAACN,EAAkBO,IAA6B,CAC3E,MAAMC,EAAgBR,EAAI,cAAcH,EAAS,cAAc,EACzDY,EAAeT,EAAI,cAAcH,EAAS,YAAY,EACtDa,EAAQV,EAAI,iBAAiBH,EAAS,IAAI,EAC1Cc,EAAOX,EAAI,cAAcH,EAAS,IAAI,EAE5C,GAAI,GAACW,GAAiB,CAACC,GAAgB,CAACC,GAAS,CAACC,KAIlDJ,EAAY,qBAAuBR,EACjCC,GACAQ,GAAA,YAAAA,EAAe,cAAe,GAChC,EAGEC,aAAwB,aACxBF,EAAY,sBAAwB,GACpCA,EAAY,sBAAwB,KACpC,CAEM,MAAAK,EACJH,EAAa,aAAeD,EAAc,aAC5CC,EAAa,MAAM,UAAY,eAC5BF,EAAY,qBAAuB,IAAOK,CAC7C,KAAA,CAEJ,EAEMC,EAAW,CAACb,EAAkBO,IAA6B,CAC/CP,EAAI,cAAcH,EAAS,IAAI,IAMxC,OAAA,iBAAiB,SAAU,IAAM,CACtCS,EAAqBN,EAAKO,CAAW,CAAA,CACtC,EAEDD,EAAqBN,EAAKO,CAAW,EACvC,EAEMO,EAAU,IAAM,CACpB,SAAS,iBAAiBjB,EAAS,IAAI,EAAE,QAASG,GAAiB,CACjE,MAAMO,EAAcT,EAAe,EAC7BiB,EAAUf,EAAI,QAAQ,UAAU,EAEjCe,GAILF,EAASE,EAASR,CAAW,CAAA,CAC9B,CACH"}