From ff01dc5ece57ccd4c07a6efbfff78a22dd3e5957 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Thu, 2 Jun 2016 17:56:32 +0100
Subject: [PATCH] #68 add esc keypress listner

---
 .../ng2-alfresco-viewer/src/viewer.component.css   | 14 ++++++++++++++
 .../ng2-alfresco-viewer/src/viewer.component.html  | 11 +++++++++--
 .../ng2-alfresco-viewer/src/viewer.component.ts    | 10 +++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
index efe389eefb..0a7ead1210 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
@@ -18,6 +18,19 @@
     float: left;
 }
 
+#loader{
+    margin: auto;
+    padding-top: 20px;
+    width:300px;
+}
+#loader-text{
+    width:300px;
+    white-space: nowrap;
+    text-align: center;
+    position: relative;
+    color: #000;
+}
+
 #viewer-toolbar-pagination {
     margin-left: 25%;
 }
@@ -67,3 +80,4 @@
 :host .canvasWrapper {
     box-shadow: 0px 0px 8px 2px #000;
 }
+
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
index 358615f4c1..e3792971a9 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
@@ -3,7 +3,7 @@
         <div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
     </div>
 
-    <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }">
+    <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }" (keypress)=eventHandler() >
 
         <!-- Start Layout -->
         <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
@@ -60,7 +60,14 @@
 
                             <!-- Start Pdf Canvas -->
                             <div id="viewer-pdf-container" class="viewer-pdf-container">
-                                <div id="viewer-viewerPdf" style="border:1px solid black;"></div>
+                                <div id="viewer-viewerPdf" style="border:1px solid black;">
+                                    <div id="loader">
+                                        <div>
+                                            <div id="loader-spin"  class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+                                        </div>
+                                        <div id="loader-text">Loading...</div>
+                                    </div>
+                                </div>
                             </div>
                             <!-- End Pdf Canvas -->
 
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
index 7ab5be8261..4836f0e337 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output } from 'angular2/core';
+import { Component, Input, Output, HostListener } from 'angular2/core';
 import { EventEmitter } from 'angular2/src/facade/async';
 
 declare let PDFJS: any;
@@ -146,6 +146,14 @@ export class ViewerComponent {
         }
     }
 
+    @HostListener('document:keydown', ['$event'])
+    handleKeyboardEvent(event: KeyboardEvent) {
+        let key = event.keyCode;
+        if (key === 27) {//esc
+            this.close();
+        }
+    }
+
     /**
      * Add Ticket to the file request
      * @returns {string}