ngx-extended-pdf-viewer
Version:
<p> <a href="https://www.npmjs.com/package/ngx-extended-pdf-viewer"> <img src="https://img.shields.io/npm/dm/ngx-extended-pdf-viewer.svg?style=flat" alt="downloads"> </a> <a href="https://badge.fury.io/js/ngx-extended-pdf-viewer"> <img src="
684 lines (683 loc) • 200 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { EventEmitter, Input, Output, ViewChild, Component, ViewEncapsulation, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
let NgxExtendedPdfViewerComponent = class NgxExtendedPdfViewerComponent {
constructor() {
this.initialized = false;
/**
* Number of milliseconds to wait between initializing the PDF viewer and loading the PDF file.
* Most users can let this parameter safely at it's default value of zero.
* Set this to 1000 or higher if you run into timing problems (typically caused by loading the locale files
* after the PDF files, so they are not available when the PDF viewer is initialized).
*/
this.delayFirstView = 0;
this.primaryMenuVisible = true;
this.minHeight = undefined;
this._height = '100%';
/**
* If this flag is true, this components adds a link to the locale assets. The pdf viewer
* sees this link and uses it to load the locale files automatically.
* @param useBrowserLocale boolean
*/
this.useBrowserLocale = false;
this.backgroundColor = '#e8e8eb';
/** Allows the user to define the name of the file after clicking "download" */
this.filenameForDownload = 'document.pdf';
/** Override the default locale. This must be the complete locale name, such as "es-ES". The string is allowed to be all lowercase.
*/
this.language = undefined;
/** By default, listening to the URL is deactivated because often the anchor tag is used for the Angular router */
this.listenToURL = false;
/** Navigate to a certain "named destination" */
this.nameddest = undefined;
/** allows you to pass a password to read password-protected files */
this.password = undefined;
this._showSidebarButton = true;
this.viewerPositionTop = '32px';
/** If [showSideBarButton]="true", do you want the sidebar to be shown by default ([showSidebarOnLoad])="true")
* or not? By default, this flag is undefined, telling the PDF viewer to use the last setting used with this particular
* document, or to hide the sidebar if the document is opened for the first time.
*/
this.showSidebarOnLoad = undefined;
this.showFindButton = true;
this.showPagingButtons = true;
this.showZoomButtons = true;
this.showPresentationModeButton = false;
this.showOpenFileButton = true;
this.showPrintButton = true;
this.showDownloadButton = true;
this.showBookmarkButton = true;
this.showSecondaryToolbarButton = true;
this.showRotateButton = true;
this.showSelectToolButton = true;
this.handTool = false;
this.showHandToolButton = true;
this.showScrollingButton = true;
this.showSpreadButton = true;
this.showPropertiesButton = true;
this.spreadChange = new EventEmitter();
this.page = undefined;
this.pageChange = new EventEmitter();
this.pagesLoaded = new EventEmitter();
this.pageRendered = new EventEmitter();
/** Legal values: undefined, 'auto', 'page-actual', 'page_fit', 'page-width', or '50' (or any other percentage) */
this.zoom = undefined;
this.zoomChange = new EventEmitter();
/** This attributes allows you to increase the size of the UI elements so you can use them on small mobile devices.
* This attribute is a string with a percent character at the end (e.g. "150%").
*/
this._mobileFriendlyZoom = '100%';
this.toolbarWidth = '100%';
// dirty IE11 hack - temporary solution
this.findbarTop = undefined;
// dirty IE11 hack - temporary solution
this.findbarLeft = undefined;
// dirty IE11 hack - temporary solution
this.secondaryToolbarRight = undefined;
this._top = undefined;
}
set src(url) {
if (url instanceof Uint8Array) {
this._src = url.buffer;
}
else if (url instanceof Blob) {
this._src = URL.createObjectURL(url);
}
else if (typeof url === 'string') {
this._src = url;
if (url.length > 980) {
// minimal length of a base64 encoded PDF
if (url.length % 4 === 0) {
if (/^[a-zA-Z\d\/+]+={0,2}$/.test(url)) {
console.warn('The URL looks like a base64 encoded string. If so, please use the attribute base64 instead of src');
}
}
}
}
else {
this._src = url;
}
}
set base64Src(base64) {
const binary_string = window.atob(base64);
const len = binary_string.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
this.src = bytes.buffer;
}
set height(h) {
this.minHeight = undefined;
if (h) {
this._height = h;
}
else {
this.height = '100%';
}
setTimeout(() => {
this.checkHeight();
});
}
get height() {
return this._height;
}
get showSidebarButton() {
return this._showSidebarButton;
}
set showSidebarButton(show) {
this._showSidebarButton = show;
const isIE = /msie\s|trident\//i.test(window.navigator.userAgent);
let factor = 1;
if (isIE) {
factor = Number((this._mobileFriendlyZoom || '100').replace('%', '')) / 100;
}
if (this._showSidebarButton) {
this.findbarLeft = (68 * factor).toString() + 'px';
}
else {
this.findbarLeft = '0px';
}
}
get mobileFriendlyZoom() {
return this._mobileFriendlyZoom;
}
/*
* This attributes allows you to increase the size of the UI elements so you can use them on small mobile devices.
* This attribute is a string with a percent character at the end (e.g. "150%").*/
set mobileFriendlyZoom(zoom) {
this._mobileFriendlyZoom = zoom;
const isIE = /msie\s|trident\//i.test(window.navigator.userAgent);
let factor = 1;
if (isIE) {
factor = Number((zoom || '100').replace('%', '')) / 100;
}
if (this.showSidebarButton) {
this.findbarLeft = (68 * factor).toString() + 'px';
}
else {
this.findbarLeft = '0px';
}
if (isIE) {
// dirty, temporary hack
this.toolbarWidth = (100 / factor).toString() + '%';
this.findbarTop = (32 * factor).toString() + 'px';
this.secondaryToolbarRight = (252 * (factor - 1)).toString() + 'px';
}
}
/** Deprecated. Please use [mobileFriendlyZoom] instead.
* This attributes allows you to increase the size of the UI elements so you can use them on small mobile devices.
* This attribute is a string with a percent character at the end (e.g. "150%").*/
set mobileZoom(mobileFriendlyZoom) {
this.mobileFriendlyZoom = mobileFriendlyZoom;
}
get sidebarPositionTop() {
if (this._top) {
return this._top;
}
if (this.mobileFriendlyZoom) {
if (this.mobileFriendlyZoom.endsWith('%')) {
const zoom = Number(this.mobileFriendlyZoom.substring(0, this.mobileFriendlyZoom.length - 1));
return (0.32 * zoom).toString() + 'px';
}
if (this.mobileFriendlyZoom.endsWith('px')) {
return this.mobileFriendlyZoom;
}
}
return '32px';
}
calcViewerPositionTop() {
if (this._top) {
this.viewerPositionTop = this._top;
return;
}
if (this.mobileFriendlyZoom) {
if (this.mobileFriendlyZoom.endsWith('%')) {
const zoom = Number(this.mobileFriendlyZoom.substring(0, this.mobileFriendlyZoom.length - 1));
if (!this.isPrimaryMenuVisible()) {
this.viewerPositionTop = '0';
}
else {
this.viewerPositionTop = (1 + 0.32 * zoom).toString() + 'px';
}
return;
}
if (this.mobileFriendlyZoom.endsWith('px')) {
this.viewerPositionTop = this.mobileFriendlyZoom;
return;
}
}
if (this.isPrimaryMenuVisible()) {
this.viewerPositionTop = '32px';
}
else {
this.viewerPositionTop = '0';
}
}
emitZoomChange() {
const selectedIndex = this.sizeSelector.nativeElement.selectedIndex;
if (selectedIndex) {
const s = this.sizeSelector.nativeElement.options[selectedIndex];
let value = s.label;
if (value.endsWith('%')) {
value = Number(value.replace('%', ''));
}
else {
value = s.value;
}
this.zoomChange.emit(value);
}
}
emitZoomChangeAfterDelay() {
setTimeout(() => {
this.emitZoomChange();
}, 10);
}
ngOnInit() {
document.addEventListener('webviewerloaded', () => {
this.overrideDefaultSettings();
});
setTimeout(() => {
// This initializes the webviewer, the file may be passed in to it to initialize the viewer with a pdf directly
this.primaryMenuVisible = true;
if (!this.isSecondaryMenuVisible()) {
this.showSecondaryToolbarButton = false;
}
if (!this.showSecondaryToolbarButton) {
if (!this.isPrimaryMenuVisible()) {
this.primaryMenuVisible = false;
}
}
this.calcViewerPositionTop();
window.webViewerLoad();
window.PDFViewerApplication.appConfig.defaultUrl = ''; // IE bugfix
window.PDFViewerApplicationOptions.set('locale', this.language);
window.PDFViewerApplication.isViewerEmbedded = true;
this.overrideDefaultSettings();
const pc = document.getElementById('printContainer');
if (pc) {
document.getElementsByTagName('body')[0].appendChild(pc);
}
}, 0);
}
checkHeight() {
const container = document.getElementsByClassName('zoom')[0];
if (container.clientHeight === 0 && this._height.includes('%')) {
const available = window.innerHeight;
const rect = container.getBoundingClientRect();
const top = rect.top;
let mh = available - top;
const factor = Number(this._height.replace('%', ''));
mh = (mh * factor) / 100;
if (mh > 100) {
this.minHeight = mh + 'px';
}
else {
this.minHeight = '100px';
}
}
}
onPageChange() {
setTimeout(() => {
const inputField = document.getElementById('pageNumber');
let page = Number(inputField.value);
if (isNaN(page)) {
page = undefined;
}
this.pageChange.emit(page);
});
}
onSpreadChange(newSpread) {
this.spreadChange.emit(newSpread);
}
overrideDefaultSettings() {
window.PDFViewerApplication.overrideHistory = {};
if (this.zoom) {
let z = this.zoom;
if (typeof z !== 'number') {
if (z.endsWith('%')) {
z = z.replace('%', '');
}
}
window.PDFViewerApplication.overrideHistory.zoom = z;
}
if (window.PDFViewerApplication.appConfig) {
window.PDFViewerApplication.appConfig.filenameForDownload = this.filenameForDownload;
}
else {
window.PDFViewerApplicationOptions.set('filenameForDownload', this.filenameForDownload);
}
if (this.showSidebarButton) {
if (this.showSidebarOnLoad !== undefined) {
window.PDFViewerApplication.sidebarViewOnLoad = this.showSidebarOnLoad ? 1 : 0;
if (window.PDFViewerApplication.appConfig) {
window.PDFViewerApplication.appConfig.sidebarViewOnLoad = this.showSidebarOnLoad ? 1 : 0;
}
window.PDFViewerApplication.overrideHistory.sidebarViewOnLoad = this.showSidebarOnLoad ? 1 : 0;
}
}
else {
window.PDFViewerApplication.sidebarViewOnLoad = 0;
if (window.PDFViewerApplication.appConfig) {
window.PDFViewerApplication.appConfig.sidebarViewOnLoad = 0;
}
window.PDFViewerApplication.overrideHistory.sidebarViewOnLoad = 0;
}
if (this.spread === 'even') {
window.PDFViewerApplicationOptions.set('spreadModeOnLoad', 2);
if (window.PDFViewerApplication.pdfViewer) {
window.PDFViewerApplication.pdfViewer.spreadMode = 2;
}
this.onSpreadChange('even');
}
else if (this.spread === 'odd') {
window.PDFViewerApplicationOptions.set('spreadModeOnLoad', 1);
if (window.PDFViewerApplication.pdfViewer) {
window.PDFViewerApplication.pdfViewer.spreadMode = 1;
}
this.onSpreadChange('odd');
}
else {
window.PDFViewerApplicationOptions.set('spreadModeOnLoad', 0);
if (window.PDFViewerApplication.pdfViewer) {
window.PDFViewerApplication.pdfViewer.spreadMode = 0;
}
this.onSpreadChange('off');
}
}
ngAfterViewInit() {
this.initTimeout = setTimeout(() => {
if (!this.listenToURL) {
window.PDFViewerApplication.pdfLinkService.setHash = function () { };
}
this.initTimeout = null;
window.PDFViewerApplication.eventBus.on('pagesloaded', (x) => {
this.pagesLoaded.emit(x);
if (this.nameddest) {
window.PDFViewerApplication.pdfLinkService.navigateTo(this.nameddest);
}
this.overrideDefaultSettings();
});
window.PDFViewerApplication.eventBus.on('pagerendered', (x) => {
this.pageRendered.emit(x);
});
this.checkHeight();
// open a file in the viewer
if (!!this._src) {
const options = {
password: this.password
};
window.PDFViewerApplication.open(this._src, options);
}
setTimeout(() => {
if (this.page) {
window.PDFViewerApplication.page = this.page;
}
}, 100);
}, this.delayFirstView);
this.initialized = true;
}
ngOnDestroy() {
if (this.initTimeout) {
clearTimeout(this.initTimeout);
this.initTimeout = undefined;
}
const app = window.PDFViewerApplication;
if (app) {
app.cleanup();
app.close();
if (app._boundEvents) {
app.unbindWindowEvents();
}
const bus = app.eventBus;
if (bus) {
app.unbindEvents();
for (const key in bus._listeners) {
if (bus._listeners[key]) {
bus._listeners[key] = undefined;
}
}
}
app.eventBus = null;
}
}
isSecondaryMenuVisible() {
const visible = this.showHandToolButton ||
this.showPagingButtons ||
this.showPropertiesButton ||
this.showRotateButton ||
this.showScrollingButton ||
this.showRotateButton ||
this.showSpreadButton ||
this.showSelectToolButton;
if (visible) {
return true;
}
return false;
}
isPrimaryMenuVisible() {
const visible = this.showBookmarkButton ||
this.showDownloadButton ||
this.showFindButton ||
this.showOpenFileButton ||
this.showPagingButtons ||
this.showPresentationModeButton ||
this.showPrintButton ||
this.showPropertiesButton ||
this.showSidebarButton ||
this.showSecondaryToolbarButton ||
this.showZoomButtons;
if (visible) {
return true;
}
return false;
}
ngOnChanges(changes) {
if (this.initialized) {
if ('src' in changes) {
if (!!this._src) {
this.overrideDefaultSettings();
window.PDFViewerApplication.open(this._src);
}
}
if ('zoom' in changes) {
let zoomAsNumber = this.zoom;
if (String(zoomAsNumber).endsWith('%')) {
zoomAsNumber = Number(String(zoomAsNumber).replace('%', '')) / 100;
}
else if (!isNaN(Number(zoomAsNumber))) {
zoomAsNumber = Number(zoomAsNumber) / 100;
}
window.PDFViewerApplication.pdfViewer.currentScaleValue = zoomAsNumber;
}
if ('handTool' in changes) {
if (this.handTool) {
const menu = document.getElementsByClassName('handTool');
if (menu && menu[0]) {
menu[0].click();
}
}
else {
const menu = document.getElementsByClassName('selectTool');
if (menu && menu[0]) {
menu[0].click();
}
}
}
if ('page' in changes) {
if (this.page) {
window.PDFViewerApplication.page = this.page;
}
}
if ('filenameForDownload' in changes) {
window.PDFViewerApplication.appConfig.filenameForDownload = this.filenameForDownload;
}
if ('nameddest' in changes) {
if (this.nameddest) {
window.PDFViewerApplication.pdfLinkService.navigateTo(this.nameddest);
}
}
if ('spread' in changes) {
if (this.spread === 'even') {
window.PDFViewerApplication.spreadModeOnLoad = 2;
window.PDFViewerApplication.pdfViewer.spreadMode = 2;
this.onSpreadChange('even');
}
else if (this.spread === 'odd') {
window.PDFViewerApplication.spreadModeOnLoad = 1;
window.PDFViewerApplication.pdfViewer.spreadMode = 1;
this.onSpreadChange('odd');
}
else {
window.PDFViewerApplication.spreadModeOnLoad = 0;
window.PDFViewerApplication.pdfViewer.spreadMode = 0;
this.onSpreadChange('off');
}
}
this.primaryMenuVisible = true;
if (!this.isSecondaryMenuVisible()) {
this.showSecondaryToolbarButton = false;
}
if (!this.showSecondaryToolbarButton) {
if (!this.isPrimaryMenuVisible()) {
this.primaryMenuVisible = false;
}
}
this.calcViewerPositionTop();
}
}
};
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "delayFirstView", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], NgxExtendedPdfViewerComponent.prototype, "src", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgxExtendedPdfViewerComponent.prototype, "base64Src", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgxExtendedPdfViewerComponent.prototype, "height", null);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "useBrowserLocale", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "backgroundColor", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "filenameForDownload", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxExtendedPdfViewerComponent.prototype, "language", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "listenToURL", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxExtendedPdfViewerComponent.prototype, "nameddest", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxExtendedPdfViewerComponent.prototype, "password", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgxExtendedPdfViewerComponent.prototype, "showSidebarButton", null);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgxExtendedPdfViewerComponent.prototype, "showSidebarOnLoad", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showFindButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showPagingButtons", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showZoomButtons", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showPresentationModeButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showOpenFileButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showPrintButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showDownloadButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showBookmarkButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showSecondaryToolbarButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showRotateButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showSelectToolButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "handTool", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showHandToolButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showScrollingButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showSpreadButton", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "showPropertiesButton", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgxExtendedPdfViewerComponent.prototype, "spread", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "spreadChange", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], NgxExtendedPdfViewerComponent.prototype, "page", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "pageChange", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "pagesLoaded", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "pageRendered", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "zoom", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "zoomChange", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "_mobileFriendlyZoom", void 0);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgxExtendedPdfViewerComponent.prototype, "mobileFriendlyZoom", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], NgxExtendedPdfViewerComponent.prototype, "mobileZoom", null);
__decorate([
ViewChild('sizeSelector', { static: true }),
__metadata("design:type", Object)
], NgxExtendedPdfViewerComponent.prototype, "sizeSelector", void 0);
NgxExtendedPdfViewerComponent = __decorate([
Component({
selector: 'ngx-extended-pdf-viewer',
template: "<link\n *ngIf=\"useBrowserLocale\"\n rel=\"resource\"\n type=\"application/l10n\"\n href=\"assets/locale/locale.properties\"\n/>\n<div class=\"zoom\" [style.height]=\"height\" [style.minHeight]=\"minHeight\">\n <div class=\"html\">\n <div\n tabindex=\"1\"\n class=\"loadingInProgress body\"\n [style.backgroundColor]=\"backgroundColor\"\n >\n <div id=\"outerContainer\">\n <div id=\"sidebarContainer\" [style.top]=\"sidebarPositionTop\">\n <div\n id=\"additionalSidebarContainer\"\n [class.hidden]=\"!showSidebarButton\"\n >\n <div id=\"toolbarSidebar\">\n <div class=\"splitToolbarButton toggled\">\n <button\n id=\"viewThumbnail\"\n class=\"toolbarButton toggled\"\n title=\"Show Thumbnails\"\n tabindex=\"2\"\n data-l10n-id=\"thumbs\"\n >\n <span data-l10n-id=\"thumbs_label\">Thumbnails</span>\n </button>\n <button\n id=\"viewOutline\"\n class=\"toolbarButton\"\n title=\"Show Document Outline (double-click to expand/collapse all items)\"\n tabindex=\"3\"\n data-l10n-id=\"document_outline\"\n >\n <span data-l10n-id=\"document_outline_label\"\n >Document Outline</span\n >\n </button>\n <button\n id=\"viewAttachments\"\n class=\"toolbarButton\"\n title=\"Show Attachments\"\n tabindex=\"4\"\n data-l10n-id=\"attachments\"\n >\n <span data-l10n-id=\"attachments_label\">Attachments</span>\n </button>\n </div>\n </div>\n </div>\n <div id=\"sidebarContent\">\n <div id=\"thumbnailView\"></div>\n <div id=\"outlineView\" class=\"hidden\"></div>\n <div id=\"attachmentsView\" class=\"hidden\"></div>\n </div>\n <div id=\"sidebarResizer\" class=\"hidden\"></div>\n </div>\n <!-- sidebarContainer -->\n\n <div id=\"mainContainer\">\n <div\n class=\"findbar hidden doorHanger\"\n id=\"findbar\"\n [style.zoom]=\"mobileFriendlyZoom\"\n [style.top]=\"findbarTop\"\n [style.left]=\"findbarLeft\"\n >\n <div id=\"findbarInputContainer\">\n <input\n autocomplete=\"search-input-field\"\n id=\"findInput\"\n class=\"toolbarField\"\n title=\"Find\"\n placeholder=\"Find in document\u2026\"\n tabindex=\"91\"\n data-l10n-id=\"find_input\"\n name=\"search-input-field\"\n />\n <div class=\"splitToolbarButton\">\n <button\n id=\"findPrevious\"\n class=\"toolbarButton findPrevious\"\n title=\"Find the previous occurrence of the phrase\"\n tabindex=\"92\"\n data-l10n-id=\"find_previous\"\n >\n <span data-l10n-id=\"find_previous_label\">Previous</span>\n </button>\n <div class=\"splitToolbarButtonSeparator\"></div>\n <button\n id=\"findNext\"\n class=\"toolbarButton findNext\"\n title=\"Find the next occurrence of the phrase\"\n tabindex=\"93\"\n data-l10n-id=\"find_next\"\n >\n <span data-l10n-id=\"find_next_label\">Next</span>\n </button>\n </div>\n </div>\n\n <div id=\"findbarOptionsOneContainer\">\n <input\n type=\"checkbox\"\n id=\"findHighlightAll\"\n class=\"toolbarField\"\n tabindex=\"94\"\n />\n <label\n for=\"findHighlightAll\"\n class=\"toolbarLabel\"\n data-l10n-id=\"find_highlight\"\n >Highlight all</label\n >\n <input\n type=\"checkbox\"\n id=\"findMatchCase\"\n class=\"toolbarField\"\n tabindex=\"95\"\n />\n <label\n for=\"findMatchCase\"\n class=\"toolbarLabel\"\n data-l10n-id=\"find_match_case_label\"\n >Match case</label\n >\n </div>\n <div id=\"findbarOptionsTwoContainer\">\n <input\n type=\"checkbox\"\n id=\"findEntireWord\"\n class=\"toolbarField\"\n tabindex=\"96\"\n />\n <label\n for=\"findEntireWord\"\n class=\"toolbarLabel\"\n data-l10n-id=\"find_entire_word_label\"\n >Whole words</label\n >\n <span id=\"findResultsCount\" class=\"toolbarLabel hidden\"></span>\n </div>\n\n <div id=\"findbarMessageContainer\">\n <span id=\"findMsg\" class=\"toolbarLabel\"></span>\n </div>\n </div>\n <!-- findbar -->\n\n <div\n id=\"secondaryToolbar\"\n class=\"secondaryToolbar hidden doorHangerRight\"\n [style.zoom]=\"mobileFriendlyZoom\"\n [style.top]=\"findbarTop\"\n [style.right]=\"secondaryToolbarRight\"\n >\n <div id=\"secondaryToolbarButtonContainer\">\n <button\n id=\"secondaryPresentationMode\"\n class=\"secondaryToolbarButton presentationMode visibleLargeView\"\n title=\"Switch to Presentation Mode\"\n tabindex=\"51\"\n data-l10n-id=\"presentation_mode\"\n >\n <span data-l10n-id=\"presentation_mode_label\"\n >Presentation Mode</span\n >\n </button>\n\n <button\n id=\"secondaryOpenFile\"\n class=\"secondaryToolbarButton openFile visibleLargeView\"\n title=\"Open File\"\n tabindex=\"52\"\n data-l10n-id=\"open_file\"\n >\n <span data-l10n-id=\"open_file_label\">Open</span>\n </button>\n\n <button\n id=\"secondaryPrint\"\n class=\"secondaryToolbarButton print visibleMediumView\"\n title=\"Print\"\n tabindex=\"53\"\n data-l10n-id=\"print\"\n >\n <span data-l10n-id=\"print_label\">Print</span>\n </button>\n\n <button\n id=\"secondaryDownload\"\n class=\"secondaryToolbarButton download visibleMediumView\"\n title=\"Download\"\n tabindex=\"54\"\n data-l10n-id=\"download\"\n >\n <span data-l10n-id=\"download_label\">Download</span>\n </button>\n\n <a\n href=\"#\"\n id=\"secondaryViewBookmark\"\n class=\"secondaryToolbarButton bookmark visibleSmallView\"\n title=\"Current view (copy or open in new window)\"\n tabindex=\"55\"\n data-l10n-id=\"bookmark\"\n >\n <span data-l10n-id=\"bookmark_label\">Current View</span>\n </a>\n\n <div class=\"horizontalToolbarSeparator visibleLargeView\"></div>\n\n <button\n [class.hidden]=\"!showPagingButtons\"\n id=\"firstPage\"\n class=\"secondaryToolbarButton firstPage\"\n title=\"Go to First Page\"\n tabindex=\"56\"\n data-l10n-id=\"first_page\"\n >\n <span data-l10n-id=\"first_page_label\">Go to First Page</span>\n </button>\n <button\n [class.hidden]=\"!showPagingButtons\"\n id=\"lastPage\"\n class=\"secondaryToolbarButton lastPage\"\n title=\"Go to Last Page\"\n tabindex=\"57\"\n data-l10n-id=\"last_page\"\n >\n <span data-l10n-id=\"last_page_label\">Go to Last Page</span>\n </button>\n\n <div\n [class.hidden]=\"!showRotateButton\"\n class=\"horizontalToolbarSeparator\"\n ></div>\n\n <button\n [class.hidden]=\"!showRotateButton\"\n id=\"pageRotateCw\"\n class=\"secondaryToolbarButton rotateCw\"\n title=\"Rotate Clockwise\"\n tabindex=\"58\"\n data-l10n-id=\"page_rotate_cw\"\n >\n <span data-l10n-id=\"page_rotate_cw_label\"\n >Rotate Clockwise</span\n >\n </button>\n <button\n [class.hidden]=\"!showRotateButton\"\n id=\"pageRotateCcw\"\n class=\"secondaryToolbarButton rotateCcw\"\n title=\"Rotate Counterclockwise\"\n tabindex=\"59\"\n data-l10n-id=\"page_rotate_ccw\"\n >\n <span data-l10n-id=\"page_rotate_ccw_label\"\n >Rotate Counterclockwise</span\n >\n </button>\n\n <div class=\"horizontalToolbarSeparator\"></div>\n\n <button\n [class.hidden]=\"!showSelectToolButton\"\n id=\"cursorSelectTool\"\n class=\"secondaryToolbarButton selectTool toggled\"\n title=\"Enable Text Selection Tool\"\n tabindex=\"60\"\n data-l10n-id=\"cursor_text_select_tool\"\n >\n <span data-l10n-id=\"cursor_text_select_tool_label\"\n >Text Selection Tool</span\n >\n </button>\n <button\n [class.hidden]=\"!showHandToolButton\"\n id=\"cursorHandTool\"\n class=\"secondaryToolbarButton handTool\"\n title=\"Enable Hand Tool\"\n tabindex=\"61\"\n data-l10n-id=\"cursor_hand_tool\"\n >\n <span data-l10n-id=\"cursor_hand_tool_label\">Hand Tool</span>\n </button>\n\n <div\n [class.hidden]=\"!showScrollingButton\"\n class=\"horizontalToolbarSeparator\"\n ></div>\n\n <button\n [class.hidden]=\"!showScrollingButton\"\n id=\"scrollVertical\"\n class=\"secondaryToolbarButton scrollVertical toggled\"\n title=\"Use Vertical Scrolling\"\n tabindex=\"62\"\n data-l10n-id=\"scroll_vertical\"\n >\n <span data-l10n-id=\"scroll_vertical_label\"\n >Vertical Scrolling</span\n >\n </button>\n <button\n [class.hidden]=\"!showScrollingButton\"\n id=\"scrollHorizontal\"\n class=\"secondaryToolbarButton scrollHorizontal\"\n title=\"Use Horizontal Scrolling\"\n tabindex=\"63\"\n data-l10n-id=\"scroll_horizontal\"\n >\n <span data-l10n-id=\"scroll_horizontal_label\"\n >Horizontal Scrolling</span\n >\n </button>\n <button\n [class.hidden]=\"!showScrollingButton\"\n id=\"scrollWrapped\"\n class=\"secondaryToolbarButton scrollWrapped\"\n title=\"Use Wrapped Scrolling\"\n tabindex=\"64\"\n data-l10n-id=\"scroll_wrapped\"\n >\n <span data-l10n-id=\"scroll_wrapped_label\"\n >Wrapped Scrolling</span\n >\n </button>\n\n <div\n [class.hidden]=\"!showSpreadButton\"\n class=\"horizontalToolbarSeparator\"\n ></div>\n\n <button\n [class.hidden]=\"!showSpreadButton\"\n id=\"spreadNone\"\n class=\"secondaryToolbarButton spreadNone toggled\"\n title=\"Do not join page spreads\"\n tabindex=\"65\"\n data-l10n-id=\"spread_none\"\n (click)=\"onSpreadChange('off')\"\n >\n <span data-l10n-id=\"spread_none_label\">No Spreads</span>\n </button>\n <button\n [class.hidden]=\"!showSpreadButton\"\n id=\"spreadOdd\"\n class=\"secondaryToolbarButton spreadOdd\"\n title=\"Join page spreads starting with odd-numbered pages\"\n tabindex=\"66\"\n data-l10n-id=\"spread_odd\"\n (click)=\"onSpreadChange('odd')\"\n\n >\n <span data-l10n-id=\"spread_odd_label\">Odd Spreads</span>\n </button>\n <button\n [class.hidden]=\"!showSpreadButton\"\n id=\"spreadEven\"\n class=\"secondaryToolbarButton spreadEven\"\n title=\"Join page spreads starting with even-numbered pages\"\n tabindex=\"67\"\n data-l10n-id=\"spread_even\"\n (click)=\"onSpreadChange('even')\"\n\n >\n <span data-l10n-id=\"spread_even_label\">Even Spreads</span>\n </button>\n\n <div\n [class.hidden]=\"!showPropertiesButton\"\n class=\"horizontalToolbarSeparator spreadModeButtons\"\n ></div>\n\n <button\n [class.hidden]=\"!showPropertiesButton\"\n id=\"documentProperties\"\n class=\"secondaryToolbarButton documentProperties\"\n title=\"Document Properties\u2026\"\n tabindex=\"68\"\n data-l10n-id=\"document_properties\"\n >\n <span data-l10n-id=\"document_properties_label\"\n >Document Properties\u2026</span\n >\n </button>\n </div>\n </div>\n <!-- secondaryToolbar -->\n\n <div class=\"toolbar\" [class.hidden]=\"!primaryMenuVisible\">\n <div\n id=\"toolbarContainer\"\n [style.zoom]=\"mobileFriendlyZoom\"\n [style.width]=\"toolbarWidth\"\n >\n <div id=\"toolbarViewer\">\n <div id=\"toolbarViewerLeft\">\n <button\n [class.hidden]=\"!showSidebarButton\"\n id=\"sidebarToggle\"\n class=\"toolbarButton\"\n title=\"Toggle Sidebar\"\n tabindex=\"11\"\n data-l10n-id=\"toggle_sidebar\"\n >\n <span data-l10n-id=\"toggle_sidebar_label\"\n >Toggle Sidebar</span\n >\n </button>\n <div\n [class.hidden]=\"!showSidebarButton\"\n class=\"toolbarButtonSpacer\"\n ></div>\n <button\n [class.hidden]=\"!showFindButton\"\n id=\"viewFind\"\n class=\"toolbarButton\"\n title=\"Find in Document\"\n tabindex=\"12\"\n data-l10n-id=\"findbar\"\n >\n <span data-l10n-id=\"findbar_label\">Find</span>\n </button>\n <div\n [class.hidden]=\"!showPagingButtons\"\n class=\"splitToolbarButton hiddenSmallView\"\n >\n <button\n class=\"toolbarButton pageUp\"\n title=\"Previous Page\"\n id=\"previous\"\n tabindex=\"13\"\n data-l10n-id=\"previous\"\n (click)=\"onPageChange()\"\n >\n <span data-l10n-id=\"previous_label\">Previous</span>\n </button>\n <div class=\"splitToolbarButtonSeparator\"></div>\n <button\n class=\"toolbarButton pageDown\"\n title=\"Next Page\"\n id=\"next\"\n tabindex=\"14\"\n data-l10n-id=\"next\"\n (click)=\"onPageChange()\"\n >\n <span data-l10n-id=\"next_label\">Next</span>\n </button>\n </div>\n <input\n [class.hidden]=\"!showPagingButtons\"\n type=\"number\"\n id=\"pageNumber\"\n class=\"toolbarField pageNumber\"\n title=\"Page\"\n value=\"1\"\n size=\"4\"\n min=\"1\"\n tabindex=\"15\"\n data-l10n-id=\"page\"\n (change)=\"onPageChange()\"\n (page-change)=\"onPageChange()\"\n />\n <span\n [class.hidden]=\"!showPagingButtons\"\n id=\"numPages\"\n class=\"toolbarLabel\"\n ></span>\n </div>\n <div id=\"toolbarViewerRight\">\n <button\n [class.hidden]=\"!showPresentationModeButton\"\n id=\"presentationMode\"\n class=\"toolbarButton presentationMode hiddenLargeView\"\n title=\"Switch to Presentation Mode\"\n tabindex=\"31\"\n data-l10n-id=\"presentation_mode\"\n >\n <span data-l10n-id=\"presentation_mode_label\"\n >Presentation Mode</span\n >\n </button>\n\n <button\n [class.hidden]=\"!showOpenFileButton\"\n id=\"openFile\"\n class=\"toolbarButton openFile hiddenLargeView\"\n title=\"Open File\"\n tabindex=\"32\"\n data-l10n-id=\"open_file\"\n >\n <span data-l10n-id=\"open_file_label\">Open</span>\n </button>\n\n <button\n [class.hidden]=\"!showPrintButton\"\n id=\"print\"\n class=\"toolbarButton print hiddenMediumView\"\n title=\"Print\"\n tabindex=\"33\"\n data-l10n-id=\"print\"\n >\n <span data-l10n-id=\"print_label\">Print</span>\n </button>\n\n <button\n [class.hidden]=\"!showDownloadButton\"\n id=\"download\"\n class=\"toolbarButton download hiddenMediumView\"\n title=\"Download\"\n tabindex=\"34\"\n data-l10n-id=\"download\"\n >\n <span data-l10n-id=\"download_label\">Download</span>\n </button>\n <a\n href=\"#\"\n [class.hidden]=\"!showBookmarkButton\"\n id=\"viewBookmark\"\n class=\"toolbarButton bookmark hiddenSmallView\"\n title=\"Current view (copy or open in new window)\"\n tabindex=\"35\"\n data-l10n-id=\"bookmark\"\n >\n <span data-l10n-id=\"bookmark_label\">Current View</span>\n </a>\n\n <div\n [class.hidden]=\"!showSecondaryToolbarButton\"\n class=\"verticalToolbarSeparator hiddenSmallView\"\n ></div>\n\n <button\n [class.hidden]=\"!showSecondaryToolbarButton\"\n id=\"secondaryToolbarToggle\"\n class=\"toolbarButton\"\n title=\"Tools\"\n tabindex=\"36\"\n data-l10n-id=\"tools\"\n >\n <span data-l10n-id=\"tools_label\">Tools</span>\n </button>\n </div>\n <div [class.hidden]=\"!showZoomButtons\" id=\"toolbarViewerMiddle\">\n <div class=\"splitToolbarButton\">\n <button\n id=\"zoomOut\"\n class=\"toolbarButton zoomOut\"\n title=\"Zoom Out\"\n tabindex=\"21\"\n data-l10n-id=\"zoom_out\"\n (click)=\"emitZoomChangeAfterDelay()\"\n >\n <span data-l10n-id=\"zoom_out_label\">Zoom Out</span>\n </button>\n <div class=\"splitToolbarButtonSeparator\"></div>\n <button\n id=\"zoomIn\"\n class=\"toolbarButton zoomIn\"\n title=\"Zoom In\"\n tabindex=\"22\"\n data-l10n-id=\"zoom_in\"\n (click)=\"emitZoomChangeAfterDelay()\"\n >\n <span data-l10n-id=\"zoom_in_label\">Zoom In</span>\n </button>\n </div>\n <span id=\"scaleSelectContainer\" class=\"dropdownToolbarButton\">\n <select\n id=\"scaleSelect\"\n title=\"Zoom\"\n tabindex=\"23\"\n data-l10n-id=\"zoom\"\n (change)=\"emitZoomChange()\"\n #sizeSelector\n >\n <option\n id=\"pageAutoOption\"\n title=\"\"\n value=\"auto\"\n selected=\"selected\"\n data-l10n-id=\"page_scale_auto\"\n >Automatic Zoom</option\n >\n <option\n id=\"pageActualOption\"\n title=\"\"\n value=\"page-actual\"\n data-l10n-id=\"page_scale_actual\"\n >Actual Size</option\n >\n <option\n id=\"pageFitOption\"\n title=\"\"\n value=\"page-fit\"\n data-l10n-id=\"page_scale_fit\"\n >Page Fit</option\n >\n <option\n id=\"pageWidthOption\"\n title=\"\"\n value=\"page-width\"\n data-l10n-id=\"page_scale_width\"\n >Page Width</option\n >\n <option\n