Utility for attaching debounced listeners to resize, scroll, orientation and visibility events on
Note: within the module's API and in the documentation below
visibility are used instead of
visibilitychange, but the actual browser event listened to is
Attaches a debounced/throttled (as appropriate) listener to events on window [
all] which in turn fires events within the
oViewport namespace (see Events below).
Note: all will enable all o-viewport events.
Remove the attached listener from the window for the named event [
Note: all will disable all o-viewport events.
Provides a reasonably reliable way (more so than
window.orientation) of obtaining the current orientation of the viewport.
Provides a reasonably reliable way of obtaining the current visibility of the viewport.
Provides a reliable way of obtaining the current dimensions of the browser window. Returns an object with the properties
By default or if no parameters are passed the method will return the size of the viewport inclusive of the scrollbars. However in certain cases (e.g. adverts) you may want to get the size of the viewport without the scroll bars. In such case pass
true to the method in order to ignore the scrollbars.
Provides a reliable way of obtaining the current scroll position of the viewport. returns an object with the properties
o-viewport#setThrottleInterval(eventType, interval)Product use only
Sets the debounce/throttle interval for a given event [
As a shorthand, calling
setThrottleInterval with 1 - 3 numbers will set the intervals for
orientation in that order e.g.
setThrottleInterval(100, undefined, 300) is equivalent to:
setThrottleInterval('scroll', 100) setThrottleInterval('resize') // which does nothing setThrottleInterval('orientation', 300) setThrottleInterval('visibility', 30)
The default value for each of these is 100ms
Turns on debug mode (logging event details to the console).
Each of these custom events are fired on
document.body. For each custom event
event.detail.originalEvent contains a reference to the original browser event and
event.detail.viewport the result of
o-viewport#getSize(). Additional properties in
event.detail are detailed below:
No additional properties
orientation: 'portrait' or 'landscape'
hidden: true or false
scrollLeft: body.scrollLeft // or documentElement.scrollLeft in < ie10 scrollTop: body.scrollTop // or documentElement.scrollTop in < ie10 scrollHeight: body.scrollHeight scrollWidth: body.scrollWidth
Copyright (c) 2016 Financial Times Ltd. All rights reserved.
This software is published under the MIT licence.