Class UserPreferencesComponent

Lets the user override default configuration values and saves them as user data.

Hierarchy (View Summary)

GirafeHTMLElement
- UserPreferencesComponent

Implements

IGirafePanel

Constructors

constructor

new UserPreferencesComponent(): UserPreferencesComponent
Returns UserPreferencesComponent
Overrides GirafeHTMLElement.constructor
- Defined in src/components/userpreferences/component.ts:28

Properties

colorPickers

colorPickers: Record<string, GirafeColorPicker> = {}

isPanelVisible

isPanelVisible: boolean = false

`Readonly`name

name: string

panelTitle

panelTitle: string = 'user-preferences-panel'

panelTogglePath

panelTogglePath: string = 'interface.userPreferencesPanelVisible'

preferenceGroups

preferenceGroups: string[] = PreferenceGroups

preferences

preferences: Record<string, UserPreference>

ready

ready: boolean = false

`Protected`rendered

rendered: boolean = false

`Protected`shadow

shadow: ShadowRoot

`Protected`styleUrl

styleUrl: string | null = null

styleUrls

styleUrls: string[] = ...

`Protected`template

template: Hole | (() => Hole)

templateUrl

templateUrl: string = './template.html'

Accessors

`Protected`context

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

`Protected`state

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

Methods

activateTheme

activateTheme(mode: "light" | "dark", className: string): void
Parameters
- mode: "light" | "dark"
- className: string
Returns void
- Defined in src/components/userpreferences/component.ts:127

`Protected`canExecute

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

changePreference

changePreference(preferenceKey: string, newValue: unknown): void
Update state and local storage with new value
Parameters
- preferenceKey: string
- newValue: unknown
Returns void
- Defined in src/components/userpreferences/component.ts:262

`Protected`connectedCallback

connectedCallback(): void
Returns void
Overrides GirafeHTMLElement.connectedCallback
- Defined in src/components/userpreferences/component.ts:87

`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 src/base/GirafeHTMLElement.ts:261

`Protected`getById

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

`Protected`getChildElement

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

`Protected`getInheritedContext

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

`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 src/base/GirafeHTMLElement.ts:77

getPreferencesByGroup

getPreferencesByGroup(group: string): [UserPreference, string][]
Parameters
- group: string
Returns [UserPreference, string][]
all preferences of a group for easy usage in the template.
- Defined in src/components/userpreferences/component.ts:333

`Protected`girafeTranslate

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

`Protected`hide

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

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

`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 src/base/GirafeHTMLElement.ts:155

`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 src/base/GirafeHTMLElement.ts:69

`Protected`isNullOrUndefinedOrBlank

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

onChangeDarkFrontendMode

onChangeDarkFrontendMode(newValue: boolean | undefined): void
Parameters
- newValue: boolean | undefined
Returns void
- Defined in src/components/userpreferences/component.ts:121

onChangeDarkMapMode

onChangeDarkMapMode(newValue: boolean | undefined): void
Parameters
- newValue: boolean | undefined
Returns void
- Defined in src/components/userpreferences/component.ts:116

onOpenSelectOption

onOpenSelectOption(preferenceKey: string): void
If necessary, change/update options of select elements right before they're shown.
Parameters
- preferenceKey: string
Returns void
- Defined in src/components/userpreferences/component.ts:241

onResetAll

onResetAll(): Promise<void>
Reset user preferences back to defaults. This will delete the configOverrides object in storage and set the current state back to the defaults from config.json

Returns Promise<void>
- Defined in src/components/userpreferences/component.ts:310

onSelectOption

onSelectOption(preferenceKey: string, evt: Event): void
Called when user changes a preference in the panel
Parameters
- preferenceKey: string
- evt: Event
Returns void
- Defined in src/components/userpreferences/component.ts:251

`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 src/base/GirafeHTMLElement.ts:119

`Protected`registerInteractionListener

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

render

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

Returns void
Overrides GirafeHTMLElement.render
- Defined in src/components/userpreferences/component.ts:95

`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 src/base/GirafeHTMLElement.ts:143

`Protected`show

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

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

`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 src/base/GirafeHTMLElement.ts:194

`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 src/base/GirafeHTMLElement.ts:224
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 src/base/GirafeHTMLElement.ts:225

togglePanel

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

`Protected`unregisterInteractionListeners

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

`Protected`unsubscribe

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

Class UserPreferencesComponent

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns UserPreferencesComponent

Properties

colorPickers

isPanelVisible

Readonlyname

panelTitle

panelTogglePath

preferenceGroups

preferences

ready

Protectedrendered

Protectedshadow

ProtectedstyleUrl

styleUrls

Protectedtemplate

templateUrl

Accessors

Protectedcontext

Returns IGirafeContext

Protectedstate

Returns State

Methods

activateTheme

Parameters

Returns void

ProtectedcanExecute

Parameters

Returns boolean

changePreference

Parameters

Returns void

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

getPreferencesByGroup

Parameters

Returns [UserPreference, string][]

ProtectedgirafeTranslate

Returns void

Protectedhide

Returns void

ProtectedhtmlUnsafe

Parameters

Returns Hole

ProtectedisNullOrUndefined

Parameters

Returns boolean

ProtectedisNullOrUndefinedOrBlank

Parameters

Returns boolean

onChangeDarkFrontendMode

Parameters

Returns void

onChangeDarkMapMode

Parameters

Returns void

`Readonly`name

`Protected`rendered

`Protected`shadow

`Protected`styleUrl

`Protected`template

`Protected`context

`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