67 lines
3.3 KiB
Plaintext
67 lines
3.3 KiB
Plaintext
import Viewer from "@wrnexus/viewer/components/Viewer.wrn"
|
|
|
|
page FileViewerDemo {
|
|
layout = "public"
|
|
render = "hybrid"
|
|
hydrate = "load"
|
|
|
|
view {
|
|
<main class="file-viewer-demo">
|
|
<h1>File previews</h1>
|
|
<h2>Browse several files</h2>
|
|
<Viewer files={[{src: '/viewer/sample.png', name: 'sample.png'}, {src: '/viewer/sample.html', name: 'sample.html'}, {src: '/viewer/sample.wav', name: 'sample.wav'}, {src: '/viewer/sample.docx', name: 'sample.docx'}]} />
|
|
<h2>Rich PDF canvas</h2>
|
|
<Viewer src="/viewer/sample.pdf" name="rich-sample.pdf" mime="application/pdf" richPdf={true} />
|
|
<p>Images, documents, media, tables, trees, vectors, and archives share the app theme and preview controls.</p>
|
|
<h2>Image</h2>
|
|
<Viewer src="/viewer/sample.png" name="sample.png" />
|
|
<h2>Document</h2>
|
|
<Viewer src="/viewer/sample.pdf" name="sample.pdf" />
|
|
<h2>Video</h2>
|
|
<Viewer src="/viewer/sample.webm" name="sample.webm" />
|
|
<h2>Open a preview over the page</h2>
|
|
<p>Any element with <code>data-viewer-open</code> opens the file in a dialog.</p>
|
|
<p>
|
|
<button type="button" data-viewer-open data-src="/viewer/sample.webm" data-name="sample.webm">Preview the video</button>
|
|
<button type="button" data-viewer-open data-src="/viewer/sample.pptx" data-name="sample.pptx">Preview the deck</button>
|
|
</p>
|
|
<h2>Covering the page</h2>
|
|
<p>A viewer can mount already expanded, with a Close control that returns it inline.</p>
|
|
<Viewer src="/viewer/sample.png" name="expanded.png" fullScreen={false} />
|
|
<h2>Audio</h2>
|
|
<Viewer src="/viewer/sample.wav" name="sample.wav" />
|
|
<h2>Structured data</h2>
|
|
<Viewer src="/viewer/sample.json" name="sample.json" />
|
|
<Viewer src="/viewer/sample.xml" name="sample.xml" />
|
|
<h2>Spreadsheet</h2>
|
|
<Viewer src="/viewer/sample.csv" name="sample.csv" />
|
|
<Viewer src="/viewer/sample.xlsx" name="sample.xlsx" />
|
|
<h2>Vector graphic</h2>
|
|
<Viewer src="/viewer/sample.svg" name="sample.svg" />
|
|
<h2>Archive</h2>
|
|
<Viewer src="/viewer/sample.tar" name="sample.tar" />
|
|
<Viewer src="/viewer/sample.zip" name="sample.zip" />
|
|
<h2>HTML preview and source</h2>
|
|
<Viewer src="/viewer/sample.html" name="sample.html" />
|
|
<h2>From uploader storage</h2>
|
|
<p>A public object serves itself; a private one resolves to a short-lived signed link.</p>
|
|
<Viewer key="brand-logo.png" store="media" />
|
|
<Viewer key="quarterly-report.pdf" store="reports" />
|
|
<Viewer key="regional-figures.csv" store="reports" />
|
|
<h2>Office documents</h2>
|
|
<p>Presentations, OpenDocument files and RTF read in the browser; a converter, where one is installed, is preferred for page-faithful output.</p>
|
|
<Viewer src="/viewer/sample.pptx" name="sample.pptx" />
|
|
<Viewer src="/viewer/sample.odt" name="sample.odt" />
|
|
<Viewer src="/viewer/sample.ods" name="sample.ods" />
|
|
<Viewer src="/viewer/sample.rtf" name="sample.rtf" />
|
|
<h2>Optional parser or server-side converter</h2>
|
|
<Viewer src="/viewer/sample.docx" name="sample.docx" />
|
|
<h2>Unsupported file</h2>
|
|
<Viewer src="/viewer/sample.bin" name="sample.bin" />
|
|
</main>
|
|
}
|
|
style {
|
|
.file-viewer-demo { display: grid; gap: 1rem; max-width: 64rem; margin: 2rem auto; padding: 1rem; }
|
|
}
|
|
}
|