SHIFT + D

Filter by package

  • Overview
  • Ancestor variants
  • Composition
  • Edge
  • Features
  • Linear numeric
  • Logic
  • Prose
  • Source transform
  • SPA links
  • Utilities

Fullscreenable

Updated on August 22, 2024Source codeTests

Fullscreenable is a class that enriches an element, allowing it to:

  • Asynchronously enter and exit full screen
  • Store a status (ready, fullscreened, exited, or errored)
  • Store any error that gets thrown while entering or exiting full screen

Construct a Fullscreenable instance

The Fullscreenable constructor accepts two parameters:

Parameter
Type
Required
Description
getElement
Function
yes
A function that, when called, will return the element that will be made fullscreenable.
options
Object
no
Options for the Fullscreenable instance. See the Fullscreenable constructor options section for more guidance.

Fullscreenable constructor options

Fullscreenable's options object currently does not accept any options.

State and methods

Property
Type
Description
Parameters
Return value
getElement
Getter/Setter
See return value
N/A

A copy of the getElement function passed to the constructor.

If you assign a value directly to getElement, a setter will pass the new value to setGetElement.

status
Getter
See return value
N/A
Indicates the current status (String) of the Fullscreenable instance. See the How methods affect status section for more information.
element
Getter
See return value
N/A
The element returned by the getElement. Can't be accessed until the DOM is available.
error
Getter
See return value
N/A
undefined before the fullscreen or exit methods throw an error, and the error (Error) after any error is thrown.
setGetElement(newGetElement)
Function
Sets the getElement
The new getElement (Array)
The Fullscreenable instance
fullscreen()
Function
Asynchronously fullscreens the element.
none
The Fullscreenable instance
enter()
Function
An alias for fullscreen.
none
The Fullscreenable instance
exit()
Function
Asynchronously exits fullscreen.
none
The Fullscreenable instance

How methods affect status

Each Fullscreenable instance maintains a status property that keeps you informed of what's going on internally. As mentioned above, the value of status is a string, and that string can be one of the following:

  • ready
  • fullscreened
  • exited
  • errored

Fullscreenable's status is pretty easy to predict:

  • After the instance is constructed, status will be ready.
  • When the fullscreen or enter methods are called, status will be fullscreened if the method is successful and errored if it isn't.
  • When the exit method is called, status will be exited if the method is successful and errored if it isn't.

Using with TypeScript

The Fullscreenable constructor accepts one generic type that you can use to enforce a type for the element returned by getElement. By default, TypeScript will infer the element type from the initial getElement function you pass to the constructor, but you can specify the type manually if needed.

const withInferredTypes = new Fullscreenable(() => document.querySelector('button'))
withInferredTypes.getElement = () => document.querySelector('input') // Type error

const withManualTypes = new Fullscreenable<HTMLInputElement | HTMLButtonElement>(() => document.querySelector('button'))
withManualTypes.getElement = () => document.querySelector('input') // No type error

API design compliance

Spec
Compliance status
Notes
Access functionality by constructing an instance
Constructor accepts two parameters: a piece of state, and an options object.
The options object doesn't currently have any valid properties.
Constructor does not access the DOM
Takes the form of a JavaScript Object
State and methods are accessible through properties of the object
Methods always return the instance
Stores the constructor's state in a public getter named after the state's type
getElement
Has a public method you can use to set a new value for that public getter
setGetElement
Has a setter for that getter so you can assign a new value directly
Any other public getters that should be set by you in some cases also have setters and set<Property> methods
none
Has at least one additional getter property that you can't (and shouldn't) set directly
status, element, error
Has one or more public methods that expose core functionality
fullscreen, enter, exit
Either has no side effects or has side effects that can be cleaned up with a stop method
Uses the sentence template to decide what state type should be accepted by a constructor
"An element (retrieved by an element getter) can be fullscreened."
Constructor does not accept options that only customize the behavior of public methods, it allows those options to be passed to the method itself as a parameter.
Named after its core action, proper-cased and suffixed with able

FetchableGrantable

Edit doc on GitHub

ON THIS PAGE

FullscreenableConstruct a Fullscreenable instanceFullscreenable constructor optionsState and methodsHow methods affect statusUsing with TypeScriptAPI design compliance