add infinite scroll on profile

website/public/API/getPosts.php

@@ -1,22 +1,24 @@
 <?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');
 }
 
 require_once ("../../queries/post.php");
 require_once ("../../queries/nicetime.php");
 
 if(empty($_POST["usr"])) {
-    $posts = selectAllPosts(0, $_POST["grp"]);
+    $posts = selectSomePosts(0, $_POST["grp"], $_POST["offset"], $_POST["limit"]);
 } else {
-    $posts = selectAllPosts($_POST["usr"], 0);
+    $posts = selectSomePosts($_POST["usr"], 0, $_POST["offset"], $_POST["limit"]);
 }
 
 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++) {
@@ -24,3 +26,5 @@ for($i = 0; $i < sizeof($results); $i++) {
     }
 
     echo json_encode($results);
+}
+

website/public/js/masonry.js

@@ -45,6 +45,21 @@ 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 () {
         $(".modal").hide();
@@ -52,21 +67,28 @@ $(window).on("load", function() {
         $('#modal-response').hide();
         $('.modal-default').show();
     });
+
+    // http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
+    // $(window).on("scroll", function () {
+    //     if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
+    //         loadMorePosts(userID, groupID, postAmount, postLimit);
+    //     }
+    // });
+    window.onscroll = function(ev) {
+        if($(window).scrollTop() + $(window).height() == $(document).height() ) {
+            loadMorePosts(userID, groupID, postAmount, postLimit);
+        }
+    };
 });
 
-var masonryMode = 0;
-var windowWidth = $(window).width();
-var oldColumnCount = Math.floor($(".posts").width() / 250);
-
-
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
         if ($(window).width() != windowWidth) {
             windowWidth = $(window).width();
 
-            if (oldColumnCount != Math.floor($(".posts").width() / 250)) {
+            if (columnCount != Math.floor($(".posts").width() / 250)) {
-                oldColumnCount = Math.floor($(".posts").width() / 250);
+                columnCount = Math.floor($(".posts").width() / 250);
                 masonry(masonryMode);
             }
         }
@@ -78,12 +100,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\">");
@@ -112,6 +132,14 @@ function masonry(mode) {
     /*
      * Function will find the column with the shortest height.
      */
+
+
+    /*
+     * Get the posts from the server.
+     */
+    loadMorePosts(userID, groupID, 0, postLimit);
+}
+
 function getShortestColumn(columns) {
     column = columns[0];
 
@@ -123,11 +151,25 @@ function masonry(mode) {
     return column;
 }
 
-    /*
+function loadMorePosts(uID, gID, offset, limit) {
-     * Get the posts from the server.
+    if (noposts) {
-     */
+        return;
-    $.post("API/getPosts.php", { usr : userID, grp : groupID })
+    }
+
+    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);
 
             /*
@@ -145,5 +187,6 @@ function masonry(mode) {
                 shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
             });
         });
-}
 
+    postAmount += limit;
+}

website/public/styles/profile.css

@@ -109,6 +109,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">