DOM
Class: Phaser.DOM
Constructor
new DOM()
DOM utility class.
Provides a useful Window and Element functions as well as cross-browser compatibility buffer.
Some code originally derived from verge.
Some parts were inspired by the research of Ryan Van Etten, released under MIT License 2013.
- Source code: utils/DOM.js (Line 18)
Public Properties
- Source code: utils/DOM.js (Line 274)
- Source code: utils/DOM.js (Line 260)
- Internal:
- This member is internal (protected) and may be modified or removed in the future.
- Source code: utils/DOM.js (Line 289)
- Internal:
- This member is internal (protected) and may be modified or removed in the future.
- Source code: utils/DOM.js (Line 301)
- Source code: utils/DOM.js (Line 239)
<static, readonly> documentBounds : Phaser.Rectangle
The size of the document / Layout viewport.
This incorrectly reports the dimensions in IE.
The properties change dynamically.
Properties:
Name | Type | Description |
---|---|---|
width | number | Document width in pixels. |
height | number | Document height in pixels. |
<static, readonly> layoutBounds : Phaser.Rectangle
The bounds of the Layout viewport, as discussed in
A tale of two viewports — part two;
but honoring the constraints as specified applicable viewport meta-tag.
The bounds returned are not guaranteed to be fully aligned with CSS media queries (see
What size is my viewport?).
This is not representative of the Visual bounds: in particular the non-primary axis will
generally be significantly larger than the screen height on mobile devices when running with a
constrained viewport.
The properties change dynamically.
Properties:
Name | Type | Description |
---|---|---|
width | number | Viewport width in pixels. |
height | number | Viewport height in pixels. |
<internal, static, readonly> scrollX : number
A cross-browser window.scrollX.
<internal, static, readonly> scrollY : number
A cross-browser window.scrollY.
<static, readonly> visualBounds : Phaser.Rectangle
The bounds of the Visual viewport, as discussed in
A tale of two viewports — part one
with one difference: the viewport size excludes scrollbars, as found on some desktop browsers.
Supported mobile:
iOS/Safari, Android 4, IE10, Firefox OS (maybe not Firefox Android), Opera Mobile 16
The properties change dynamically.
Properties:
Name | Type | Description |
---|---|---|
x | number | Scroll, left offset - eg. "scrollX" |
y | number | Scroll, top offset - eg. "scrollY" |
width | number | Viewport width in pixels. |
height | number | Viewport height in pixels. |
Public Methods
- Source code: utils/DOM.js (Line 100)
- Source code: utils/DOM.js (Line 48)
- A point objet with the offsetX and Y as its properties.
- Source code: utils/DOM.js (Line 20)
- Screen Orientation API, or variation of - Future track. Most desktop and mobile browsers.
- Screen size ratio check - If fallback is 'screen', suited for desktops.
- Viewport size ratio check - If fallback is 'viewport', suited for mobile.
- window.orientation - If fallback is 'window.orientation', works iOS and probably most Android; non-recommended track.
- Media query
- Viewport size ratio check (probably only IE9 and legacy mobile gets here..)
- https://w3c.github.io/screen-orientation/ (conflicts with mozOrientation/msOrientation)
- https://developer.mozilla.org/en-US/docs/Web/API/Screen.orientation (mozOrientation)
- http://msdn.microsoft.com/en-us/library/ie/dn342934(v=vs.85).aspx
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries
- http://stackoverflow.com/questions/4917664/detect-viewport-orientation
- http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation
- Internal:
- This member is internal (protected) and may be modified or removed in the future.
- Source code: utils/DOM.js (Line 149)
- Source code: utils/DOM.js (Line 128)
<static> getAspectRatio(object) → {number}
Get the Visual viewport aspect ratio (or the aspect ratio of an object or element)
Parameters
Name | Type | Argument | Default | Description |
---|---|---|---|---|
object | DOMElement | Object | <optional> | (visualViewport) | The object to determine the aspect ratio for. Must have public |
Returns
The aspect ratio.
<static> getBounds(element, cushion) → {Object | boolean}
A cross-browser element.getBoundingClientRect method with optional cushion.
Returns a plain object containing the properties top/bottom/left/right/width/height
with respect to the top-left corner of the current viewport.
Its properties match the native rectangle.
The cushion parameter is an amount of pixels (+/-) to cushion the element.
It adjusts the measurements such that it is possible to detect when an element is near the viewport.
Parameters
Name | Type | Argument | Description |
---|---|---|---|
element | DOMElement | Object | The element or stack (uses first item) to get the bounds for. | |
cushion | number | <optional> | A +/- pixel adjustment amount. |
Returns
A plain object containing the properties top/bottom/left/right/width/height
or false
if a non-valid element is given.
<static> getOffset(element, point) → {Phaser.Point}
Get the [absolute] position of the element relative to the Document.
The value may vary slightly as the page is scrolled due to rounding errors.
Parameters
Name | Type | Argument | Description |
---|---|---|---|
element | DOMElement | The targeted element that we want to retrieve the offset. | |
point | Phaser.Point | <optional> | The point we want to take the x/y values of the offset. |
Returns
<internal, static> getScreenOrientation(primaryFallback)
Returns the device screen orientation.
Orientation values: 'portrait-primary', 'landscape-primary', 'portrait-secondary', 'landscape-secondary'.
Order of resolving:
See
Parameters
Name | Type | Argument | Default | Description |
---|---|---|---|---|
primaryFallback | string | <optional> | (none) | Specify 'screen', 'viewport', or 'window.orientation'. |
<static> inLayoutViewport(element, cushion) → {boolean}
Tests if the given DOM element is within the Layout viewport.
The optional cushion parameter allows you to specify a distance.
inLayoutViewport(element, 100) is true
if the element is in the viewport or 100px near it.
inLayoutViewport(element, -100) is true
if the element is in the viewport or at least 100px near it.
Parameters
Name | Type | Argument | Description |
---|---|---|---|
element | DOMElement | Object | The DOM element to check. If no element is given it defaults to the Phaser game canvas. | |
cushion | number | <optional> | The cushion allows you to specify a distance within which the element must be within the viewport. |
Returns
True if the element is within the viewport, or within cushion
distance from it.
© 2016 Richard Davey, Photon Storm Ltd.
Licensed under the MIT License.
http://phaser.io/docs/2.6.2/Phaser.DOM.html