From 9b89058484246925d399075fda21d1a9acbbd22d Mon Sep 17 00:00:00 2001 From: Hendrik Date: Wed, 1 Feb 2017 14:05:04 +0100 Subject: [PATCH] add infinite scroll on profile --- website/public/API/getPosts.php | 28 ++++--- website/public/js/masonry.js | 117 ++++++++++++++++++++---------- website/public/styles/profile.css | 5 ++ website/queries/post.php | 51 +++++++++++++ website/views/profile.php | 4 + 5 files changed, 156 insertions(+), 49 deletions(-) diff --git a/website/public/API/getPosts.php b/website/public/API/getPosts.php index 620a707..850c5ea 100644 --- a/website/public/API/getPosts.php +++ b/website/public/API/getPosts.php @@ -1,26 +1,30 @@ 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); \ No newline at end of file diff --git a/website/public/js/masonry.js b/website/public/js/masonry.js index 53018d3..4c40aad 100644 --- a/website/public/js/masonry.js +++ b/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)) { - oldColumnCount = Math.floor($(".posts").width() / 250); + if (columnCount != 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 = $("
"); @@ -112,38 +132,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 }) - .done(function(data) { - posts = JSON.parse(data); - - /* - * Rearange the objects. - */ - $.each(posts, function() { - $post = $("
"); - $post.append($("

").html(this["title"])); - $post.append($("

").html(fancyText(this["content"]))); - $post.append($("

").text(this["nicetime"])); - $post.append($("

").text("comments: " + this["comments"] + ", niet slechts: " + this["niet_slechts"])); - - shortestColumn = getShortestColumn(columns); - shortestColumn[1].append($post); - shortestColumn[0] = shortestColumn[0] + $post.height() + margin; - }); - }); + loadMorePosts(userID, groupID, 0, postLimit); } +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 = $("

"); + $post.append($("

").html(this["title"])); + $post.append($("

").html(fancyText(this["content"]))); + $post.append($("

").text(this["nicetime"])); + $post.append($("

").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; +} \ No newline at end of file diff --git a/website/public/styles/profile.css b/website/public/styles/profile.css index 421e781..fd6f6fc 100644 --- a/website/public/styles/profile.css +++ b/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); diff --git a/website/queries/post.php b/website/queries/post.php index a175cda..db81892 100644 --- a/website/queries/post.php +++ b/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 '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 diff --git a/website/views/profile.php b/website/views/profile.php index c72c01b..2bb117f 100644 --- a/website/views/profile.php +++ b/website/views/profile.php @@ -71,6 +71,10 @@

+
+

Geen posts meer!

+
+