Skip to content

Commit c768e49

Browse files
alekswebnetalekswebnet
committed
Fix demo, remove non-production attributes #39 
1 parent 79da19e commit c768e49

8 files changed

Lines changed: 72 additions & 132 deletions

‎demo/go-to-nameddest.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎demo/opened-findbar.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,14 @@
2222

2323
<script>
2424
document.addEventListener('DOMContentLoaded', async () => {
25-
const viewer = document.querySelector('#viewer')
26-
// Wait for the viewer initialization
27-
const viewerApp = await viewer.initialize()
28-
// Wait for pages loaded, open find bar and search
29-
viewerApp.eventBus.on('pagesloaded', () => {
30-
viewerApp.findBar.open()
31-
viewerApp.findBar.findField.value = 'na'
32-
viewerApp.findBar.highlightAll.checked = true
33-
viewerApp.findBar.findNextButton.click()
25+
document.querySelector('#viewer').addEventListener('initialized', (event) => {
26+
const { viewerApp } = event.detail
27+
viewerApp.eventBus.on('pagesloaded', () => {
28+
viewerApp.findBar.open()
29+
viewerApp.findBar.findField.value = 'na'
30+
viewerApp.findBar.highlightAll.checked = true
31+
viewerApp.findBar.findNextButton.click()
32+
})
3433
})
3534
})
3635
</script>

‎demo/pdf-data-load.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,10 @@
3737

3838

3939
document.addEventListener('DOMContentLoaded', async () => {
40-
const viewer = document.querySelector('#viewer')
41-
// Wait for the viewer initialization
42-
const viewerApp = await viewer.initialize()
43-
// Open PDF file data using Uint8Array instead of URL
44-
viewerApp.open({ data: pdfData })
40+
document.querySelector('#viewer').addEventListener('initialized', (event) => {
41+
const { viewerApp } = event.detail
42+
viewerApp.open({ data: pdfData })
43+
})
4544
})
4645
</script>
4746
</body>

‎demo/viewer-prebuilt-from-npm-package.html‎

Lines changed: 3 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 | Viewer prebuilt from npm package demo</title>
7-
<script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
7+
<script type="module" src="../dist/pdfjs-viewer-element.js"></script>
88
<style>
99
body {
1010
margin: 0;
@@ -14,9 +14,10 @@
1414
</head>
1515

1616
<body>
17+
<h1>Deprecated, the latest version does not need the prebuilt!</h1>
1718
<pdfjs-viewer-element
1819
src="/public/sample-pdf-with-images.pdf"
19-
style="height: 100dvh">
20+
style="height: 50dvh">
2021
</pdfjs-viewer-element>
2122
</body>
2223
</html>

‎index.html‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<script type="module" src="/src/web/pdfjs-viewer-element.ts"></script>
99
</head>
1010
<body style="margin: 0">
11-
<!-- <pdfjs-viewer-element
11+
<pdfjs-viewer-element
1212
src="/fake-file.pdf"
1313
style="height: 600px">
14-
</pdfjs-viewer-element> -->
14+
</pdfjs-viewer-element>
1515
<pdfjs-viewer-element
1616
id="hideOpenFileViewer"
1717
iframe-title="Custom title"
@@ -36,18 +36,20 @@
3636
<button onclick="document.querySelector('#themedViewer').setAttribute('page', '1')">Reset page</button>
3737
<button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'de')">Change locale</button>
3838
<button onclick="document.querySelector('#themedViewer').setAttribute('locale', 'pl')">Reset locale</button>
39-
<button onclick="document.querySelector('#themedViewer').setAttribute('text-layer', 'visible')">Change text layer</button>
40-
<button onclick="document.querySelector('#themedViewer').setAttribute('text-layer', 'none')">Reset text layer</button>
4139
<button onclick="document.querySelector('#themedViewer').setAttribute('search', 'iss')">Change search text</button>
4240
<button onclick="document.querySelector('#themedViewer').setAttribute('search', '')">Reset search text</button>
4341
<button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'true')">Change search phrase</button>
4442
<button onclick="document.querySelector('#themedViewer').setAttribute('phrase', 'false')">Reset search phrase</button>
43+
<button onclick="document.querySelector('#themedViewer').setAttribute('zoom', '200%')">Change zoom</button>
44+
<button onclick="document.querySelector('#themedViewer').setAttribute('zoom', 'auto')">Reset zoom</button>
45+
<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'thumbs')">Change page mode</button>
46+
<button onclick="document.querySelector('#themedViewer').setAttribute('pagemode', 'none')">Reset page mode</button>
4547
<hr>
4648

4749
<pdfjs-viewer-element
4850
id="base-viewer"
4951
locale="uk"
50-
style="height: clamp(600px, 600px, 80dvh)">
52+
style="height: clamp(400px, 80dvh, 600px)">
5153
</pdfjs-viewer-element>
5254
</body>
5355

@@ -69,12 +71,8 @@
6971

7072

7173
document.addEventListener('DOMContentLoaded', async () => {
72-
document.querySelector('#themedViewer').addEventListener('initialized', (event) => {
73-
const viewerApp = event.detail.PDFViewerApplication
74-
console.log('Viewer initialized', viewerApp.eventBus)
75-
})
7674
document.querySelector('#base-viewer').addEventListener('initialized', (event) => {
77-
const viewerApp = event.detail.PDFViewerApplication
75+
const { viewerApp } = event.detail
7876
viewerApp.open({ data: pdfData })
7977
})
8078
})

‎src/web/pdfjs-viewer-element.ts‎

Lines changed: 44 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const PDFJS_VERSION = '5.4.624' // Keep in sync with the version used in the viewer
1+
const PDFJS_VERSION = '5.4.624'
22

33
const DEFAULTS = {
44
src: '',
@@ -9,13 +9,6 @@ const DEFAULTS = {
99
zoom: '',
1010
pagemode: 'none',
1111
locale: '',
12-
disableWorker: '',
13-
textLayer: '',
14-
disableFontFace: '',
15-
disableRange: '',
16-
disableStream: '',
17-
disableAutoFetch: '',
18-
verbosity: '',
1912
viewerCssTheme: 'AUTOMATIC',
2013
viewerExtraStyles: '',
2114
viewerExtraStylesUrls: '',
@@ -24,11 +17,11 @@ const DEFAULTS = {
2417

2518
export const ViewerCssTheme = { AUTOMATIC: 0, LIGHT: 1, DARK: 2 } as const
2619
export const hardRefreshAttributes = [
27-
'src', 'disable-worker', 'text-layer', 'disable-font-face', 'disable-range', 'disable-stream', 'disable-auto-fetch', 'verbosity', 'locale', 'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls'
20+
'src', 'locale', 'viewer-css-theme', 'viewer-extra-styles', 'viewer-extra-styles-urls'
2821
]
2922
export const allAttributes = [
3023
...hardRefreshAttributes,
31-
'page', 'search', 'phrase', 'zoom', 'pagemode', 'nameddest', 'iframe-title'
24+
'page', 'search', 'phrase', 'zoom', 'pagemode', 'iframe-title'
3225
]
3326

3427
export class PdfjsViewerElement extends HTMLElement {
@@ -37,7 +30,7 @@ export class PdfjsViewerElement extends HTMLElement {
3730
const shadowRoot = this.attachShadow({ mode: 'open' })
3831
shadowRoot.innerHTML = `
3932
<style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
40-
<iframe frameborder="0" width="100%" loading="lazy" title="${this.getAttribute('iframe-title') || DEFAULTS.iframeTitle}"></iframe>
33+
<iframe frameborder="0" width="100%" loading="lazy"></iframe>
4134
`
4235
}
4336

@@ -48,32 +41,36 @@ export class PdfjsViewerElement extends HTMLElement {
4841
return allAttributes
4942
}
5043

51-
private handleWebviewerLoaded = async () => {
52-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('workerSrc', `https://cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS_VERSION}/build/pdf.worker.min.mjs`)
44+
private applyViewerOptions() {
45+
const viewerOptions = this.iframe.contentWindow?.PDFViewerApplicationOptions
46+
viewerOptions?.set('workerSrc', `https://cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS_VERSION}/build/pdf.worker.min.mjs`)
5347
this.setCssTheme(this.getCssThemeOption())
5448
this.injectExtraStylesLinks(this.getAttribute('viewer-extra-styles-urls') ?? DEFAULTS.viewerExtraStylesUrls)
5549
this.setViewerExtraStyles(this.getAttribute('viewer-extra-styles') ?? DEFAULTS.viewerExtraStyles)
56-
if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set(
57-
'defaultUrl',
58-
this.getFullPath(this.getAttribute('src') || DEFAULTS.src)
59-
)
60-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
61-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', false)
62-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true)
63-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('localeProperties', { lang: this.getAttribute('locale') || DEFAULTS.locale })
64-
65-
if (this.iframe.contentWindow?.PDFViewerApplication) {
66-
await this.iframe.contentWindow?.PDFViewerApplication?.initializedPromise
67-
this.dispatchEvent(new CustomEvent('initialized', {
68-
detail: { PDFViewerApplication: this.iframe.contentWindow.PDFViewerApplication },
69-
bubbles: true,
70-
composed: true
71-
}))
50+
if (this.getAttribute('src') !== DEFAULTS.src) {
51+
viewerOptions?.set(
52+
'defaultUrl',
53+
this.getFullPath(this.getAttribute('src') || DEFAULTS.src)
54+
)
7255
}
56+
viewerOptions?.set('disablePreferences', true)
57+
viewerOptions?.set('pdfBugEnabled', true)
58+
viewerOptions?.set('eventBusDispatchToDOM', true)
59+
viewerOptions?.set('localeProperties', { lang: this.getAttribute('locale') || DEFAULTS.locale })
60+
return viewerOptions
61+
}
62+
63+
private handleViewerLoaded = async (viewerApp: PdfjsViewerElementIframeWindow['PDFViewerApplication']) => {
64+
const viewerOptions = this.applyViewerOptions()
65+
await viewerApp.initializedPromise
66+
this.dispatchEvent(new CustomEvent('initialized', {
67+
detail: { viewerApp, viewerOptions },
68+
bubbles: true,
69+
composed: true
70+
}))
7371
}
7472

7573
async connectedCallback() {
76-
console.log('Connecting viewer element', this)
7774
this.iframe = this.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
7875
this.iframe.setAttribute('title', this.getAttribute('iframe-title') || DEFAULTS.iframeTitle)
7976
this.iframeLocationHash = this.getIframeLocationHash()
@@ -82,15 +79,14 @@ export class PdfjsViewerElement extends HTMLElement {
8279
await this.loadViewerResources()
8380
}
8481
this.iframe.addEventListener('load', () => {
85-
console.log('Viewer iframe loaded')
86-
const callback = this.handleWebviewerLoaded
82+
const loadedCallback = this.handleViewerLoaded
8783
Object.defineProperty(this.iframe.contentWindow, 'PDFViewerApplication', {
88-
async set() {
84+
async set(value: PdfjsViewerElementIframeWindow['PDFViewerApplication']) {
8985
await this.PDFViewerApplication?.initializedPromise
90-
await callback()
91-
return true;
86+
await loadedCallback(value)
87+
return true
9288
},
93-
configurable: true,
89+
configurable: true
9490
});
9591
});
9692
}
@@ -107,32 +103,20 @@ export class PdfjsViewerElement extends HTMLElement {
107103
}
108104

109105
private getIframeLocationHash() {
110-
const params: Record<string, string> = {
111-
page: this.getAttribute('page') || DEFAULTS.page,
112-
zoom: this.getAttribute('zoom') || DEFAULTS.zoom,
113-
pagemode: this.getAttribute('pagemode') || DEFAULTS.pagemode,
114-
search: this.getAttribute('search') || DEFAULTS.search,
115-
phrase: this.getAttribute('phrase') || DEFAULTS.phrase,
116-
textLayer: this.getAttribute('text-layer') || DEFAULTS.textLayer,
117-
disableWorker: this.getAttribute('disable-worker') || DEFAULTS.disableWorker,
118-
disableFontFace: this.getAttribute('disable-font-face') || DEFAULTS.disableFontFace,
119-
disableRange: this.getAttribute('disable-range') || DEFAULTS.disableRange,
120-
disableStream: this.getAttribute('disable-stream') || DEFAULTS.disableStream,
121-
disableAutoFetch: this.getAttribute('disable-auto-fetch') || DEFAULTS.disableAutoFetch,
122-
verbosity: this.getAttribute('verbosity') || DEFAULTS.verbosity,
123-
viewerCssTheme: this.getAttribute('viewer-css-theme') || DEFAULTS.viewerCssTheme,
124-
viewerExtraStyles: String(Boolean(this.getAttribute('viewer-extra-styles') || DEFAULTS.viewerExtraStyles)),
106+
const params: Record<string, string> = {
107+
page: this.getAttribute('page') || DEFAULTS.page,
108+
zoom: this.getAttribute('zoom') || DEFAULTS.zoom,
109+
pagemode: this.getAttribute('pagemode') || DEFAULTS.pagemode,
110+
search: this.getAttribute('search') || DEFAULTS.search,
111+
phrase: this.getAttribute('phrase') || DEFAULTS.phrase,
112+
viewerCssTheme: this.getAttribute('viewer-css-theme') || DEFAULTS.viewerCssTheme,
113+
viewerExtraStyles: String(Boolean(this.getAttribute('viewer-extra-styles') || DEFAULTS.viewerExtraStyles)),
114+
}
115+
const locale = this.getAttribute('locale')
116+
if (locale) params.locale = locale
117+
return '#' + Object.entries(params).map(([k, v]) => `${k}=${v}`).join('&')
125118
}
126119

127-
const locale = this.getAttribute('locale')
128-
const nameddest = this.getAttribute('nameddest')
129-
130-
if (locale) params.locale = locale
131-
if (nameddest) params.nameddest = nameddest
132-
133-
return '#' + Object.entries(params).map(([k, v]) => `${k}=${v}`).join('&')
134-
}
135-
136120
private async loadViewerResources() {
137121
return new Promise<void>(async (resolve) => {
138122
const [viewerEntry, viewerCss, pdfjsBuild, viewerBuild] = await Promise.all([
@@ -141,18 +125,14 @@ export class PdfjsViewerElement extends HTMLElement {
141125
import('../build/pdf.min.mjs?raw'),
142126
import('./viewer.min.mjs?raw')
143127
])
144-
145128
const completeHtml = viewerEntry.default
146129
.replace('</head>', `
147130
<style>${viewerCss.default}</style>
148131
</head>`)
149-
150132
this.iframe.srcdoc = completeHtml
151-
152133
this.iframe.addEventListener('load', async () => {
153134
const doc = this.iframe.contentDocument as Document;
154135
const locale = this.getAttribute('locale')
155-
156136
if (locale) {
157137
const localesData = await import('../web/locale/locale.json?raw')
158138
const supportedLocales = Object.keys(JSON.parse(localesData.default))
@@ -167,17 +147,14 @@ export class PdfjsViewerElement extends HTMLElement {
167147
doc.head.appendChild(localeLink)
168148
}
169149
}
170-
171150
const pdfjsScript = doc.createElement('script');
172151
pdfjsScript.type = 'module';
173152
pdfjsScript.textContent = pdfjsBuild.default;
174153
doc.head.appendChild(pdfjsScript);
175-
176154
const viewerScript = doc.createElement('script');
177155
viewerScript.type = 'module';
178156
viewerScript.textContent = viewerBuild.default;
179157
doc.head.appendChild(viewerScript);
180-
181158
resolve()
182159
})
183160
}), { once: true }
@@ -242,12 +219,6 @@ export class PdfjsViewerElement extends HTMLElement {
242219
}
243220
}
244221

245-
declare global {
246-
interface Window {
247-
PdfjsViewerElement: typeof PdfjsViewerElement
248-
}
249-
}
250-
251222
export interface PdfjsViewerElementIframeWindow extends Window {
252223
PDFViewerApplication: {
253224
initializedPromise: Promise<void>;
@@ -268,6 +239,5 @@ export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
268239
export default PdfjsViewerElement
269240

270241
if (!window.customElements.get('pdfjs-viewer-element')) {
271-
window.PdfjsViewerElement = PdfjsViewerElement
272242
window.customElements.define('pdfjs-viewer-element', PdfjsViewerElement)
273243
}

‎tests/utils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PdfjsViewerElementIframe } from "../src/web/pdfjs-viewer-element"
1+
import { PdfjsViewerElementIframe, PdfjsViewerElementIframeWindow } from "../src/web/pdfjs-viewer-element"
22

33
export const getIframe = (): PdfjsViewerElementIframe => {
44
return document.body.querySelector('pdfjs-viewer-element')?.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
@@ -13,9 +13,9 @@ export const mountViewer = async (template: string) => {
1313
document.body.innerHTML = template
1414

1515
const viewer = document.body.querySelector('pdfjs-viewer-element')
16-
return await new Promise<PdfjsViewerElementIframe['contentWindow']['PDFViewerApplication']>((resolve) => {
16+
return await new Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']>((resolve) => {
1717
viewer?.addEventListener('initialized', (event) => {
18-
const viewerApp = (event as CustomEvent).detail.PDFViewerApplication
18+
const { viewerApp } = (event as CustomEvent).detail
1919
resolve(viewerApp)
2020
})
2121
})

‎types/pdfjs-viewer-element.d.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export declare class PdfjsViewerElement extends HTMLElement {
1010
iframe: PdfjsViewerElementIframe;
1111
iframeLocationHash: string;
1212
static get observedAttributes(): string[];
13-
private handleWebviewerLoaded;
13+
private applyViewerOptions;
14+
private handleViewerLoaded;
1415
connectedCallback(): Promise<void>;
1516
attributeChangedCallback(name: string): Promise<void>;
1617
private getIframeLocationHash;
@@ -21,11 +22,6 @@ export declare class PdfjsViewerElement extends HTMLElement {
2122
private setViewerExtraStyles;
2223
private injectExtraStylesLinks;
2324
}
24-
declare global {
25-
interface Window {
26-
PdfjsViewerElement: typeof PdfjsViewerElement;
27-
}
28-
}
2925
export interface PdfjsViewerElementIframeWindow extends Window {
3026
PDFViewerApplication: {
3127
initializedPromise: Promise<void>;

0 commit comments

Comments
 (0)