new pagination

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:
 

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

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

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html

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

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', () => {

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();
+        }
+    }
+
 }

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

ng2-components/ng2-alfresco-viewer/src/viewer.component.html

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

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)

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();
         }
     }