pushing messages into a div

1 files changed, 63 insertions, 0 deletions

diff --git a/public/js/lib/views/room/chat.js b/public/js/lib/views/room/chat.js
new file mode 100644
index 0000000..2c1140e
--- /dev/null
+++ b/public/js/lib/views/room/chat.js
@@ -0,0 +1,63 @@
+var ChatView = View.extend({
+
+  el: "#chat",
+  
+  template: $("#message_template").html(),
+
+  events: {
+    "submit form": "send",
+    "scroll #messages": "scroll",
+  },
+  
+  initialize: function(){
+    var $msg = this.$msg = this.$("#message")
+    this.$messages = this.$("#messages")
+    this.messages = this.$messages.get(0)
+    this.$msg.focus()
+    $(window).focus(function(){ $msg.focus() })
+  },
+  
+  seen: {},
+  add: function(msg){
+    var key = msg.date + "_" + msg.nick
+    if (key in this.seen) return
+    this.seen[key] = true
+    
+    var $el = $( this.template )
+    $el.find(".nick").html(msg.nick)
+    $el.find(".msg").html(msg.msg)
+    this.$messages.append($el)
+    if (! this.scrolled) {
+      this.scrollToBottom()
+    }
+  },
+  
+  send: function(e){
+    e && e.preventDefault()
+    console.log("hi")
+    var val = this.$msg.sanitize()
+    this.$msg.focus()
+    if (! val) return
+    this.$msg.val("")
+    var msg = {}
+    msg.room = room.name
+    msg.msg = val
+    msg.nick = user.username
+    msg.date = +new Date
+    this.add(msg)
+    app.socket.send("message", msg)
+  },
+  
+  empty: function(){
+    this.$messages.empty()
+  },
+
+  scrolled: false,
+  scroll: function(){
+    this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100)
+  },
+  scrollToBottom: function(){
+    this.messages.scrollTop = document.body.scrollHeight
+  }
+
+})