MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Added comments to javascript code.

Browse Source
This commit is contained in:
K. Nobel
2017-02-03 13:19:00 +01:00
parent 1c53eab2fa
commit 7cc6450e6a
3 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/public/js/friendButtons.js
View File

@@ -1,6 +1,8 @@
// Show the right friendship buttonsto the user.
function placeFriendButtons() {
$.post("API/getFriendshipStatus.php", { usr: userID })
.done(function(data) {
//save the friendship status
var friendshipStatus = data;
var $buttonContainer = $("div.friend-button-container");
$("#start-profile-chat").hide();
@@ -22,6 +24,7 @@ function placeFriendButtons() {
text1 = "Bevriend";
icon1 = "fa-handshake-o";
break;
// Users are friends.
case "1":
value1 = userID;
class1 = "green";
@@ -32,12 +35,14 @@ function placeFriendButtons() {
text2 = "Verwijder";
icon2 = "fa-times";
break;
// This user sent request.
case "2":
value1 = "delete";
class1 = "red";
text1 = "Trek verzoek in";
icon1 = "fa-cross";
break;
// Other user sent request.
case "3":
value1 = "accept";
class1 = "green";
@@ -50,6 +55,7 @@ function placeFriendButtons() {
break;
}
// Append buttons to the container.
$buttonContainer.append(
"<button class='"+ class1 +" friend-button' value='"+ value1 +"'>" +
"<i class='fa "+ icon1 +"'></i> " + text1 +
@@ -59,7 +65,7 @@ function placeFriendButtons() {
"<i class='fa "+ icon2 +"'></i> " + text2 +
"</button>");
// Gets triggered when a friend button is triggered.
$buttonContainer.children().click(function() {
if (isNaN(this.value))
editFriendship(userID, this.value);

5
website/public/js/groupButtons.js
View File

@@ -3,16 +3,20 @@ function placeGroupButtons() {
.done(function(data) {
var $buttonContainer = $("div.group-button-container");
// Append the right group button to the button container.
// When user is not a member
if(data == 'none') {
$buttonContainer.append(
"<button class='green group-button' value='request'>" +
"<i class='fa fa-plus'></i> Voeg toe" +
"</button>");
// when user sent a request to become a member.
} else if(data == 'request') {
$buttonContainer.append(
"<button class='red group-button' value='none'>" +
"<i class='fa fa-times'></i> Trek verzoek in" +
"</button>");
// When user is a member of the group.
} else {
$buttonContainer.append(
"<button class='red group-button' value='none'>" +
@@ -20,6 +24,7 @@ function placeGroupButtons() {
"</button>");
}
// Gets triggered when a group button is clicked.
$buttonContainer.children().click(function() {
$.post("API/editMembership.php", { grp: groupID, role: this.value })
.done(function() {

44
website/public/js/masonry.js
View File

@@ -1,3 +1,4 @@
// Vertical margin between two posts.
margin = 20;
// scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
@@ -11,9 +12,12 @@ function scrollbarMargin(width, overflow) {
});
}
// Get post from the server.
function requestPost(postID) {
// Make the modal view visible.
$(".modal").show();
// Send get request to the server to load the post.
$.get("API/loadPost.php", { postID : postID }).done(function(data) {
$('.modal-default').hide();
var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
@@ -23,11 +27,14 @@ function requestPost(postID) {
});
}
// Create a new post.
function postPost() {
title = $("input.newpost[name='title']").val();
content = $("textarea.newpost[name='content']").val();
// Masonrymode 2: when on group page and user is an admin.
if (masonryMode == 2) {
// Create the new group post.
$.post("API/postPost.php", { title: title,
content : content,
group : groupID })
@@ -42,6 +49,7 @@ function postPost() {
}
});
} else {
// Create the new user post.
$.post("API/postPost.php", { title: title,
content : content })
.done(function(data) {
@@ -68,6 +76,7 @@ var postAmount = 0;
var noposts = false;
$(document).ready(function () {
// Initialise variables for masonry.
windowWidth = $(window).width();
columnCount = Math.floor($(".posts").width() / 250);
columns = new Array(columnCount);
@@ -78,6 +87,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
// Infinite scroll.
window.onscroll = function(ev) {
if($(window).scrollTop() + $(window).height() == $(document).height() ) {
loadMorePosts(userID, groupID, postAmount, postLimit);
@@ -85,6 +95,7 @@ $(window).on("load", function() {
};
});
// Hide modal view from the screen.
function closeModal() {
$(".modal").hide();
scrollbarMargin(0, 'auto');
@@ -92,23 +103,30 @@ function closeModal() {
$('.modal-default').show();
}
// Will fire when user resizes the window.
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizeFinished = setTimeout(function() {
// Check if the width of the screen changed.
if ($(window).width() != windowWidth) {
// Save width.
windowWidth = $(window).width();
// Check if there fit more or less columns in the new width.
if (columnCount != Math.floor($(".posts").width() / 250)) {
columnCount = Math.floor($(".posts").width() / 250);
// Respawn the masonry grid.
masonry(masonryMode);
}
}
}, 250);
});
// Select the container for masonry.
var $container = $(".posts");
// Spawn the masonry grid.
function masonry(mode) {
// save the masonry mode.
masonryMode = mode;
$container.children().remove();
@@ -116,10 +134,7 @@ function masonry(mode) {
noposts = false;
postAmount = 0;
/*
* Initialise columns.
*/
// Initialise columns.
for (i = 0; i < columnCount; i++) {
$column = $("<div class=\"column\">");
$column.width(100/columnCount + "%");
@@ -127,11 +142,13 @@ function masonry(mode) {
columns[i] = [0, $column];
}
// Place the form for new posts.
if(mode > 0) {
$postInput = $("<div class=\"post platform\">");
$form = $("<form class=\"newpost\" action=\"API/postPost.php\" method=\"post\" onsubmit=\"postPost(); return false;\">");
$postInput.append($form);
//Add extra input for group posts.
if(mode == 2) {
$form.append($("<input class=\"newpost\" type=\"hidden\" name=\"group\" value=\"" + groupID + "\">"));
}
@@ -144,17 +161,11 @@ function masonry(mode) {
columns[0][0] = $postInput.height() + margin;
}
/*
* Function will find the column with the shortest height.
*/
/*
* Get the posts from the server.
*/
// Get the posts from the server.
loadMorePosts(userID, groupID, 0, postLimit);
}
// Find the column with the shortest hight.
function getShortestColumn(columns) {
column = columns[0];
@@ -166,17 +177,20 @@ function getShortestColumn(columns) {
return column;
}
// Load certain range of posts.
function loadMorePosts(uID, gID, offset, limit) {
if (noposts) {
return;
}
// Get a list of posts from the server.
$.post("API/getPosts.php", { usr : uID,
grp : gID,
offset : offset,
limit : limit})
.done(function(data) {
if (!data) {
// No posts were found, show noposts bar to user.
$('.noposts').show();
noposts = true;
return;
@@ -184,9 +198,7 @@ function loadMorePosts(uID, gID, offset, limit) {
posts = JSON.parse(data);
/*
* Rearange the objects.
*/
// Rearange the objects.
$.each(posts, function() {
$post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
$post.append($("<h2>").html(this["title"]));