ui/overlay/overlay-page

Classes

OverlayPage

Defined in: app/src/ui/overlay/overlay-page.ts:126

The page of the overlay: it shows one popover next to the button that opened it. A click next to the popover or Escape closes it; the browser process runs shortcuts.

Extends

• LitElement

Constructors

Constructor

new OverlayPage(): OverlayPage

Defined in: app/src/ui/overlay/overlay-page.ts:375

Returns

OverlayPage

Overrides

LitElement.constructor

lifecycle

connectedCallback()

connectedCallback(): void

Defined in: app/src/ui/overlay/overlay-page.ts:382

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

LitElement.connectedCallback

disconnectedCallback()

disconnectedCallback(): void

Defined in: app/src/ui/overlay/overlay-page.ts:389

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

LitElement.disconnectedCallback

Other

armed

armed: boolean

Defined in: app/src/ui/overlay/overlay-page.ts:370

Whether the buttons of a question take clicks. They do a moment after the question shows, as in other browsers, so the second click of a double click on the question before does not answer this one.

bridge

bridge: PageBridge | undefined

Defined in: app/src/ui/overlay/overlay-page.ts:371

chosen

chosen: string | undefined

Defined in: app/src/ui/overlay/overlay-page.ts:364

The screen or window chosen in the picker.

content

content: Content | null

Defined in: app/src/ui/overlay/overlay-page.ts:362

i18n

i18n: Translator | undefined

Defined in: app/src/ui/overlay/overlay-page.ts:372

styles

static styles: CSSResult

Defined in: app/src/ui/overlay/overlay-page.ts:134

Styles of the page, scoped to its shadow root.

Overrides

LitElement.styles

properties

properties

static properties: object

Defined in: app/src/ui/overlay/overlay-page.ts:127

User-supplied object that maps property names to PropertyDeclaration objects containing options for configuring reactive properties. When a reactive property is set the element will update and render.

By default properties are public fields, and as such, they should be considered as primarily settable by element users, either via attribute or the property itself.

Generally, properties that are changed by the element should be private or protected fields and should use the state: true option. Properties marked as state do not reflect from the corresponding attribute

However, sometimes element code does need to set a public property. This should typically only be done in response to user interaction, and an event should be fired informing the user; for example, a checkbox sets its checked property when clicked and fires a changed event. Mutating public properties should typically not be done for non-primitive (object or array) properties. In other cases when an element needs to manage state, a private property set with the state: true option should be used. When needed, state properties can be initialized via public properties to facilitate complex interactions.

armed

armed: object

armed.state

state: boolean = true

chosen

chosen: object

chosen.state

state: boolean = true

content

content: object

content.state

state: boolean = true

Nocollapse

Overrides

LitElement.properties

rendering

render()

render(): TemplateResult | typeof nothing

Defined in: app/src/ui/overlay/overlay-page.ts:441

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult | typeof nothing

Overrides

LitElement.render