call json-utils.js from index.js

index.html

@@ -10,9 +10,6 @@
     <!-- mapbox -->
     <script src="./src/lib/aframe-mapbox-component.min.js"></script>
 
-    <!-- save / load -->
-    <script src="./src/json-utils.js"></script>
-
     <!-- vr teleport controls -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-blink-controls.min.js"></script>
 
@@ -68,7 +65,7 @@
     <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="STREET.utils.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"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
       </ul>
@@ -123,7 +120,7 @@
   <script>
 
     document.getElementById('inputfile')
-            .addEventListener('change', fileJSON);
+            .addEventListener('change', STREET.utils.fileJSON);
 
     function buttonScreenshotTock() {
       const screenshotEl = document.getElementById('screenshot');

src/index.js

@@ -3,6 +3,7 @@ require('babel-polyfill');
 if (typeof VERSION !== 'undefined') { console.log(`3DStreet Version: ${VERSION} (Date: ${new Date(COMMIT_DATE).toISOString().split('T')[0]}, Commit Hash: #${COMMIT_HASH})`); }
 var streetmixParsers = require('./aframe-streetmix-parsers');
 var streetmixUtils = require('./tested/streetmix-utils');
+require('./json-utils.js');
 require('./components/gltf-part');
 require('./components/ocean');
 require('./lib/aframe-cursor-teleport-component.min.js');

src/json-utils.js

@@ -1,9 +1,10 @@
 /* global AFRAME, Node */
 /* version: 1.0 */
 
-var STREET = {};
+window.STREET = {};
 STREET.utils = {};
 
+
 function getSceneUuidFromURLHash () {
   const currentHash = window.location.hash;
   const match = currentHash.match(/#\/scenes\/([a-zA-Z0-9-]+)\.json/);
@@ -56,6 +57,8 @@ function convertDOMElToObject (entity) {
   };
 }
 
+STREET.utils.convertDOMElToObject = convertDOMElToObject;
+
 function getElementData (entity) {
   if (!entity.isEntity) {
     return;
@@ -175,7 +178,7 @@ const renameProps = {
   intersection: 'not-intersection'
 };
 
-function filterJSONstreet (removeProps, renameProps, streetJSON) {
+function filterJSONstreet (streetJSON) {
   function removeValueCheck (removeVal, value) {
     if (AFRAME.utils.deepEqual(removeVal, value) || removeVal === '*') {
       return true;
@@ -184,10 +187,11 @@ function filterJSONstreet (removeProps, renameProps, streetJSON) {
   }
 
   let stringJSON = JSON.stringify(streetJSON, function replacer (key, value) {
-    const compAttributes = AFRAME.utils.styleParser.parse(value);
+    let compAttributes;
     for (var removeKey in removeProps) {
       // check for removing components
       if (key === removeKey) {
+        compAttributes = AFRAME.utils.styleParser.parse(value);
         const removeVal = removeProps[removeKey];
         // check for deleting component's attribute
         if (typeof removeVal === 'object' && !isEmpty(removeVal)) {
@@ -210,7 +214,7 @@ function filterJSONstreet (removeProps, renameProps, streetJSON) {
       }
     }
 
-    return compAttributes;
+    return compAttributes || value;
   });
   // rename components
   for (var renameKey in renameProps) {
@@ -220,6 +224,8 @@ function filterJSONstreet (removeProps, renameProps, streetJSON) {
   return stringJSON;
 }
 
+STREET.utils.filterJSONstreet = filterJSONstreet;
+
 /**
  * function from 3dstreet-editor/src/lib/entity.js
  * Gets the value for a component or component's property coming from mixins of
@@ -366,6 +372,8 @@ function createEntities (entitiesData, parentEl) {
   }
 }
 
+STREET.utils.createEntities = createEntities;
+
 /*
 Add a new entity with a list of components and children (if exists)
  * @param {object} entityData Entity definition to add:
@@ -550,7 +558,7 @@ AFRAME.registerComponent('set-loader-from-hash', {
           '[set-loader-from-hash]',
           '200 response received and JSON parsed, now createElementsFromJSON'
         );
-        createElementsFromJSON(jsonData);
+        STREET.utils.createElementsFromJSON(jsonData);
         const sceneId = getUUIDFromPath(requestURL);
         if (sceneId) {
           console.log('sceneId from fetchJSON from url hash loader', sceneId);
@@ -608,6 +616,8 @@ function inputStreetmix () {
     '""></a-entity>';
 }
 
+STREET.utils.inputStreetmix = inputStreetmix;
+
 // JSON loading starts here
 function getValidJSON (stringJSON) {
   // Preserve newlines, etc. - use valid JSON
@@ -642,6 +652,8 @@ function createElementsFromJSON (streetJSON) {
   STREET.notify.successMessage('Scene loaded from JSON');
 }
 
+STREET.utils.createElementsFromJSON = createElementsFromJSON;
+
 // viewer widget click to paste json string of 3dstreet scene
 function inputJSON () {
   const stringJSON = prompt('Please paste 3DStreet JSON string');
@@ -660,3 +672,6 @@ function fileJSON () {
   };
   reader.readAsText(this.files[0]);
 }
+
+// temporarily place the UI function in utils, which is used in index.html.
+STREET.utils.fileJSON = fileJSON;