@asd20/ui-next 2.30.1 → 2.31.0

package/src/helpers/documentPrint.js

@@ -0,0 +1,184 @@
+import { nextTick } from 'vue'
+
+const blocks = new WeakMap()
+const sessions = new WeakMap()
+
+// Component registration is private; preparation is reusable by any opted-in host.
+export function registerDocumentPrintBlock(element, prepare) {
+  blocks.set(element, prepare)
+  return () => blocks.delete(element)
+}
+
+function setTemporaryAttribute(element, name, value, undo) {
+  const prior = element.getAttribute(name)
+  undo.push(() => prior === null ? element.removeAttribute(name) : element.setAttribute(name, prior))
+  value === null ? element.removeAttribute(name) : element.setAttribute(name, value)
+}
+
+function prepareTables(root, undo, diagnostics) {
+  for (const table of root.querySelectorAll('table')) {
+    if (table.tHead || !table.tBodies.length) continue
+    const body = table.tBodies[0]
+    const rows = []
+    // A column header group is a contiguous leading run of all-TH rows. Row
+    // headers/mixed cells stay in tbody; never infer headers from bold styling.
+    for (const row of body.rows) {
+      if (!row.cells.length || !Array.from(row.cells).every(cell => cell.tagName === 'TH' &&
+        !['row', 'rowgroup'].includes(cell.getAttribute('scope')))) break
+      rows.push(row)
+    }
+    if (!rows.length) continue
+    if (rows.some((row, index) => Array.from(row.cells).some(cell => cell.rowSpan === 0 || cell.rowSpan + index > rows.length))) {
+      diagnostics.push({ code: 'table-header-span-unmapped' })
+      continue
+    }
+    const following = rows.at(-1).nextSibling
+    const head = table.ownerDocument.createElement('thead')
+    body.before(head)
+    rows.forEach(row => head.append(row))
+    undo.push(() => { rows.forEach(row => body.insertBefore(row, following)); head.remove() })
+    for (const row of rows) for (const cell of row.cells) {
+      if (!cell.hasAttribute('scope')) setTemporaryAttribute(cell, 'scope', cell.colSpan > 1 ? 'colgroup' : 'col', undo)
+    }
+  }
+}
+
+function prepareEmbeds(root, undo, diagnostics) {
+  const doc = root.ownerDocument
+  for (const embed of root.querySelectorAll('.asd20-message-video, .asd20-tableau-embed')) {
+    const video = embed.classList.contains('asd20-message-video')
+    const source = video ? embed.dataset.src || embed.querySelector('iframe')?.src : embed.dataset.printSrc
+    const description = video ? embed.dataset.descriptiveText || embed.querySelector('.asd20-message-video__description')?.textContent :
+      embed.querySelector('.asd20-tableau-embed__description')?.textContent
+    const title = video ? embed.dataset.title || embed.querySelector('iframe')?.title : 'Interactive data visualization'
+    const alternative = doc.createElement('div')
+    alternative.className = 'asd20-print-only asd20-print-embed-alternative'
+    const text = doc.createElement('p')
+    text.textContent = `${video ? 'Video' : 'Interactive data'}: ${title || 'Untitled'}. ${description ? '' : 'A descriptive text alternative has not been supplied.'}`
+    alternative.append(text)
+    if (!description?.trim()) diagnostics.push({ code: 'embed-description-missing', source: source || '' })
+    let url
+    try { url = new URL(source) } catch { /* Report a missing safe source below. */ }
+    if (url && ['https:', 'http:'].includes(url.protocol)) {
+      const link = doc.createElement('a')
+      link.href = url.href
+      link.textContent = `${video ? 'Watch video' : 'View interactive data'}: ${url.href}`
+      alternative.append(link)
+    } else diagnostics.push({ code: 'embed-source-missing' })
+    embed.append(alternative)
+    undo.push(() => alternative.remove())
+  }
+  for (const iframe of root.querySelectorAll('iframe')) {
+    if (!iframe.closest('.asd20-message-video, .asd20-tableau-embed')) diagnostics.push({ code: 'embed-alternative-unmapped', source: iframe.src })
+  }
+}
+
+function beginDocumentPrint(root) {
+  if (!root?.hasAttribute('data-asd20-document-root')) throw new TypeError('Document printing requires an explicit document root.')
+  const doc = root.ownerDocument
+  if (sessions.has(doc)) throw new Error('A document print session is already active.')
+  const undo = []
+  const diagnostics = []
+  const session = { diagnostics, restore() {
+    if (sessions.get(doc) !== session) return
+    sessions.delete(doc)
+    undo.reverse().forEach(restore => restore())
+  } }
+  sessions.set(doc, session)
+  try {
+    setTemporaryAttribute(doc.documentElement, 'data-asd20-print-profile', 'document', undo)
+    setTemporaryAttribute(root, 'data-asd20-print-prepared', '', undo)
+    for (const stamp of root.querySelectorAll('[data-asd20-print-generated-at]')) {
+      if (stamp.hasAttribute('data-asd20-print-fixed-generated-at')) continue
+      const prior = stamp.textContent
+      stamp.textContent = `Generated: ${new Intl.DateTimeFormat('en-US', {
+        timeZone: 'America/Denver', dateStyle: 'medium', timeStyle: 'long',
+      }).format(new Date())}`
+      undo.push(() => { stamp.textContent = prior })
+    }
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+      const prepare = blocks.get(element)
+      if (prepare) undo.push(prepare())
+    }
+    prepareTables(root, undo, diagnostics)
+    prepareEmbeds(root, undo, diagnostics)
+    if (root.querySelector('[data-cc-block]')) diagnostics.push({ code: 'rich-block-unresolved' })
+    for (const link of root.querySelectorAll('a[href]')) {
+      const href = link.getAttribute('href')
+      if (!href || href.startsWith('#') || link.closest('.asd20-print-contents') || link.hasAttribute('data-asd20-print-no-url')) continue
+      const url = new URL(href, doc.baseURI)
+      if (!['https:', 'http:'].includes(url.protocol) || link.textContent.includes(url.href)) continue
+      setTemporaryAttribute(link, 'data-asd20-print-source', url.href, undo)
+    }
+    for (const image of root.querySelectorAll('img')) setTemporaryAttribute(image, 'loading', 'eager', undo)
+    return session
+  } catch (error) { session.restore(); throw error }
+}
+
+async function waitForAssets(root) {
+  await nextTick() // Includes legacy rich-block enhancement and print state updates.
+  const doc = root.ownerDocument
+  if (doc.fonts) {
+    await doc.fonts.ready
+    if (Array.from(doc.fonts).some(font => font.status === 'error')) throw new Error('A document font failed to load.')
+  }
+  await Promise.all(Array.from(root.querySelectorAll('img')).filter(image => !image.closest('[data-asd20-print-hide], .asd20-print-hide')).map(async image => {
+    if (typeof image.decode === 'function') await image.decode()
+    else if (!image.complete) await new Promise((resolve, reject) => {
+      image.addEventListener('load', resolve, { once: true })
+      image.addEventListener('error', reject, { once: true })
+    })
+    if (!image.naturalWidth) throw new Error(`A document image failed to load: ${image.getAttribute('src')}`)
+  }))
+}
+
+export async function prepareDocumentPrint(root, { timeoutMs = 15000 } = {}) {
+  await nextTick()
+  const session = beginDocumentPrint(root)
+  let timer
+  try {
+    await Promise.race([waitForAssets(root), new Promise((_resolve, reject) => {
+      timer = setTimeout(() => reject(new Error('Document asset readiness timed out.')), timeoutMs)
+    })])
+    if (!root.isConnected || sessions.get(root.ownerDocument) !== session) throw new Error('Document print preparation was cancelled.')
+    return session
+  } catch (error) { session.restore(); throw error }
+  finally { clearTimeout(timer) }
+}
+
+export async function printDocument(root, options) {
+  const session = await prepareDocumentPrint(root, options)
+  const win = root.ownerDocument.defaultView
+  let onAfterPrint
+  try {
+    const finished = new Promise(resolve => {
+      onAfterPrint = resolve
+      win.addEventListener('afterprint', onAfterPrint, { once: true })
+    })
+    win.print()
+    await finished
+  } finally {
+    win.removeEventListener('afterprint', onAfterPrint)
+    session.restore()
+  }
+  return session.diagnostics
+}
+
+// Native beforeprint cannot await fonts/images. It synchronously expands semantic
+// blocks; controlled capture and the host's Print button must await preparation.
+export function installDocumentPrintLifecycle(root) {
+  const win = root.ownerDocument.defaultView
+  let nativeSession
+  const before = () => {
+    if (!sessions.has(root.ownerDocument)) nativeSession = beginDocumentPrint(root)
+  }
+  const after = () => { nativeSession?.restore(); nativeSession = null }
+  win.addEventListener('beforeprint', before)
+  win.addEventListener('afterprint', after)
+  return () => {
+    win.removeEventListener('beforeprint', before)
+    win.removeEventListener('afterprint', after)
+    after()
+    sessions.get(root.ownerDocument)?.restore()
+  }
+}

package/src/helpers/handbookDocument.js

@@ -0,0 +1,44 @@
+import { buildPublicationIntroduction } from './publicationIntroduction'
+import { buildPublicationHeadingModels } from '../components/atoms/Asd20RichBodyContent/messageDocumentRenderer'
+import { createPublicationHeadingPrefix } from '../components/atoms/Asd20RichBodyContent/headingContext'
+import { parseFragment } from 'parse5'
+
+export function documentImageUrls(html, baseUrl) {
+  const urls = new Set()
+  const walk = node => {
+    if (node.tagName === 'img') {
+      const src = node.attrs.find(attribute => attribute.name === 'src')?.value
+      if (src && !src.startsWith('data:')) urls.add(new URL(src, baseUrl).href)
+    }
+    for (const child of node.childNodes || []) walk(child)
+  }
+  walk(parseFragment(html || ''))
+  return [...urls]
+}
+
+// The online handbook and the isolated PDF view share ordering, exclusions and
+// heading planning. Rendering a document never changes the authored messages.
+export function buildHandbookDocument({ messages = [], metaDescription = '', documentId = 'handbook', documentUrl = '', reservedIds = [] } = {}) {
+  const counts = new Map()
+  const entries = messages.slice(1).map((message, index) => {
+    const identity = String(message.id ?? `position-${index}`)
+    const ordinal = counts.get(identity) || 0
+    counts.set(identity, ordinal + 1)
+    const key = createPublicationHeadingPrefix(documentId, JSON.stringify([identity, ordinal]))
+    return { message, key, titleId: `${key}-title`, subtopicsId: `${key}-subtopics` }
+  })
+  const headingModels = buildPublicationHeadingModels({
+    documentUrl,
+    bodies: entries.map(entry => ({ bodyContent: entry.message.bodyContent, bodyJson: entry.message.bodyJson, headingLevelOffset: 1, headingIdPrefix: entry.key })),
+    reservedIds: ['main', 'handbook-content', 'handbook-topics', ...reservedIds, ...entries.flatMap(entry => [entry.titleId, entry.subtopicsId])],
+  })
+  const introduction = buildPublicationIntroduction(messages[0], metaDescription)
+  return {
+    entries, introduction, headingModels,
+    headings: entries.flatMap((entry, index) => [
+      { id: entry.titleId, label: entry.message.heading || entry.message.title, authoredLevel: 2, renderedLevel: 2 },
+      ...(headingModels.models[index]?.headings || []),
+    ]),
+    diagnostics: [...introduction.diagnostics, ...headingModels.headingDiagnostics],
+  }
+}

package/src/helpers/publicationIntroduction.js

@@ -0,0 +1,53 @@
+import { parseFragment } from 'parse5'
+
+// Only empty paragraphs/whitespace are editorially empty. Media, placeholders,
+// links, tables, and otherwise unknown elements must remain visible to review.
+function nonemptyHtml(html) {
+  const visit = node => {
+    if (node.nodeName === '#text') return Boolean(node.value.trim())
+    if (node.tagName && node.tagName !== 'p') return true
+    return (node.childNodes || []).some(visit)
+  }
+  return (parseFragment(String(html || '')).childNodes || []).some(visit)
+}
+
+function nonemptyJson(value) {
+  if (!value) return false
+  let doc = value
+  if (typeof value === 'string') {
+    try { doc = JSON.parse(value) } catch { return true }
+  }
+  if (doc?.version === 1 && Array.isArray(doc.blocks)) return doc.blocks.length > 0
+  const visit = node => {
+    if (node?.type === 'text') return Boolean(node.text?.trim())
+    if (!['doc', 'paragraph'].includes(node?.type)) return true
+    return (node.content || []).some(visit)
+  }
+  return visit(doc)
+}
+
+export function buildPublicationIntroduction(firstMessage, metaDescription = '') {
+  const message = firstMessage || {}
+  const lead = message.shortDescription || message.summary || metaDescription || ''
+  const excludedFields = ['heading', 'title', 'bodyContent', 'bodyJson', 'longDescription', 'images', 'callsToAction', 'detailLink', 'detailLinkLabel']
+  const unmappedFields = []
+  for (const field of ['bodyContent', 'longDescription']) {
+    if (nonemptyHtml(message[field])) unmappedFields.push(field)
+  }
+  if (nonemptyJson(message.bodyJson)) unmappedFields.push('bodyJson')
+  for (const field of ['images', 'callsToAction']) {
+    if (message[field]?.length) unmappedFields.push(field)
+  }
+  // Detail links direct readers from wayfinding messages to detailed pages.
+  // The handbook already is that destination; their omission is intentional.
+  // Only explicitly typed detail links qualify. Other links still need review.
+  if (message.links?.some(item => (item?.link ?? item)?.type !== 'Detail Link')) unmappedFields.push('links')
+  if (message.shortDescription && nonemptyHtml(message.summary) && message.summary !== lead) unmappedFields.push('summary')
+  return {
+    messageId: message.id ?? null, mode: 'first-summary-lead', lead,
+    detailLinkPolicy: 'omit-wayfinding',
+    leadSource: message.shortDescription || message.summary ? 'summary' : metaDescription ? 'metaDescription' : 'none',
+    excludedFields: [...excludedFields, 'links', ...(message.shortDescription ? ['summary'] : [])],
+    diagnostics: unmappedFields.length ? [{ code: 'introduction-content-unmapped', fields: unmappedFields }] : [],
+  }
+}

package/templates.js

@@ -27,3 +27,4 @@ export { default as Asd20SearchAppTemplate } from './src/components/templates/As
 export { default as Asd20WayfindingAlternateTemplate } from './src/components/templates/Asd20WayfindingAlternateTemplate/index.vue'
 export { default as Asd20WayfindingImageTemplate } from './src/components/templates/Asd20WayfindingImageTemplate/index.vue'
 export { default as Asd20WayfindingTemplate } from './src/components/templates/Asd20WayfindingTemplate/index.vue'
+export { default as Asd20HandbookDocument } from './src/components/templates/Asd20HandbookDocument/index.vue'