Merge pull request #359 from 3DStreet/add-title-UI

add div with title to metadata component code

index.html

@@ -69,6 +69,7 @@
       inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
       notify
       metadata
+      scene-title
       >
       <a-assets>
         <!-- uncomment the line below to load assets from local github submodule -->

src/json-utils.js

@@ -410,7 +410,51 @@ AFRAME.registerComponent('metadata', {
     sceneTitle: { default: '' },
     sceneId: { default: '' }
   },
-  init: function () {}
+  init: function () { },
+  update: function (oldData) {
+    const sceneTitle = this.data.sceneTitle;
+    if (sceneTitle !== oldData.sceneTitle) {
+      this.el.emit('newTitle', {sceneTitle: sceneTitle});
+    }  
+  }
+});
+
+AFRAME.registerComponent('scene-title', {
+  schema: {
+    titleText: { default: '' }
+  },
+  init: function () {
+    this.titleElement = undefined;
+    this.el.addEventListener('newTitle', (evt) => {
+      this.el.setAttribute('scene-title', 'titleText', evt.detail.sceneTitle);
+    });
+  },
+  createTitleElement: function (titleText) {
+    const titleDiv = this.titleElement = document.createElement('div');
+    const newContent = document.createTextNode(titleText);
+    titleDiv.setAttribute('id', 'sceneTitle');
+    titleDiv.appendChild(newContent);
+    document.body.append(titleDiv);
+  },
+  updateTitleText: function (titleText) {
+    this.titleElement.textContent = titleText;
+  },
+  update: function (oldData) {
+    // If `oldData` is empty, then this means we're in the initialization process.
+    // No need to update.
+    if (Object.keys(oldData).length === 0) { return; }
+
+    const titleText = this.data.titleText;
+    const titleElement = this.titleElement;
+
+    if (titleText !== oldData.titleText) {
+      if (!titleElement) {
+        this.createTitleElement(titleText);
+      } else {
+        this.updateTitleText(titleText);
+      }
+    }   
+  }
 });
 
 AFRAME.registerComponent('set-loader-from-hash', {

src/viewer-styles.css

@@ -137,3 +137,22 @@ body {
 	background: #6100FF;
 	z-index: 9999;
 }
+
+/********* scene title css *********/
+
+#sceneTitle {
+	position: fixed;
+	color: white;
+	font-size: 20px;
+	font-family: Lato;
+	font-weight: 400;
+	word-wrap: break-word;
+	bottom: 43px;
+	pointer-events: none;
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+    height: 26px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}