repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 9b5586c3fa73bc3c2d4850d5da36f98ae1def6c9:
path_to: 
revision_to: 

commit 9b5586c3fa73bc3c2d4850d5da36f98ae1def6c9
Author: James Baicoianu 
Date:   Mon Apr 11 02:29:01 2016 -0700

    Added chat components

diff --git a/css/chat.css b/css/chat.css
new file mode 100644
index 0000000000000000000000000000000000000000..9f63b020209932ae96cfa275564d10d5ac43fd78
--- /dev/null
+++ b/css/chat.css
@@ -0,0 +1,31 @@
+.janusweb_chat_messages {
+  height: 10em;
+  width: 30em;
+  font-size: .8em;
+  overflow-y: scroll;
+  border: 0;
+}
+
+.janusweb_chat_input input.ui_input_element {
+  width: 100%;
+  background: #aaa;
+}
+.janusweb_chat_input input.ui_input_element::-webkit-input-placeholder {
+  color: #333;
+}
+.janusweb_chat_input input.ui_input_element:focus {
+  background: #fff;
+}
+.janusweb_chat_input input.ui_input_element:focus::-webkit-input-placeholder {
+  color: #999;
+}
+
+.dark .ui_window .ui_window_titlebar {
+  font-size: .7em;
+}
+.ui_window .ui_window_content.janusweb_chat_panel {
+  padding: 0;
+}
+.ui_window .ui_window_content.janusweb_chat_panel .janusweb_chat_messages {
+  border: 0;
+}
diff --git a/scripts/chat.js b/scripts/chat.js
new file mode 100644
index 0000000000000000000000000000000000000000..770c900e41f2f4d76a6e8fd1260de55136d04a73
--- /dev/null
+++ b/scripts/chat.js
@@ -0,0 +1,62 @@
+elation.requireCSS('janusweb.chat');
+elation.require(['ui.window', 'ui.list', 'ui.input', 'elation.collection'], function() {
+  elation.template.add('janusweb.chat.message', '[{userId}] {message.data}');
+
+  elation.component.add('janusweb.chat', function() {
+    this.init = function() {
+      this.args.title = 'JanusVR Chat';
+      this.args.bottom = true;
+      this.args.resizable = false;
+      this.args.controls = false;
+      this.player = this.args.player;
+      this.client = this.args.client;
+
+      elation.janusweb.chat.extendclass.init.call(this);
+
+      this.messagecollection = elation.collection.indexed({index: 'timestamp'});
+      var panel = elation.ui.panel_vertical({classname: 'janusweb_chat_panel'});
+      this.messagelist = elation.ui.list({append: panel, classname: 'janusweb_chat_messages', itemcollection: this.messagecollection, attrs: {itemtemplate: 'janusweb.chat.message'}});
+      this.input = elation.ui.input({
+        append: panel, 
+        classname: 'janusweb_chat_input', 
+        placeholder: 'Press T to talk',
+        events: {
+          ui_input_accept: elation.bind(this, this.sendmessage),
+          focus: elation.bind(this, this.focus),
+          blur: elation.bind(this, this.blur),
+        }
+      });
+
+      this.setcontent(panel);
+    }
+    this.addmessage = function(msg) {
+      if (!msg.timestamp) msg.timestamp = window.performance.now();
+      var bottom = this.messagelist.isScrollAtBottom();
+      this.messagecollection.add(msg);
+      if (bottom) {
+        this.messagelist.scrollToBottom();
+      }
+      this.refresh();
+    }
+    this.sendmessage = function() {
+      this.client.send({'method': 'chat', data: this.input.value});
+      var msg = {userId: 'me', message: { data: this.input.value }, self: true};
+      this.addmessage(msg);
+      elation.events.fire({element: this, type: 'janusweb_chat_send', data: msg});
+      this.input.value = '';
+    }
+    this.focus = function() {
+      if (this.input) {
+        this.input.focus();
+      }
+      if (this.player) {
+        this.player.disable();
+      }
+    }
+    this.blur = function() {
+      if (this.player) {
+        this.player.enable();
+      }
+    }
+  }, elation.ui.window);
+});

-----END OF PAGE-----