<bmx-pdf-viewer>

<bmx-pdf-viewer id="ex-pdf" sidebar="outline" style="--bmx-pdf-viewer-height: 36rem"></bmx-pdf-viewer>
<p class="note" id="ex-pdf-out" role="status">A three-page sample, written by this page: try find, the outline, the links, rotation, and the comment on page 2.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <label>Open a PDF of your own <input type="file" id="ex-pdf-file" accept="application/pdf,.pdf" /></label>
  <label><input type="checkbox" id="ex-pdf-notes" checked /> Show comments</label>
</div>

<script type="module">
  await customElements.whenDefined('bmx-pdf-viewer');
  const viewer = document.getElementById('ex-pdf');
  const out = document.getElementById('ex-pdf-out');

  // A small PDF, written out object by object: three pages in Helvetica, an outline, links and a comment.
  function samplePdf() {
    const pages = [
      ['Quarterly report', 'Revenue grew in every region this quarter.', 'See the regional detail on page 3.', 'Visit binarymission.co.uk for more.'],
      ['Summary', 'Costs held steady while orders rose.', 'The comment on this page has a note.'],
      ['Regional detail', 'North: up 12%.', 'South: up 9%.', 'East: up 15%.', 'West: up 7%.'],
    ];
    const objects = [];
    const add = text => objects.push(text) && objects.length;
    const esc = s => s.replace(/[\\()]/g, c => '\\' + c);
    const catalog = add('');
    const pageTree = add('');
    const font = add('<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica /Encoding /WinAnsiEncoding >>');
    const bold = add('<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding >>');
    const pageIds = pages.map(() => add(''));
    pages.forEach((lines, i) => {
      const body = lines.map((line, k) => `BT /${k ? 'F1 12' : 'F2 22'} Tf 72 ${720 - k * 28 - (k ? 20 : 0)} Td (${esc(line)}) Tj ET`).join('\n');
      const contents = add(`<< /Length ${body.length} >>\nstream\n${body}\nendstream`);
      const annots = [];
      if (i === 0) {
        annots.push(add(`<< /Type /Annot /Subtype /Link /Rect [72 636 290 652] /Border [0 0 0] /Dest [${pageIds[2]} 0 R /XYZ 0 792 null] >>`));
        annots.push(add('<< /Type /Annot /Subtype /Link /Rect [72 608 300 624] /Border [0 0 0] /A << /S /URI /URI (https://www.binarymission.co.uk/) >> >>'));
      }
      if (i === 1) {
        annots.push(add('<< /Type /Annot /Subtype /Highlight /Rect [70 660 290 676] /QuadPoints [72 676 288 676 72 662 288 662] /C [1 0.9 0.2] /T (Finance) /Contents (Check this against the March figures.) >>'));
        annots.push(add('<< /Type /Annot /Subtype /Text /Rect [500 700 520 720] /C [1 0.8 0] /T (Reviewer) /Contents (Looks good to me.) /Name /Comment >>'));
      }
      objects[pageIds[i] - 1] = `<< /Type /Page /Parent ${pageTree} 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 ${font} 0 R /F2 ${bold} 0 R >> >> /Contents ${contents} 0 R${annots.length ? ` /Annots [${annots.map(a => `${a} 0 R`).join(' ')}]` : ''} >>`;
    });
    objects[pageTree - 1] = `<< /Type /Pages /Kids [${pageIds.map(p => `${p} 0 R`).join(' ')}] /Count ${pageIds.length} >>`;
    const outline = add('');
    const items = pages.map(() => add(''));
    items.forEach((id, i) => {
      objects[id - 1] = `<< /Title (${esc(pages[i][0])}) /Parent ${outline} 0 R${i ? ` /Prev ${items[i - 1]} 0 R` : ''}${i < items.length - 1 ? ` /Next ${items[i + 1]} 0 R` : ''} /Dest [${pageIds[i]} 0 R /XYZ 0 792 null] >>`;
    });
    objects[outline - 1] = `<< /Type /Outlines /First ${items[0]} 0 R /Last ${items[items.length - 1]} 0 R /Count ${items.length} >>`;
    objects[catalog - 1] = `<< /Type /Catalog /Pages ${pageTree} 0 R /Outlines ${outline} 0 R >>`;
    const info = add('<< /Title (Quarterly report) /Author (Binarymission) >>');
    let pdf = '%PDF-1.7\n';
    const offsets = objects.map((body, i) => {
      const at = pdf.length;
      pdf += `${i + 1} 0 obj\n${body}\nendobj\n`;
      return at;
    });
    const xref = pdf.length;
    pdf += `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n${offsets.map(o => `${String(o).padStart(10, '0')} 00000 n \n`).join('')}`;
    pdf += `trailer\n<< /Size ${objects.length + 1} /Root ${catalog} 0 R /Info ${info} 0 R >>\nstartxref\n${xref}\n%%EOF\n`;
    return Uint8Array.from(pdf, c => c.charCodeAt(0));
  }

  await viewer.load(samplePdf());
  viewer.fileName = 'quarterly-report.pdf';
  viewer.addEventListener('bmxPageChange', e => (out.textContent = `Page ${e.detail.page} of ${e.detail.pageCount}.`));
  viewer.addEventListener('bmxPdfLoad', e => (out.textContent = `Opened ${e.detail.title || 'the document'}: ${e.detail.pageCount} page${e.detail.pageCount === 1 ? '' : 's'}.`));
  viewer.addEventListener('bmxPdfError', e => (out.textContent = e.detail.passwordRequired ? 'This document has a password: enter it in the viewer.' : `Could not open it: ${e.detail.message}`));
  document.getElementById('ex-pdf-file').addEventListener('change', e => {
    const file = e.target.files[0];
    if (file) viewer.load(file).catch(() => {});
  });
  document.getElementById('ex-pdf-notes').addEventListener('change', e => (viewer.annotations = e.target.checked));
</script>