inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #247 from Alfresco/dev-eromano-226

Browse Source 
Dev eromano 226
This commit is contained in:
Denys Vuika 2016-06-21 16:16:16 +01:00 committed by GitHub
commit b18462ba45
12 changed files with 591 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts
View File

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

35
ng2-components/ng2-alfresco-viewer/src/assets/event.mock.ts Normal file
View File

@ -0,0 +1,35 @@
/*!
* @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);
}
static resizeMobileView() {
window.innerWidth = 320;
window.innerHeight = 568;
window.dispatchEvent(new Event('resize'));
}
}

4
ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css
View File

@ -16,3 +16,7 @@
align-items: center;
justify-content: center;
}
.full_width{
width :100% !important;
}

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

@ -1,10 +1,10 @@
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
<div class="viewer-download-text mdl-card__supporting-text">
<div class="viewer-download-text mdl-card__supporting-text full_width">
<h4>File <span>{{nameFile}}</span> is an unsupported format</h4>
</div>
<div class="center-element mdl-card__actions">
<button id="viewer-download-button" class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
<button id="viewer-download-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
<i class="viewer-margin-cloud-download material-icons">cloud_download</i> Download
</button>
</div>

48
ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css
View File

@ -2,21 +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;
}
: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;
position: relative;
color : #fff;
}
.left {
@ -34,6 +42,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);

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

@ -1,11 +1,11 @@
<!-- Start Pdf Canvas -->
<div id="viewer-pdf-container" class="center-element viewer-pdf-container" (keypress)=eventHandler()>
<div id="viewer-viewerPdf" class="center-element" >
<div id="viewer-loader" class="center-element" >
<div>
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div id="viewer-loader-text" class="viewer-loader-text">Loading...</div>
<div id="viewer-pdf-container" class="viewer-pdf-container" (keypress)=eventHandler() (window:resize)="onResize($event)">
<div id="viewer-viewerPdf" class="pdfViewer" >
<div id="loader-container" class="loader-container">
<div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="loader-text" class="loader-text">Loading <span>{{nameFile}}</span> ...</div>
</div >
</div>
</div>
</div>
@ -24,8 +24,16 @@
<div id="viewer-total-pages" class="left viewer-total-pages">/ {{totalPages}}</div>
</div>
<div id="viewer-next-page-button" (click)="nextPage()" class="button-page left">
<div id="viewer-next-page-button" class="button-page left" (click)="nextPage()" >
<i class="icon material-icons" >keyboard_arrow_right</i>
</div>
</div>
<!-- Pagination toolbar end -->
<!-- Command toolbar start -->
<div id="viewer-toolbar-command" class="viewer-toolbar-command mdl-cell--hide-tablet mdl-cell--hide-phone">
<div id="viewer-scale-page-button" class="button-page left" (click)="pageFit()">
<i class="icon material-icons">zoom_out_map</i>
</div>
</div>
<!-- Command toolbar end -->

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

@ -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,
@ -51,11 +52,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)
@ -104,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) => {
@ -119,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) => {
@ -133,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) => {
@ -178,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();
});
}));
});
});

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

@ -24,13 +24,16 @@ 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 {
@Input()
urlFile: string;
@Input()
nameFile: string;
currentPdfDocument: any;
page: number;
displayPage: number;
@ -38,9 +41,10 @@ export class PdfViewerComponent {
pdfViewer: any;
renderingStates = {
FINISHED: 3 as number
};
currentScaleMode: string = 'auto';
currentScale: number;
MAX_AUTO_SCALE: number = 1.25;
ngOnChanges(changes) {
if (!this.urlFile) {
@ -55,6 +59,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);
});
@ -73,8 +82,9 @@ export class PdfViewerComponent {
initPDFViewer(pdfDocument: any) {
PDFJS.verbosity = 5;
PDFJS.disableWorker = true;
let documentContainer: any = document.getElementById('viewer-pdf-container');
let documentContainer = document.getElementById('viewer-pdf-container');
let viewer: any = document.getElementById('viewer-viewerPdf');
this.pdfViewer = new PDFJS.PDFViewer({
@ -85,6 +95,107 @@ export class PdfViewerComponent {
this.pdfViewer.setDocument(pdfDocument);
}
/**
* Method to scale the page current support implementation
* @param {string} scaleMode - new scale mode
*/
scalePage(scaleMode) {
this.currentScaleMode = scaleMode;
if (this.pdfViewer) {
let documentContainer = document.getElementById('viewer-pdf-container');
let currentPage = this.pdfViewer._pages[this.pdfViewer._currentPageNumber];
let padding = 20;
let pageWidthScale = (documentContainer.clientWidth - padding) / currentPage.width * currentPage.scale;
let pageHeightScale = (documentContainer.clientHeight - padding) / 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);
});
this.pdfViewer.update();
}
}
/**
* 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(this.currentScaleMode);
}
/**
* Method triggered when the page is resized
*/
pageFit() {
this.scalePage('page-fit');
}
/**
* load the previous page
*/
@ -94,12 +205,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
//}
}
}
@ -125,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;

202
ng2-components/ng2-alfresco-viewer/src/pdfViewerHost.component.css Normal file
View File

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

4
ng2-components/ng2-alfresco-viewer/src/viewer.component.css
View File

@ -11,15 +11,15 @@
flex-direction: row;
flex-wrap: wrap;
flex: 1;
margin: 20px;
}
.mdl-grid {
width: 100vw;
padding: 0px !important;
}
.viewer-name-file {
width: 20%;
width: 50%;
height: 21px;
overflow: hidden !important;
text-overflow: ellipsis;

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

@ -20,37 +20,35 @@
<!-- Start Navigation -->
<nav class="mdl-navigation">
<div id="viewer-toolbar-view-options">
<div class="button-container">
<button
class="mdl-color--black 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>
<button
class="mdl-color--black 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>
</nav>
<!-- End Navigation -->
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Thumbnail</span>
</div>
<!--<div class="mdl-layout__drawer">-->
<!--<span class="mdl-layout-title">Thumbnail</span>-->
<!--</div>-->
<main id="page-content" class="mdl-layout__content">
<div class="mdl-grid">
<div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
<button *ngIf="false"
class="center-element mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
(click)="previousFile()">
<i class="icon material-icons ">keyboard_arrow_left</i>
</button>
</div>
<!--<div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="previousFile()">-->
<!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
<!--</button>-->
<!--</div>-->
<div class="center-element mdl-cell mdl-cell--8-col" >
<div class="center-element mdl-cell mdl-cell--12-col" >
<div id="viewer-content-container" class="viewer-content-container mdl-cell" >
<!-- Start View Switch-->
<div *ngIf="isPdf()">
<pdf-viewer [urlFile]="urlFile" ></pdf-viewer>
<pdf-viewer [urlFile]="urlFile" [nameFile]="displayName" ></pdf-viewer>
</div>
<div *ngIf="isImage()" ><img src="{{urlFile}}" id="viewer-image" class="center-element viewer-image"/></div>
<div *ngIf="!supportedExtension()">
@ -61,13 +59,13 @@
</div>
<div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
<button *ngIf="false"
class="center-element mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
(click)="nextFile()">
<i class="icon material-icons">keyboard_arrow_right</i>
</button>
</div>
<!--<div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="nextFile()">-->
<!--<i class="icon material-icons">keyboard_arrow_right</i>-->
<!--</button>-->
<!--</div>-->
</div>
</main>

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

@ -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', () => {