#68 add page moving and input param

tslint rule withespace type
This commit is contained in:
Eugenio Romano 2016-05-24 00:17:21 +01:00
parent d83270e176
commit 2060982ec7
16 changed files with 232 additions and 122 deletions

View File

@ -110,10 +110,11 @@
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-branch",
"check-operator",
"check-separator",
"check-type",
"check-module"
]
}
}

View File

@ -110,10 +110,11 @@
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-branch",
"check-operator",
"check-separator",
"check-type",
"check-module"
]
}
}

View File

@ -113,7 +113,9 @@
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-separator",
"check-type",
"check-module"
]
}
}

View File

@ -110,10 +110,11 @@
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-branch",
"check-operator",
"check-separator",
"check-type",
"check-module"
]
}
}

View File

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

View File

@ -111,9 +111,10 @@
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-separator",
"check-type",
"check-module"
]
}
}

View File

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

View File

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

View File

@ -15,4 +15,4 @@
* limitations under the License.
*/
export * from './src/ng2-alfresco-viewer.component';
export * from './src/viewer.component';

View File

@ -1,7 +0,0 @@
.button-container {
padding: 0 40px;
}
.page-content {
background: #3E3E3E;
}

View File

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

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

View File

@ -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">

View File

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

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

View File

@ -113,10 +113,11 @@
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator"
"check-branch",
"check-operator",
"check-separator",
"check-type",
"check-module"
]
}
}