From f4f59b4f4a51fbd04dc2759a36e904e6ff6e04d3 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 20 Jun 2016 11:25:15 +0100 Subject: [PATCH 1/8] fix center loading and add name --- .../src/pdfViewer.component.css | 24 +++++++++++++++++-- .../src/pdfViewer.component.html | 10 ++++---- .../src/pdfViewer.component.ts | 3 +++ .../src/viewer.component.css | 2 +- .../src/viewer.component.html | 18 +++++++------- 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css index 4e31b8f6f4..618771d3ea 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css @@ -2,9 +2,29 @@ background: #3E3E3E; } -.viewer-loader-text { +.loader-container { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-flex-direction: row; + -moz-box-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + height:100%; +} + +.loader-item { + margin: auto; + max-height:100px; + max-width:300px; +} + +.loader-text{ + white-space: nowrap; text-align: center; - color: #000; + position: relative; + color : #fff; } :host .page { diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index 2da07b540f..18534f815a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -1,11 +1,11 @@
-
-
-
-
-
Loading...
+
+
+
+
Loading {{nameFile}} ...
+
diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 65a4c9514d..0426c1cd70 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -31,6 +31,9 @@ export class PdfViewerComponent { @Input() urlFile: string; + @Input() + nameFile: string; + currentPdfDocument: any; page: number; displayPage: number; diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index a0c76b1dd5..f442bca858 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -19,7 +19,7 @@ } .viewer-name-file { - width: 20%; + width: 50%; height: 21px; overflow: hidden !important; text-overflow: ellipsis; diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index a7cc5c9770..a1ddc836e1 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -20,20 +20,18 @@
-
- Thumbnail -
+ + +
@@ -50,7 +48,7 @@
- +
From bdd4a6f9121a3a45fc8de361c9b41b5de7caeae0 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 20 Jun 2016 14:10:01 +0100 Subject: [PATCH 2/8] center pdf viewer --- .../src/pdfViewer.component.html | 2 +- .../src/viewer.component.css | 4 --- .../src/viewer.component.html | 28 +++++++++---------- 3 files changed, 15 insertions(+), 19 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index 18534f815a..6e00f93482 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -24,7 +24,7 @@
/ {{totalPages}}
-
+
keyboard_arrow_right
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index f442bca858..9bb812b55e 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -14,10 +14,6 @@ margin: 20px; } -.mdl-grid { - width: 100vw; -} - .viewer-name-file { width: 50%; height: 21px; diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index a1ddc836e1..7eede4aa37 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -35,13 +35,13 @@
-
- -
+ + + + + + +
@@ -59,13 +59,13 @@
-
- -
+ + + + + + +
From 64dbb4847f9adfdf2e3f2519811275302bb2060b Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 20 Jun 2016 15:57:31 +0100 Subject: [PATCH 3/8] add resize listner --- .../src/pdfViewer.component.css | 12 ++ .../src/pdfViewer.component.html | 10 +- .../src/pdfViewer.component.ts | 114 ++++++++++++++++-- 3 files changed, 124 insertions(+), 12 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css index 618771d3ea..53b84c982e 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css @@ -54,6 +54,18 @@ color: white; } +.viewer-toolbar-command{ + height: 30px; + padding-top: 4px; + top: 80px; + left:35px; + width:auto; + position:fixed; + border-radius: 10px; + background: #3E3E3E; + color: white; +} + .viewer-pagenumber-input { border: none; border-bottom: 1px solid rgba(0,0,0,.12); diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index 6e00f93482..b423b82d65 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -1,5 +1,5 @@ -
+
@@ -29,3 +29,11 @@
+ + +
+
+ zoom_out_map +
+
+ diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 0426c1cd70..76532843d2 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -41,9 +41,12 @@ export class PdfViewerComponent { pdfViewer: any; - renderingStates = { - FINISHED: 3 as number - }; + currentScaleMode: string; + currentScale: number; + + documentContainer: any; + + MAX_AUTO_SCALE: number = 1.25; ngOnChanges(changes) { if (!this.urlFile) { @@ -58,6 +61,11 @@ export class PdfViewerComponent { this.page = 1; this.displayPage = 1; this.initPDFViewer(this.currentPdfDocument); + + this.currentPdfDocument.getPage(1).then(() => { + this.scalePage('auto'); + }); + }, (error) => { reject(error); }); @@ -77,17 +85,107 @@ export class PdfViewerComponent { initPDFViewer(pdfDocument: any) { PDFJS.verbosity = 5; - let documentContainer: any = document.getElementById('viewer-pdf-container'); + this.documentContainer = document.getElementById('viewer-pdf-container'); let viewer: any = document.getElementById('viewer-viewerPdf'); this.pdfViewer = new PDFJS.PDFViewer({ - container: documentContainer, + container: this.documentContainer, viewer: viewer }); this.pdfViewer.setDocument(pdfDocument); } + + /** + * Method to scale the page current support implementation + * @param {string} scaleMode - new scale mode + */ + scalePage(scaleMode) { + this.currentScaleMode = scaleMode; + + let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber]; + + let pageWidthScale = (this.documentContainer.clientWidth) / + currentPage.width * currentPage.scale; + let pageHeightScale = (this.documentContainer.clientHeight ) / + currentPage.width * currentPage.scale; + + let scale; + + switch (this.currentScaleMode) { + case 'page-actual': + scale = 1; + break; + case 'page-width': + scale = pageWidthScale; + break; + case 'page-height': + scale = pageHeightScale; + break; + case 'page-fit': + scale = Math.min(pageWidthScale, pageHeightScale); + break; + case 'auto': + let horizontalScale; + if (this.isLandscape) { + horizontalScale = Math.min(pageHeightScale, pageWidthScale); + } else { + horizontalScale = pageWidthScale; + } + scale = Math.min(this.MAX_AUTO_SCALE, horizontalScale); + + break; + default: + console.error('pdfViewSetScale: \'' + scaleMode + '\' is an unknown zoom value.'); + return; + } + + this.setScaleUpdatePages(scale); + } + + /** + * Update all the pages with the newScale scale + * @param {number} newScale - new scale page + */ + setScaleUpdatePages(newScale: number) { + if (!this.isSameScale(this.currentScale, newScale)) { + this.currentScale = newScale; + + this.pdfViewer._pages.forEach(function (currentPage) { + currentPage.update(newScale); + }); + } + } + + /** + * method to check if the request scale of the page is the same for avoid unuseful re-rendering + * + * @param {number} oldScale - old scale page + * @param {number} newScale - new scale page + */ + isSameScale(oldScale: number, newScale: number) { + return (newScale === oldScale); + } + + + /** + * method to check if is a land scape view + * + * @param {number} width + * @param {number} height + */ + isLandscape(width: number, height: number) { + return (width > height); + } + + /** + * Method triggered when the page is resized + */ + onResize() { + this.scalePage('page-fit'); + } + /** * load the previous page */ @@ -97,12 +195,6 @@ export class PdfViewerComponent { this.displayPage = this.page; this.pdfViewer.currentPageNumber = this.page; - - //if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) { - // // remove loader - //} else { - // // add loader - //} } } From 279b7b393d8d9821a6f493c24b4a390e437aae40 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 21 Jun 2016 02:26:01 +0100 Subject: [PATCH 4/8] align canvas to text --- .../src/pdfViewer.component.css | 12 -- .../src/pdfViewer.component.html | 6 +- .../src/pdfViewer.component.spec.ts | 3 +- .../src/pdfViewer.component.ts | 19 +- .../src/pdfViewerHost.component.css | 202 ++++++++++++++++++ .../src/viewer.component.css | 6 +- .../src/viewer.component.html | 2 +- 7 files changed, 226 insertions(+), 24 deletions(-) create mode 100644 ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css index 53b84c982e..3db514948a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css @@ -27,18 +27,6 @@ color : #fff; } -:host .page { - margin: 10px auto !important; - overflow: visible; - border: 9px solid transparent; - background-clip: content-box; - background-color: white; -} - -:host .canvasWrapper { - box-shadow: 0px 0px 8px 2px #000; -} - .left { float: left; } diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index b423b82d65..91edb01582 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -1,6 +1,6 @@ -
-
+
+
@@ -32,7 +32,7 @@
-
+
zoom_out_map
diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index d22ba9a324..9f006acd9f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts @@ -51,11 +51,10 @@ describe('PdfViewer', () => { fixture.detectChanges(); - expect(element.querySelector('#viewer-loader')).not.toBeNull(); + expect(element.querySelector('#loader-container')).not.toBeNull(); }); })); - it('Next an Previous Buttons should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb .createAsync(PdfViewerComponent) diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 76532843d2..8a599834f7 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -24,7 +24,7 @@ declare let __moduleName: string; moduleId: __moduleName, selector: 'pdf-viewer', templateUrl: './pdfViewer.component.html', - styleUrls: ['./pdfViewer.component.css'] + styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css' ] }) export class PdfViewerComponent { @@ -84,6 +84,7 @@ export class PdfViewerComponent { initPDFViewer(pdfDocument: any) { PDFJS.verbosity = 5; + PDFJS.disableWorker = true; this.documentContainer = document.getElementById('viewer-pdf-container'); let viewer: any = document.getElementById('viewer-viewerPdf'); @@ -106,10 +107,8 @@ export class PdfViewerComponent { let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber]; - let pageWidthScale = (this.documentContainer.clientWidth) / - currentPage.width * currentPage.scale; - let pageHeightScale = (this.documentContainer.clientHeight ) / - currentPage.width * currentPage.scale; + let pageWidthScale = (this.documentContainer.clientWidth) / currentPage.width * currentPage.scale; + let pageHeightScale = (this.documentContainer.clientHeight ) / currentPage.width * currentPage.scale; let scale; @@ -154,7 +153,10 @@ export class PdfViewerComponent { this.pdfViewer._pages.forEach(function (currentPage) { currentPage.update(newScale); + console.log(currentPage.viewport); }); + + this.pdfViewer.update(); } } @@ -183,6 +185,13 @@ export class PdfViewerComponent { * Method triggered when the page is resized */ onResize() { + this.scalePage(this.currentScaleMode); + } + + /** + * Method triggered when the page is resized + */ + pageFit() { this.scalePage('page-fit'); } diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css new file mode 100644 index 0000000000..eb2abd2500 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css @@ -0,0 +1,202 @@ +:host .textLayer { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + opacity: 0.2; + line-height: 1.0; +} + +:host .textLayer > div { + color: transparent; + position: absolute; + white-space: pre; + cursor: text; + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -o-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; +} + +:host .textLayer .highlight { + margin: -1px; + padding: 1px; + + background-color: rgb(180, 0, 170); + border-radius: 4px; +} + +:host .textLayer .highlight.begin { + border-radius: 4px 0px 0px 4px; +} + +:host .textLayer .highlight.end { + border-radius: 0px 4px 4px 0px; +} + +:host .textLayer .highlight.middle { + border-radius: 0px; +} + +:host .textLayer .highlight.selected { + background-color: rgb(0, 100, 0); +} + +:host .textLayer ::selection { background: rgb(0,0,255); } +:host .textLayer ::-moz-selection { background: rgb(0,0,255); } + +:host .textLayer .endOfContent { + display: block; + position: absolute; + left: 0px; + top: 100%; + right: 0px; + bottom: 0px; + z-index: -1; + cursor: default; + -webkit-user-select: none; + -ms-user-select: none; + -moz-user-select: none; +} + +:host .textLayer .endOfContent.active { + top: 0px; +} + + +:host .annotationLayer section { + position: absolute; +} + +:host .annotationLayer .linkAnnotation > a { + position: absolute; + font-size: 1em; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +:host .annotationLayer .linkAnnotation > a /* -ms-a */ { + background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat; +} + +:host .annotationLayer .linkAnnotation > a:hover { + opacity: 0.2; + background: #ff0; + box-shadow: 0px 2px 10px #ff0; +} + +:host .annotationLayer .textAnnotation img { + position: absolute; + cursor: pointer; +} + +:host .annotationLayer .popupWrapper { + position: absolute; + width: 20em; +} + +:host .annotationLayer .popup { + position: absolute; + z-index: 200; + max-width: 20em; + background-color: #FFFF99; + box-shadow: 0px 2px 5px #333; + border-radius: 2px; + padding: 0.6em; + margin-left: 5px; + cursor: pointer; + word-wrap: break-word; +} + +:host .annotationLayer .popup h1 { + font-size: 1em; + border-bottom: 1px solid #000000; + padding-bottom: 0.2em; +} + +:host .annotationLayer .popup p { + padding-top: 0.2em; +} + +:host .annotationLayer .highlightAnnotation, +.annotationLayer .underlineAnnotation, +.annotationLayer .squigglyAnnotation, +.annotationLayer .strikeoutAnnotation, +.annotationLayer .fileAttachmentAnnotation { + cursor: pointer; +} + +:host .pdfViewer .canvasWrapper { + overflow: hidden; +} + +:host .pdfViewer .page { + direction: ltr; + width: 816px; + height: 1056px; + margin: 1px auto -8px auto; + position: relative; + overflow: visible; + border: 9px solid transparent; + background-clip: content-box; + background-color: white; +} + +:host .pdfViewer.removePageBorders .page { + margin: 0px auto 10px auto; + border: none; +} + +:host .pdfViewer .page canvas { + margin: 0; + display: block; +} + +:host .pdfViewer .page .loadingIcon { + position: absolute; + display: block; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: url('images/loading-icon.gif') center no-repeat; +} + +:host * { + padding: 0; + margin: 0; +} + +:host html { + height: 100%; + width: 100%; + /* Font size is needed to make the activity bar the correct size. */ + font-size: 10px; +} + +:host body { + height: 100%; + width: 100%; + background-color: #404040; + background-image: url(images/texture.png); +} + +:host body, +input, +button, +select { + font: message-box; + outline: none; +} + +:host .hidden { + display: none !important; +} +:host [hidden] { + display: none !important; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index 9bb812b55e..50d9ff73bc 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -11,7 +11,11 @@ flex-direction: row; flex-wrap: wrap; flex: 1; - margin: 20px; +} + +.mdl-grid { + width: 100vw; + padding: 0px !important; } .viewer-name-file { diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index 7eede4aa37..7b9b379131 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -43,7 +43,7 @@ -
+
From e8d365cfc0fd9e1357d64378e39d18c9553628d3 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 21 Jun 2016 10:17:47 +0100 Subject: [PATCH 5/8] add paffing when calculate new scale --- .../ng2-alfresco-viewer/src/pdfViewer.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 8a599834f7..64dd09baff 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -107,8 +107,9 @@ export class PdfViewerComponent { let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber]; - let pageWidthScale = (this.documentContainer.clientWidth) / currentPage.width * currentPage.scale; - let pageHeightScale = (this.documentContainer.clientHeight ) / currentPage.width * currentPage.scale; + let padding = 20; + let pageWidthScale = (this.documentContainer.clientWidth - padding) / currentPage.width * currentPage.scale; + let pageHeightScale = (this.documentContainer.clientHeight - padding) / currentPage.width * currentPage.scale; let scale; From d8856b541db0bb84a524882c63c0ffaac66b7169 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 21 Jun 2016 10:39:18 +0100 Subject: [PATCH 6/8] add event Keyboard test --- .../src/assets/event.mock.ts | 30 ++++++++ .../src/pdfViewer.component.spec.ts | 70 +++++++++++++++++-- .../src/viewer.component.spec.ts | 18 +++++ 3 files changed, 113 insertions(+), 5 deletions(-) create mode 100644 ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts new file mode 100644 index 0000000000..5829be8fa5 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts @@ -0,0 +1,30 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +export class EventMock { + + static keyDown(key: any) { + let event: any = document.createEvent('Event'); + event.keyCode = key; + event.initEvent('keydown'); + document.dispatchEvent(event); + } + +} + + diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index 9f006acd9f..bc9784a803 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts @@ -24,6 +24,7 @@ import { import { PdfViewerComponent } from './pdfViewer.component'; import { PDFJSmock } from './assets/PDFJS.mock'; import { PDFViewermock } from './assets/PDFViewer.mock'; +import { EventMock } from './assets/event.mock'; describe('PdfViewer', () => { setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, @@ -103,7 +104,8 @@ describe('PdfViewer', () => { }); })); - it('nextPage should move to the next page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + + it('right arrow should move to the next page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb .createAsync(PdfViewerComponent) .then((fixture) => { @@ -118,7 +120,61 @@ describe('PdfViewer', () => { component.ngOnChanges().then(() => { fixture.detectChanges(); expect(component.displayPage).toBe(1); - component.nextPage(); + EventMock.keyDown(39); + fixture.detectChanges(); + expect(component.displayPage).toBe(2); + }).catch((error) => { + expect(error).toBeUndefined(); + }); + }); + })); + + it('nextPage should move to the next page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(PdfViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + let element = fixture.nativeElement; + + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + spyOn(component, 'initPDFViewer').and.callFake(() => { + component.pdfViewer = new PDFViewermock(); + }); + + component.urlFile = 'fake-url-file'; + + let nextPageButton = element.querySelector('#viewer-next-page-button'); + + component.ngOnChanges().then(() => { + fixture.detectChanges(); + expect(component.displayPage).toBe(1); + nextPageButton.click(); + fixture.detectChanges(); + expect(component.displayPage).toBe(2); + }).catch((error) => { + expect(error).toBeUndefined(); + }); + }); + })); + + it('left arrow should move to the previous page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(PdfViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + spyOn(component, 'initPDFViewer').and.callFake(() => { + component.pdfViewer = new PDFViewermock(); + }); + + component.urlFile = 'fake-url-file'; + + component.ngOnChanges().then(() => { + fixture.detectChanges(); + expect(component.displayPage).toBe(1); + EventMock.keyDown(39); + EventMock.keyDown(39); + EventMock.keyDown(37); fixture.detectChanges(); expect(component.displayPage).toBe(2); }).catch((error) => { @@ -132,19 +188,23 @@ describe('PdfViewer', () => { .createAsync(PdfViewerComponent) .then((fixture) => { let component = fixture.componentInstance; + let element = fixture.nativeElement; + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); spyOn(component, 'initPDFViewer').and.callFake(() => { component.pdfViewer = new PDFViewermock(); }); component.urlFile = 'fake-url-file'; + let previousPageButton = element.querySelector('#viewer-previous-page-button'); + let nextPageButton = element.querySelector('#viewer-next-page-button'); component.ngOnChanges().then(() => { fixture.detectChanges(); expect(component.displayPage).toBe(1); - component.nextPage(); - component.nextPage(); - component.previousPage(); + nextPageButton.click(); + nextPageButton.click(); + previousPageButton.click(); fixture.detectChanges(); expect(component.displayPage).toBe(2); }).catch((error) => { diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts index 45418484d3..e7a32e270a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts @@ -18,6 +18,7 @@ import {describe, expect, it, inject } from '@angular/core/testing'; import { TestComponentBuilder } from '@angular/compiler/testing'; import { ViewerComponent } from './viewer.component'; +import { EventMock } from './assets/event.mock'; describe('ViewerComponent', () => { @@ -97,6 +98,23 @@ import { ViewerComponent } from './viewer.component'; expect(element.querySelector('#viewer-main-container')).toBeNull(); }); })); + + it('Esc button should hide the viewer', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + let element = fixture.nativeElement; + let component = fixture.componentInstance; + component.urlFile = 'fake-url-file'; + + + + fixture.detectChanges(); + EventMock.keyDown(27); + fixture.detectChanges(); + expect(element.querySelector('#viewer-main-container')).toBeNull(); + }); + })); }); describe('Attribute', () => { From 3add949925723bfa50e2bc9166557a4d229ed433 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 21 Jun 2016 12:43:40 +0100 Subject: [PATCH 7/8] add test resize view and input value --- .../src/assets/PDFViewer.mock.ts | 21 +++++ .../src/assets/event.mock.ts | 5 ++ .../src/pdfViewer.component.spec.ts | 51 ++++++++++++ .../src/pdfViewer.component.ts | 80 +++++++++---------- 4 files changed, 117 insertions(+), 40 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts index 2e2838d6b2..e9bbab730a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts +++ b/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts @@ -23,4 +23,25 @@ export class PDFViewermock { currentPage = { renderingState: 3 as number }; + + _pages: any = + [{ + width: 793, + scale: 1, + update: this.update + }, { + width: 793, + scale: 1, + update: this.update + }, { + width: 793, + scale: 1, + update: this.update + }]; + + _currentPageNumber: number = 0; + + update() { + console.log('update page'); + } } diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts index 5829be8fa5..eb606201f3 100644 --- a/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts +++ b/ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts @@ -25,6 +25,11 @@ export class EventMock { document.dispatchEvent(event); } + static resizeMobileView() { + window.innerWidth = 320; + window.innerHeight = 568; + window.dispatchEvent(new Event('resize')); + } } diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index bc9784a803..a1804ead3f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts @@ -237,5 +237,56 @@ describe('PdfViewer', () => { }); }); })); + + it('Input page should move to the inserted page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(PdfViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + spyOn(component, 'initPDFViewer').and.callFake(() => { + component.pdfViewer = new PDFViewermock(); + }); + + component.urlFile = 'fake-url-file'; + + component.ngOnChanges().then(() => { + fixture.detectChanges(); + expect(component.displayPage).toBe(1); + component.inputPage('4'); + fixture.detectChanges(); + expect(component.displayPage).toBe(4); + }).catch((error) => { + expect(error).toBeUndefined(); + }); + }); + })); }); + + describe('Rezize interaction', () => { + + it('resize event should trigger setScaleUpdatePages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(PdfViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + let element = fixture.nativeElement; + + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + spyOn(component, 'initPDFViewer'); + spyOn(component, 'setScaleUpdatePages'); + + component.documentContainer = element.querySelector('#viewer-pdf-container'); + component.pdfViewer = new PDFViewermock(); + component.urlFile = 'fake-url-file'; + + EventMock.resizeMobileView(); + + expect(component.setScaleUpdatePages).toHaveBeenCalled(); + }); + })); + + }); + }); diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 64dd09baff..1d66123e82 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -24,7 +24,7 @@ declare let __moduleName: string; moduleId: __moduleName, selector: 'pdf-viewer', templateUrl: './pdfViewer.component.html', - styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css' ] + styleUrls: ['./pdfViewer.component.css', './pdfViewerHost.component.css'] }) export class PdfViewerComponent { @@ -41,11 +41,9 @@ export class PdfViewerComponent { pdfViewer: any; - currentScaleMode: string; + currentScaleMode: string = 'auto'; currentScale: number; - documentContainer: any; - MAX_AUTO_SCALE: number = 1.25; ngOnChanges(changes) { @@ -86,11 +84,11 @@ export class PdfViewerComponent { PDFJS.verbosity = 5; PDFJS.disableWorker = true; - this.documentContainer = document.getElementById('viewer-pdf-container'); + let documentContainer = document.getElementById('viewer-pdf-container'); let viewer: any = document.getElementById('viewer-viewerPdf'); this.pdfViewer = new PDFJS.PDFViewer({ - container: this.documentContainer, + container: documentContainer, viewer: viewer }); @@ -105,43 +103,46 @@ export class PdfViewerComponent { scalePage(scaleMode) { this.currentScaleMode = scaleMode; - let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber]; + if (this.pdfViewer) { + let documentContainer = document.getElementById('viewer-pdf-container'); + let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber]; - let padding = 20; - let pageWidthScale = (this.documentContainer.clientWidth - padding) / currentPage.width * currentPage.scale; - let pageHeightScale = (this.documentContainer.clientHeight - padding) / currentPage.width * currentPage.scale; + let padding = 20; + let pageWidthScale = (documentContainer.clientWidth - padding) / currentPage.width * currentPage.scale; + let pageHeightScale = (documentContainer.clientHeight - padding) / currentPage.width * currentPage.scale; - let scale; + let scale; - switch (this.currentScaleMode) { - case 'page-actual': - scale = 1; - break; - case 'page-width': - scale = pageWidthScale; - break; - case 'page-height': - scale = pageHeightScale; - break; - case 'page-fit': - scale = Math.min(pageWidthScale, pageHeightScale); - break; - case 'auto': - let horizontalScale; - if (this.isLandscape) { - horizontalScale = Math.min(pageHeightScale, pageWidthScale); - } else { - horizontalScale = pageWidthScale; - } - scale = Math.min(this.MAX_AUTO_SCALE, horizontalScale); + switch (this.currentScaleMode) { + case 'page-actual': + scale = 1; + break; + case 'page-width': + scale = pageWidthScale; + break; + case 'page-height': + scale = pageHeightScale; + break; + case 'page-fit': + scale = Math.min(pageWidthScale, pageHeightScale); + break; + case 'auto': + let horizontalScale; + if (this.isLandscape) { + horizontalScale = Math.min(pageHeightScale, pageWidthScale); + } else { + horizontalScale = pageWidthScale; + } + scale = Math.min(this.MAX_AUTO_SCALE, horizontalScale); - break; - default: - console.error('pdfViewSetScale: \'' + scaleMode + '\' is an unknown zoom value.'); - return; + break; + default: + console.error('pdfViewSetScale: \'' + scaleMode + '\' is an unknown zoom value.'); + return; + } + + this.setScaleUpdatePages(scale); } - - this.setScaleUpdatePages(scale); } /** @@ -154,7 +155,6 @@ export class PdfViewerComponent { this.pdfViewer._pages.forEach(function (currentPage) { currentPage.update(newScale); - console.log(currentPage.viewport); }); this.pdfViewer.update(); @@ -230,7 +230,7 @@ export class PdfViewerComponent { if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) { this.page = pageInput; - + this.displayPage = this.page; this.pdfViewer.currentPageNumber = this.page; } else { this.displayPage = this.page; From e1be068973abfe47f81d826d1b5184ba4efa775d Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 21 Jun 2016 14:54:12 +0100 Subject: [PATCH 8/8] fix #192 Download image is not displayed corectly in Firefox --- .../ng2-alfresco-viewer/src/notSupportedFormat.component.css | 4 ++++ .../ng2-alfresco-viewer/src/notSupportedFormat.component.html | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css index 3b15d30246..540d4cc8fa 100644 --- a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css @@ -16,3 +16,7 @@ align-items: center; justify-content: center; } + +.full_width{ + width :100% !important; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html index 8affda71b4..0fd7a550cd 100644 --- a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html @@ -1,10 +1,10 @@
-
+

File {{nameFile}} is an unsupported format

-