inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

#68 close button

Browse Source
This commit is contained in:
Eugenio Romano
2016-06-02 12:58:49 +01:00
parent 4f83354712
commit 7acc96c61c
7 changed files with 257 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell-ng2/app/components/files/files.component.html
View File

@@ -133,7 +133,7 @@
[multipleFiles]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<alfresco-viewer [urlFile]="(urlFile)" [overlayMode]="true" [hidden]="!fileShowed" >
<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>
<file-uploading-dialog></file-uploading-dialog>

2
ng2-components/ng2-alfresco-viewer/README.md
View File

@@ -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

2
ng2-components/ng2-alfresco-viewer/demo/src/main.ts
View File

@@ -21,7 +21,7 @@ import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
@Component({
selector: 'my-app',
template: ` <alfresco-viewer [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`,
directives: [VIEWERCOMPONENT]

2
ng2-components/ng2-alfresco-viewer/package.json
View File

@@ -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",

23
ng2-components/ng2-alfresco-viewer/src/viewer.component.html
View File

@@ -1,4 +1,4 @@
<div *ngIf="showViewer">
<div *ngIf="overlayMode">
<div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
</div>
@@ -15,7 +15,7 @@
<!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination">
<div id="viewer-previous-page-page-button-input" class="left" (click)="previousPage()">
<div id="viewer-previous-page-button-input" class="left" (click)="previousPage()">
<i class="icon material-icons">keyboard_arrow_left</i>
</div>
@@ -35,28 +35,16 @@
<!-- Start Navigation -->
<nav class="mdl-navigation">
<div id="viewer-toolbar-view-options">
<div class="button-container">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="cazzo()">
<i id="viewer-print-button" class="icon material-icons">print</i>
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
<i id="viewer-close-button" class="icon material-icons">close</i>
</button>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
</div>
</div>
</nav>
<!-- End Navigation -->
</div>
</header>
<div class="mdl-layout__drawer">
@@ -109,3 +97,4 @@
</div>
<!-- End Layout -->
</div>
</div>

104
ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
View File

@@ -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();
});
}));
});
});

69
ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
View File

@@ -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,33 +35,46 @@ export class ViewerComponent {
@Input()
overlayMode: boolean = false;
@Input()
showViewer: boolean = true;
@Output()
showViewerChange: EventEmitter<boolean> = new EventEmitter<boolean>();
nameFile: string;
currentPdfDocument: any;
currentPage: number;
page: number;
displayPage: number;
totalPages: number;
ngOnInit() {
pdfViewer: any;
renderingStates = {
FINISHED: 3 as number
};
ngOnChanges(changes) {
console.log(changes);
if (this.showViewer) {
if (!this.urlFile) {
throw new Error('Attribute urlFile is required');
}
}
ngOnChanges(changes: {[urlFile: string]: SimpleChange}) {
if (this.urlFile) {
this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile);
this.urlFile = this.addAlfrescoTicket(this.urlFile);
let urlFileTicket = this.addAlfrescoTicket(this.urlFile);
return this.getPDFJS().getDocument(this.urlFile, null, null).then((pdfDocument) => {
return this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
this.currentPdfDocument = pdfDocument;
this.totalPages = pdfDocument.numPages;
this.currentPage = 1;
this.page = 1;
this.displayPage = 1;
this.loadPage(this.currentPdfDocument);
});
}
}
}
/**
* return the PDFJS global object (exist to facilitate the mock of PDFJS in the test)
@@ -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}