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.

Returns

  • void

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 the name of the event
data object the payload of the event
target EventTarget the target of the event

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 - viewport height

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 - viewport width

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 - viewport width and height object

Links

getScrollPosition

Global Function

Returns

  • ScrollPosition - current scroll info

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) viewport height
  • width - (type: number) viewport width

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

Status
active
Switch component view

GitHub: o-viewport@5.1.1

Install o-viewport

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-viewport@^5.1.1".

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