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)

optionalhgroupInHeader

hgroupInHeader?: boolean

Whether heading group should be embedded within the header or not, with the alternative placing them below each other

optionalleftContent

leftContent?: readonly (string | Node | HTMLOptions<keyof HTMLElementTagNameMap>)[]

Whether an extra aside.screen-aside-l section should be added to the left of .screen-main

optionalmainContent

mainContent?: readonly (string | Node | HTMLOptions<keyof HTMLElementTagNameMap>)[]

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

optionalmainSection

mainSection?: none | left | right | center

Which section should be marked as <main> (if any). Defaults to center if unspecified.

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)

optionalrightContent

rightContent?: readonly (string | Node | HTMLOptions<keyof HTMLElementTagNameMap>)[]

Whether an extra aside.screen-aside-r section should be added to the right of .screen-main

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>

        <div class="screen-main-container">
            <aside class="screen-aside-l" />
            <!--
                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" />
            <aside class="screen-aside-r" />
        </div>
    </div>

    Parameters

    • id: string

      The ID of the screen

    • options: TemplateOptions = null

      Further customization options

    Returns HTMLDivElement

    • The newly created DOM screen

setHeading

  • setHeading(root: ElementOrId, heading: string | Element | readonly (string | Element)[]): void

  • Set the persistent heading of a screen.

    Parameters

    • root: ElementOrId

      The screen on which the heading is the be set

    • heading: string | Element | readonly (string | Element)[]

      The to-be displayed heading content. Note that headings may only ever contain flow content

    Returns void

setStatus

  • setStatus(root: ElementOrId, status: string | Element | readonly (string | Element)[], timeout?: number): void

  • Set a temporary status message for the screen.

    Parameters

    • root: ElementOrId

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

    • status: string | Element | readonly (string | Element)[]

      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