Skip to content

Commit 5508856

Browse files
alekswebnetalekswebnet
committed
Add extra styles attribute & test
1 parent 2ae7d5f commit 5508856

File tree

4 files changed

+59
-19
lines changed

4 files changed

+59
-19
lines changed

‎index.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,21 @@
1414
style="height: min(500px, 50dvh)">
1515
</pdfjs-viewer-element>
1616
<pdfjs-viewer-element
17+
id="hideOpenFileViewer"
1718
src="/sample-pdf-with-images.pdf"
1819
viewer-path="/pdfjs-3.9.179-dist"
1920
locale="de"
2021
page="2"
2122
style="height: min(500px, 50dvh)">
2223
</pdfjs-viewer-element>
24+
<button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('hide-open-file', true)">Hide open file</button>
25+
<button onclick="document.querySelector('#hideOpenFileViewer').setAttribute('hide-open-file', false)">Show open file</button>
2326
<pdfjs-viewer-element
2427
id="themedViewer"
2528
src="/sample-pdf-10MB.pdf"
2629
viewer-path="/pdfjs-3.9.179-dist"
2730
viewer-css-theme="DARK"
31+
locale="es"
2832
style="height: min(500px, 50dvh)">
2933
</pdfjs-viewer-element>
3034
<button onclick="document.querySelector('#themedViewer').setAttribute('viewer-css-theme', 'LIGHT')">Change theme</button>
@@ -37,9 +41,16 @@
3741
id="base-viewer"
3842
viewer-path="/pdfjs-3.9.179-dist"
3943
locale="uk"
44+
viewer-extra-styles="#openFile { display: none; } #print { display: none } #download { display: none } #download + .verticalToolbarSeparator { display: none }"
4045
style="height: min(500px, 50dvh)">
4146
</pdfjs-viewer-element>
42-
<button>Open file</button>
47+
<button onclick="document.querySelector('#base-viewer').setAttribute('viewer-css-theme', 'DARK')">Change theme</button>
48+
<button onclick="document.querySelector('#base-viewer').setAttribute('viewer-css-theme', 'AUTOMATIC')">Reset theme</button>
49+
<button onclick="document.querySelector('#base-viewer').setAttribute('page', '2')">Change page</button>
50+
<button onclick="document.querySelector('#base-viewer').setAttribute('page', '1')">Reset page</button>
51+
<button onclick="document.querySelector('#base-viewer').setAttribute('locale', 'de')">Change locale</button>
52+
<button onclick="document.querySelector('#base-viewer').setAttribute('locale', 'uk')">Reset locale</button>
53+
<button onclick="document.querySelector('#base-viewer').setAttribute('viewer-extra-styles', '')">Remove extra styles</button>
4354
</body>
4455

4556
<script>
@@ -61,9 +72,11 @@
6172

6273
document.addEventListener('DOMContentLoaded', async () => {
6374
const viewer = document.querySelector('#base-viewer')
75+
// viewer.addEventListener('loaded', () => {
76+
// console.log(viewer.iframe)
77+
// })
6478
// Wait for the viewer initialization
6579
const viewerApp = await viewer.initialize()
66-
console.log(viewerApp)
6780
// Open PDF file data using Uint8Array instead of URL
6881
viewerApp.open(pdfData)
6982
})

‎src/elementReady.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const elementReady = (selector: string, document: Document | ShadowRoot) => {
2-
return new Promise((resolve, _reject) => {
2+
return new Promise((resolve) => {
33
let el = document.querySelector(selector);
44
if (el) {
55
resolve(el);

‎src/pdfjs-viewer-element.ts‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ const DEFAULTS = {
1212
pagemode: 'none',
1313
locale: '',
1414
textLayer: '',
15-
viewerCssTheme: 'AUTOMATIC'
15+
viewerCssTheme: 'AUTOMATIC',
16+
viewerExtraStyles: ''
1617
} as const
1718

1819
export const ViewerCssTheme = {
@@ -21,27 +22,37 @@ export const ViewerCssTheme = {
2122
DARK: 2,
2223
} as const
2324

25+
export type ToolbarButtonId = 'sidebarToggle' | ''
26+
2427
export class PdfjsViewerElement extends HTMLElement {
2528
constructor() {
2629
super()
2730
const shadowRoot = this.attachShadow({ mode: 'open' })
2831
const template = document.createElement('template')
2932
template.innerHTML = `
30-
<iframe frameborder="0" width="100%"></iframe>
3133
<style>:host{width:100%;display:block;overflow:hidden}:host iframe{height:100%}</style>
34+
<iframe frameborder="0" width="100%" loading="lazy"></iframe>
3235
`
3336
shadowRoot.appendChild(template.content.cloneNode(true))
3437
}
3538

36-
private iframe!: PdfjsViewerElementIframe
39+
public iframe!: PdfjsViewerElementIframe
3740

3841
static get observedAttributes() {
39-
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer', 'viewer-css-theme']
42+
return ['src', 'viewer-path', 'locale', 'page', 'search', 'phrase', 'zoom', 'pagemode', 'text-layer', 'viewer-css-theme', 'viewer-extra-styles']
4043
}
4144

4245
connectedCallback() {
4346
this.iframe = this.shadowRoot!.querySelector('iframe') as PdfjsViewerElementIframe
44-
this.setEventListeners()
47+
document.addEventListener('webviewerloaded', () => {
48+
this.dispatchEvent(new Event('loaded'))
49+
this.setViewerExtraStyles(this.getAttribute('viewer-extra-styles'))
50+
if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('defaultUrl', '')
51+
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('viewerCssTheme', this.getCssThemeOption())
52+
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
53+
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', true)
54+
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true)
55+
});
4556
}
4657

4758
attributeChangedCallback() {
@@ -64,8 +75,9 @@ export class PdfjsViewerElement extends HTMLElement {
6475
const locale = this.getAttribute('locale') || DEFAULTS.locale
6576
const textLayer = this.getAttribute('text-layer') || DEFAULTS.textLayer
6677
const viewerCssTheme = this.getAttribute('viewer-css-theme') || DEFAULTS.viewerCssTheme
78+
const viewerExtraStyles = Boolean(this.getAttribute('viewer-extra-styles') || DEFAULTS.viewerExtraStyles)
6779

68-
const updatedSrc = `${viewerPath}${DEFAULTS.viewerEntry}?file=${encodeURIComponent(src)}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}&viewerCssTheme=${viewerCssTheme}`
80+
const updatedSrc = `${viewerPath}${DEFAULTS.viewerEntry}?file=${encodeURIComponent(src)}#page=${page}&zoom=${zoom}&pagemode=${pagemode}&search=${search}&phrase=${phrase}&textLayer=${textLayer}${locale ? '&locale='+locale : ''}&viewerCssTheme=${viewerCssTheme}&viewerExtraStyles=${viewerExtraStyles}`
6981
if (updatedSrc !== this.iframe.getAttribute('src')) return updatedSrc
7082
return ''
7183
}
@@ -77,16 +89,6 @@ export class PdfjsViewerElement extends HTMLElement {
7789
this.iframe.src = src
7890
}
7991

80-
private setEventListeners() {
81-
document.addEventListener('webviewerloaded', async () => {
82-
if (this.getAttribute('src') !== DEFAULTS.src) this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('defaultUrl', '')
83-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('viewerCssTheme', this.getCssThemeOption())
84-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('disablePreferences', true)
85-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('pdfBugEnabled', true)
86-
this.iframe.contentWindow?.PDFViewerApplicationOptions?.set('eventBusDispatchToDOM', true)
87-
});
88-
}
89-
9092
private getFullPath(path: string) {
9193
return path.startsWith('/') ? `${window.location.origin}${path}` : path
9294
}
@@ -98,6 +100,18 @@ export class PdfjsViewerElement extends HTMLElement {
98100
: ViewerCssTheme[DEFAULTS.viewerCssTheme]
99101
}
100102

103+
private setViewerExtraStyles = (styles?: string | null) => {
104+
if (!styles) {
105+
this.iframe.contentDocument?.head.querySelector('style[extra]')?.remove()
106+
return
107+
}
108+
if (this.iframe.contentDocument?.head.querySelector('style[extra]')?.innerHTML === styles) return
109+
const style = document.createElement('style')
110+
style.innerHTML = styles
111+
style.setAttribute('extra', '')
112+
this.iframe.contentDocument?.head.appendChild(style)
113+
}
114+
101115
public initialize = (): Promise<PdfjsViewerElementIframeWindow['PDFViewerApplication']> => new Promise(async (resolve) => {
102116
await elementReady('iframe', this.shadowRoot!)
103117
this.iframe?.addEventListener('load', async () => {

‎tests/basic.test.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,17 @@ describe('Basic tests', async () => {
6767
expect(getViewerElement()).exist
6868
expect(getComputedStyle(getViewerElement()!).getPropertyValue('--loading-icon')).toMatch('dark')
6969
})
70+
71+
it('should hide the open file button', async () => {
72+
const viewerApp = await mountViewer(`
73+
<pdfjs-viewer-element
74+
src="/sample-pdf-10MB.pdf"
75+
viewer-path="/pdfjs-3.9.179-dist"
76+
viewer-extra-styles="#openFile { display: none }"
77+
></pdfjs-viewer-element>`
78+
)
79+
80+
expect(getViewerElement()).exist
81+
expect(getComputedStyle(getViewerElement('#openFile')!).display).eq('none')
82+
})
7083
})

0 commit comments

Comments
 (0)