...
| Code Block |
|---|
export enum MessageType {
AssetMessage = 'AssetMessage',
ChangeUrl = 'ChangeUrl',
SmartPickerInitialized = 'SmartPickerInitialized',
}
export interface DigizuitePostMessage {
messageType: MessageType;
}
export class DigizuiteInitPostMessage implements DigizuitePostMessage {
messageType = MessageType.SmartPickerInitialized;
}
export class DigizuiteChangeUrlPostMessage implements DigizuitePostMessage {
messageType = MessageType.ChangeUrl;
mmUrl: string;
constructor(mmUrl: string) {
this.mmUrl = mmUrl;
}
}
export class DigizuiteAssetPostMessage implements DigizuitePostMessage {
messageType = MessageType.AssetMessage;
asset: AssetMessage;
constructor(asset: AssetMessage) {
this.asset = asset;
}
}
export interface AssetMessage {
assetId: number;
itemId: number;
title: string;
description: string;
downloadUrl: string;
thumb: string;
extension: string;
} |
Add the iframe to your html:
| Code Block |
|---|
<iframe
class="digizuite-unified-dam-connector"
height="100%"
width="100%"
frameBorder="0"
[src]="https://yourmediamanager.com/embedded"
></iframe> |
Listening to events
As mentioned above, the iframe will post messages to its parent / host application. Listening to these events are what makes the magic. It can be done in different ways and most modern frameworks have ways for handling it. But since all are JavaScript frameworks then the most basic way in any kind of application would be to use ‘addEventListener’.
...