contentstack-imagevault/types/imagevault.ts

/**
 * @file TypeScript typings for ImageVault
 *
 * The types in this file are based on the source maps of the downloaded
 * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia
 *
 * They have been clean up and amended to.
 */

declare global {
  interface Window {
    ImageVault: {
      InsertMediaWindow: typeof InsertMediaWindow;
    };
    iframeRef: HTMLElement | null;
  }
}

export declare class InsertMediaWindow {
  constructor(config: Config, windowOptions: string);
  openImageVault: () => void;
  containerWindow: Window | null;
}

export interface IInsertSuccessCallback {
  (message: InsertSuccessMessageEvent): void;
}

/**
 * Message returned from the Success Callback method
 */
export interface InsertSuccessMessageEvent extends MessageEvent {
  /**
   * The response from the ImageVault insert operation
   */
  data: string;
  /**
   * The response from the ImageVault insert operation
   */
  response: InsertResponse;
}

export type MetaData = {
  DefinitionType?: number;
  Description: string | null;
  LanguageId: null;
  MetadataDefinitionId: number;
  Name: string;
  Value: string;
};

export type ImageVaultAsset = {
  id: number;
  title: string;
  url: string;
  dimensions: {
    width: number;
    height: number;
    aspectRatio: number;
  };
  meta: { alt: string | undefined; caption: string | undefined };
};

/**
 * The response from ImageVault when inserting an asset
 */
export declare class InsertResponse {
  /**
   * The media item id of the asset
   */
  Id: number;
  /**
   * The id of the vault where the asset resides
   */
  VaultId: number;
  /**
   * The name of the asset
   */
  Name: string;
  /**
   * The conversion selected by the user. Is an array but will only contain one object
   */
  MediaConversions: MediaConversion[];
  /**
   * Date when the asset was added to ImageVault
   */
  DateAdded: string;
  /**
   * Name of the user that added the asset to ImageVault
   */
  AddedBy: string;

  Metadata?: MetaData[] | undefined;
}

/**
 * Defines a media asset, original or conversion
 */
export declare class MediaConversion {
  /**
   * The url to the conversion
   */
  Url: string;
  /**
   * Name of the conversion
   */
  Name: string;
  /**
   * Html representing the conversion
   */
  Html: string;
  /**
   * Content type of the conversion
   */
  ContentType: string;
  /**
   * Width, in pixels, of the conversion
   */
  Width: number;
  /**
   * Height, in pixels, of the conversion
   */
  Height: number;
  /**
   * Aspect ratio of the conversion
   */
  AspectRatio: number;
  /**
   * Width of the selected/requested format
   */
  FormatWidth: number;
  /**
   * Height of the selected/requested format
   */
  FormatHeight: number;
  /**
   * Aspect ratio of the selected/requested format
   */
  FormatAspectRatio: number;
  /**
   * Name of the media format
   */
  MediaFormatName: string;
  /**
   * Id of the selected media format
   */
  MediaFormatId: number;
}
/**
 * Defines where an ImageVault asset is used when requesting it
 */
export declare class PublishDetails {
  /**
   * The textual description on where an asset is used
   */
  text: string;
  /**
   * The url to where the asset is used
   */
  url: string;
  /**
   * An optional id for grouping usage
   */
  groupId?: string;
}

/**
 * Defines the configuration needed to invoke the insert function
 */
export declare class Config {
  /**
   * The url to the ImageVault ui that should be used
   */
  imageVaultUiUrl: string;
  /**
   * [Optional] Origin where the insert function is launched from. Is normally calculated and does not need to be supplied.
   */
  origin?: string;
  /**
   * The language that the ImageVault ui should be displayed in
   */
  uiLang: string;
  /**
   * [Optional] The language for the default content in ImageVault
   */
  pageLang?: string;
  /**
   * The publishingSource where the image should be used. Normally the url for the site.
   */
  publishingSource: string;
  /**
   * If it should be possible to select multiple assets from ImageVault. Default is false.
   */
  insertMultiple: boolean;
  /**
   * The url base that the media assets should use. Supply the url to a cdn.
   */
  mediaUrlBase: string;
  /**
   * The ids of the formats that the selection should result in.
   */
  formatId: string;
  /**
   * [Optional] The comma-separated id-list of additional metadata definitions that the selection should result in.
   */
  additionalMetadataIds?: string;
  /**
   * The publishDetails to use. If supplied, published urls are returned.
   */
  publishDetails?: PublishDetails;
  /**
   * Function that is invoked when the user insert items from ImageVault
   */
  success: IInsertSuccessCallback;
  /**
   * This function is called when the Insert window should be closed
   */
  close: (result: unknown) => void;
  /**
   * [Optional] This function is called whenever an error is encountered
   */
  error?: (result: unknown, errorMessage: string) => void;
  /**
   * [Optional] Listen on this method for debug messages
   */
  debug?: (result: unknown) => void;

  /**
   * [Optional] Set media url to edit existing media
   */
  mediaUrl?: string;
  /**
   * [Optional] Set media id to show specific media
   */
  mediaId?: number;

  /**
   * [Optional]
   * @0 (Default) Insert with format or choose format from dropdown in ImageVault UI
   * @1 Same as 0 (default) except that you can edit media in editor before insert
   */
  insertMode?: number;
}