Dev eromano external viewer (#1636)

* add extensibility point to add a custom viewer

* documentation and tests

* add example in document list

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

@@ -0,0 +1,72 @@
+<div id="viewer" *ngIf="showViewer" [ngClass]="{'all-space': !overlayMode }">
+    <div *ngIf="overlayMode">
+        <div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
+    </div>
+
+    <div id="viewer-main-container" class="all-space" [ngClass]="{'viewer-overlay-view': overlayMode }">
+
+        <!-- Start Layout -->
+        <div [ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode, 'all-space': !overlayMode}">
+
+            <header *ngIf="overlayMode" class="mdl-layout__header">
+                <div class="mdl-layout__header-row">
+
+                    <!-- File Title -->
+                    <span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
+
+                    <span class="vertical-divider"></span>
+
+                    <div class="mdl-layout-spacer"></div>
+
+                    <!-- Start Navigation -->
+                    <nav class="mdl-navigation">
+                        <div id="viewer-toolbar-view-options">
+                            <button *ngIf="overlayMode"
+                                    class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+                                    (click)="close()" aria-label="Close">
+                                <i id="viewer-close-button" class="icon material-icons">close</i>
+                            </button>
+                        </div>
+                    </nav>
+                    <!-- End Navigation -->
+                </div>
+            </header>
+
+            <main id="page-content" class="mdl-layout__content" [ngClass]="{'all-space': !overlayMode }">
+
+                <div class="mdl-grid">
+
+                    <div id="viewer-content-container" *ngIf="isLoaded()"
+                         class="center-element mdl-cell mdl-cell--12-col">
+
+                        <!-- Start View Switch-->
+                        <div *ngIf="isPdf()">
+                            <pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent"
+                                        [nameFile]="displayName"></pdf-viewer>
+                        </div>
+                        <div class="center-element" *ngIf="isImage()">
+                            <img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
+                        </div>
+                        <div class="center-element" *ngIf="isMedia()">
+                            <media-player [urlFile]="urlFileContent" [mimeType]="mimeType"
+                                          [nameFile]="displayName"></media-player>
+                        </div>
+
+                         <span *ngFor="let extensionTemplate of extensionTemplates">
+                            <template [ngTemplateOutlet]="extensionTemplate.template"  *ngIf="extensionTemplate.isVisible"
+                                      [ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }"></template>
+                         </span>
+
+                        <div *ngIf="!supportedExtension()">
+                            <not-supported-format  *ngIf="!extensionTemplate" [urlFile]="urlFileContent" [nameFile]="displayName"></not-supported-format>
+                        </div>
+                        <!-- End View Switch -->
+
+                    </div>
+
+                </div>
+            </main>
+        </div>
+        <!-- End Layout -->
+    </div>
+</div>