diff --git a/demo-shell-ng2/src/app/components/file-view/file-view.component.html b/demo-shell-ng2/src/app/components/file-view/file-view.component.html index 844dc06122..e7fd47a873 100644 --- a/demo-shell-ng2/src/app/components/file-view/file-view.component.html +++ b/demo-shell-ng2/src/app/components/file-view/file-view.component.html @@ -1,9 +1,36 @@ - - - - - + + + + + + + + diff --git a/docs/viewer.component.md b/docs/viewer.component.md index e967651dfa..e3d2b63419 100644 --- a/docs/viewer.component.md +++ b/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 @@ -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 - + - + - + ``` 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 - + - - + + - + - - + + - + ``` diff --git a/ng2-components/ng2-alfresco-viewer/index.ts b/ng2-components/ng2-alfresco-viewer/index.ts index 66374509d8..58263041c6 100644 --- a/ng2-components/ng2-alfresco-viewer/index.ts +++ b/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, diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts index 92a4a22438..68138380a8 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts +++ b/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'] }; diff --git a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts b/ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.spec.ts similarity index 91% rename from ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts rename to ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.spec.ts index 0dfa24656c..3a543e1467 100644 --- a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts +++ b/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}; })); diff --git a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts b/ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.ts similarity index 90% rename from ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts rename to ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.ts index d643b83e8c..93e22e48ce 100644 --- a/ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts +++ b/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;