diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 4b8361fc9b..21f76c9e68 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -133,7 +133,7 @@ [multipleFiles]="true" (onSuccess)="refreshDocumentList($event)"> - + \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index 0e7f87257d..40df2bf81e 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -108,6 +108,8 @@ Attribute | Options | Default | Description | Mandatory --- | --- | --- | --- | --- `urlFile` | *string* | | Url where to load the file | mandatory `overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content | +`showViewer` | *boolean* | `true` | Hide o show the viewer | + ## 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 eced87377d..b6e6d8257f 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/package.json b/ng2-components/ng2-alfresco-viewer/package.json index ebae9935fa..77edb4029f 100644 --- a/ng2-components/ng2-alfresco-viewer/package.json +++ b/ng2-components/ng2-alfresco-viewer/package.json @@ -1,7 +1,7 @@ { "name": "ng2-alfresco-viewer", "description": "Alfresco documents viewer", - "version": "0.1.7", + "version": "0.1.8", "author": "Eugenio Romano", "scripts": { "typings": "typings install", diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index a08219d2d9..60e6a17b65 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -1,111 +1,100 @@ - -
-
-
- -
- - -
-
-
- - - {{nameFile}} - - -
-
- keyboard_arrow_left -
- - - / {{totalPages}} - -
- keyboard_arrow_right -
-
- - - - -
- - - - - -
-
-
- Thumbnail -
-
-
- -
-
-
- - -
-
-
- - -
- -
- -
- -
- -
-
- - -
-
+
+
+
+
+ +
+ + +
+
+
+ + + {{nameFile}} + + +
+
+ keyboard_arrow_left +
+ + + / {{totalPages}} + +
+ keyboard_arrow_right +
+
+ + + + +
+ + + + +
+
+
+ Thumbnail +
+
+
+ +
+
+
+ + +
+
+
+ + +
+ +
+ +
+ +
+ +
+
+ + +
+
+
+
-
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 8a3e4ffdc3..ab1aceae93 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders, beforeEach } from 'angular2/testing'; +import { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders } from 'angular2/testing'; import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser'; import { ViewerComponent } from './viewer.component'; import { PDFJSmock } from './assets/PDFJS.mock'; @@ -31,8 +31,10 @@ describe('Ng2-alfresco-viewer', () => { .then((fixture) => { let element = fixture.nativeElement; - expect(element.querySelector('#viewer-the-canvas')).toBeDefined(); - expect(element.querySelector('#viewer-canvas-container')).toBeDefined(); + fixture.detectChanges(); + + expect(element.querySelector('#viewer-the-canvas')).not.toBeNull(); + expect(element.querySelector('#viewer-canvas-container')).not.toBeNull(); }); })); @@ -46,7 +48,8 @@ describe('Ng2-alfresco-viewer', () => { component.overlayMode = true; fixture.detectChanges(); - expect(element.querySelector('#viewer-shadow-transparent')).toBeDefined(); + + expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull(); }); })); @@ -55,8 +58,11 @@ describe('Ng2-alfresco-viewer', () => { .createAsync(ViewerComponent) .then((fixture) => { let element = fixture.nativeElement; - expect(element.querySelector('#viewer-previous-page-button')).toBeDefined(); - expect(element.querySelector('#viewer-next-page-button')).toBeDefined(); + + fixture.detectChanges(); + + expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); + expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); })); @@ -65,11 +71,14 @@ describe('Ng2-alfresco-viewer', () => { .createAsync(ViewerComponent) .then((fixture) => { let element = fixture.nativeElement; + + fixture.detectChanges(); + expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); expect(element.querySelector('#viewer-total-pages')).toBeDefined(); - expect(element.querySelector('#viewer-previous-page-page-button-input')).toBeDefined(); - expect(element.querySelector('#viewer-next-page-page-button-input')).toBeDefined(); + expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); + expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); })); @@ -107,6 +116,37 @@ describe('Ng2-alfresco-viewer', () => { }); }); })); + + it('Close button should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + 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-close-button')).not.toBeNull(); + }); + })); + + it('if showViewer is false the viewer should be hide', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + let element = fixture.nativeElement; + let component = fixture.componentInstance; + spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + component.showViewer = false; + + fixture.detectChanges(); + + expect(element.querySelector('#viewer-the-canvas')).toBeNull(); + expect(element.querySelector('#viewer-canvas-container')).toBeNull(); + }); + })); }); describe('Attribute', () => { @@ -115,11 +155,57 @@ describe('Ng2-alfresco-viewer', () => { .createAsync(ViewerComponent) .then((fixture) => { let component = fixture.componentInstance; + component.showViewer = true; expect(() => { - component.urlFile = 'fake-url-file'; + component.ngOnChanges(); }).toThrow(); }); })); + + it('showViewer default value should be true', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + + expect(component.showViewer).toBe(true); + }); + })); + + it('if showViewer value is false the viewer should be hide', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + let component = fixture.componentInstance; + let element = fixture.nativeElement; + component.urlFile = 'fake-url-file'; + component.showViewer = false; + + fixture.detectChanges(); + expect(element.querySelector('#viewer-the-canvas')).toBeNull(); + expect(element.querySelector('#viewer-canvas-container')).toBeNull(); + }); + })); + }); + + describe('User interaction', () => { + it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ViewerComponent) + .then((fixture) => { + 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-canvas-container')).not.toBeNull(); + element.querySelector('#viewer-close-button').click(); + fixture.detectChanges(); + expect(element.querySelector('#viewer-canvas-container')).toBeNull(); + + }); + })); }); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index e5e884b9f3..c7b38bae52 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts @@ -15,7 +15,8 @@ * limitations under the License. */ -import { Component, Input, SimpleChange } from 'angular2/core'; +import { Component, Input, Output } from 'angular2/core'; +import { EventEmitter } from 'angular2/src/facade/async'; declare let PDFJS: any; declare let __moduleName: string; @@ -34,31 +35,44 @@ export class ViewerComponent { @Input() overlayMode: boolean = false; + @Input() + showViewer: boolean = true; + @Output() + showViewerChange: EventEmitter = new EventEmitter(); + nameFile: string; currentPdfDocument: any; - currentPage: number; + page: number; displayPage: number; totalPages: number; - ngOnInit() { - if (!this.urlFile) { - throw new Error('Attribute urlFile is required'); - } - } + pdfViewer: any; - ngOnChanges(changes: {[urlFile: string]: SimpleChange}) { - if (this.urlFile) { - this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile); + renderingStates = { + FINISHED: 3 as number + }; - this.urlFile = this.addAlfrescoTicket(this.urlFile); + ngOnChanges(changes) { + console.log(changes); - 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.currentPdfDocument); - }); + if (this.showViewer) { + if (!this.urlFile) { + throw new Error('Attribute urlFile is required'); + } + + if (this.urlFile) { + this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile); + + let urlFileTicket = this.addAlfrescoTicket(this.urlFile); + + return this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => { + this.currentPdfDocument = pdfDocument; + this.totalPages = pdfDocument.numPages; + this.page = 1; + this.displayPage = 1; + this.loadPage(this.currentPdfDocument); + }); + } } } @@ -76,21 +90,28 @@ export class ViewerComponent { let documentContainer: any = document.getElementById('viewer-canvas-container'); - let pdfViewer = new PDFJS.PDFViewer({ + this.pdfViewer = new PDFJS.PDFViewer({ container: documentContainer }); - pdfViewer.setDocument(pdfDocument); + this.pdfViewer.setDocument(pdfDocument); } /** * load the previous page */ previousPage() { - if (this.currentPage > 1) { - this.currentPage--; - this.displayPage = this.currentPage; - this.loadPage(this.currentPdfDocument); + if (this.page > 1) { + this.page--; + this.displayPage = this.page; + + let currentPage = this.pdfViewer.getPageView(this.page - 1); + + if (currentPage.renderingState === this.renderingStates.FINISHED) { + // remove loader + } else { + // add loader + } } } @@ -98,10 +119,10 @@ export class ViewerComponent { * load the next page */ nextPage() { - if (this.currentPage < this.totalPages) { - this.currentPage++; - this.displayPage = this.currentPage; - this.loadPage(this.currentPdfDocument); + if (this.page < this.totalPages) { + this.page++; + this.displayPage = this.page; + this.pdfViewer.getPageView(this.page - 1); } } @@ -114,10 +135,10 @@ export class ViewerComponent { let pageInput = parseInt(page, 10); if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) { - this.currentPage = pageInput; + this.page = pageInput; this.loadPage(this.currentPdfDocument); } else { - this.displayPage = this.currentPage; + this.displayPage = this.page; } } @@ -129,6 +150,14 @@ export class ViewerComponent { return url + '?alf_ticket=' + this.getAlfrescoTicket(); } + /** + * close the viewer + */ + close() { + this.showViewer = false; + this.showViewerChange.emit(this.showViewer); + } + /** * Get the token from the local storage * @returns {string}