129 lines
3.5 KiB
TypeScript
129 lines
3.5 KiB
TypeScript
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-tile-pdf
|
|
pdfUrl="${pdfUrl}"
|
|
clickable="true"
|
|
grid-mode
|
|
@tile-click=${(e: CustomEvent) => {
|
|
console.log('PDF Tile clicked:', e.detail);
|
|
alert(`PDF clicked: ${e.detail.pageCount} pages`);
|
|
}}
|
|
></dees-tile-pdf>
|
|
`);
|
|
}
|
|
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;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-section">
|
|
<h3>Single PDF Tile</h3>
|
|
<dees-tile-pdf
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
clickable="true"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Different Sizes</h3>
|
|
<div class="preview-row">
|
|
<div class="preview-label">Small:</div>
|
|
<dees-tile-pdf
|
|
size="small"
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
|
clickable="true"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
|
|
<div class="preview-row">
|
|
<div class="preview-label">Default:</div>
|
|
<dees-tile-pdf
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
|
clickable="true"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
|
|
<div class="preview-row">
|
|
<div class="preview-label">Large:</div>
|
|
<dees-tile-pdf
|
|
size="large"
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
|
clickable="true"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>With Label</h3>
|
|
<dees-tile-pdf
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
clickable="true"
|
|
label="Research Paper.pdf"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Non-Clickable</h3>
|
|
<dees-tile-pdf
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
|
clickable="false"
|
|
></dees-tile-pdf>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Grid - 20 PDFs with Lazy Loading</h3>
|
|
<div class="preview-grid">
|
|
${generateGridItems(20)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|