github/socket.io
1
1
Fork 0
mirror of https://github.com/socketio/socket.io.git synced 2026-04-30 03:00:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed scrollbar height, fixed "undefined is typing", cleaned up fade effect

Browse Source
This commit is contained in:
Grant Timmerman
2014-02-16 12:12:02 -08:00
parent 852a9d34df
commit 575ff2ecfc
4 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/chat/app.js
View File

@@ -84,11 +84,12 @@ io.on('connection', function (socket) {
if (addedUser) {
delete usernames[socket.username];
--numUsers;
// echo globally that this client has left
socket.broadcast.emit('user left', {
username: socket.username
});
}
// echo globally that this client has left
socket.broadcast.emit('user left', {
username: socket.username
});
// remove typing messages
socket.broadcast.emit('stop typing', {
username: socket.username

4
examples/chat/index.html
View File

@@ -8,7 +8,9 @@
<body>
<ul class="pages">
<li class="chat page">
<ul class="messages"></ul>
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">

31
examples/chat/main.js
View File

@@ -62,7 +62,12 @@ $(function() {
// Adds the visual chat message to the message list
function addChatMessage (data) {
getTypingMessages(data).remove();
var $typingMessages = getTypingMessages(data);
var fade = true; // Whether we should fade-in the new message or not
if ($typingMessages.length !== 0) {
fade = false;
$typingMessages.remove();
}
var colorStyle = 'style="color:' + data.color + '"';
var usernameDiv = '<span class="username"' + colorStyle + '>' +
@@ -71,10 +76,10 @@ $(function() {
data.message + '</span>';
var typingClass = data.typing ? 'typing' : '';
var messageDiv = '<li class="message ' + typingClass + '">' + usernameDiv +
messageBodyDiv + '</li>';
var messageDiv = '<li class="message ' + typingClass + '">' +
usernameDiv + messageBodyDiv + '</li>';
var $messageDiv = $(messageDiv).data('username', data.username);
addMessageElement($messageDiv);
addMessageElement($messageDiv, fade);
}
// Adds the visual chat typing message
@@ -92,8 +97,14 @@ $(function() {
}
// Adds a message element to the messages and scrolls to the bottom
function addMessageElement (el) {
$messages.append($(el).hide().fadeIn(FADE_TIME));
// Fades-in if not specified
function addMessageElement (el, fade) {
var $el = $(el);
fade = (typeof fade === 'undefined') ? true : fade;
if (fade) {
$el.hide().fadeIn(FADE_TIME);
}
$messages.append($el);
$messages[0].scrollTop = $messages[0].scrollHeight;
}
@@ -145,15 +156,11 @@ $(function() {
} else {
setUsername();
}
} else {
updateTyping();
}
});
$window.keyup(function (event) {
if (event.which !== 13) {
updateTyping();
}
$inputMessage.on('input', function() {
updateTyping();
});
// Socket events

7
examples/chat/style.css
View File

@@ -103,11 +103,16 @@ ul {
/* Messages */
.chatArea {
height: 100%;
padding-bottom: 60px;
}
.messages {
height: 100%;
margin: 0;
overflow-y: scroll;
padding: 10px 20px 70px 20px;
padding: 10px 20px 10px 20px;
}
.message.typing .messageBody {