Skip to content

Commit 50d4a76

Browse files
alekswebnetalekswebnet
committed
feat: refactor viewer lifecycle and improve runtime attribute updates
1 parent da1160c commit 50d4a76

7 files changed

Lines changed: 162 additions & 147 deletions

File tree

‎demo/extra-styles.html‎

Lines changed: 10 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 | 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,16 @@
1616
<body>
1717
<pdfjs-viewer-element
1818
src="/public/sample-pdf-with-images.pdf"
19-
viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
2019
style="height: 100dvh">
2120
</pdfjs-viewer-element>
2221
</body>
22+
23+
<script>
24+
document.addEventListener('DOMContentLoaded', async () => {
25+
// Create a very simple toolbar by hiding the middle and right toolbar parts.
26+
document.querySelector('pdfjs-viewer-element').injectViewerStyles(`
27+
#toolbarViewerMiddle, #toolbarViewerRight { display: none; }
28+
`)
29+
})
30+
</script>
2331
</html>

‎demo/pdf-data-load.html‎

Lines changed: 2 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 | Basic 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;
@@ -15,7 +15,6 @@
1515

1616
<body>
1717
<pdfjs-viewer-element
18-
id="viewer"
1918
style="height: 100dvh">
2019
</pdfjs-viewer-element>
2120

@@ -37,7 +36,7 @@
3736

3837

3938
document.addEventListener('DOMContentLoaded', async () => {
40-
document.querySelector('#viewer').addEventListener('initialized', (event) => {
39+
document.querySelector('pdfjs-viewer-element').addEventListener('initialized', (event) => {
4140
const { viewerApp } = event.detail
4241
viewerApp.open({ data: pdfData })
4342
})

‎index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<script type="module" src="./index.js"></script>
1010
</head>
1111
<body style="margin: 0">
12-
<pdfjs-viewer-element
12+
<!-- <pdfjs-viewer-element
1313
src="/fake-file.pdf"
1414
style="height: 600px">
1515
</pdfjs-viewer-element>
@@ -21,10 +21,12 @@
2121
page="2"
2222
style="height: 600px">
2323
</pdfjs-viewer-element>
24-
<button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button>
24+
<button onclick="toggleDownloadButton(document.querySelector('#hideOpenFileViewer'))">Toggle download button</button> -->
2525

2626
<pdfjs-viewer-element
2727
id="themedViewer"
28+
page="3"
29+
locale="uk"
2830
src="/sample-pdf-10MB.pdf"
2931
style="height: 600px">
3032
</pdfjs-viewer-element>
@@ -44,12 +46,14 @@
4446
<button onclick="document.querySelector('#themedViewer').setAttribute('zoom', 'auto')">Reset zoom</button>
4547
<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'thumbs')">Change page mode</button>
4648
<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'none')">Reset page mode</button>
49+
<button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-with-images.pdf')">Load images PDF</button>
50+
<button onclick="document.querySelector('#themedViewer').setAttribute('src', '/sample-pdf-10MB.pdf')">Load 10MB PDF</button>
4751
<hr>
4852

49-
<pdfjs-viewer-element
53+
<!-- <pdfjs-viewer-element
5054
id="base-viewer"
5155
locale="uk"
5256
style="height: clamp(400px, 80dvh, 600px)">
53-
</pdfjs-viewer-element>
57+
</pdfjs-viewer-element> -->
5458
</body>
5559
</html>

‎index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ const pdfData = Uint8Array.from(atob(
1313
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
1414
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'), (m) => m.codePointAt(0));
1515

16-
document.addEventListener('DOMContentLoaded', async () => {
17-
const { viewerApp } = await document.querySelector('#base-viewer').initialize()
18-
viewerApp.open({ data: pdfData })
19-
})
16+
// document.addEventListener('DOMContentLoaded', async () => {
17+
// const { viewerApp } = await document.querySelector('#base-viewer').initialize()
18+
// viewerApp.open({ data: pdfData })
19+
// })
2020

2121
const toggleDownloadButton = async (viewerElement) => {
2222
const { viewerApp } = await viewerElement.initialize()

0 commit comments

Comments
 (0)