mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
parent
d83270e176
commit
2060982ec7
@ -110,10 +110,11 @@
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-branch",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -110,10 +110,11 @@
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-branch",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -113,7 +113,9 @@
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -110,10 +110,11 @@
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-branch",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -34,7 +34,7 @@ describe('AlfrescoUploadButton', () => {
|
||||
});
|
||||
|
||||
it('should render upload-single-file button as default',
|
||||
injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(UploadButtonComponent)
|
||||
.then((fixture) => {
|
||||
@ -45,7 +45,7 @@ describe('AlfrescoUploadButton', () => {
|
||||
}));
|
||||
|
||||
it('should render upload-multiple-file button if multipleFiles is true',
|
||||
injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(UploadButtonComponent)
|
||||
.then((fixture) => {
|
||||
@ -58,7 +58,7 @@ describe('AlfrescoUploadButton', () => {
|
||||
}));
|
||||
|
||||
it('should render an uploadFolder button if uploadFolder is true',
|
||||
injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(UploadButtonComponent)
|
||||
.then((fixture) => {
|
||||
@ -70,7 +70,7 @@ describe('AlfrescoUploadButton', () => {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should call onFilesAdded method', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
it('should call onFilesAdded method', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(UploadButtonComponent)
|
||||
.then((fixture) => {
|
||||
@ -88,8 +88,8 @@ describe('AlfrescoUploadButton', () => {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should render dialog box with css class show ',
|
||||
injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
it('should render dialog box with css class show',
|
||||
injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(UploadButtonComponent)
|
||||
.then((fixture) => {
|
||||
|
@ -111,9 +111,10 @@
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -21,10 +21,7 @@
|
||||
|
||||
<script src="node_modules/pdfjs-dist/build/pdf.js"></script>
|
||||
<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
|
||||
|
||||
<script>
|
||||
PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
|
||||
</script>
|
||||
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
|
||||
|
||||
<script>
|
||||
System.config({
|
||||
@ -35,6 +32,9 @@
|
||||
'app': 'dist/main'
|
||||
},
|
||||
packages: {
|
||||
'pdfjsDistBuildPdf': {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'app': {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
@ -52,6 +52,8 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<ng2-alfresco-viewer><div class="mdl-spinner mdl-js-spinner is-active"></div></ng2-alfresco-viewer>
|
||||
<alfresco-viewer [urlFile]="'localTestFile.pdf'">
|
||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||
</alfresco-viewer>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -16,6 +16,6 @@
|
||||
*/
|
||||
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {Ng2AlfrescoViewerComponent} from './ng2-alfresco-viewer';
|
||||
import {ViewerComponent} from './ng2-alfresco-viewer';
|
||||
|
||||
bootstrap(Ng2AlfrescoViewerComponent);
|
||||
bootstrap(ViewerComponent);
|
||||
|
@ -15,4 +15,4 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './src/ng2-alfresco-viewer.component';
|
||||
export * from './src/viewer.component';
|
||||
|
@ -1,7 +0,0 @@
|
||||
.button-container {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #3E3E3E;
|
||||
}
|
@ -1,67 +0,0 @@
|
||||
/*!
|
||||
* @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 { Component } from 'angular2/core';
|
||||
|
||||
declare let PDFJS: any;
|
||||
declare let __moduleName:string;
|
||||
|
||||
@Component({
|
||||
moduleId: __moduleName,
|
||||
selector: 'ng2-alfresco-viewer',
|
||||
templateUrl: './ng2-alfresco-viewer.component.html',
|
||||
styleUrls: ['./ng2-alfresco-viewer.component.css']
|
||||
})
|
||||
export class Ng2AlfrescoViewerComponent {
|
||||
|
||||
nameFile:String;
|
||||
|
||||
constructor() {
|
||||
this.nameFile = 'localTestFile.pdf';
|
||||
|
||||
PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
|
||||
//
|
||||
// Fetch the first page
|
||||
//
|
||||
pdf.getPage(1).then(function (page) {
|
||||
let scale = 1.5;
|
||||
let viewport = page.getViewport(scale);
|
||||
|
||||
//
|
||||
// Prepare canvas using PDF page dimensions
|
||||
//
|
||||
let canvas:any = document.getElementById('the-canvas');
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
console.log('../contructor');
|
||||
}
|
||||
|
||||
}
|
31
ng2-components/ng2-alfresco-viewer/src/viewer.component.css
Normal file
31
ng2-components/ng2-alfresco-viewer/src/viewer.component.css
Normal file
@ -0,0 +1,31 @@
|
||||
.button-container {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #3E3E3E;
|
||||
}
|
||||
|
||||
.previous-page-button {
|
||||
top: 50%;
|
||||
left: 7%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.next-page-button {
|
||||
top: 50%;
|
||||
right: 7%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#viewer-toolbar-pagination {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
#viewer-pagenumber-input {
|
||||
width: 30px;
|
||||
}
|
@ -7,13 +7,32 @@
|
||||
|
||||
<!-- File Title -->
|
||||
<span class="mdl-layout-title">{{nameFile}}</span>
|
||||
|
||||
<!-- pagination toolbar start -->
|
||||
<div id="viewer-toolbar-pagination">
|
||||
<div id="viewer-previouspage-button" class="left" (click)="previousPage()">
|
||||
<i class="icon material-icons">keyboard_arrow_left</i>
|
||||
</div>
|
||||
|
||||
<input id="viewer-pagenumber-input" #page
|
||||
(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>
|
||||
|
||||
<div id="viewer-nextpage-button" (click)="nextPage()" class="left">
|
||||
<i class="icon material-icons" >keyboard_arrow_right</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pagination toolbar end -->
|
||||
|
||||
<span class="vertical-divider"></span>
|
||||
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
|
||||
<!-- Start Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="cazzo()">
|
||||
<i id="tt2" class="icon material-icons">print</i>
|
||||
</button>
|
||||
</div>
|
||||
@ -21,14 +40,14 @@
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i id="tt3" class="icon material-icons">cloud_upload</i>
|
||||
<i id="cloud-upload" class="icon material-icons">cloud_upload</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
|
||||
<i id="tt4" class="icon material-icons">share</i>
|
||||
<i id="share" class="icon material-icons">share</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -56,7 +75,8 @@
|
||||
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
|
||||
<div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
|
||||
<div
|
||||
class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
|
||||
|
||||
<!-- Start Pdf Canvas -->
|
||||
<div id="canvas-container">
|
||||
@ -64,6 +84,22 @@
|
||||
</div>
|
||||
<!-- End Pdf Canvas -->
|
||||
|
||||
<div class="previous-page-button">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
|
||||
(click)="previousPage()">
|
||||
<i class="icon material-icons">keyboard_arrow_left</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="next-page-button">
|
||||
<button
|
||||
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
|
||||
(click)="nextPage()">
|
||||
<i class="icon material-icons">keyboard_arrow_right</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mdl-mini-footer">
|
@ -17,18 +17,18 @@
|
||||
|
||||
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 {Ng2AlfrescoViewerComponent} from '../src/ng2-alfresco-viewer.component';
|
||||
import {ViewerComponent} from '../src/viewer.component';
|
||||
|
||||
describe('Basic Example test ng2-alfresco-viewer', () => {
|
||||
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
|
||||
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
|
||||
|
||||
it('Test hello world', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(Ng2AlfrescoViewerComponent)
|
||||
.then((fixture) => {
|
||||
let element = fixture.nativeElement;
|
||||
expect(element.querySelector('h1')).toBeDefined();
|
||||
expect(element.getElementsByTagName('h1')[0].innerHTML).toEqual('ng2-alfresco-viewer');
|
||||
});
|
||||
}));
|
||||
it('Test hello world', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
|
||||
return tcb
|
||||
.createAsync(ViewerComponent)
|
||||
.then((fixture) => {
|
||||
let element = fixture.nativeElement;
|
||||
expect(element.querySelector('h1')).toBeDefined();
|
||||
expect(element.getElementsByTagName('h1')[0].innerHTML).toEqual('ng2-alfresco-viewer');
|
||||
});
|
||||
}));
|
||||
});
|
108
ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
Normal file
108
ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
Normal file
@ -0,0 +1,108 @@
|
||||
/*!
|
||||
* @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 { Component, Input } from 'angular2/core';
|
||||
|
||||
declare let PDFJS: any;
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
moduleId: __moduleName,
|
||||
selector: 'alfresco-viewer',
|
||||
templateUrl: './viewer.component.html',
|
||||
styleUrls: ['./viewer.component.css']
|
||||
})
|
||||
export class ViewerComponent {
|
||||
|
||||
@Input()
|
||||
urlFile: string;
|
||||
|
||||
nameFile: string;
|
||||
|
||||
currentPdf: any;
|
||||
currentPage: number;
|
||||
displayPage: number;
|
||||
totalPages: number;
|
||||
|
||||
ngOnInit() {
|
||||
console.log('A.urlFile ' + this.urlFile);
|
||||
|
||||
this.urlFile = this.urlFile ? this.urlFile : 'localTestFile.pdf';
|
||||
this.nameFile = PDFJS.getFilenameFromUrl(this.loadFile);
|
||||
|
||||
PDFJS.getDocument(this.urlFile).then((pdf) => {
|
||||
this.currentPdf = pdf;
|
||||
this.totalPages = pdf.numPages;
|
||||
this.currentPage = 1;
|
||||
this.displayPage = 1;
|
||||
this.loadPage(this.currentPdf, this.currentPage);
|
||||
});
|
||||
}
|
||||
|
||||
loadPage(pdf: any, numberPage: number) {
|
||||
pdf.getPage(numberPage).then((page) => {
|
||||
|
||||
console.log(page.numPages);
|
||||
|
||||
let scale = 1.5;
|
||||
let viewport = page.getViewport(scale);
|
||||
|
||||
let canvas: any = document.getElementById('the-canvas');
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
previousPage() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.displayPage = this.currentPage;
|
||||
this.loadPage(this.currentPdf, this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
nextPage() {
|
||||
if (this.currentPage < this.totalPages) {
|
||||
this.currentPage++;
|
||||
this.displayPage = this.currentPage;
|
||||
this.loadPage(this.currentPdf, this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
inputPage(page: any) {
|
||||
let pageInput = parseInt(page, 10);
|
||||
|
||||
if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
|
||||
this.currentPage = pageInput;
|
||||
this.loadPage(this.currentPdf, this.currentPage);
|
||||
} else {
|
||||
this.displayPage = this.currentPage;
|
||||
}
|
||||
}
|
||||
}
|
@ -113,10 +113,11 @@
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator"
|
||||
"check-branch",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user