Skip to main content

ElementDOMScreen

Namespace with helper functions for creating DOM-based screens

Index

Interfaces

Functions

Interfaces

TemplateOptions

TemplateOptions:

Options for customizing the ElementDOMScreen.GetTemplate output

optionalasShadow

asShadow?: boolean

Whether to content of the DOM screen root is embedded within a shadow root or not, storing the DOM tree in an isolated namespace with its own set of element IDs and CSS style sheets

optionalcssFiles

cssFiles?: readonly string[]

Additional CSS files to load when the asShadow option is specified

optionalheader

header?: string

Text content for within the heading (see .screen-hgroup h1)

optionalmainContent

mainContent?: readonly (string | Node)[]

Content for within the main section (see .screen-main)

optionalmainTag

mainTag?: aside | main

Whether the main section (see .screen-main) is a <main> or <aside> element.

As a rule of thumb: use "main" (aka the default) unless another <main> element is already visible on the page, as the HTML spec demands that only a single non-hidden main element may be present at any time.

optionalmenubarButtons

menubarButtons?: readonly HTMLButtonElement[]

Buttons for in the header's menubar (see .screen-header [role="menubar"])

optionalparent

parent?: Node

The parent element of the to-be returned screen (if any)

Functions

getTemplate

  • Construct and return a template for a basic DOM screen.

    Important points:

    • Screen dimensions of [x, 0, y, 1000] are generally recommended
    • The standard child elements of the to-be returned screen may freely be moved around in the DOM tree as one sees fit
    • The standard child elements of the to-be returned screen should not be removed; do so at your own risk. They may remain unused however.
    @example
    <div id="my-fancy-id" class="screen">
        <!--
            The first row: a banner containing a menubar,
            the latter of which _should_ contain an exit button as its first entry
        -->
        <header class="screen-header">
            <div role="menubar" />
        </header>

        <!--
            The second row: the screen's main heading/label/description
            and a dedicated field for anyand all temporary status messages (see `ElementDOMScreen.SetStatus()`)
        -->
        <hgroup class="screen-hgroup">
            <h1 />
            <p role="status" />
        </hgroup>

        <!--
            The third and final row: a scrollable section with the main content of the screen.
            As a rule of thumb, it is recommended to embed the immediate child elements into some sort of
            grouping element like `<fieldset>`, `<section>` and/or `<article>`.
        -->
        <main class="screen-main" />
    </div>

    Parameters

    • id: string

      The ID of the screen

    • options: TemplateOptions = null

      Further customization options

    Returns HTMLDivElement

    • The newly created DOM screen

setStatus

  • setStatus(root: HTMLElement, status: string, timeout?: number): void

  • Set a temporary status message for the screen.

    Parameters

    • root: HTMLElement

      The screen on which the status is the be set; it must contain a single h1 and [role='status'] element

    • status: string

      The to-be displayed status message

    • timeout: number = 5000

      How long the status message should be shown in ms; defaults to 5000 ms

    Returns void

Page Options