/**
* Sidebar main script file
*
* @author Pierre HUBERT
*/
ComunicWeb.components.sideBar.main = {
show: function() {
if(byId("main-sidebar")) return;
var sideBar = createElem2({
appendTo: byId("wrapper"),
type: "aside",
class: "main-sidebar",
id: "main-sidebar",
});
var section = createElem2({
appendTo: sideBar,
type: "section",
class: "sidebar"
});
// User panel
var userPanel = createElem2({
appendTo: section,
type: "div",
class: "user-panel hidden-xs"
});
getUserInfo(userID(), function(info){
if(info.error)
return userPanel.innerHTML = "Error!";
// User account image
createElem2({
appendTo: userPanel,
type: "div",
class: "pull-left image cursor-pointer",
onclick: () => openUserPage(info),
children: [
createElem2({
type: "img",
class: "img-circle",
src: info.accountImage
})
],
});
// User name
createElem2({
appendTo: userPanel,
type: "div",
class: "pull-left info",
children: [
createElem2({
type: "p",
class: "cursor-pointer",
innerHTML: userFullName(info),
onclick: () => openUserPage(info),
}),
createElem2({
type: "a",
innerHTML: "Settings",
internalHref: "settings",
}),
]
});
});
// Search form
this.addSearchForm(section);
// User memberships
createElem2({
appendTo: section,
type: "div",
class: "intermediate-label hide-on-collapse",
innerHTML: "FRIENDS & GROUPS"
});
let userMemberships = createElem2({
appendTo: section,
type: "div",
class: "memberships-list"
});
this.refreshMemberships(userMemberships);
let interval = setInterval(() => {
if(userMemberships.isConnected)
this.refreshMemberships(userMemberships);
else
clearInterval(interval);
}, 15000);
/*// Recent conversations
createElem2({
appendTo: section,
type: "div",
class: "intermediate-label hide-on-collapse",
innerHTML: "CONVERSATIONS"
});
let conversationsList = createElem2({
appendTo: section,
type: "ul",
class: "sidebar-menu recents-conversations-list hide-on-collapse",
innerHTML: "
TO COME"
});*/
},
// **************************************
// Search
// **************************************
/**
* Add search form to sidebar
*
* @param {HTMLElement} target The target for the search form
*/
addSearchForm: function(target) {
// Search input
/**
* @type {HTMLInputElement}
*/
let searchInput = createElem2({
type: "input",
class: "form-control",
elemType: "text",
id: "sidebarSearchInput",
placeholder: "Search...",
});
let searchForm = createElem2({
appendTo: target,
type: "form",
class: "sidebar-form",
children: [
createElem2({
type: "div",
class: "input-group",
children: [
searchInput,
createElem2({
type: "span",
class: "input-group-btn",
innerHTML: '',
}),
]
})
]
});
// Search results target
let searchResults = createElem2({
appendTo: searchForm,
type: "div",
class: "sidebar-search-results"
});
searchResults.style.display = "none";
searchInput.addEventListener("keyup", e => {
//Update UI
searchResults.style.display
= searchInput.value.length < 2 ? "none" : "unset";
if(searchInput.value.length < 2)
return;
// Perform the search on the server
ComunicWeb.components.search.interface.global(searchInput.value, results => {
if(results.error) return;
//Get information about related groups and users
getMultipleUsersInfo(ComunicWeb.components.search.utils.getUsersId(results), usersInfo => {
if(usersInfo.error) return;
getInfoMultipleGroups(ComunicWeb.components.search.utils.getGroupsId(results), groupsInfo => {
if(groupsInfo.error) return;
this.applySearchResults(searchResults, results, usersInfo, groupsInfo);
});
});
});
})
searchForm.addEventListener("submit", e => {
e.preventDefault();
openPage("search?q=" + searchForm.getElementsByTagName("input")[0].value);
});
},
/**
* Put search form back to its initial state
*/
resetSearchFrom: function(){
byId("sidebarSearchInput").value = "";
document.querySelector(".sidebar-search-results").style.display = "none";
},
/**
* Apply search results
*
* @param {HTMLElement} target
* @param {Array} results
* @param {*} users
* @param {*} groups
*/
applySearchResults: function(target, results, users, groups) {
emptyElem(target);
let resultsTarget = createElem2({
appendTo: target,
type: "div",
class: "results-container"
});
results.forEach(el => {
if(el.kind == "user")
this.applyUserResult(resultsTarget, users["user-" + el.id]);
else
this.applyGroupResult(resultsTarget, groups[el.id]);
});
$(resultsTarget).slimScroll({
height: '100%'
});
},
applyUserResult: function(target, user) {
createElem2({
appendTo: target,
type: "div",
children: [
createElem2({
type: "img",
class: "img-circle",
src: user.accountImage
}),
createElem2({
type: "span",
innerHTML: userFullName(user)
}),
],
onclick: () => {
openUserPage(user);
this.resetSearchFrom();
}
});
},
applyGroupResult: function(target, group) {
createElem2({
appendTo: target,
type: "div",
children: [
createElem2({
type: "img",
src: group.icon_url
}),
createElem2({
type: "span",
innerHTML: group.name
}),
],
onclick: () => {
openGroupPage(group);
this.resetSearchFrom();
}
});
},
// **************************************
// Memberships
// **************************************
/**
* Refresh user memberships
*
* @param {HTMLElement} target
*/
refreshMemberships: function(target){
ComunicWeb.components.webApp.interface.getMemberships(
() => notify("Could not refresh your memberships!", "error"),
(m, u, g, c) => this.applyMemberships(target, m, u, g, c)
);
},
/**
* Apply memberships
*
* @param {HTMLElement} target
* @param {*} memberships
* @param {*} users
* @param {*} groups
* @param {*} convs
*/
applyMemberships: function(target, memberships, users, groups, convs) {
// Empty liste
target.innerHTML = "";
let friendsTarget = createElem2({
appendTo: target,
type: "ul",
class: "sidebar-menu"
});
memberships.forEach(e => {
if(e.type == "friend")
this.applyFriend(friendsTarget, e.friend, users.get(e.friend.ID_friend));
if(e.type == "group")
this.applyGroup(friendsTarget, groups.get(e.id), e.last_activity);
});
createElem2({
appendTo: friendsTarget,
type: "li",
innerHTML: "",
});
$(friendsTarget).slimscroll({
flex: 2,
height: "100%"
});
},
/**
* Apply a friend object
*
* @param {HTMLElement} target
* @param {*} friend
* @param {*} user
*/
applyFriend: function(target, friend, user) {
let li = createElem2({
appendTo: target,
type: "li"
});
let a = createElem2({
appendTo: li,
onclick: () => openUserPage(user),
type: "a"
});
// User icon
createElem2({
appendTo: a,
type: "img",
class: "img-circle",
src: user.image
});
// User name
createElem2({
appendTo: a,
type: "span",
innerHTML: userFullName(user)
});
// Private conversation
createElem2({
appendTo: a,
type: "span",
class: "pull-right-container",
innerHTML: "",
onclick: (e) => {
e.stopImmediatePropagation();
ComunicWeb.components.conversations.manager.openPrivate(user.userID);
}
});
// Supplementary information
let subInfoEl = createElem2({
appendTo: a,
type: "div",
class: "subinfo",
onclick: friend.accepted != 1 ? (e) => e.stopImmediatePropagation() : undefined
});
// Check if friendship request has been accepted or not
if(friend.accepted == 1) {
if(ComunicWeb.common.date.time() - friend.time_last_activity < 30)
subInfoEl.innerHTML = "Online";
else
subInfoEl.innerHTML = timeDiffToStr(friend.time_last_activity);
}
else {
const respondRequest = function(accept) {
// Update UI
subInfoEl.innerHTML = accept ? lang("friends_bar_accepted")
: lang("friends_bar_rejected");
if(!accept) li.remove();
// Perform the request the server
ComunicWeb.components.friends.list.respondRequest(friend.ID_friend, accept);
}
// Offer the user to accept or reject the invitation
createElem2({
appendTo: subInfoEl,
type: "span",
class: "btn btn-success btn-xs",
innerHTML: "",
onclick: (e) => respondRequest(true)
});
add_space(subInfoEl);
createElem2({
appendTo: subInfoEl,
type: "span",
class: "btn btn-danger btn-xs",
innerHTML: "",
onclick: (e) => respondRequest(false)
});
}
},
/**
* Apply group information
*
* @param {HTMLElement} target
* @param {*} group
* @param {*} lastactive
*/
applyGroup: function(target, group, lastactive) {
let li = createElem2({
appendTo: target,
type: "li"
});
let a = createElem2({
appendTo: li,
type: "a",
onclick: () => openGroupPage(group)
});
// Group icon
createElem2({
appendTo: a,
type: "img",
src: group.icon_url
});
// Group name
createElem2({
appendTo: a,
type: "span",
innerHTML: group.name
});
let subInfoEl = createElem2({
appendTo: a,
type: "div",
class: "subinfo",
//onclick: (e) => e.stopImmediatePropagation()
});
if(group.membership == "pending") {
// Show requested state
subInfoEl.innerHTML = "Requested";
}
else if(group.membership == "invited") {
// Show invited state
subInfoEl.innerHTML = " Invited";
}
else
// Group last activity
subInfoEl.innerHTML = timeDiffToStr(lastactive);
},
}