scroll to posts

public/src/ajaxify.js

@@ -29,9 +29,10 @@ var ajaxify = {};
 		// leave room and join global
 		app.enter_room('global');
 
-
 		var url = url.replace(/\/$/, "");
 
+		var hash = window.location.hash;
+
 		if(url.indexOf(RELATIVE_PATH.slice(1)) !== -1) {
 			url = url.slice(RELATIVE_PATH.length);
 		}
@@ -67,7 +68,12 @@ var ajaxify = {};
 				}
 				
 				app.process_page();
-				jQuery('#content, #footer').stop(true, true).fadeIn(200);
+				
+				jQuery('#content, #footer').stop(true, true).fadeIn(200, function() {
+					console.log('done loading');
+					app.scrollToPost(hash.substr(1));
+				});
+
 			}, url, template);
 
 			return true;

public/src/app.js

@@ -295,6 +295,74 @@ var socket,
 		}
 	}
 
+	app.addCommasToNumbers = function() {
+		$('.formatted-number').each(function(index, element) {
+			$(element).html(app.addCommas($(element).html()));
+		});
+	}
+
+	app.createNewPosts = function(data) {
+		data.posts[0].display_moderator_tools = 'none';
+		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data),
+			uniqueid = new Date().getTime(),
+			tempContainer = jQuery('<div id="' + uniqueid + '"></div>')
+				.appendTo("#post-container")
+				.hide()
+				.append(html)
+				.fadeIn('slow');
+
+		for(var x=0,numPosts=data.posts.length;x<numPosts;x++) {
+			socket.emit('api:post.privileges', data.posts[x].pid);
+		}
+
+		tempContainer.replaceWith(tempContainer.contents());
+		infiniteLoaderActive = false;
+
+		app.populate_online_users();
+		app.addCommasToNumbers();
+	}
+
+	app.infiniteLoaderActive = false;
+
+	app.loadMorePosts = function(tid, callback) {
+		if(app.infiniteLoaderActive)
+			return;
+		infiniteLoaderActive = true;
+		socket.emit('api:topic.loadMore', {	
+			tid: tid, 
+			after: document.querySelectorAll('#post-container li[data-pid]').length 
+		}, function(data) {
+			app.infiniteLoaderActive = false;
+			if(data.posts.length) {
+				app.createNewPosts(data);
+				if(callback)
+					callback();
+			}
+		});
+	}
+
+	app.scrollToPost = function(pid) {
+		if(!pid)
+			return;
+		var container = $(document.body),
+			scrollTo = $('#post_anchor_' + pid);
+
+		if(!scrollTo.length) {
+			var tid = $('#post-container').attr('data-tid');
+			app.loadMorePosts(tid, function() {
+				app.scrollToPost(pid);
+			});
+			return;
+		}
+		
+		//container.scrollTop(
+		//	scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height()
+		//);
+		container.animate({
+			scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() - $('#header-menu').height()
+		});
+	}
+
 	jQuery('document').ready(function() {
 		addTouchEvents();
 	});

public/src/forum/topic.js

@@ -8,18 +8,12 @@
 			deleted: templates.get('deleted'),
 			pinned: templates.get('pinned')
 		},
-		topic_name = templates.get('topic_name'),
+		topic_name = templates.get('topic_name');
-		infiniteLoaderActive = false;
 	
-	function addCommasToNumbers() {
-		$('.formatted-number').each(function(index, element) {
-			$(element).html(app.addCommas($(element).html()));
-		});
-	}
 
 	jQuery('document').ready(function() {
 
-		addCommasToNumbers();
+		app.addCommasToNumbers();
 		
 		var	room = 'topic_' + tid,
 			adminTools = document.getElementById('thread-tools');
@@ -211,12 +205,8 @@
 			var	windowHeight = document.body.offsetHeight - $(window).height(),
 				half = windowHeight / 2;
 
-			if (document.body.scrollTop > half && !infiniteLoaderActive) {
+			if (document.body.scrollTop > half && !app.infiniteLoaderActive) {
-				infiniteLoaderActive = true;
+				app.loadMorePosts(tid);
-				socket.emit('api:topic.loadMore', {
-					tid: tid,
-					after: document.querySelectorAll('#post-container li[data-pid]').length
-				});
 			}
 		});
 	});
@@ -331,26 +321,7 @@
 		adjust_rep(-1, data.pid, data.uid);
 	});
 
-	socket.on('event:new_post', function(data) {
+	socket.on('event:new_post', app.createNewPosts);
-		data.posts[0].display_moderator_tools = 'none';
-		var html = templates.prepare(templates['topic'].blocks['posts']).parse(data),
-			uniqueid = new Date().getTime(),
-			tempContainer = jQuery('<div id="' + uniqueid + '"></div>')
-				.appendTo("#post-container")
-				.hide()
-				.append(html)
-				.fadeIn('slow');
-
-		for(var x=0,numPosts=data.posts.length;x<numPosts;x++) {
-			socket.emit('api:post.privileges', data.posts[x].pid);
-		}
-
-		tempContainer.replaceWith(tempContainer.contents());
-		infiniteLoaderActive = false;
-
-		app.populate_online_users();
-		addCommasToNumbers();
-	});
 
 	socket.on('event:topic_deleted', function(data) {
 		if (data.tid === tid && data.status === 'ok') {

public/templates/topic.tpl

@@ -15,12 +15,12 @@
 	</ul>
 </div>
 
-<ul id="post-container" class="post-container container">
+<ul id="post-container" class="post-container container" data-tid="{topic_id}">
 	
 
 
 	<!-- BEGIN main_posts -->
-		<a name="{main_posts.pid}"></a>
+		<a id="post_anchor_{main_posts.pid}" name="{main_posts.pid}"></a>
 		<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-deleted="{main_posts.deleted}">
 			<div class="span12">
 				<div class="post-block">
@@ -78,7 +78,7 @@
 	<!-- END main_posts -->
 
 	<!-- BEGIN posts -->
-		<a name="{posts.pid}"></a>
+		<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>
 		<li class="row-fluid post-row" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
 			<div class="span1 profile-image-block hidden-phone hidden-tablet">
 				<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->

src/posts.js

@@ -24,9 +24,7 @@ var	RDB = require('./redis.js'),
 					callback(posts);
 				});
 			} else {
-				callback({
+				callback([]);
-					error: 'no-posts'
-				});
 			}
 		});
 	}

src/topics.js

@@ -41,6 +41,8 @@ marked.setOptions({
 
 	Topics.getTopicPosts = function(tid, start, end, current_user, callback) {
 		posts.getPostsByTid(tid, start, end, function(postData) {
+			if(Array.isArray(postData) && !postData.length)
+				return callback([]);
 			
 			function getFavouritesData(next) {
 				var pids = [];
@@ -279,8 +281,7 @@ marked.setOptions({
 			}
 
 			function getTopicPosts(next) {
-				Topics.getTopicPosts(tid, 0, -1, current_user, function(topicPosts, privileges) {
+				Topics.getTopicPosts(tid, 0, 10, current_user, function(topicPosts, privileges) {
-					
 					next(null, topicPosts);
 				});
 			}

src/websockets.js

@@ -556,14 +556,15 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }),
 			}
 		});
 
-		socket.on('api:topic.loadMore', function(data) {
+		socket.on('api:topic.loadMore', function(data, callback) {
 			var	start = data.after,
 				end = start + 10;
 			
 			topics.getTopicPosts(data.tid, start, end, uid, function(posts) {
-				io.sockets.in('topic_' + data.tid).emit('event:new_post', {
+				//io.sockets.in('topic_' + data.tid).emit('event:new_post', {
-					posts: posts
+				//	posts: posts
-				});
+				//});
+				callback({posts:posts});
 			});
 		});