move inputStreetmix func to streetmix-loader component

3DStreet · Oct 13, 2023 · 3984920 · 3984920
1 parent b8fc6c1
commit 3984920
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -30,9 +30,9 @@
     <div class="right-fixed">
       <ul class="right-menu">
         <li onclick="buttonScreenshotTock()"> <a class="camera"  href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li>
-        <li onclick="inputStreetmix()"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
+        <li onclick="document.querySelector('#default-street').addEventListener('loaded', (evt)=> {evt.target.setAttribute('streetmix-loader', 'inputStreetmix')})"> <a class="load"  href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
         <!-- <li onclick="inputJSON()"> <a class="load"  href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
-        <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt" onchange="fileJSON"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
+        <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
         <li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
       </ul>
     </div>

diff --git a/src/index.js b/src/index.js
@@ -117,16 +117,53 @@ AFRAME.registerComponent('street', {
 AFRAME.registerComponent('streetmix-loader', {
   dependencies: ['street'],
   schema: {
+    inputStreetmix: { type: 'string' },
     streetmixStreetURL: { type: 'string' },
     streetmixAPIURL: { type: 'string' },
     showBuildings: { default: true },
     name: { default: '' }
   },
+  prepareStreetElements: function() {
+    const streetContainerEl = jsonUtils.prepareStreetContainer();
+
+    let defaultStreet = streetContainerEl.querySelector('#default-street');
+    if (!defaultStreet) {
+      defaultStreet = document.createElement("a-entity");
+      streetContainerEl.appendChild(defaultStreet);
+      defaultStreet.setAttribute('id', 'default-street');
+    } 
+    this.defaultStreet = defaultStreet;
+  },
+  // this use os text input prompt, delete current scene, then load streetmix file
+  inputStreetmix: function () {
+    streetmixURL = prompt(
+      'Please enter a Streetmix URL',
+      'https://streetmix.net/kfarr/3/example-street'
+    );
+    setTimeout(function () {
+      window.location.hash = streetmixURL;
+    });
+
+    AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
+    AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');
+
+    this.prepareStreetElements();
+    this.defaultStreet.setAttribute('streetmix-loader', 'streetmixStreetURL', streetmixURL);
+
+  },
   update: function (oldData) { // fired at start and at each subsequent change of any schema value
     // This method may fire a few times when viewing a streetmix street in 3dstreet:
     // First to find the proper path, once to actually load the street, and then subsequent updates such as street name
     var data = this.data;
-    var el = this.el;
+
+    this.prepareStreetElements();
+    const el = this.defaultStreet;
+
+    if ((data.inputStreetmix !== '') && (data.streetmixStreetURL === '') && (data.streetmixAPIURL === '')) {
+      this.inputStreetmix();
+      data.inputStreetmix = '';
+      return;
+    }
 
     // if the loader has run once already, and upon update neither URL has changed, do not take action
     if ((oldData.streetmixStreetURL === data.streetmixStreetURL) && (oldData.streetmixAPIURL === data.streetmixAPIURL)) {

diff --git a/src/json-utils.js b/src/json-utils.js
@@ -321,6 +321,8 @@ function prepareStreetContainer() {
   return streetContainerEl;
 }
 
+module.exports.prepareStreetContainer = prepareStreetContainer;
+
 function createEntities(entitiesData) {
   const sceneElement = document.querySelector('a-scene');
 
@@ -484,30 +486,6 @@ function getUUIDFromPath(path) {
 
 module.exports.getUUIDFromPath = getUUIDFromPath;
 
-// this use os text input prompt, delete current scene, then load streetmix file
-function inputStreetmix() {
-  streetmixURL = prompt(
-    'Please enter a Streetmix URL',
-    'https://streetmix.net/kfarr/3/example-street'
-  );
-  setTimeout(function () {
-    window.location.hash = streetmixURL;
-  });
-  const streetContainerEl = document.getElementById('street-container');
-  while (streetContainerEl.firstChild) {
-    streetContainerEl.removeChild(streetContainerEl.lastChild);
-  }
-
-  AFRAME.scenes[0].setAttribute('metadata', 'sceneId', '');
-  AFRAME.scenes[0].setAttribute('metadata', 'sceneTitle', '');
-  streetContainerEl.innerHTML =
-    '<a-entity street streetmix-loader="streetmixStreetURL: ' +
-    streetmixURL +
-    '""></a-entity>';
-}
-
-module.exports.inputStreetmix = inputStreetmix;
-
 // JSON loading starts here
 function getValidJSON(stringJSON) {
   // Preserve newlines, etc. - use valid JSON