DOM Functions

No known breaking changes - as it's still dev/internal stuff.

- Added Phaser.DOM to house new DOM functions, moved stuff
  over from ScaleManager as appropriate

- Fixed a fiew cases of missing functions

- Changed some of the new signatures to protected for the interim.
  (Maybe a `beta` tag would fit better? Public is promises!)

- Moved generic support from Canvas to DOM and added proxy/notes
  - Updated internal usages

- Updated some comments for consistency
  - Access always on bottom for members/properties, public assumed

src/core/ScaleManager.js

@@ -29,7 +29,7 @@ Phaser.ScaleManager = function (game, width, height) {
 
     /**
     * _EXPERIMENTAL:_ A responsive grid on which you can align game objects.
-    * @property {Phaser.FlexGrid} gridobjects.
+    * @property {Phaser.FlexGrid} grid
     * @public
     */
     this.grid = null;
@@ -37,12 +37,14 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * Target width (in pixels) of the Game canvas.
     * @property {number} width
+    * @readonly
     */
     this.width = 0;
 
     /**
     * Target height (in pixels) of the Game canvas.
     * @property {number} height
+    * @readonly
     */
     this.height = 0;
 
@@ -95,6 +97,7 @@ Phaser.ScaleManager = function (game, width, height) {
     * @property {boolean} forceLandscape
     * @readonly
     * @default
+    * @protected
     */
     this.forceLandscape = false;
 
@@ -104,14 +107,15 @@ Phaser.ScaleManager = function (game, width, height) {
     * @property {boolean} forcePortrait
     * @readonly
     * @default
+    * @protected
     */
     this.forcePortrait = false;
 
     /**
     * True if the `forceLandscape` or `forcePortrait` are set and do not agree with the browser orientation.
     * @property {boolean} incorrectOrientation    
-    * @protected
     * @readonly
+    * @protected
     */
     this.incorrectOrientation = false;
 
@@ -132,9 +136,9 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The maximum number of times a canvas will be resized (in a row) in order to fill the browser.
     * @property {number} maxIterations
-    * @protected
     * @default
     * @deprecated 2.1.4 - This is not used anymore as reflow iterations are "automatic".
+    * @protected
     */
     this.maxIterations = 5;
 
@@ -194,7 +198,8 @@ Phaser.ScaleManager = function (game, width, height) {
     *
     * The default implementation is to create a new element with a black background.
     *
-    * @public {function} createFullScreenTarget
+    * @property {function} createFullScreenTarget
+    * @protected
     */
     this.createFullScreenTarget = function () {
         var fsTarget = document.createElement('div');
@@ -238,8 +243,8 @@ Phaser.ScaleManager = function (game, width, height) {
     * The orientation value of the game, as defined by `window.orientation` or guessed.
     * A value of 90 is landscape and 0 is portrait.
     * @property {number} orientation
-    * @public
     * @readonly
+    * @public
     */
     this.orientation = 0;
 
@@ -258,7 +263,6 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The _current_ scale factor based on the game dimensions vs. the scaled dimensions.
     * @property {Phaser.Point} scaleFactor
-    * @public
     * @readonly
     */
     this.scaleFactor = new Phaser.Point(1, 1);
@@ -266,8 +270,8 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The _current_ inversed scale factor. The displayed dimensions divided by the game dimensions.
     * @property {Phaser.Point} scaleFactorInversed
-    * @protected
     * @readonly
+    * @protected
     */
     this.scaleFactorInversed = new Phaser.Point(1, 1);
 
@@ -288,7 +292,6 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The aspect ratio of the scaled game canvas.
     * @property {number} aspectRatio
-    * @public
     * @readonly
     */
     this.aspectRatio = 0;
@@ -296,7 +299,6 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The aspect ratio of the original game dimensions.
     * @property {number} sourceAspectRatio
-    * @public
     * @readonly
     */
     this.sourceAspectRatio = 0;
@@ -304,15 +306,14 @@ Phaser.ScaleManager = function (game, width, height) {
     /**
     * The native browser events from Fullscreen API changes.
     * @property {any} event
-    * @private
     * @readonly
+    * @private
     */
     this.event = null;
 
     /**
     * The edges on which to constrain the Canvas _to_ the Window viewport in _addition_ to any restrictions of the parent container.
     * @property {boolean} windowConstraints
-    * @public
     * @default
     */
     this.windowConstraints = {
@@ -385,8 +386,8 @@ Phaser.ScaleManager = function (game, width, height) {
     * The maximum time (in ms) between dimension update checks for the Canvas's parent element (or window).
     * Update checks normally happen quicker in response to other events.
     * @property {integer} trackParentInterval
-    * @protected
     * @default
+    * @protected
     */
     this.trackParentInterval = 2000;
 
@@ -401,7 +402,6 @@ Phaser.ScaleManager = function (game, width, height) {
     * Use this to handle responsive game layout options.
     *
     * @property {Phaser.Signal} onSizeChange
-    * @public
     * @todo Formalize the arguments, if any, supplied to this signal.
     */
     this.onSizeChange = new Phaser.Signal();
@@ -609,7 +609,7 @@ Phaser.ScaleManager.prototype = {
 
         // Initialize core bounds
 
-        Phaser.Canvas.getOffset(this.game.canvas, this.offset);
+        Phaser.DOM.getOffset(this.game.canvas, this.offset);
 
         this.bounds.setTo(this.offset.x, this.offset.y, this.width, this.height);
 
@@ -870,7 +870,7 @@ Phaser.ScaleManager.prototype = {
 
         var prevThrottle = this._sizeThrottle;
 
-        Phaser.Canvas.getOffset(this.game.canvas, this.offset);
+        Phaser.DOM.getOffset(this.game.canvas, this.offset);
 
         var prevWidth = this._parentBounds.width;
         var prevHeight = this._parentBounds.height;
@@ -953,7 +953,7 @@ Phaser.ScaleManager.prototype = {
         // This can be invoked in boot pre-canvas
         if (this.game.canvas)
         {
-            Phaser.Canvas.getOffset(this.game.canvas, this.offset);
+            Phaser.DOM.getOffset(this.game.canvas, this.offset);
         }
         this.bounds.setTo(this.offset.x, this.offset.y, this.width, this.height);
 
@@ -1753,48 +1753,16 @@ Phaser.ScaleManager.prototype = {
     * It adjusts the measurements such that it is possible to detect when an element is near the viewport.
     * 
     * @method Phaser.ScaleManager#elementBounds
-    * @public
+    * @protected
-    * @param {Element|Object} element - The element or stack (uses first item) to get the bounds for. If none given it defaults to the Phaser game canvas.
+    * @param {DOMElement|Object} [element=(game canvas)] - The element or stack (uses first item) to get the bounds for. If none given it defaults to the Phaser game canvas.
     * @param {number} [cushion] - A +/- pixel adjustment amount.
     * @return {Object|boolean} A plain object containing the properties `top/bottom/left/right/width/height` or `false` if a non-valid element is given.
+    * @see {@link Phaser.DOM.getBounds}
     */
     elementBounds: function (element, cushion) {
         
         if (typeof element === 'undefined') { element = this.game.canvas; }
-        if (typeof cushion === 'undefined') { cushion = 0; }
+        return Phaser.DOM.getBounds(element, cushion);
-
-        element = element && !element.nodeType ? element[0] : element;
-
-        if (!element || element.nodeType !== 1)
-        {
-            return false;
-        }
-        else
-        {
-            return this.calibrate(element.getBoundingClientRect(), cushion);
-        }
-
-    },
-
-    /**
-    * Calibrates element coordinates for `inViewport` checks.
-    *
-    * @method Phaser.ScaleManager#calibrate
-    * @private
-    * @param {Object} coords -An object containing the following properties: `{top: number, right: number, bottom: number, left: number}`
-    * @param {number} [cushion] - A value to adjust the coordinates by.
-    * @return {Object} The calibrated element coordinates
-    */
-    calibrate: function (coords, cushion) {
-
-        cushion = +cushion || 0;
-
-        var output = { width: 0, height: 0, left: 0, right: 0, top: 0, bottom: 0 };
-
-        output.width = (output.right = coords.right + cushion) - (output.left = coords.left - cushion);
-        output.height = (output.bottom = coords.bottom + cushion) - (output.top = coords.top - cushion);
-
-        return output;
 
     },
 
@@ -1803,52 +1771,14 @@ Phaser.ScaleManager.prototype = {
     * @link http://w3.org/TR/css3-mediaqueries/#orientation
     * 
     * @method Phaser.ScaleManager#aspect
-    * @public
+    * @protected
-    * @param {(Element|Object)=} [object] - Optional object. Must have public `width` and `height` properties or methods.
+    * @param {(DOMElement|Object)} [object=(viewport)] - Optional object. Must have public `width` and `height` properties or methods.
     * @return {number} The aspect ratio.
+    * @see {@link Phaser.DOM.getAspectRatio}
     */
     aspect: function (object) {
 
-        object = null == object ? this.viewport() : 1 === object.nodeType ? this.elementBounds(object) : object;
+        return Phaser.DOM.getAspectRatio(object);
-
-        var w = object['width'];
-        var h = object['height'];
-
-        if (typeof w === 'function')
-        {
-            w = w.call(object);
-        }
-
-        if (typeof h === 'function')
-        {
-            h = h.call(object);
-        }
-
-        return w / h;
-
-    },
-
-    /**
-    * Tests if the given DOM element is within the viewport.
-    * 
-    * The optional cushion parameter allows you to specify a distance.
-    * 
-    * inViewport(element, 100) is `true` if the element is in the viewport or 100px near it.
-    * inViewport(element, -100) is `true` if the element is in the viewport or at least 100px near it.
-    * 
-    * @method Phaser.ScaleManager#inViewport
-    * @public
-    * @param {Element|Object} [element] - The DOM element to check. If no element is given it defaults to the Phaser game canvas.
-    * @param {number} [cushion] - The cushion allows you to specify a distance within which the element must be within the viewport.
-    * @return {boolean} True if the element is within the viewport, or within `cushion` distance from it.
-    */
-    inViewport: function (element, cushion) {
-
-        if (typeof element === 'undefined') { element = this.game.canvas; }
-
-        var r = this.elementBounds(element, cushion);
-
-        return !!r && r.bottom >= 0 && r.right >= 0 && r.top <= this.viewportH() && r.left <= this.viewportW();
 
     },
 
@@ -1860,7 +1790,7 @@ Phaser.ScaleManager.prototype = {
     * the horizontal or vertical sides of the target dimensions. If you wish to stop this you can crop the Sprite.
     *
     * @method Phaser.ScaleManager#scaleSprite
-    * @public
+    * @protected
     * @param {Phaser.Sprite|Phaser.Image} sprite - The sprite we want to scale.
     * @param {integer} [width] - The target width that we want to fit the sprite in to. If not given it defaults to ScaleManager.width.
     * @param {integer} [height] - The target height that we want to fit the sprite in to. If not given it defaults to ScaleManager.height.
@@ -2036,7 +1966,6 @@ Object.defineProperty(Phaser.ScaleManager.prototype, "scaleMode", {
 *
 * @name Phaser.ScaleManager#fullScreenScaleMode
 * @property {number} fullScreenScaleMode
-* @public
 */
 Object.defineProperty(Phaser.ScaleManager.prototype, "fullScreenScaleMode", {
 
@@ -2197,109 +2126,3 @@ Object.defineProperty(Phaser.ScaleManager.prototype, "isLandscape", {
     }
 
 });
-
-/**
-* A cross-browser window.scrollX.
-*
-* @name Phaser.ScaleManager#scrollX
-* @property {number} scrollX
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "scrollX", {
-
-    get: function () {
-        return window.pageXOffset || document.documentElement.scrollLeft;
-    }
-
-});
-
-/**
-* A cross-browser window.scrollY.
-*
-* @name Phaser.ScaleManager#scrollY
-* @property {number} scrollY
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "scrollY", {
-
-    get: function () {
-        return window.pageYOffset || document.documentElement.scrollTop;
-    }
-
-});
-
-/**
-* Gets the viewport width in pixels.
-*
-* @name Phaser.ScaleManager#viewportWidth
-* @property {number} viewportWidth
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "viewportWidth", {
-
-    get: function () {
-
-        var a = document.documentElement.clientWidth;
-        var b = window.innerWidth;
-
-        return a < b ? b : a;
-
-    }
-
-});
-
-/**
-* Gets the viewport height in pixels.
-*
-* @name Phaser.ScaleManager#viewportHeight
-* @property {number} viewportHeight
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "viewportHeight", {
-
-    get: function () {
-
-        var a = document.documentElement.clientHeight;
-        var b = window.innerHeight;
-
-        return a < b ? b : a;
-
-    }
-
-});
-
-/**
-* Gets the document width in pixels.
-*
-* @name Phaser.ScaleManager#documentWidth
-* @property {number} documentWidth
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "documentWidth", {
-
-    get: function () {
-
-        var d = document.documentElement;
-        return Math.max(d.clientWidth, d.offsetWidth, d.scrollWidth);
-
-    }
-
-});
-
-/**
-* Gets the document height in pixels.
-*
-* @name Phaser.ScaleManager#documentHeight
-* @property {number} documentHeight
-* @readonly
-*/
-Object.defineProperty(Phaser.ScaleManager.prototype, "documentHeight", {
-
-    get: function () {
-
-        var d = document.documentElement;
-        return Math.max(d.clientHeight, d.offsetHeight, d.scrollHeight);
-
-    }
-
-});

src/core/Stage.js

@@ -102,7 +102,7 @@ Phaser.Stage.prototype.parseConfig = function (config) {
 */
 Phaser.Stage.prototype.boot = function () {
 
-    Phaser.Canvas.getOffset(this.game.canvas, this.offset);
+    Phaser.DOM.getOffset(this.game.canvas, this.offset);
 
     var _this = this;
 

src/system/Canvas.js

@@ -42,55 +42,6 @@ Phaser.Canvas = {
 
     },
 
-    /**
-    * Get the DOM offset values of any given element
-    * @method Phaser.Canvas.getOffset
-    * @param {HTMLElement} element - The targeted element that we want to retrieve the offset.
-    * @param {Phaser.Point} [point] - The point we want to take the x/y values of the offset.
-    * @return {Phaser.Point} - A point objet with the offsetX and Y as its properties.
-    */
-    getOffset: function (element, point) {
-
-        point = point || new Phaser.Point();
-
-        var box = element.getBoundingClientRect();
-        var clientTop = element.clientTop || document.body.clientTop || 0;
-        var clientLeft = element.clientLeft || document.body.clientLeft || 0;
-
-        //  Without this check Chrome is now throwing console warnings about strict vs. quirks :(
-
-        var scrollTop = 0;
-        var scrollLeft = 0;
-
-        if (document.compatMode === 'CSS1Compat')
-        {
-            scrollTop = window.pageYOffset || document.documentElement.scrollTop || element.scrollTop || 0;
-            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || element.scrollLeft || 0;
-        }
-        else
-        {
-            scrollTop = window.pageYOffset || document.body.scrollTop || element.scrollTop || 0;
-            scrollLeft = window.pageXOffset || document.body.scrollLeft || element.scrollLeft || 0;
-        }
-
-        point.x = box.left + scrollLeft - clientLeft;
-        point.y = box.top + scrollTop - clientTop;
-
-        return point;
-
-    },
-
-    /**
-    * Returns the aspect ratio of the given canvas.
-    *
-    * @method Phaser.Canvas.getAspectRatio
-    * @param {HTMLCanvasElement} canvas - The canvas to get the aspect ratio from.
-    * @return {number} The ratio between canvas' width and height.
-    */
-    getAspectRatio: function (canvas) {
-        return canvas.width / canvas.height;
-    },
-
     /**
     * Sets the background color behind the canvas. This changes the canvas style property.
     *
@@ -313,3 +264,24 @@ Phaser.Canvas = {
     }
 
 };
+
+/**
+* Get the DOM offset values of any given element
+*
+* @method Phaser.Canvas.getOffset
+* @param {HTMLElement} element - The targeted element that we want to retrieve the offset.
+* @param {Phaser.Point} [point] - The point we want to take the x/y values of the offset.
+* @return {Phaser.Point} - A point objet with the offsetX and Y as its properties.
+* @deprecated 2.1.4 - Use {@link Phaser.DOM.getOffset}
+*/
+Phaser.Canvas.getOffset = Phaser.DOM.getOffset;
+
+/**
+* Returns the aspect ratio of the given canvas.
+*
+* @method Phaser.Canvas.getAspectRatio
+* @param {HTMLCanvasElement} canvas - The canvas to get the aspect ratio from.
+* @return {number} The ratio between canvas' width and height.
+* @deprecated 2.1.4 - User {@link Phaser.DOM.getAspectRatio}
+*/
+Phaser.Canvas.getAspectRatio = Phaser.DOM.getAspectRatio;

src/system/DOM.js

@@ -0,0 +1,285 @@
+/**
+* @author       Richard Davey <rich@photonstorm.com>
+* @copyright    2014 Photon Storm Ltd.
+* @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+*/
+
+/**
+* DOM utility class.
+*
+* Provides a useful Window and Element functions as well as cross-browser compatibility buffer.
+*
+* @class Phaser.DOM
+* @static
+*/
+Phaser.DOM = {
+
+    /**
+    * Get the DOM offset values of any given element
+    *
+    * @method Phaser.DOM.getOffset
+    * @param {DOMElement} element - The targeted element that we want to retrieve the offset.
+    * @param {Phaser.Point} [point] - The point we want to take the x/y values of the offset.
+    * @return {Phaser.Point} - A point objet with the offsetX and Y as its properties.
+    */
+    getOffset: function (element, point) {
+
+        point = point || new Phaser.Point();
+
+        var box = element.getBoundingClientRect();
+        var clientTop = element.clientTop || document.body.clientTop || 0;
+        var clientLeft = element.clientLeft || document.body.clientLeft || 0;
+
+        //  Without this check Chrome is now throwing console warnings about strict vs. quirks :(
+
+        var scrollTop = 0;
+        var scrollLeft = 0;
+
+        if (document.compatMode === 'CSS1Compat')
+        {
+            scrollTop = window.pageYOffset || document.documentElement.scrollTop || element.scrollTop || 0;
+            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || element.scrollLeft || 0;
+        }
+        else
+        {
+            scrollTop = window.pageYOffset || document.body.scrollTop || element.scrollTop || 0;
+            scrollLeft = window.pageXOffset || document.body.scrollLeft || element.scrollLeft || 0;
+        }
+
+        point.x = box.left + scrollLeft - clientLeft;
+        point.y = box.top + scrollTop - clientTop;
+
+        return point;
+
+    },
+
+    /**
+    * 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.
+    * 
+    * @method Phaser.DOM.getBounds
+    * @param {DOMElement|Object} element - The element or stack (uses first item) to get the bounds for. If none given it defaults to the Phaser game canvas.
+    * @param {number} [cushion] - A +/- pixel adjustment amount.
+    * @return {Object|boolean} A plain object containing the properties `top/bottom/left/right/width/height` or `false` if a non-valid element is given.
+    */
+    getBounds: function (element, cushion) {
+
+        if (typeof cushion === 'undefined') { cushion = 0; }
+
+        element = element && !element.nodeType ? element[0] : element;
+
+        if (!element || element.nodeType !== 1)
+        {
+            return false;
+        }
+        else
+        {
+            return this.calibrate(element.getBoundingClientRect(), cushion);
+        }
+
+    },
+
+    /**
+    * Calibrates element coordinates for `inViewport` checks.
+    *
+    * @method Phaser.DOM.calibrate
+    * @private
+    * @param {Object} coords - An object containing the following properties: `{top: number, right: number, bottom: number, left: number}`
+    * @param {number} [cushion] - A value to adjust the coordinates by.
+    * @return {Object} The calibrated element coordinates
+    */
+    calibrate: function (coords, cushion) {
+
+        cushion = +cushion || 0;
+
+        var output = { width: 0, height: 0, left: 0, right: 0, top: 0, bottom: 0 };
+
+        output.width = (output.right = coords.right + cushion) - (output.left = coords.left - cushion);
+        output.height = (output.bottom = coords.bottom + cushion) - (output.top = coords.top - cushion);
+
+        return output;
+
+    },
+
+    /**
+    * Get the viewport aspect ratio (or the aspect ratio of an object or element)
+    * @link http://w3.org/TR/css3-mediaqueries/#orientation
+    * 
+    * @method Phaser.DOM.getAspectRatio
+    * @param {(DOMElement|Object)} [object=(viewport)] - Optional object. Must have public `width` and `height` properties or methods.
+    * @return {number} The aspect ratio.
+    */
+    getAspectRatio: function (object) {
+
+        object = null == object ? this.getViewport() : 1 === object.nodeType ? this.getElementBounds(object) : object;
+
+        var w = object['width'];
+        var h = object['height'];
+
+        if (typeof w === 'function')
+        {
+            w = w.call(object);
+        }
+
+        if (typeof h === 'function')
+        {
+            h = h.call(object);
+        }
+
+        return w / h;
+
+    },
+
+    /**
+    * Get the viewport dimensions.
+    *
+    * @method Phaser.DOM#getViewport
+    * @protected
+    */
+    getViewport: function () {
+
+        return {
+            width: this.viewportWidth,
+            height: this.viewportHeight
+        };
+
+    },
+
+    /**
+    * Tests if the given DOM element is within the viewport.
+    * 
+    * The optional cushion parameter allows you to specify a distance.
+    * 
+    * inViewport(element, 100) is `true` if the element is in the viewport or 100px near it.
+    * inViewport(element, -100) is `true` if the element is in the viewport or at least 100px near it.
+    * 
+    * @method Phaser.DOM.inViewport
+    * @param {DOMElement|Object} element - The DOM element to check. If no element is given it defaults to the Phaser game canvas.
+    * @param {number} [cushion] - The cushion allows you to specify a distance within which the element must be within the viewport.
+    * @return {boolean} True if the element is within the viewport, or within `cushion` distance from it.
+    */
+    inViewport: function (element, cushion) {
+
+        var r = this.getElementBounds(element, cushion);
+
+        return !!r && r.bottom >= 0 && r.right >= 0 && r.top <= this.viewportWidth && r.left <= this.viewportHeight;
+
+    }
+
+};
+
+/**
+* A cross-browser window.scrollX.
+*
+* @name Phaser.DOM.scrollX
+* @property {number} scrollX
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "scrollX", {
+
+    get: function () {
+        return window.pageXOffset || document.documentElement.scrollLeft;
+    }
+
+});
+
+/**
+* A cross-browser window.scrollY.
+*
+* @name Phaser.DOM.scrollY
+* @property {number} scrollY
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "scrollY", {
+
+    get: function () {
+        return window.pageYOffset || document.documentElement.scrollTop;
+    }
+
+});
+
+/**
+* Gets the viewport width in pixels.
+*
+* @name Phaser.DOM.viewportWidth
+* @property {number} viewportWidth
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "viewportWidth", {
+
+    get: function () {
+
+        var a = document.documentElement.clientWidth;
+        var b = window.innerWidth;
+
+        return a < b ? b : a;
+
+    }
+
+});
+
+/**
+* Gets the viewport height in pixels.
+*
+* @name Phaser.DOM.viewportHeight
+* @property {number} viewportHeight
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "viewportHeight", {
+
+    get: function () {
+
+        var a = document.documentElement.clientHeight;
+        var b = window.innerHeight;
+
+        return a < b ? b : a;
+
+    }
+
+});
+
+/**
+* Gets the document width in pixels.
+*
+* @name Phaser.DOM.documentWidth
+* @property {number} documentWidth
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "documentWidth", {
+
+    get: function () {
+
+        var d = document.documentElement;
+        return Math.max(d.clientWidth, d.offsetWidth, d.scrollWidth);
+
+    }
+
+});
+
+/**
+* Gets the document height in pixels.
+*
+* @name Phaser.DOM.documentHeight
+* @property {number} documentHeight
+* @readonly
+* @protected
+*/
+Object.defineProperty(Phaser.DOM, "documentHeight", {
+
+    get: function () {
+
+        var d = document.documentElement;
+        return Math.max(d.clientHeight, d.offsetHeight, d.scrollHeight);
+
+    }
+
+});

tasks/manifests/phaser.json

@@ -59,6 +59,7 @@
     "src/gameobjects/RetroFont.js",
     "src/gameobjects/Particle.js",
 
+    "src/system/DOM.js",
     "src/system/Canvas.js",
     "src/system/Device.js",
     "src/system/RequestAnimationFrame.js",