Interface IH5PEditorImageField

Any class that implements this interface can be used as a widget in H5P. It defines the methods that are required for a widget to work: appendTo, validate and remove.

appendTo is called when the widget is added to the DOM. It provides the container element as a jQuery object. It is crucial to add the widget to the container element.

validate is called in certain cases by the H5P framework to check if the widget is valid, for instance when the user collapses the dropdown that the widget belongs in. If the widget is not valid, the dropdown will not collapse.

remove is called when the widget is removed from the DOM. Here you should remove any global event listeners that you have added to avoid memory leaks.

It is recommended to use the H5PWidget class from h5p-utils as a base class for your widget. It sets up the widget and adds the constructor parameters as properties on the class. It also extends the H5P.EventDispatcher class, which allows you to use the trigger and on methods to trigger and listen to events.

⚠️ If you decide not to extend the H5PWidget class, you will have to extend H5P.EventDispatcher yourself.

Example

import { H5PWidget } from "h5p-utils";
import type { IH5PWidget } from "h5p-types";

class MyWidget extends H5PWidget implements IH5PWidget {
  appendTo($container: JQuery<HTMLElement>) {
    const containerElement = $container.get(0);

    if (!containerElement) {
      throw new Error("Could not find container element for `MyWidget`");
    }

    const input = document.createElement("input");
    input.addEventListener("change", () =>
      this.setValue(this.field, input.value),
    );

    containerElement.appendChild(input);
  }

  validate() {
    return true;
  }

  remove() {}
}
interface IH5PEditorImageField {
    $common: null | JQuery;
    $commonButton: null | JQuery;
    $form: null | JQuery;
    addLanguages: (
        libraryName: string,
        languageCodes: (undefined | string)[],
    ) => void;
    changes: unknown[];
    children: H5PGroup[];
    commonFields: Record<
        `H5P.${string} ${number}.${number}`,
        {
            l10n: {
                instance: H5PGroup;
                params: unknown;
                parents: H5PForm<unknown>;
                setValues: H5PSetValue<unknown>;
            };
        },
    >;
    confirmationDialog: H5PConfirmationDialog;
    confirmRemovalDialog: H5PConfirmationDialog;
    copyright: H5PCopyright;
    currentLibrary?: `H5P.${string} ${number}.${number}`;
    field: H5PFieldImage;
    id: string;
    isEditing: boolean;
    isOriginalImage: boolean;
    metadata: H5PMetadata;
    metadataForm: null
    | H5PMetadataForm;
    off: <TData = unknown>(
        type: string,
        listener?: (event: TData) => void,
    ) => void;
    offset: { left: number; top: number };
    on: <TData = unknown, TType extends string = string>(
        type: TType,
        listener: EventListener<TData, TType>,
        thisArg?: ThisType<unknown>,
    ) => void;
    once: <TData = unknown, TType extends string = string>(
        type: TType,
        listener: EventListener<TData, TType>,
        thisArg?: ThisType<unknown>,
    ) => void;
    params: H5PImage;
    parent: H5PForm | IH5PFieldInstance;
    passReadies: boolean;
    readies: unknown[];
    ready: (callback: () => void) => void;
    removeLanguages: (
        libraryName: string,
        languageCodes: (undefined | string)[],
    ) => void;
    setValue: H5PSetValue<H5PImage>;
    trigger: <TData = unknown>(
        event: unknown,
        eventData?: TData,
        extras?: { bubbles?: boolean; external?: boolean },
    ) => void;
    triggerXAPI: (verb: XAPIVerb, extra: unknown) => void;
    zebra: "odd" | "even";
    appendTo($container: JQuery): void;
    createXAPIEventTemplate<TVerb extends XAPIVerb>(
        verb: TVerb,
        extra: unknown,
    ): XAPIEvent;
    openFileSelector(): void;
    remove(): void;
    upload(file: File, filename: string): void;
    uploadFiles(files: File[]): void;
    validate(): boolean;
}

Hierarchy (View Summary)

Properties

$common $commonButton $form addLanguages changes children commonFields confirmationDialog confirmRemovalDialog copyright currentLibrary? field id isEditing isOriginalImage metadata metadataForm off offset on once params parent passReadies readies ready removeLanguages setValue trigger triggerXAPI zebra

Methods

appendTo createXAPIEventTemplate openFileSelector remove upload uploadFiles validate

Properties

$common

$common: null | JQuery

$commonButton

$commonButton: null | JQuery

$form

$form: null | JQuery

addLanguages

addLanguages: (
    libraryName: string,
    languageCodes: (undefined | string)[],
) => void

Add new languages for content type.

changes

changes: unknown[]

children

children: H5PGroup[]

commonFields

commonFields: Record<
    `H5P.${string} ${number}.${number}`,
    {
        l10n: {
            instance: H5PGroup;
            params: unknown;
            parents: H5PForm<unknown>;
            setValues: H5PSetValue<unknown>;
        };
    },
>

confirmationDialog

confirmationDialog: H5PConfirmationDialog

confirmRemovalDialog

confirmRemovalDialog: H5PConfirmationDialog

copyright

copyright: H5PCopyright

OptionalcurrentLibrary

currentLibrary?: `H5P.${string} ${number}.${number}`

field

field: H5PFieldImage

id

id: string

isEditing

isEditing: boolean

isOriginalImage

isOriginalImage: boolean

metadata

metadata: H5PMetadata

metadataForm

metadataForm: null | H5PMetadataForm

off

off: <TData = unknown>(type: string, listener?: (event: TData) => void) => void

Remove event listener If no listener is specified, all listeners will be removed

Type declaration

    • <TData = unknown>(type: string, listener?: (event: TData) => void): void

    • Type Parameters

      • TData = unknown

      Parameters

      • type: string

        Event type

      • Optionallistener: (event: TData) => void

        Event listener

      Returns void

Throws

listener must be a function

offset

offset: { left: number; top: number }

on

on: <TData = unknown, TType extends string = string>(
    type: TType,
    listener: EventListener<TData, TType>,
    thisArg?: ThisType<unknown>,
) => void

Add new event listener

Type declaration

    • <TData = unknown, TType extends string = string>(
          type: TType,
          listener: EventListener<TData, TType>,
          thisArg?: ThisType<unknown>,
      ): void

    • Type Parameters

      • TData = unknown
      • TType extends string = string

      Parameters

      • type: TType

        Event type. If the event type is xAPI, the listener's event parameter will be of type XAPIEvent. Any dispatched XAPIEvent will trigger the xAPI event.

      • listener: EventListener<TData, TType>

        Event listener

      • OptionalthisArg: ThisType<unknown>

        Optionally specify the listener's this value

      Returns void

Throws

listener must be a function

once

once: <TData = unknown, TType extends string = string>(
    type: TType,
    listener: EventListener<TData, TType>,
    thisArg?: ThisType<unknown>,
) => void

Add new event listener that will be fired only once

Type declaration

    • <TData = unknown, TType extends string = string>(
          type: TType,
          listener: EventListener<TData, TType>,
          thisArg?: ThisType<unknown>,
      ): void

    • Type Parameters

      • TData = unknown
      • TType extends string = string

      Parameters

      • type: TType

        Event type. If the event type is xAPI, the listener's event parameter will be of type XAPIEvent. Any dispatched XAPIEvent will trigger the xAPI event.

      • listener: EventListener<TData, TType>

        Event listener

      • OptionalthisArg: ThisType<unknown>

        Optionally specify the listener's this value

      Returns void

Throws

listener must be a function

params

params: H5PImage

parent

parent: H5PForm | IH5PFieldInstance

passReadies

passReadies: boolean

readies

readies: unknown[]

ready

ready: (callback: () => void) => void

removeLanguages

removeLanguages: (
    libraryName: string,
    languageCodes: (undefined | string)[],
) => void

setValue

setValue: H5PSetValue<H5PImage>

trigger

trigger: <TData = unknown>(
    event: unknown,
    eventData?: TData,
    extras?: { bubbles?: boolean; external?: boolean },
) => void

Dispatch event

Type declaration

    • <TData = unknown>(
          event: unknown,
          eventData?: TData,
          extras?: { bubbles?: boolean; external?: boolean },
      ): void

    • Type Parameters

      • TData = unknown

      Parameters

      • event: unknown

        Event object or event type as string

      • OptionaleventData: TData

        Custom event data (used when event type as string is used as first argument)

      • Optionalextras: { bubbles?: boolean; external?: boolean }

      Returns void

triggerXAPI

triggerXAPI: (verb: XAPIVerb, extra: unknown) => void

zebra

zebra: "odd" | "even"

Methods

appendTo

  • appendTo($container: JQuery): void

  • Parameters

    • $container: JQuery

    Returns void

createXAPIEventTemplate

openFileSelector

  • openFileSelector(): void

  • Returns void

remove

upload

  • upload(file: File, filename: string): void

  • Parameters

    • file: File
    • filename: string

    Returns void

uploadFiles

  • uploadFiles(files: File[]): void

  • ⚠️ Only uploads the first file in the list ⚠️

    Parameters

    Returns void

validate

Settings

Member Visibility

On This Page

Properties
Methods