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

Merge pull request #519 from Alfresco/dev-eromano-506

Browse Source 
Dev eromano 506
This commit is contained in:
Maurizio Vitale
2016-08-12 11:03:09 +01:00
committed by GitHub
parent 79ecf49b4a 94b63a258d
commit fd3aff0b0f
19 changed files with 249 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.travis.yml
View File

@@ -32,7 +32,7 @@ env:
- MODULE=ng2-activiti-tasklist
before_script:
- if ([ "$MODULE" != "ng2-alfresco-core" ] && [ "$MODULE" != "ng2-alfresco-viewer" ]); then
- if ([ "$MODULE" != "ng2-alfresco-core" ]); then
(cd ng2-components/ng2-alfresco-core; npm install; npm link);
fi
- if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then
@@ -42,7 +42,7 @@ before_script:
(cd ng2-components/ng2-activiti-form; npm link ng2-alfresco-core; npm install; npm link);
fi
- cd ng2-components/$MODULE;
- if ([ "$MODULE" != "ng2-alfresco-core" ] && [ "$MODULE" != "ng2-alfresco-viewer" ]); then
- if ([ "$MODULE" != "ng2-alfresco-core" ]); then
npm link ng2-alfresco-core;
fi
- if ([ "$MODULE" == "ng2-alfresco-documentlist" ] || [ "$MODULE" == "ng2-alfresco-webscript" ] || [ "$MODULE" == "ng2-activiti-processlist" ] || [ "$MODULE" == "ng2-activiti-tasklist" ]); then

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

@@ -177,9 +177,7 @@
</div>
<alfresco-viewer [(showViewer)]="fileShowed"
[urlFile]="urlFile"
[fileName]="fileName"
[mimeType]="mimeType"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>

8
demo-shell-ng2/app/components/files/files.component.ts
View File

@@ -58,9 +58,7 @@ declare let __moduleName: string;
export class FilesComponent implements OnInit {
currentPath: string = '/Sites/swsdp/documentLibrary';
urlFile: string;
fileName: string;
mimeType: string;
fileNodeId: any;
fileShowed: boolean = false;
multipleFileUpload: boolean = false;
folderUpload: boolean = false;
@@ -92,9 +90,7 @@ export class FilesComponent implements OnInit {
showFile(event) {
if (event.value.entry.isFile) {
this.fileName = event.value.entry.name;
this.mimeType = event.value.entry.content.mimeType;
this.urlFile = this.contentService.getContentUrl(event.value);
this.fileNodeId = event.value.entry.id;
this.fileShowed = true;
} else {
this.fileShowed = false;

4
demo-shell-ng2/app/components/search/search-bar.component.html
View File

@@ -1,6 +1,8 @@
<alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
(searchChange)="searchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
<alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>

5
demo-shell-ng2/app/components/search/search.component.ts
View File

@@ -56,15 +56,14 @@ export class SearchComponent {
previewName: string;
previewMimeType: string;
previewActive: boolean = false;
fileNodeId: string;
constructor(public contentService: AlfrescoContentService) {
}
onFileClicked(event) {
if (event.value.entry.isFile) {
this.previewName = event.value.entry.name;
this.previewMimeType = event.value.entry.content.mimeType;
this.previewContentUrl = this.contentService.getContentUrl(event.value);
this.fileNodeId = event.value.entry.id;
this.previewActive = true;
}
}

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

@@ -48,11 +48,13 @@ Add the following dependency to your index.html:
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```
Make sure your systemjs.config has the following configuration:
The following component needs to be added to your systemjs.config:
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
- ng2-translate
- ng2-alfresco-core
#### Style
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -71,7 +73,40 @@ Also make sure you include these dependencies in your .html page:
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
#### Basic usage
#### Basic usage with node id
```html
<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
```
Example of an App that declares the file viewer component :
```ts
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
@Component({
selector: 'my-app',
template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="fileNodeId">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`,
directives: [VIEWERCOMPONENT]
})
class MyDemoApp {
fileNodeId: any;
constructor() {
this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f';
}
}
bootstrap(MyDemoApp, [
VIEWERCOMPONENT
]);
```
#### Basic usage with urlFile
```html
<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer>
@@ -105,11 +140,10 @@ bootstrap(MyDemoApp, [
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`urlFile` | *string* | | Url where to load the file | mandatory
`fileName` | *string* | Parsed from `urlFile` | Name of the file to display in the title bar. If not specified will take the last part of the URL |
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content |
`fileNodeId` | *string* | | node Id of the file to load the file |
`urlFile` | *string* | | If you want laod an external file that not comes from the ECM you can use this Url where to load the file |
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content otherwise will fit the parent div |
`showViewer` | *boolean* | `true` | Hide or show the viewer |
`mimeType` | *string* | `true` | MimeType of the file, used to detect if the browser can display the content. If not supplied the component will attempt to guess based on file extension of the `urlFile` |
## Build from sources
Alternatively you can build component from sources with the following commands:

3
ng2-components/ng2-alfresco-viewer/demo/index.html
View File

@@ -22,6 +22,9 @@
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<!-- Additional Alfresco libraries -->
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
<script src="systemjs.config.js"></script>
<script>

3
ng2-components/ng2-alfresco-viewer/demo/package.json
View File

@@ -38,6 +38,9 @@
"material-design-lite": "1.1.3",
"pdfjs-dist": "1.5.258",
"ng2-alfresco-core": "^0.2.0",
"ng2-translate": "2.2.2",
"alfresco-js-api": "^0.2.0",
"ng2-alfresco-viewer" : "file:../"
},
"devDependencies": {

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

@@ -19,18 +19,80 @@ import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService
} from 'ng2-alfresco-core';
@Component({
selector: 'my-app',
template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
template: `
<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
<input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
<input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="host"><br><br>
<div *ngIf="!authenticated" style="color:#FF2323">
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid token to perform
operations.
</div>
<hr>
<div class="container" *ngIf="authenticated">
<alfresco-viewer
[showViewer]="true"
[overlayMode]="true"
[urlFile]="'localTestFile.pdf'">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`,
</alfresco-viewer>
</div>`,
directives: [VIEWERCOMPONENT]
})
class MyDemoApp {
constructor() {
console.log('constructor');
authenticated: boolean;
ecmHost: string = 'http://127.0.0.1:8080';
token: string;
constructor(private authService: AlfrescoAuthenticationService,
private alfrescoSettingsService: AlfrescoSettingsService) {
alfrescoSettingsService.ecmHost = this.ecmHost;
if (this.authService.getTicket()) {
this.token = this.authService.getTicket();
}
}
public updateToken(): void {
localStorage.setItem('token', this.token);
}
public updateHost(): void {
this.alfrescoSettingsService.ecmHost = this.ecmHost;
this.login();
}
ngOnInit() {
this.login();
}
login() {
this.authService.login('admin', 'admin', ['ECM']).subscribe(
token => {
console.log(token);
this.token = token;
this.authenticated = true;
},
error => {
console.log(error);
this.authenticated = false;
});
}
}
bootstrap(MyDemoApp, [
VIEWERCOMPONENT
VIEWERCOMPONENT,
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);

8
ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
View File

@@ -10,6 +10,9 @@
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'ng2-translate': 'node_modules/ng2-translate',
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/dist',
'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer/dist'
};
// packages tells the System loader how to load when no filename and/or no extension
@@ -18,6 +21,9 @@
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' },
'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
'ng2-alfresco-datatable': { main: 'index.js', defaultExtension: 'js' },
'ng2-alfresco-viewer': { main: 'index.js', defaultExtension: 'js' }
};
var ngPackageNames = [
@@ -37,7 +43,7 @@
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/'+ pkgName + '.umd.js', defaultExtension: 'js' };
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

8
ng2-components/ng2-alfresco-viewer/karma-test-shim.js
View File

@@ -8,12 +8,16 @@ __karma__.loaded = function() {};
var map = {
'app': 'base/dist',
'rxjs': 'base/node_modules/rxjs',
'@angular': 'base/node_modules/@angular'
'ng2-alfresco-core': '/base/node_modules/ng2-alfresco-core/dist',
'@angular': 'base/node_modules/@angular',
'ng2-translate' : '/base/node_modules/ng2-translate'
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' }
};
var packageNames = [

8
ng2-components/ng2-alfresco-viewer/karma.conf.js
View File

@@ -16,6 +16,10 @@ module.exports = function (config) {
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.map', included: false, watched: false},
{pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
{pattern: 'node_modules/ng2-translate/**/*.js', included: false, served: true, watched: false},
{pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
{pattern: 'karma-test-shim.js', included: true, watched: true},
// paths loaded via module imports
@@ -61,7 +65,7 @@ module.exports = function (config) {
// Coverage reporter generates the coverage
reporters: ['mocha', 'coverage', 'coveralls', 'kjhtml'],
// Source files that you wanna generate coverage for.
// Do not include tests or libraries (these files will be instrumented by Istanbul)
preprocessors: {
@@ -74,7 +78,7 @@ module.exports = function (config) {
reporters: [
{type: 'text'},
{type: 'json', file: 'coverage-final.json'},
{type: 'html'},
{type: 'html'},
{type: 'lcov'}
]
}

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

@@ -58,6 +58,11 @@
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3",
"ng2-alfresco-core": "0.2.0",
"ng2-translate": "2.2.2",
"alfresco-js-api": "^0.2.0",
"systemjs": "0.19.27",
"core-js": "2.4.0",
"reflect-metadata": "0.1.3",

36
ng2-components/ng2-alfresco-viewer/src/assets/AlfrescoSettingsService.service.mock.ts Normal file
View File

@@ -0,0 +1,36 @@
/*!
* @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.
*/
import { Injectable } from '@angular/core';
@Injectable()
export class AlfrescoSettingsServiceMock {
static DEFAULT_HOST_ADDRESS: string = 'fakehost';
private providers: string[] = ['ECM', 'BPM'];
private _host: string = AlfrescoSettingsServiceMock.DEFAULT_HOST_ADDRESS;
public get ecmHost(): string {
return this._host;
}
getProviders(): string [] {
return this.providers;
}
}

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

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { describe, expect, it, inject } from '@angular/core/testing';
import { describe, expect, it, inject, beforeEachProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { PdfViewerComponent } from './pdfViewer.component';
@@ -23,8 +23,20 @@ import { PDFJSmock } from './assets/PDFJS.mock';
import { PDFViewermock } from './assets/PDFViewer.mock';
import { EventMock } from './assets/event.mock';
import { HTTP_PROVIDERS } from '@angular/http';
import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
describe('PdfViewer', () => {
beforeEachProviders(() => {
return [
HTTP_PROVIDERS,
{provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock},
{provide: AlfrescoAuthenticationService, useClass: AlfrescoAuthenticationService}
];
});
describe('View', () => {
it('Canvas should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb

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

@@ -43,7 +43,7 @@
<!--</button>-->
<!--</div>-->
<div class="center-element mdl-cell mdl-cell--12-col" >
<div *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
<div id="viewer-content-container" class="viewer-content-container mdl-cell" >
<!-- Start View Switch-->

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

@@ -15,13 +15,25 @@
* limitations under the License.
*/
import {describe, expect, it, inject } from '@angular/core/testing';
import { describe, expect, it, inject, beforeEachProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { ViewerComponent } from './viewer.component';
import { EventMock } from './assets/event.mock';
import { HTTP_PROVIDERS } from '@angular/http';
import { AlfrescoSettingsServiceMock } from '../src/assets/AlfrescoSettingsService.service.mock';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
describe('ViewerComponent', () => {
beforeEachProviders(() => {
return [
HTTP_PROVIDERS,
{provide: AlfrescoSettingsService, useClass: AlfrescoSettingsServiceMock},
{provide: AlfrescoAuthenticationService, useClass: AlfrescoAuthenticationService}
];
});
describe('View', () => {
it('shadow overlay should be present if is overlay mode', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb

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

@@ -20,6 +20,7 @@ import { PdfViewerComponent } from './pdfViewer.component';
import { ImgViewerComponent } from './imgViewer.component';
import { NotSupportedFormat } from './notSupportedFormat.component';
import { DOCUMENT } from '@angular/platform-browser';
import { AlfrescoAuthenticationService} from 'ng2-alfresco-core';
declare let __moduleName: string;
@@ -36,10 +37,7 @@ export class ViewerComponent {
urlFile: string;
@Input()
fileName: string = null;
@Input()
mimeType: string = null;
fileNodeId: string = null;
@Input()
overlayMode: boolean = false;
@@ -56,22 +54,37 @@ export class ViewerComponent {
extension: string;
constructor(private element: ElementRef, @Inject(DOCUMENT) private document) {
mimeType: string;
loaded: boolean = false;
constructor(private authService: AlfrescoAuthenticationService, private element: ElementRef, @Inject(DOCUMENT) private document) {
}
ngOnChanges(changes) {
if (this.showViewer) {
this.hideOtherHeaderBar();
this.blockOtherScrollBar();
if (!this.urlFile) {
throw new Error('Attribute urlFile is required');
if (!this.urlFile && !this.fileNodeId) {
throw new Error('Attribute urlFile or fileNodeId is required');
}
return new Promise((resolve) => {
if (this.urlFile) {
let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
this.displayName = this.fileName !== null ? this.fileName : filenameFromUrl;
this.displayName = filenameFromUrl ? filenameFromUrl : '';
this.extension = this.getFileExtension(filenameFromUrl);
} else if (this.fileNodeId) {
this.authService.getAlfrescoApi().nodes.getNodeInfo(this.fileNodeId).then((data) => {
this.mimeType = data.content.mimeType;
this.displayName = data.name;
this.urlFile = this.authService.getAlfrescoApi().content.getContentUrl(data.id);
this.loaded = true;
}, function (error) {
console.log('This node does not exist');
});
}
resolve();
});
}
@@ -138,7 +151,7 @@ export class ViewerComponent {
* @returns {boolean}
*/
private isImageMimeType() {
return this.mimeType !== null && this.mimeType.indexOf('image/') === 0;
return this.mimeType && this.mimeType.indexOf('image/') === 0;
}
/**
@@ -236,4 +249,11 @@ export class ViewerComponent {
}
}
}
/**
* return true if the data about the node in the ecm are loaded
*/
isLoaded() {
return this.fileNodeId ? this.loaded : true;
}
}

12
scripts/npm-link-demo-shell.sh
View File

@@ -64,13 +64,19 @@ npm link
npm run typings
npm run build
#LINK VIEWER
echo "====== linking component: ng2-activiti-processlist ====="
cd "$DIR/../ng2-components/ng2-activiti-viewer"
npm link ng2-alfresco-core
npm link
npm run typings
npm run build
#LINK ALL THE OTHERS COMPONENTS
for PACKAGE in \
ng2-alfresco-login \
ng2-alfresco-search \
ng2-alfresco-upload \
ng2-alfresco-viewer \
ng2-alfresco-webscript
ng2-alfresco-upload
do
DESTDIR="$DIR/../ng2-components/${PACKAGE}"
echo "====== linking component: ${PACKAGE} ====="