Display text posts and images posts

This commit is contained in:
Pierre 2017-12-31 18:51:46 +01:00
parent 1147ab787e
commit 9a2e3e5351
8 changed files with 278 additions and 7 deletions

View File

@ -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%;
}

View File

@ -0,0 +1,10 @@
/**
* Main posts stylesheet
*
* @author Pierre HUBERT
*/
.page-contener {
max-width: 1500px;
margin: auto;
}

View File

@ -634,6 +634,27 @@ var ComunicWeb = {
}, },
/**
* Posts components
*/
posts: {
/**
* Posts communication interface
*/
interface: {
//TODO : implement
},
/**
* Posts UI
*/
ui: {
},
},
/** /**
* Modern textarea handler * Modern textarea handler
*/ */

View File

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

View File

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

View File

@ -134,7 +134,7 @@ ComunicWeb.pages.userPage.main = {
var row = createElem2({ var row = createElem2({
appendTo: sectionContent, appendTo: sectionContent,
type: "div", type: "div",
class: "row" class: "row page-contener"
}); });
//Create left column //Create left column
@ -151,10 +151,10 @@ ComunicWeb.pages.userPage.main = {
var rightColumn = createElem2({ var rightColumn = createElem2({
appendTo: row, appendTo: row,
type: "div", type: "div",
class: "col-md-9" class: "col-md-6"
}); });
//Display text //Display posts
ComunicWeb.pages.userPage.posts.display(infos, params, rightColumn); ComunicWeb.pages.userPage.posts.display(infos, params, rightColumn);
} }

View File

@ -22,10 +22,48 @@ ComunicWeb.pages.userPage.posts = {
class: "box box-primary" class: "box box-primary"
}); });
//Check whether a precise post has to be opened or not var postsBody = createElem2({
//TODO implement 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);
}
},

View File

@ -50,10 +50,14 @@ $config['CSSfiles'] = array(
"%PATH_ASSETS%css/components/userSelect/userSelect.css", "%PATH_ASSETS%css/components/userSelect/userSelect.css",
//Emojies //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 //Pages stylesheets
//User Page //User Page
"%PATH_ASSETS%css/pages/userPage/main.css",
"%PATH_ASSETS%css/pages/userPage/accessForbidden.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/button.js",
"%PATH_ASSETS%js/components/like/interface.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 //Modern textarea handler
"%PATH_ASSETS%js/components/textarea.js", "%PATH_ASSETS%js/components/textarea.js",