move scene components back to modules

Author: ngokevin

src/components/index.js

@@ -16,9 +16,6 @@ require('./wasd-controls');
 
 require('./scene/canvas');
 require('./scene/fog');
-require('./scene/fullscreen');
-require('./scene/meta-tags');
+require('./scene/keyboard-shortcuts');
 require('./scene/stats');
-require('./scene/vr-mode');
 require('./scene/vr-mode-ui');
-require('./scene/wakelock');

src/components/scene/fullscreen.js

@@ -0,0 +1,35 @@
+var registerComponent = require('../../core/component').registerComponent;
+var THREE = require('../../lib/three');
+
+var controls = new THREE.VRControls(new THREE.Object3D());
+
+module.exports.Component = registerComponent('keyboard-shortcuts', {
+  schema: {
+    enterVR: { default: true },
+    resetSensor: { default: true }
+  },
+
+  init: function () {
+    var self = this;
+    var scene = this.el;
+
+    this.listener = window.addEventListener('keyup', function (event) {
+      if (self.enterVREnabled && event.keyCode === 70) {  // f.
+        scene.enterVR();
+      }
+      if (self.resetSensorEnabled && event.keyCode === 90) {  // z.
+        controls.resetSensor();
+      }
+    }, false);
+  },
+
+  update: function (oldData) {
+    var data = this.data;
+    this.enterVREnabled = data.enterVR;
+    this.resetSensorEnabled = data.resetSensor;
+  },
+
+  remove: function () {
+    window.removeEventListener('keyup', this.listener);
+  }
+});

src/components/scene/keyboard-shortcuts.js

@@ -59,6 +59,7 @@ function numberParse (value) {
 
 function selectorParse (value) {
   if (!value) { return null; }
+  if (typeof value !== 'string') { return value; }
   return document.querySelector(value);
 }
 

src/components/scene/vr-mode.js

@@ -1,13 +1,15 @@
 /* global Promise */
-var re = require('./a-register-element');
-var THREE = require('../lib/three');
+var initFullscreen = require('./fullscreen');
+var initIframe = require('./iframe');
+var initMetaTags = require('./metaTags');
+var initWakelock = require('./wakelock');
+var re = require('../a-register-element');
+var THREE = require('../../lib/three');
 var TWEEN = require('tween.js');
-var utils = require('../utils/');
-var AEntity = require('./a-entity');
-var ANode = require('./a-node');
-
-var dummyDolly = new THREE.Object3D();
-var controls = new THREE.VRControls(dummyDolly);
+var utils = require('../../utils/');
+// Require after.
+var AEntity = require('../a-entity');
+var ANode = require('../a-node');
 
 var DEFAULT_CAMERA_ATTR = 'data-aframe-default-camera';
 var DEFAULT_LIGHT_ATTR = 'data-aframe-default-light';
@@ -37,11 +39,8 @@ var AScene = module.exports = registerElement('a-scene', {
     defaultComponents: {
       value: {
         'canvas': '',
-        'fullscreen': '',
-        'meta-tags': '',
-        'vr-mode': '',
-        'vr-mode-ui': '',
-        'wakelock': ''
+        'keyboard-shortcuts': '',
+        'vr-mode-ui': ''
       }
     },
 
@@ -77,7 +76,10 @@ var AScene = module.exports = registerElement('a-scene', {
 
     attachedCallback: {
       value: function () {
-        this.setupKeyboardShortcuts();
+        initFullscreen(this);
+        initIframe(this);
+        initMetaTags(this);
+        initWakelock(this);
 
         // For Chrome (https://github.com/aframevr/aframe-core/issues/321).
         window.addEventListener('load', this.resize.bind(this));
@@ -334,19 +336,6 @@ var AScene = module.exports = registerElement('a-scene', {
       }
     },
 
-    /**
-     * Set up keyboard shortcuts to:
-     *   - Enter VR when `f` is pressed.
-     *   - Reset sensor when `z` is pressed.
-     */
-    setupKeyboardShortcuts: {
-      value: function () {
-        window.addEventListener('keyup', function (event) {
-          if (event.keyCode === 90) { controls.resetSensor(); }  // z.
-        }, false);
-      }
-    },
-
     setupRenderer: {
       value: function () {
         var canvas = this.canvas;

src/components/scene/wakelock.js

@@ -0,0 +1,64 @@
+var isIframed = require('../../utils/').isIframed;
+
+/**
+ * Register fullscreen listener to scene.
+ */
+module.exports = function initFullscreenListener (scene) {
+  var handler = fullscreenChangeHandler.bind(scene);
+  document.addEventListener('mozfullscreenchange', handler);
+  document.addEventListener('webkitfullscreenchange', handler);
+
+  // Handles fullscreen behavior when inside an iframe.
+  if (!isIframed()) { return; }
+  window.addEventListener('message', iframedFullscreenChangeHandler.bind(scene));
+};
+
+function fullscreenChangeHandler (event) {
+  var fullscreenElement = document.fullscreenElement ||
+                          document.mozFullScreenElement ||
+                          document.webkitFullscreenElement;
+  var scene = this;
+
+  // Lock to landscape orientation on mobile.
+  if (scene.isMobile && window.screen.orientation) {
+    if (fullscreenElement) {
+      window.screen.orientation.lock('landscape');
+    } else {
+      window.screen.orientation.unlock();
+    }
+  }
+
+  if (fullscreenElement) {
+    enterFullscreenHandler(scene);
+  } else {
+    exitFullscreenHandler(scene);
+  }
+}
+
+function iframedFullscreenChangeHandler (event) {
+  var scene = this;
+  if (!event.data) { return; }
+
+  switch (event.data.type) {
+    case 'fullscreen': {
+      switch (event.data.data) {
+        case 'enter':
+          enterFullscreenHandler(scene);
+          break;
+        case 'exit':
+          exitFullscreenHandler(scene);
+          break;
+      }
+    }
+  }
+}
+
+function enterFullscreenHandler (scene) {
+  scene.addState('fullscreen');
+  scene.emit('fullscreen-enter');
+}
+
+function exitFullscreenHandler (scene) {
+  scene.removeState('fullscreen');
+  scene.emit('fullscreen-exit');
+}

src/core/propertyTypes.js

@@ -0,0 +1,26 @@
+/* global MessageChannel */
+module.exports = function initIframe (scene) {
+  if (window.top !== window.self) { return; }
+
+  vrLoaderMode().then(function (isVr) {
+    if (isVr) {
+      scene.enterVR();
+    } else {
+      scene.exitVR();
+    }
+    window.top.postMessage({type: 'ready'}, '*');
+  });
+};
+
+/**
+ * @returns {object} Promise that resolves a boolean whether loader is in VR mode.
+ */
+function vrLoaderMode () {
+  return new Promise(function (resolve) {
+    var channel = new MessageChannel();
+    window.top.postMessage({type: 'checkVr'}, '*', [channel.port2]);
+    channel.port1.onmessage = function (message) {
+      resolve(!!message.data.data.isVr);
+    };
+  });
+}

src/core/a-scene.js renamed to src/core/scene/a-scene.js

@@ -1,19 +1,7 @@
-var register = require('../../core/component').registerComponent;
-
-module.exports.Component = register('meta-tags', {
-  init: function () {
-    if (!this.el.isMobile) { return; }
-    this.metaTags = injectMetaTags();
-  },
-
-  remove: function () {
-    var metaTags = this.metaTags;
-    if (!metaTags) { return; }
-    metaTags.forEach(function (metaTag) {
-      metaTag.parentNode.removeChild(metaTag);
-    });
-  }
-});
+module.exports = function initMetaTags (scene) {
+  if (!scene.isMobile) { return; }
+  injectMetaTags();
+};
 
 /**
  * Injects the necessary metatags in the document for mobile support to: