Merge pull request aframevr#3983 from dmarcos/ie11

Add polyfills to support 2D Mode in IE11 (fix aframevr#3903)

Author: ngokevin

docs/introduction/vr-headsets-and-webvr-browsers.md

@@ -156,3 +156,4 @@ specifically those that support WebGL including:
 - Chrome
 - Safari
 - Edge
+- Internet Explorer 11

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "animejs": "^2.2.0",
     "browserify-css": "^0.8.4",
+    "custom-event-polyfill": "^1.0.6",
     "debug": "ngokevin/debug#noTimestamp",
     "deep-assign": "^2.0.0",
     "document-register-element": "dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",

src/index.js

@@ -25,6 +25,13 @@ if (!window.hasNativeWebXRImplementation && !window.hasNativeWebVRImplementation
 var utils = require('./utils/');
 var debug = utils.debug;
 
+if (utils.isIE11) {
+  // Polyfill `CustomEvent`.
+  require('custom-event-polyfill');
+  // Polyfill String.startsWith.
+  require('../vendor/starts-with-polyfill');
+}
+
 var error = debug('A-Frame:error');
 var warn = debug('A-Frame:warn');
 

src/utils/index.js

@@ -15,6 +15,7 @@ module.exports.debug = debug;
 module.exports.device = device;
 module.exports.entity = require('./entity');
 module.exports.forceCanvasResizeSafariMobile = require('./forceCanvasResizeSafariMobile');
+module.exports.isIE11 = require('./is-ie11');
 module.exports.material = require('./material');
 module.exports.objectPool = objectPool;
 module.exports.split = require('./split').split;

src/utils/is-ie11.js

@@ -0,0 +1,16 @@
+// https://stackoverflow.com/a/17907562
+function getInternetExplorerVersion () {
+  var version = -1;
+  var userAgent = navigator.userAgent;
+  var re;
+  if (navigator.appName === 'Microsoft Internet Explorer') {
+    re = new RegExp('MSIE ([0-9]{1,}[\\.0-9]{0,})');
+    if (re.exec(userAgent) != null) { version = parseFloat(RegExp.$1); }
+  } else if (navigator.appName === 'Netscape') {
+    re = new RegExp('Trident/.*rv:([0-9]{1,}[\\.0-9]{0,})');
+    if (re.exec(userAgent) != null) { version = parseFloat(RegExp.$1); }
+  }
+  return version;
+}
+
+module.exports = getInternetExplorerVersion() === 11;

vendor/starts-with-polyfill.js

@@ -0,0 +1,7 @@
+// https://stackoverflow.com/a/36213464
+if (!String.prototype.startsWith) {
+    String.prototype.startsWith = function(searchString, position){
+      position = position || 0;
+      return this.substr(position, searchString.length) === searchString;
+  };
+}