Social network theme minor changes

bl-themes/social-network/css/style.css

@@ -85,6 +85,10 @@ blockquote {
 	height: 64px;
 }
 
+#jsloadMorePosts {
+	cursor: pointer;
+}
+
 /* Image Gallery */
 .image-gallery img {
 	width: 120px;

bl-themes/social-network/index.php

@@ -34,6 +34,11 @@
 		</div>
 	</div>
 
+	<footer class="container">
+	<p class="float-right"><a href="#">Back to top</a></p>
+	<p>© 2017-2018 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
+	</footer>
+
 	<!-- Javascript -->
 	<?php
 		// Include Jquery file from Bludit Core
@@ -48,15 +53,25 @@
 	?>
 
 	<script>
-		// Apply to all galleries
-		var galleries = document.getElementsByClassName("image-gallery");
-		for(let i = 0 ; i < galleries.length; i++){
-			lightGallery(galleries[i],{
-				thumbnail:true,
-				share: false,
-				download: true
-			})
+		// Load Light Gallery to all .image-gallery
+		function loadGallery() {
+			var galleries = document.getElementsByClassName("image-gallery");
+			for(let i = 0 ; i < galleries.length; i++){
+				lightGallery(galleries[i],{
+					thumbnail:true,
+					share: false,
+					download: true
+				})
+			}
 		}
+
+		// After page is loaded
+		window.onload = function() {
+			// Get all users
+			getUsers();
+			// Load Light Gallery
+			loadGallery()
+		};
 	</script>
 
 	<!-- Load Bludit Plugins: Site Body End -->

bl-themes/social-network/php/home.php

@@ -30,27 +30,72 @@
 <script>
 
 // Global variables
-var _apiToken = "<?php echo $apiToken ?>"
-var _userToken = "<?php echo $user->tokenAuth() ?>"
+var _apiToken = "<?php echo $apiToken ?>";
+var _userToken = "<?php echo $user->tokenAuth() ?>";
 var _pageUUID = Date.now().toString(36) + Math.random().toString(36).substr(2, 15);
+var _pageNumber = 1;
+var _itemsPerPage = <?php echo $site->itemsPerPage() ?>;
+var _users = {}
 
-function insertPostInTimeline(args) {
+function getUsers() {
+	console.log("Getting users.");
+	fetch("http://localhost:8000/api/users?token="+_apiToken, {
+		method: "GET"
+	}).then(function(response) {
+		return response.json();
+	}).then(function(data) {
+		console.log("Getting user. Response >");
+		console.log(data);
+		if (data.status=="0") {
+			_users = data.data;
+		}
+	});
+}
+
+function getPosts() {
+	console.log("Getting posts.");
+	_pageNumber = _pageNumber + 1;
+	fetch("http://localhost:8000/api/pages?token="+_apiToken+"&pageNumber="+_pageNumber+"&numberOfItems="+_itemsPerPage, {
+		method: "GET"
+	}).then(function(response) {
+		return response.json();
+	}).then(function(data) {
+		console.log("Getting posts. Response >");
+		console.log(data);
+		if (data.status=="0") {
+			var posts = data.data;
+			if (posts.length > 0) {
+				for (var i = 0; i < posts.length; i++) {
+					insertPostInTimeline(posts[i], false);
+				}
+			}
+		}
+	}).then(function() {
+		loadGallery();
+	});
+}
+
+function insertPostInTimeline(args, beginning=true) {
+	console.log("Insert post in timeline.");
 	const postTemplate = `
 	<div class="card my-2 p-2">
 		<div class="card-body">
-			<img class="float-left rounded-circle" style="width: 48px" src="${args.srcProfilePicture}" />
+			<img class="float-left rounded-circle" style="width: 48px" src="${_users[args.username].profilePicture}" />
 			<div style="padding-left: 56px">
 				<p class="mb-2 text-muted">
-					@${args.nickname} - ${args.date}
+					@${_users[args.username].nickname} - ${args.date}
 				</p>
 				${args.content}
 			</div>
 		</div>
 	</div>
 	`;
-	console.log(postTemplate);
 	var listOfPosts = document.getElementById("jslistOfPosts");
-	listOfPosts.innerHTML = postTemplate + listOfPosts.innerHTML;
+	if (beginning) {
+		listOfPosts.innerHTML = postTemplate + listOfPosts.innerHTML;
+	} else {
+		listOfPosts.innerHTML = listOfPosts.innerHTML + postTemplate;
+	}
 }
 
 function getPost(key) {
@@ -63,8 +108,6 @@ function getPost(key) {
 		console.log("Getting post. Response >");
 		console.log(data);
 		if (data.status=="0") {
-			data.data.nickname = "<?php echo $user->nickname() ?>";
-			data.data.srcProfilePicture = "<?php echo $user->profilePicture() ?>";
 			insertPostInTimeline(data.data);
 		}
 	});
@@ -139,7 +182,6 @@ document.getElementById("jspostButton").onclick = function(event) {
 	document.getElementById("jspreviewImages").innerHTML = "";
 }
 
-
 </script>
 <?php endif; ?>
 
@@ -187,3 +229,9 @@ document.getElementById("jspostButton").onclick = function(event) {
 	</div>
 	<?php endforeach ?>
 </div>
+
+<div id="jsloadMorePosts" onclick="getPosts()" class="card my-2 p-2">
+	<div class="card-body text-center">
+	<p class="m-0">Load more posts</p>
+	</div>
+</div>