• Public
  • Public/Protected
  • All

Class Fullscreen

Utility class providing simplified access to the clients fullscreen API. The toggle can be used to toggle fullscreen for a HTML element while managing the execution of custom toggle code.

canvas.element.addEventListener('click', function() { gloperate.viewer.Fullscreen.toggle(canvas.element); });

Use :fullscreen (or :-moz-full-screen, :-webkit-full-screen, and :-ms-full-screen) selectors in order to configure fullscreen specific style. Alternatively, an additional class, e.g., fullscreen, could be toggled via callaback.


  • Fullscreen





Static Protected _callback

_callback: undefined | (() => void)

Callback that is to be triggered within the remove event listener.

Static Protected _element

_element: () => HTMLElement

Cached element call returning the fullscreen element specific to the clients fullscreen API.

Type declaration

    • (): HTMLElement
    • Returns HTMLElement

Static Protected _event

_event: string

Cached fullscreenchange event function of the clients specific fullscreen API.

Static Protected _exit

_exit: () => void

Cached exit call of the clients specific fullscreen API.

Type declaration

    • (): void
    • Returns void

Static Protected _request

_request: (element: HTMLElement) => void

Cached request call of the clients specific fullscreen API.

Type declaration

    • (element: HTMLElement): void
    • Parameters

      • element: HTMLElement

      Returns void

Static Protected _size

_size: [string, string] = ...

Backup of the element's initial width and height.

Static Protected addEventListener

addEventListener: EventListener = ...

Event listener used to add the remove event listener using on indirection, that is, the first fullscreen event triggered after a request is ignored. This is important for triggering the fullscreen callback before the request is completed. The listener adds the removeListener and removes itself as listener.

Static Protected removeEventListener

removeEventListener: EventListener = ...

Event listener that is used to account for implicit fullscreen exit events, e.g., user explicitly uses a GUI element for entering fullscreen, but uses ESC to exit fullscreen. The listener triggers the callback provided on toggle and removes itself as listener.


Static active

  • active(): boolean
  • Returns whether or not a fullscreen element exists, indicating if fullscreen is active or not.

    Returns boolean

Static Protected queryAndCacheAPI

  • queryAndCacheAPI(): void

Static toggle

  • toggle(element: HTMLElement, callback?: () => void): void
  • Requests or exits fullscreen mode for a given element. If the element is already in fullscreen, fullscreen mode is exited. Else, fullscreen mode is requested. The function considers various platform specific fullscreen interfaces, i.e., native, ms, moz, and webkit.


    • element: HTMLElement

      Element to toggle fullscreen state of.

    • Optional callback: () => void
        • (): void
        • Returns void

    Returns void