Add first version to load JSON from URL

index.html

@@ -90,14 +90,41 @@
       init: function () {
         // get hash from window
         const streetURL = window.location.hash.substring(1);
-        if (streetURL !== undefined && streetURL.length > 0) {
-          console.log('[set-loader-from-hash]','Using URL from hash', streetURL)
+        if (!streetURL) {
+          return;
+        }
+        if (streetURL.includes('//streetmix.net')) {
+          console.log('[set-loader-from-hash]','Set streetmix-loader streetmixStreetURL to', streetURL)
           this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', streetURL);
-        } 
+        } else {
+          // try to load JSON file from remote resource
+          console.log('[set-loader-from-hash]','Load 3DStreet scene with fetchJSON from', streetURL)
+          this.fetchJSON(streetURL);
+        }
         // else {
         //   console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL)
         //   this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL);
         // }
+      },
+      fetchJSON: function (requestURL) {
+        const request = new XMLHttpRequest();
+        request.open('GET', requestURL, true);
+        request.onload = function () {
+          if (this.status >= 200 && this.status < 400) {
+            // Connection success
+            // remove 'set-loader-from-hash' component from json data
+            const jsonData = JSON.parse(this.response, 
+              (key, value) => (key === 'set-loader-from-hash') ? undefined : value );
+
+            console.log('[set-loader-from-hash]', '200 response received and JSON parsed, now createElementsFromJSON');
+            createElementsFromJSON(jsonData);
+          }
+        };
+        request.onerror = function () {
+          // There was a connection error of some sort
+          console.log('Loading Error: There was a connection error during JSON loading');
+        };
+        request.send();
       }
     });
 
@@ -134,14 +161,21 @@
                        .replace(/[\u0000-\u0019]+/g,"");
     }
 
-    function createElementsFromJSON(streetJSONString) {
-      const validJSONString = getValidJSON(streetJSONString);
+    function createElementsFromJSON(streetJSON) {
+      let streetObject = {};
+      if (typeof streetJSON == 'string') {
+        const validJSONString = getValidJSON(streetJSON);
+        streetObject = JSON.parse(validJSONString);
+      } else if (typeof streetJSON == 'object') {
+        streetObject = streetJSON;
+      }
+
       streetContainerEl = document.getElementById('street-container');
       while (streetContainerEl.firstChild) {
         streetContainerEl.removeChild(streetContainerEl.lastChild);
       }
-      var streetObject = JSON.parse(validJSONString);
-      createEntities(streetObject.data[0].children, streetContainerEl);
+
+      createEntities(streetObject.data, streetContainerEl);
     }
 
     function inputJSON() {

src/json-utils.js

@@ -110,6 +110,7 @@ function isEmpty (object) {
 const removeProps = {
   src: {},
   normalMap: {},
+  'set-loader-from-hash': '*',
   'create-from-json': '*',
   street: { JSON: '*' }
 };
@@ -275,6 +276,12 @@ function getModifiedProperty (entity, componentName) {
 
 function createEntities (entitiesData, parentEl) {
   for (const entityData of entitiesData) {
+    if (entityData.id === 'street-container' && 
+    entityData.children &&
+    entityData.children[0].id === 'default-street' && 
+    entityData.children[0].components.hasOwnProperty('set-loader-from-hash')) {
+      delete entityData.children[0].components['set-loader-from-hash'];
+    }
     createEntityFromObj(entityData, parentEl);
   }
 }
@@ -323,7 +330,7 @@ function createEntityFromObj (entityData, parentEl) {
       entity.setAttribute('mixin', entityData.mixin);
     }
     // Ensure the components are loaded before update the UI
-    entity.emit('entitycreated', { element: entityData.element, components: entity.components }, false);
+    entity.emit('entitycreated', {}, false);
   });
 
   if (entityData.children) {