Use native bind instead of custom implementation

docs/core/component.md

@@ -287,7 +287,7 @@ AFRAME.registerComponent('cursor', {
     // Set up initial state and variables.
     this.intersection = null;
     // Bind methods.
-    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
+    this.onIntersection = this.onIntersection.bind(this);
     // Attach event listener.
     this.el.addEventListener('raycaster-intersection', this.onIntersection);
   }

src/components/cursor.js

@@ -2,8 +2,6 @@
 var registerComponent = require('../core/component').registerComponent;
 var utils = require('../utils/');
 
-var bind = utils.bind;
-
 var EVENTS = {
   CLICK: 'click',
   FUSING: 'fusing',
@@ -76,12 +74,12 @@ module.exports.Component = registerComponent('cursor', {
     this.intersectedEventDetail = {cursorEl: this.el};
 
     // Bind methods.
-    this.onCursorDown = bind(this.onCursorDown, this);
-    this.onCursorUp = bind(this.onCursorUp, this);
-    this.onIntersection = bind(this.onIntersection, this);
-    this.onIntersectionCleared = bind(this.onIntersectionCleared, this);
-    this.onMouseMove = bind(this.onMouseMove, this);
-    this.onEnterVR = bind(this.onEnterVR, this);
+    this.onCursorDown = this.onCursorDown.bind(this);
+    this.onCursorUp = this.onCursorUp.bind(this);
+    this.onIntersection = this.onIntersection.bind(this);
+    this.onIntersectionCleared = this.onIntersectionCleared.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onEnterVR = this.onEnterVR.bind(this);
   },
 
   update: function (oldData) {

src/components/generic-tracked-controller-controls.js

@@ -1,5 +1,4 @@
 var registerComponent = require('../core/component').registerComponent;
-var bind = require('../utils/bind');
 
 var trackedControlsUtils = require('../utils/tracked-controls');
 var checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;
@@ -51,15 +50,15 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   init: function () {
     var self = this;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };

src/components/hand-tracking-controls.js

@@ -1,6 +1,5 @@
 /* global THREE, XRHand */
 var registerComponent = require('../core/component').registerComponent;
-var bind = require('../utils/bind');
 
 var AEntity = require('../core/a-entity').AEntity;
 
@@ -58,9 +57,9 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
   },
 
   bindMethods: function () {
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
   },
 
   addEventListeners: function () {

src/components/hp-mixed-reality-controls.js

@@ -1,4 +1,3 @@
-var bind = require('../utils/bind');
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
 
@@ -55,7 +54,7 @@ module.exports.Component = registerComponent('hp-mixed-reality-controls', {
     var self = this;
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self, self.data.hand); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self, self.data.hand); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self, self.data.hand); };
@@ -81,11 +80,11 @@ module.exports.Component = registerComponent('hp-mixed-reality-controls', {
   },
 
   bindMethods: function () {
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   addEventListeners: function () {

src/components/light.js

@@ -1,4 +1,3 @@
-var bind = require('../utils/bind');
 var utils = require('../utils');
 var diff = utils.diff;
 var debug = require('../utils/debug');
@@ -102,7 +101,7 @@ module.exports.Component = registerComponent('light', {
               if (value.hasLoaded) {
                 self.onSetTarget(value, light);
               } else {
-                value.addEventListener('loaded', bind(self.onSetTarget, self, value, light));
+                value.addEventListener('loaded', self.onSetTarget.bind(self, value, light));
               }
             }
             break;
@@ -299,7 +298,7 @@ module.exports.Component = registerComponent('light', {
           if (target.hasLoaded) {
             this.onSetTarget(target, light);
           } else {
-            target.addEventListener('loaded', bind(this.onSetTarget, this, target, light));
+            target.addEventListener('loaded', this.onSetTarget.bind(this, target, light));
           }
         }
         return light;
@@ -320,7 +319,7 @@ module.exports.Component = registerComponent('light', {
           if (target.hasLoaded) {
             this.onSetTarget(target, light);
           } else {
-            target.addEventListener('loaded', bind(this.onSetTarget, this, target, light));
+            target.addEventListener('loaded', this.onSetTarget.bind(this, target, light));
           }
         }
         return light;

src/components/look-controls.js

@@ -2,7 +2,6 @@
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
 var utils = require('../utils/');
-var bind = utils.bind;
 
 // To avoid recalculation at every mouse movement tick
 var PI_2 = Math.PI / 2;
@@ -118,16 +117,16 @@ module.exports.Component = registerComponent('look-controls', {
   },
 
   bindMethods: function () {
-    this.onMouseDown = bind(this.onMouseDown, this);
-    this.onMouseMove = bind(this.onMouseMove, this);
-    this.onMouseUp = bind(this.onMouseUp, this);
-    this.onTouchStart = bind(this.onTouchStart, this);
-    this.onTouchMove = bind(this.onTouchMove, this);
-    this.onTouchEnd = bind(this.onTouchEnd, this);
-    this.onEnterVR = bind(this.onEnterVR, this);
-    this.onExitVR = bind(this.onExitVR, this);
-    this.onPointerLockChange = bind(this.onPointerLockChange, this);
-    this.onPointerLockError = bind(this.onPointerLockError, this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onTouchStart = this.onTouchStart.bind(this);
+    this.onTouchMove = this.onTouchMove.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+    this.onEnterVR = this.onEnterVR.bind(this);
+    this.onExitVR = this.onExitVR.bind(this);
+    this.onPointerLockChange = this.onPointerLockChange.bind(this);
+    this.onPointerLockError = this.onPointerLockError.bind(this);
   },
 
  /**
@@ -150,7 +149,7 @@ module.exports.Component = registerComponent('look-controls', {
 
     // Wait for canvas to load.
     if (!canvasEl) {
-      sceneEl.addEventListener('render-target-loaded', bind(this.addEventListeners, this));
+      sceneEl.addEventListener('render-target-loaded', this.addEventListeners.bind(this));
       return;
     }
 

src/components/magicleap-controls.js

@@ -1,4 +1,3 @@
-var bind = require('../utils/bind');
 var registerComponent = require('../core/component').registerComponent;
 
 var trackedControlsUtils = require('../utils/tracked-controls');
@@ -50,7 +49,7 @@ module.exports.Component = registerComponent('magicleap-controls', {
     var self = this;
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
@@ -76,11 +75,11 @@ module.exports.Component = registerComponent('magicleap-controls', {
   },
 
   bindMethods: function () {
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   addEventListeners: function () {

src/components/oculus-go-controls.js

@@ -1,5 +1,4 @@
 var registerComponent = require('../core/component').registerComponent;
-var bind = require('../utils/bind');
 
 var trackedControlsUtils = require('../utils/tracked-controls');
 var checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;
@@ -67,16 +66,16 @@ module.exports.Component = registerComponent('oculus-go-controls', {
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   init: function () {
     var self = this;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };

src/components/oculus-touch-controls.js

@@ -1,4 +1,3 @@
-var bind = require('../utils/bind');
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
 
@@ -201,12 +200,12 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   mapping: INPUT_MAPPING,
 
   bindMethods: function () {
-    this.onButtonChanged = bind(this.onButtonChanged, this);
-    this.onThumbstickMoved = bind(this.onThumbstickMoved, this);
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
+    this.onThumbstickMoved = this.onThumbstickMoved.bind(this);
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   init: function () {

src/components/pico-controls.js

@@ -1,4 +1,3 @@
-var bind = require('../utils/bind');
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
 
@@ -50,7 +49,7 @@ module.exports.Component = registerComponent('pico-controls', {
 
   init: function () {
     var self = this;
-    this.onButtonChanged = bind(this.onButtonChanged, this);
+    this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self, self.data.hand); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self, self.data.hand); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self, self.data.hand); };
@@ -74,11 +73,11 @@ module.exports.Component = registerComponent('pico-controls', {
   },
 
   bindMethods: function () {
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
+    this.onModelLoaded = this.onModelLoaded.bind(this);
+    this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
+    this.removeControllersUpdateListener = this.removeControllersUpdateListener.bind(this);
+    this.onAxisMoved = this.onAxisMoved.bind(this);
   },
 
   addEventListeners: function () {

src/components/scene/device-orientation-permission-ui.js

@@ -1,7 +1,5 @@
 /* global DeviceOrientationEvent, location  */
 var registerComponent = require('../../core/component').registerComponent;
-var utils = require('../../utils/');
-var bind = utils.bind;
 
 var constants = require('../../constants/');
 
@@ -49,8 +47,8 @@ module.exports.Component = registerComponent('device-orientation-permission-ui',
       return;
     }
 
-    this.onDeviceMotionDialogAllowClicked = bind(this.onDeviceMotionDialogAllowClicked, this);
-    this.onDeviceMotionDialogDenyClicked = bind(this.onDeviceMotionDialogDenyClicked, this);
+    this.onDeviceMotionDialogAllowClicked = this.onDeviceMotionDialogAllowClicked.bind(this);
+    this.onDeviceMotionDialogDenyClicked = this.onDeviceMotionDialogDenyClicked.bind(this);
     // Show dialog only if permission has not yet been granted.
     DeviceOrientationEvent.requestPermission().then(function () {
       self.el.emit('deviceorientationpermissiongranted');

src/components/scene/stats.js

@@ -5,7 +5,6 @@ require('../../../vendor/rStats.extras');
 require('../../lib/rStatsAframe');
 
 var AFrameStats = window.aframeStats;
-var bind = utils.bind;
 var HIDDEN_CLASS = 'a-hidden';
 var ThreeStats = window.threeStats;
 
@@ -23,8 +22,8 @@ module.exports.Component = registerComponent('stats', {
     this.stats = createStats(scene);
     this.statsEl = document.querySelector('.rs-base');
 
-    this.hideBound = bind(this.hide, this);
-    this.showBound = bind(this.show, this);
+    this.hideBound = this.hide.bind(this);
+    this.showBound = this.show.bind(this);
 
     scene.addEventListener('enter-vr', this.hideBound);
     scene.addEventListener('exit-vr', this.showBound);

src/components/scene/xr-mode-ui.js

@@ -1,7 +1,6 @@
 var registerComponent = require('../../core/component').registerComponent;
 var constants = require('../../constants/');
 var utils = require('../../utils/');
-var bind = utils.bind;
 
 var ENTER_VR_CLASS = 'a-enter-vr';
 var ENTER_AR_CLASS = 'a-enter-ar';
@@ -57,11 +56,11 @@ module.exports.Component = registerComponent('xr-mode-ui', {
   },
 
   bindMethods: function () {
-    this.onEnterVRButtonClick = bind(this.onEnterVRButtonClick, this);
-    this.onEnterARButtonClick = bind(this.onEnterARButtonClick, this);
-    this.onModalClick = bind(this.onModalClick, this);
-    this.toggleOrientationModalIfNeeded = bind(this.toggleOrientationModalIfNeeded, this);
-    this.updateEnterInterfaces = bind(this.updateEnterInterfaces, this);
+    this.onEnterVRButtonClick = this.onEnterVRButtonClick.bind(this);
+    this.onEnterARButtonClick = this.onEnterARButtonClick.bind(this);
+    this.onModalClick = this.onModalClick.bind(this);
+    this.toggleOrientationModalIfNeeded = this.toggleOrientationModalIfNeeded.bind(this);
+    this.updateEnterInterfaces = this.updateEnterInterfaces.bind(this);
   },
 
   /**

src/components/shadow.js

@@ -1,6 +1,5 @@
 var component = require('../core/component');
 var THREE = require('../lib/three');
-var bind = require('../utils/bind');
 var registerComponent = component.registerComponent;
 
 /**
@@ -16,7 +15,7 @@ module.exports.Component = registerComponent('shadow', {
   },
 
   init: function () {
-    this.onMeshChanged = bind(this.update, this);
+    this.onMeshChanged = this.update.bind(this);
     this.el.addEventListener('object3dset', this.onMeshChanged);
     this.system.setShadowMapEnabled(true);
   },