Merge pull request #319 from 3DStreet/notification-component

Notification component

index.html

@@ -45,6 +45,7 @@
       vr-mode-ui-if-headset
       renderer="colorManagement: true; physicallyCorrectLights: true;"
       inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
+      notify
       >
       <a-assets>
         <!-- uncomment the line below to load assets from local github submodule -->
@@ -176,6 +177,7 @@
       }
 
       createEntities(streetObject.data, streetContainerEl);
+      AFRAME.scenes[0].components['notify'].message('Scene loaded from JSON', 'success')
     }
 
     function inputJSON() {

src/components/notify.js

@@ -0,0 +1,59 @@
+/* global AFRAME */
+var { Notyf } = require('../lib/notyf.min.js');
+
+AFRAME.registerComponent('notify', {
+  schema: {
+    duration: { type: 'number', default: 2000 },
+    ripple: { type: 'boolean', default: true },
+    position: {
+      type: 'string',
+      default: {
+        // x: left | center | right
+        // y: top | center | bottom
+        x: 'center',
+        y: 'bottom'
+      }
+    },
+    dismissible: { type: 'boolean', default: false },
+    type: { type: 'string', default: 'info' },
+    message: { type: 'string', default: '' }
+  },
+  init: function () {
+    this.notify = new Notyf({
+      types: [
+        {
+          type: 'info',
+          background: 'blue',
+          icon: false
+        }
+      ],
+      // Set your global Notyf configuration here
+      duration: this.data.duration,
+      ripple: this.data.ripple,
+      position: this.data.position,
+      dismissible: this.data.dismissible
+    });
+    this.types = this.notify.options.types.map(messType => messType.type);
+  },
+  message: function (messageText, messageType = 'info') {
+    if (messageText && this.types.includes(messageType)) {
+      this.notify.open({
+        type: messageType,
+        message: messageText
+      });
+    }
+  },
+  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 newMessage = this.data.message;
+    const messageType = this.data.type;
+
+    if (newMessage && this.types.includes(messageType)) {
+      this.message(newMessage, messageType);
+      this.data.message = '';
+    }
+  }
+});

src/index.js

@@ -6,6 +6,7 @@ require('./components/gltf-part');
 require('./lib/aframe-cursor-teleport-component.min.js');
 require('./lib/animation-mixer.js');
 require('./assets.js');
+require('./components/notify.js');
 require('./components/create-from-json');
 require('./components/screentock.js');
 require('aframe-atlas-uvs-component');

src/viewer-styles.css

@@ -1,4 +1,6 @@
+@import url("notyf.min.css");
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500');
+
 html {
 	font-family: 'Lato', sans-serif;
 }