Interface H5PEditorObject

Param: TWidgetMachineName

Typically PascalCased - MyWidget

Param: TWidgetName

Typically camelCased - myWidget

Param: TWidget

The widget class

See

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,
        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,
        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

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

constants: { otherLibraries: string }

contentId

contentId: H5PContentId

ContentType

ContentType: H5PEditorContentType

isIE

isIE: boolean

libraryCache

libraryCache: Record<string, unknown>

libraryLoaded

libraryLoaded: Record<string, unknown>

loadedCallbacks

loadedCallbacks: () => void[]

renderableCommonFields

renderableCommonFields: Record<string, unknown>

storage

storage: {
    get: (key: string, next: (value: unknown) => void) => void;
    set: (key: string, value: unknown) => void;
}

supportedLanguages

supportedLanguages: Record<string, string>

widgets

widgets: Record<string, unknown>

Methods

addCommonField

bindImportantDescriptionEvents

  • bindImportantDescriptionEvents(
        widget: IH5PWidget,
        fieldName: string,
        parent: H5PForm,
    ): void

  • Bind events to important description

    Parameters

    Returns void

canPaste

  • canPaste(
        clipboard: { generic?: unknown } & Record<string, unknown>,
        libs: Record<string, unknown>,
    ): boolean

  • Check if clipboard can be pasted

    Parameters

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

    Returns boolean

canPastePlus

  • canPastePlus(
        clipboard: { generic?: unknown } & Record<string, unknown>,
        libs: Record<string, unknown>,
    ):
        | { canPaste: true }
        | { canPaste: false; description: string; reason: string }

  • 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}.

checkErrors

  • checkErrors<TValue extends string | number | boolean | Record<string, unknown>>(
        $errors: JQuery,
        $input: JQuery,
        value: TValue,
    ): false | TValue

  • 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

confirmReplace

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

  • Confirm replace if there is content selected

    Parameters

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

    Returns void

createBooleanFieldMarkup

  • createBooleanFieldMarkup(
        field: H5PField,
        content: string,
        inputId?: string,
    ): string

  • Create HTML wrapper for a boolean field item.

    Parameters

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

    Returns string

createButton

  • createButton(
        id: string,
        title: string,
        handler: () => void,
        displayTitle?: boolean,
    ): JQuery<HTMLDivElement>

  • 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>

createCopyPasteButtons

  • createCopyPasteButtons(): string

  • Generate markup for the copy and paste buttons

    Returns string

createDescription

  • createDescription(description: string, inputId?: string): string

  • Create a description

    Parameters

    • description: string
    • OptionalinputId: string

    Returns string

createError

  • createError(message: string): string

  • Create an error paragraph with the given message

    Parameters

    • message: string

      Error message to display

    Returns string

    Message wrapped in

    -tags

createFieldMarkup

  • createFieldMarkup(field: H5PField, content: string, inputId?: string): string

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

    Parameters

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

    Returns string

    Since

    1.12

createImportance

createImportantDescription

  • createImportantDescription(
        importantDescription:
            | undefined
            | { description?: string; example?: string },
    ): string

  • Create an important description

    Parameters

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

    Returns string

createItem

  • 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

  • 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

    Deprecated

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

createLabel

  • createLabel(field: H5PField, content?: string): string

  • 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

createOption

  • createOption(value: string, text: string, selected?: boolean): string

  • 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

createText

  • createText(
        value?: string,
        maxLength?: number,
        placeholder?: string,
        id?: string,
        describedby?: string,
    ): string

  • 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

enableMetadata

  • enableMetadata(library: string): boolean

  • 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.

findAncestor

  • findAncestor(parent: H5PForm): undefined | H5PForm

  • Find the nearest ancestor which handles commonFields.

    Parameters

    Returns undefined | H5PForm

findField

findLibraryAncestor

  • findLibraryAncestor(parent: H5PForm): undefined | H5PForm

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

    Parameters

    Returns undefined | H5PForm

findSemanticsField

  • findSemanticsField(
        fieldName: string,
        semanticsStructure: H5PField | H5PField[],
    ): null | H5PField | H5PField[]

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

    Parameters

    Returns null | H5PField | H5PField[]

followField

  • followField<TField extends H5PField = H5PField>(
        parent: H5PForm,
        path: string,
        callback: (params: InferParamTypeFromFieldType<TField>) => void,
    ): void

  • 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

    Example

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

getDescriptionId

  • getDescriptionId(id: string): string

  • Helps generating a consistent description ID across fields

    Parameters

    • id: string

    Returns string

getNextFieldId

  • getNextFieldId(field: H5PField): string

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

    Parameters

    Returns string

getParentLibrary

  • getParentLibrary(parent: H5PForm): null | H5PForm

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

    Parameters

    Returns null | H5PForm

getParentZebra

  • getParentZebra(parent: H5PForm): "odd" | "even"

  • Alternate the background color of fields

    Parameters

    Returns "odd" | "even"

    odd or even to determine background color of callee

getWidgetName

  • getWidgetName(field: H5PField): string

  • Helper function for detecting field widget

    Parameters

    Returns string

htmlspecialchars

  • htmlspecialchars(escapedHtml: string): 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

    Example

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

joinNonEmptyStrings

  • joinNonEmptyStrings(strings: (undefined | string)[], separator?: string): string

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

    Parameters

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

      Default: " "

    Returns string

libraryFromString

libraryToString

  • libraryToString<
        TLib extends
            Pick<H5PLibrary, "machineName" | "majorVersion" | "minorVersion">,
    >(
        library: TLib,
    ): `${TLib["machineName"]} ${TLib["majorVersion"]}.${TLib["minorVersion"]}`

  • 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"]}`

loadJs

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

  • Help load JavaScripts, prevents double loading

    Parameters

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

    Returns void

loadLibrary

  • loadLibrary<TSemantics = unknown>(
        libraryName: `${string} ${number}.${number}`,
        callback: (semantics: TSemantics) => void,
    ): 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

processSemanticsChunk

removeChildren

  • removeChildren(children: IH5PWidget[]): void

  • Call remove on the given children

    Parameters

    Returns void

renderCommonField

  • renderCommonField(machineName: string, libraries?: H5PLibrary[]): 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

resetLoadedLibraries

  • resetLoadedLibraries(): void

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

    Returns void

setCommonFieldsWrapper

  • setCommonFieldsWrapper(parent: H5PForm, wrapper: HTMLElement): 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

t

  • t(library: string, key: string, vars?: Record<`:${string}`, string>): string

  • 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

updateCommonFieldsDefault

  • updateCommonFieldsDefault(
        semantics: H5PField[],
        translation: H5PField[],
        parentIsCommon?: boolean,
    ): void

  • 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

wrapFieldMarkup

  • wrapFieldMarkup(field: H5PField, markup: string): string

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

    Parameters

    Returns string

Settings

Member Visibility

On This Page

Properties
Methods