#68 decouple viewer

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

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>

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

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

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

@@ -58,19 +58,11 @@
 }
 
 .center-element {
-    display: flex;
+     display: flex;
-    align-items: center;
+     align-items: center;
-    justify-content: center;
+     justify-content: center;
-}
+ }
 
-.viewer-margin {
+.viewer-content-container {
-    margin: auto !important;
+    width: 100%;
-}
-
-.viewer-download-text  {
-    text-align: center;
-}
-
-.viewer-margin-cloud-download{
-    margin-right: 20px;
 }

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">
+                                <not-supported-format [urlFile]="urlFile" [nameFile]="nameFile" ></not-supported-format>
-                                    <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>
                             </div>
                         <!-- End View Switch -->
                         </div>

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

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