make xhrloader public from <a-assets> (fixes #2022) (#2023)

* make xhrloader public from <a-assets> (fixes #2022)

* rename to fileloader

Author: ngokevin

docs/core/asset-management-system.md

@@ -81,7 +81,8 @@ Given that CORS headers *are* set, `<a-assets>` will automatically set
 
 ## Preloading Audio and Video
 
-Audio and video assets will only block the scene if `autoplay` is set or if `preload="auto"`:
+Audio and video assets will only block the scene if `autoplay` is set or if
+`preload="auto"`:
 
 ```html
 <a-scene>
@@ -185,3 +186,17 @@ Thus, since we block entity initialization on assets, by the time entities
 load, all assets will have been already fetched. As long as `<a-asset-item>`s
 are defined, and the entity is fetching files using some form
 `THREE.XHRLoader`, then caching will automatically work.
+
+## Accessing the `XHRLoader` and Cache
+
+To access the three.js `XHRLoader` if we want to listen more closely:
+
+```js
+console.log(document.querySelector('a-assets').fileLoader);
+```
+
+To access the cache that stores XHR responses:
+
+```js
+console.log(THREE.Cache);
+```

src/core/a-assets.js

@@ -4,7 +4,7 @@ var debug = require('../utils/debug');
 var registerElement = require('./a-register-element').registerElement;
 var THREE = require('../lib/three');
 
-var xhrLoader = new THREE.XHRLoader();
+var fileLoader = new THREE.XHRLoader();
 var warn = debug('core:a-assets:warn');
 
 /**
@@ -15,6 +15,7 @@ module.exports = registerElement('a-assets', {
     createdCallback: {
       value: function () {
         this.isAssets = true;
+        this.fileLoader = fileLoader;
       }
     },
 
@@ -87,7 +88,7 @@ registerElement('a-asset-item', {
       value: function () {
         var self = this;
         var src = this.getAttribute('src');
-        xhrLoader.load(src, function (textResponse) {
+        fileLoader.load(src, function (textResponse) {
           THREE.Cache.files[src] = textResponse;
           self.data = textResponse;
           // Workaround for a Chrome bug.

tests/core/a-assets.test.js

@@ -1,4 +1,5 @@
 /* global assert, setup, suite, test */
+var THREE = require('lib/three');
 
 suite('a-assets', function () {
   // Empty src will not trigger load events in Chrome. Use data URI where a load event is needed.
@@ -18,6 +19,19 @@ suite('a-assets', function () {
     document.body.appendChild(scene);
   });
 
+  test('throws error if not in a-scene', function () {
+    var div = document.createElement('div');
+    var assets = document.createElement('a-assets');
+    div.appendChild(assets);
+    assert.throws(function () {
+      assets.attachedCallback();
+    }, Error);
+  });
+
+  test('has fileLoader', function () {
+    assert.ok(this.el.fileLoader.constructor, THREE.XHRLoader);
+  });
+
   test('waits for images to load', function (done) {
     var el = this.el;
     var scene = this.scene;