From 9a2e3e5351b9b1db87ffe1281276a2509ca2500a Mon Sep 17 00:00:00 2001 From: Pierre Date: Sun, 31 Dec 2017 18:51:46 +0100 Subject: [PATCH] Display text posts and images posts --- assets/css/components/posts/ui.css | 17 +++ assets/css/pages/userPage/main.css | 10 ++ assets/js/common/functionsSchema.js | 21 ++++ assets/js/components/posts/interface.js | 28 +++++ assets/js/components/posts/ui.js | 149 ++++++++++++++++++++++++ assets/js/pages/userPage/main.js | 6 +- assets/js/pages/userPage/posts.js | 44 ++++++- corePage/config/dev.config.php | 10 +- 8 files changed, 278 insertions(+), 7 deletions(-) create mode 100644 assets/css/components/posts/ui.css create mode 100644 assets/css/pages/userPage/main.css create mode 100644 assets/js/components/posts/interface.js create mode 100644 assets/js/components/posts/ui.js diff --git a/assets/css/components/posts/ui.css b/assets/css/components/posts/ui.css new file mode 100644 index 00000000..8362bf3d --- /dev/null +++ b/assets/css/components/posts/ui.css @@ -0,0 +1,17 @@ +/** + * Posts UI stylesheet + * + * @author Pierre HUBERT + */ + +.post .post_content { + text-align: center; +} + +.post .post-buttons { + text-align: center; +} + +.post .post-image { + width: 100%; +} \ No newline at end of file diff --git a/assets/css/pages/userPage/main.css b/assets/css/pages/userPage/main.css new file mode 100644 index 00000000..78066750 --- /dev/null +++ b/assets/css/pages/userPage/main.css @@ -0,0 +1,10 @@ +/** + * Main posts stylesheet + * + * @author Pierre HUBERT + */ + +.page-contener { + max-width: 1500px; + margin: auto; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index 714dbb9b..4903f73c 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -634,6 +634,27 @@ var ComunicWeb = { }, + /** + * Posts components + */ + posts: { + + /** + * Posts communication interface + */ + interface: { + //TODO : implement + }, + + /** + * Posts UI + */ + ui: { + + }, + + }, + /** * Modern textarea handler */ diff --git a/assets/js/components/posts/interface.js b/assets/js/components/posts/interface.js new file mode 100644 index 00000000..a12958f2 --- /dev/null +++ b/assets/js/components/posts/interface.js @@ -0,0 +1,28 @@ +/** + * Posts communication interface with the API + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.posts.interface = { + + /** + * Get user posts + * + * @param {int} userID The ID of the target user + * @param {function} callback Callback function + */ + get_user: function(userID, callback){ + + //Prepare the API request + var APIuri = "posts/get_user"; + var params = { + userID: userID + }; + + //Make the request + ComunicWeb.common.api.makeAPIrequest(APIuri, params, true, callback); + + }, + +} \ No newline at end of file diff --git a/assets/js/components/posts/ui.js b/assets/js/components/posts/ui.js new file mode 100644 index 00000000..bb706b4c --- /dev/null +++ b/assets/js/components/posts/ui.js @@ -0,0 +1,149 @@ +/** + * Posts UI + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.posts.ui = { + + /** + * Show a single post + * + * @param {Object} infos Informations about the post + * @param {HTMLElement} target The target for the post + */ + display_post: function(infos, target){ + + //Create post root element + var postRoot = createElem2({ + appendTo: target, + type: "div", + class: "post" + }); + + //Display user block + var userBlock = createElem2({ + appendTo: postRoot, + type: "div", + class: "user-block" + }); + + //Display user account image + var userAccountImage = createElem2({ + appendTo: userBlock, + type: "img", + class: "img-circle img-bordered-sm", + src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png" + }); + + //Add user name + var userNameBlock = createElem2({ + appendTo: userBlock, + type: "span", + class: "username", + }); + + var userName = createElem2({ + appendTo: userNameBlock, + type: "a", + innerHTML: "Loading" + }); + + //Add post description + var postDescription = createElem2({ + appendTo: userBlock, + type: "span", + class: "description" + }); + + //Show the age of the post + postDescription.innerHTML = ComunicWeb.common.date.timeDiffToStr(infos.post_time) + " ago"; + + //Load user informations + ComunicWeb.user.userInfos.getUserInfos(infos.userID, function(result){ + if(result.firstName){ + userAccountImage.src = result.accountImage; + userName.innerHTML = result.firstName + " " + result.lastName; + } + }); + + + //Add post attachement (if any) + if(infos.kind == "text"){ + //Do nothing + } + + //In case of image + else if(infos.kind == "image"){ + + //Image link + var imageLink = createElem2({ + appendTo: postRoot, + type:"a", + href: infos.file_path_url, + }); + + //Image element + createElem2({ + appendTo: imageLink, + type: "img", + src: infos.file_path_url, + class: "post-image" + }); + + //Enable lightbox + imageLink.onclick = function(){ + $(this).ekkoLightbox({ + alwaysShowClose: true, + }); + return false; + } + } + + else { + //Log error + ComunicWeb.debug.logMessage("Not implemented kind of post: " + infos.kind); + ComunicWeb.common.error.submitError("notice", "Unimplemented kind of post" + infos.kind, 0, {}); + } + + + //Add post content + var postContent = createElem2({ + appendTo: postRoot, + type: "div", + class: "post_content", + innerHTML: infos.content + }); + + + + + //Add bottom elements container + var bottomArea = createElem2({ + appendTo: postRoot, + type: "ul", + class: "list-inline post-buttons" + }); + + //Load likes + var likesTarget = createElem2({ + appendTo: bottomArea, + type: "li", + }); + + var userLiking = null; + if(signed_in()){ + userLiking = infos.userlike; + } + + //Call component + ComunicWeb.components.like.button.display( + "post", + infos.ID, + infos.likes, + userLiking, + likesTarget + ); + } + +} \ No newline at end of file diff --git a/assets/js/pages/userPage/main.js b/assets/js/pages/userPage/main.js index 07483e8d..54e04557 100644 --- a/assets/js/pages/userPage/main.js +++ b/assets/js/pages/userPage/main.js @@ -134,7 +134,7 @@ ComunicWeb.pages.userPage.main = { var row = createElem2({ appendTo: sectionContent, type: "div", - class: "row" + class: "row page-contener" }); //Create left column @@ -151,10 +151,10 @@ ComunicWeb.pages.userPage.main = { var rightColumn = createElem2({ appendTo: row, type: "div", - class: "col-md-9" + class: "col-md-6" }); - //Display text + //Display posts ComunicWeb.pages.userPage.posts.display(infos, params, rightColumn); } diff --git a/assets/js/pages/userPage/posts.js b/assets/js/pages/userPage/posts.js index f2466b52..08149db6 100644 --- a/assets/js/pages/userPage/posts.js +++ b/assets/js/pages/userPage/posts.js @@ -22,10 +22,48 @@ ComunicWeb.pages.userPage.posts = { class: "box box-primary" }); - //Check whether a precise post has to be opened or not - //TODO implement + var postsBody = createElem2({ + appendTo: postsBlock, + type: "div", + class: "box-body" + }); + + //Get the posts from the API + ComunicWeb.components.posts.interface.get_user(userInfos.userID, function(result){ + + //Check for errors + if(result.error){ + //Display notification + ComunicWeb.common.notificationSystem.showNotification("Couldn't get user posts!", "danger", 4, "Error"); + } + else { + + //Show the posts + ComunicWeb.pages.userPage.posts._show(result, postsBody); + + } + }); - } + }, + + /** + * Show user posts + * + * @param {Object} posts The list of posts to display + * @param {HMTLElement} target The rendering target + */ + _show: function(posts, target){ + + //Process each post + var i; + for(i in posts){ + + //Display post + ComunicWeb.components.posts.ui.display_post(posts[i], target); + + } + + }, diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php index 6a29412e..8162a40c 100644 --- a/corePage/config/dev.config.php +++ b/corePage/config/dev.config.php @@ -50,10 +50,14 @@ $config['CSSfiles'] = array( "%PATH_ASSETS%css/components/userSelect/userSelect.css", //Emojies - "%PATH_ASSETS%css/components/emoji/parser.css", + "%PATH_ASSETS%css/components/emoji/parser.css", + + //Posts component + "%PATH_ASSETS%css/components/posts/ui.css", //Pages stylesheets //User Page + "%PATH_ASSETS%css/pages/userPage/main.css", "%PATH_ASSETS%css/pages/userPage/accessForbidden.css", ); @@ -162,6 +166,10 @@ $config['JSfiles'] = array( "%PATH_ASSETS%js/components/like/button.js", "%PATH_ASSETS%js/components/like/interface.js", + //Posts component + "%PATH_ASSETS%js/components/posts/interface.js", + "%PATH_ASSETS%js/components/posts/ui.js", + //Modern textarea handler "%PATH_ASSETS%js/components/textarea.js",