Added comments to javascript code.

website/public/js/friendButtons.js

@@ -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);

website/public/js/groupButtons.js

@@ -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() {

website/public/js/masonry.js

@@ -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;
     }
 
-    /*
+    // Get the posts from the server.
-     * Function will find the column with the shortest height.
-     */
-
-
-    /*
-     * 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"]));