inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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({ @Component({
selector: 'my-app', selector: 'my-app',
templateUrl: 'app/app.component.html', templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL], directives: [ALFRESCO_SEARCH_DIRECTIVES, ROUTER_DIRECTIVES, AuthRouterOutlet, MDL],
pipes: [AlfrescoPipeTranslate] 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
<alfresco-upload-drag-area [showUploadDialog]="true"
[showUploadDialog]="true" currentFolderPath="{{absolutePath}}"
currentFolderPath="{{absolutePath}}" uploaddirectory="{{relativePath}}"
uploaddirectory="{{relativePath}}" (onSuccess)="refreshDocumentList($event)">
(onSuccess)="refreshDocumentList($event)"> <alfresco-document-list
<alfresco-document-list #documentList
#documentList [currentFolderPath]="absolutePath"
[currentFolderPath]="absolutePath" [breadcrumb]="breadcrumb"
[breadcrumb]="breadcrumb" (itemClick)="showFile($event)"
(itemClick)="showFile($event)" (folderChange)="onFolderChanged($event)">
(folderChange)="onFolderChanged($event)"> <content-columns>
<content-columns> <content-column source="$thumbnail"></content-column>
<content-column source="$thumbnail"></content-column> <content-column
<content-column title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}" source="name"
source="name" class="full-width name-column">
class="full-width name-column"> </content-column>
</content-column> <content-column
<content-column title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}" source="createdByUser.displayName">
source="createdByUser.displayName"> </content-column>
</content-column> <content-column
<content-column title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}" source="createdAt">
source="createdAt"> </content-column>
</content-column> </content-columns>
</content-columns>
<content-actions> <content-actions>
<!-- folder actions --> <!-- folder actions -->
<content-action <content-action
target="folder" target="folder"
type="button" type="button"
icon="delete" icon="delete"
handler="system1"> handler="system1">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1"> handler="system1">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)"> (execute)="myFolderAction1($event)">
</content-action> </content-action>
<content-action <content-action
target="folder" target="folder"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete"> handler="delete">
</content-action> </content-action>
<!-- document actions --> <!-- document actions -->
<content-action <content-action
target="document" target="document"
type="button" type="button"
icon="account_circle" icon="account_circle"
handler="my-handler"> handler="my-handler">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="button" type="button"
icon="cloud_download" icon="cloud_download"
handler="download"> handler="download">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download"> handler="download">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2"> handler="system2">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)"> (execute)="myCustomAction1($event)">
</content-action> </content-action>
<content-action <content-action
target="document" target="document"
type="menu" type="menu"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}" title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete"> handler="delete">
</content-action> </content-action>
</content-actions> </content-actions>
</alfresco-document-list> </alfresco-document-list>
</alfresco-upload-drag-area> </alfresco-upload-drag-area>
<div class="p-10"> <div class="p-10">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> <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"> <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
<span class="mdl-checkbox__label">Breadcrumb</span> <span class="mdl-checkbox__label">Breadcrumb</span>
</label> </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> </div>
<div *ngIf="fileShowed">
<alfresco-viewer [urlFile]="(urlFile)" [hidden]="!fileShowed" > <div class="p-10">
<div class="mdl-spinner mdl-js-spinner is-active"></div> <ul>
</alfresco-viewer> <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> </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 #### Basic usage
```html ```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 : 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({ @Component({
selector: 'my-app', 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> <div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`, </alfresco-viewer>`,
directives: [VIEWERCOMPONENT] directives: [VIEWERCOMPONENT]
@@ -101,16 +101,14 @@ bootstrap(MyDemoApp, [
]); ]);
``` ```
#### Options #### Options
Attribute | Options | Default | Description Attribute | Options | Default | Description
--- | --- | --- | --- --- | --- | --- | ---
`foo` | *string* | `bar` | Lorem ipsum dolor. `urlFile` | *string* | | Url where load the file
--- | --- | --- | ---
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content
Method | Parameters | Returns | Description
--- | --- | --- | ---
`methodName()` | None. | void | Lorem ipsum dolor.
## 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 [urlFile]="'localTestFile.pdf'"> template: ` <alfresco-viewer [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]

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

@@ -2,10 +2,6 @@
padding: 0 40px; padding: 0 40px;
} }
.page-content {
background: #3E3E3E;
}
.previous-page-button { .previous-page-button {
top: 50%; top: 50%;
left: 7%; left: 7%;
@@ -36,3 +32,34 @@
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis; 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 --> <!-- Start Layout -->
<div class="mdl-layout mdl-js-layout"> <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll"> <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-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>
@@ -22,7 +27,7 @@
<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>
@@ -66,8 +71,8 @@
class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<!-- Start Pdf Canvas --> <!-- Start Pdf Canvas -->
<div id="viewer-canvas-container"> <div id="viewer-canvas-container" class="viewer-canvas-container">
<canvas id="viewer-the-canvas" style="border:1px solid black;"></canvas> <div id="viewer-the-canvas" style="border:1px solid black;"></div>
</div> </div>
<!-- End Pdf Canvas --> <!-- End Pdf Canvas -->
@@ -103,5 +108,4 @@
</main> </main>
</div> </div>
<!-- End Layout --> <!-- End Layout -->
</div> </div>

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

@@ -30,7 +30,23 @@ describe('Ng2-alfresco-viewer', () => {
.createAsync(ViewerComponent) .createAsync(ViewerComponent)
.then((fixture) => { .then((fixture) => {
let element = fixture.nativeElement; 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) => { .then((fixture) => {
let element = fixture.nativeElement; let element = fixture.nativeElement;
let component = fixture.componentInstance; let component = fixture.componentInstance;
component.urlFile = 'fake-url-file';
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
component.ngOnInit().then((resolve) => { component.ngOnChanges().then((resolve) => {
fixture.detectChanges();
expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10'); expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
resolve(); resolve();
}); });
}); });
@@ -81,9 +97,14 @@ describe('Ng2-alfresco-viewer', () => {
let element = fixture.nativeElement; let element = fixture.nativeElement;
let component = fixture.componentInstance; let component = fixture.componentInstance;
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
component.urlFile = 'fake-url-file';
fixture.detectChanges(); 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() @Input()
urlFile: string; urlFile: string;
nameFile: string; @Input()
overlayMode: boolean = false;
currentPdf: any; nameFile: string;
currentPdfDocument: any;
currentPage: number; currentPage: number;
displayPage: number; displayPage: number;
totalPages: number; totalPages: number;
@@ -44,12 +46,12 @@ export class ViewerComponent {
this.urlFile = this.addAlfrescoTicket(this.urlFile); this.urlFile = this.addAlfrescoTicket(this.urlFile);
return this.getPDFJS().getDocument(this.urlFile).then((pdf) => { return this.getPDFJS().getDocument(this.urlFile, null, null).then((pdfDocument) => {
this.currentPdf = pdf; this.currentPdfDocument = pdfDocument;
this.totalPages = pdf.numPages; this.totalPages = pdfDocument.numPages;
this.currentPage = 1; this.currentPage = 1;
this.displayPage = 1; this.displayPage = 1;
this.loadPage(this.currentPdf, this.currentPage); this.loadPage(this.currentPdfDocument);
}); });
} else { } else {
console.log('Url File is a required value'); console.log('Url File is a required value');
@@ -64,29 +66,17 @@ export class ViewerComponent {
return PDFJS; return PDFJS;
} }
loadPage(pdf: any, numberPage: number) { loadPage(pdfDocument: any) {
pdf.getPage(numberPage).then((page) => {
console.log(page.numPages); PDFJS.verbosity = 5;
let scale = 1.5; let documentContainer: any = document.getElementById('viewer-canvas-container');
let viewport = page.getViewport(scale);
let canvas: any = document.getElementById('viewer-the-canvas');
if (canvas) { let pdfViewer = new PDFJS.PDFViewer({
let context = canvas.getContext('2d'); container: documentContainer
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
let renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}
}); });
pdfViewer.setDocument(pdfDocument);
} }
/** /**
@@ -96,7 +86,7 @@ export class ViewerComponent {
if (this.currentPage > 1) { if (this.currentPage > 1) {
this.currentPage--; this.currentPage--;
this.displayPage = 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) { if (this.currentPage < this.totalPages) {
this.currentPage++; this.currentPage++;
this.displayPage = 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) { if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
this.currentPage = pageInput; this.currentPage = pageInput;
this.loadPage(this.currentPdf, this.currentPage); this.loadPage(this.currentPdfDocument);
} else { } else {
this.displayPage = this.currentPage; this.displayPage = this.currentPage;
} }