mirror of
https://github.com/photonstorm/phaser
synced 2024-11-23 21:24:09 +00:00
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
This commit is contained in:
Paul
parent
69ec5efc29
commit
50729b33a2
5 changed files with 335 additions and 254 deletions
|
|
@ -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
|
||||
* @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.
|
||||
* @protected
|
||||
* @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; }
|
||||
|
||||
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;
|
||||
return Phaser.DOM.getBounds(element, cushion);
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1803,52 +1771,14 @@ Phaser.ScaleManager.prototype = {
|
|||
* @link http://w3.org/TR/css3-mediaqueries/#orientation
|
||||
*
|
||||
* @method Phaser.ScaleManager#aspect
|
||||
* @public
|
||||
* @param {(Element|Object)=} [object] - Optional object. Must have public `width` and `height` properties or methods.
|
||||
* @protected
|
||||
* @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;
|
||||
|
||||
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();
|
||||
return Phaser.DOM.getAspectRatio(object);
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
285
src/system/DOM.js
Normal file
285
src/system/DOM.js
Normal file
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue