[ADF-4225] Viewer extension accept multiple file type (#4427)

* viewer extension can target multiple types.

* fix lint

demo-shell/resources/i18n/ar.json

@@ -7,7 +7,7 @@
       "VERSIONS": "الإصدارات"
     },
     "HOME": {
-      "TITLE": "المكونات الزاوّية لـ Alfresco",
+      "TITLE": "Alfresco المكونات الزاوّية لـ",
       "DOCUMENTATION": "الوثائق"
     },
     "LOGOUT": {
@@ -311,4 +311,4 @@
     "TESTING_MODE": "وضع الاختبار",
     "SELECTION_MODE": "وضع التحديد"
   }
-}
+}

docs/extensions/README.md

@@ -17,6 +17,7 @@ for more information about installing and using the source code.
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
 | [Dynamic component](dynamic.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays dynamically-loaded extension components. | [Source](../../lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts) |
+| [Preview Extension component](preview-extension.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Preview extension component. | [Source](../../lib/extensions/src/lib/components/viewer/preview-extension.component.ts) |
 
 ## Services
 

docs/extensions/preview-extension.component.md

@@ -0,0 +1,106 @@
+---
+Title: Dynamic Component
+Added: v3.1.0
+Status: Experimental
+Last reviewed: 2018-04-12
+---
+
+# [Preview Extension component](../../lib/extensions/src/lib/components/viewer/preview-extension.component.ts "Defined in preview-extension.component.ts")
+
+Displays dynamically-loaded extension components.
+If you want give a look on a real working viewer extension project you can look at [aca monaco extensio](https://github.com/eromano/aca-monaco-extension)
+## Class members
+
+### Properties
+
+The viewer component when it recognize a new extension always pass the following two parameter as input:
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| url | `string` |  | URL Of the content in the repository |
+| node | `Node` |  | Node of the content to display |
+
+
+## Details
+
+If you want create your custom extension viewer you need to create the following files in a separate project:
+
+
+The Module needs to know which is the Id of your extension:
+
+```ts
+export class YourExtensionViewerModule {
+  constructor(extensions: ExtensionService) {
+    extensions.setComponents({
+      'your-extension.main.component': YourExtensionViewerComponent
+    });
+  }
+}
+
+```
+
+
+Your viewer component extension business logic:
+
+```ts
+import { Node } from '@alfresco/js-api';
+import { ViewerExtensionInterface } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'your-extension-viewer',
+  templateUrl: './your-extension-view.component.html',
+  styleUrls: ['./your-extension-view.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class YourExtensionViewerComponent implements ViewerExtensionInterface {
+
+  showToolbar = true;
+
+  @Input()
+  url: string;
+
+  @Input()
+  node: Node;
+  
+  
+  ....YOUR CUSTOM LOGIC
+}
+
+```
+
+Your viewer component template:
+
+```HTML
+
+<div> This is your custom extension viewer template</div>
+
+```
+
+Your viewer component extension.json:
+
+
+```JSON
+{
+  "$version": "1.0.0",
+  "$name": "my viewer extension",
+  "$description": "my viewer  plugin",
+  "features": {
+    "viewer": {
+      "content": [
+        {
+          "id": "dev.tools.viewer.viewer",
+          "fileExtension": ["png", "jpg"],
+          "component": "your-extension.main.component"
+        }
+      ]
+    }
+  }
+}
+
+```
+
+
+
+## See also
+
+-   [Extension service](../../lib/extensions/src/lib/services/extension.service.ts)

lib/core/viewer/components/viewer.component.html

@@ -196,10 +196,9 @@
                         </ng-container>
 
                         <ng-container *ngSwitchCase="'custom'">
-
                             <ng-container  *ngFor="let ext of viewerExtensions">
                                 <adf-preview-extension
-                                    *ngIf="extension === ext.fileExtension"
+                                    *ngIf="checkExtensions(ext.fileExtension)"
                                     [id]="ext.component"
                                     [node]="nodeEntry.entry"
                                     [url]="urlFileContent"

lib/core/viewer/components/viewer.component.ts

@@ -533,11 +533,11 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     isCustomViewerExtension(extension: string): boolean {
-        const extensions = this.externalExtensions || [];
+        const extensions: any = this.externalExtensions || [];
 
         if (extension && extensions.length > 0) {
             extension = extension.toLowerCase();
-            return extensions.indexOf(extension) >= 0;
+            return extensions.flat().indexOf(extension) >= 0;
         }
 
         return false;
@@ -705,6 +705,17 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         });
     }
 
+    checkExtensions(extensionAllowed) {
+        if (typeof extensionAllowed ===  'string') {
+            return this.extension.toLowerCase() === extensionAllowed.toLowerCase();
+        } else if (extensionAllowed.length > 0) {
+            return extensionAllowed.find((currentExtension) => {
+                return this.extension.toLowerCase() === currentExtension.toLowerCase();
+            });
+        }
+
+    }
+
     private generateCacheBusterNumber() {
         this.cacheBusterNumber = Date.now();
     }

lib/extensions/src/lib/components/public-api.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+export * from './viewer/viewer-extension.interface';
 export * from './viewer/preview-extension.component';
 export * from './dynamic-column/dynamic-column.component';
 export * from './dynamic-component/dynamic.component';

lib/extensions/src/lib/components/viewer/viewer-extension.interface.ts

@@ -0,0 +1,24 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Node } from '@alfresco/js-api';
+
+export interface ViewerExtensionInterface {
+    url: string;
+    nameFile: string;
+    node: Node;
+}