diff --git a/src/boot/CreateDOMContainer.js b/src/boot/CreateDOMContainer.js index d349580b4..923d689e5 100644 --- a/src/boot/CreateDOMContainer.js +++ b/src/boot/CreateDOMContainer.js @@ -26,7 +26,7 @@ var CreateDOMContainer = function (game) 'position: absolute;', 'overflow: hidden;', 'pointer-events: none;' - ].join(); + ].join(' '); game.domContainer = div; diff --git a/src/gameobjects/domelement/DOMElement.js b/src/gameobjects/domelement/DOMElement.js index a4bc82643..badff9cd4 100644 --- a/src/gameobjects/domelement/DOMElement.js +++ b/src/gameobjects/domelement/DOMElement.js @@ -69,6 +69,8 @@ var DOMElement = new Class({ this.rotate3d = new Vector4(); this.rotate3dAngle = 'deg'; + this.handler = this.dispatchNativeEvent.bind(this); + this.setPosition(x, y); if (element) @@ -88,6 +90,20 @@ var DOMElement = new Class({ return this; }, + perspective: { + + get: function () + { + return parseFloat(this.parent.style.perspective); + }, + + set: function (value) + { + this.parent.style.perspective = value + 'px'; + } + + }, + setPerspective: function (value) { // Sets it on the DOM Container! @@ -96,31 +112,31 @@ var DOMElement = new Class({ return this; }, - /** - * Compares the renderMask with the renderFlags to see if this Game Object will render or not. - * - * @method Phaser.GameObjects.GameObject#willRender - * @since 3.0.0 - * - * @return {boolean} True if the Game Object should be rendered, otherwise false. - */ - willRender: function () + addListener: function (events) { - return true; - }, - - listen: function (events) - { - if (!this.node) + if (this.node) { - return; + events = events.split(' '); + + for (var i = 0; i < events.length; i++) + { + this.node.addEventListener(events[i], this.handler, false); + } } - events = events.split(' '); + return this; + }, - for (var i = 0; i < events.length; i++) + removeListener: function (events) + { + if (this.node) { - this.node.addEventListener(events[i], this.dispatchNativeEvent.bind(this), false); + events = events.split(' '); + + for (var i = 0; i < events.length; i++) + { + this.node.removeEventListener(events[i], this.handler); + } } return this; @@ -157,7 +173,7 @@ var DOMElement = new Class({ // Node handler - target.phaserElement = this; + target.phaser = this; if (this.parent) { @@ -180,13 +196,58 @@ var DOMElement = new Class({ { if (elementType === undefined) { elementType = 'div'; } - console.log(html); - var element = document.createElement(elementType); + this.node = element; + + element.style.zIndex = '0'; + element.style.display = 'inline'; + element.style.position = 'absolute'; + + // Node handler + + element.phaser = this; + + if (this.parent) + { + this.parent.appendChild(element); + } + element.innerHTML = html; - return this.setElement(element); + var nodeBounds = element.getBoundingClientRect(); + + this.setSize(nodeBounds.width || 0, nodeBounds.height || 0); + + return this; + }, + + getChildByProperty: function (property, value) + { + if (this.node) + { + var children = this.node.querySelectorAll('*'); + + for (var i = 0; i < children.length; i++) + { + if (children[i][property] === value) + { + return children[i]; + } + } + } + + return null; + }, + + getChildByID: function (id) + { + return this.getChildByProperty('id', id); + }, + + getChildByName: function (name) + { + return this.getChildByProperty('name', name); }, setText: function (text) @@ -209,6 +270,21 @@ var DOMElement = new Class({ return this; }, + /** + * Compares the renderMask with the renderFlags to see if this Game Object will render or not. + * + * DOMElements always return `true` as they need to still set values during the render pass, even if not visible. + * + * @method Phaser.GameObjects.DOMElement#willRender + * @since 3.12.0 + * + * @return {boolean} True if the Game Object should be rendered, otherwise false. + */ + willRender: function () + { + return true; + }, + destroy: function () { diff --git a/src/polyfills/Function.bind.js b/src/polyfills/Function.bind.js deleted file mode 100644 index 1f9d25fc0..000000000 --- a/src/polyfills/Function.bind.js +++ /dev/null @@ -1,42 +0,0 @@ -/** -* A polyfill for Function.prototype.bind -*/ -if (!Function.prototype.bind) { - - /* jshint freeze: false */ - Function.prototype.bind = (function () { - - var slice = Array.prototype.slice; - - return function (thisArg) { - - var target = this, boundArgs = slice.call(arguments, 1); - - if (typeof target !== 'function') - { - throw new TypeError(); - } - - function bound() { - var args = boundArgs.concat(slice.call(arguments)); - target.apply(this instanceof bound ? this : thisArg, args); - } - - bound.prototype = (function F(proto) { - if (proto) - { - F.prototype = proto; - } - - if (!(this instanceof F)) - { - /* jshint supernew: true */ - return new F; - } - })(target.prototype); - - return bound; - }; - })(); -} - diff --git a/src/polyfills/index.js b/src/polyfills/index.js index bddf9b943..b05f1e561 100644 --- a/src/polyfills/index.js +++ b/src/polyfills/index.js @@ -2,7 +2,6 @@ require('./Array.forEach'); require('./Array.isArray'); require('./AudioContextMonkeyPatch'); require('./console'); -require('./Function.bind'); require('./Math.trunc'); require('./performance.now'); require('./requestAnimationFrame');