Origami Frontend Components & Services

JSDoc: o-viewport

setThrottleInterval(eventType, interval)

Global Function

parameter type default description
eventType string The type of event to throttle for this duration.
interval number The duration to throttle in ms.

Example

// throttle for different events at different durations
    setThrottleInterval('scroll', 100)
    setThrottleInterval('resize', 300)
    setThrottleInterval('orientation', 30)
    setThrottleInterval('visibility', 30)
		// throttle all events at 30ms
    setThrottleInterval(30);

Links

listenTo(eventType)

Global Function

Start listening for an event(s).

parameter type default description
eventType string The event to start listening for. One of `resize`, `scroll`, `orientation`, `visibility` or `all`.

Example

// Start listening for all events.
		oViewport.listenTo('all');

		// It is now possible to listen for debounce o-viewport events such as `oViewport.orientation`.
     document.body.addEventListener('oViewport.orientation', function(event) {
     	console.log(event.type); // oViewport.orientation
     });

Links

stopListeningTo(eventType)

Global Function

Stop listening for an event(s).

parameter type default description
eventType string The event to stop listening for. One of `resize`, `scroll`, `orientation`, `visibility` or `all`.

Example

// Start listening for all events.
		oViewport.listenTo('all');
		// We're done. Stop listening for all events.
		oViewport.stopListeningTo('all');

Links

broadcast(...)

Global Function

parameter type default description
eventType string
data object
target EventTarget

Links

getHeight(ignoreScrollbars)

Global Function

Get the viewport height.

parameter type default description
ignoreScrollbars boolean [false] - set to true to discount scrollbar height.

Returns

  • number

Links

getWidth(ignoreScrollbars)

Global Function

Get the viewport width.

parameter type default description
ignoreScrollbars boolean [false] - set to true to discount scrollbar width

Returns

  • number

Links

getSize(ignoreScrollbars)

Global Function

Get the viewport width and height.

parameter type default description
ignoreScrollbars boolean [false] - set to true to discount scrollbar width/height.

Returns

  • Size

Links

getScrollPosition

Global Function

Returns

  • ScrollPosition

Links

getOrientation

Global Function

Returns

  • string - - 'portrait' or 'landscape'

Links

getVisibility

Global Function

Returns

  • boolean - - true if the viewport is visible

Links

Size

Viewport size.

Properties

  • height - (type: number)
  • width - (type: number)

Type

Object

Links

ScrollPosition

Scroll position.

Properties

  • height - (type: number) `document.body.scrollHeight`
  • width - (type: number) `document.body.scrollWidth`
  • left - (type: number) `window.pageXOffset || window.scrollX`
  • top - (type: number) `window.pageYOffset || window.scrollY`

Type

Object

Links

Support Status
active
Switch component view

GitHub Repository

Install o-viewport

If using the Build Service, add o-viewport@^4.0.3 to your script tag.

If running a Manual Build, run bower install --save "o-viewport@^4.0.3".

Help & Support

o-viewport is maintained directly by the Origami team. If you have any questions about o-viewport or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com