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" [multipleFiles]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button> (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> <div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer> </alfresco-viewer>
<file-uploading-dialog></file-uploading-dialog> <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 `urlFile` | *string* | | Url where to load the file | mandatory
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content | `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 ## 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({ @Component({
selector: 'my-app', 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> <div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`, </alfresco-viewer>`,
directives: [VIEWERCOMPONENT] directives: [VIEWERCOMPONENT]

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

@@ -1,7 +1,7 @@
{ {
"name": "ng2-alfresco-viewer", "name": "ng2-alfresco-viewer",
"description": "Alfresco documents viewer", "description": "Alfresco documents viewer",
"version": "0.1.7", "version": "0.1.8",
"author": "Eugenio Romano", "author": "Eugenio Romano",
"scripts": { "scripts": {
"typings": "typings install", "typings": "typings install",

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

@@ -1,111 +1,100 @@
<div *ngIf="showViewer">
<div *ngIf="overlayMode"> <div *ngIf="overlayMode">
<div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div> <div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
</div> </div>
<div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }"> <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }">
<!-- Start Layout --> <!-- Start Layout -->
<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"> <header class="mdl-layout__header">
<div class="mdl-layout__header-row"> <div class="mdl-layout__header-row">
<!-- File Title --> <!-- File Title -->
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{nameFile}}</span> <span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{nameFile}}</span>
<!-- Pagination toolbar start --> <!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination"> <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> <i class="icon material-icons">keyboard_arrow_left</i>
</div> </div>
<input id="viewer-pagenumber-input" #page <input id="viewer-pagenumber-input" #page
(keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}"> (keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
<span id="viewer-total-pages" class="left">/ {{totalPages}}</span> <span id="viewer-total-pages" class="left">/ {{totalPages}}</span>
<div id="viewer-next-page-button-button-input" (click)="nextPage()" class="left"> <div id="viewer-next-page-button-button-input" (click)="nextPage()" class="left">
<i class="icon material-icons" >keyboard_arrow_right</i> <i class="icon material-icons" >keyboard_arrow_right</i>
</div> </div>
</div> </div>
<!-- Pagination toolbar end --> <!-- Pagination toolbar end -->
<span class="vertical-divider"></span> <span class="vertical-divider"></span>
<div class="mdl-layout-spacer"></div> <div class="mdl-layout-spacer"></div>
<!-- Start Navigation --> <!-- Start Navigation -->
<nav class="mdl-navigation"> <nav class="mdl-navigation">
<div class="button-container"> <div id="viewer-toolbar-view-options">
<button <div class="button-container">
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="cazzo()"> <button
<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()">
</button> <i id="viewer-close-button" class="icon material-icons">close</i>
</div> </button>
</div>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable </nav>
mdl-textfield--floating-label mdl-textfield--align-right"> <!-- End Navigation -->
<label class="mdl-button mdl-js-button mdl-button--icon" </div>
for="waterfall-exp"> </header>
<i class="material-icons">search</i> <div class="mdl-layout__drawer">
</label> <span class="mdl-layout-title">Thumbnail</span>
</div>
<div class="mdl-textfield__expandable-holder"> <main class="mdl-layout__content">
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp"> <div class="page-content">
</div>
</div> <div class="mdl-grid">
</nav> <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<!-- End Navigation --> <div
class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
</div>
</header> <!-- Start Pdf Canvas -->
<div class="mdl-layout__drawer"> <div id="viewer-canvas-container" class="viewer-canvas-container">
<span class="mdl-layout-title">Thumbnail</span> <div id="viewer-the-canvas" style="border:1px solid black;"></div>
</div> </div>
<main class="mdl-layout__content"> <!-- End Pdf Canvas -->
<div class="page-content">
<div id="viewer-previous-page-button" class="previous-page-button">
<div class="mdl-grid"> <button
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
<div (click)="previousPage()">
class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> <i class="icon material-icons">keyboard_arrow_left</i>
</button>
<!-- Start Pdf Canvas --> </div>
<div id="viewer-canvas-container" class="viewer-canvas-container">
<div id="viewer-the-canvas" style="border:1px solid black;"></div> <div id="viewer-next-page-button" class="next-page-button">
</div> <button
<!-- End Pdf Canvas --> class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
(click)="nextPage()">
<div id="viewer-previous-page-button" class="previous-page-button"> <i class="icon material-icons">keyboard_arrow_right</i>
<button </button>
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" </div>
(click)="previousPage()">
<i class="icon material-icons">keyboard_arrow_left</i> </div>
</button> </div>
</div> <footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div id="viewer-next-page-button" class="next-page-button"> <ul class="mdl-mini-footer--link-list">
<button <li><a href="#">Footer link 1</a></li>
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" <li><a href="#">Footer link 2</a></li>
(click)="nextPage()"> <li><a href="#">Footer link 3</a></li>
<i class="icon material-icons">keyboard_arrow_right</i> </ul>
</button> </div>
</div> </footer>
</div> </div>
</div> </main>
<footer class="mdl-mini-footer"> </div>
<div class="mdl-mini-footer--left-section"> <!-- End Layout -->
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Footer link 1</a></li>
<li><a href="#">Footer link 2</a></li>
<li><a href="#">Footer link 3</a></li>
</ul>
</div>
</footer>
</div>
</main>
</div> </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. * 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 { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser';
import { ViewerComponent } from './viewer.component'; import { ViewerComponent } from './viewer.component';
import { PDFJSmock } from './assets/PDFJS.mock'; import { PDFJSmock } from './assets/PDFJS.mock';
@@ -31,8 +31,10 @@ describe('Ng2-alfresco-viewer', () => {
.then((fixture) => { .then((fixture) => {
let element = fixture.nativeElement; let element = fixture.nativeElement;
expect(element.querySelector('#viewer-the-canvas')).toBeDefined(); fixture.detectChanges();
expect(element.querySelector('#viewer-canvas-container')).toBeDefined();
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; component.overlayMode = true;
fixture.detectChanges(); 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) .createAsync(ViewerComponent)
.then((fixture) => { .then((fixture) => {
let element = fixture.nativeElement; 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) .createAsync(ViewerComponent)
.then((fixture) => { .then((fixture) => {
let element = fixture.nativeElement; let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
expect(element.querySelector('#viewer-total-pages')).toBeDefined(); expect(element.querySelector('#viewer-total-pages')).toBeDefined();
expect(element.querySelector('#viewer-previous-page-page-button-input')).toBeDefined(); expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
expect(element.querySelector('#viewer-next-page-page-button-input')).toBeDefined(); 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', () => { describe('Attribute', () => {
@@ -115,11 +155,57 @@ describe('Ng2-alfresco-viewer', () => {
.createAsync(ViewerComponent) .createAsync(ViewerComponent)
.then((fixture) => { .then((fixture) => {
let component = fixture.componentInstance; let component = fixture.componentInstance;
component.showViewer = true;
expect(() => { expect(() => {
component.urlFile = 'fake-url-file'; component.ngOnChanges();
}).toThrow(); }).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();
});
}));
}); });
}); });

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

@@ -15,7 +15,8 @@
* limitations under the License. * 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 PDFJS: any;
declare let __moduleName: string; declare let __moduleName: string;
@@ -34,31 +35,44 @@ export class ViewerComponent {
@Input() @Input()
overlayMode: boolean = false; overlayMode: boolean = false;
@Input()
showViewer: boolean = true;
@Output()
showViewerChange: EventEmitter<boolean> = new EventEmitter<boolean>();
nameFile: string; nameFile: string;
currentPdfDocument: any; currentPdfDocument: any;
currentPage: number; page: number;
displayPage: number; displayPage: number;
totalPages: number; totalPages: number;
ngOnInit() { pdfViewer: any;
if (!this.urlFile) {
throw new Error('Attribute urlFile is required');
}
}
ngOnChanges(changes: {[urlFile: string]: SimpleChange}) { renderingStates = {
if (this.urlFile) { FINISHED: 3 as number
this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile); };
this.urlFile = this.addAlfrescoTicket(this.urlFile); ngOnChanges(changes) {
console.log(changes);
return this.getPDFJS().getDocument(this.urlFile, null, null).then((pdfDocument) => { if (this.showViewer) {
this.currentPdfDocument = pdfDocument; if (!this.urlFile) {
this.totalPages = pdfDocument.numPages; throw new Error('Attribute urlFile is required');
this.currentPage = 1; }
this.displayPage = 1;
this.loadPage(this.currentPdfDocument); 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 documentContainer: any = document.getElementById('viewer-canvas-container');
let pdfViewer = new PDFJS.PDFViewer({ this.pdfViewer = new PDFJS.PDFViewer({
container: documentContainer container: documentContainer
}); });
pdfViewer.setDocument(pdfDocument); this.pdfViewer.setDocument(pdfDocument);
} }
/** /**
* load the previous page * load the previous page
*/ */
previousPage() { previousPage() {
if (this.currentPage > 1) { if (this.page > 1) {
this.currentPage--; this.page--;
this.displayPage = this.currentPage; this.displayPage = this.page;
this.loadPage(this.currentPdfDocument);
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 * load the next page
*/ */
nextPage() { nextPage() {
if (this.currentPage < this.totalPages) { if (this.page < this.totalPages) {
this.currentPage++; this.page++;
this.displayPage = this.currentPage; this.displayPage = this.page;
this.loadPage(this.currentPdfDocument); this.pdfViewer.getPageView(this.page - 1);
} }
} }
@@ -114,10 +135,10 @@ export class ViewerComponent {
let pageInput = parseInt(page, 10); let pageInput = parseInt(page, 10);
if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) { if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
this.currentPage = pageInput; this.page = pageInput;
this.loadPage(this.currentPdfDocument); this.loadPage(this.currentPdfDocument);
} else { } else {
this.displayPage = this.currentPage; this.displayPage = this.page;
} }
} }
@@ -129,6 +150,14 @@ export class ViewerComponent {
return url + '?alf_ticket=' + this.getAlfrescoTicket(); 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 * Get the token from the local storage
* @returns {string} * @returns {string}