mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-26 13:59:23 +00:00
Display text posts and images posts
This commit is contained in:
parent
1147ab787e
commit
9a2e3e5351
17
assets/css/components/posts/ui.css
Normal file
17
assets/css/components/posts/ui.css
Normal 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%;
|
||||||
|
}
|
10
assets/css/pages/userPage/main.css
Normal file
10
assets/css/pages/userPage/main.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Main posts stylesheet
|
||||||
|
*
|
||||||
|
* @author Pierre HUBERT
|
||||||
|
*/
|
||||||
|
|
||||||
|
.page-contener {
|
||||||
|
max-width: 1500px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
@ -634,6 +634,27 @@ var ComunicWeb = {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Posts components
|
||||||
|
*/
|
||||||
|
posts: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Posts communication interface
|
||||||
|
*/
|
||||||
|
interface: {
|
||||||
|
//TODO : implement
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Posts UI
|
||||||
|
*/
|
||||||
|
ui: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Modern textarea handler
|
* Modern textarea handler
|
||||||
*/
|
*/
|
||||||
|
28
assets/js/components/posts/interface.js
Normal file
28
assets/js/components/posts/interface.js
Normal 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);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
149
assets/js/components/posts/ui.js
Normal file
149
assets/js/components/posts/ui.js
Normal 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
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -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",
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user