From fd27fd0844f78c38997c7539f9caa15a5b85cd69 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Wed, 8 Jun 2016 12:43:17 +0100
Subject: [PATCH] #68 decouple viewer

---
 .../src/notSupportedFormat.component.css      | 18 ++++++++
 .../src/notSupportedFormat.component.html     | 12 ++++++
 .../src/notSupportedFormat.component.spec.ts  | 36 ++++++++++++++++
 .../src/notSupportedFormat.component.ts       | 42 +++++++++++++++++++
 .../src/viewer.component.css                  | 20 +++------
 .../src/viewer.component.html                 | 19 +++------
 .../src/viewer.component.spec.ts              |  2 +-
 .../src/viewer.component.ts                   | 10 +----
 8 files changed, 122 insertions(+), 37 deletions(-)
 create mode 100644 ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css
 create mode 100644 ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html
 create mode 100644 ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.spec.ts
 create mode 100644 ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.ts

diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css
new file mode 100644
index 0000000000..3b15d30246
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css
@@ -0,0 +1,18 @@
+
+.viewer-download-text  {
+    text-align: center;
+}
+
+.viewer-margin-cloud-download{
+    margin-right: 20px;
+}
+
+.viewer-margin {
+    margin: auto !important;
+}
+
+.center-element {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html
new file mode 100644
index 0000000000..335884e480
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html
@@ -0,0 +1,12 @@
+<section class="section--center mdl-grid mdl-grid--no-spacing">
+    <div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
+        <div class="viewer-download-text mdl-card__supporting-text">
+            <h4>File {{nameFile}} is an unsupported format</h4>
+        </div>
+        <div class="center-element mdl-card__actions">
+            <button id="viewer-download-button" class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
+                <i class="viewer-margin-cloud-download material-icons">cloud_download</i>   Download
+            </button>
+        </div>
+    </div>
+</section>
diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.spec.ts
new file mode 100644
index 0000000000..cd6c5ea7e4
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.spec.ts
@@ -0,0 +1,36 @@
+/*!
+ * @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 { describe, expect, it, injectAsync, TestComponentBuilder } from 'angular2/testing';
+import { NotSupportedFormat } from './notSupportedFormat.component';
+
+describe('Not Supported Format View', () => {
+
+    describe('View', () => {
+        it('Download button should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(NotSupportedFormat)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+
+                    fixture.detectChanges();
+
+                    expect(element.querySelector('#viewer-download-button')).not.toBeNull();
+                });
+        }));
+    });
+});
diff --git a/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.ts b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.ts
new file mode 100644
index 0000000000..2899489943
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.ts
@@ -0,0 +1,42 @@
+/*!
+ * @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 __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'not-supported-format',
+    templateUrl: './notSupportedFormat.component.html',
+    styleUrls: ['./notSupportedFormat.component.css']
+})
+export class NotSupportedFormat {
+
+    @Input()
+    nameFile: string;
+
+    @Input()
+    urlFile: string;
+
+    /**
+     * Download file
+     */
+    private download(){
+        window.open(this.urlFile);
+    }
+}
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
index 9af5b300c4..a3e23b8595 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
@@ -58,19 +58,11 @@
 }
 
 .center-element {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+     display: flex;
+     align-items: center;
+     justify-content: center;
+ }
 
-.viewer-margin {
-    margin: auto !important;
-}
-
-.viewer-download-text  {
-    text-align: center;
-}
-
-.viewer-margin-cloud-download{
-    margin-right: 20px;
+.viewer-content-container {
+    width: 100%;
 }
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
index 4e048c0b1b..eb41f3f259 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
@@ -63,23 +63,14 @@
 
                     <div class="center-element mdl-cell mdl-cell--8-col" >
 
-                        <div id="viewer-content-container" class="center-element mdl-cell" >
+                        <div id="viewer-content-container" class="viewer-content-container mdl-cell" >
                         <!-- Start View Switch-->
-                            <div *ngIf="isPdf()"><pdf-viewer [urlFile]="urlFile" ></pdf-viewer></div>
+                            <div *ngIf="isPdf()">
+                                <pdf-viewer [urlFile]="urlFile" ></pdf-viewer>
+                            </div>
                             <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="center-element viewer-image"/></div>
                             <div *ngIf="notSupportedExtension()">
-                                <section class="section--center mdl-grid mdl-grid--no-spacing">
-                                    <div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
-                                        <div class="viewer-download-text mdl-card__supporting-text">
-                                            <h4>File {{nameFile}} is an unsupported format</h4>
-                                        </div>
-                                        <div class="mdl-card__actions">
-                                            <button class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
-                                                <i class="viewer-margin-cloud-download material-icons">cloud_download</i>   Download
-                                            </button>
-                                        </div>
-                                    </div>
-                                </section>
+                                <not-supported-format [urlFile]="urlFile" [nameFile]="nameFile" ></not-supported-format>
                             </div>
                         <!-- End View Switch -->
                         </div>
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 1b66254a86..df281627fc 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
@@ -193,7 +193,7 @@ describe('ViewerComponent', () => {
 
                     component.ngOnChanges().then(() => {
                         fixture.detectChanges();
-                        expect(element.querySelector('#viewer-unsupported')).not.toBeNull();
+                        expect(element.querySelector('not-supported-format')).not.toBeNull();
                     });
                 });
         }));
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
index b8e0393401..c7f620bc32 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
@@ -18,13 +18,14 @@
 import { Component, Input, Output, HostListener } from 'angular2/core';
 import { EventEmitter } from 'angular2/src/facade/async';
 import { PdfViewerComponent } from './pdfViewer.component';
+import { NotSupportedFormat } from './notSupportedFormat.component';
 
 declare let __moduleName: string;
 
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-viewer',
-    directives: [PdfViewerComponent],
+    directives: [PdfViewerComponent, NotSupportedFormat],
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']
 })
@@ -168,11 +169,4 @@ export class ViewerComponent {
             }
         }
     }
-
-    /**
-     * Download file
-     */
-    private download(){
-        window.open(this.urlFile);
-    }
 }