Class LayoutComponent

Hierarchy (View Summary)

GirafeHTMLElement
- LayoutComponent

Implements

IGirafePanel

Constructors

constructor

new LayoutComponent(): LayoutComponent
Returns LayoutComponent
Overrides GirafeHTMLElement.constructor
- Defined in components/layout/component.ts:33

Properties

availableComponents

availableComponents: readonly [
{ id: "map-2d"; label: "2D Map"; tagName: "girafe-map-2d" },
{ id: "map-3d"; label: "3D Map"; tagName: "girafe-map-3d" },
] = AVAILABLE_CELL_COMPONENTS

The Components the user can choose between for each Cell of the Grid.

`Protected` `Optional`displayStyle

displayStyle?: string

`Protected` `Optional`feedbackTemplateHtml

feedbackTemplateHtml?: string

isPanelVisible

isPanelVisible: boolean = false

`Readonly`name

name: string

panelTitle

panelTitle: string = 'layout-panel'

panelTogglePath

panelTogglePath: string = 'interface.layoutPanelVisible'

`Protected`rendered

rendered: boolean = false

`Protected`shadow

shadow: ShadowRoot

styleUrls

styleUrls: string[] = ...

`Protected`template

template: Hole | (() => Hole)

templateUrl

templateUrl: string = './template.html'

Accessors

allowedLayouts

get allowedLayouts(): ("1x1" | "2x1" | "1x2" | "2x2")[]
The Layouts the user can choose between, as configured in the application.

Returns ("1x1" | "2x1" | "1x2" | "2x2")[]
- Defined in components/layout/component.ts:43

cellRows

get cellRows(): { content: CellContent; index: number }[][]
The Cells of the current Layout, one line of the schema per row of the Grid.

Returns { content: CellContent; index: number }[][]
- Defined in components/layout/component.ts:53

`Protected`context

get context(): IGirafeContext
Returns IGirafeContext
Inherited from GirafeHTMLElement.context
- Defined in base/GirafeHTMLElement.ts:45

customStyle

get customStyle(): string
Returns string
Inherited from GirafeHTMLElement.customStyle
- Defined in base/GirafeHTMLElement.ts:33

is3dDisplayed

get is3dDisplayed(): boolean
Whether one of the Cells displays a 3D Map, which the shadows options depend on.

Returns boolean
- Defined in components/layout/component.ts:118

`Protected`isFullscreenComponent

get isFullscreenComponent(): boolean
Whether this Component must stay visible when the App is in Fullscreen Mode. Controlled by the "fullscreen" attribute (default: false).

Returns boolean
Inherited from GirafeHTMLElement.isFullscreenComponent
- Defined in base/GirafeHTMLElement.ts:256

layoutButtons

get layoutButtons(): { icon: string; type: "1x1" | "2x1" | "1x2" | "2x2" }[]
The Layouts the user can choose between, with the icon illustrating each of them.

Returns { icon: string; type: "1x1" | "2x1" | "1x2" | "2x2" }[]
- Defined in components/layout/component.ts:48

`Protected`state

get state(): State
Returns State
Inherited from GirafeHTMLElement.state
- Defined in base/GirafeHTMLElement.ts:61

Methods

`Protected`canExecute

canExecute(eventName: GgUserInteractionEvent): boolean
Parameters
- eventName: GgUserInteractionEvent
Returns boolean
Inherited from GirafeHTMLElement.canExecute
- Defined in base/GirafeHTMLElement.ts:369

`Protected`connectedCallback

connectedCallback(): void
Returns void
Overrides GirafeHTMLElement.connectedCallback
- Defined in components/layout/component.ts:150

`Protected`disconnectedCallback

disconnectedCallback(): void
When the component is disconnected from the DOM all the callbacks will be unregistered

Returns void
Inherited from GirafeHTMLElement.disconnectedCallback
- Defined in base/GirafeHTMLElement.ts:345

`Protected`getById

getById<T = HTMLElement>(id: string): T
Type Parameters
- T = HTMLElement
Parameters
- id: string
Returns T
Inherited from GirafeHTMLElement.getById
- Defined in base/GirafeHTMLElement.ts:65

`Protected`getChildElement

getChildElement<T = HTMLElement>(selector: string): T
Type Parameters
- T = HTMLElement
Parameters
- selector: string
Returns T
Inherited from GirafeHTMLElement.getChildElement
- Defined in base/GirafeHTMLElement.ts:69

`Protected`getInheritedContext

getInheritedContext(): IGirafeContext
Returns IGirafeContext
Inherited from GirafeHTMLElement.getInheritedContext
- Defined in base/GirafeHTMLElement.ts:373

`Protected`getParentOfType

getParentOfType(
    parentNodeName: string,
    elem: Node | null,
    initialElem?: Node | null,
): Node | null
Parameters
- parentNodeName: string
- elem: Node | null
- initialElem: Node | null = elem
Returns Node | null
Inherited from GirafeHTMLElement.getParentOfType
- Defined in base/GirafeHTMLElement.ts:100

`Protected`girafeTranslate

girafeTranslate(): void
Returns void
Inherited from GirafeHTMLElement.girafeTranslate
- Defined in base/GirafeHTMLElement.ts:73

`Protected`hide

hide(): void
Hide the component (display: none).

Returns void
Inherited from GirafeHTMLElement.hide
- Defined in base/GirafeHTMLElement.ts:238

`Protected`htmlUnsafe

htmlUnsafe(str: string): Hole
Convert the string in parameter with uHtml and return it. This allows to convert a string with html in a right html object. For example, htmlUnsafe('
') will return an html div object.
Parameters
- str: string
Returns Hole
Inherited from GirafeHTMLElement.htmlUnsafe
- Defined in base/GirafeHTMLElement.ts:186

insertFeedbackTemplate

insertFeedbackTemplate(template: string): void
Parameters
- template: string
Returns void
Inherited from GirafeHTMLElement.insertFeedbackTemplate
- Defined in base/GirafeHTMLElement.ts:131

`Protected`isNullOrUndefined

isNullOrUndefined(val: unknown): boolean
NOTE REG: We cannot just use truthy here, because javascript comparaison table is really problematic. For example: 0 == false [] == false "" == false And there are cases where we want to check null or undefined, because 0 can be a right value. More here : https://dorey.github.io/JavaScript-Equality-Table/
Parameters
- val: unknown
Returns boolean
Inherited from GirafeHTMLElement.isNullOrUndefined
- Defined in base/GirafeHTMLElement.ts:92

`Protected`isNullOrUndefinedOrBlank

isNullOrUndefinedOrBlank(val: unknown): boolean
Parameters
- val: unknown
Returns boolean
Inherited from GirafeHTMLElement.isNullOrUndefinedOrBlank
- Defined in base/GirafeHTMLElement.ts:96

onCellSelect

onCellSelect(event: Event, cellIndex: number): void
Places a Component in a Cell of the Grid. A Component can only be displayed once: if it is already displayed in another Cell, both Cells are swapped, so that the Component that was in the target Cell is not lost.
Parameters
- event: Event
- cellIndex: number
Returns void
- Defined in components/layout/component.ts:104

onLayoutSelect

onLayoutSelect(selectedLayout: "1x1" | "2x1" | "1x2" | "2x2"): void
Parameters
- selectedLayout: "1x1" | "2x1" | "1x2" | "2x2"
Returns void
- Defined in components/layout/component.ts:93

`Protected`refreshRender

refreshRender(): void
Re-Render the component. The method should be called when the component has already been rendered and needs to be updated.

Returns void
Inherited from GirafeHTMLElement.refreshRender
- Defined in base/GirafeHTMLElement.ts:140

`Protected`registerInteractionListener

registerInteractionListener(
eventName: GgUserInteractionEvent,
isExclusive: boolean,
): boolean
Parameters
- eventName: GgUserInteractionEvent
- isExclusive: boolean
Returns boolean
Inherited from GirafeHTMLElement.registerInteractionListener
- Defined in base/GirafeHTMLElement.ts:353

render

render(): void
Render the component's template.

Returns void
Overrides GirafeHTMLElement.render
- Defined in components/layout/component.ts:156

`Protected`renderEmpty

renderEmpty(): void
Renders a hidden span with the name of the component. Useful to render a placeholder for not visible component.

Returns void
Inherited from GirafeHTMLElement.renderEmpty
- Defined in base/GirafeHTMLElement.ts:174

`Protected`show

show(): void
Show the component (display: block).

Returns void
Inherited from GirafeHTMLElement.show
- Defined in base/GirafeHTMLElement.ts:246

`Protected`simulateClick

simulateClick(e: KeyboardEvent): void
In the templates, sometimes for accessibility reasons, we have to support the KeyDown Event In those case, we often juste want to do the same as the click event when Enter or Space is pressed Then this method can be used : it just calls the click event on the same element
Parameters
- e: KeyboardEvent
Returns void
Inherited from GirafeHTMLElement.simulateClick
- Defined in base/GirafeHTMLElement.ts:225

`Protected`subscribe

subscribe(path: string, callback: Callback): Callback
Subscribes with to the state changes made on
Parameters
- path: string
- callback: Callback
Returns Callback
Inherited from GirafeHTMLElement.subscribe
- Defined in base/GirafeHTMLElement.ts:305
subscribe(path: RegExp, callback: Callback): Callback
Subscribes with to the state changes made on
Parameters
- path: RegExp
- callback: Callback
Returns Callback
Inherited from GirafeHTMLElement.subscribe
- Defined in base/GirafeHTMLElement.ts:306

togglePanel

togglePanel(visible: boolean): void
Parameters
- visible: boolean
Returns void
Implementation of IGirafePanel.togglePanel
- Defined in components/layout/component.ts:69

`Protected`unregisterInteractionListeners

unregisterInteractionListeners(
eventNames?: GgUserInteractionEvent | GgUserInteractionEvent[],
): void
Parameters
- OptionaleventNames: GgUserInteractionEvent | GgUserInteractionEvent[]
Returns void
Inherited from GirafeHTMLElement.unregisterInteractionListeners
- Defined in base/GirafeHTMLElement.ts:357

`Protected`unsubscribe

unsubscribe(callback: Callback): void
Parameters
- callback: Callback
  Unsubscribe all callbacks
Returns void
Inherited from GirafeHTMLElement.unsubscribe
- Defined in base/GirafeHTMLElement.ts:319
unsubscribe(callbacks: Callback[]): void
Parameters
- callbacks: Callback[]
Returns void
Inherited from GirafeHTMLElement.unsubscribe
- Defined in base/GirafeHTMLElement.ts:320

`Static`setCustomStyle

setCustomStyle(componentName: string, customCss: string): void
Parameters
- componentName: string
- customCss: string
Returns void
Inherited from GirafeHTMLElement.setCustomStyle
- Defined in base/GirafeHTMLElement.ts:41

Class LayoutComponent

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns LayoutComponent

Properties

availableComponents

Protected OptionaldisplayStyle

Protected OptionalfeedbackTemplateHtml

isPanelVisible

Readonlyname

panelTitle

panelTogglePath

Protectedrendered

Protectedshadow

styleUrls

Protectedtemplate

templateUrl

Accessors

allowedLayouts

Returns ("1x1" | "2x1" | "1x2" | "2x2")[]

cellRows

Returns { content: CellContent; index: number }[][]

Protectedcontext

Returns IGirafeContext

customStyle

Returns string

is3dDisplayed

Returns boolean

ProtectedisFullscreenComponent

Returns boolean

layoutButtons

Returns { icon: string; type: "1x1" | "2x1" | "1x2" | "2x2" }[]

Protectedstate

Returns State

Methods

ProtectedcanExecute

Parameters

Returns boolean

ProtectedconnectedCallback

Returns void

ProtecteddisconnectedCallback

Returns void

ProtectedgetById

Type Parameters

Parameters

Returns T

ProtectedgetChildElement

Type Parameters

Parameters

Returns T

ProtectedgetInheritedContext

Returns IGirafeContext

ProtectedgetParentOfType

Parameters

Returns Node | null

ProtectedgirafeTranslate

Returns void

Protectedhide

Returns void

ProtectedhtmlUnsafe

Parameters

Returns Hole

insertFeedbackTemplate

Parameters

Returns void

ProtectedisNullOrUndefined

Parameters

Returns boolean

ProtectedisNullOrUndefinedOrBlank

Parameters

Returns boolean

onCellSelect

Parameters

`Protected` `Optional`displayStyle

`Protected` `Optional`feedbackTemplateHtml

`Readonly`name

`Protected`rendered

`Protected`shadow

`Protected`template

`Protected`context

`Protected`isFullscreenComponent

`Protected`state

`Protected`canExecute

`Protected`connectedCallback

`Protected`disconnectedCallback

`Protected`getById

`Protected`getChildElement

`Protected`getInheritedContext

`Protected`getParentOfType

`Protected`girafeTranslate

`Protected`hide

`Protected`htmlUnsafe

`Protected`isNullOrUndefined

`Protected`isNullOrUndefinedOrBlank

`Protected`refreshRender

`Protected`registerInteractionListener

`Protected`renderEmpty

`Protected`show

`Protected`simulateClick

`Protected`subscribe

`Protected`unregisterInteractionListeners

`Protected`unsubscribe

`Static`setCustomStyle