Overview

File Manifest

File Manifest
File	Language	Author(s)	Copyright
accordionPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
canvasPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
dockPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.
dropdownPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
flowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
gridPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
hboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
menuPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
observers.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024, Brick Mill Games, LLC. All rights reserved.
overlayPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
pushButton.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
selectList.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
sliderControl.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
slidingPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
stackablePane.js	Javascript	Kenneth F. Guerin	Copyright © 2022-2024 Brick Mill Games, LLC, All rights reserved.
svgPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
vboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
webfx.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
windowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.

Contents Directory

Objects

C DragEventObserver

C MouseEventObserver

N WebFX

C WebFX.AccordionPane ⟼ <accordion-pane>

C WebFX.AccordionSelector ⟼ <accordion-selector>

C WebFX.AccordionSlot ⟼ <accordion-slot>

C WebFX.CanvasPane ⟼ <canvas-pane>

C WebFX.DockPane ⟼ <dock-pane>

C WebFX.DropDownSelector ⟼ <dropdown-selector>

C WebFX.DropdownPane ⟼ <dropdown-pane>

C WebFX.FlowPane ⟼ <flow-pane>

C WebFX.HBoxPane ⟼ <hbox-pane>

C WebFX.HTabPane ⟼ <htab-pane>

C WebFX.MenuPane ⟼ <menu-pane>

C WebFX.OverlayPane ⟼ <overlay-pane>

C WebFX.PushButton ⟼ <push-button>

C WebFX.SelectItem ⟼ <select-item>

C WebFX.SelectList ⟼ <select-list>

C WebFX.SliderControl ⟼ <slider-control>

C WebFX.SlidingPane ⟼ <sliding-pane>

C WebFX.StackablePane ⟼ <stackable-pane>

C WebFX.SvgFactory

C WebFX.SvgIcon ⟼ <svg-icon>

C WebFX.SvgPane ⟼ <svg-pane>

C WebFX.TabPane ⟼ <tab-pane>

C WebFX.TabSelector ⟼ <tab-selector>

C WebFX.TabSlot ⟼ <tab-slot>

C WebFX.VBoxPane ⟼ <vbox-pane>

C WebFX.WindowPane ⟼ <window-pane>

Constants & Methods

• disconnect (DragEventObserver)

• observe (DragEventObserver)

• disconnect (MouseEventObserver)

• observe (MouseEventObserver)

• observedAttributes (WebFX.AccordionPane)

• $activateSlot (WebFX.AccordionPane) <private>

• $deactivate (WebFX.AccordionPane) <private>

• $trigger (WebFX.AccordionPane) <private>

• attributeChangedCallback (WebFX.AccordionPane)

• connectedCallback (WebFX.AccordionPane)

• disconnectedCallback (WebFX.AccordionPane)

• observedAttributes (WebFX.AccordionSelector)

• active (WebFX.AccordionSelector)

• attributeChangedCallback (WebFX.AccordionSelector)

• connectedCallback (WebFX.AccordionSelector)

• disconnectedCallback (WebFX.AccordionSelector)

• observedAttributes (WebFX.AccordionSlot)

• active (WebFX.AccordionSlot)

• heading (WebFX.AccordionSlot)

• attributeChangedCallback (WebFX.AccordionSlot)

• connectedCallback (WebFX.AccordionSlot)

• disconnectedCallback (WebFX.AccordionSlot)

• observedAttributes (WebFX.CanvasPane)

• drawProc (WebFX.CanvasPane)

• factory (WebFX.CanvasPane)

• resizable (WebFX.CanvasPane)

• ro (WebFX.CanvasPane) <private>

• $configureCanvas (WebFX.CanvasPane) <private>

• $redrawPane (WebFX.CanvasPane) <private>

• attributeChangedCallback (WebFX.CanvasPane)

• connectedCallback (WebFX.CanvasPane)

• disconnectedCallback (WebFX.CanvasPane)

• observedAttributes (WebFX.DockPane)

• mode (WebFX.DockPane)

• side (WebFX.DockPane)

• trigger (WebFX.DockPane)

• triggerColor (WebFX.DockPane)

• $configure (WebFX.DockPane) <private>

• $connect (WebFX.DockPane) <private>

• $disconnect (WebFX.DockPane) <private>

• $hide (WebFX.DockPane) <private>

• $show (WebFX.DockPane) <private>

• attributeChangedCallback (WebFX.DockPane)

• connectedCallback (WebFX.DockPane)

• disconnectedCallback (WebFX.DockPane)

• lock (WebFX.DockPane)

• unlock (WebFX.DockPane)

• observedAttributes (WebFX.DropDownSelector)

• active (WebFX.DropDownSelector)

• attributeChangedCallback (WebFX.DropDownSelector)

• connectedCallback (WebFX.DropDownSelector)

• disconnectedCallback (WebFX.DropDownSelector)

• observedAttributes (WebFX.DropdownPane)

• expand (WebFX.DropdownPane)

• heading (WebFX.DropdownPane)

• $toggle (WebFX.DropdownPane)

• $trigger (WebFX.DropdownPane) <private>

• attributeChangedCallback (WebFX.DropdownPane)

• connectedCallback (WebFX.DropdownPane)

• disconnectedCallback (WebFX.DropdownPane)

• observedAttributes (WebFX.FlowPane)

• align (WebFX.FlowPane)

• direction (WebFX.FlowPane)

• inline (WebFX.FlowPane)

• justify (WebFX.FlowPane)

• wrap (WebFX.FlowPane)

• attributeChangedCallback (WebFX.FlowPane)

• connectedCallback (WebFX.FlowPane)

• disconnectedCallback (WebFX.FlowPane)

• observedAttributes (WebFX.HBoxPane)

• expand (WebFX.HBoxPane)

• attributeChangedCallback (WebFX.HBoxPane)

• connectedCallback (WebFX.HBoxPane)

• disconnectedCallback (WebFX.HBoxPane)

• observedAttributes (WebFX.HTabPane)

• tabStyle (WebFX.HTabPane)

• $deactivate (WebFX.HTabPane) <private>

• $loadSelector (WebFX.HTabPane) <private>

• $trigger (WebFX.HTabPane) <private>

• activateSlot (WebFX.HTabPane)

• attributeChangedCallback (WebFX.HTabPane)

• connectedCallback (WebFX.HTabPane)

• disconnectedCallback (WebFX.HTabPane)

• observedAttributes (WebFX.MenuPane)

• inactive (WebFX.MenuPane)

• level (WebFX.MenuPane)

• $manageChildren (WebFX.MenuPane) <private>

• attributeChangedCallback (WebFX.MenuPane)

• connectedCallback (WebFX.MenuPane)

• disconnectedCallback (WebFX.MenuPane)

• elementAt (WebFX.MenuPane)

• has (WebFX.MenuPane)

• item (WebFX.MenuPane)

• itemAt (WebFX.MenuPane)

• locate (WebFX.MenuPane)

• shortcutValue (WebFX.MenuPane)

• observedAttributes (WebFX.OverlayPane)

• active (WebFX.OverlayPane)

• closeHandler (WebFX.OverlayPane)

• strict (WebFX.OverlayPane)

• tracking (WebFX.OverlayPane)

• $nsMouseDownHandler (WebFX.OverlayPane) <private>

• attributeChangedCallback (WebFX.OverlayPane)

• connectedCallback (WebFX.OverlayPane)

• disconnectedCallback (WebFX.OverlayPane)

• observedAttributes (WebFX.PushButton)

• action (WebFX.PushButton)

• callback (WebFX.PushButton)

• disabled (WebFX.PushButton)

• mo (WebFX.PushButton) <private>

• selected (WebFX.PushButton)

• state (WebFX.PushButton)

• toggle (WebFX.PushButton)

• value (WebFX.PushButton)

• $keyDownHandler (WebFX.PushButton) <private>

• $manageChildren (WebFX.PushButton) <private>

• $mouseDownHandler (WebFX.PushButton) <private>

• $mouseOutHandler (WebFX.PushButton) <private>

• $mouseOverHandler (WebFX.PushButton) <private>

• $mouseUpHandler (WebFX.PushButton) <private>

• $preventDefault (WebFX.PushButton) <private>

• $setButtonType (WebFX.PushButton) <private>

• $setupActionProc (WebFX.PushButton) <private>

• $trigger (WebFX.PushButton) <private>

• attributeChangedCallback (WebFX.PushButton)

• connectedCallback (WebFX.PushButton)

• disable (WebFX.PushButton)

• disconnectedCallback (WebFX.PushButton)

• enable (WebFX.PushButton)

• incstate (WebFX.PushButton)

• reset (WebFX.PushButton)

• tap (WebFX.PushButton)

• observedAttributes (WebFX.SelectItem)

• expand (WebFX.SelectItem)

• attributeChangedCallback (WebFX.SelectItem)

• connectedCallback (WebFX.SelectItem)

• disconnectedCallback (WebFX.SelectItem)

• observedAttributes (WebFX.SelectList)

• expand (WebFX.SelectList)

• $select (WebFX.SelectList) <private>

• attributeChangedCallback (WebFX.SelectList)

• connectedCallback (WebFX.SelectList)

• disconnectedCallback (WebFX.SelectList)

• getSelections (WebFX.SelectList)

• observedAttributes (WebFX.SliderControl)

• clickAction (WebFX.SliderControl)

• clickAmount (WebFX.SliderControl)

• indicatorType (WebFX.SliderControl)

• majorTicks (WebFX.SliderControl)

• minorTicks (WebFX.SliderControl)

• onchange (WebFX.SliderControl)

• ondrag (WebFX.SliderControl)

• snapToTicks (WebFX.SliderControl)

• tickColor (WebFX.SliderControl)

• tickStyle (WebFX.SliderControl)

• value (WebFX.SliderControl)

• attributeChangedCallback (WebFX.SliderControl)

• connectedCallback (WebFX.SliderControl)

• disconnectedCallback (WebFX.SliderControl)

• observedAttributes (WebFX.SlidingPane)

• sliderWidth (WebFX.SlidingPane)

• attributeChangedCallback (WebFX.SlidingPane)

• connectedCallback (WebFX.SlidingPane)

• disconnectedCallback (WebFX.SlidingPane)

• observedAttributes (WebFX.StackablePane)

• attributeChangedCallback (WebFX.StackablePane)

• connectedCallback (WebFX.StackablePane)

• disconnectedCallback (WebFX.StackablePane)

• $alertCircleIconFactory (WebFX.SvgFactory) <private>

• $alertIconFactory (WebFX.SvgFactory) <private>

• $alertRingIconFactory (WebFX.SvgFactory) <private>

• $backstepIconFactory (WebFX.SvgFactory) <private>

• $checkmarkIconFactory (WebFX.SvgFactory) <private>

• $circleIconFactory (WebFX.SvgFactory) <private>

• $closeIconFactory (WebFX.SvgFactory) <private>

• $diamondIconFactory (WebFX.SvgFactory) <private>

• $downArrowIconFactory (WebFX.SvgFactory) <private>

• $downTriangleIconFactory (WebFX.SvgFactory) <private>

• $fileIconFactory (WebFX.SvgFactory) <private>

• $folderIconFactory (WebFX.SvgFactory) <private>

• $fwdstepIconFactory (WebFX.SvgFactory) <private>

• $gearIconFactory (WebFX.SvgFactory) <private>

• $hamburgerIconFactory (WebFX.SvgFactory) <private>

• $hexagonIconFactory (WebFX.SvgFactory) <private>

• $hollowCircleIconFactory (WebFX.SvgFactory) <private>

• $hollowDiamondIconFactory (WebFX.SvgFactory) <private>

• $hollowDownTriangleIconFactory (WebFX.SvgFactory) <private>

• $hollowHexagonIconFactory (WebFX.SvgFactory) <private>

• $hollowLeftTriangleIconFactory (WebFX.SvgFactory) <private>

• $hollowOctagonIconFactory (WebFX.SvgFactory) <private>

• $hollowRightTriangleIconFactory (WebFX.SvgFactory) <private>

• $hollowRsquareIconFactory (WebFX.SvgFactory) <private>

• $hollowSquareIconFactory (WebFX.SvgFactory) <private>

• $hollowUpTriangleIconFactory (WebFX.SvgFactory) <private>

• $homeIconFactory (WebFX.SvgFactory) <private>

• $infoCircleIconFactory (WebFX.SvgFactory) <private>

• $infoIconFactory (WebFX.SvgFactory) <private>

• $infoRingIconFactory (WebFX.SvgFactory) <private>

• $installDefaults (WebFX.SvgFactory) <private>

• $leftArrowIconFactory (WebFX.SvgFactory) <private>

• $leftTriangleIconFactory (WebFX.SvgFactory) <private>

• $loginIconFactory (WebFX.SvgFactory) <private>

• $logoutIconFactory (WebFX.SvgFactory) <private>

• $minusIconFactory (WebFX.SvgFactory) <private>

• $octagonIconFactory (WebFX.SvgFactory) <private>

• $opacityMenuIconFactory (WebFX.SvgFactory) <private>

• $opaqueIconFactory (WebFX.SvgFactory) <private>

• $pauseIconFactory (WebFX.SvgFactory) <private>

• $pencilIconFactory (WebFX.SvgFactory) <private>

• $plusIconFactory (WebFX.SvgFactory) <private>

• $powerIconFactory (WebFX.SvgFactory) <private>

• $pushpinIconFactory (WebFX.SvgFactory) <private>

• $questionCircleIconFactory (WebFX.SvgFactory) <private>

• $questionIconFactory (WebFX.SvgFactory) <private>

• $questionRingIconFactory (WebFX.SvgFactory) <private>

• $redoArrowIconFactory (WebFX.SvgFactory) <private>

• $refreshArrowIconFactory (WebFX.SvgFactory) <private>

• $rightArrowIconFactory (WebFX.SvgFactory) <private>

• $rightTriangleIconFactory (WebFX.SvgFactory) <private>

• $rsquareIconFactory (WebFX.SvgFactory) <private>

• $saveIconFactory (WebFX.SvgFactory) <private>

• $searchIconFactory (WebFX.SvgFactory) <private>

• $squareIconFactory (WebFX.SvgFactory) <private>

• $swapArrowsIconFactory (WebFX.SvgFactory) <private>

• $thinDownArrowIconFactory (WebFX.SvgFactory) <private>

• $thinLeftArrowIconFactory (WebFX.SvgFactory) <private>

• $thinRedoArrowIconFactory (WebFX.SvgFactory) <private>

• $thinRefreshArrowIconFactory (WebFX.SvgFactory) <private>

• $thinRightArrowIconFactory (WebFX.SvgFactory) <private>

• $thinSwapArrowsIconFactory (WebFX.SvgFactory) <private>

• $thinUndoArrowIconFactory (WebFX.SvgFactory) <private>

• $thinUpArrowIconFactory (WebFX.SvgFactory) <private>

• $translucentIconFactory (WebFX.SvgFactory) <private>

• $transparentIconFactory (WebFX.SvgFactory) <private>

• $undoArrowIconFactory (WebFX.SvgFactory) <private>

• $upArrowIconFactory (WebFX.SvgFactory) <private>

• $upTriangleIconFactory (WebFX.SvgFactory) <private>

• $userIconFactory (WebFX.SvgFactory) <private>

• $viewIconFactory (WebFX.SvgFactory) <private>

• $zoomInIconFactory (WebFX.SvgFactory) <private>

• $zoomMenuIconFactory (WebFX.SvgFactory) <private>

• $zoomOutIconFactory (WebFX.SvgFactory) <private>

• draw (WebFX.SvgFactory)

• install (WebFX.SvgFactory)

• is_installed (WebFX.SvgFactory)

• observedAttributes (WebFX.SvgIcon)

• baseType (WebFX.SvgIcon)

• iconType (WebFX.SvgIcon)

• attributeChangedCallback (WebFX.SvgIcon)

• connectedCallback (WebFX.SvgIcon)

• disconnectedCallback (WebFX.SvgIcon)

• observedAttributes (WebFX.SvgPane)

• drawProc (WebFX.SvgPane)

• factory (WebFX.SvgPane)

• $redrawPane (WebFX.SvgPane) <private>

• attributeChangedCallback (WebFX.SvgPane)

• connectedCallback (WebFX.SvgPane)

• disconnectedCallback (WebFX.SvgPane)

• observedAttributes (WebFX.TabPane)

• tabStyle (WebFX.TabPane)

• $deactivate (WebFX.TabPane) <private>

• $loadSelector (WebFX.TabPane) <private>

• $trigger (WebFX.TabPane) <private>

• activateSlot (WebFX.TabPane)

• attributeChangedCallback (WebFX.TabPane)

• connectedCallback (WebFX.TabPane)

• disconnectedCallback (WebFX.TabPane)

• observedAttributes (WebFX.TabSelector)

• active (WebFX.TabSelector)

• attributeChangedCallback (WebFX.TabSelector)

• connectedCallback (WebFX.TabSelector)

• disconnectedCallback (WebFX.TabSelector)

• observedAttributes (WebFX.TabSlot)

• active (WebFX.TabSlot)

• closable (WebFX.TabSlot)

• heading (WebFX.TabSlot)

• attributeChangedCallback (WebFX.TabSlot)

• connectedCallback (WebFX.TabSlot)

• disconnectedCallback (WebFX.TabSlot)

• observedAttributes (WebFX.VBoxPane)

• expand (WebFX.VBoxPane)

• attributeChangedCallback (WebFX.VBoxPane)

• connectedCallback (WebFX.VBoxPane)

• disconnectedCallback (WebFX.VBoxPane)

• observedAttributes (WebFX.WindowPane)

• closable (WebFX.WindowPane)

• onfloat (WebFX.WindowPane)

• onmove (WebFX.WindowPane)

• onresize (WebFX.WindowPane)

• resizable (WebFX.WindowPane)

• title (WebFX.WindowPane)

• title-background (WebFX.WindowPane)

• title-color (WebFX.WindowPane)

• title-font (WebFX.WindowPane)

• attributeChangedCallback (WebFX.WindowPane)

• connectedCallback (WebFX.WindowPane)

• disconnectedCallback (WebFX.WindowPane)

Class: DragEventObserver

File Manifest

File Manifest
File	Language	Author(s)	Copyright
observers.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024, Brick Mill Games, LLC. All rights reserved.

Overview

This class provides drag event handling for elements listening to drag-n-drop operations handled via the $.tracking singleton (see overlayPane.js)

Constructor Registry

Item

Attributes

new DragEventObserver(callback)

Method Registry

Item

Attributes

disconnect()

<api>

observe()

<api>

Constructor Details

new DragEventObserver(callback)

Parameters:

callback [Function] — this callback provides the application hook to handle drag events

Method Details

disconnect() <api>

This method implements the disconnect API defined for observers.

observe() <api>

This method implements the observe API defined for observers.

Class: MouseEventObserver

File Manifest

File Manifest
File	Language	Author(s)	Copyright
observers.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024, Brick Mill Games, LLC. All rights reserved.

Overview

This class provides advanced mouse event handling for browser applications.

Constructor Registry

Item

Attributes

new MouseEventObserver(callback)

Method Registry

Item

Attributes

disconnect()

<api>

observe()

<api>

Constructor Details

new MouseEventObserver(callback)

Parameters:

callback [Function] — this callback provides the application hook to handle advanced mouse events

Method Details

disconnect() <api>

This method implements the disconnect API defined for observers.

observe() <api>

This method implements the observe API defined for observers.

Namespace: WebFX

File Manifest

File Manifest
File	Language	Author(s)	Copyright
accordionPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
canvasPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
dockPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.
dropdownPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
flowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
hboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
menuPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
overlayPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
pushButton.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
selectList.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
sliderControl.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
slidingPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
stackablePane.js	Javascript	Kenneth F. Guerin	Copyright © 2022-2024 Brick Mill Games, LLC, All rights reserved.
svgPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.
vboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
webfx.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.
windowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.

Overview

The WebFX namespace encapsulates all definitions related to the family of WebFX classes used for browser-based application development.

Class: WebFX.AccordionPane ⟼ <accordion-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
accordionPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <accordionPane>

Constructor Registry

Item

Attributes

new WebFX.AccordionPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Method Registry

Item

Attributes

$activateSlot(nth)

$activateSlot(slotElement)

$deactivate()

$trigger(event)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.AccordionPane()

The accordion-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Method Details

$activateSlot(nth) <private>

This private method is used to activate a particular accordion-slot.

Parameters:

nth [Integer] — the nth accordion-slot child to activate

$activateSlot(slotElement) <private>

This private method is used to activate a particular accordion-slot.

Parameters:

slotElement [HTMLElement] — the accordion-slot element to activate

$deactivate() <private>

This private method is used to deactivate the current active accordion-slot.

$trigger(event) <private>

This private method is used to conduct actions based on a successful mouse click on an accordion-selector. The method will determine which accordion-slot is associated with the accordion-selector that was clicked.

Parameters:

event [Object] — the event received from the browser

attributeChangedCallback(name, oldValue, newValue) <api>

For this control, nothing happens when an attribute is changed. The CSS handles look & feel changes.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the mouse-click event listener.

disconnectedCallback() <api>

Upon connection to the DOM, this method removes the mouse-click event listener.

Class: WebFX.AccordionSelector ⟼ <accordion-selector>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
accordionPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <accordion-selector>

An accordion-selector is used with a accordion-pane's shadow DOM in order to allow the user to expand / contract the accordion-pane.

Constructor Registry

Item

Attributes

new WebFX.AccordionSelector()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.AccordionSelector()

The accordion-selector constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property determines whether the accordion-selector is in the active state or not.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

For this control, nothing happens when an attribute is changed. The CSS handles look & feel changes.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.AccordionSlot ⟼ <accordion-slot>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
accordionPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <accordion-slot>

An accordion-slot is used to define the contents of each block of information within an accordion-pane.

Constructor Registry

Item

Attributes

new WebFX.AccordionSlot()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

heading ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.AccordionSlot()

The accordion-slot constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property determines whether the associated accordion-selector is in the active state or not.

heading ↔ String

This property sets the value of the associated accordion-selector in the shadow DOM.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'heading': change the accordion-selector's value based on the new heading value - 'active': show/hide the accordion-pane's contents and update the accordion-selector's active state

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings and adds the private $trigger event listener.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.CanvasPane ⟼ <canvas-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
canvasPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <canvas-pane>

An canvas-pane encapsulates a canvas element.

Constructor Registry

Item

Attributes

new WebFX.CanvasPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

drawProc ↔ Function

factory ↔ Function

resizable ↔ Boolean

ro ↔ ResizeObserver

Method Registry

Item

Attributes

$configureCanvas()

$redrawPane()

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.CanvasPane()

The canvas-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

drawProc ↔ Function

This property, set via the canvas-pane's "draw" attribute, is called in response to drawing events.

factory ↔ Function

This property, set directly via JS code, is called in response to drawing events instead of the drawProc.

resizable ↔ Boolean

This property determines if the canvas can be resized, true by default.

ro ↔ ResizeObserver <private>

This internal property is used to track element size changes in order to redraw the content.

Method Details

$configureCanvas() <private>

This private method will create the inner canvas based on the current dimensions of the enclosing div element.

$redrawPane() <private>

This method will redraw the embedded SVG based either on the factory property or on the 'draw' attibute.

attributeChangedCallback(name, oldValue, newValue) <api>

When the 'draw' attribute changes, the embedded SVG element will be replaced.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the element's drawProc, sets the resizable to its default value of "true", if necessary, and sets the ResizeObserver to observe if the pane is resizable.

disconnectedCallback() <api>

When this element is disconnected, the drawProc is removed and the ResizeObserver is set to unobserve if the pane is resizable.

Class: WebFX.DockPane ⟼ <dock-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
dockPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <dock-pane>

Dock panes are panes which attach to the sides of a parent element.

Constructor Registry

Item

Attributes

new WebFX.DockPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

mode ↔ String

side ↔ String

trigger ↔ String

triggerColor ↔ String

Method Registry

Item

Attributes

$configure(set_hidden_value)

$connect()

$disconnect()

$hide()

$show()

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

lock(open)

unlock()

Constructor Details

new WebFX.DockPane()

The dock-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

mode ↔ String

This property manages dock-pane's operating mode.

side ↔ String

This property manages dock-pane's attachment side.

trigger ↔ String

This property manages dock-pane's trigger size (when mode is 'auto-hide').

triggerColor ↔ String

This property manages dock-pane's trigger border color.

Method Details

$configure(set_hidden_value) <private>

This private API call sets the sizing and location and auto-hide trigger properties of the dock-pane.

Parameters:

set_hidden_value [Boolean or Null] — the value to set the auto-hide hidden state, or null to keep the setting unchanged <default: null>

$connect() <private>

This private API call, called on the connect event, configures the dock-pane properties that rely on the dock-pane being visible. It sets the mouse event handlers needed for auto-hide functionality.

$disconnect() <private>

This private API call, called on the disconnect event or mode switch from auto-hide to static, removes the mouse event handlers needed for auto-hide functionality.

$hide() <private>

This private API call hides the dock-pane, revealing only the trigger. It is called on mouseleave events.

$show() <private>

This private API call shows the dock-pane, hiding the trigger region. It is called on mouseenter events.

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'side': change the dock-pane's docking side - 'mode': change the dock-pane's operating mode

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the auto-hide machinery.

disconnectedCallback() <api>

Upon disconnection to the DOM, this method disables the auto-hide machinery.

lock(open)

This function will lock a dock capable of auto-hiding into an open or closed position. This is useful when popup-menus are called from a button on such a dock.

Parameters:

open [Boolean] — the value to set the locked state of a dock capable of auto-hiding <default: true>

unlock()

This function will unlock a locked dock.

Class: WebFX.DropDownSelector ⟼ <dropdown-selector>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
dropdownPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <dropdown-selector>

A dropdown-selector is used with a dropdown-pane's shadow DOM in order to allow the user to expand / contract the dropdown-pane.

Constructor Registry

Item

Attributes

new WebFX.DropDownSelector()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.DropDownSelector()

The dropdown-selector constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property determines whether the dropdown-selector is in the active state or not.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

For this control, nothing happens when an attribute is changed. The CSS handles look & feel changes.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.DropdownPane ⟼ <dropdown-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
dropdownPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <dropdown-pane>

The dropdown pane is a construct that allows for blocks of information within the web document or application to be hidden and/or shown by the user.

Constructor Registry

Item

Attributes

new WebFX.DropdownPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

expand ↔ Boolean

heading ↔ String

Method Registry

Item

Attributes

$toggle()

$trigger(event)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.DropdownPane()

The dropdown-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

expand ↔ Boolean

This property determines whether the dropdown-pane's content is visible or not.

heading ↔ String

This property sets the value of the dropdown-selector in the shadow DOM.

Method Details

$toggle()

This private method toggles the expand property's value between 'false' and 'true'.

$trigger(event) <private>

This private method is used to toggle the state of the dropdown-pane if the mouse-click occured within the dropdown-selector.

Parameters:

event [Object] — the event received from the browser

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'heading': change the dropdown-selector's value based on the new heading value - 'expand': show/hide the dropdown-pane's contents and update the dropdown-selector's active state

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings and adds the private $trigger event listener.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method removes event listeners.

Class: WebFX.FlowPane ⟼ <flow-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
flowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <flow-pane>

Flow panes are single-row flex boxes that are used to hold other elements.

Constructor Registry

Item

Attributes

new WebFX.FlowPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

align ↔ String

direction ↔ String

inline ↔ String

justify ↔ String

wrap ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.FlowPane()

The flow-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

align ↔ String

This property sets the flow-pane's item alignment when filling

direction ↔ String

This property sets the flow-pane's direction when filling

inline ↔ String

This property sets whether the flow-pane is an inline or block object

justify ↔ String

This property sets the flow-pane's justify when filling

wrap ↔ String

This property sets the flow-pane's wrap when filling

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'direction': change the flow-pane's direction

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.HBoxPane ⟼ <hbox-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
hboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <hbox-pane>

HBox panes are single-row grids that are used to hold other elements.

Constructor Registry

Item

Attributes

new WebFX.HBoxPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

expand ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.HBoxPane()

The hbox-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

expand ↔ String

This property manages hbox-pane's expandability options.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'expand': change the vbox-pane's expandability option

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the MutationObserver

disconnectedCallback() <api>

Upon disconnection to the DOM, this method disables the MutationObserver

Class: WebFX.HTabPane ⟼ <htab-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <htab-pane>

Constructor Registry

Item

Attributes

new WebFX.HTabPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

tabStyle ↔ String

Method Registry

Item

Attributes

$deactivate()

$loadSelector(slot, selectorText, closable)

$trigger(event)

activateSlot(slotElement)

activateSlot(nth)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.HTabPane()

The tab-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

tabStyle ↔ String

This property determines the look & feel of the tab-selectors. Valid values are 'tabs' and 'buttons'.

Method Details

$deactivate() <private>

This private method is used to deactivate the current active tab-slot.

$loadSelector(slot, selectorText, closable) <private>

This private method is used to attached a tab-slot to the tab-pane by creating its associated tab-selector.

Parameters:

slot [HTMLElement] — the tab-slot to attach to the tab-pane
selectorText [String] — the string to load into the tab-selector
closable [Boolean] — the flag which specifies whether a close icon will be part of the tab-selector or not

$trigger(event) <private>

This private method is used to conduct actions based on a successful mouse click on an tab-selector. The method will determine which tab-slot is associated with the tab-selector that was clicked.

Parameters:

event [Object] — the event received from the browser

activateSlot(slotElement)

This private method is used to activate a particular tab-slot.

Parameters:

slotElement [HTMLElement] — the tab-slot element to activate

activateSlot(nth)

This private method is used to activate a particular tab-slot.

Parameters:

nth [Integer] — the nth tab-slot child to activate

attributeChangedCallback(name, oldValue, newValue) <api>

When the tab-style attribute is changed, the tab-pane will change its tab-selectors from one style to another.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the default tab-style to 'tabs' and sets the mouse-click event listener.

disconnectedCallback() <api>

Upon connection to the DOM, this method removes the mouse-click event listener.

Class: WebFX.MenuPane ⟼ <menu-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
menuPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <menu-pane>

The menu pane is a construct that allows for popup-menus to be display and acted upon. Menu panes can contain other menu panes.

Constructor Registry

Item

Attributes

new WebFX.MenuPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

inactive ↔ Boolean

level ↔ Integer

Method Registry

Item

Attributes

$manageChildren()

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

elementAt(x, y) → HTMLElement or Null

has(element) → Integer or Null

item(element) → HTMLElement or Null

itemAt(x, y) → HTMLElement or Null

locate(x, y) → Integer or Null

shortcutValue(shortcut) → String

Constructor Details

new WebFX.MenuPane()

The dropdown-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM. It also creates the MutationObserver to react to changes in push-button content.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

inactive ↔ Boolean

This property determines the visibility of the menu-pane

level ↔ Integer

This property determines whether the dropdown-pane's content is visible or not.

Method Details

$manageChildren() <private>

This private method is used to manage the button's text based on its type, state and multichoice selection.

attributeChangedCallback(name, oldValue, newValue) <api>

When the 'inactive' attribute has changed, update the UI and add/remove event listeners based on the new value.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method manages its children and sets the MutationObserver to observe changes.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method disconnects from the MutationObserver.

elementAt(x, y) → HTMLElement or Null

Parameters:

x [Number] — the x-coordinate used to pinpoint the item
y [Number] — the y-coordinate used to pinpoint the item

Returns:

[HTMLElement or Null] — the nth tr element, or null if not found

has(element) → Integer or Null

Parameters:

element [HTMLElement] — the element to find

Returns:

[Integer or Null] — the index into the menu-pane where the element is, or null if not found

item(element) → HTMLElement or Null

Parameters:

element [HTMLElement] — the element to find

Returns:

[HTMLElement or Null] — the nth element, or null if not found

itemAt(x, y) → HTMLElement or Null

Parameters:

x [Number] — the x-coordinate used to pinpoint the item
y [Number] — the y-coordinate used to pinpoint the item

Returns:

[HTMLElement or Null] — the nth menu-item element, or null if not found

locate(x, y) → Integer or Null

Parameters:

x [Number] — the x-coordinate used to pinpoint the item
y [Number] — the y-coordinate used to pinpoint the item

Returns:

[Integer or Null] — the index into the menu-pane where the element is, or null if not found

shortcutValue(shortcut) → String

Parameters:

shortcut [String] — the value of a menu-item's shortcut

Returns:

[String] — the value of the 'value' attribute of the menu-item containing the given 'shortcut' attribute value

Class: WebFX.OverlayPane ⟼ <overlay-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
overlayPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <overlay-pane>

The overlayPane is used to manage modal-type operations for dialog boxes, popup menus and the like. Its primary purpose is to cover the entire web document / application at a high z-index and capture and forward mouse-click events, when applicable.

There are two modes: strict and non-strict. The former requires interaction with child elements, such as a dialog box's 'OK' button. The latter is looser and any click outside of any child elements will abort the whole operation. Popup menu operations are non-strict; a mouse-click outside of the menu acts as an escape from any choices.

This element also contains a menu handling subsystem that is used to properly manage popup menu operation.

This element, though not supported at this time, will also allow for "live tracking" operations, where children of this element will spawn events based on mouse movement and not require additional mouse clicks.

Constructor Registry

Item

Attributes

new WebFX.OverlayPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

closeHandler ↔ Function

strict ↔ Boolean

tracking ↔ Boolean

Method Registry

Item

Attributes

$nsMouseDownHandler(event)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.OverlayPane()

The overlay-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM. It also creates sets the closeHandler property to null.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property is used to determine if the overlay-pane is in operation.

closeHandler ↔ Function

This property is used to store the closeHandler, a function called when the overlay-pane becomes inactive.

strict ↔ Boolean

This property is used to determine if the overlay-pane is operating in strict mode.

tracking ↔ Boolean

This property is used to determine if live tracking is being used.

Method Details

$nsMouseDownHandler(event) <private>

In non-strict mode, this handler will abort the overlay-pane.

Parameters:

event [Object] — the mouse-down event

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'active': when set to false, the overlay-pane will detach itself and the closeHandler will be called - 'strict': this property will enable/disable the mouse-down event listeners for this element itself (enabled if false)

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

This function sets the mouse-down and mouse-move event listeners.

disconnectedCallback() <api>

This function removes the mouse-down and mouse-move event listeners.

Class: WebFX.PushButton ⟼ <push-button>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
pushButton.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <push-button>

Push buttons can be simple text-based do-something-on-click buttons or on/off toggle buttons or multi-choice / multi-state selection buttons.

To define the different types of buttons, one must: - in order to define a toggle button, the "toggle" attribute must be defined as either "on" or "off". - in order to define a multi-state button, the button must contain children with <state> elements. - in order to define a multi-choice button, the button must contain children with <option> elements. - without any of these characteristics, the button will be a "simple" push button.

The contents of the visual button will be defined by the type of button and, if it is a multi-choice or multi-state button, its current state.

A regular, simple push button will be defined by the enclosed contents of the push-button tags. Simple text within the enclosing tags will make up the text of the button. More complex constructs, such as flow-panes with text and associated imagery, can also be used as the underlying DOM construct of the regular button is a div element encapsulating the innerHTML.

Multi-choice buttons work the same way as "select" items in regular HTML, but they are implemented using a button + pop-menu construct. The options for multi-choice buttons are defined using option tags in a way similar to standard "select" items. The visual representation of the button's contents consists of the current selection choice and a visual cue, currently implemented as a solid or hollow diamond. Customization of the visual cue may be supported in the future.

Multi-state buttons control sequential, incremental state changes. The states are defined using "state" tags within the enclosing push-button tags. The visual representation of the button's contents consists of the text associated with current state.

Javascript functions can be called when an action is triggered: - by a regular button when the button is pressed - by a multichoice button when a selection is made - by a multistate button when the state has changed

The primary method for an action to be triggered is defined using the "action" attribute. The embedded code can reference data associated with the button based on its type: - via the "event" variable if it is a regular button - via the "state" variable if it is a toggle button - via the "value" variable if it is a multi-choice button, where "value" is the textual representation of the new selection - via the "oldValue","newValue" variables if it is a multi-state button, where "oldValue" is the textual representation of the previous state and "newValue" is the textual representation of the new state

While the action attribute will contain JS code in text form, similar to how the onclick attribute is used for certain built-in HTML elements, it is also possible to dynamically set the action property as a function. This is very useful when variable bindings are necessary.

In addition to specifying an "action" attribute, the button's "callback" property may be set to execute code when the button is triggered. While actions are used for toggle, multi-state and multi-choice buttons, callbacks are used for simple buttons. However, simple buttons can also have actions defined for them, allowing for simple buttons to call two different functions. In these rare situations, the callback function will be called first. While a callback can be used to run an action to be triggered when pressing the button, it is more likely used to do some sort of clean-up work, such as closing a dialog box.

Finally, the "disabled" attribute can be used to make a push-button immune from user interactions. By default, this attribute is "false". When set to "true" (as a String), the button's visual representation may change to show the user that button's actions cannot be triggered.

Constructor Registry

Item

Attributes

new WebFX.PushButton()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

action ↔ Function

callback ↔ Function

disabled ↔ Boolean

mo ↔ MutationObserver

selected ↔ Integer

state ↔ Integer

toggle ↔ Boolean

value ↔ Integer

Method Registry

Item

Attributes

$keyDownHandler(event)

$manageChildren()

$mouseDownHandler(event)

$mouseOutHandler()

$mouseOverHandler(event)

$mouseUpHandler()

$preventDefault(event)

$setButtonType()

$setupActionProc()

$trigger(event)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disable()

disconnectedCallback()

<api>

enable()

incstate()

reset()

tap()

Constructor Details

new WebFX.PushButton()

The push-button constructor executes the usual custom HTML initialization procedure by creating the shadow DOM. It also creates the MutationObserver to react to changes in push-button content.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

action ↔ Function

This property, set via code or the push-button's "action" attribute, is called in response to events.

callback ↔ Function

This property, set via code, is called in response to events prior to the push-button's action.

disabled ↔ Boolean

This property manages the push-button's ability to respond to events.

mo ↔ MutationObserver <private>

This internal property is used to track push-button content changes.

selected ↔ Integer

This property manages the current selection of a multi-choice push-button.

state ↔ Integer

This property manages the current state of a multi-state push-button.

toggle ↔ Boolean

This property manages the current state of a toggle button.

value ↔ Integer

This property manages the current value of a multi-choice push-button.

Method Details

$keyDownHandler(event) <private>

This private method handles key-down events and triggers the button's actions if the key was the 'Enter' key and the button had focus.

Parameters:

event [Object] — the event received from the browser

$manageChildren() <private>

This private method is used to manage the button's text based on its type, state and multichoice selection.

$mouseDownHandler(event) <private>

This private method puts the button in pressing mode when the left mouse button is pressed inside the button It uses the 'has-pressed' and 'pressing' attributes to manage its "being pressed" state. 'has-pressed' is used to note that the process has begun. 'pressing' is used for UI feedback.

Parameters:

event [Object] — the event received from the browser

$mouseOutHandler() <private>

This private method handles mouse out events while the push-button is being pressed. A drag of the mouse outside of the push-button while the mouse button is still pressed will modify the push-button's appearance and a release outside of the push-button will not trigger the push-button's action.

$mouseOverHandler(event) <private>

This private method handles mouse over events after the push-button has been pressed. It can reset itself if the mouse button has been released outside of the push-button itself.

Parameters:

event [Object] — the event received from the browser

$mouseUpHandler() <private>

This private method ejects the button from pressing mode when the left mouse button is released.

$preventDefault(event) <private>

This private method is used to to signify to the browser's event machinery that we've captured and processed the event.

Parameters:

event [Object] — the event received from the browser

$setButtonType() <private>

This private method is used to manage the button's text based on its type, state and multichoice selection.

$setupActionProc() <private>

$trigger(event) <private>

This private method is used to conduct actions based on a successful mouse click or key down event.

Parameters:

event [Object] — the event received from the browser

attributeChangedCallback(name, oldValue, newValue) <api>

When the 'disabled' attribute has changed, add/remove event listeners based on the new value.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the MutationObserver, sets the tabindex and enables the mouse event handlers.

disable()

Disables the button's ability to respond to events.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method disables the mouse event listeners and the MutationObserver.

enable()

Enables the button's ability to respond to events.

incstate()

This method increments a multi-state button to its next state.

reset()

This method sets a multi-state button to its initial state.

tap()

This method toggles the on/off state of a toggle button.

Class: WebFX.SelectItem ⟼ <select-item>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
selectList.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <select-item>

Select items are selectable items within a select-list.

Constructor Registry

Item

Attributes

new WebFX.SelectItem()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

expand ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.SelectItem()

The select-item constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

expand ↔ String

This property manages select-item's expandability options.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.SelectList ⟼ <select-list>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
selectList.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <select-list>

Select lists are single-column grids with selectable content.

Constructor Registry

Item

Attributes

new WebFX.SelectList()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

expand ↔ String

Method Registry

Item

Attributes

$select(event)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

getSelections() → Array<String>

Constructor Details

new WebFX.SelectList()

The select-list constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

expand ↔ String

This property manages select-list's expandability options.

Method Details

$select(event) <private>

This private method is used to select items in the select-list.

Parameters:

event [Object] — the event received from the browser

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'expand': change the select-list's expandability option

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings and sets the click event listener.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method removes the click event listener.

getSelections() → Array<String>

Returns a list of the selected items in an array of strings. Items which are not text should have value attributes.

Returns:

[Array<String>] —

Class: WebFX.SliderControl ⟼ <slider-control>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
sliderControl.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <slider-control>

Slider controls are used to set numeric values between a set range.

Constructor Registry

Item

Attributes

new WebFX.SliderControl()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

clickAction ↔ String

clickAmount ↔ Number

indicatorType ↔ String

majorTicks ↔ Integer

minorTicks ↔ Integer

onchange ↔ Function

ondrag ↔ Function

snapToTicks ↔ Boolean

tickColor ↔ Color

tickStyle ↔ String

value ↔ Number

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.SliderControl()

The slider-control constructor executes the usual custom HTML initialization procedure by creating the shadow DOM. It also creates the ResizeObserver to react to changes in slider-control size and a MouseEventObserver to react to mouse events.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

clickAction ↔ String

This property manages the type of reaction to a click within the indicator track: { 'set','page' }.

clickAmount ↔ Number

This property manages the paging amount, in a value between 0.0 and 1.0, when clickAction is set to page and snapToTicks is false.

indicatorType ↔ String

This property manages the type of indicator: { 'round','cylinder','rsquare','rrect' }.

majorTicks ↔ Integer

This property manages the number of major ticks used / displayed.

minorTicks ↔ Integer

This property manages the number of minor ticks used / displayed between each major tick.

onchange ↔ Function

This property manages the current callback procedure that is called when the slider-control's value has changed.

ondrag ↔ Function

This property manages the current callback procedure that is called when the indicator is dragged.

snapToTicks ↔ Boolean

This property manages the reaction to clicks in the indicator track if there are ticks present.

tickColor ↔ Color

This property manages the color of the ticks used.

tickStyle ↔ String

This property manages the style of ticks used: { 'top-left','bottom-right','both' }.

value ↔ Number

This property manages the current value of the slider-control.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the ResizeObserver and MouseEventObserver.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method disables the ResizeObserver and MouseEventObserver.

Class: WebFX.SlidingPane ⟼ <sliding-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
slidingPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <sliding-pane>

Sliding panes are multi-pane layout controllers used to adjust the widths of each pane by allowing the user to slide an inter-pane border.

Constructor Registry

Item

Attributes

new WebFX.SlidingPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

sliderWidth ↔ Number

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.SlidingPane()

The sliding-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

sliderWidth ↔ Number

This property manages the width of the slider border.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'expand': change the vbox-pane's expandability option

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the observers.

disconnectedCallback() <api>

For this control, the observers will be disconnected upon control disconnection.

Class: WebFX.StackablePane ⟼ <stackable-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
stackablePane.js	Javascript	Kenneth F. Guerin	Copyright © 2022-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <stackable-pane>

Stackable panes are single-column grids that are used to hold other elements.

Constructor Registry

Item

Attributes

new WebFX.StackablePane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.StackablePane()

The stackable-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.SvgFactory

File Manifest

File Manifest
File	Language	Author(s)	Copyright
svgPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains a drawing registry used by the svg-pane element and its derivatives.

This factory is a drawing method registry used by svg-pane and its derivatives.

Constructor Registry

Item

Attributes

new WebFX.SvgFactory()

Method Registry

Item

Attributes

$alertCircleIconFactory() → String

$alertIconFactory() → String

$alertRingIconFactory() → String

$backstepIconFactory() → String

$checkmarkIconFactory() → String

$circleIconFactory() → String

$closeIconFactory() → String

$diamondIconFactory() → String

$downArrowIconFactory() → String

$downTriangleIconFactory() → String

$fileIconFactory() → String

$folderIconFactory() → String

$fwdstepIconFactory() → String

$gearIconFactory() → String

$hamburgerIconFactory() → String

$hexagonIconFactory() → String

$hollowCircleIconFactory() → String

$hollowDiamondIconFactory() → String

$hollowDownTriangleIconFactory() → String

$hollowHexagonIconFactory() → String

$hollowLeftTriangleIconFactory() → String

$hollowOctagonIconFactory() → String

$hollowRightTriangleIconFactory() → String

$hollowRsquareIconFactory() → String

$hollowSquareIconFactory() → String

$hollowUpTriangleIconFactory() → String

$homeIconFactory() → String

$infoCircleIconFactory() → String

$infoIconFactory() → String

$infoRingIconFactory() → String

$installDefaults()

$leftArrowIconFactory() → String

$leftTriangleIconFactory() → String

$loginIconFactory() → String

$logoutIconFactory() → String

$minusIconFactory() → String

$octagonIconFactory() → String

$opacityMenuIconFactory() → String

$opaqueIconFactory() → String

$pauseIconFactory() → String

$pencilIconFactory() → String

$plusIconFactory() → String

$powerIconFactory() → String

$pushpinIconFactory() → String

$questionCircleIconFactory() → String

$questionIconFactory() → String

$questionRingIconFactory() → String

$redoArrowIconFactory() → String

$refreshArrowIconFactory() → String

$rightArrowIconFactory() → String

$rightTriangleIconFactory() → String

$rsquareIconFactory() → String

$saveIconFactory() → String

$searchIconFactory() → String

$squareIconFactory() → String

$swapArrowsIconFactory() → String

$thinDownArrowIconFactory() → String

$thinLeftArrowIconFactory() → String

$thinRedoArrowIconFactory() → String

$thinRefreshArrowIconFactory() → String

$thinRightArrowIconFactory() → String

$thinSwapArrowsIconFactory() → String

$thinUndoArrowIconFactory() → String

$thinUpArrowIconFactory() → String

$translucentIconFactory() → String

$transparentIconFactory() → String

$undoArrowIconFactory() → String

$upArrowIconFactory() → String

$upTriangleIconFactory() → String

$userIconFactory() → String

$viewIconFactory() → String

$zoomInIconFactory() → String

$zoomMenuIconFactory() → String

$zoomOutIconFactory() → String

draw()

install(name, proc)

is_installed(name) → Boolean

Constructor Details

new WebFX.SvgFactory()

The constructor creates the registry and installs the default factories.

Method Details

$alertCircleIconFactory() → String <private>

This private method builds the alert circle icon using a path element.

Returns:

[String] — the SVG paths comprising the alert circle icon

$alertIconFactory() → String <private>

This private method builds the alert icon using a path element.

Returns:

[String] — the SVG paths comprising the alert icon

$alertRingIconFactory() → String <private>

This private method builds the alert ring icon using a path element.

Returns:

[String] — the SVG paths comprising the alert ring icon

$backstepIconFactory() → String <private>

This private method builds the back step icon using a path element.

Returns:

[String] — the SVG paths comprising the back step icon

$checkmarkIconFactory() → String <private>

This private method builds the checkmark icon using a path element.

Returns:

[String] — the SVG paths comprising the checkmark icon

$circleIconFactory() → String <private>

This private method builds the circle icon using a path element.

Returns:

[String] — the SVG paths comprising the circle icon

$closeIconFactory() → String <private>

This private method builds the close icon using a path element.

Returns:

[String] — the SVG paths comprising the close icon

$diamondIconFactory() → String <private>

This private method builds the diamond icon using a path element.

Returns:

[String] — the SVG paths comprising the diamond icon

$downArrowIconFactory() → String <private>

This private method builds the down arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the down arrow icon

$downTriangleIconFactory() → String <private>

This private method builds the down triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the down triangle icon

$fileIconFactory() → String <private>

This private method builds the file icon using a path element.

Returns:

[String] — the SVG paths comprising the file icon

$folderIconFactory() → String <private>

This private method builds the folder icon using a path element.

Returns:

[String] — the SVG paths comprising the folder icon

$fwdstepIconFactory() → String <private>

This private method builds the forward step icon using a path element.

Returns:

[String] — the SVG paths comprising the forward step icon

$gearIconFactory() → String <private>

This private method builds the gear icon using a path element.

Returns:

[String] — the SVG paths comprising the gear icon

$hamburgerIconFactory() → String <private>

This private method builds the hamburger icon using a multi-segment path element.

Returns:

[String] — the SVG paths comprising the hamburger icon

$hexagonIconFactory() → String <private>

This private method builds the hexagon icon using a path element.

Returns:

[String] — the SVG paths comprising the hexagon icon

$hollowCircleIconFactory() → String <private>

This private method builds the hollow circle icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow circle icon

$hollowDiamondIconFactory() → String <private>

This private method builds the hollow diamond icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow diamond icon

$hollowDownTriangleIconFactory() → String <private>

This private method builds the down triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the down triangle icon

$hollowHexagonIconFactory() → String <private>

This private method builds the hollow hexagon icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow hexagon icon

$hollowLeftTriangleIconFactory() → String <private>

This private method builds the hollow left triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow left triangle icon

$hollowOctagonIconFactory() → String <private>

This private method builds the hollow octagon icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow octagon icon

$hollowRightTriangleIconFactory() → String <private>

This private method builds the right triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the right triangle icon

$hollowRsquareIconFactory() → String <private>

This private method builds the hollow rsquare icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow rsquare icon

$hollowSquareIconFactory() → String <private>

This private method builds the hollow square icon using a path element.

Returns:

[String] — the SVG paths comprising the hollow square icon

$hollowUpTriangleIconFactory() → String <private>

This private method builds the up triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the up triangle icon

$homeIconFactory() → String <private>

This private method builds the home icon using a path element.

Returns:

[String] — the SVG paths comprising the home icon

$infoCircleIconFactory() → String <private>

This private method builds the info circle icon using a path element.

Returns:

[String] — the SVG paths comprising the info circle icon

$infoIconFactory() → String <private>

This private method builds the info icon using a path element.

Returns:

[String] — the SVG paths comprising the info icon

$infoRingIconFactory() → String <private>

This private method builds the info ring icon using a path element.

Returns:

[String] — the SVG paths comprising the info ring icon

$installDefaults() <private>

$leftArrowIconFactory() → String <private>

This private method builds the left arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the left arrow icon

$leftTriangleIconFactory() → String <private>

This private method builds the left triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the left triangle icon

$loginIconFactory() → String <private>

This private method builds the login icon using a path element.

Returns:

[String] — the SVG paths comprising the login icon

$logoutIconFactory() → String <private>

This private method builds the logout icon using a path element.

Returns:

[String] — the SVG paths comprising the logout icon

$minusIconFactory() → String <private>

This private method builds the minus icon using a path element.

Returns:

[String] — the SVG paths comprising the minus icon

$octagonIconFactory() → String <private>

This private method builds the octagon icon using a path element.

Returns:

[String] — the SVG paths comprising the octagon icon

$opacityMenuIconFactory() → String <private>

This private method builds the opacity menu icon using a path element.

Returns:

[String] — the SVG paths comprising the opacity menu icon

$opaqueIconFactory() → String <private>

This private method builds the opaque icon using a path element.

Returns:

[String] — the SVG paths comprising the opaque icon

$pauseIconFactory() → String <private>

This private method builds the pause icon using a path element.

Returns:

[String] — the SVG paths comprising the pause icon

$pencilIconFactory() → String <private>

This private method builds the pencil icon using a path element.

Returns:

[String] — the SVG paths comprising the pencil icon

$plusIconFactory() → String <private>

This private method builds the plus icon using a path element.

Returns:

[String] — the SVG paths comprising the plus icon

$powerIconFactory() → String <private>

This private method builds the power icon using a path element.

Returns:

[String] — the SVG paths comprising the power icon

$pushpinIconFactory() → String <private>

This private method builds the push pin icon using a path element.

Returns:

[String] — the SVG paths comprising the push pin icon

$questionCircleIconFactory() → String <private>

This private method builds the question circle icon using a path element.

Returns:

[String] — the SVG paths comprising the question circle icon

$questionIconFactory() → String <private>

This private method builds the question icon using a path element.

Returns:

[String] — the SVG paths comprising the question icon

$questionRingIconFactory() → String <private>

This private method builds the question ring icon using a path element.

Returns:

[String] — the SVG paths comprising the question ring icon

$redoArrowIconFactory() → String <private>

This private method builds the redo arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the redo arrow icon

$refreshArrowIconFactory() → String <private>

This private method builds the refresh arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the refresh arrow icon

$rightArrowIconFactory() → String <private>

This private method builds the right arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the right arrow icon

$rightTriangleIconFactory() → String <private>

This private method builds the right triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the right triangle icon

$rsquareIconFactory() → String <private>

This private method builds the rsquare icon using a path element.

Returns:

[String] — the SVG paths comprising the rsquare icon

$saveIconFactory() → String <private>

This private method builds the save icon using a path element.

Returns:

[String] — the SVG paths comprising the save icon

$searchIconFactory() → String <private>

This private method builds the search icon using a path element.

Returns:

[String] — the SVG paths comprising the search icon

$squareIconFactory() → String <private>

This private method builds the square icon using a path element.

Returns:

[String] — the SVG paths comprising the square icon

$swapArrowsIconFactory() → String <private>

This private method builds the swap arrows icon using a path element.

Returns:

[String] — the SVG paths comprising the swap arrows icon

$thinDownArrowIconFactory() → String <private>

This private method builds the thin down arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin down arrow icon

$thinLeftArrowIconFactory() → String <private>

This private method builds the thin left arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin left arrow icon

$thinRedoArrowIconFactory() → String <private>

This private method builds the thin redo arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin redo arrow icon

$thinRefreshArrowIconFactory() → String <private>

This private method builds the thin refresh arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin refresh arrow icon

$thinRightArrowIconFactory() → String <private>

This private method builds the thin right arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin right arrow icon

$thinSwapArrowsIconFactory() → String <private>

This private method builds the thin swap arrows icon using a path element.

Returns:

[String] — the SVG paths comprising the thin swap arrows icon

$thinUndoArrowIconFactory() → String <private>

This private method builds the thin undo arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin undo arrow icon

$thinUpArrowIconFactory() → String <private>

This private method builds the thin up arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the thin up arrow icon

$translucentIconFactory() → String <private>

This private method builds the translucent icon using a path element.

Returns:

[String] — the SVG paths comprising the translucent icon

$transparentIconFactory() → String <private>

This private method builds the transparent icon using a path element.

Returns:

[String] — the SVG paths comprising the transparent icon

$undoArrowIconFactory() → String <private>

This private method builds the undo arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the undo arrow icon

$upArrowIconFactory() → String <private>

This private method builds the up arrow icon using a path element.

Returns:

[String] — the SVG paths comprising the up arrow icon

$upTriangleIconFactory() → String <private>

This private method builds the up triangle icon using a path element.

Returns:

[String] — the SVG paths comprising the up triangle icon

$userIconFactory() → String <private>

This private method builds the user icon using a path element.

Returns:

[String] — the SVG paths comprising the user icon

$viewIconFactory() → String <private>

This private method builds the view icon using a path element.

Returns:

[String] — the SVG paths comprising the view icon

$zoomInIconFactory() → String <private>

This private method builds the zoom in icon using a path element.

Returns:

[String] — the SVG paths comprising the zoom in icon

$zoomMenuIconFactory() → String <private>

This private method builds the zoom menu icon using a path element.

Returns:

[String] — the SVG paths comprising the zoom menu icon

$zoomOutIconFactory() → String <private>

This private method builds the zoom out icon using a path element.

Returns:

[String] — the SVG paths comprising the zoom out icon

draw()

install(name, proc)

This method is used to install a drawing procedure into the factory.

Parameters:

name [String] — the name of the drawing procedure
proc [Function] — the drawing procedure to run

is_installed(name) → Boolean

This method is used to determine if a drawing procedure has been installed

Parameters:

name [String] — the name of the drawing procedure

Returns:

[Boolean] — true, if there is a drawing procedure registered under the give name

Class: WebFX.SvgIcon ⟼ <svg-icon>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
svgPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <svg-icon>

The svg-icon is a collection of useful icons. It is implemented as an extension of svg-pane using the pane's factory property to handle the drawing function.

Constructor Registry

Item

Attributes

new WebFX.SvgIcon()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

baseType ↔ String

iconType ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.SvgIcon()

The svg-icon constructor executes the svg-pane's constructor and nothing else.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

baseType ↔ String

This property sets the base type.

iconType ↔ String

This property sets the icon type.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the 'icon' attribute changes, the icon will change.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the svg-pane's factory property to handle drawing operations.

disconnectedCallback() <api>

When this element is disconnected, the drawProc is removed.

Class: WebFX.SvgPane ⟼ <svg-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
svgPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <svg-pane>

An svg-pane encapsulates an SVG image.

Constructor Registry

Item

Attributes

new WebFX.SvgPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

drawProc ↔ Function

factory ↔ Function

Method Registry

Item

Attributes

$redrawPane()

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.SvgPane()

The svg-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

drawProc ↔ Function

This property, set via the svg-pane's "draw" attribute, is called in response to drawing events.

factory ↔ Function

This property, set directly via JS code, is called in response to drawing events instead of the drawProc.

Method Details

$redrawPane() <private>

This method will redraw the embedded SVG based either on the factory property or on the 'draw' attibute or 'draw' callback.

attributeChangedCallback(name, oldValue, newValue) <api>

When the 'draw' attribute changes, the embedded SVG element will be replaced.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the element's drawProc.

disconnectedCallback() <api>

When this element is disconnected, the drawProc is removed.

Class: WebFX.TabPane ⟼ <tab-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <tab-pane>

Constructor Registry

Item

Attributes

new WebFX.TabPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

tabStyle ↔ String

Method Registry

Item

Attributes

$deactivate()

$loadSelector(slot, selectorText, closable)

$trigger(event)

activateSlot(slotElement)

activateSlot(nth)

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.TabPane()

The tab-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

tabStyle ↔ String

This property determines the look & feel of the tab-selectors. Valid values are 'tabs' and 'buttons'.

Method Details

$deactivate() <private>

This private method is used to deactivate the current active tab-slot.

$loadSelector(slot, selectorText, closable) <private>

This private method is used to attach a tab-slot to the tab-pane by creating its associated tab-selector.

Parameters:

slot [HTMLElement] — the tab-slot to attach to the tab-pane
selectorText [String] — the string to load into the tab-selector
closable [Boolean] — the flag which specifies whether a close icon will be part of the tab-selector or not

$trigger(event) <private>

This private method is used to conduct actions based on a successful mouse click on an tab-selector. The method will determine which tab-slot is associated with the tab-selector that was clicked.

Parameters:

event [Object] — the event received from the browser

activateSlot(slotElement)

This private method is used to activate a particular tab-slot.

Parameters:

slotElement [HTMLElement] — the tab-slot element to activate

activateSlot(nth)

This private method is used to activate a particular tab-slot.

Parameters:

nth [Integer] — the nth tab-slot child to activate

attributeChangedCallback(name, oldValue, newValue) <api>

When the tab-style attribute is changed, the tab-pane will change its tab-selectors from one style to another.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets the default tab-style to 'tabs' and sets the mouse-click event listener.

disconnectedCallback() <api>

Upon connection to the DOM, this method removes the mouse-click event listener.

Class: WebFX.TabSelector ⟼ <tab-selector>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <tab-selector>

A tab-selector is used with a tab-pane's shadow DOM in order to allow the user to expand / contract the tab-pane.

Constructor Registry

Item

Attributes

new WebFX.TabSelector()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.TabSelector()

The tab-selector constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property determines whether the tab-selector is in the active state or not.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

For this control, nothing happens when an attribute is changed. The CSS handles look & feel changes.

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings.

disconnectedCallback() <api>

For this control, nothing happens when it is disconnected.

Class: WebFX.TabSlot ⟼ <tab-slot>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
tabPane.js	Javascript	Kenneth F. Guerin	Copyright © 2021-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <tab-slot>

A tab-slot is used to define the contents of each block of information within an tab-pane.

Constructor Registry

Item

Attributes

new WebFX.TabSlot()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

active ↔ Boolean

closable ↔ Boolean

heading ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.TabSlot()

The tab-slot constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

active ↔ Boolean

This property determines whether the associated tab-selector is in the active state or not.

closable ↔ Boolean

This property determines whether the tab-slot's tab-selector will have a close icon or not.

heading ↔ String

This property sets the value of the associated tab-selector in the shadow DOM.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'heading': change the tab-selector's value based on the new heading value - 'active': show/hide the tab-pane's contents and update the tab-selector's active state - 'closable': change whether the tab-slot's tab-selector will have a close icon

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method sets default attribute settings and adds the private $trigger event listener.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method removes event listeners.

Class: WebFX.VBoxPane ⟼ <vbox-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
vboxPane.js	Javascript	Kenneth F. Guerin	Copyright © 2020-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <vbox-pane>

VBox panes are single-column grids that are used to hold other elements.

Constructor Registry

Item

Attributes

new WebFX.VBoxPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

expand ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.VBoxPane()

The vbox-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

expand ↔ String

This property manages vbox-pane's expandability options.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'expand': change the vbox-pane's expandability option

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the MutationObserver

disconnectedCallback() <api>

Upon disconnection to the DOM, this method disables the MutationObserver

Class: WebFX.WindowPane ⟼ <window-pane>

File Manifest

File Manifest
File	Language	Author(s)	Copyright
windowPane.js	Javascript	Kenneth F. Guerin	Copyright © 2023-2024 Brick Mill Games, LLC, All rights reserved.

Overview

This module contains the implementation of the WebFX element: <window-pane>

Window panes are free-floating panes tied to a parent's visible area.

Constructor Registry

Item

Attributes

new WebFX.WindowPane()

Class Property Registry

Item

Attributes

observedAttributes ↔ Array<String>

<api>

Property Registry

Item

Attributes

closable ↔ Boolean

onfloat ↔ String or Function

onmove ↔ String or Function

onresize ↔ String or Function

resizable ↔ Boolean

title ↔ String

title-background ↔ String

title-color ↔ String

title-font ↔ String

Method Registry

Item

Attributes

attributeChangedCallback(name, oldValue, newValue)

<api>

connectedCallback()

<api>

disconnectedCallback()

<api>

Constructor Details

new WebFX.WindowPane()

The window-pane constructor executes the usual custom HTML initialization procedure by creating the shadow DOM.

Class Property Details

observedAttributes ↔ Array<String> <api>

This property lists the attributes that are managed as properties by this class.

Property Details

closable ↔ Boolean

This property manages window-pane's ability to close itself.

onfloat ↔ String or Function

This property sets a procedure to be called when the window-pane is floated to the top

onmove ↔ String or Function

This property sets a procedure to be called when the window-pane is moved

onresize ↔ String or Function

This property sets a procedure to be called when the window-pane is resized

resizable ↔ Boolean

This property manages window-pane's ability to resize itself.

title ↔ String

This property manages window-pane's title string.

title-background ↔ String

This property manages window-pane's banner background.

title-color ↔ String

This property manages window-pane's banner color.

title-font ↔ String

This property manages window-pane's banner font.

Method Details

attributeChangedCallback(name, oldValue, newValue) <api>

When the following attribute values change: - 'closable': change the window-pane's closability option - 'resizable': change the window-pane's resizability option - 'mode': change the window-pane's positioning mode (absolute or relative) - 'title': change the window-pane's title - 'banner-background': change the window-pane's banner background - 'banner-color': change the window-pane's banner color

Parameters:

name [String] — the name of the attribute which has changed
oldValue [Value] — the original value of the changed attribute
newValue [Value] — the new value of the changed attribute

connectedCallback() <api>

Upon connection to the DOM, this method enables the MouseEventObserver.

disconnectedCallback() <api>

Upon disconnection from the DOM, this method disables the MouseEventObserver.