Merge branch 'master' into tile-collision-update

src/boot/CreateDOMContainer.js

@@ -26,7 +26,7 @@ var CreateDOMContainer = function (game)
         'position: absolute;',
         'overflow: hidden;',
         'pointer-events: none;'
-    ].join();
+    ].join(' ');
 
     game.domContainer = div;
 

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.dispatchNativeEvent.bind(this), false);
+                this.node.addEventListener(events[i], this.handler, false);
+            }
+        }
+
+        return this;
+    },
+
+    removeListener: function (events)
+    {
+        if (this.node)
+        {
+            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 ()
     {
 

src/polyfills/Function.bind.js

@@ -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;
-        };
-    })();
-}
-

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');