From 3b8914e0ed2c1d913517b305abacf15ac8947a21 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Wed, 1 Jun 2016 17:26:49 +0100 Subject: [PATCH] #68 overlay option and infinite scrolling added --- demo-shell-ng2/app/app.component.css | 3 + demo-shell-ng2/app/app.component.ts | 1 + .../app/components/files/files.component.html | 269 +++++++++--------- ng2-components/ng2-alfresco-viewer/README.md | 14 +- .../ng2-alfresco-viewer/demo/src/main.ts | 2 +- .../src/viewer.component.css | 35 ++- .../src/viewer.component.html | 20 +- .../src/viewer.component.spec.ts | 31 +- .../src/viewer.component.ts | 46 ++- 9 files changed, 231 insertions(+), 190 deletions(-) create mode 100644 demo-shell-ng2/app/app.component.css diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css new file mode 100644 index 0000000000..5c248e4df2 --- /dev/null +++ b/demo-shell-ng2/app/app.component.css @@ -0,0 +1,3 @@ +header { + z-index: 1; +} \ No newline at end of file diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index 77c5b59760..477111fdd3 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -38,6 +38,7 @@ declare var document: any; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', + styleUrls: ['app/app.component.css'], directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL], pipes: [AlfrescoPipeTranslate] }) diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 655a4c3b9d..a65af26b20 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -1,141 +1,138 @@ -
- - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + -
- -
- -
-
    -
  • Current relative path: {{relativePath}}
    • -
  • Current absolute path: {{absolutePath}}
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- - - -
Single file upload
- -
Folder upload
- -
Multiple file upload
- - +
+
-
- - - + +
+
    +
  • Current relative path: {{relativePath}}
    • +
  • Current absolute path: {{absolutePath}}
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + + +
Single file upload
+ +
Folder upload
+ +
Multiple file upload
+ + + + + + diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index 7353c39c20..d699cc78ab 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -74,7 +74,7 @@ Make sure your systemjs.config has the following configuration: #### Basic usage ```html - + ``` Example of an App that declares the file viewer component : @@ -86,7 +86,7 @@ import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer'; @Component({ selector: 'my-app', - template: ` + template: ` `, directives: [VIEWERCOMPONENT] @@ -101,16 +101,14 @@ bootstrap(MyDemoApp, [ ]); ``` + #### Options Attribute | Options | Default | Description --- | --- | --- | --- -`foo` | *string* | `bar` | Lorem ipsum dolor. - - -Method | Parameters | Returns | Description ---- | --- | --- | --- -`methodName()` | None. | void | Lorem ipsum dolor. +`urlFile` | *string* | | Url where load the file +--- | --- | --- | --- +`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content ## Build from sources diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts index 52bb1fcaf7..eced87377d 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts @@ -21,7 +21,7 @@ import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer'; @Component({ selector: 'my-app', - template: ` + template: ` `, directives: [VIEWERCOMPONENT] diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index 3318c42882..6a35a59d78 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -2,10 +2,6 @@ padding: 0 40px; } -.page-content { - background: #3E3E3E; -} - .previous-page-button { top: 50%; left: 7%; @@ -36,3 +32,34 @@ overflow: hidden !important; text-overflow: ellipsis; } + +.viewer-canvas-container { + background: #3E3E3E; +} + +.viewer-shadow-transparent { + background-color: #3E3E3E; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: .90; +} + +.viewer-overlay-view { + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + z-index: 1000; +} + +:host .page { + margin: 10px auto !important; + overflow: visible; + border: 9px solid transparent; + background-clip: content-box; + background-color: white; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index af1169f8a7..a08219d2d9 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -1,14 +1,19 @@ -
+ +
+
+
+ +
-
-
+
+
{{nameFile}} - +
keyboard_arrow_left @@ -22,7 +27,7 @@ keyboard_arrow_right
- + @@ -66,8 +71,8 @@ class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> -
- +
+
@@ -103,5 +108,4 @@
-
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 328e5816d7..6509675107 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts @@ -30,7 +30,23 @@ describe('Ng2-alfresco-viewer', () => { .createAsync(ViewerComponent) .then((fixture) => { let element = fixture.nativeElement; - expect(element.querySelector('#vviewer-the-canvas')).toBeDefined(); + + expect(element.querySelector('#viewer-the-canvas')).toBeDefined(); + expect(element.querySelector('#viewer-canvas-container')).toBeDefined(); + }); + })); + + it('shadow overlay shoudl be present if overlay is true', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + let element = fixture.nativeElement; + let component = fixture.componentInstance; + + component.overlayMode = true; + + fixture.detectChanges(); + expect(element.querySelector('#viewer-shadow-transparent')).toBeDefined(); }); })); @@ -63,12 +79,12 @@ describe('Ng2-alfresco-viewer', () => { .then((fixture) => { let element = fixture.nativeElement; let component = fixture.componentInstance; + + component.urlFile = 'fake-url-file'; spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); - component.ngOnInit().then((resolve) => { - fixture.detectChanges(); + component.ngOnChanges().then((resolve) => { expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10'); - resolve(); }); }); @@ -81,9 +97,14 @@ describe('Ng2-alfresco-viewer', () => { let element = fixture.nativeElement; let component = fixture.componentInstance; spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + component.urlFile = 'fake-url-file'; fixture.detectChanges(); - expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name'); + + component.ngOnChanges().then((resolve) => { + expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name'); + resolve(); + }); }); })); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index f08b567a89..6aba8d83c6 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts @@ -31,9 +31,11 @@ export class ViewerComponent { @Input() urlFile: string; - nameFile: string; + @Input() + overlayMode: boolean = false; - currentPdf: any; + nameFile: string; + currentPdfDocument: any; currentPage: number; displayPage: number; totalPages: number; @@ -44,12 +46,12 @@ export class ViewerComponent { this.urlFile = this.addAlfrescoTicket(this.urlFile); - return this.getPDFJS().getDocument(this.urlFile).then((pdf) => { - this.currentPdf = pdf; - this.totalPages = pdf.numPages; + return this.getPDFJS().getDocument(this.urlFile, null, null).then((pdfDocument) => { + this.currentPdfDocument = pdfDocument; + this.totalPages = pdfDocument.numPages; this.currentPage = 1; this.displayPage = 1; - this.loadPage(this.currentPdf, this.currentPage); + this.loadPage(this.currentPdfDocument); }); } else { console.log('Url File is a required value'); @@ -64,29 +66,17 @@ export class ViewerComponent { return PDFJS; } - loadPage(pdf: any, numberPage: number) { - pdf.getPage(numberPage).then((page) => { + loadPage(pdfDocument: any) { - console.log(page.numPages); + PDFJS.verbosity = 5; - let scale = 1.5; - let viewport = page.getViewport(scale); - let canvas: any = document.getElementById('viewer-the-canvas'); + let documentContainer: any = document.getElementById('viewer-canvas-container'); - if (canvas) { - let context = canvas.getContext('2d'); - canvas.height = viewport.height; - canvas.width = viewport.width; - - // Render PDF page into canvas context - let renderContext = { - canvasContext: context, - viewport: viewport - }; - - page.render(renderContext); - } + let pdfViewer = new PDFJS.PDFViewer({ + container: documentContainer }); + + pdfViewer.setDocument(pdfDocument); } /** @@ -96,7 +86,7 @@ export class ViewerComponent { if (this.currentPage > 1) { this.currentPage--; this.displayPage = this.currentPage; - this.loadPage(this.currentPdf, this.currentPage); + this.loadPage(this.currentPdfDocument); } } @@ -107,7 +97,7 @@ export class ViewerComponent { if (this.currentPage < this.totalPages) { this.currentPage++; this.displayPage = this.currentPage; - this.loadPage(this.currentPdf, this.currentPage); + this.loadPage(this.currentPdfDocument); } } @@ -121,7 +111,7 @@ export class ViewerComponent { if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) { this.currentPage = pageInput; - this.loadPage(this.currentPdf, this.currentPage); + this.loadPage(this.currentPdfDocument); } else { this.displayPage = this.currentPage; }