easy-slides/packages/slidev-theme-easy-jyy/components/ContentScaleControls.vue

<script setup lang="ts">
import { sharedState, useNav } from '@slidev/client'
import { onBeforeUnmount, onMounted, watch } from 'vue'

type ScalableKind = 'table' | 'code'

interface ScaleMessage {
  key: string
  kind: ScalableKind
  scale: number
}

interface TableBaseStyle {
  tableFontSize: number
  tableInlineFontSize: string
  cells: Array<{
    element: HTMLElement
    inlinePaddingBottom: string
    inlinePaddingLeft: string
    inlinePaddingRight: string
    inlinePaddingTop: string
    paddingBottom: number
    paddingLeft: number
    paddingRight: number
    paddingTop: number
  }>
}

interface CodeBaseStyle {
  codeFontSize: number
  createdHost: boolean
}

interface ImageInteraction {
  ariaLabel: string | null
  role: string | null
  tabIndex: string | null
  click: (event: MouseEvent) => void
  keydown: (event: KeyboardEvent) => void
}

interface ImagePreviewRequest {
  alt: string
  id: string
  sentAt: number
  src: string
}

interface ImagePreviewAcknowledgement {
  requestId: string
  sentAt: number
  viewerId: string
}

interface EasySlidesSharedState {
  easySlidesImagePreview?: {
    acknowledgement?: ImagePreviewAcknowledgement
    request?: ImagePreviewRequest
  }
}

interface PendingImagePreview {
  cleanupTimer?: ReturnType<typeof setTimeout>
  fallbackOpened: boolean
  fallbackTimer: ReturnType<typeof setTimeout>
  image: HTMLImageElement
  requestId: string
}

const nav = useNav()
const easySharedState = sharedState as typeof sharedState & EasySlidesSharedState
const clientId = createClientId()
const mountedAt = Date.now()
const scales = new Map<string, number>()
const tableStyles = new WeakMap<HTMLTableElement, TableBaseStyle>()
const codeStyles = new WeakMap<HTMLPreElement, CodeBaseStyle>()
const imageInteractions = new Map<HTMLImageElement, ImageInteraction>()
let observer: MutationObserver | undefined
let resizeObserver: ResizeObserver | undefined
let channel: BroadcastChannel | undefined
let lightbox: HTMLElement | undefined
let lightboxImage: HTMLImageElement | undefined
let lightboxClose: HTMLButtonElement | undefined
let activeImage: HTMLImageElement | undefined
let pendingImagePreview: PendingImagePreview | undefined
let stopAcknowledgementWatch: (() => void) | undefined
let stopRequestWatch: (() => void) | undefined
let fitFrame: number | undefined
let lastHandledRequestId = easySharedState.easySlidesImagePreview?.request?.id ?? ''
let bodyOverflow = ''

function createClientId() {
  if (typeof crypto.randomUUID === 'function')
    return crypto.randomUUID()
  return `${Date.now()}-${Math.random().toString(36).slice(2)}`
}

function isInteractiveRoute() {
  if (/(?:^|\/)(?:overview|export|editor|notes|notes-edit|print)(?:\/|$)/.test(window.location.pathname))
    return false
  return nav.isPresenter.value || nav.hasPrimarySlide.value
}

function isAuditRoute() {
  return new URLSearchParams(window.location.search).has('easy-slides-audit')
}

function isProjectionRoute() {
  return !isAuditRoute() && isInteractiveRoute() && !nav.isPresenter.value && nav.hasPrimarySlide.value
}

function clampScale(scale: number) {
  return Math.min(1.6, Math.max(0.6, Math.round(scale * 10) / 10))
}

function findSlideNumber(element: Element) {
  const page = element.closest<HTMLElement>('[class*="slidev-page-"]')
  const pageClass = page && Array.from(page.classList).find(className => /^slidev-page-\d+$/.test(className))
  return pageClass?.replace('slidev-page-', '') ?? 'unknown'
}

function contentKey(element: Element, kind: ScalableKind) {
  const layout = element.closest('.slidev-layout')
  const selector = kind === 'table' ? 'table' : 'pre'
  const elements = layout ? Array.from(layout.querySelectorAll(selector)) : [element]
  const index = Math.max(0, elements.indexOf(element))
  return `slide:${findSlideNumber(element)}:${kind}:${index}`
}

function createButton(label: string, text: string, onClick: () => void) {
  const button = document.createElement('button')
  button.type = 'button'
  button.className = 'easy-content-scale-button'
  button.setAttribute('aria-label', label)
  button.title = label
  button.textContent = text
  button.addEventListener('pointerdown', event => event.stopPropagation())
  button.addEventListener('click', (event) => {
    event.preventDefault()
    event.stopPropagation()
    onClick()
  })
  return button
}

function kindLabel(kind: ScalableKind) {
  return kind === 'table' ? '表格' : '代码'
}

function createToolbar(key: string, kind: ScalableKind) {
  const label = kindLabel(kind)
  const toolbar = document.createElement('nav')
  toolbar.className = 'easy-content-scale-toolbar'
  toolbar.setAttribute('aria-label', `${label}缩放`)
  toolbar.dataset.easyScaleKey = key
  toolbar.dataset.easyScaleKind = kind

  const decrease = createButton(`缩小${label}`, '−', () => updateScale(key, kind, currentScale(key) - 0.1))
  const reset = createButton(`重置${label}缩放`, '100%', () => updateScale(key, kind, 1))
  reset.classList.add('easy-content-scale-reset')
  const increase = createButton(`放大${label}`, '+', () => updateScale(key, kind, currentScale(key) + 0.1))
  toolbar.append(decrease, reset, increase)
  return toolbar
}

function currentScale(key: string) {
  return scales.get(key) ?? 1
}

function updateScale(key: string, kind: ScalableKind, requestedScale: number, shouldBroadcast = true) {
  const scale = clampScale(requestedScale)
  scales.set(key, scale)
  applyScale(key, kind, scale)
  if (shouldBroadcast)
    channel?.postMessage({ key, kind, scale } satisfies ScaleMessage)
}

function updateResetButton(host: HTMLElement, scale: number) {
  const reset = host.querySelector<HTMLButtonElement>('.easy-content-scale-reset')
  if (!reset)
    return
  const percentage = `${Math.round(scale * 100)}%`
  reset.textContent = percentage
  reset.title = `${reset.getAttribute('aria-label')}（当前 ${percentage}）`
}

function applyScale(key: string, kind: ScalableKind, scale: number) {
  const hostSelector = kind === 'table' ? '.easy-content-table-host' : '.easy-content-code-host'
  document.querySelectorAll<HTMLElement>(hostSelector).forEach((host) => {
    if (host.dataset.easyScaleKey !== key)
      return
    updateResetButton(host, scale)

    if (kind === 'code') {
      const code = host.querySelector<HTMLPreElement>('pre')
      const base = code && codeStyles.get(code)
      if (!code || !base)
        return
      if (scale === 1)
        host.style.removeProperty('--easy-code-scaled-font-size')
      else
        host.style.setProperty('--easy-code-scaled-font-size', `${base.codeFontSize * scale}px`)
      return
    }

    const table = host.querySelector<HTMLTableElement>('table')
    const base = table && tableStyles.get(table)
    if (!table || !base)
      return
    if (scale === 1) {
      table.style.fontSize = base.tableInlineFontSize
      base.cells.forEach((cell) => {
        cell.element.style.paddingTop = cell.inlinePaddingTop
        cell.element.style.paddingRight = cell.inlinePaddingRight
        cell.element.style.paddingBottom = cell.inlinePaddingBottom
        cell.element.style.paddingLeft = cell.inlinePaddingLeft
      })
      return
    }
    table.style.fontSize = `${base.tableFontSize * scale}px`
    base.cells.forEach((cell) => {
      cell.element.style.paddingTop = `${cell.paddingTop * scale}px`
      cell.element.style.paddingRight = `${cell.paddingRight * scale}px`
      cell.element.style.paddingBottom = `${cell.paddingBottom * scale}px`
      cell.element.style.paddingLeft = `${cell.paddingLeft * scale}px`
    })
  })
}

function createLightbox() {
  const overlay = document.createElement('div')
  overlay.className = 'easy-image-lightbox'
  overlay.hidden = true
  overlay.setAttribute('role', 'dialog')
  overlay.setAttribute('aria-modal', 'true')
  overlay.setAttribute('aria-label', '图片全屏预览')

  const preview = document.createElement('img')
  preview.className = 'easy-image-lightbox-preview'
  preview.alt = ''

  const close = document.createElement('button')
  close.type = 'button'
  close.className = 'easy-image-lightbox-close'
  close.setAttribute('aria-label', '关闭图片全屏预览')
  close.title = '关闭（Esc）'
  close.textContent = '×'
  close.addEventListener('click', (event) => {
    event.preventDefault()
    event.stopPropagation()
    closeLightbox()
  })

  overlay.addEventListener('pointerdown', event => event.stopPropagation())
  overlay.addEventListener('click', (event) => {
    event.preventDefault()
    event.stopPropagation()
    if (event.target === overlay)
      closeLightbox()
  })
  overlay.append(preview, close)
  document.body.append(overlay)
  lightbox = overlay
  lightboxImage = preview
  lightboxClose = close
}

function showLightbox(src: string, alt: string, image?: HTMLImageElement) {
  if (!lightbox || !lightboxImage || !lightboxClose)
    return
  const wasHidden = lightbox.hidden
  activeImage = image
  lightboxImage.src = src
  lightboxImage.alt = alt
  lightbox.hidden = false
  if (wasHidden)
    bodyOverflow = document.body.style.overflow
  document.body.style.overflow = 'hidden'
  document.addEventListener('keydown', handleLightboxKeydown, true)
  lightboxClose.focus()
}

function openLightbox(image: HTMLImageElement) {
  showLightbox(image.currentSrc || image.src, image.alt, image)
}

function closeLightbox(restoreFocus = true) {
  if (!lightbox || lightbox.hidden)
    return
  document.removeEventListener('keydown', handleLightboxKeydown, true)
  lightbox.hidden = true
  if (lightboxImage)
    lightboxImage.removeAttribute('src')
  document.body.style.overflow = bodyOverflow
  if (restoreFocus)
    activeImage?.focus()
  activeImage = undefined
}

function handleLightboxKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    event.preventDefault()
    event.stopPropagation()
    closeLightbox()
  }
  else if (event.key === 'Tab') {
    event.preventDefault()
    lightboxClose?.focus()
  }
}

function updateImagePreviewState(patch: NonNullable<EasySlidesSharedState['easySlidesImagePreview']>) {
  easySharedState.easySlidesImagePreview = {
    ...easySharedState.easySlidesImagePreview,
    ...patch,
  }
}

function clearPendingImagePreview() {
  if (!pendingImagePreview)
    return
  clearTimeout(pendingImagePreview.fallbackTimer)
  if (pendingImagePreview.cleanupTimer)
    clearTimeout(pendingImagePreview.cleanupTimer)
  pendingImagePreview = undefined
}

function requestProjectionLightbox(image: HTMLImageElement) {
  clearPendingImagePreview()
  const request: ImagePreviewRequest = {
    alt: image.alt,
    id: createClientId(),
    sentAt: Date.now(),
    src: image.currentSrc || image.src,
  }
  const pending: PendingImagePreview = {
    fallbackOpened: false,
    fallbackTimer: setTimeout(() => {
      if (pendingImagePreview?.requestId !== request.id)
        return
      pendingImagePreview.fallbackOpened = true
      openLightbox(image)
      pendingImagePreview.cleanupTimer = setTimeout(() => {
        if (pendingImagePreview?.requestId === request.id)
          pendingImagePreview = undefined
      }, 10_000)
    }, 500),
    image,
    requestId: request.id,
  }
  pendingImagePreview = pending
  updateImagePreviewState({ request })
}

function activateImage(image: HTMLImageElement) {
  if (nav.isPresenter.value)
    requestProjectionLightbox(image)
  else
    openLightbox(image)
}

function handleImagePreviewAcknowledgement(acknowledgement: ImagePreviewAcknowledgement | undefined) {
  if (!acknowledgement || !pendingImagePreview || acknowledgement.requestId !== pendingImagePreview.requestId)
    return
  const pending = pendingImagePreview
  clearPendingImagePreview()
  if (pending.fallbackOpened && activeImage === pending.image)
    closeLightbox(false)
}

function handleImagePreviewRequest(request: ImagePreviewRequest | undefined) {
  if (!request || !isProjectionRoute() || request.id === lastHandledRequestId)
    return
  if (request.sentAt < mountedAt - 100 || Date.now() - request.sentAt > 10_000)
    return
  lastHandledRequestId = request.id
  showLightbox(request.src, request.alt)
  updateImagePreviewState({
    acknowledgement: {
      requestId: request.id,
      sentAt: Date.now(),
      viewerId: clientId,
    },
  })
}

function enhanceImage(image: HTMLImageElement) {
  if (imageInteractions.has(image) || image.closest('a, button') || image.closest('.easy-image-lightbox'))
    return

  const click = (event: MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()
    activateImage(image)
  }
  const keydown = (event: KeyboardEvent) => {
    if (event.key !== 'Enter' && event.key !== ' ')
      return
    event.preventDefault()
    event.stopPropagation()
    activateImage(image)
  }
  imageInteractions.set(image, {
    ariaLabel: image.getAttribute('aria-label'),
    role: image.getAttribute('role'),
    tabIndex: image.getAttribute('tabindex'),
    click,
    keydown,
  })
  image.classList.add('easy-image-preview-trigger')
  image.tabIndex = 0
  image.setAttribute('role', 'button')
  if (!image.hasAttribute('aria-label'))
    image.setAttribute('aria-label', image.alt ? `全屏查看图片：${image.alt}` : '全屏查看图片')
  image.addEventListener('click', click)
  image.addEventListener('keydown', keydown)
}

function enhanceTable(table: HTMLTableElement) {
  if (table.closest('.easy-content-table-host'))
    return

  const key = contentKey(table, 'table')
  const cells = Array.from(table.querySelectorAll<HTMLElement>('th, td')).map((element) => {
    const style = getComputedStyle(element)
    return {
      element,
      inlinePaddingBottom: element.style.paddingBottom,
      inlinePaddingLeft: element.style.paddingLeft,
      inlinePaddingRight: element.style.paddingRight,
      inlinePaddingTop: element.style.paddingTop,
      paddingBottom: Number.parseFloat(style.paddingBottom),
      paddingLeft: Number.parseFloat(style.paddingLeft),
      paddingRight: Number.parseFloat(style.paddingRight),
      paddingTop: Number.parseFloat(style.paddingTop),
    }
  })
  tableStyles.set(table, {
    tableFontSize: Number.parseFloat(getComputedStyle(table).fontSize),
    tableInlineFontSize: table.style.fontSize,
    cells,
  })

  const host = document.createElement('div')
  host.className = 'easy-content-scale-host easy-content-table-host'
  host.dataset.easyScaleKey = key
  host.dataset.easyScaleKind = 'table'
  table.replaceWith(host)
  host.append(table, createToolbar(key, 'table'))
  applyScale(key, 'table', currentScale(key))
}

function enhanceCode(code: HTMLPreElement) {
  if (code.closest('.easy-content-code-host'))
    return

  const key = contentKey(code, 'code')
  let host = code.closest<HTMLElement>('.slidev-code-wrapper')
  const createdHost = !host
  if (!host) {
    host = document.createElement('div')
    code.replaceWith(host)
    host.append(code)
  }
  host.classList.add('easy-content-scale-host', 'easy-content-code-host')
  host.dataset.easyScaleKey = key
  host.dataset.easyScaleKind = 'code'
  host.dataset.easyCodeHostCreated = createdHost ? 'true' : 'false'
  codeStyles.set(code, {
    codeFontSize: Number.parseFloat(getComputedStyle(code).fontSize),
    createdHost,
  })
  host.append(createToolbar(key, 'code'))
  applyScale(key, 'code', currentScale(key))
  resizeObserver?.observe(code.closest('.slidev-layout') ?? host)
  scheduleCodeHeightFit()
}

function enhanceContent(root: ParentNode = document) {
  const images = Array.from(root.querySelectorAll<HTMLImageElement>('.slidev-layout img'))
  const tables = Array.from(root.querySelectorAll<HTMLTableElement>('.slidev-layout table'))
  const codes = Array.from(root.querySelectorAll<HTMLPreElement>('.slidev-layout pre'))
  if (root instanceof HTMLImageElement && root.closest('.slidev-layout'))
    images.unshift(root)
  if (root instanceof HTMLTableElement && root.closest('.slidev-layout'))
    tables.unshift(root)
  if (root instanceof HTMLPreElement && root.closest('.slidev-layout'))
    codes.unshift(root)
  images.forEach(enhanceImage)
  tables.forEach(enhanceTable)
  codes.forEach(enhanceCode)
}

function codeHeightRegion(code: HTMLPreElement) {
  return code.closest<HTMLElement>('.easy-two-cols-grid > div')
    ?? code.closest<HTMLElement>('.slidev-layout')
}

function hasExplicitCodeHeight(code: HTMLPreElement) {
  if (code.style.height || code.style.maxHeight)
    return true
  return Boolean(getComputedStyle(code).getPropertyValue('--easy-code-height').trim())
}

function availableCodeHeight(code: HTMLPreElement, region: HTMLElement) {
  const layout = code.closest<HTMLElement>('.slidev-layout')
  if (!layout || layout.clientHeight <= 0)
    return 0
  const layoutRect = layout.getBoundingClientRect()
  const regionRect = region.getBoundingClientRect()
  const codeRect = code.getBoundingClientRect()
  if (layoutRect.height <= 0 || regionRect.height <= 0 || codeRect.width <= 0)
    return 0
  const scale = layoutRect.height / layout.clientHeight
  if (!Number.isFinite(scale) || scale <= 0)
    return 0
  const regionPaddingBottom = Number.parseFloat(getComputedStyle(region).paddingBottom) || 0
  const layoutPaddingBottom = Number.parseFloat(getComputedStyle(layout).paddingBottom) || 0
  const regionBottom = regionRect.bottom - regionPaddingBottom * scale
  const layoutBottom = layoutRect.bottom - layoutPaddingBottom * scale
  return Math.max(0, Math.floor((Math.min(regionBottom, layoutBottom) - codeRect.top) / scale))
}

function setHostLength(host: HTMLElement, property: string, value?: number) {
  const next = value && value > 0 ? `${value}px` : ''
  if (host.style.getPropertyValue(property) === next)
    return
  if (next)
    host.style.setProperty(property, next)
  else
    host.style.removeProperty(property)
}

function fitCodeHeights() {
  const groups = new Map<HTMLElement, HTMLPreElement[]>()
  document.querySelectorAll<HTMLPreElement>('.easy-content-code-host pre').forEach((code) => {
    const host = code.closest<HTMLElement>('.easy-content-code-host')
    if (!host)
      return
    if (hasExplicitCodeHeight(code)) {
      setHostLength(host, '--easy-code-auto-height')
      setHostLength(host, '--easy-code-auto-max-height')
      return
    }
    const region = codeHeightRegion(code)
    if (!region)
      return
    const group = groups.get(region) ?? []
    group.push(code)
    groups.set(region, group)
  })

  groups.forEach((codes, region) => {
    const single = codes.length === 1
    codes.forEach((code) => {
      const host = code.closest<HTMLElement>('.easy-content-code-host')
      if (!host)
        return
      const available = availableCodeHeight(code, region)
      if (!available)
        return
      setHostLength(host, '--easy-code-auto-height', single ? available : undefined)
      setHostLength(host, '--easy-code-auto-max-height', available)
    })
  })
}

function scheduleCodeHeightFit() {
  if (fitFrame !== undefined)
    return
  fitFrame = requestAnimationFrame(() => {
    fitFrame = undefined
    fitCodeHeights()
  })
}

function cleanupImage(image: HTMLImageElement, interaction: ImageInteraction) {
  image.removeEventListener('click', interaction.click)
  image.removeEventListener('keydown', interaction.keydown)
  image.classList.remove('easy-image-preview-trigger')
  restoreAttribute(image, 'aria-label', interaction.ariaLabel)
  restoreAttribute(image, 'role', interaction.role)
  restoreAttribute(image, 'tabindex', interaction.tabIndex)
}

function restoreAttribute(element: Element, name: string, value: string | null) {
  if (value === null)
    element.removeAttribute(name)
  else
    element.setAttribute(name, value)
}

function cleanupTableHosts() {
  document.querySelectorAll<HTMLElement>('.easy-content-table-host').forEach((host) => {
    const table = host.querySelector<HTMLTableElement>('table')
    const base = table && tableStyles.get(table)
    if (!table)
      return
    if (base) {
      table.style.fontSize = base.tableInlineFontSize
      base.cells.forEach((cell) => {
        cell.element.style.paddingTop = cell.inlinePaddingTop
        cell.element.style.paddingRight = cell.inlinePaddingRight
        cell.element.style.paddingBottom = cell.inlinePaddingBottom
        cell.element.style.paddingLeft = cell.inlinePaddingLeft
      })
    }
    host.replaceWith(table)
  })
}

function cleanupCodeHosts() {
  document.querySelectorAll<HTMLElement>('.easy-content-code-host').forEach((host) => {
    const code = host.querySelector<HTMLPreElement>('pre')
    const base = code && codeStyles.get(code)
    host.querySelector(':scope > .easy-content-scale-toolbar')?.remove()
    host.style.removeProperty('--easy-code-scaled-font-size')
    host.style.removeProperty('--easy-code-auto-height')
    host.style.removeProperty('--easy-code-auto-max-height')
    host.classList.remove('easy-content-scale-host', 'easy-content-code-host')
    delete host.dataset.easyScaleKey
    delete host.dataset.easyScaleKind
    delete host.dataset.easyCodeHostCreated
    if (code && base?.createdHost)
      host.replaceWith(code)
  })
}

function cleanupContent() {
  clearPendingImagePreview()
  closeLightbox()
  imageInteractions.forEach((interaction, image) => cleanupImage(image, interaction))
  imageInteractions.clear()
  lightbox?.remove()
  lightbox = undefined
  lightboxImage = undefined
  lightboxClose = undefined
  cleanupTableHosts()
  cleanupCodeHosts()
}

function isScaleMessage(value: unknown): value is ScaleMessage {
  if (!value || typeof value !== 'object')
    return false
  const message = value as Partial<ScaleMessage>
  return typeof message.key === 'string'
    && (message.kind === 'table' || message.kind === 'code')
    && typeof message.scale === 'number'
    && Number.isFinite(message.scale)
}

onMounted(() => {
  if (!isInteractiveRoute())
    return
  createLightbox()
  if ('BroadcastChannel' in window) {
    channel = new BroadcastChannel(`easy-slides:content-scale:${import.meta.env.BASE_URL}`)
    channel.addEventListener('message', (event) => {
      if (isScaleMessage(event.data))
        updateScale(event.data.key, event.data.kind, event.data.scale, false)
    })
  }
  stopAcknowledgementWatch = watch(
    () => easySharedState.easySlidesImagePreview?.acknowledgement,
    handleImagePreviewAcknowledgement,
  )
  stopRequestWatch = watch(
    () => easySharedState.easySlidesImagePreview?.request,
    handleImagePreviewRequest,
  )
  resizeObserver = new ResizeObserver(scheduleCodeHeightFit)
  enhanceContent()
  document.querySelectorAll<HTMLElement>('.slidev-layout').forEach(layout => resizeObserver?.observe(layout))
  observer = new MutationObserver((records) => {
    records.forEach(record => enhanceContent(record.target as ParentNode))
    scheduleCodeHeightFit()
  })
  observer.observe(document.body, { childList: true, subtree: true })
  window.addEventListener('resize', scheduleCodeHeightFit)
  void document.fonts?.ready.then(scheduleCodeHeightFit)
  scheduleCodeHeightFit()
})

onBeforeUnmount(() => {
  observer?.disconnect()
  resizeObserver?.disconnect()
  channel?.close()
  stopAcknowledgementWatch?.()
  stopRequestWatch?.()
  window.removeEventListener('resize', scheduleCodeHeightFit)
  if (fitFrame !== undefined)
    cancelAnimationFrame(fitFrame)
  cleanupContent()
})
</script>

<template>
  <span hidden aria-hidden="true" />
</template>