diff --git a/docs/docassets/images/viewer-more-actions.png b/docs/docassets/images/viewer-more-actions.png new file mode 100644 index 0000000000..3ad239e616 Binary files /dev/null and b/docs/docassets/images/viewer-more-actions.png differ diff --git a/docs/docassets/images/viewer-open-with.png b/docs/docassets/images/viewer-open-with.png new file mode 100644 index 0000000000..98bc301d9d Binary files /dev/null and b/docs/docassets/images/viewer-open-with.png differ diff --git a/docs/viewer.component.md b/docs/viewer.component.md index 1d39b5441b..52201abc3b 100644 --- a/docs/viewer.component.md +++ b/docs/viewer.component.md @@ -51,13 +51,11 @@ Using with file url: | showToolbar | boolean | true | Hide or show the toolbars | | displayName | string | | You can specify the name of the file | | allowGoBack | boolean | true | Allow `back` navigation | -| allowOpenWith | boolean | false | Toggle `Open With` options | | allowDownload | boolean | true | Toggle download feature | | allowPrint | boolean | false | Toggle printing feature | | allowShare | boolean | false | Toggle sharing feature | | allowInfoDrawer | boolean |false | Toogle info drawer feature | | showInfoDrawer | boolean | false | Toggles info drawer visibility. Requires `allowInfoDrawer` to be set to `true`. | -| allowMoreActions | boolean | false | Toggles `More actions` feature | ## Details @@ -139,6 +137,60 @@ The `allowInfoDrawer` property should be set to `true` to enable Info Drawer fea Everything you put inside the "adf-viewer-info-drawer" tags is going to be rendered instead of the default info drawer. +### Custom "Open With" menu + +You can enable custom "Open With" menu by providing at least one action inside the "adf-viewer-open-with" tag: + +```html + + + + + + + + + +``` + +![Open with](docassets/images/viewer-open-with.png) + +### Custom "More actions" menu + +You can enable custom "More actions" menu by providing at least one action indide the "adf-viewer-more-actions" tag: + +```html + + + + + + + + + +``` + +![More actions](docassets/images/viewer-more-actions.png) + ### Custom extension handler 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. diff --git a/ng2-components/ng2-alfresco-viewer/index.ts b/ng2-components/ng2-alfresco-viewer/index.ts index 8315802dfc..cb76e11ea6 100644 --- a/ng2-components/ng2-alfresco-viewer/index.ts +++ b/ng2-components/ng2-alfresco-viewer/index.ts @@ -25,6 +25,8 @@ import { PdfViewerComponent } from './src/components/pdfViewer.component'; import { TxtViewerComponent } from './src/components/txtViewer.component'; import { UnknownFormatComponent } from './src/components/unknown-format/unknown-format.component'; import { ViewerInfoDrawerComponent } from './src/components/viewer-info-drawer.component'; +import { ViewerMoreActionsComponent } from './src/components/viewer-more-actions.component'; +import { ViewerOpenWithComponent } from './src/components/viewer-open-with.component'; import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component'; import { ViewerComponent } from './src/components/viewer.component'; import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive'; @@ -42,7 +44,9 @@ export function declarations() { ExtensionViewerDirective, UnknownFormatComponent, ViewerToolbarComponent, - ViewerInfoDrawerComponent + ViewerInfoDrawerComponent, + ViewerOpenWithComponent, + ViewerMoreActionsComponent ]; } diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-more-actions.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-more-actions.component.ts new file mode 100644 index 0000000000..5c1a309c7f --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-more-actions.component.ts @@ -0,0 +1,28 @@ +/*! + * @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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'adf-viewer-more-actions', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'adf-viewer-more-actions' }, + template: `` +}) +export class ViewerMoreActionsComponent { +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer-open-with.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer-open-with.component.ts new file mode 100644 index 0000000000..8c9fa38fb5 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer-open-with.component.ts @@ -0,0 +1,28 @@ +/*! + * @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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'adf-viewer-open-with', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'adf-viewer-open-with' }, + template: `` +}) +export class ViewerOpenWithComponent { +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html index d25d72e1b7..113336074f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html @@ -20,24 +20,13 @@ {{ displayName }} - + - - - + @@ -55,23 +44,12 @@ share - + - - - - + + diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts index c479f802d7..7a2efc33ad 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts @@ -31,6 +31,8 @@ import { PdfViewerComponent } from './pdfViewer.component'; import { TxtViewerComponent } from './txtViewer.component'; import { UnknownFormatComponent } from './unknown-format/unknown-format.component'; import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component'; +import { ViewerMoreActionsComponent } from './viewer-more-actions.component'; +import { ViewerOpenWithComponent } from './viewer-open-with.component'; import { ViewerToolbarComponent } from './viewer-toolbar.component'; import { ViewerComponent } from './viewer.component'; @@ -60,6 +62,52 @@ class ViewerWithCustomToolbarComponent {} }) class ViewerWithCustomInfoDrawerComponent {} +@Component({ + selector: 'adf-viewer-container-open-with', + template: ` + + + + + + + + ` +}) +class ViewerWithCustomOpenWithComponent {} + +@Component({ + selector: 'adf-viewer-container-more-actions', + template: ` + + + + + + + + ` +}) +class ViewerWithCustomMoreActionsComponent {} + describe('ViewerComponent', () => { let component: ViewerComponent; @@ -82,8 +130,12 @@ describe('ViewerComponent', () => { UnknownFormatComponent, ViewerInfoDrawerComponent, ViewerToolbarComponent, + ViewerOpenWithComponent, + ViewerMoreActionsComponent, ViewerWithCustomToolbarComponent, - ViewerWithCustomInfoDrawerComponent + ViewerWithCustomInfoDrawerComponent, + ViewerWithCustomOpenWithComponent, + ViewerWithCustomMoreActionsComponent ], providers: [ RenderingQueueServices, @@ -128,6 +180,22 @@ describe('ViewerComponent', () => { expect(customElement.querySelector('.custom-info-drawer-element')).toBeDefined(); }); + it('should use custom open with menu', () => { + let customFixture = TestBed.createComponent(ViewerWithCustomOpenWithComponent); + let customElement: HTMLElement = customFixture.nativeElement; + + customFixture.detectChanges(); + expect(customElement.querySelector('.adf-viewer-container-open-with')).toBeDefined(); + }); + + it('should use custom more actions menu', () => { + let customFixture = TestBed.createComponent(ViewerWithCustomMoreActionsComponent); + let customElement: HTMLElement = customFixture.nativeElement; + + customFixture.detectChanges(); + expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined(); + }); + describe('View', () => { describe('Overlay mode true', () => { 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 adfab95b01..612a408b71 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts @@ -24,6 +24,8 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api'; import { AlfrescoApiService, BaseEvent, LogService, RenditionsService } from 'ng2-alfresco-core'; import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component'; +import { ViewerMoreActionsComponent } from './viewer-more-actions.component'; +import { ViewerOpenWithComponent } from './viewer-open-with.component'; import { ViewerToolbarComponent } from './viewer-toolbar.component'; @Component({ @@ -41,8 +43,14 @@ export class ViewerComponent implements OnDestroy, OnChanges { @ContentChild(ViewerInfoDrawerComponent) infoDrawer: ViewerInfoDrawerComponent; + @ContentChild(ViewerOpenWithComponent) + mnuOpenWith: ViewerOpenWithComponent; + + @ContentChild(ViewerMoreActionsComponent) + mnuMoreActions: ViewerMoreActionsComponent; + @Input() - urlFile: string = ''; + urlFile = ''; @Input() blobFile: Blob; @@ -51,23 +59,20 @@ export class ViewerComponent implements OnDestroy, OnChanges { fileNodeId: string = null; @Input() - overlayMode: boolean = false; + overlayMode = false; @Input() - showViewer: boolean = true; + showViewer = true; @Input() showToolbar = true; @Input() - displayName: string = 'Unknown'; + displayName = 'Unknown'; @Input() allowGoBack = true; - @Input() - allowOpenWith = false; - @Input() allowDownload = true; @@ -83,9 +88,6 @@ export class ViewerComponent implements OnDestroy, OnChanges { @Input() showInfoDrawer = false; - @Input() - allowMoreActions = false; - @Output() goBack = new EventEmitter>(); @@ -95,10 +97,10 @@ export class ViewerComponent implements OnDestroy, OnChanges { @Output() extensionChange = new EventEmitter(); - viewerType: string = 'unknown'; + viewerType = 'unknown'; downloadUrl: string = null; - fileName: string = 'document'; - isLoading: boolean = false; + fileName = 'document'; + isLoading = false; extensionTemplates: { template: TemplateRef, isVisible: boolean }[] = []; externalExtensions: string[] = [];