Class Window

Window component

Example

const win = Window.create({
    title: "Hello World",
    items: [Component.create({tagName: "h1", cls: "pad", html: "Just saying hi!"})]
});

win.open();

Hierarchy

Constructors

constructor

Properties

_cls? _title baseCls closable collapsible dataSet dragData? focussedBeforeOpen? header maximizable maximized modal modalOverlay parent? renderTo? resizeObserver? setPosition? stateId? tagName titleCmp

Accessors

attr cls collapsed disabled draggable el flex height hidden html id itemContainerEl itemId items rendered resizable style tabIndex text title width

Methods

buildState cascade center close computeZIndex constrainTo disableBodyScroll dragConstrainTo enableBodyScroll findAncestor findAncestorByType findChild findChildByType findChildren findChildrenByType findItem findItemIndex fire focus getDragHandle getHeader getInsertBefore getState hasState hide initMaximizeTool internalRemove internalRender internalSetHidden isFocusable isMaximized mask maximize nextSibling observerResize on onFirstListenerAdded open previousSibling print relayEvent remove render renderItem renderItems restoreState saveState show shrinkToFit un unmask unmaximize alert confirm error prompt uniqueID

Constructors

constructor

Properties

Protected Optional _cls

_cls?: string

Private _title

_title: string

Protected baseCls

baseCls: string = "goui-window"

A base class not configurable. cls can be used to add extra classes leaving this class alone

closable

closable: boolean = true

Enable tool to close window

collapsible

collapsible: boolean = false

Enable tool to collapse window

Readonly dataSet

dataSet: Record<string, any> = {}

Set arbitrary data on a component.

Should be used with caution as this data is not typed.

Protected Optional dragData

dragData?: DragData

Private Optional focussedBeforeOpen

focussedBeforeOpen?: Element

Return focus to element focussed before opening it when closing the window

Private header

header: Toolbar

maximizable

maximizable: boolean = false

Enable tool to maximize window

maximized

maximized: boolean = false

Maximize the window

modal

modal: boolean = false

Make the window modal so the user can only interact with this window.

Private modalOverlay

modalOverlay: undefined | Component

Optional parent

parent?: Component

When this item is added to a Component this is set to the parent Component

Optional renderTo

renderTo?: HTMLElement

Normally components are rendered to its parent component's element. But in some cases like menu's it's desired to render them to the root and position them absolute.

Private Optional resizeObserver

resizeObserver?: ResizeObserver

Optional setPosition

setPosition?: boolean

Update left and top css properties when dragging

Optional stateId

stateId?: string

ID used for storing state of the component in the State storage.

If stateId is given it will also be used as itemId

If not set then the component won't store it's state.

Readonly tagName

tagName: keyof HTMLElementTagNameMap = "div"

The tagname used for the root HTMLElement of this component

Private titleCmp

titleCmp: Component

Accessors

attr

  • set attr(attr): void

  • Set attributes of the DOM element

    Parameters

    • attr: Record<string, string>

    Returns void

cls

  • set cls(cls): void

  • Class name to add to element

    Some common classes to add for layout:

    • hbox: Set's flex layout to horizontal boxes. Use flex: n to stretch columns
    • vbox: As above but vertical
    • fit: Fit the parent's size
    • scroll: Set's autoscroll: true
    • pad: Set common padding on the element
    • border-(top|bottom|left|right) to add a border

    Other:

    • goui-fade-in: The component will fade in when show() is used.
    • goui-fade-out: The component will fade out when hide is used.

    Parameters

    • cls: string

    Returns void

collapsed

disabled

  • get disabled(): boolean

  • Returns boolean

  • set disabled(disabled): void

  • Disable component

    Parameters

    • disabled: boolean

    Returns void

draggable

el

flex

  • get flex(): string | number

  • CSS flex value

    Returns string | number

  • set flex(flex): void

  • CSS flex value

    Parameters

    • flex: string | number

    Returns void

height

  • get height(): number

  • Returns number

  • set height(height): void

  • The height in scalable pixels

    Parameters

    • height: number

    Returns void

    See

    width

hidden

  • get hidden(): boolean

  • Returns boolean

  • set hidden(hidden): void

  • Hide element

    Parameters

    • hidden: boolean

    Returns void

html

  • get html(): string

  • Returns string

  • set html(html): void

  • Set the HTML contents of the component (innerHTML)

    Parameters

    • html: string

    Returns void

id

Protected itemContainerEl

  • get itemContainerEl(): HTMLElement

  • Returns HTMLElement

itemId

  • get itemId(): string

  • Component item ID that can be used to lookup the Component inside a Component with Component.findItem() and Component.findItemIndex();

    if stateId is given it will also be used as itemId

    Returns string

  • set itemId(itemId): void

  • Parameters

    • itemId: string

    Returns void

items

rendered

  • get rendered(): boolean

  • Check if the component has been rendered and added to the DOM tree

    Returns boolean

resizable

  • get resizable(): boolean

  • Returns boolean

  • set resizable(resizable): void

  • Make it resizable

    Parameters

    • resizable: boolean

    Returns void

style

  • get style(): Partial<CSSStyleDeclaration>

  • Returns Partial<CSSStyleDeclaration>

  • set style(style): void

  • Set inline style

    Parameters

    • style: Partial<CSSStyleDeclaration>

    Returns void

tabIndex

  • get tabIndex(): number

  • Returns number

  • set tabIndex(tabIndex): void

  • The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    Parameters

    • tabIndex: number

    Returns void

text

  • get text(): string

  • Returns string

  • set text(text): void

  • Set the innerText

    Parameters

    • text: string

    Returns void

title

  • get title(): string

  • Returns string

  • set title(title): void

  • Title of the dom element

    Parameters

    • title: string

    Returns void

width

  • get width(): number

  • Returns number

  • set width(width): void

  • Set the width in scalable pixels

    The width is applied in rem units divided by 10. Because the font-size of the html element has a font-size of 62.5% this is equals the amount of pixels, but it can be scaled easily for different themes.

    Parameters

    • width: number

    Returns void

Methods

Protected buildState

cascade

  • Cascade down the component hierarchy

    Parameters

    • fn: ((comp) => boolean | void)

      When the function returns false then the cascading will be stopped. The current Component will be finished!

        • (comp): boolean | void

        • Parameters

          Returns boolean | void

    Returns Window

center

close

computeZIndex

constrainTo

Private disableBodyScroll

dragConstrainTo

Private enableBodyScroll

findAncestor

  • Find ancestor

    The method traverses the Component's ancestors (heading toward the document root) until it finds one where the given function returns true.

    Parameters

    • fn: ((cmp) => boolean | void)

      When the function returns true the item will be returned. Otherwise it will move up to the next parent.

        • (cmp): boolean | void

        • Parameters

          Returns boolean | void

    Returns undefined | Component

findAncestorByType

findChild

findChildByType

findChildren

findChildrenByType

findItem

findItemIndex

fire

focus

Protected getDragHandle

getHeader

Protected getInsertBefore

Protected getState

Protected hasState

hide

  • Hide this component

    This sets the "hidden" attribute on the DOM element which set's CSS display:none. You can change this to fade with css class "goui-fade-in" and "goui-fade-out"

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Private initMaximizeTool

Protected internalRemove

Protected internalRender

Protected internalSetHidden

isFocusable

isMaximized

mask

  • Mask the component to disable user interaction It creates an absolute positioned Mask component. This component should have a non-static position style for this to work.

    Parameters

    • delay: number = 300

    Returns void

maximize

nextSibling

Private observerResize

on

Protected onFirstListenerAdded

open

  • Open the window by rendering it into the DOM body element Use show()

    Returns boolean

    Deprecated

previousSibling

print

Protected relayEvent

remove

render

  • Render the component

    Parameters

    • Optional parentEl: Node

      The element this componennt will render into

    • Optional insertBefore: Node

      If given, the element will be inserted before this child

    Returns HTMLElement

Protected renderItem

Protected renderItems

Protected restoreState

Protected saveState

  • Protected

    Call save start when something relevant to the state changes. Implement buildState() to save relevant state properties and restore it in restoreState()

    stateId must be set on components to be stateful

    Returns void

show

  • Show the component

    If you want to override this function, please override internalSetHidden instead so the beforeshow and show event fire at the right time.

    Returns boolean

Private shrinkToFit

un

unmask

unmaximize

Static alert

  • Show modal alert window

    Parameters

    • text: any

      The alert message or an object with a 'message' property

    • Optional title: string = ...

      The title of the alert window

    Returns Promise<void>

    Promise - A promise that resolves when the alert window is closed

Static confirm

  • Asks the user for confirmation.

    Parameters

    • text: string

      The text to display in the confirmation dialog.

    • Optional title: string = ...

      The title of the confirmation dialog.

    Returns Promise<boolean>

    • A promise that resolves to true if the user confirms, or false if the user cancels.

Static error

  • Display an error message

    Parameters

    • msg: string

      The error message to be displayed.

    Returns Promise<void>

    Promise - A promise that resolves when the alert window is closed

Static prompt

  • Prompt the user for a text input value.

    Parameters

    • text: string

      The message to display to the user.

    • inputLabel: string

      The label for the input field.

    • Optional defaultValue: string = ""

      The default value for the input field.

    • Optional title: string = ...

      The title for the prompt window.

    Returns Promise<undefined | string>

    • A promise that resolves with the input value or undefined if the user cancelled.

Static uniqueID

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc