Juergen Kunz
a61f57db13
- Implemented DeesPdfViewer for full-featured PDF viewing with toolbar and sidebar navigation. - Created DeesPdfPreview for lightweight PDF previews. - Introduced PdfManager for managing PDF document loading and caching. - Added CanvasPool for efficient canvas management. - Developed utility functions for performance monitoring and file size formatting. - Established styles for viewer and preview components to enhance UI/UX. - Included demo examples for showcasing PDF viewer capabilities.
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
|
|
export const demo = () => html`
|
|
<style>
|
|
.demo-container {
|
|
padding: 40px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 20px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
dees-pdf-viewer {
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.viewer-tall {
|
|
height: 800px;
|
|
}
|
|
|
|
.viewer-compact {
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-section">
|
|
<h3>Full Featured PDF Viewer with Toolbar</h3>
|
|
<dees-pdf-viewer
|
|
class="viewer-tall"
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
showToolbar="true"
|
|
showSidebar="false"
|
|
initialZoom="page-fit"
|
|
></dees-pdf-viewer>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>PDF Viewer with Sidebar Navigation</h3>
|
|
<dees-pdf-viewer
|
|
class="viewer-tall"
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
showToolbar="true"
|
|
showSidebar="true"
|
|
initialZoom="page-width"
|
|
></dees-pdf-viewer>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Compact Viewer without Controls</h3>
|
|
<dees-pdf-viewer
|
|
class="viewer-compact"
|
|
pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
|
|
showToolbar="false"
|
|
showSidebar="false"
|
|
initialZoom="auto"
|
|
></dees-pdf-viewer>
|
|
</div>
|
|
</div>
|
|
`; |