diff --git a/index.html b/index.html
index 30a3c6ba0..e60360f10 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@
inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
notify
metadata
+ scene-title
>
diff --git a/src/json-utils.js b/src/json-utils.js
index abdac1f34..a4160a9ea 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -410,8 +410,24 @@ AFRAME.registerComponent('metadata', {
sceneTitle: { default: '' },
sceneId: { default: '' }
},
+ 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');
@@ -428,10 +444,10 @@ AFRAME.registerComponent('metadata', {
// No need to update.
if (Object.keys(oldData).length === 0) { return; }
- const titleText = this.data.sceneTitle;
+ const titleText = this.data.titleText;
const titleElement = this.titleElement;
- if (titleText !== oldData.sceneTitle) {
+ if (titleText !== oldData.titleText) {
if (!titleElement) {
this.createTitleElement(titleText);
} else {