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

new pagination

Browse Source
This commit is contained in:
Eugenio Romano
2016-06-10 17:24:56 +01:00
parent 0045f214da
commit 79514381a6
10 changed files with 129 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,7 +101,6 @@ bootstrap(MyDemoApp, [
]);
```
#### Options
Attribute | Options | Default | Description | Mandatory
@@ -112,8 +111,6 @@ Attribute | Options | Default | Description | Mandatory
`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:

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

@@ -1,7 +1,7 @@
{
"name": "ng2-alfresco-viewer",
"description": "Alfresco documents viewer",
"version": "0.1.18",
"version": "0.1.19",
"author": "Eugenio Romano",
"scripts": {
"typings": "typings install",

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

@@ -18,3 +18,65 @@
:host .canvasWrapper {
box-shadow: 0px 0px 8px 2px #000;
}
.left {
float: left;
}
.viewer-toolbar-pagination{
padding-top: 4px;
top: 80px;
right:35px;
width:auto;
position:fixed;
border-radius: 10px;
background: #3E3E3E;
color: white;
}
.viewer-pagenumber-input {
border: none;
border-bottom: 1px solid rgba(0,0,0,.12);
display: block;
font-size: 16px;
font-family: "Helvetica","Arial",sans-serif;
padding: 4px 0;
background: 0 0;
text-align: right;
color: inherit;
width: 33px;
margin-right: 4px;
}
.viewer-total-pages {
margin-right: 22px;
border: none;
border-bottom: 1px solid rgba(0,0,0,.12);
display: block;
font-size: 16px;
font-family: "Helvetica","Arial",sans-serif;
margin: 0;
padding: 3px 0;
background: 0 0;
text-align: left;
color: inherit;
}
.viewer-page-counter {
margin-right: 20px;
}
.button-page {
margin-right: 4px;
height: 24px;
width: 24px;
margin-left: 4px;
cursor: pointer;
}
.button-page:hover {
cursor: pointer;
background: grey;
border-radius: 24px;
}

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

@@ -10,3 +10,22 @@
</div>
</div>
<!-- End Pdf Canvas -->
<!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination" class="viewer-toolbar-pagination mdl-cell--hide-tablet mdl-cell--hide-phone">
<div id="viewer-previous-page-button" class="button-page left" (click)="previousPage()">
<i class="icon material-icons">keyboard_arrow_left</i>
</div>
<div class="viewer-page-counter left" >
<input id="viewer-pagenumber-input" #page
(keyup.enter)="inputPage(page.value)" class="viewer-pagenumber-input left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
<div id="viewer-total-pages" class="left viewer-total-pages">/ {{totalPages}}</div>
</div>
<div id="viewer-next-page-button" (click)="nextPage()" class="button-page left">
<i class="icon material-icons" >keyboard_arrow_right</i>
</div>
</div>
<!-- Pagination toolbar end -->

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

@@ -49,6 +49,36 @@ describe('PdfViewer', () => {
expect(element.querySelector('#viewer-loader')).not.toBeNull();
});
}));
it('Next an Previous Buttons should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(PdfViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
});
}));
it('Input Page elements should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(PdfViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
expect(element.querySelector('#viewer-total-pages')).toBeDefined();
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
});
}));
});
describe('User interaction', () => {

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

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input } from 'angular2/core';
import { Component, Input, HostListener } from 'angular2/core';
declare let PDFJS: any;
declare let __moduleName: string;
@@ -131,4 +131,19 @@ export class PdfViewerComponent {
this.displayPage = this.page;
}
}
/**
* Litener Keyboard Event
* @param {KeyboardEvent} event
*/
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
let key = event.keyCode;
if (key === 39) { //right arrow
this.nextPage();
} else if (key === 37) {//left arrow
this.previousPage();
}
}
}

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

@@ -14,21 +14,13 @@
margin: 20px;
}
#viewer-toolbar-pagination {
margin-left: 25%;
}
#viewer-pagenumber-input {
width: 30px;
}
.mdl-grid {
width: 100vw;
}
.viewer-name-file {
width: 20%;
height: 18px;
height: 21px;
overflow: hidden !important;
text-overflow: ellipsis;
}

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

@@ -13,22 +13,6 @@
<!-- File Title -->
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
<!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination">
<div id="viewer-previous-page-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-next-page-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>

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

@@ -36,35 +36,6 @@ describe('ViewerComponent', () => {
});
}));
it('Next an Previous Buttons should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
});
}));
it('Input Page elements should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
expect(element.querySelector('#viewer-total-pages')).toBeDefined();
expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
});
}));
it('Name File should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)

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

@@ -154,10 +154,6 @@ export class ViewerComponent {
let key = event.keyCode;
if (key === 27) { //esc
this.close();
} else if (key === 39) { //right arrow
//this.nextPage();
} else if (key === 37) {//left arrow
//this.previousPage();
}
}