website/public/API/getPosts.php

@@ -1,7 +1,10 @@
 <?php
 
-if(empty($_POST["usr"]) and empty($_POST["grp"])) {
+if(!isset($_POST["offset"]) or !isset($_POST["limit"])) {
-    header('HTTP/1.1 500 Non enough arguments');
+    header('HTTP/1.1 500 Not enough arguments');
+}
+if(!isset($_POST["usr"]) and !isset($_POST["grp"])) {
+    header('HTTP/1.1 500 Not enough arguments');
 }
 
 session_start();
@@ -12,24 +15,23 @@ require_once("../../queries/user.php");
 
 if (isset($_SESSION["userID"]) &&
     getRoleByID($_SESSION["userID"]) != 'banned') {
-
+    if(empty($_POST["usr"])) {
-    if (empty($_POST["usr"])) {
+        $posts = selectSomePosts(0, $_POST["grp"], $_POST["offset"], $_POST["limit"]);
-        $posts = selectAllPosts(0, $_POST["grp"]);
     } else {
-        $posts = selectAllPosts($_POST["usr"], 0);
+        $posts = selectSomePosts($_POST["usr"], 0, $_POST["offset"], $_POST["limit"]);
     }
 
-    if (!$posts) {
+    if(!$posts) {
-        header('HTTP/1.1 500 Query failed');
+        echo false;
+    } else {
+        $results = $posts->fetchAll(PDO::FETCH_ASSOC);
+
+        for($i = 0; $i < sizeof($results); $i++) {
+            $results[$i]["nicetime"] = nicetime($results[$i]["creationdate"]);
+        }
+
+        echo json_encode($results);
     }
-
-    $results = $posts->fetchAll(PDO::FETCH_ASSOC);
-
-    for ($i = 0; $i < sizeof($results); $i++) {
-        $results[$i]["nicetime"] = nicetime($results[$i]["creationdate"]);
-    }
-
-    echo json_encode($results);
 } else {
     header('HTTP/1.0 403 Forbidden');
-}
+}

website/public/js/header.js

@@ -11,7 +11,8 @@ $(document).ready(function() {
 
             // Add cookie so the menu stays open on other pages
             if (window.innerWidth > 1080) {
-                $("#chat-history").width("calc(100% - 587px)");
+                $("#chat-history").css("margin-right", "266px");
+                $("#chat-history").css("width", "calc(100% - 512px - 75px)");
                 document.cookie = "menu=open; path=/";
             } else {
                 document.cookie = "menu=closed; path=/";
@@ -22,7 +23,8 @@ $(document).ready(function() {
             $("#notification-center").css("display", "none");
 
             if (window.innerWidth > 1080) {
-                $("#chat-history").width("calc(100% - 331px)");
+                $("#chat-history").css("margin-right", "10px");
+                $("#chat-history").css("width", "calc(100% - 256px - 85px)");
             } else {
                 // Make the menu invisible and move the content to the right.
                 $("#contact-menu").css("display", "none");
@@ -43,6 +45,7 @@ $(document).ready(function() {
 
         // Add cookie so the menu stays open on other pages
         if (window.innerWidth > 1080) {
+            $("#chat-history").css("margin-right", "266px");
             $("#chat-history").width("calc(100% - 587px)");
             document.cookie = "menu=open; path=/";
         } else {

website/public/js/main.js

@@ -94,14 +94,4 @@ function showGroups(groups, list) {
     } else {
         return false;
     }
-}
+}
-
-$(document).ready(function() {
-    $("body").delegate("textarea[maxlength]", "keydown", function() {
-        if ($(this).val().length / .9 >= $(this).attr("maxlength")) {
-            $(this).next().text($(this).val().length + "/" + $(this).attr("maxlength"));
-        } else {
-            $(this).next().text("");
-        }
-    });
-});

website/public/js/masonry.js

@@ -45,8 +45,30 @@ function postPost() {
 
 }
 
+var masonryMode = 0;
+var windowWidth;
+var columnCount;
+var columns;
+var postLimit;
+var postAmount = 0;
+var noposts = false;
+
+$(document).ready(function () {
+    windowWidth = $(window).width();
+    columnCount = Math.floor($(".posts").width() / 250);
+    columns = new Array(columnCount);
+    postLimit = columnCount * 7;
+});
+
 $(window).on("load", function() {
     $(".modal-close").click(function (){closeModal()});
+
+    // http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
+    window.onscroll = function(ev) {
+        if($(window).scrollTop() + $(window).height() == $(document).height() ) {
+            loadMorePosts(userID, groupID, postAmount, postLimit);
+        }
+    };
 });
 
 function closeModal() {
@@ -56,15 +78,16 @@ function closeModal() {
     $('.modal-default').show();
 }
 
-var masonryMode = 0;
-var windowWidth = $(window).width();
-
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
         if ($(window).width() != windowWidth) {
             windowWidth = $(window).width();
-            masonry(masonryMode);
+
+            if (columnCount != Math.floor($(".posts").width() / 250)) {
+                columnCount = Math.floor($(".posts").width() / 250);
+                masonry(masonryMode);
+            }
         }
     }, 250);
 });
@@ -74,12 +97,10 @@ var $container = $(".posts");
 function masonry(mode) {
     masonryMode = mode;
     $container.children().remove();
-    columnCount = Math.floor($(".posts").width() / 250);
 
     /*
      * Initialise columns.
      */
-    var columns = new Array(columnCount);
 
     for (i = 0; i < columnCount; i++) {
         $column = $("<div class=\"column\">");
@@ -108,38 +129,61 @@ function masonry(mode) {
     /*
      * Function will find the column with the shortest height.
      */
-    function getShortestColumn(columns) {
-        column = columns[0];
 
-        for (i = 1; i < columnCount; i++) {
-            if (column[0] > columns[i][0]) {
-                column = columns[i];
-            }
-        }
-        return column;
-    }
 
     /*
      * Get the posts from the server.
      */
-    $.post("API/getPosts.php", { usr : userID, grp : groupID })
+    loadMorePosts(userID, groupID, 0, postLimit);
-           .done(function(data) {
-               posts = JSON.parse(data);
-
-               /*
-                * Rearange the objects.
-                */
-               $.each(posts, function() {
-                   $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
-                   $post.append($("<h2>").html(this["title"]));
-                   $post.append($("<p>").html(fancyText(this["content"])));
-                   $post.append($("<p class=\"subscript\">").text(this["nicetime"]));
-                   $post.append($("<p class=\"subscript\">").text("comments: " + this["comments"] + ", niet slechts: " + this["niet_slechts"]));
-
-                   shortestColumn = getShortestColumn(columns);
-                   shortestColumn[1].append($post);
-                   shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
-               });
-           });
 }
 
+function getShortestColumn(columns) {
+    column = columns[0];
+
+    for (i = 1; i < columnCount; i++) {
+        if (column[0] > columns[i][0]) {
+            column = columns[i];
+        }
+    }
+    return column;
+}
+
+function loadMorePosts(uID, gID, offset, limit) {
+    if (noposts) {
+        return;
+    }
+
+    console.log(uID, gID, offset, limit);
+
+
+    $.post("API/getPosts.php", { usr : uID,
+                                 grp : gID,
+                                 offset : offset,
+                                 limit : limit})
+        .done(function(data) {
+            if (!data) {
+                $('.noposts').show();
+                noposts = true;
+                return;
+            }
+
+            posts = JSON.parse(data);
+
+            /*
+             * Rearange the objects.
+             */
+            $.each(posts, function() {
+                $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
+                $post.append($("<h2>").html(this["title"]));
+                $post.append($("<p>").html(fancyText(this["content"])));
+                $post.append($("<p class=\"subscript\">").text(this["nicetime"]));
+                $post.append($("<p class=\"subscript\">").text("comments: " + this["comments"] + ", niet slechts: " + this["niet_slechts"]));
+
+                shortestColumn = getShortestColumn(columns);
+                shortestColumn[1].append($post);
+                shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
+            });
+        });
+
+    postAmount += limit;
+}

website/public/js/menu.js

@@ -6,11 +6,7 @@ var updatingMenus = 0;
 
 // On document load, load menus and loops loading menus every 10 seconds.
 $(document).ready(function() {
-    updatingMenus = 4;
+    updateMenus();
-    loadMenuFriends(5);
-    loadNotificationFriends();
-    loadUnreadMessages();
-    loadMenuGroups();
     setInterval(updateMenus, 10000);
 });
 
@@ -18,7 +14,6 @@ $(document).ready(function() {
 // Update the menu  and notification items.
 function updateMenus() {
     if (updatingMenus <= 0) {
-        updatingMenus = 4;
         loadMenuFriends(5);
         loadNotificationFriends();
         loadUnreadMessages();
@@ -27,76 +22,105 @@ function updateMenus() {
 }
 
 
-// Get, every 3 seconds, the friends and insert them in the menu.
+// Get the friends and insert them in the menu.
 function loadMenuFriends(limit) {
+    updatingMenus ++;
     $.post(
         "API/loadFriends.php",
         {
             limit: 5
         }
     ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#friends-menu-section").hide();
+        } else {
+            $("#friends-menu-section").show();
+        }
         if (menuFriendsData != data) {
             menuFriendsData = data;
-            if (showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
+            if (!showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
-                $("#friends-menu-section").show();
-            } else {
                 $("#friends-menu-section").hide();
             }
         }
+    }).fail(function() {
+        $("#friends-menu-section").hide();
+    }).always(function() {
         updatingMenus --;
     });
 }
 
-// Get, every 3 seconds, the groups and insert them in the menu.
+// Get the groups and insert them in the menu.
 function loadMenuGroups() {
+    updatingMenus ++;
     $.post(
         "API/loadGroups.php",
         {
             limit: 5
         }
     ).done(function(data) {
+
+        if (data == "" || data == "[]") {
+            $("#groups-menu-section").hide();
+        } else {
+            $("#groups-menu-section").show();
+        }
         if (menuGroupsData != data) {
             menuGroupsData = data;
-            if (showGroups(data, "#menu-groups-list")) {
+            if (!showGroups(data, "#menu-groups-list")) {
-                $("#groups-menu-section").show();
-            } else {
                 $("#groups-menu-section").hide();
             }
         }
+    }).fail(function() {
+        $("#groups-menu-section").hide();
+    }).always(function() {
         updatingMenus --;
     });
 }
 
-// Get, every 3 seconds, the friends requests and insert them in the notification center.
+// Get the friends requests and insert them in the notification center.
 function loadNotificationFriends() {
+    updatingMenus ++;
     $.post(
         "API/loadFriendRequest.php"
     ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#friend-request-section").hide();
+        } else {
+            $("#friend-request-section").show();
+        }
         if (notificationRequestsData != data) {
             notificationRequestsData = data;
-            if (showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
+            if (!showFriendsPlus(data, "#friend-requests-list", 5, "profile.php", "GET")) {
-                $("#friend-request-section").show();
-            } else {
                 $("#friend-request-section").hide();
             }
         }
+    }).fail(function() {
+        $("#friend-request-section").hide();
+    }).always(function() {
         updatingMenus --;
     });
 }
 
-// Get, every 3 seconds, the unread messages and insert them in the notification center.
+// Get the unread messages and insert them in the notification center.
 function loadUnreadMessages() {
+    updatingMenus ++;
     $.post(
         "API/loadChatNotifications.php"
     ).done(function(data) {
+        if (data == "" || data == "[]") {
+            $("#unread-messages-section").hide();
+        } else {
+            $("#unread-messages-section").show();
+        }
         if (notificationMessagesData != data) {
             notificationMessagesData = data;
-            if (showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
+            if (!showFriendsPlus(data, "#unread-chat-list", 5, "chat.php", "GET")) {
-                $("#unread-messages-section").show();
-            } else {
                 $("#unread-messages-section").hide();
             }
         }
+    }).fail(function() {
+        $("#unread-messages-section").hide();
+    }).always(function() {
         updatingMenus --;
     });
 }

website/public/styles/post-popup.css

@@ -14,7 +14,7 @@
 
 /* Modal Content/Box */
 .modal-content {
-    margin: 5% auto;
+    margin: 50px auto;
     width: 70%; /* Could be more or less, depending on screen size */
     overflow-y: auto;
 }

website/public/styles/profile.css

@@ -123,6 +123,11 @@ div.posts .post form textarea.newpost {
     font-size: 0.8em;
 }
 
+.noposts {
+    display: none;
+    text-align: center;
+}
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);

website/queries/post.php

@@ -46,6 +46,57 @@ function selectAllPosts($userID, $groupID) {
 
 }
 
+function selectSomePosts($userID, $groupID, $offset, $limit) {
+    $stmt = prepareQuery("
+        SELECT
+          `post`.`postID`,
+          `post`.`author`,
+          `title`,
+          CASE LENGTH(`post`.`content`) >= 150 AND `post`.`content` NOT LIKE '<img%'
+          WHEN TRUE THEN
+            CONCAT(LEFT(`post`.`content`, 150), '...')
+          WHEN FALSE THEN
+            `post`.`content`
+          END
+                                        AS `content`,
+          `post`.`creationdate`,
+          COUNT(DISTINCT `commentID`) AS `comments`,
+          COUNT(DISTINCT `niet_slecht`.`postID`) AS `niet_slechts`
+        FROM
+          `post`
+          LEFT JOIN
+          `niet_slecht`
+            ON
+              `post`.`postID` = `niet_slecht`.`postID`
+          LEFT JOIN
+          `comment`
+            ON
+              `post`.`postID` = `comment`.`postID`
+        WHERE
+          `post`.`author` = :userID AND
+          `groupID` IS NULL OR
+          `groupID` = :groupID
+        GROUP BY
+          `post`.`postID`
+        ORDER BY
+          `post`.`creationdate` DESC
+        LIMIT 
+          :offset, :limit
+    ");
+    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->bindParam(':groupID', $groupID , PDO::PARAM_INT);
+    $stmt->bindParam(':offset', intval($offset), PDO::PARAM_INT);
+    $stmt->bindParam(':limit', intval($limit), PDO::PARAM_INT);
+    if(!$stmt->execute()) {
+        return False;
+    }
+    if($stmt->rowCount() == 0) {
+        return False;
+    }
+    return $stmt;
+
+}
+
 function selectPostById($postID) {
     $stmt = prepareQuery("
         SELECT

website/views/profile.php

@@ -71,6 +71,10 @@
 
     </div>
 
+    <div class="noposts platform">
+        <p>Geen posts meer!</p>
+    </div>
+
     <div class="modal">
         <div class="modal-content platform">
             <div class="modal-close">