Can load older latest posts.

assets/js/components/posts/interface.js

@@ -17,7 +17,7 @@ ComunicWeb.components.posts.interface = {
 
 		//Load the previous posts to the loaded post if required
 		if(lastPostID > 0)
-			lastPostID = lastPostID-1;
+			lastPostID--;
 
 		//Prepare the API request
 		var APIuri = "posts/get_user";
@@ -34,13 +34,19 @@ ComunicWeb.components.posts.interface = {
 	/**
 	 * Get the list of the latest posts
 	 * 
+	 * @param {number} lastPostID The ID of the loast loaded post (or 0)
 	 * @param {function} callback What to do when we got response
 	 */
-	get_latest: function(callback){
+	get_latest: function(lastPostID, callback){
+
+		if(lastPostID > 0)
+			lastPostID--;
 
 		//Prepare API request
 		var APIuri = "posts/get_latest";
-		var params = {};
+		var params = {
+			startFrom: lastPostID
+		};
 
 		//Perform the request
 		ComunicWeb.common.api.makeAPIrequest(APIuri, params, true, callback);

assets/js/pages/latestPosts/main.js

@@ -6,6 +6,16 @@
 
 ComunicWeb.pages.latestPosts.main = {
 
+	/**
+	 * Last loaded post id
+	 */
+	_last_post_id: 0,
+
+	/**
+	 * Specify if post loading is locked or not
+	 */
+	_load_post_locked: false,
+
 	/**
 	 * Open latest posts page
 	 * 
@@ -14,33 +24,9 @@ ComunicWeb.pages.latestPosts.main = {
 	 */
 	open: function(params, target){
 		
-		//Perform a request on the server to get the list of latest posts
+		//Reset variables
-		ComunicWeb.components.posts.interface.get_latest(function(response){
+		this._last_post_id = 0;
-
+		this._load_post_locked = true;
-			//Check for errors - display a modal
-			if(response.error){
-				
-				//Display modal error
-				var error = ComunicWeb.common.messages.createCalloutElem("Error", "Could not get the list of the latest posts ! Please try to refresh the page...", "danger");
-				error.className += " latestPostsError";
-				target.appendChild(error);
-
-				return;
-			}
-
-			//Display the list of posts
-			ComunicWeb.pages.latestPosts.main._display_list(response, target);
-		});
-
-	},
-
-	/**
-	 * Display the list of latest post
-	 * 
-	 * @param {Object} list The list of posts to display
-	 * @param {HTMLElement} target The target for the posts
-	 */
-	_display_list: function(list, target){
 
 		//Create post list box
 		//Create row
@@ -71,10 +57,77 @@ ComunicWeb.pages.latestPosts.main = {
 			class: "box-body"
 		});
 
+		//Load the list
+		this._load_list(boxBody);
+
+		//Catch scroll event
+		$(window).scroll(function(){
+			
+			//Cancel event if it came by error
+			if(!boxBody.isConnected)
+				return;
+			
+			//Cancel event if the page is locked
+			if(ComunicWeb.pages.latestPosts.main._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.latestPosts.main._load_post_locked = true;
+
+			//Load next posts
+			ComunicWeb.pages.latestPosts.main._load_list(boxBody);
+		});
+	},
+
+	/**
+	 * Load the list of post
+	 * 
+	 * @param {HTMLElement} target The target
+	 */
+	_load_list: function(target){
+
+		//Perform a request on the server to get the list of latest posts
+		ComunicWeb.components.posts.interface.get_latest(this._last_post_id, function(response){
+
+			//Check for errors - display a modal
+			if(response.error){
+				
+				//Display modal error
+				var error = ComunicWeb.common.messages.createCalloutElem("Error", "Could not get the list of the latest posts ! Please try to refresh the page...", "danger");
+				error.className += " latestPostsError";
+				target.appendChild(error);
+			}
+			else
+				//Display the list of posts
+				ComunicWeb.pages.latestPosts.main._display_list(response, target);
+			
+			//Unlock posts loading
+			ComunicWeb.pages.latestPosts.main._load_post_locked = false;
+		});
+
+	},
+
+	/**
+	 * Display the list of latest post
+	 * 
+	 * @param {Object} list The list of posts to display
+	 * @param {HTMLElement} target The target for the posts
+	 */
+	_display_list: function(list, target){
+
 		//Process the list of posts
 		for (let index = 0; index < list.length; index++) {
+
 			//Display the post
-			ComunicWeb.components.posts.ui.display_post(list[index], boxBody);
+			ComunicWeb.components.posts.ui.display_post(list[index], target);
+
+			//Save its ID
+			this._last_post_id = list[index].ID;
 		}
 
 		//Check if there aren't any post to display