Skip to content

Commit 0b61e93

Browse files
alekswebnetalekswebnet
authored
Merge pull request #2 from alekswebnet/1-add-possibility-to-set-viewer-language
Add locale prop, refactor and update readme
2 parents 1d2c773 + a59dd1c commit 0b61e93

File tree

5 files changed

+61
-42
lines changed

5 files changed

+61
-42
lines changed

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
[![Package Quality](https://packagequality.com/shield/pdfjs-viewer-element.svg)](https://packagequality.com/#?package=pdfjs-viewer-element)
55
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/57ac3a0ca9134749a4000cc0fc3675ee)](https://www.codacy.com/gh/alekswebnet/pdfjs-viewer-element/dashboard?utm_source=github.com&utm_medium=referral&utm_content=alekswebnet/pdfjs-viewer-element&utm_campaign=Badge_Grade)
66

7-
A web component for [PDF.js viewer](https://mozilla.github.io/pdf.js/web/viewer.html). See [demo](https://alekswebnet.github.io/pdfjs-viewer-element/index.html).
7+
A web component for viewing pdf files in the browser. The package is based on [PDF.js viewer](https://mozilla.github.io/pdf.js/web/viewer.html) build and works with any framework. See [demo](https://alekswebnet.github.io/pdfjs-viewer-element/index.html).
88

9-
⚠️ `pdfjs-viewer-element` uses PDF.js [prebuilt](https://github.com/mozilla/pdf.js/releases/download/v3.4.120/pdfjs-3.4.120-dist.zip), that includes the generic build of PDF.js and the viewer. To use the package you should **extract the prebuilt** files into some directory of your project. You may specify the path to this directory with `viewer-path` property (by default is '/pdfjs').
9+
⚠️ `pdfjs-viewer-element` uses PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer. To use the package you should download and **place the prebuilt** files to some directory of your project. You may specify the path to this directory with `viewer-path` property (`/pdfjs` by default).
1010

1111
## Install
1212
```
@@ -25,7 +25,7 @@ or
2525

2626
## Usage
2727

28-
Extract the PDF.js prebuilt. See demo [example](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/public).
28+
Place **PDF.js prebuilt** files to some directory of your project (`pdfjs` used as the standard name). See demo [example](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/public). You may call the directory as you want, but then you should specify the `viewer-path` property.
2929

3030
```javascript
3131
import 'pdfjs-viewer-element'
@@ -39,6 +39,10 @@ import 'pdfjs-viewer-element'
3939

4040
`src` - path to pdf file.
4141

42-
`viewer-path` - path to prebuilt directory (by default is '/pdfjs').
42+
`viewer-path` - path to prebuilt directory (`/pdfjs` by default).
43+
44+
`locale` - language localization (e.g. 'en', 'en-US', 'es', 'de'), see [pdf.js i10n files](https://github.com/mozilla/pdf.js/tree/master/l10n) (the language of your browser by default)
4345
## License
44-
[MIT](http://opensource.org/licenses/MIT)
46+
For this package - [MIT](http://opensource.org/licenses/MIT).
47+
48+
For the `pdf.js` library - https://github.com/mozilla/pdf.js/blob/master/LICENSE.

‎index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Lit + TS</title>
7+
<title>pdfjs-viewer-element</title>
88
<link rel="stylesheet" href="./src/index.css" />
99
<script type="module" src="/src/pdfjs-viewer-element.ts"></script>
1010
</head>
1111
<body>
12-
<pdfjs-viewer-element src="/compressed.tracemonkey-pldi-09.pdf" viewer-path="/pdfjs" style="height: 99vh"></pdfjs-viewer-element>
12+
<pdfjs-viewer-element
13+
src="/compressed.tracemonkey-pldi-09.pdf"
14+
viewer-path="/pdfjs"
15+
locale="en"
16+
style="height: 100dvh"
17+
></pdfjs-viewer-element>
1318
</body>
1419
</html>

‎src/index.css‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,4 @@
1-
:root {
2-
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3-
font-size: 16px;
4-
line-height: 24px;
5-
font-weight: 400;
6-
7-
color-scheme: light dark;
8-
color: rgba(255, 255, 255, 0.87);
9-
background-color: #fff;
10-
11-
font-synthesis: none;
12-
text-rendering: optimizeLegibility;
13-
-webkit-font-smoothing: antialiased;
14-
-moz-osx-font-smoothing: grayscale;
15-
-webkit-text-size-adjust: 100%;
16-
}
17-
181
body, html {
19-
margin: 0;
2+
margin: 0
203
}
4+

‎src/pdfjs-viewer-element.ts‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,43 @@ export class PdfjsViewerElement extends HTMLElement {
88
shadowRoot.appendChild(template.content.cloneNode(true))
99
}
1010

11+
private iframe!: PdfjsViewerElementIframe;
12+
1113
static get observedAttributes() {
12-
return ['src', 'viewer-path']
14+
return ['src', 'viewer-path', 'locale']
1315
}
1416

15-
connectedCallback(): void {
16-
if (!this.hasAttribute('viewer-path')) this.setAttribute('viewer-path', '/pdfjs')
17-
this.updateIframe()
17+
connectedCallback() {
18+
this.iframe = this.shadowRoot?.querySelector('iframe') as PdfjsViewerElementIframe
19+
this.setAttributes()
20+
this.initEventListeners()
1821
}
1922

20-
attributeChangedCallback(name: string): void {
23+
attributeChangedCallback(name: string) {
2124
if (['src', 'viewer-path'].includes(name)) {
22-
this.updateIframe()
25+
this.setAttributes()
26+
this.initEventListeners()
2327
}
2428
}
2529

26-
updateIframe() {
27-
this.shadowRoot?.querySelector('iframe')?.setAttribute(
30+
setAttributes() {
31+
if (!this.hasAttribute('viewer-path')) this.setAttribute('viewer-path', '/pdfjs')
32+
this.iframe?.setAttribute(
2833
'src',
2934
`${this.getAttribute('viewer-path')}/web/viewer.html?file=${this.getAttribute('src') || ''}`
3035
)
3136
}
37+
38+
initEventListeners() {
39+
document.addEventListener('webviewerloaded', () => {
40+
this.setViewerOptions()
41+
})
42+
}
43+
44+
setViewerOptions() {
45+
const locale = this.getAttribute('locale')
46+
if (locale) this.iframe.contentWindow?.PDFViewerApplicationOptions.set('locale', locale)
47+
}
3248
}
3349

3450
declare global {
@@ -37,9 +53,19 @@ declare global {
3753
}
3854
}
3955

56+
export interface PdfjsViewerElementIframeWindow extends Window {
57+
PDFViewerApplicationOptions: {
58+
set: (name: string, value: string) => void
59+
};
60+
}
61+
62+
export interface PdfjsViewerElementIframe extends HTMLIFrameElement {
63+
contentWindow: PdfjsViewerElementIframeWindow
64+
}
65+
4066
export default PdfjsViewerElement
4167

4268
if (!window.customElements.get('pdfjs-viewer-element')) {
4369
window.PdfjsViewerElement = PdfjsViewerElement
4470
window.customElements.define('pdfjs-viewer-element', PdfjsViewerElement)
45-
}
71+
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export declare class PdfjsViewerElement extends HTMLElement {
2-
constructor();
3-
static get observedAttributes(): string[];
4-
connectedCallback(): void;
5-
attributeChangedCallback(name: string): void;
6-
updateIframe(): void;
2+
constructor();
3+
static get observedAttributes(): string[];
4+
connectedCallback(): void;
5+
attributeChangedCallback(name: string): void;
6+
updateIframe(): void;
77
}
88
declare global {
9-
interface Window {
10-
PdfjsViewerElement: typeof PdfjsViewerElement;
11-
}
9+
interface Window {
10+
PdfjsViewerElement: typeof PdfjsViewerElement;
11+
}
1212
}
1313
export default PdfjsViewerElement;

0 commit comments

Comments
 (0)