96 lines
3.3 KiB
CoffeeScript
96 lines
3.3 KiB
CoffeeScript
define [
|
|
'jquery',
|
|
'underscore',
|
|
'backbone',
|
|
'globals',
|
|
'text!templates/session_chat.html',
|
|
'text!templates/chat_message.html',
|
|
], ($, _, Backbone, globals, sessionChatTemplate, chatMessageTemplate) ->
|
|
|
|
# The chat panel in a session
|
|
# The contents are rendered by SessionView, this class is Used to
|
|
# manage the events in the chat.
|
|
SessionChatView = Backbone.View.extend
|
|
events:
|
|
"click button#chat-send": "_sendMessage"
|
|
"keyup #chat-input-box": "_inputKeyPressed"
|
|
|
|
initialize: ->
|
|
@chatInputID = "#chat-input-box"
|
|
@msgBoxID = "#chat-messages"
|
|
|
|
# Bind to the event triggered when the client connects to the server
|
|
globals.connection.bind "connection:connected",
|
|
@_registerConnectionEvents, @
|
|
|
|
render: ->
|
|
data = { auth: globals.currentAuth }
|
|
compiledTemplate = _.template(sessionChatTemplate, data)
|
|
@$el.html compiledTemplate
|
|
|
|
# Registers listeners for events in the application socket.
|
|
_registerConnectionEvents: ->
|
|
socket = globals.connection.socket
|
|
|
|
# Received event for a new public chat message
|
|
# @param {string} name name of user
|
|
# @param {string} msg message to be displayed
|
|
socket.on "msg", (name, msg) =>
|
|
@_addChatMessage(name, msg)
|
|
@_scrollToBottom()
|
|
|
|
# Received event to update all the messages in the chat box
|
|
# @param {Array} messages Array of messages in public chat box
|
|
socket.on "all_messages", (messages) =>
|
|
for msgBlock in messages
|
|
@_addChatMessage(msgBlock.username, msgBlock.message)
|
|
@_scrollToBottom()
|
|
|
|
# TODO: for now these messages are only being shown in the chat, maybe
|
|
# they should have their own view and do more stuff
|
|
# (e.g. disable the interface when disconnected)
|
|
socket.on "connect", =>
|
|
@_addChatMessage("system", "Connected to the server.")
|
|
socket.on "disconnect", =>
|
|
@_addChatMessage("system", "Disconnected form the server.")
|
|
socket.on "reconnect", =>
|
|
@_addChatMessage("system", "Reconnected!")
|
|
socket.on "reconnecting", =>
|
|
@_addChatMessage("system", "Reconnecting...")
|
|
socket.on "reconnect_failed", =>
|
|
@_addChatMessage("system", "Reconnect failed!")
|
|
|
|
# Send a chat message
|
|
_sendMessage: ->
|
|
$chatInput = @$(@chatInputID)
|
|
msg = $chatInput.val()
|
|
if msg? and msg.trim() isnt ""
|
|
globals.connection.emitMsg msg
|
|
$chatInput.val("")
|
|
$chatInput.focus()
|
|
|
|
# Add a message to the screen and scroll the chat area to bottom
|
|
_addChatMessage: (username, message) ->
|
|
data =
|
|
username: username
|
|
message: message
|
|
compiledTemplate = _.template(chatMessageTemplate, data)
|
|
@$(@msgBoxID).append compiledTemplate
|
|
|
|
# Scrolls the chat area to bottom to show the last messages
|
|
_scrollToBottom: ->
|
|
$msgBox = @$(@msgBoxID)
|
|
$msgBox.prop({ scrollTop: $msgBox.prop("scrollHeight") })
|
|
|
|
# A key was pressed in the input box
|
|
_inputKeyPressed: (e) ->
|
|
# Send message when the enter key is pressed
|
|
@_sendMessage() if e.keyCode is 13
|
|
|
|
# TODO: limit/show length of text in chatbox
|
|
# $("#chat-input-box").on "keyup", (e) ->
|
|
# count = $(this).attr("maxlength")
|
|
# chcount.innerHTML = max - chatbox.value.length
|
|
|
|
SessionChatView
|