diff --git a/build/app/app.component.html b/build/app/app.component.html index e84bbaabd..dabb75e16 100755 --- a/build/app/app.component.html +++ b/build/app/app.component.html @@ -31,6 +31,25 @@ +
+ +
+ + + Input is not a number! +
+ +
diff --git a/build/app/app.component.js b/build/app/app.component.js index cc9805f1f..fc20d4ba7 100644 --- a/build/app/app.component.js +++ b/build/app/app.component.js @@ -13,6 +13,7 @@ var AppComponent = (function () { function AppComponent() { this.pdfSrc = './pdf-test.pdf'; this.page = 1; + this.zoom = 1.0; this.originalSize = false; this.showAll = true; this.onLoadComplete = this.onLoadComplete.bind(this); @@ -20,6 +21,9 @@ var AppComponent = (function () { AppComponent.prototype.incrementPage = function (amount) { this.page += amount; }; + AppComponent.prototype.incrementZoom = function (amount) { + this.zoom += amount; + }; AppComponent.prototype.onLoadComplete = function (pdf) { this.pdf = pdf; }; diff --git a/build/app/app.component.js.map b/build/app/app.component.js.map index 54d8f15d6..63cffed9b 100644 --- a/build/app/app.component.js.map +++ b/build/app/app.component.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/app/app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAGA,qBAA0B,eAAe,CAAC,CAAA;AAQ1C;IAiBE;QAhBA,WAAM,GAAW,gBAAgB,CAAC;QAWlC,SAAI,GAAW,CAAC,CAAC;QACjB,iBAAY,GAAY,KAAK,CAAC;QAC9B,YAAO,GAAY,IAAI,CAAC;QAItB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAED,oCAAa,GAAb,UAAc,MAAM;QAClB,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAMD,qCAAc,GAAd,UAAe,GAAQ;QACrB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACjB,CAAC;IArCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,CAAC,yBAAyB,CAAC;SACvC,CAAC;;oBAAA;IAkCF,mBAAC;AAAD,CAhCA,AAgCC,IAAA;AAhCY,oBAAY,eAgCxB,CAAA","file":"app.component.js","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'pdf-viewer-app',\n templateUrl: './app/app.component.html',\n styleUrls: ['./app/app.component.css']\n})\n\nexport class AppComponent {\n pdfSrc: string = './pdf-test.pdf';\n\n // or pass options as object\n // pdfSrc: any = {\n // url: './pdf-test.pdf',\n // withCredentials: true,\n //// httpHeaders: { // cross domain\n //// 'Access-Control-Allow-Credentials': true\n //// }\n // };\n\n page: number = 1;\n originalSize: boolean = false;\n showAll: boolean = true;\n pdf: any;\n\n constructor() {\n this.onLoadComplete = this.onLoadComplete.bind(this);\n }\n\n incrementPage(amount) {\n this.page += amount;\n }\n\n /**\n * Get pdf information after it's loaded\n * @param pdf\n */\n onLoadComplete(pdf: any) {\n this.pdf = pdf;\n }\n}"]} \ No newline at end of file +{"version":3,"sources":["../../src/app/app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAGA,qBAA0B,eAAe,CAAC,CAAA;AAQ1C;IAkBE;QAjBA,WAAM,GAAW,gBAAgB,CAAC;QAWlC,SAAI,GAAW,CAAC,CAAC;QACjB,SAAI,GAAW,GAAG,CAAC;QACnB,iBAAY,GAAY,KAAK,CAAC;QAC9B,YAAO,GAAY,IAAI,CAAC;QAItB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAED,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAED,oCAAa,GAAb,UAAc,MAAc;QAC1B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;IACtB,CAAC;IAMD,qCAAc,GAAd,UAAe,GAAQ;QACrB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACjB,CAAC;IA1CH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,CAAC,yBAAyB,CAAC;SACvC,CAAC;;oBAAA;IAuCF,mBAAC;AAAD,CArCA,AAqCC,IAAA;AArCY,oBAAY,eAqCxB,CAAA","file":"app.component.js","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'pdf-viewer-app',\n templateUrl: './app/app.component.html',\n styleUrls: ['./app/app.component.css']\n})\n\nexport class AppComponent {\n pdfSrc: string = './pdf-test.pdf';\n\n // or pass options as object\n // pdfSrc: any = {\n // url: './pdf-test.pdf',\n // withCredentials: true,\n //// httpHeaders: { // cross domain\n //// 'Access-Control-Allow-Credentials': true\n //// }\n // };\n\n page: number = 1;\n zoom: number = 1.0;\n originalSize: boolean = false;\n showAll: boolean = true;\n pdf: any;\n\n constructor() {\n this.onLoadComplete = this.onLoadComplete.bind(this);\n }\n\n incrementPage(amount: number) {\n this.page += amount;\n }\n\n incrementZoom(amount: number) {\n this.zoom += amount;\n }\n\n /**\n * Get pdf information after it's loaded\n * @param pdf\n */\n onLoadComplete(pdf: any) {\n this.pdf = pdf;\n }\n}"]} \ No newline at end of file diff --git a/build/pdf-viewer/pdf-viewer.component.js b/build/pdf-viewer/pdf-viewer.component.js index 37ebbb5bf..844a5bc37 100644 --- a/build/pdf-viewer/pdf-viewer.component.js +++ b/build/pdf-viewer/pdf-viewer.component.js @@ -16,6 +16,7 @@ var PdfViewerComponent = (function () { this._showAll = false; this._originalSize = true; this._page = 1; + this._zoom = 1; this.wasInvalidPage = false; this.pageChange = new core_1.EventEmitter(true); } @@ -69,6 +70,19 @@ var PdfViewerComponent = (function () { enumerable: true, configurable: true }); + Object.defineProperty(PdfViewerComponent.prototype, "zoom", { + set: function (value) { + if (value <= 0) { + return; + } + this._zoom = value; + if (this._pdf) { + this.fn(); + } + }, + enumerable: true, + configurable: true + }); PdfViewerComponent.prototype.fn = function () { var _this = this; window.PDFJS.getDocument(this._src).then(function (pdf) { @@ -102,7 +116,7 @@ var PdfViewerComponent = (function () { PdfViewerComponent.prototype.renderPage = function (page) { var _this = this; return this._pdf.getPage(page).then(function (page) { - var viewport = page.getViewport(1); + var viewport = page.getViewport(1 * _this._zoom); var container = _this.element.nativeElement.querySelector('div'); var canvas = document.createElement('canvas'); if (!_this._originalSize) { @@ -153,10 +167,17 @@ var PdfViewerComponent = (function () { __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean]) ], PdfViewerComponent.prototype, "showAll", null); + __decorate([ + core_1.Input('zoom'), + __metadata('design:type', Number), + __metadata('design:paramtypes', [Number]) + ], PdfViewerComponent.prototype, "zoom", null); PdfViewerComponent = __decorate([ core_1.Component({ selector: 'pdf-viewer', - template: '
' + template: "
", + styles: ["\n .ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n }" + ] }), __metadata('design:paramtypes', [core_1.ElementRef]) ], PdfViewerComponent); diff --git a/build/pdf-viewer/pdf-viewer.component.js.map b/build/pdf-viewer/pdf-viewer.component.js.map index 2e5450a8d..c6a958d46 100644 --- a/build/pdf-viewer/pdf-viewer.component.js.map +++ b/build/pdf-viewer/pdf-viewer.component.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/pdf-viewer/pdf-viewer.component.ts"],"names":[],"mappings":"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","file":"pdf-viewer.component.js","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport {\n Component, Input, Output, ElementRef, EventEmitter\n} from '@angular/core';\nimport 'pdfjs-dist/build/pdf.combined';\n\n@Component({\n selector: 'pdf-viewer',\n template: '
'\n})\n\nexport class PdfViewerComponent {\n private _showAll: boolean = false;\n private _originalSize: boolean = true;\n private _src: any;\n private _pdf: any;\n private _page: number = 1;\n private wasInvalidPage: boolean = false;\n @Input('on-load-complete') onLoadComplete: Function;\n\n constructor(private element: ElementRef) {}\n\n @Input()\n set src(_src) {\n this._src = _src;\n\n this.fn();\n }\n\n @Input()\n set page(_page) {\n _page = parseInt(_page, 10);\n\n if (!this._pdf) {\n return;\n }\n\n if (this.isValidPageNumber(_page)) {\n this._page = _page;\n this.renderPage(_page);\n this.wasInvalidPage = false;\n } else if (isNaN(_page)) {\n this.pageChange.emit(null);\n } else if (!this.wasInvalidPage) {\n this.wasInvalidPage = true;\n this.pageChange.emit(this._page);\n }\n }\n\n @Output() pageChange: EventEmitter = new EventEmitter(true);\n\n @Input('original-size')\n set originalSize(originalSize: boolean) {\n this._originalSize = originalSize;\n\n if (this._pdf) {\n this.fn();\n }\n }\n\n @Input('show-all')\n set showAll(value: boolean) {\n this._showAll = value;\n\n if (this._pdf) {\n this.fn();\n }\n }\n\n private fn() {\n (window).PDFJS.getDocument(this._src).then((pdf: any) => {\n this._pdf = pdf;\n\n if (this.onLoadComplete && typeof this.onLoadComplete === 'function') {\n this.onLoadComplete(pdf);\n }\n\n if (!this.isValidPageNumber(this._page)) {\n this._page = 1;\n }\n\n if (!this._showAll) {\n return this.renderPage(this._page);\n }\n\n return this.renderMultiplePages();\n });\n }\n\n private renderMultiplePages() {\n let container = this.element.nativeElement.querySelector('div');\n let page = 1;\n const renderPageFn = (page: number) => () => this.renderPage(page);\n\n this.removeAllChildNodes(container);\n\n let d = this.renderPage(page++);\n\n for (page; page <= this._pdf.numPages; page++) {\n d = d.then(renderPageFn(page));\n }\n }\n\n private isValidPageNumber(page: number) {\n return this._pdf.numPages >= page && page >= 1;\n }\n\n private renderPage(page: number) {\n return this._pdf.getPage(page).then((page: any) => {\n let viewport = page.getViewport(1);\n let container = this.element.nativeElement.querySelector('div');\n let canvas: HTMLCanvasElement = document.createElement('canvas');\n\n if (!this._originalSize) {\n viewport = page.getViewport(this.element.nativeElement.offsetWidth / viewport.width);\n }\n\n if (!this._showAll) {\n this.removeAllChildNodes(container);\n }\n\n container.appendChild(canvas);\n\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n page.render({\n canvasContext: canvas.getContext('2d'),\n viewport: viewport\n });\n });\n }\n\n private removeAllChildNodes(element: HTMLElement) {\n while (element.firstChild) {\n element.removeChild(element.firstChild);\n }\n }\n}"]} \ No newline at end of file +{"version":3,"sources":["../../src/pdf-viewer/pdf-viewer.component.ts"],"names":[],"mappings":"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","file":"pdf-viewer.component.js","sourcesContent":["/**\n * Created by vadimdez on 21/06/16.\n */\nimport {\n Component, Input, Output, ElementRef, EventEmitter\n} from '@angular/core';\nimport 'pdfjs-dist/build/pdf.combined';\n\n@Component({\n selector: 'pdf-viewer',\n template: `
`,\n styles: [`\n .ng2-pdf-viewer--zoom {\n overflow-x: scroll;\n }`\n ]\n})\n\nexport class PdfViewerComponent {\n private _showAll: boolean = false;\n private _originalSize: boolean = true;\n private _src: any;\n private _pdf: any;\n private _page: number = 1;\n private _zoom: number = 1;\n private wasInvalidPage: boolean = false;\n @Input('on-load-complete') onLoadComplete: Function;\n\n constructor(private element: ElementRef) {}\n\n @Input()\n set src(_src) {\n this._src = _src;\n\n this.fn();\n }\n\n @Input()\n set page(_page) {\n _page = parseInt(_page, 10);\n\n if (!this._pdf) {\n return;\n }\n\n if (this.isValidPageNumber(_page)) {\n this._page = _page;\n this.renderPage(_page);\n this.wasInvalidPage = false;\n } else if (isNaN(_page)) {\n this.pageChange.emit(null);\n } else if (!this.wasInvalidPage) {\n this.wasInvalidPage = true;\n this.pageChange.emit(this._page);\n }\n }\n\n @Output() pageChange: EventEmitter = new EventEmitter(true);\n\n @Input('original-size')\n set originalSize(originalSize: boolean) {\n this._originalSize = originalSize;\n\n if (this._pdf) {\n this.fn();\n }\n }\n\n @Input('show-all')\n set showAll(value: boolean) {\n this._showAll = value;\n\n if (this._pdf) {\n this.fn();\n }\n }\n\n @Input('zoom')\n set zoom(value: number) {\n if (value <= 0) {\n return;\n }\n\n this._zoom = value;\n\n if (this._pdf) {\n this.fn();\n }\n }\n\n private fn() {\n (window).PDFJS.getDocument(this._src).then((pdf: any) => {\n this._pdf = pdf;\n\n if (this.onLoadComplete && typeof this.onLoadComplete === 'function') {\n this.onLoadComplete(pdf);\n }\n\n if (!this.isValidPageNumber(this._page)) {\n this._page = 1;\n }\n\n if (!this._showAll) {\n return this.renderPage(this._page);\n }\n\n return this.renderMultiplePages();\n });\n }\n\n private renderMultiplePages() {\n let container = this.element.nativeElement.querySelector('div');\n let page = 1;\n const renderPageFn = (page: number) => () => this.renderPage(page);\n\n this.removeAllChildNodes(container);\n\n let d = this.renderPage(page++);\n\n for (page; page <= this._pdf.numPages; page++) {\n d = d.then(renderPageFn(page));\n }\n }\n\n private isValidPageNumber(page: number) {\n return this._pdf.numPages >= page && page >= 1;\n }\n\n private renderPage(page: number) {\n return this._pdf.getPage(page).then((page: any) => {\n let viewport = page.getViewport(1 * this._zoom);\n let container = this.element.nativeElement.querySelector('div');\n let canvas: HTMLCanvasElement = document.createElement('canvas');\n\n if (!this._originalSize) {\n viewport = page.getViewport(this.element.nativeElement.offsetWidth / viewport.width);\n }\n\n if (!this._showAll) {\n this.removeAllChildNodes(container);\n }\n\n container.appendChild(canvas);\n\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n page.render({\n canvasContext: canvas.getContext('2d'),\n viewport: viewport\n });\n });\n }\n\n private removeAllChildNodes(element: HTMLElement) {\n while (element.firstChild) {\n element.removeChild(element.firstChild);\n }\n }\n}"]} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index e84bbaabd..dabb75e16 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -31,6 +31,25 @@ +
+ +
+ + + Input is not a number! +
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 94a7b0e11..c0acf4fda 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,6 +22,7 @@ export class AppComponent { // }; page: number = 1; + zoom: number = 1.0; originalSize: boolean = false; showAll: boolean = true; pdf: any; @@ -30,10 +31,14 @@ export class AppComponent { this.onLoadComplete = this.onLoadComplete.bind(this); } - incrementPage(amount) { + incrementPage(amount: number) { this.page += amount; } + incrementZoom(amount: number) { + this.zoom += amount; + } + /** * Get pdf information after it's loaded * @param pdf diff --git a/src/pdf-viewer/pdf-viewer.component.ts b/src/pdf-viewer/pdf-viewer.component.ts index d5f5ef7e8..f385ac76a 100644 --- a/src/pdf-viewer/pdf-viewer.component.ts +++ b/src/pdf-viewer/pdf-viewer.component.ts @@ -8,7 +8,12 @@ import 'pdfjs-dist/build/pdf.combined'; @Component({ selector: 'pdf-viewer', - template: '
' + template: `
`, + styles: [` + .ng2-pdf-viewer--zoom { + overflow-x: scroll; + }` + ] }) export class PdfViewerComponent { @@ -17,6 +22,7 @@ export class PdfViewerComponent { private _src: any; private _pdf: any; private _page: number = 1; + private _zoom: number = 1; private wasInvalidPage: boolean = false; @Input('on-load-complete') onLoadComplete: Function; @@ -69,6 +75,19 @@ export class PdfViewerComponent { } } + @Input('zoom') + set zoom(value: number) { + if (value <= 0) { + return; + } + + this._zoom = value; + + if (this._pdf) { + this.fn(); + } + } + private fn() { (window).PDFJS.getDocument(this._src).then((pdf: any) => { this._pdf = pdf; @@ -109,7 +128,7 @@ export class PdfViewerComponent { private renderPage(page: number) { return this._pdf.getPage(page).then((page: any) => { - let viewport = page.getViewport(1); + let viewport = page.getViewport(1 * this._zoom); let container = this.element.nativeElement.querySelector('div'); let canvas: HTMLCanvasElement = document.createElement('canvas');