[ADF-1843] rename 'extension-viewer' to 'add-viewer-extension' (#2568)

* rename 'extension-viewer' to 'adf-viewer-extension'

also add support for json preview

* docs updates

demo-shell-ng2/src/app/components/file-view/file-view.component.html

@@ -1,9 +1,36 @@
 <ng-container *ngIf="nodeId">
     <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true">
-      <!--<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>-->
-        <!--<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >-->
-          <!--<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>-->
-        <!--</ng-template>-->
-      <!--</extension-viewer>-->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['json']">
+        <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
+          <h1>JSON VIEWER</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['png']">
+        <ng-template>
+          <h1>PNG Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['pdf']">
+        <ng-template>
+          <h1>PDF Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+        <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+          <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+        </ng-template>
+      </extension-viewer>
+      -->
     </adf-viewer>
 </ng-container>

docs/viewer.component.md

@@ -48,18 +48,18 @@ Using with file url:
 | urlBlob | Blob | | If you want to load a Blob File |
 | overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
 | showViewer | boolean | true | Hide or show the viewer |
-| showToolbar | boolean | true | Hide or show the toolbars |
+| showToolbar | boolean | true | Hide or show the toolbar |
 | displayName | string | | You can specify the name of the file |
 | allowGoBack | boolean | true | Allow `back` navigation |
 | allowDownload | boolean | true | Toggle download feature |
 | allowPrint | boolean | false | Toggle printing feature |
 | allowShare | boolean | false | Toggle sharing feature |
-| allowSidebar | boolean |false | Toogle sidebar feature |
+| allowSidebar | boolean |false | Toggle sidebar feature |
 | showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
 
 ## Events
 
-| Name | Argument Type | Cancellable | Description |
+| Name | Argument Type | Cancelable | Description |
 | --- | --- | --- | --- |
 | goBack | any | Yes | Raised when user clicks the 'Back' button. |
 | download | any | Yes | Raised when user clicks the 'Download' button. |
@@ -133,7 +133,7 @@ Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered
 
 ### Custom sidebar
 
-The Viewer component also suports custom sidebar components and layouts.
+The Viewer component also supports custom sidebar components and layouts.
 The `allowSidebar` property should be set to `true` to enable this feature.
 
 ```html
@@ -175,7 +175,7 @@ You can enable custom "Open With" menu by providing at least one action inside t
 
 ### Custom "More actions" menu
 
-You can enable custom "More actions" menu by providing at least one action indide the "adf-viewer-more-actions" tag:
+You can enable custom "More actions" menu by providing at least one action inside the "adf-viewer-more-actions" tag:
 
 ```html
 <adf-viewer [fileNodeId]="nodeId">
@@ -200,54 +200,49 @@ You can enable custom "More actions" menu by providing at least one action indid
 
 ![More actions](docassets/images/viewer-more-actions.png)
 
-### Custom extension handler
+### Extending the Viewer
 
-If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
+If you want to handle other file formats that are not yet supported by the Viewer component,
+you can define your own custom handler.
 
-Below you can find an example with the use of `extension-viewer` if you can handle 3d files
+Below you can find an example with the use of `adf-viewer-extension` if you can handle 3d files
 
 ```html
-<adf-viewer 
-    [(showViewer)]="fileShowed"
-    [fileNodeId]="fileNodeId"
-    [overlayMode]="true">
+<adf-viewer [fileNodeId]="fileNodeId">
     
-    <extension-viewer [supportedExtensions]="['obj','3ds']" #extension>
+    <adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
         <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
             <threed-viewer 
                 [urlFile]="urlFileContent" 
                 [extension]="extension">
             </threed-viewer>
         </ng-template>
-    </extension-viewer>
+    </adf-viewer-extension>
 
 </adf-viewer> 
 ```
 
 Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
 
-It is possible to define multiple `extension-viewer` templates:
+It is possible to define multiple `adf-viewer-extension` templates:
 
 ```html
-<adf-viewer 
-    [(showViewer)]="fileShowed"
-    [fileNodeId]="fileNodeId"
-    [overlayMode]="true">
+<adf-viewer [fileNodeId]="fileNodeId">
 
-    <extension-viewer [supportedExtensions]="['xls','xlsx']" #extension>
-        <ng-template let-urlFileContent="urlFileContent"  >
+    <adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
+        <ng-template let-urlFileContent="urlFileContent">
             <my-custom-xls-component 
                 urlFileContent="urlFileContent">
             </my-custom-xls-component>
         </ng-template>
-    </extension-viewer>
+    </adf-viewer-extension>
 
-    <extension-viewer [supportedExtensions]="['txt']" #extension>
-        <ng-template  let-urlFileContent="urlFileContent" >               
+    <adf-viewer-extension [supportedExtensions]="['txt']" #extension>
+        <ng-template let-urlFileContent="urlFileContent" >               
             <my-custom-txt-component 
                 urlFileContent="urlFileContent">
             </my-custom-txt-component>
         </ng-template>
-    </extension-viewer>
+    </adf-viewer-extension>
 </adf-viewer> 
 ```

ng2-components/ng2-alfresco-viewer/index.ts

@@ -29,7 +29,7 @@ import { ViewerOpenWithComponent } from './src/components/viewer-open-with.compo
 import { ViewerSidebarComponent } from './src/components/viewer-sidebar.component';
 import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component';
 import { ViewerComponent } from './src/components/viewer.component';
-import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive';
+import { ViewerExtensionDirective } from './src/directives/viewer-extension.directive';
 import { RenderingQueueServices } from './src/services/rendering-queue.services';
 
 export { ViewerComponent } from './src/components/viewer.component';
@@ -41,7 +41,7 @@ export function declarations() {
         TxtViewerComponent,
         MediaPlayerComponent,
         PdfViewerComponent,
-        ExtensionViewerDirective,
+        ViewerExtensionDirective,
         UnknownFormatComponent,
         ViewerToolbarComponent,
         ViewerSidebarComponent,

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

@@ -121,7 +121,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
     private extensions = {
         image: ['png', 'jpg', 'jpeg', 'gif', 'bpm'],
         media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'],
-        text: ['txt', 'xml', 'js', 'html'],
+        text: ['txt', 'xml', 'js', 'html', 'json'],
         pdf: ['pdf']
     };
 

ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.spec.ts

@@ -22,7 +22,7 @@ import { Injector } from '@angular/core';
 import { async, getTestBed, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { ViewerComponent } from '../components/viewer.component';
-import { ExtensionViewerDirective } from './extension-viewer.directive';
+import { ViewerExtensionDirective } from './viewer-extension.directive';
 
 export class MockElementRef extends ElementRef {
     constructor() {
@@ -32,7 +32,7 @@ export class MockElementRef extends ElementRef {
 
 describe('ExtensionViewerDirective', () => {
     let injector: Injector;
-    let extensionViewerDirective: ExtensionViewerDirective;
+    let extensionViewerDirective: ViewerExtensionDirective;
     let viewerComponent: ViewerComponent;
 
     beforeEach(async(() => {
@@ -40,13 +40,13 @@ describe('ExtensionViewerDirective', () => {
             imports: [CoreModule],
             providers: [
                 { provide: Location, useClass: SpyLocation },
-                ExtensionViewerDirective,
+                ViewerExtensionDirective,
                 {provide: ElementRef, useClass: MockElementRef},
                 ViewerComponent
             ]
         });
         injector = getTestBed();
-        extensionViewerDirective = injector.get(ExtensionViewerDirective);
+        extensionViewerDirective = injector.get(ViewerExtensionDirective);
         viewerComponent = injector.get(ViewerComponent);
         extensionViewerDirective.templateModel = {template: '', isVisible: false};
     }));

ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.ts

@@ -15,19 +15,13 @@
  * limitations under the License.
  */
 
-import {
-    AfterContentInit,
-    ContentChild,
-    Directive,
-    Input,
-    TemplateRef
-} from '@angular/core';
+import { AfterContentInit, ContentChild, Directive, Input, TemplateRef } from '@angular/core';
 import { ViewerComponent } from '../components/viewer.component';
 
 @Directive({
-    selector: 'extension-viewer'
+    selector: 'adf-viewer-extension'
 })
-export class ExtensionViewerDirective implements AfterContentInit {
+export class ViewerExtensionDirective implements AfterContentInit {
 
     @ContentChild(TemplateRef)
     template: any;