mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
allow toggling viwer dialog toolbar elements (#2319)
This commit is contained in:
parent
aed9532d9d
commit
5dd666f423
@ -9,7 +9,10 @@
|
|||||||
</span>
|
</span>
|
||||||
</adf-toolbar-title>
|
</adf-toolbar-title>
|
||||||
|
|
||||||
<button md-button [mdMenuTriggerFor]="mnuOpenWith">
|
<button
|
||||||
|
*ngIf="settings.allowOpenWith"
|
||||||
|
md-button
|
||||||
|
[mdMenuTriggerFor]="mnuOpenWith">
|
||||||
Open with
|
Open with
|
||||||
<md-icon>arrow_drop_down</md-icon>
|
<md-icon>arrow_drop_down</md-icon>
|
||||||
</button>
|
</button>
|
||||||
@ -31,22 +34,31 @@
|
|||||||
<adf-toolbar-divider></adf-toolbar-divider>
|
<adf-toolbar-divider></adf-toolbar-divider>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
*ngIf="downloadUrl"
|
*ngIf="settings.allowDownload && settings.downloadUrl"
|
||||||
md-icon-button
|
md-icon-button
|
||||||
mdTooltip="Download"
|
mdTooltip="Download"
|
||||||
(click)="download()">
|
(click)="download()">
|
||||||
<md-icon>file_download</md-icon>
|
<md-icon>file_download</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button md-icon-button mdTooltip="Print">
|
<button
|
||||||
|
*ngIf="settings.allowPrint"
|
||||||
|
md-icon-button
|
||||||
|
mdTooltip="Print">
|
||||||
<md-icon>print</md-icon>
|
<md-icon>print</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button md-icon-button mdTooltip="Share">
|
<button
|
||||||
|
*ngIf="settings.allowShare"
|
||||||
|
md-icon-button
|
||||||
|
mdTooltip="Share">
|
||||||
<md-icon>share</md-icon>
|
<md-icon>share</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button md-icon-button [mdMenuTriggerFor]="menu">
|
<button
|
||||||
|
*ngIf="settings.allowMoreMenu"
|
||||||
|
md-icon-button
|
||||||
|
[mdMenuTriggerFor]="menu">
|
||||||
<md-icon>more_vert</md-icon>
|
<md-icon>more_vert</md-icon>
|
||||||
</button>
|
</button>
|
||||||
<md-menu #menu="mdMenu">
|
<md-menu #menu="mdMenu">
|
||||||
@ -64,7 +76,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</md-menu>
|
</md-menu>
|
||||||
|
|
||||||
<ng-container *ngIf="allowInfoDrawer">
|
<ng-container *ngIf="settings.allowInfoDrawer">
|
||||||
<adf-toolbar-divider></adf-toolbar-divider>
|
<adf-toolbar-divider></adf-toolbar-divider>
|
||||||
|
|
||||||
<button md-icon-button mdTooltip="Info"
|
<button md-icon-button mdTooltip="Info"
|
||||||
|
@ -35,20 +35,23 @@ export class ViewerDialogComponent implements OnInit {
|
|||||||
fileName: string = 'Unknown file';
|
fileName: string = 'Unknown file';
|
||||||
fileUrl: string = null;
|
fileUrl: string = null;
|
||||||
fileMimeType: string = null;
|
fileMimeType: string = null;
|
||||||
downloadUrl: string = null;
|
|
||||||
|
|
||||||
allowInfoDrawer = false;
|
|
||||||
showInfoDrawer = false;
|
|
||||||
|
|
||||||
unknownFormatIcon = 'wifi_tethering';
|
unknownFormatIcon = 'wifi_tethering';
|
||||||
unknownFormatText = 'Document preview could not be loaded.';
|
unknownFormatText = 'Document preview could not be loaded.';
|
||||||
|
|
||||||
isLoading: boolean = false;
|
isLoading: boolean = false;
|
||||||
|
showInfoDrawer = false;
|
||||||
viewerType: string = null;
|
viewerType: string = null;
|
||||||
asText: Observable<string>;
|
asText: Observable<string>;
|
||||||
|
|
||||||
private nodeId: string;
|
settings: ViewerDialogSettings = {
|
||||||
|
allowDownload: true,
|
||||||
|
allowPrint: true,
|
||||||
|
allowShare: true,
|
||||||
|
allowOpenWith: true,
|
||||||
|
allowMoreMenu: true,
|
||||||
|
allowInfoDrawer: true
|
||||||
|
};
|
||||||
|
|
||||||
private types = [
|
private types = [
|
||||||
{ mimeType: 'application/x-javascript', type: 'text' },
|
{ mimeType: 'application/x-javascript', type: 'text' },
|
||||||
@ -59,22 +62,25 @@ export class ViewerDialogComponent implements OnInit {
|
|||||||
@Inject(MD_DIALOG_DATA) settings: ViewerDialogSettings,
|
@Inject(MD_DIALOG_DATA) settings: ViewerDialogSettings,
|
||||||
private http: Http,
|
private http: Http,
|
||||||
private renditionService: RenditionsService) {
|
private renditionService: RenditionsService) {
|
||||||
|
this.settings = Object.assign({}, this.settings, settings);
|
||||||
|
this.setupDialog(this.settings);
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupDialog(settings: ViewerDialogSettings) {
|
||||||
this.fileUrl = settings.fileUrl;
|
this.fileUrl = settings.fileUrl;
|
||||||
this.fileName = settings.fileName;
|
this.fileName = settings.fileName;
|
||||||
this.fileMimeType = settings.fileMimeType;
|
this.fileMimeType = settings.fileMimeType;
|
||||||
this.downloadUrl = settings.downloadUrl;
|
|
||||||
this.nodeId = settings.nodeId;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.viewerType = this.detectViewerType(this.fileMimeType);
|
this.viewerType = this.detectViewerType(this.fileMimeType);
|
||||||
this.asText = this.getAsText();
|
this.asText = this.getAsText();
|
||||||
|
|
||||||
if (this.viewerType !== 'unknown') {
|
if (this.viewerType === 'unknown') {
|
||||||
this.allowInfoDrawer = true;
|
this.settings.allowInfoDrawer = false;
|
||||||
} else {
|
|
||||||
if (this.nodeId) {
|
if (this.settings.nodeId) {
|
||||||
this.displayAsPdf(this.nodeId);
|
this.displayAsPdf(this.settings.nodeId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -108,12 +114,12 @@ export class ViewerDialogComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
download() {
|
download() {
|
||||||
if (this.downloadUrl && this.fileName) {
|
if (this.settings.downloadUrl && this.fileName) {
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
|
|
||||||
link.style.display = 'none';
|
link.style.display = 'none';
|
||||||
link.download = this.fileName;
|
link.download = this.fileName;
|
||||||
link.href = this.downloadUrl;
|
link.href = this.settings.downloadUrl;
|
||||||
|
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
|
@ -20,6 +20,12 @@ export interface ViewerDialogSettings {
|
|||||||
fileMimeType?: string;
|
fileMimeType?: string;
|
||||||
fileName?: string;
|
fileName?: string;
|
||||||
downloadUrl?: string;
|
downloadUrl?: string;
|
||||||
|
|
||||||
nodeId?: string;
|
nodeId?: string;
|
||||||
|
|
||||||
|
allowDownload?: boolean;
|
||||||
|
allowPrint?: boolean;
|
||||||
|
allowShare?: boolean;
|
||||||
|
allowOpenWith?: boolean;
|
||||||
|
allowMoreMenu?: boolean;
|
||||||
|
allowInfoDrawer?: boolean;
|
||||||
}
|
}
|
||||||
|
@ -30,19 +30,19 @@ export class ViewerService {
|
|||||||
private apiService: AlfrescoApiService) {
|
private apiService: AlfrescoApiService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
showViewerForNode(node: MinimalNodeEntryEntity): Promise<boolean> {
|
showViewerForNode(node: MinimalNodeEntryEntity, settings: ViewerDialogSettings = {}): Promise<boolean> {
|
||||||
return new Promise<boolean>((resolve, reject) => {
|
return new Promise<boolean>((resolve, reject) => {
|
||||||
const settings: ViewerDialogSettings = {
|
const dialogSettings = Object.assign({}, settings, {
|
||||||
fileName: node.name,
|
fileName: node.name,
|
||||||
fileMimeType: node.content.mimeType,
|
fileMimeType: node.content.mimeType,
|
||||||
fileUrl: this.apiService.contentApi.getContentUrl(node.id, false),
|
fileUrl: this.apiService.contentApi.getContentUrl(node.id, false),
|
||||||
downloadUrl: this.apiService.contentApi.getContentUrl(node.id, true),
|
downloadUrl: this.apiService.contentApi.getContentUrl(node.id, true),
|
||||||
nodeId: node.id
|
nodeId: node.id
|
||||||
};
|
});
|
||||||
|
|
||||||
const dialogRef = this.dialog.open(ViewerDialogComponent, {
|
const dialogRef = this.dialog.open(ViewerDialogComponent, {
|
||||||
panelClass: 'adf-viewer-dialog-panel',
|
panelClass: 'adf-viewer-dialog-panel',
|
||||||
data: settings
|
data: dialogSettings
|
||||||
});
|
});
|
||||||
|
|
||||||
dialogRef.afterClosed().subscribe(result => {
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
@ -51,12 +51,12 @@ export class ViewerService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
showViewerForNodeId(nodeId: string): Promise<boolean> {
|
showViewerForNodeId(nodeId: string, settings: ViewerDialogSettings = {}): Promise<boolean> {
|
||||||
return new Promise<boolean>((resolve, reject) => {
|
return new Promise<boolean>((resolve, reject) => {
|
||||||
this.apiService.nodesApi.getNode(nodeId).then(
|
this.apiService.nodesApi.getNode(nodeId).then(
|
||||||
(node: MinimalNodeEntity) => {
|
(node: MinimalNodeEntity) => {
|
||||||
if (node && node.entry && node.entry.isFile) {
|
if (node && node.entry && node.entry.isFile) {
|
||||||
return this.showViewerForNode(node.entry);
|
return this.showViewerForNode(node.entry, settings);
|
||||||
} else {
|
} else {
|
||||||
resolve(false);
|
resolve(false);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user