@@ -1,2 +1,3 @@ *.swp .DS_Store +http/tmp .gitignore @@ -11,6 +11,11 @@ JsChat.ChatController = Class.create({ Event.observe(window, 'resize', this.resizeEvent.bindAsEventListener(this)); $('post_message').observe('submit', this.postMessageFormEvent.bindAsEventListener(this)); + $('messages').observe('scroll', this.messagesScrolled.bindAsEventListener(this)); + }, + + messagesScrolled: function() { + Display.scrolled = (($('messages').scrollHeight - $('messages').scrollTop) > $('messages').getHeight()); }, focusEvent: function() { http/public/javascripts/app/controllers/chat_controller.js @@ -1,10 +1,18 @@ var Display = { + scrolled: false, + add_message: function(text, className, time) { var time_html = '<span class="time">\#{time}</span>'.interpolate({ time: TextHelper.dateText(time) }); $('messages').insert({ bottom: '<li class="' + className + '">' + time_html + ' ' + text + '</li>' }); this.scrollMessagesToTop(); }, + addImageOnLoads: function() { + $$('#messages li').last().select('img').each(function(element) { + element.observe('load', this.scrollMessagesToTop); + }.bind(this)); + }, + message: function(message) { var name = $('name').innerHTML; var user_class = name == message['user'] ? 'user active' : 'user'; @@ -19,6 +27,8 @@ var Display = { text = text.interpolate({ user_class: user_class, room: message['room'], user: TextHelper.truncateName(message['user']), message: TextHelper.decorateMessage(message['message']), message_class: 'message' }); this.add_message(text, 'message', message['time']); + this.addImageOnLoads(); + if (this.show_unread) { this.unread++; document.title = 'JsChat: (' + this.unread + ') new messages'; @@ -48,7 +58,9 @@ var Display = { }, scrollMessagesToTop: function() { - $('messages').scrollTop = $('messages').scrollHeight; + if (!this.scrolled) { + $('messages').scrollTop = $('messages').scrollHeight; + } }, clearIdleState: function(user_name) { http/public/javascripts/app/protocol/display.js @@ -3,10 +3,6 @@ <p>JsChat is an <em>open source</em> chat system that uses a simple protocol based on <acronym title="JavaScript Object Notation">JSON</acronym>.</p> <p>To download the code and an irssi-like <em>console client</em>, visit <a href="http://github.com/alexyoung/jschat/">GitHub</a>.</p> <p>Read more on the <a href="http://blog.jschat.org">JsChat Blog</a>.</p> - <div class="big_message"> - <h2 class="angry">Stop Asking Us About Polling</h2> - <p>Read how and why JsChat's web interface works here: <a href="http://blog.jschat.org/post/114748445/jschat-polling">JsChat: Polling</a>.</p> - </div> <h2>Try JsChat Now</h2> <div id="feedback" class="error" style="display: none"></div> <form method="post" action="/identify" id="sign-on"> http/views/index.erb 8da3235ea7559f2c67172c58beb667e6e741351e Alex Young alex@helicoid.net http://github.com/alexyoung/jschat/commit/9e9951ac4632e33a49005c40796865bd6e772a15 9e9951ac4632e33a49005c40796865bd6e772a15 2009-06-05T02:30:38-07:00 2009-06-05T02:30:38-07:00 Added image onload handling to scroll the message pane down, and it also stops scrolling when you scroll away from the bottom 568096c0e476622af7581a1c7aabb67735c26433 Alex Young alex@helicoid.net