Removed example. Added to look-controls doc. Conditionally returning instead of conditionally managing event handlers.

Author: jsimonson2013

docs/components/look-controls.md

@@ -27,6 +27,7 @@ component](camera.md).
 | Property         | Description                                                      | Default Value |
 |------------------|------------------------------------------------------------------|---------------|
 | enabled          | Whether look controls are enabled.                               | true          |
+| touchEnabled     | Whether to use touch controls in magic window mode.              | true          |
 | hmdEnabled       | Whether to use VR headset pose in VR mode.                       | true          |
 | reverseMouseDrag | Whether to reverse mouse drag.                                   | false         |
 | standing         | Whether standing mode is enabled (passed to `THREE.VRControls`). | true          |

examples/boilerplate/hello-world-touch-disabled/index.html

@@ -172,7 +172,6 @@ <h2>Boilerplates</h2>
 
     <ul class="links">
       <li><a href="boilerplate/hello-world/">Hello World</a></li>
-        <li><a href="boilerplate/hello-world-touch-disabled/">Hello World Touch Disabled</a></li>
       <li><a href="boilerplate/panorama/">360&deg; Image</a></li>
       <li><a href="boilerplate/360-video/">360&deg; Video</a></li>
       <li><a href="boilerplate/3d-model/">3D Model (COLLADA)</a></li>

examples/index.html

@@ -78,11 +78,9 @@ module.exports.Component = registerComponent('look-controls', {
     this.onMouseDown = bind(this.onMouseDown, this);
     this.onMouseMove = bind(this.onMouseMove, this);
     this.onMouseUp = bind(this.onMouseUp, this);
-    if (this.data.touchEnabled) {
-      this.onTouchStart = bind(this.onTouchStart, this);
-      this.onTouchMove = bind(this.onTouchMove, this);
-      this.onTouchEnd = bind(this.onTouchEnd, this);
-    }
+    this.onTouchStart = bind(this.onTouchStart, this);
+    this.onTouchMove = bind(this.onTouchMove, this);
+    this.onTouchEnd = bind(this.onTouchEnd, this);
     this.onExitVR = bind(this.onExitVR, this);
   },
 
@@ -126,11 +124,9 @@ module.exports.Component = registerComponent('look-controls', {
     window.addEventListener('mouseup', this.onMouseUp, false);
 
     // Touch events.
-    if (this.data.touchEnabled) {
-      canvasEl.addEventListener('touchstart', this.onTouchStart);
-      window.addEventListener('touchmove', this.onTouchMove);
-      window.addEventListener('touchend', this.onTouchEnd);
-    }
+    canvasEl.addEventListener('touchstart', this.onTouchStart);
+    window.addEventListener('touchmove', this.onTouchMove);
+    window.addEventListener('touchend', this.onTouchEnd);
   },
 
   /**
@@ -149,11 +145,9 @@ module.exports.Component = registerComponent('look-controls', {
     canvasEl.removeEventListener('mouseout', this.onMouseUp);
 
     // Touch events.
-    if (this.data.touchEnabled) {
-      canvasEl.removeEventListener('touchstart', this.onTouchStart);
-      canvasEl.removeEventListener('touchmove', this.onTouchMove);
-      canvasEl.removeEventListener('touchend', this.onTouchEnd);
-    }
+    canvasEl.removeEventListener('touchstart', this.onTouchStart);
+    canvasEl.removeEventListener('touchmove', this.onTouchMove);
+    canvasEl.removeEventListener('touchend', this.onTouchEnd);
   },
 
   /**
@@ -318,7 +312,7 @@ module.exports.Component = registerComponent('look-controls', {
    * Register touch down to detect touch drag.
    */
   onTouchStart: function (evt) {
-    if (evt.touches.length !== 1) { return; }
+    if (evt.touches.length !== 1 || !this.data.touchEnabled) { return; }
     this.touchStart = {
       x: evt.touches[0].pageX,
       y: evt.touches[0].pageY
@@ -334,7 +328,7 @@ module.exports.Component = registerComponent('look-controls', {
     var deltaY;
     var yawObject = this.yawObject;
 
-    if (!this.touchStarted) { return; }
+    if (!this.touchStarted || !this.data.touchEnabled) { return; }
 
     deltaY = 2 * Math.PI * (evt.touches[0].pageX - this.touchStart.x) / canvas.clientWidth;