{"version":3,"file":"elements-media-scrollable-content.js","mappings":"yJAGAA,EAAAA,GAAKC,eAAeC,EAAAA,GAEpBC,SAASC,iBAAiB,mCAAmCC,SAASC,IACpE,MAAMC,EAAsBD,EAAGE,cAAc,gCACvCC,EAAsBH,EAAGF,iBAAiB,+BAC1CM,EAAWJ,EAAGF,iBAAiB,mBAC/BO,EAAWL,EAAGF,iBAAiB,mBAC/BQ,EAAUN,EAAGE,cAAc,oBAE7BI,GACFZ,EAAAA,GAAKa,IAAID,EAAS,CAAEE,SAAU,GAAIC,QAAS,IAG7CJ,EAASN,SAASW,IAChB,MAAMC,EAASD,EAAQE,aACjBC,EAASC,OAAOC,iBAAiBL,GACjCM,EAASC,WAAWJ,EAAOK,WAAaD,WAAWJ,EAAOM,cAC1DC,EAAUH,WAAWJ,EAAOQ,YAAcJ,WAAWJ,EAAOS,eAElEZ,EAAQa,aAAa,cAAeZ,EAASK,EAASI,EAAQ,IAGhE1B,EAAAA,GAAKa,IAAIP,EAAGF,iBAAiB,wBAAyB,CAAEW,QAAS,KACjEf,EAAAA,GAAKa,IAAIF,EAAU,CAAEM,OAAQ,IAE7B,MAAMa,EAAW9B,EAAAA,GAAK8B,SAAS,CAC7BC,QAAQ,EACRC,cAAe,CACbC,QAAS3B,EAAGE,cAAc,oBAC1B0B,MAAO,aACPC,IAAKA,IACI,GAAG5B,EAAoB6B,wBAEhCC,OAAO,EACPC,SAAS,GAEXC,kBAAmBA,KACb3B,GACFZ,EAAAA,GAAKa,IAAID,EAAS,CAAEE,SAAU,GAAIC,QAAS,GAC7C,EAEFyB,WAAYA,KACN5B,GACFZ,EAAAA,GAAKyC,GAAG7B,EAAS,CAAEE,SAAU,EAAGC,QAAS,GAC3C,IAIJJ,EAASN,SAASW,IAChBc,EAASW,GAAGzB,EAAS,CAAEC,OAAQD,EAAQ0B,QAAQzB,QAAS,IAG1DR,EAAoBJ,SAASsC,IAC3B,MAAMC,EAASC,MAAMC,KAAKpC,GAAUqC,QAAQzC,GAAOA,EAAGoC,QAAQM,QAAUL,EAAQD,QAAQM,QAExF9C,EAAAA,EAAc+C,OAAO,CACnBhB,QAASU,EACTT,MAAO,aACPC,IAAK,aACLE,OAAO,EACPC,SAAS,EACTY,QAASA,KACPlD,EAAAA,GAAKyC,GAAGG,EAAO,GAAGxC,iBAAiB,wBAAyB,CAAEW,QAAS,GAAI,EAE7EoC,YAAaA,KACXnD,EAAAA,GAAKyC,GAAGG,EAAO,GAAGxC,iBAAiB,wBAAyB,CAAEW,QAAS,IAAM,GAE/E,IAGJb,EAAAA,EAAckD,SAAS,G","sources":["webpack://silverstripe-base/./themes/app/src/elements/media-scrollable-content.js"],"sourcesContent":["import { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\ndocument.querySelectorAll(\".element-mediascrollablecontent\").forEach((el) => {\n  const sectionsPlaceholder = el.querySelector(\".scroll-sections-placeholder\");\n  const sectionPlaceholders = el.querySelectorAll(\".scroll-section-placeholder\");\n  const sections = el.querySelectorAll(\".scroll-section\");\n  const contents = el.querySelectorAll(\".scroll-content\");\n  const actions = el.querySelector(\".element-actions\");\n\n  if (actions) {\n    gsap.set(actions, { yPercent: 40, opacity: 0 });\n  }\n\n  contents.forEach((content) => {\n    const height = content.scrollHeight;\n    const styles = window.getComputedStyle(content);\n    const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n    const padding = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);\n\n    content.setAttribute(\"data-height\", height + margin + padding);\n  });\n\n  gsap.set(el.querySelectorAll(\".scroll-section-item\"), { opacity: 0.4 });\n  gsap.set(contents, { height: 0 });\n\n  const timeline = gsap.timeline({\n    paused: true,\n    scrollTrigger: {\n      trigger: el.querySelector(\".scroll-sections\"),\n      start: \"top center\",\n      end: () => {\n        return `${sectionsPlaceholder.offsetHeight}px center`;\n      },\n      scrub: true,\n      markers: false,\n    },\n    onReverseComplete: () => {\n      if (actions) {\n        gsap.set(actions, { yPercent: 40, opacity: 0 });\n      }\n    },\n    onComplete: () => {\n      if (actions) {\n        gsap.to(actions, { yPercent: 0, opacity: 1 });\n      }\n    },\n  });\n\n  contents.forEach((content) => {\n    timeline.to(content, { height: content.dataset.height });\n  });\n\n  sectionPlaceholders.forEach((section) => {\n    const target = Array.from(sections).filter((el) => el.dataset.index === section.dataset.index);\n\n    ScrollTrigger.create({\n      trigger: section,\n      start: \"top center\",\n      end: \"top center\",\n      scrub: true,\n      markers: false,\n      onEnter: () => {\n        gsap.to(target[0].querySelectorAll(\".scroll-section-item\"), { opacity: 1 });\n      },\n      onEnterBack: () => {\n        gsap.to(target[0].querySelectorAll(\".scroll-section-item\"), { opacity: 0.4 });\n      },\n    });\n  });\n\n  ScrollTrigger.refresh();\n});\n"],"names":["gsap","registerPlugin","ScrollTrigger","document","querySelectorAll","forEach","el","sectionsPlaceholder","querySelector","sectionPlaceholders","sections","contents","actions","set","yPercent","opacity","content","height","scrollHeight","styles","window","getComputedStyle","margin","parseFloat","marginTop","marginBottom","padding","paddingTop","paddingBottom","setAttribute","timeline","paused","scrollTrigger","trigger","start","end","offsetHeight","scrub","markers","onReverseComplete","onComplete","to","dataset","section","target","Array","from","filter","index","create","onEnter","onEnterBack","refresh"],"sourceRoot":""}