diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index 98aee38f34..cd95641cf1 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -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: diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json index 62327f1b7c..a27820dd94 100644 --- a/ng2-components/ng2-alfresco-viewer/package.json +++ b/ng2-components/ng2-alfresco-viewer/package.json @@ -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", diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css index 67b3e4fa4c..4e31b8f6f4 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css @@ -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; + +} diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index 7ca80d4683..2da07b540f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -10,3 +10,22 @@ + + + +
+
+ keyboard_arrow_left +
+ +
+ +
/ {{totalPages}}
+
+ +
+ keyboard_arrow_right +
+
+ diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index 7008aa6457..963da01dbe 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts @@ -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', () => { diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index 9f373bab32..3808a2a953 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -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(); + } + } + } diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index b471772553..a0c76b1dd5 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css @@ -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; } diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index c33d7bd69c..23fe1ddcc6 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -13,22 +13,6 @@ {{displayName}} - -
-
- keyboard_arrow_left -
- - - / {{totalPages}} - -
- keyboard_arrow_right -
-
- -
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts index 28a6b1a887..bb20661aa7 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts @@ -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) diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index cc4e6f3e5d..c9130117f9 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts @@ -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(); } }