2012-12-11 00:34:06 +08:00
|
|
|
define [
|
|
|
|
'jquery',
|
|
|
|
'underscore',
|
|
|
|
'backbone',
|
2012-12-11 09:29:56 +08:00
|
|
|
'globals',
|
2012-12-15 08:58:14 +08:00
|
|
|
'text!templates/session_users.html',
|
2012-12-11 09:29:56 +08:00
|
|
|
'text!templates/user.html',
|
2012-12-15 08:58:14 +08:00
|
|
|
], ($, _, Backbone, globals, sessionUsersTemplate, userTemplate) ->
|
2012-12-11 00:34:06 +08:00
|
|
|
|
|
|
|
# The users panel in a session
|
|
|
|
# The contents are rendered by SessionView, this class is Used to
|
|
|
|
# manage the events in the users.
|
|
|
|
SessionUsersView = Backbone.View.extend
|
|
|
|
events:
|
2012-12-15 08:41:30 +08:00
|
|
|
"click #switch-presenter": "_switchPresenter"
|
|
|
|
"click .user": "_userClicked"
|
2012-12-11 00:34:06 +08:00
|
|
|
|
2012-12-11 09:29:56 +08:00
|
|
|
initialize: ->
|
2012-12-15 08:58:14 +08:00
|
|
|
@userListID = "#current-users"
|
2012-12-11 09:29:56 +08:00
|
|
|
|
|
|
|
# Bind to the event triggered when the client connects to the server
|
|
|
|
globals.connection.bind "connection:connected",
|
2012-12-15 08:41:30 +08:00
|
|
|
@_registerConnectionEvents, @
|
|
|
|
|
|
|
|
render: ->
|
2012-12-15 08:58:14 +08:00
|
|
|
compiledTemplate = _.template(sessionUsersTemplate)
|
|
|
|
@$el.html compiledTemplate
|
2012-12-11 09:29:56 +08:00
|
|
|
|
|
|
|
# Registers listeners for events in the application socket.
|
2012-12-15 08:41:30 +08:00
|
|
|
_registerConnectionEvents: ->
|
2012-12-11 09:29:56 +08:00
|
|
|
socket = globals.connection.socket
|
|
|
|
|
|
|
|
# Received event for a new public chat message
|
|
|
|
# @param {Array} users Array of names and publicIDs of connected users
|
|
|
|
socket.on "user list change", (users) =>
|
2012-12-15 08:41:30 +08:00
|
|
|
@_removeAllUsers()
|
2012-12-11 09:29:56 +08:00
|
|
|
for userBlock in users
|
2012-12-15 08:41:30 +08:00
|
|
|
@_addUser(userBlock.id, userBlock.name)
|
2012-12-11 09:29:56 +08:00
|
|
|
|
2013-01-23 06:56:17 +08:00
|
|
|
socket.on "load users", (users) =>
|
|
|
|
@_removeAllUsers()
|
|
|
|
for userBlock in users
|
|
|
|
@_addUser(userBlock.id, userBlock.name)
|
|
|
|
|
|
|
|
# Received event for a new user
|
|
|
|
socket.on "user join", (userid,username) =>
|
|
|
|
#@_removeAllUsers()
|
|
|
|
#for userBlock in users
|
|
|
|
@_addUser(userid, username)
|
|
|
|
|
|
|
|
# Received event when a user leave
|
|
|
|
socket.on "user leave", (userid) =>
|
|
|
|
#@_removeAllUsers()
|
|
|
|
#for userBlock in users
|
|
|
|
@_removeUserByID(userid)
|
|
|
|
|
2012-12-11 09:29:56 +08:00
|
|
|
# Received event to set the presenter to a user
|
|
|
|
# @param {string} userID publicID of the user that is being set as the current presenter
|
|
|
|
socket.on "setPresenter", (userID) =>
|
2012-12-15 08:41:30 +08:00
|
|
|
@_setPresenter(userID)
|
2012-12-11 00:34:06 +08:00
|
|
|
|
2012-12-11 09:29:56 +08:00
|
|
|
# Removes all users from the screen.
|
2012-12-15 08:41:30 +08:00
|
|
|
_removeAllUsers: ->
|
2012-12-11 09:29:56 +08:00
|
|
|
@$(@userListID).empty()
|
|
|
|
|
2013-01-23 06:56:17 +08:00
|
|
|
# Removes all users from the screen.
|
|
|
|
_removeUserByID: (userID)->
|
|
|
|
@$("#user-"+userID).remove()
|
|
|
|
|
2012-12-11 09:29:56 +08:00
|
|
|
# Add a user to the screen.
|
2012-12-15 08:41:30 +08:00
|
|
|
_addUser: (userID, username) ->
|
2012-12-11 09:29:56 +08:00
|
|
|
data =
|
|
|
|
username: username
|
|
|
|
userID: userID
|
|
|
|
compiledTemplate = _.template(userTemplate, data)
|
|
|
|
@$(@userListID).append compiledTemplate
|
|
|
|
|
|
|
|
# Marks a user as selected when clicked.
|
2012-12-15 08:41:30 +08:00
|
|
|
_userClicked: (e) ->
|
2012-12-11 09:29:56 +08:00
|
|
|
@$('.user.selected').removeClass('selected')
|
2012-12-18 03:51:12 +08:00
|
|
|
|
|
|
|
# add .selected to the user's element
|
|
|
|
$target = @$(e.target)
|
|
|
|
unless $target.hasClass('user') # clicked on a child
|
|
|
|
$target = $target.parents('.user')
|
|
|
|
$target.addClass('selected')
|
2012-12-11 09:29:56 +08:00
|
|
|
|
|
|
|
# Sets the current presenter to the user currently selected.
|
2012-12-15 08:41:30 +08:00
|
|
|
_switchPresenter: ->
|
2012-12-11 09:29:56 +08:00
|
|
|
id = @$(".user.selected").attr("id").replace("user-", "")
|
|
|
|
globals.connection.emitSetPresenter id
|
|
|
|
|
|
|
|
# Sets the user with ID `userID` as the presenter.
|
2012-12-15 08:41:30 +08:00
|
|
|
_setPresenter: (userID) ->
|
2012-12-11 09:29:56 +08:00
|
|
|
@$(".user.presenter").removeClass "presenter"
|
|
|
|
@$("#user-#{userID}").addClass "presenter"
|
2012-12-11 00:34:06 +08:00
|
|
|
|
|
|
|
SessionUsersView
|