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

Merge branch 'kevin-prototype' into 'master'

Browse Source 
Added comments to javascript code

See merge request !211
This commit was merged in pull request #215.
This commit is contained in:
Lars van Hijfte
2017-02-03 21:19:50 +01:00
parent 833bfd3292 bcb01e3296
commit 1193078e8f
3 changed files with 45 additions and 20 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 = "Word vrienden";
icon1 = "fa-user-plus";
break;
// Users are friends.
case "1":
value1 = userID;
class1 = "green";
@@ -32,12 +35,14 @@ function placeFriendButtons() {
text2 = "Ontvriend";
icon2 = "fa-user-times";
break;
// This user sent request.
case "2":
value1 = "delete";
class1 = "red";
text1 = "Trek verzoek in";
icon1 = "fa-times";
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(
"<div><button class='"+ class1 +" fancy-button friend-button' value='"+ value1 +"'>" +
"<span>"+ text1 +"</span>" +
@@ -61,7 +67,7 @@ function placeFriendButtons() {
"<i class='fa fa-fw "+ icon2 +"'></i> " +
"</button></div>");
// Gets triggered when a friend button is triggered.
$buttonContainer.find("button").click(function() {
if (isNaN(this.value))
editFriendship(userID, this.value);

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

@@ -3,22 +3,28 @@ function placeGroupButtons() {
.done(function(data) {
var $buttonContainer = $("div.group-button-container");
if (data == 'none') {
// 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 fancy-button' value='request'>" +
"<span>Treed toe</span><i class='fa fa-plus'></i>" +
"</button>");
} else if (data == 'request') {
// when user sent a request to become a member.
} else if(data == 'request') {
$buttonContainer.append(
"<button class='red group-button fancy-button' value='none'>" +
"<span>Trek verzoek in</span><i class='fa fa-times'></i>" +
"</button>");
// When user is a member of the group.
} else if (data == 'admin') {
$buttonContainer.append(
"<button class='group-button fancy-button' value='admin'>" +
"<span>Instellingen</span><i class='fa fa-cogs'></i>" +
"</button>"
);
} else {
$buttonContainer.append(
"<button class='red group-button fancy-button' value='none'>" +
@@ -26,6 +32,7 @@ function placeGroupButtons() {
"</button>");
}
// Gets triggered when a group button is clicked.
$buttonContainer.children().click(function() {
if (this.value == 'admin') {
window.location.href='groupAdmin.php?groupID=' + groupID;

46
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();
console.log(masonryMode);
// 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 })
@@ -46,6 +53,7 @@ function postPost() {
}
});
} else {
// Create the new user post.
$.post("API/postPost.php", { title: title,
content : content })
.done(function(data) {
@@ -76,6 +84,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);
@@ -86,6 +95,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);
@@ -108,6 +118,7 @@ $(window).on("load", function() {
});
// Hide modal view from the screen.
function closeModal() {
$(".modal").hide();
scrollbarMargin(0, 'auto');
@@ -115,23 +126,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();
@@ -139,10 +157,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 + "%");
@@ -150,11 +165,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 + "\">"));
}
@@ -167,17 +184,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];
@@ -189,17 +200,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;
@@ -207,9 +221,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"]));