Skip to content

Commit da1160c

Browse files
alekswebnetalekswebnet
committed
refactor: consolidate viewer init flow and demo wiring
- remove `viewerExtraStyles`, `viewerExtraStylesUrls`, `nameddest` attrs, add `workerSrc` - add initialize() promise flow and locale resource cleanup - update demos and index wiring for toggle download button - enable terser minification in vite build
1 parent 43fc056 commit da1160c

9 files changed

Lines changed: 254 additions & 187 deletions

‎demo/dark-theme.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>pdfjs-viewer-element | Dark theme demo</title>
7-
<script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
7+
<script type="module" src="../dist/pdfjs-viewer-element.js"></script>
88
<style>
99
body {
1010
margin: 0;

‎demo/extra-styles-urls.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>pdfjs-viewer-element | Extra styles demo</title>
7-
<script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
7+
<script type="module" src="../dist/pdfjs-viewer-element.js"></script>
88
<style>
99
body {
1010
margin: 0;
@@ -16,8 +16,8 @@
1616
<body>
1717
<pdfjs-viewer-element
1818
src="/public/sample-pdf-with-images.pdf"
19-
viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']"
20-
style="height: 100dvh">
19+
style="height: 100dvh"
20+
>
2121
</pdfjs-viewer-element>
2222
</body>
2323
</html>

‎demo/multiple.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>pdfjs-viewer-element | Multiple demo</title>
7-
<script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
7+
<script type="module" src="../dist/pdfjs-viewer-element.js"></script>
88
<style>
99
body {
1010
margin: 0;

‎demo/opened-findbar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>pdfjs-viewer-element | Opened find bar demo</title>
7-
<script type="module" src="https://cdn.jsdelivr.net/npm/pdfjs-viewer-element/dist/pdfjs-viewer-element.js"></script>
7+
<script type="module" src="../dist/pdfjs-viewer-element.js"></script>
88
<style>
99
body {
1010
margin: 0;
@@ -26,7 +26,7 @@
2626
const { viewerApp } = event.detail
2727
viewerApp.eventBus.on('pagesloaded', () => {
2828
viewerApp.findBar.open()
29-
viewerApp.findBar.findField.value = 'na'
29+
viewerApp.findBar.findField.value = 'and'
3030
viewerApp.findBar.highlightAll.checked = true
3131
viewerApp.findBar.findNextButton.click()
3232
})

‎index.html‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>pdfjs-viewer-element</title>
77
<meta name="description" content="A web component for viewing pdf files in the browser, based on PDF.js">
88
<script type="module" src="./src/pdfjs-viewer-element.ts"></script>
9+
<script type="module" src="./index.js"></script>
910
</head>
1011
<body style="margin: 0">
1112
<pdfjs-viewer-element
@@ -20,8 +21,7 @@
2021
page="2"
2122
style="height: 600px">
2223
</pdfjs-viewer-element>
23-
<button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '#downloadButton { display: none }')">Hide download button</button>
24-
<button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('viewer-extra-styles', '')">Show download button</button>
24+
<button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button>
2525

2626
<pdfjs-viewer-element
2727
id="themedViewer"
@@ -52,29 +52,4 @@
5252
style="height: clamp(400px, 80dvh, 600px)">
5353
</pdfjs-viewer-element>
5454
</body>
55-
56-
<script>
57-
const pdfData = Uint8Array.from(atob(
58-
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
59-
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
60-
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
61-
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
62-
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
63-
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
64-
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
65-
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
66-
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
67-
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
68-
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
69-
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
70-
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
71-
72-
73-
document.addEventListener('DOMContentLoaded', async () => {
74-
document.querySelector('#base-viewer').addEventListener('initialized', (event) => {
75-
const { viewerApp } = event.detail
76-
viewerApp.open({ data: pdfData })
77-
})
78-
})
79-
</script>
8055
</html>

‎index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const pdfData = Uint8Array.from(atob(
2+
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
3+
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
4+
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
5+
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
6+
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
7+
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
8+
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
9+
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
10+
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
11+
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
12+
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
13+
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
14+
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
15+
16+
document.addEventListener('DOMContentLoaded', async () => {
17+
const { viewerApp } = await document.querySelector('#base-viewer').initialize()
18+
viewerApp.open({ data: pdfData })
19+
})
20+
21+
const toggleDownloadButton = async (viewerElement) => {
22+
const { viewerApp } = await viewerElement.initialize()
23+
viewerApp.appConfig.toolbar.download.classList.toggle('hidden')
24+
}
25+
26+
window.toggleDownloadButton = toggleDownloadButton

0 commit comments

Comments
 (0)