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 overlay option and infinite scrolling added

Browse Source
This commit is contained in:
Eugenio Romano
2016-06-01 17:26:49 +01:00
parent 353f1286f5
commit 3b8914e0ed
9 changed files with 231 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell-ng2/app/app.component.css Normal file
View File

@@ -0,0 +1,3 @@
header {
z-index: 1;
}

1
demo-shell-ng2/app/app.component.ts
View File

@@ -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]
})

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

@@ -1,141 +1,138 @@
<div *ngIf="!fileShowed">
<alfresco-upload-drag-area
[showUploadDialog]="true"
currentFolderPath="{{absolutePath}}"
uploaddirectory="{{relativePath}}"
(onSuccess)="refreshDocumentList($event)">
<alfresco-document-list
#documentList
[currentFolderPath]="absolutePath"
[breadcrumb]="breadcrumb"
(itemClick)="showFile($event)"
(folderChange)="onFolderChanged($event)">
<content-columns>
<content-column source="$thumbnail"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
class="full-width name-column">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
source="createdByUser.displayName">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
</content-column>
</content-columns>
<alfresco-upload-drag-area
[showUploadDialog]="true"
currentFolderPath="{{absolutePath}}"
uploaddirectory="{{relativePath}}"
(onSuccess)="refreshDocumentList($event)">
<alfresco-document-list
#documentList
[currentFolderPath]="absolutePath"
[breadcrumb]="breadcrumb"
(itemClick)="showFile($event)"
(folderChange)="onFolderChanged($event)">
<content-columns>
<content-column source="$thumbnail"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
source="name"
class="full-width name-column">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
source="createdByUser.displayName">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
source="createdAt">
</content-column>
</content-columns>
<content-actions>
<!-- folder actions -->
<content-action
target="folder"
type="button"
icon="delete"
handler="system1">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete">
</content-action>
<content-actions>
<!-- folder actions -->
<content-action
target="folder"
type="button"
icon="delete"
handler="system1">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</content-action>
<content-action
target="folder"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete">
</content-action>
<!-- document actions -->
<content-action
target="document"
type="button"
icon="account_circle"
handler="my-handler">
</content-action>
<content-action
target="document"
type="button"
icon="cloud_download"
handler="download">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete">
</content-action>
</content-actions>
</alfresco-document-list>
</alfresco-upload-drag-area>
<!-- document actions -->
<content-action
target="document"
type="button"
icon="account_circle"
handler="my-handler">
</content-action>
<content-action
target="document"
type="button"
icon="cloud_download"
handler="download">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</content-action>
<content-action
target="document"
type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete">
</content-action>
</content-actions>
</alfresco-document-list>
</alfresco-upload-drag-area>
<div class="p-10">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
<span class="mdl-checkbox__label">Breadcrumb</span>
</label>
</div>
<div class="p-10">
<ul>
<li>Current relative path: {{relativePath}}</li>
<li>Current absolute path: {{absolutePath}}</li>
<li>
<button (click)="documentList.changePath('/Sites/swsdp/documentLibrary/Agency Files/Contracts')">Go to agency contracts</button>
</li>
<li>
<button (click)="documentList.changePath('')">Got to site root</button>
</li>
<li>
<button (click)="documentList.changePath('/')">Go to root</button>
</li>
</ul>
</div>
<h5>Single file upload</h5>
<alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<h5>Folder upload</h5>
<alfresco-upload-button data-automation-id="folder-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
[uploadFolders]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<h5>Multiple file upload</h5>
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
<alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
acceptedFilesType="{{acceptedFilesType}}"
[multipleFiles]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<div class="p-10">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
<span class="mdl-checkbox__label">Breadcrumb</span>
</label>
</div>
<div *ngIf="fileShowed">
<alfresco-viewer [urlFile]="(urlFile)" [hidden]="!fileShowed" >
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>
<div class="p-10">
<ul>
<li>Current relative path: {{relativePath}}</li>
<li>Current absolute path: {{absolutePath}}</li>
<li>
<button (click)="documentList.changePath('/Sites/swsdp/documentLibrary/Agency Files/Contracts')">Go to agency contracts</button>
</li>
<li>
<button (click)="documentList.changePath('')">Got to site root</button>
</li>
<li>
<button (click)="documentList.changePath('/')">Go to root</button>
</li>
</ul>
</div>
<h5>Single file upload</h5>
<alfresco-upload-button data-automation-id="single-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<h5>Folder upload</h5>
<alfresco-upload-button data-automation-id="folder-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
[uploadFolders]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<h5>Multiple file upload</h5>
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
<alfresco-upload-button data-automation-id="multiple-file-upload" uploaddirectory="{{relativePath}}" currentFolderPath="{{absolutePath}}"
acceptedFilesType="{{acceptedFilesType}}"
[multipleFiles]="true"
(onSuccess)="refreshDocumentList($event)"></alfresco-upload-button>
<alfresco-viewer [urlFile]="(urlFile)" [overlayMode]="true" [hidden]="!fileShowed" >
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>

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

@@ -74,7 +74,7 @@ Make sure your systemjs.config has the following configuration:
#### Basic usage
```html
<ng2-alfresco-viewer [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
```
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: ` <alfresco-viewer [urlFile]="'local_filename.pdf'">
template: ` <alfresco-viewer [overlayMode]="true" [urlFile]="'local_filename.pdf'">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`,
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

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 [urlFile]="'localTestFile.pdf'">
template: ` <alfresco-viewer [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`,
directives: [VIEWERCOMPONENT]

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

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

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

@@ -1,14 +1,19 @@
<div class="toolbar-container">
<div *ngIf="overlayMode">
<div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
</div>
<div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }">
<!-- Start Layout -->
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- File Title -->
<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-previous-page-page-button-input" class="left" (click)="previousPage()">
<i class="icon material-icons">keyboard_arrow_left</i>
@@ -22,7 +27,7 @@
<i class="icon material-icons" >keyboard_arrow_right</i>
</div>
</div>
<!-- pagination toolbar end -->
<!-- Pagination toolbar end -->
<span class="vertical-divider"></span>
@@ -66,8 +71,8 @@
class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<!-- Start Pdf Canvas -->
<div id="viewer-canvas-container">
<canvas id="viewer-the-canvas" style="border:1px solid black;"></canvas>
<div id="viewer-canvas-container" class="viewer-canvas-container">
<div id="viewer-the-canvas" style="border:1px solid black;"></div>
</div>
<!-- End Pdf Canvas -->
@@ -103,5 +108,4 @@
</main>
</div>
<!-- End Layout -->
</div>

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

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

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

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