interface ViewportContext

Interface definition for an object that contains information about the user’s viewport, e.g. browser window.

interface ViewportContext
extends ManagedObject

Description

A ViewportContext object is available on the global application context, as app.viewport. This instance can be used to customize the UI for different viewport sizes — either directly or through a binding.

Examples

// Determine the viewport size directly:
if (app.viewport.portrait) {
  // ...do something specific here
}

// Bind to viewport properties from a JSX view:
<conditional state={bound("viewport.wide")}>
  // ...view for wide viewports
</conditional>

Constructor

• constructor()Creates a new managed object.

Instance Members

• widthThe viewport width in logical pixel units.
• heightThe viewport height in logical pixel units.
• portraitTrue if the viewport is taller than it is wide.
• narrowTrue if the viewport width is below the first breakpoint.
• wideTrue if the viewport width exceeds the second breakpoint.
• shortTrue if the viewport height is below the first breakpoint.
• tallTrue if the viewport height exceeds the second breakpoint.
• setBreakpoints(small, large)Updates breakpoints for narrow, wide, short and tall properties.

Inherited Members

• emit(event)Emits an event, immediately calling all event handlers.
• emitChange(name?, data?)Emits a change event, an instance of ManagedChangeEvent.
• listen(handler)Adds a handler for all events emitted by this object.
• isUnlinked()Returns true if the object has been unlinked.
• unlink()Unlinks this managed object.
• beforeUnlink() protectedA method that’s called immediately before unlinking an object, can be overridden.
• attach(target, observer?) protectedAttaches the provided managed object to this object.
• autoAttach(propertyName, observer?) protectedObserves a property, so that any object assigned to it is attached immediately.