h5p-types
    Preparing search index...

    Interface H5PEditorObject

    Typically PascalCased - MyWidget

    Typically camelCased - myWidget

    The widget class

    https://h5p.org/node/2468

    interface H5PEditorObject {
        $: JQueryStatic;
        constants: { otherLibraries: string };
        contentId: H5PContentId;
        ContentType: H5PEditorContentType;
        isIE: boolean;
        libraryCache: Record<string, unknown>;
        libraryLoaded: Record<string, unknown>;
        loadedCallbacks: (() => void)[];
        renderableCommonFields: Record<string, unknown>;
        storage: {
            get: (key: string, next: (value: unknown) => void) => void;
            set: (key: string, value: unknown) => void;
        };
        supportedLanguages: Record<string, string>;
        widgets: Record<string, unknown>;
        addCommonField<TField extends H5PField>(
            field: TField,
            parent: H5PForm,
            params: InferParamTypeFromFieldType<TField>,
            ancestor: H5PForm,
            skipAppendTo?: boolean,
        ): void;
        bindImportantDescriptionEvents(
            widget: IH5PWidget,
            fieldName: string,
            parent: H5PForm,
        ): void;
        canPaste(
            clipboard: { generic?: unknown } & Record<string, unknown>,
            libs: Record<string, unknown>,
        ): boolean;
        canPastePlus(
            clipboard: { generic?: unknown } & Record<string, unknown>,
            libs: Record<string, unknown>,
        ):
            | { canPaste: true }
            | { canPaste: false; description: string; reason: string };
        checkErrors<
            TValue extends string
            | number
            | boolean
            | Record<string, unknown>,
        >(
            $errors: JQuery,
            $input: JQuery,
            value: TValue,
        ): false | TValue;
        confirmReplace(library: string, top: number, next: () => void): void;
        createBooleanFieldMarkup(
            field: H5PField,
            content: string,
            inputId?: string,
        ): string;
        createButton(
            id: string,
            title: string,
            handler: () => void,
            displayTitle?: boolean,
        ): JQuery<HTMLDivElement>;
        createCopyPasteButtons(): string;
        createDescription(description: string, inputId?: string): string;
        createError(message: string): string;
        createFieldMarkup(
            field: H5PField,
            content: string,
            inputId?: string,
        ): string;
        createImportance<TImportance extends undefined | null | H5PImportance>(
            importance: undefined | null | H5PImportance,
        ): TImportance extends H5PImportance
            ? `importance-${TImportance<TImportance>}`
            : "";
        createImportantDescription(
            importantDescription:
                | undefined
                | { description?: string; example?: string },
        ): string;
        createItem(
            type:
                | "number"
                | "boolean"
                | "library"
                | "audio"
                | "file"
                | "group"
                | "image"
                | "list"
                | "select"
                | "text"
                | "video"
                | Number
                | Boolean
                | Audio
                | File
                | Group
                | Image
                | Library
                | List
                | Select
                | Text
                | Video,
            label: undefined | string,
            description: undefined | string,
            content: string,
        ): string;
        createLabel(field: H5PField, content?: string): string;
        createOption(value: string, text: string, selected?: boolean): string;
        createText(
            value?: string,
            maxLength?: number,
            placeholder?: string,
            id?: string,
            describedby?: string,
        ): string;
        enableMetadata(library: string): boolean;
        findAncestor(parent: H5PForm): undefined | H5PForm;
        findField<
            TField extends H5PForm = IH5PFieldInstance<unknown, H5PField>,
            TParent extends H5PForm = H5PForm,
        >(
            path: string | string[],
            parent: TParent,
        ): false | TField;
        findLibraryAncestor(parent: H5PForm): undefined | H5PForm;
        findSemanticsField(
            fieldName: string,
            semanticsStructure: H5PField | H5PField[],
        ): null | H5PField | H5PField[];
        followField<TField extends H5PField = H5PField>(
            parent: H5PForm,
            path: string,
            callback: (params: InferParamTypeFromFieldType<TField>) => void,
        ): void;
        getDescriptionId(id: string): string;
        getNextFieldId(field: H5PField): string;
        getParentLibrary(parent: H5PForm): null | H5PForm;
        getParentZebra(parent: H5PForm): "odd" | "even";
        getWidgetName(field: H5PField): string;
        htmlspecialchars(escapedHtml: string): string;
        joinNonEmptyStrings(
            strings: (undefined | string)[],
            separator?: string,
        ): string;
        libraryFromString<
            TLibraryName extends string,
            TMajorVersion extends number,
            TMinorVersion extends number,
        >(
            library: `${TLibraryName} ${TMajorVersion}.${TMinorVersion}`,
        ):
            | false
            | {
                machineName: TLibraryName;
                majorVersion: TMajorVersion;
                minorVersion: TMinorVersion;
            };
        libraryToString<
            TLib extends
                Pick<H5PLibrary, "machineName" | "majorVersion" | "minorVersion">,
        >(
            library: TLib,
        ): `${TLib["machineName"]} ${TLib["majorVersion"]}.${TLib["minorVersion"]}`;
        loadJs(src: string, doneCallback: () => void): void;
        loadLibrary<TSemantics = unknown>(
            libraryName: `${string} ${number}.${number}`,
            callback: (semantics: TSemantics) => void,
        ): void;
        processSemanticsChunk<TFields extends H5PField[] = H5PField[]>(
            semanticsChunk: TFields,
            params: Record<
                TFields[number]["name"],
                InferParamTypeFromFieldType<TFields[number]>,
            >,
            $wrapper: JQuery<HTMLElement>,
            parent: H5PForm,
            machineName?: string,
        ): void;
        removeChildren(children: IH5PWidget[]): void;
        renderCommonField(machineName: string, libraries?: H5PLibrary[]): void;
        resetLoadedLibraries(): void;
        setCommonFieldsWrapper(parent: H5PForm, wrapper: HTMLElement): void;
        t(
            library: string,
            key: string,
            vars?: Record<`:${string}`, string>,
        ): string;
        updateCommonFieldsDefault(
            semantics: H5PField[],
            translation: H5PField[],
            parentIsCommon?: boolean,
        ): void;
        wrapFieldMarkup(field: H5PField, markup: string): string;
        [key: string]: unknown;
    }

    Hierarchy

    • Record<string, unknown>
      • H5PEditorObject

    Indexable

    • [key: string]: unknown
    Index

    Properties

    $ constants contentId ContentType isIE libraryCache libraryLoaded loadedCallbacks renderableCommonFields storage supportedLanguages widgets

    Methods

    addCommonField bindImportantDescriptionEvents canPaste canPastePlus checkErrors confirmReplace createBooleanFieldMarkup createButton createCopyPasteButtons createDescription createError createFieldMarkup createImportance createImportantDescription createItem createLabel createOption createText enableMetadata findAncestor findField findLibraryAncestor findSemanticsField followField getDescriptionId getNextFieldId getParentLibrary getParentZebra getWidgetName htmlspecialchars joinNonEmptyStrings libraryFromString libraryToString loadJs loadLibrary processSemanticsChunk removeChildren renderCommonField resetLoadedLibraries setCommonFieldsWrapper t updateCommonFieldsDefault wrapFieldMarkup

    Properties

    $

    $: JQueryStatic
    constants: { otherLibraries: string }
    contentId: H5PContentId
    ContentType: H5PEditorContentType
    isIE: boolean
    libraryCache: Record<string, unknown>
    libraryLoaded: Record<string, unknown>
    loadedCallbacks: (() => void)[]
    renderableCommonFields: Record<string, unknown>
    storage: {
        get: (key: string, next: (value: unknown) => void) => void;
        set: (key: string, value: unknown) => void;
    }
    supportedLanguages: Record<string, string>
    widgets: Record<string, unknown>

    Methods

    • Bind events to important description

      Parameters

      Returns void

    • Check if clipboard can be pasted

      Parameters

      • clipboard: { generic?: unknown } & Record<string, unknown>
      • libs: Record<string, unknown>

      Returns boolean

    • Check if clipboard can be pasted and give reason if not.

      Parameters

      • clipboard: { generic?: unknown } & Record<string, unknown>

        Clipboard data.

      • libs: Record<string, unknown>

        Libraries to compare against.

      Returns { canPaste: true } | { canPaste: false; description: string; reason: string }

      Results. {canPaste: boolean, reason: string, description: string}.

    • Check if any errors have been set. Blocks tab-key on $input if $errors is not empty.

      Type Parameters

      • TValue extends string | number | boolean | Record<string, unknown>

      Parameters

      • $errors: JQuery
      • $input: JQuery
      • value: TValue

      Returns false | TValue

    • Confirm replace if there is content selected

      Parameters

      • library: string
      • top: number
      • next: () => void

      Returns void

    • Create HTML wrapper for a boolean field item.

      Parameters

      • field: H5PField
      • content: string
      • OptionalinputId: string

      Returns string

    • Makes it easier to add consistent buttons across the editor widget

      Parameters

      • id: string

        Typical CSS class format

      • title: string

        Human readable format

      • handler: () => void

        Action handler when triggered

      • OptionaldisplayTitle: boolean

        Show button with text. Default: false

      Returns JQuery<HTMLDivElement>

    • Generate markup for the copy and paste buttons

      Returns string

    • Create a description

      Parameters

      • description: string
      • OptionalinputId: string

      Returns string

    • Create an error paragraph with the given message

      Parameters

      • message: string

        Error message to display

      Returns string

      Message wrapped in

      -tags

    • Create HTML wrapper for a field item. Replacement for createItem()

      Parameters

      • field: H5PField
      • content: string
      • OptionalinputId: string

      Returns string

      1.12

    • Create an important description

      Parameters

      • importantDescription: undefined | { description?: string; example?: string }

      Returns string

    • Create the HTML wrapper for field items.

      Parameters

      • type:
            | "number"
            | "boolean"
            | "library"
            | "audio"
            | "file"
            | "group"
            | "image"
            | "list"
            | "select"
            | "text"
            | "video"
            | Number
            | Boolean
            | Audio
            | File
            | Group
            | Image
            | Library
            | List
            | Select
            | Text
            | Video

        Field type as string (ie. "text", "image", "number")

      • label: undefined | string

        Label text. Can be HTML

      • description: undefined | string

        Optional description text for the field. If set, it will be included beneath the field edit form

      • content: string

        HTML content for the field as a string. Inserted in the wrapper

      Returns string

      since version 1.12 (Jan. 2017, will be removed Jan. 2018). Use createFieldMarkup instead.

    • Create a label to wrap content in.

      Parameters

      • field: H5PField

        Semantics object for the field

      • Optionalcontent: string

        HTML string for content field

      Returns string

      Label as string of HTML

    • Create HTML for select options.

      Parameters

      • value: string

        The value of the option

      • text: string

        The text for the option

      • Optionalselected: boolean

        If set, the option is set as selected

      Returns string

      Option as string of HTML

    • Parameters

      • Optionalvalue: string

        Initial value for the text input

      • OptionalmaxLength: number

        Maximum number of characters

      • Optionalplaceholder: string

        Placeholder string shown if no value is entered

      • Optionalid: string

        The input field's id

      • Optionaldescribedby: string

        aria-describedby id

      Returns string

      Input field as string of HTML

    • Check if the current library is entitled for the metadata button. True by default.

      Parameters

      • library: string

        Current library.

      Returns boolean

      True, if form should have the metadata button.

    • Find the nearest ancestor which handles commonFields.

      Parameters

      Returns undefined | H5PForm

    • Find the nearest library ancestor. Used when adding common fields.

      Parameters

      Returns undefined | H5PForm

    • Search for a field or a set of fields. Returns null if the field isn't found.

      Parameters

      Returns null | H5PField | H5PField[]

    • Observe a field to get changes to its params.This is used to track changes within an object during editing in case the change needs to be reflected visually.

      An example from H5PEditor.DragQuestion. This observes the "settings/background" property and changes the background of the editor if changed.

      Type Parameters

      Parameters

      Returns void

      H5PEditor.followField(parent, 'settings/background', function (params) {
        setBackground(params);
      });

    • Helps generating a consistent description ID across fields

      Parameters

      • id: string

      Returns string

    • Generates a consistent and unique field ID for the given field

      Parameters

      Returns string

    • Recursively traverse parents to find the library our field belongs to

      Parameters

      Returns null | H5PForm

    • Alternate the background color of fields

      Parameters

      Returns "odd" | "even"

      odd or even to determine background color of callee

    • Helper function for detecting field widget

      Parameters

      Returns string

    • Mimics a simple version of PHP htmlspecialchars. Basically replaces brackets and quotes with corresponding HTML entities.

      Parameters

      • escapedHtml: string

        String to replace special chars

      Returns string

      const unescapedHtml = "<h1>"Hello world"</h1>";
      const escapedHtml = H5PEditor.htmlspecialchars(unescapedHtml);
      // &lt;h1&gt;&quot;Hello world&quot;&lt;/h1&gt;

    • Joins an array of strings if they are defined and non empty

      Parameters

      • strings: (undefined | string)[]
      • Optionalseparator: string

        Default: " "

      Returns string

    • Translates a library object to a library string.

      Type Parameters

      • TLib extends Pick<H5PLibrary, "machineName" | "majorVersion" | "minorVersion">

      Parameters

      • library: TLib

        Library object with machineName, majorVersion and minorVersion set

      Returns `${TLib["machineName"]} ${TLib["majorVersion"]}.${TLib["minorVersion"]}`

    • Help load JavaScripts, prevents double loading

      Parameters

      • src: string
      • doneCallback: () => void

      Returns void

    • Loads a complete library, with semantics, scripts and CSS from the server. Injects the javascript and stylesheets then returns the semantics object in the callback.

      Type Parameters

      • TSemantics = unknown

      Parameters

      • libraryName: `${string} ${number}.${number}`
      • callback: (semantics: TSemantics) => void

        Callback that will be called with the library's semantics when loaded

      Returns void

    • Call remove on the given children

      Parameters

      Returns void

    • Render common fields of content type with given machine name.

      Parameters

      • machineName: string

        Machine name of content type with common fields

      • Optionallibraries: H5PLibrary[]

        Library data for machine name

      Returns void

    • Reset loaded libraries - i.e removes CSS added previously

      Returns void

    • Attach ancestor of parent's common fields to a new wrapper

      Parameters

      • parent: H5PForm

        Parent content type instance that common fields should be attached to

      • wrapper: HTMLElement

        New wrapper of common fields

      Returns void

    • Translate text strings

      Parameters

      • library: string

        The library name(machineName), or "core"

      • key: string

        Translation string identifier

      • Optionalvars: Record<`:${string}`, string>

        Placeholders and values to replace in the text

      Returns string

      Translated string, or a default text if the translation is missing

    • Update common fields default values for the given semantics. Works by reference.

      Parameters

      • semantics: H5PField[]
      • translation: H5PField[]
      • OptionalparentIsCommon: boolean

        Used to indicated that one of the ancestors is a common field

      Returns void

    • Wraps a field with some metadata classes, and adds error field.

      Parameters

      Returns string

    Settings

    Member Visibility

    On This Page

    Properties
    Methods