script.js

(() => {
  const toc = document.getElementById('toc')
  const backdrop = document.getElementById('toc-backdrop')
  const menuToggle = document.getElementById('menu-toggle')
  const backTop = document.getElementById('back-top')
  const tocLinks = [...document.querySelectorAll('.toc-list a')]
  const sections = [...document.querySelectorAll('.section')]

  const closeToc = () => {
    toc?.classList.remove('is-open')
    backdrop?.classList.remove('is-open')
    if (backdrop) backdrop.hidden = true
    menuToggle?.setAttribute('aria-expanded', 'false')
  }

  const openToc = () => {
    toc?.classList.add('is-open')
    if (backdrop) {
      backdrop.hidden = false
      requestAnimationFrame(() => backdrop.classList.add('is-open'))
    }
    menuToggle?.setAttribute('aria-expanded', 'true')
  }

  menuToggle?.addEventListener('click', () => {
    if (toc?.classList.contains('is-open')) closeToc()
    else openToc()
  })

  backdrop?.addEventListener('click', closeToc)

  tocLinks.forEach((link) => {
    link.addEventListener('click', () => {
      const id = link.getAttribute('href')?.slice(1)
      const target = id ? document.getElementById(id) : null
      if (target) hydrate(target)
      if (window.matchMedia('(max-width: 900px)').matches) closeToc()
    })
  })

  const hydrate = (section) => {
    if (!section) return
    section.classList.add('is-visible', 'is-hydrated')
    if (window.EW_I18N && typeof window.EW_I18N.hydrateSection === 'function') {
      window.EW_I18N.hydrateSection(section)
    }
  }

  // Prefetch hash target (e.g. shared links)
  const hashId = location.hash.replace(/^#/, '')
  if (hashId) {
    const hashSection = document.getElementById(hashId)
    if (hashSection) hydrate(hashSection)
  }

  if ('IntersectionObserver' in window) {
    const lazyObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          hydrate(entry.target)
          lazyObserver.unobserve(entry.target)
        })
      },
      { rootMargin: '320px 0px', threshold: 0.01 }
    )

    sections.forEach((section) => {
      if (section.id === 'overview') {
        hydrate(section)
        return
      }
      lazyObserver.observe(section)
    })

    const spyObserver = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)
        if (!visible.length) return
        const id = visible[0].target.id
        tocLinks.forEach((link) => {
          link.classList.toggle('is-active', link.getAttribute('href') === `#${id}`)
        })
      },
      { rootMargin: '-20% 0px -55% 0px', threshold: [0.15, 0.35, 0.55] }
    )
    sections.forEach((section) => spyObserver.observe(section))
  } else {
    sections.forEach((section) => hydrate(section))
  }

  const backTopBar = document.getElementById('back-top-bar')

  const updateScrollProgress = () => {
    const doc = document.documentElement
    const scrollTop = window.scrollY || doc.scrollTop || 0
    const max = Math.max(1, doc.scrollHeight - window.innerHeight)
    const progress = Math.min(100, Math.max(0, (scrollTop / max) * 100))
    if (backTopBar) backTopBar.style.strokeDashoffset = String(100 - progress)
    if (scrollTop > 480) backTop?.classList.add('is-show')
    else backTop?.classList.remove('is-show')
  }
  window.addEventListener('scroll', updateScrollProgress, { passive: true })
  window.addEventListener('resize', updateScrollProgress, { passive: true })
  updateScrollProgress()

  backTop?.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  })

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeToc()
  })
})()