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
}