dees-catalog/ts_web/elements/dees-pdf-preview/demo.ts

import { html } from '@design.estate/dees-element';

export const demo = () => {
  const samplePdfs = [
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
  ];

  const generateGridItems = (count: number) => {
    const items = [];
    for (let i = 0; i < count; i++) {
      const pdfUrl = samplePdfs[i % samplePdfs.length];
      items.push(html`
        <dees-pdf-preview
          pdfUrl="${pdfUrl}"
          maxPages="3"
          stackOffset="6"
          clickable="true"
          grid-mode
          @pdf-preview-click=${(e: CustomEvent) => {
            console.log('PDF Preview clicked:', e.detail);
            alert(`PDF clicked: ${e.detail.pageCount} pages`);
          }}
        ></dees-pdf-preview>
      `);
    }
    return items;
  };

  return html`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }

      .demo-section {
        margin-bottom: 60px;
      }

      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }

      .preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 24px;
      }

      .preview-row {
        display: flex;
        gap: 24px;
        align-items: center;
        margin-bottom: 20px;
      }

      .preview-label {
        font-size: 14px;
        font-weight: 500;
        min-width: 100px;
      }

      .performance-stats {
        margin-top: 20px;
        padding: 16px;
        background: white;
        border-radius: 8px;
        font-size: 14px;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        margin-top: 12px;
      }

      .stat-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .stat-label {
        font-size: 12px;
        color: #666;
      }

      .stat-value {
        font-size: 16px;
        font-weight: 600;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Single PDF Preview with Stacked Pages</h3>
        <dees-pdf-preview
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          maxPages="3"
          stackOffset="8"
          clickable="true"
        ></dees-pdf-preview>
      </div>

      <div class="demo-section">
        <h3>Different Sizes</h3>
        <div class="preview-row">
          <div class="preview-label">Small:</div>
          <dees-pdf-preview
            size="small"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            maxPages="2"
            stackOffset="6"
            clickable="true"
          ></dees-pdf-preview>
        </div>

        <div class="preview-row">
          <div class="preview-label">Default:</div>
          <dees-pdf-preview
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            maxPages="3"
            stackOffset="8"
            clickable="true"
          ></dees-pdf-preview>
        </div>

        <div class="preview-row">
          <div class="preview-label">Large:</div>
          <dees-pdf-preview
            size="large"
            pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
            maxPages="4"
            stackOffset="10"
            clickable="true"
          ></dees-pdf-preview>
        </div>
      </div>

      <div class="demo-section">
        <h3>Non-Clickable Preview</h3>
        <dees-pdf-preview
          pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
          maxPages="3"
          stackOffset="8"
          clickable="false"
        ></dees-pdf-preview>
      </div>

      <div class="demo-section">
        <h3>Performance Grid - 50 PDFs with Lazy Loading</h3>
        <p style="margin-bottom: 20px; font-size: 14px; color: #666;">
          This grid demonstrates the performance optimizations with 50 PDF previews.
          Scroll to see lazy loading in action - previews render only when visible.
        </p>

        <div class="preview-grid">
          ${generateGridItems(50)}
        </div>

        <div class="performance-stats">
          <h4>Performance Features</h4>
          <div class="stats-grid">
            <div class="stat-item">
              <span class="stat-label">Lazy Loading</span>
              <span class="stat-value">✓ Enabled</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">Canvas Pooling</span>
              <span class="stat-value">✓ Active</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">Memory Management</span>
              <span class="stat-value">✓ Optimized</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">Intersection Observer</span>
              <span class="stat-value">200px margin</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
};