h5p-types
    Preparing search index...

    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.

    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<HTMLElement>;
        $commonButton: null | JQuery<HTMLElement>;
        $form: null | JQuery<HTMLElement>;
        addLanguages: (
            libraryName: string,
            languageCodes: (undefined | string)[],
        ) => void;
        changes: unknown[];
        children: H5PGroup[];
        commonFields: Record<
            `H5P.${string} ${number}.${number}`,
            {
                l10n: {
                    instance: H5PGroup;
                    params: unknown;
                    parents: H5PForm;
                    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<unknown, H5PField>;
        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<HTMLElement>): 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)

    Index

    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: null | JQuery<HTMLElement>
    $commonButton: null | JQuery<HTMLElement>
    $form: null | JQuery<HTMLElement>
    addLanguages: (
        libraryName: string,
        languageCodes: (undefined | string)[],
    ) => void

    Add new languages for content type.

    changes: unknown[]
    children: H5PGroup[]
    commonFields: Record<
        `H5P.${string} ${number}.${number}`,
        {
            l10n: {
                instance: H5PGroup;
                params: unknown;
                parents: H5PForm;
                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

    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

    listener must be a function

    offset: { left: number; top: number }
    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

    listener must be a function

    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

    listener must be a function

    params: H5PImage
    parent: H5PForm | IH5PFieldInstance<unknown, H5PField>
    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

    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: (verb: XAPIVerb, extra: unknown) => void
    zebra: "odd" | "even"

    Methods

    • Returns void

    • Parameters

      • file: File
      • filename: string

      Returns void

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

      Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods