recent page gets alerts when new topics and posts are created

public/src/forum/recent.js

@@ -0,0 +1,50 @@
+(function() {
+	app.enter_room('recent_posts');
+
+	ajaxify.register_events([
+		'event:new_topic',
+		'event:new_post'
+	]);
+
+	var newTopicCount = 0, newPostCount = 0;
+
+	$('#new-topics-alert').on('click', function() {
+		$(this).hide();
+	});
+
+	socket.on('event:new_topic', function(data) {
+		
+		++newTopicCount;
+		updateAlertText();
+	
+	});
+	
+	function updateAlertText() {
+		var text = '';
+		
+		if(newTopicCount > 1)
+			text = 'There are ' + newTopicCount + ' new topics';
+		else if(newTopicCount === 1)
+			text = 'There is 1 new topic';
+		else
+			text = 'There are no new topics';
+			
+		if(newPostCount > 1)
+			text += ' and ' + newPostCount + ' new posts.';
+		else if(newPostCount === 1)
+			text += ' and 1 new post.';
+		else
+			text += ' and no new posts.';
+
+		text += ' Click here to reload.';
+
+		$('#new-topics-alert').html(text).fadeIn('slow');
+	}
+	
+	socket.on('event:new_post', function(data) {
+		++newPostCount;
+		updateAlertText();
+
+	});
+
+})();

public/templates/config.json

@@ -25,7 +25,7 @@
 		"users[^]*followers": "followers",
 		"users/[^]*": "account",
 
-		"recent": "category",
+		"recent": "recent",
 		"popular": "category",
 		"active": "category"
 	},

public/templates/recent.tpl

@@ -0,0 +1,52 @@
+<div class="container">
+	<ul class="breadcrumb">
+		<li><a href="/">Home</a><span class="divider">/</span></li>
+		<li class="active">{category_name}</li>
+		<div id="category_active_users"></div>
+	</ul>
+</div>
+
+
+<div class="alert alert-warning hide {no_topics_message}" id="category-no-topics">
+	<strong>There are no topics in this category.</strong><br />
+	Why don't you try posting one?
+</div>
+
+<a href="/recent">
+	<div class="alert hide" id="new-topics-alert"></div>
+</a>
+
+
+<div class="category row">
+	<div class="{topic_row_size}">
+		<ul id="topics-container">
+		<!-- BEGIN topics -->
+		<a href="../../topic/{topics.slug}" id="tid-{topics.tid}">
+			<li class="category-item {topics.deleted-class}">
+				<div class="row-fluid">
+					<div class="span12 topic-row img-polaroid">
+						<div class="latest-post visible-desktop">
+							<div class="pull-right">
+								<img style="width: 48px; height: 48px; /*temporary*/" src="../../graph/users/{topics.teaser_username}/picture" />
+								<p><strong>{topics.teaser_username}</strong>: {topics.teaser_text}</p>
+								<span>posted {topics.teaser_timestamp} ago</span>
+							</div>
+						</div>
+						<div>
+							<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.post_count}</span>{topics.title}</span></h3>
+							<small>
+								<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
+								Posted {topics.relativeTime} ago by 
+								<strong>{topics.username}</strong>.
+							</small> 
+						</div>
+					</div>
+				</div>
+			</li>
+		</a>
+		<!-- END topics -->
+		</ul>
+	</div>
+</div>
+
+<script type="text/javascript" src="/src/forum/recent.js"></script>

src/posts.js

@@ -207,8 +207,7 @@ marked.setOptions({
 					user.getUserFields(uid, ['username','reputation','picture','signature'], function(data) {
 
 						var timestamp = Date.now();
-						
-						io.sockets.in('topic_' + tid).emit('event:new_post', {
+						var socketData = {
 							'posts' : [
 								{
 									'pid' : pid,
@@ -226,7 +225,11 @@ marked.setOptions({
 									'editor': '',
 								}
 							]
-						});
+						};
+						
+						io.sockets.in('topic_' + tid).emit('event:new_post', socketData);
+						io.sockets.in('recent_posts').emit('event:new_post', socketData);
+						
 					});
 				} else {
 					socket.emit('event:alert', {

src/topics.js

@@ -366,6 +366,7 @@ marked.setOptions({
 						// Notify any users looking at the category that a new topic has arrived
 						Topics.get_topic(tid, uid, function(topicData) {
 							io.sockets.in('category_' + category_id).emit('event:new_topic', topicData);
+							io.sockets.in('recent_posts').emit('event:new_topic', topicData);
 						});
 					}
 				});