Scroll on user page to get older posts.

assets/js/components/posts/interface.js

@@ -10,14 +10,20 @@ ComunicWeb.components.posts.interface = {
 	 * Get user posts
 	 * 
 	 * @param {int} userID The ID of the target user
+	 * @param {int} lastPostID The ID of the last post loaded
 	 * @param {function} callback Callback function
 	 */
-	get_user: function(userID, callback){
+	get_user: function(userID, lastPostID, callback){
+
+		//Load the previous posts to the loaded post if required
+		if(lastPostID > 0)
+			lastPostID = lastPostID-1;
 
 		//Prepare the API request
 		var APIuri = "posts/get_user";
 		var params = {
-			userID: userID
+			userID: userID,
+			startFrom: lastPostID
 		};
 
 		//Make the request

assets/js/pages/userPage/posts.js

@@ -6,6 +6,16 @@
 
 ComunicWeb.pages.userPage.posts = {
 
+	/**
+	 * Last displayed post ID
+	 */
+	_last_post_id: 0,
+
+	/**
+	 * Specify if post loading is locked
+	 */
+	_load_post_locked: false,
+
 	/**
 	 * Display the posts
 	 * 
@@ -15,6 +25,10 @@ ComunicWeb.pages.userPage.posts = {
 	 */
 	display: function(userInfos, params, target){
 
+		//Reset last post id
+		this._last_post_id = 0;
+		this._load_post_locked = true;
+
 		//Create posts blocks
 		var postsBlock = createElem2({
 			appendTo: target,
@@ -36,8 +50,47 @@ ComunicWeb.pages.userPage.posts = {
 		});
 		loadingMsg.style.textAlign = "center";
 
+		//Trigger an event the the user reach the end of the page
+		$(window).scroll(function(){
+			
+			//Cancel event if it came by error
+			if(!postsBlock.isConnected)
+				return false;
+			
+			//Cancel event if the page is locked
+			if(ComunicWeb.pages.userPage.posts._load_post_locked !== false)
+				return;
+		
+			//Check if we reached the bottom of the page
+			if($(window).scrollTop() + $(window).height() < $(document).height() - 50){
+				return;
+			}
+
+			//Lock the loading state
+			ComunicWeb.pages.userPage.posts._load_post_locked = true;
+
+			//Load next posts
+			ComunicWeb.pages.userPage.posts._load_posts(userInfos, postsBody);
+		});
+
+		//Load the posts
+		this._load_posts(userInfos, postsBody, function(){
+			loadingMsg.remove();
+		});
+		
+	},
+
+	/**
+	 * Load the posts for the user
+	 * 
+	 * @param {Object} userInfos Informations about the user to load
+	 * @param {HTMLElement} target The target for the posts
+	 * @param {function} callback What to do once the posts have been loaded
+	 */
+	_load_posts(userInfos, target, callback){
+
 		//Get the posts from the API
-		ComunicWeb.components.posts.interface.get_user(userInfos.userID, function(result){
+		ComunicWeb.components.posts.interface.get_user(userInfos.userID, this._last_post_id, function(result){
 
 			//Check for errors
 			if(result.error){
@@ -46,15 +99,20 @@ ComunicWeb.pages.userPage.posts = {
 			}
 			else {
 
-				//Empty the target
-				emptyElem(postsBody);
-
 				//Show the posts
-				ComunicWeb.pages.userPage.posts._show(result, postsBody);
+				ComunicWeb.pages.userPage.posts._show(result, target);
 
 			}
+
+			//Unlock posts loading 
+			ComunicWeb.pages.userPage.posts._load_post_locked = false;
+
+			//Call callback (if any)
+			if(callback)
+				callback();
+
 		});
-		
+
 	},
 
 	/**
@@ -72,10 +130,13 @@ ComunicWeb.pages.userPage.posts = {
 			//Display post
 			ComunicWeb.components.posts.ui.display_post(posts[i], target);
 
+			//Update last post ID (if small than previous one or if it has not been initialized yet)
+			this._last_post_id = posts[i].ID;
+
 		}
 
 		//Check if there is not any posts
-		if(target.children.length == 0){
+		if(posts.length == 0 && this._last_post_id == 0){
 			this._no_posts_msg(target);
 		}