23-page-format-dropdown.js

;(() => {
  'use strict'

  const pushCtaLink = (clickText, clickUrl) => {
    const h1 = document.querySelector('h1')
    window.dataLayer = window.dataLayer || []
    window.dataLayer.push({
      event: 'content_click',
      clickText,
      itemTitle: h1 ? h1.textContent.trim() : document.title,
      clickUrl,
      elementType: 'link',
      contentType: 'Page Options Dropdown',
    })
  }

  const dropdowns = document.querySelectorAll('.page-options-dropdown')
  if (!dropdowns.length) return

  const href = window.location.href
  const mdUrl = href.endsWith('/') ? href + 'index.md' : href.replace(/(?:\.html)?(?=#|$)/, '.md')
  const prompt = 'Read from ' + href + ' so I can ask questions about it.'

  const removeDropdowns = () => dropdowns.forEach((d) => d.remove())

  // Skip markdown check on localhost (local testing)
  const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
  if (!isLocalhost) {
    fetch(mdUrl, { method: 'HEAD' })
      .then((res) => {
        if (!res.ok) removeDropdowns()
      })
      .catch(removeDropdowns)
  }

  // Adjust sidebar top when banners are visible
  const sidebar = document.querySelector('.toc-sidebar')
  if (sidebar) {
    const adjustSidebarTop = () => {
      const topBanner = document.querySelector('.top-banner:not(.hide)')
      sidebar.style.top = topBanner ? 'var(--banner-height)' : '0px'
    }
    adjustSidebarTop()
    // Re-check when banners are dismissed
    document.addEventListener('click', (e) => {
      if (e.target.closest('.close-button')) setTimeout(adjustSidebarTop, 100)
    })
  }

  dropdowns.forEach((dropdown) => {
    const primaryBtn = dropdown.querySelector('.page-options-primary')
    const toggle = dropdown.querySelector('.page-options-toggle')
    const optionsPanel = dropdown.querySelector('.page-options-menu')
    const statusEl = dropdown.querySelector('.page-options-status')
    if (!toggle || !optionsPanel) return

    const menuItems = optionsPanel.querySelectorAll('[role="menuitem"]')
    if (!menuItems.length) return

    const scrollParent = dropdown.closest('.scrollbar')

    const openMenu = () => {
      if (scrollParent) scrollParent.style.overflow = 'visible'
      toggle.setAttribute('aria-expanded', 'true')
      optionsPanel.removeAttribute('hidden')
      optionsPanel.classList.add('is-open')
      menuItems[0].focus()
    }

    const closeMenu = (restoreFocus) => {
      if (scrollParent) scrollParent.style.overflow = ''
      toggle.setAttribute('aria-expanded', 'false')
      optionsPanel.classList.remove('is-open')
      optionsPanel.setAttribute('hidden', '')
      if (restoreFocus) toggle.focus()
    }

    // Set href for link items
    const viewMd = optionsPanel.querySelector('[data-action="view-md"]')
    const openChatgpt = optionsPanel.querySelector('[data-action="open-chatgpt"]')
    const openClaude = optionsPanel.querySelector('[data-action="open-claude"]')
    const openPerplexity = optionsPanel.querySelector('[data-action="open-perplexity"]')

    if (viewMd) viewMd.href = mdUrl
    if (openChatgpt) openChatgpt.href = 'https://chatgpt.com/?q=' + encodeURIComponent(prompt)
    if (openClaude) openClaude.href = 'https://claude.ai/new?q=' + encodeURIComponent(prompt)
    if (openPerplexity) openPerplexity.href = 'https://www.perplexity.ai/search?q=' + encodeURIComponent(prompt)

    const copyMd = () => {
      fetch(mdUrl)
        .then((res) => res.text())
        .then((text) => {
          const h1Index = text.indexOf('\n# ')
          const content = h1Index !== -1 ? text.substring(h1Index + 1) : text
          return navigator.clipboard.writeText(content).then(() => {
            if (statusEl) {
              statusEl.textContent = 'Copied to clipboard'
              setTimeout(() => {
                statusEl.textContent = ''
              }, 3000)
            }
            if (copyTooltip) {
              copyTooltip.show()
              setTimeout(() => {
                copyTooltip.hide()
              }, 2000)
            }
          })
        })
        .catch(() => {
          window.open(mdUrl, '_blank')
        })
    }

    // Tooltip for copy feedback
    let copyTooltip
    if (primaryBtn && typeof tippy === 'function') {
      const isFooter = dropdown.classList.contains('page-options-footer')
      const combo = dropdown.querySelector('.page-options-combo')
      copyTooltip = tippy(combo || primaryBtn, {
        arrow: tippy.roundArrow,
        animation: 'shift-away',
        content: 'Copied!',
        delay: 200,
        maxWidth: 240,
        placement: isFooter ? 'top' : 'bottom',
        trigger: 'manual',
        theme: 'copy-link-popover',
        zIndex: 'var(--z-nav-mobile)',
      })
    }

    if (primaryBtn) {
      primaryBtn.addEventListener('click', () => {
        pushCtaLink(primaryBtn.textContent.trim(), mdUrl)
        copyMd()
      })
    }

    // Menu copy button also copies
    const menuCopyBtn = optionsPanel.querySelector('[data-action="copy-md"]')
    if (menuCopyBtn) {
      menuCopyBtn.addEventListener('click', () => {
        pushCtaLink(menuCopyBtn.textContent.trim(), mdUrl)
        copyMd()
        closeMenu(true)
      })
    }

    toggle.addEventListener('click', () => {
      const expanded = toggle.getAttribute('aria-expanded') === 'true'
      if (expanded) {
        closeMenu(false)
      } else {
        openMenu()
      }
    })

    toggle.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowDown' || e.key === 'Down') {
        e.preventDefault()
        openMenu()
      }
    })

    optionsPanel.addEventListener('keydown', (e) => {
      const currentIndex = [].indexOf.call(menuItems, document.activeElement)

      if (e.key === 'ArrowDown' || e.key === 'Down') {
        e.preventDefault()
        const next = (currentIndex + 1) % menuItems.length
        menuItems[next].focus()
      } else if (e.key === 'ArrowUp' || e.key === 'Up') {
        e.preventDefault()
        const prev = (currentIndex - 1 + menuItems.length) % menuItems.length
        menuItems[prev].focus()
      } else if (e.key === 'Home') {
        e.preventDefault()
        menuItems[0].focus()
      } else if (e.key === 'End') {
        e.preventDefault()
        menuItems[menuItems.length - 1].focus()
      } else if (e.key === 'Escape' || e.key === 'Esc') {
        e.preventDefault()
        closeMenu(true)
      } else if (e.key === 'Tab') {
        closeMenu(false)
      }
    })

    // Close on click outside
    document.addEventListener('click', (e) => {
      if (!dropdown.contains(e.target)) {
        closeMenu(false)
      }
    })

    // Close after clicking a link item
    optionsPanel.querySelectorAll('a[role="menuitem"]').forEach((link) => {
      link.addEventListener('click', () => {
        pushCtaLink(link.textContent.trim(), link.href)
        closeMenu(false)
      })
    })
  })
})()