ElementButton

Namespace for creating HTML buttons

Index

Interfaces

• CustomIcon
• Options

Type Aliases

• StaticNode

Functions

• _GetClickTouchListeners
• _KeyDownRadio
• _ParseIcons
• _QueryDFS
• Create
• CreateCraftTooltipContent
• CreateForActivity
• CreateForAsset
• ReloadAssetIcons
• SetRole

Interfaces

CustomIcon

CustomIcon:

Input options for creating custom button icons

iconSrc

iconSrc: string

The HTMLImageElement.src of the icon

name

name: string

The internal ID of the icon

optionaltooltipText

tooltipText?: StaticNode

The tooltip component associated with the icon

Options

Options:

Various options that can be passed along to ElementButton.Create

optionalallowRequiredClick

allowRequiredClick?: boolean

Enabled buttons with a checkbox or radio role can normally not be clicked if the aria-required: "true" is set. Setting this option to true disables that behavior, clicking an already enabled button thus firing its click events once again rather than aborting.

optionalariaChecked

ariaChecked?: boolean | undefined | true | false | mixed

The HTMLButtonElement.ariaChecked of the button

optionalariaControls

ariaControls?: string | Element | readonly (string | Element)[]

The elements (or IDs thereof) controlled by the button; see the aria-controls attribute

optionalariaExpanded

ariaExpanded?: boolean | undefined | true | false

The HTMLButtonElement.ariaExpanded of the button

optionalariaHasPopup

ariaHasPopup?: boolean | grid | dialog | menu | true | false | listbox | tree

The HTMLButtonElement.ariaHasPopup of the button

optionalclickDisabled

clickDisabled?: (this, event) => any

A click event listener to-be fired when a button is disabled via aria-disabled: "true".

---

Type declaration

• • (this, event): any

  • Parameters

    • this: HTMLButtonElement

    • event: MouseEvent

    Returns any

optionaldisabled

disabled?: boolean

Whether the button should be disabled or not

optionalicons

icons?: readonly (InventoryIcon | CustomIcon)[]

Button icons to-be displayed in the top-left corner of the button.

Alternatively, one can directly pass the icon's HTMLImageElement.src and its tooltip component.

optionalimage

image?: string

A background image for the button

optionalimageColor

imageColor?: string

Overlay a color on top of the button image. Defaults to background-blend-mode: multiply for overlaying the color.

optionallabel

label?: StaticNode

A button label

optionallabelPosition

labelPosition?: left | right | top | bottom | center

The position of the button label

optionalname

name?: string

The HTMLButtonElement.name of the button

optionalnoStyling

noStyling?: boolean

Whether to limit the default styling of the button's border and background

optionalrole

role?: checkbox | radio | combobox | menuitemradio | menuitemcheckbox | spinbutton | menuitem | switch

The role of the button. All accepted values are currently special-cased in order to set role-specific event listeners and/or attributes.

optionaltabindex

tabindex?: number

The HTMLButtonElement.tabIndex of the button

optionaltooltip

tooltip?: StaticNode

Optional tooltip content. If not supplied then one should manually prepend it to the tooltip later

optionaltooltipPosition

tooltipPosition?: left | right | top | bottom

The position of the tooltip w.r.t. the button

optionaltooltipRole

tooltipRole?: label | none | description

The aria accessibility role of the the tooltip; defaults to description if a ElementButton.Options.label is present and label otherwise:

• label (aria-labelledby): A compact, 1-line summary of the button
• description (aria-describedby): A longer, potentially multi-line, button description
• none: Nothing

Type Aliases

StaticNode

StaticNode: null | string | Node | HTMLOptions<any> | readonly (null | undefined | string | Node | HTMLOptions<any>)[]

An input type for representing one or more text nodes and/or non-interactive DOM elements (e.g. <i> or <code>)

Functions

_GetClickTouchListeners

• _GetClickTouchListeners(): { bcTouchHold: (this, ev) => void; blur: (this, ev) => void; click: (this, ev) => void; touchcancel: (this, ev) => void; touchend: (this, ev) => void; touchmove: (this, ev) => void; touchstart: (this, ev) => void }

• Returns { bcTouchHold: (this, ev) => void; blur: (this, ev) => void; click: (this, ev) => void; touchcancel: (this, ev) => void; touchend: (this, ev) => void; touchmove: (this, ev) => void; touchstart: (this, ev) => void }

  • bcTouchHold: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: PointerEvent

        Returns void

  • blur: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: FocusEvent

        Returns void

  • click: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: PointerEvent

        Returns void

  • touchcancel: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: TouchEvent

        Returns void

  • touchend: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: TouchEvent

        Returns void

  • touchmove: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: TouchEvent

        Returns void

  • touchstart: (this, ev) => void

    • • (this, ev): void

      • Parameters

        • this: HTMLButtonElement

        • ev: TouchEvent

        Returns void

_KeyDownRadio

• _KeyDownRadio(...this, ev): void

• Parameters

  • rest...this: any

  • ev: KeyboardEvent

  Returns void

_ParseIcons

• _ParseIcons(id, icons): { iconGrid: HTMLDivElement; tooltip: [HTMLSpanElement, HTMLElement] }

• ---

  Parameters

  • id: string

    The ID of the parent element

  • optionalicons: readonly (InventoryIcon | CustomIcon)[]

    The (optional) list of icons

  Returns { iconGrid: HTMLDivElement; tooltip: [HTMLSpanElement, HTMLElement] }

  • null if the provided icon list is empty and otherwise an object containing the icon grid and a icon-specific tooltip

  • iconGrid: HTMLDivElement

  • tooltip: [HTMLSpanElement, HTMLElement]

_QueryDFS

• _QueryDFS(root, query, filter): Generator<Element, void, any>

• ---

  Parameters

  • root: Element

  • query: string

  • filter: (el) => boolean

  Returns Generator<Element, void, any>

Create

• Create(id, onClick, options, htmlOptions): HTMLButtonElement

• ---

  Parameters

  • id: string

    The ID of the to-be created search button

  • onClick: (this, ev) => any

    The click event listener to-be attached to the tooltip

  • optionaloptions: Options

    High level options for the to-be created button

  • optionalhtmlOptions: Partial<Record<button | img | label | tooltip, Omit<HTMLOptions<any>, tag>>>

    Additional low-level ElementCreate options to-be applied to the either the button or tooltip

  Returns HTMLButtonElement

  • The created button

CreateCraftTooltipContent

• CreateCraftTooltipContent(craft): HTMLElement[]

• ---

  Parameters

  • craft: CraftingItem

  Returns HTMLElement[]

CreateForActivity

• CreateForActivity(idPrefix, activity, C, onClick, options, htmlOptions): HTMLButtonElement

• ---

  Parameters

  • idPrefix: string

    The ID of the to-be created search button

  • activity: ItemActivity

    The activity for which to create a button

  • C: Character

    The target character of the activity

  • onClick: (this, ev) => any

    The click event listener to-be attached to the tooltip

  • optionaloptions: Options = null

    High level options for the to-be created button

  • htmlOptions: Partial<Record<button | img | label | tooltip, Omit<HTMLOptions<any>, tag>>> = null

    Additional low-level ElementCreate options to-be applied to the either the button or tooltip

  Returns HTMLButtonElement

  • The created button

CreateForAsset

• CreateForAsset(idPrefix, asset, C, onClick, options, htmlOptions): HTMLButtonElement

• ---

  Parameters

  • idPrefix: string

    The ID of the to-be created search button

  • asset: Asset | Item

    The asset (or item) for which to create a button

  • C: Character

    The character wearing the asset/item (if any)

  • onClick: (this, ev) => any

    The click event listener to-be attached to the tooltip

  • optionaloptions: Options = null

    High level options for the to-be created button

  • htmlOptions: Partial<Record<button | img | label | tooltip, Omit<HTMLOptions<any>, tag>>> = null

    Additional low-level ElementCreate options to-be applied to the either the button or tooltip

  Returns HTMLButtonElement

  • The created button

ReloadAssetIcons

• ReloadAssetIcons(button, asset, C): boolean

• ---

  Parameters

  • button: HTMLButtonElement

    The button in question

  • asset: Asset | Item

    The asset (or item) for linked to the button

  • C: Character

    The character wearing the asset/item (if any)

  Returns boolean

  • Whether the icons were updated or not

SetRole

• SetRole(button, role): void

• Parameters

  • button: HTMLButtonElement

  • role: checkbox | radio | combobox | menuitemradio | menuitemcheckbox | spinbutton | menuitem | switch

  Returns void