ComunicWeb/assets/js/components/conversations/chatWindows.js
2018-03-25 09:43:39 +02:00

844 lines
23 KiB
JavaScript

/**
* Conversation chat window functions
*
* @author Pierre HUBERT
*/
ComunicWeb.components.conversations.chatWindows = {
/**
* @var {Object} __conversationsCache Chat windows cache
*/
__conversationsCache: {},
/**
* Open a new conversation window
*
* @param {Integer} conversationID The ID of the window to open
* @return {Boolean} True for a success
*/
openConversation: function(conversationID){
//Log action
ComunicWeb.debug.logMessage("Opening conversation " + conversationID);
//Create a conversation window
var conversationWindow = this.create({
target: byId(ComunicWeb.components.conversations.manager.__conversationsContainerID),
conversationID: conversationID,
});
//Load the conversation
this.load(conversationID, conversationWindow);
//Success
return true;
},
/**
* Create a new chat window
*
* @param {Object} infos Informations required for the new chat window
* @info {HTMLElement} target The target of the new chat window
* @info {Integer} conversationID The ID of the target conversation
* @return {Object} Informations about the new chat window
*/
create: function(infos){
//Log action
ComunicWeb.debug.logMessage("Create a new chat window");
//First, create the generic conversation window
var infosBox = ComunicWeb.components.conversations.windows.create(infos.target.children[0]);
//Save conversation ID
infosBox.conversationID = infos.conversationID;
//Change box root class name
infosBox.rootElem.className += " direct-chat direct-chat-primary";
//Adapt close button behaviour
infosBox.closeFunction = function(){
//Remove root element
infosBox.rootElem.remove();
//Remove the conversation from opened ones
ComunicWeb.components.conversations.cachingOpened.remove(infosBox.conversationID);
//Unload conversation
ComunicWeb.components.conversations.chatWindows.unload(infosBox.conversationID);
}
infosBox.closeButton.onclick = infosBox.closeFunction;
//Debug
//Create messages container
infosBox.messagesArea = createElem2({
appendTo: infosBox.boxBody,
type: "div",
class: "direct-chat-messages",
innerHTML: "",
});
//Add button to get conversation members
infosBox.membersButton = createElem("button");
infosBox.closeButton.parentNode.insertBefore(infosBox.membersButton, infosBox.closeButton);
infosBox.membersButton.type = "button";
infosBox.membersButton.className = "btn btn-box-tool";
infosBox.membersButton.setAttribute("data-toggle", "tooltip");
infosBox.membersButton.setAttribute("data-widget", "chat-pane-toggle");
infosBox.membersButton.title = "Conversation members";
//Add button icon
var buttonIcon = createElem("i", infosBox.membersButton);
buttonIcon.className = "fa fa-users";
//Add conversation members pane
var membersPane = createElem("div", infosBox.boxBody);
membersPane.className = "direct-chat-contacts";
//Add conversation members list
infosBox.membersList = createElem("ul", membersPane);
infosBox.membersList.className = "contacts-list";
//Add send a message form
this.addMessageform(infosBox);
//Return informations about the chat window
return infosBox;
},
/**
* Add a message form to the chat windows
*
* @param {Object} infosBox Informations about the chat box
* @return {Boolean} True for a success
*/
addMessageform: function(infosBox){
//Create form container
var conversationFormContainer = createElem2({
appendTo: infosBox.boxFooter,
type: "form",
class: "create-message-form"
});
//Create input group
var inputGroup = createElem2({
appendTo: conversationFormContainer,
type: "div",
class: "input-group"
});
//Create text input (for message)
var inputText = createElem2({
appendTo: inputGroup,
type: "textarea",
class: "form-control",
placeholder: "New message...",
});
inputText.maxLength = 200;
//Enable textarea 2.0 on the message
var textarea2 = new ComunicWeb.components.textarea();
textarea2.init({
element: inputText,
minHeight: "34px",
autosize: true,
});
//Create image input (for optionnal image)
var inputImage = createElem2({
type: "input",
elemType: "file",
});
//Create button group
var buttonGroup = createElem2({
appendTo: inputGroup,
type: "span",
class: "input-group-btn",
});
//Add image button
var imageButton = createElem2({
appendTo: buttonGroup,
type: "button",
elemType: "button",
class: "btn btn-flat btn-add-image",
});
imageButton.onclick = function(){
//Call file selector
inputImage.click();
};
//Add image icon
createElem2({
type: "i",
appendTo: imageButton,
class: "fa fa-image"
});
//Add send button
var sendButton = createElem2({
appendTo: buttonGroup,
type: "button",
class: "btn btn-primary btn-flat",
elemType: "submit",
});
//Add send icon
createElem2({
appendTo: sendButton,
type: "i",
class: "fa fa-send-o",
});
//Prevent textarea from adding a new line when pressing enter
$(inputText).keypress(function(event){
if(event.keyCode == 13){
event.preventDefault();
sendButton.click();
}
});
//Add required elements to infosBox
infosBox.sendMessageForm = {
formRoot: conversationFormContainer,
sendButton: sendButton,
inputText: inputText,
textarea2: textarea2,
inputImage: inputImage,
};
//Success
return true;
},
/**
* Load (or reload) a conversation
*
* @param {Integer} conversationID The ID of the conversation to load
* @param {Object} conversationWindow Informations about the conversation window
* @return {Boolean} True for a success
*/
load: function(conversationID, conversationWindow){
//Log action
ComunicWeb.debug.logMessage("Loading conversation " + conversationID);
//Change conversation window name (loading state)
this.changeName("Loading", conversationWindow);
//Peform a request to informations about the conversation
ComunicWeb.components.conversations.interface.getInfosOne(conversationID, function(informations){
//In case of error
if(informations.error){
//Display error notification
ComunicWeb.common.notificationSystem.showNotification("Couldn't get informations about the conversation !", "danger");
return false;
}
//Get informations about the members of the conversation
getMultipleUsersInfos(informations.members, function(membersInfos){
//Quit in case of error
if(informations.error){
//Display error notification
ComunicWeb.common.notificationSystem.showNotification("Couldn't get informations about the conversation members !", "danger");
return false;
}
//Create conversation informations root object
var conversationInfos = {
box: conversationWindow,
membersInfos: membersInfos,
infos: informations
};
//Save conversation informations in the cache
ComunicWeb.components.conversations.chatWindows.__conversationsCache["conversation-"+conversationID] = conversationInfos;
//Change the name of the conversation
ComunicWeb.components.conversations.utils.getName(informations, function(conversationName){
ComunicWeb.components.conversations.chatWindows.changeName(conversationName, conversationWindow);
});
//Update conversation members informations
ComunicWeb.components.conversations.chatWindows.updateMembersList(conversationInfos);
//Display conversation settings pane
ComunicWeb.components.conversations.chatWindows.showConversationSettings(conversationInfos);
//Register the conversation in the service
ComunicWeb.components.conversations.service.registerConversation(conversationID);
//Make send a message button lives
conversationInfos.box.sendMessageForm.formRoot.onsubmit = function(){
//Submit new message
ComunicWeb.components.conversations.chatWindows.submitMessageForm(conversationInfos);
//Block page reloading
return false;
};
});
});
//Success
return true;
},
/**
* Unload a chat window
*
* @param {Integer} conversationID The ID of the conversation to unload
* @param {Boolean} keepInfos Keep informations about the chat window
* @return {Boolean} True for a success
*/
unload: function(conversationID, keepInfos){
if(!this.__conversationsCache["conversation-"+conversationID]){
ComunicWeb.debug.logMessage("Couldn't unload conversation: " + conversationID +". It seems not to be loaded...");
return false;
}
//Log action
ComunicWeb.debug.logMessage("Unloading a conversation: " + conversationID);
//Get informations
var conversationInfos = this.__conversationsCache["conversation-"+conversationID];
//Empty messages area
emptyElem(conversationInfos.box.messagesArea);
conversationInfos.box.messagesArea.innerHTML = "";
//Un-register conversation
ComunicWeb.components.conversations.service.unregisterConversation(conversationID);
//Remove informations if required
if(!keepInfos){
delete this.__conversationsCache["conversation-"+conversationID];
}
//Success
return true;
},
/**
* Unload all chat windows
*
* @return {Boolean} True for a success
*/
unloadAll: function(){
//Clear conversation object
clearObject(this.__conversationsCache);
//Success
return true;
},
/**
* Change the name of the converation at the top of the windows
*
* @param {String} newName The new name for the conversation window
* @param {Ojbect} infos Informations about the conversation window
* @return {Boolean} True for a success
*/
changeName: function(newName, infos){
//Empty name field
emptyElem(infos.boxTitle);
//Create conversation icon
var conversationIcon = createElem("i", infos.boxTitle);
conversationIcon.className = "fa fa-comments";
//Add conversation title
var conversationTitle = createElem("span", infos.boxTitle);
conversationTitle.innerHTML = " " + newName;
//Success
return true;
},
/**
* Update conversation members list
*
* @param {Object} conversation Informations about the conversation
* @return {Boolean} True for a success
*/
updateMembersList: function(conversation){
//First, make sure conversation members pane is empty
emptyElem(conversation.box.membersList);
//Then process each user
var i = 0;
for(i in conversation.infos.members){
if(conversation.membersInfos['user-'+conversation.infos.members[i]]){
var memberInfos = conversation.membersInfos['user-'+conversation.infos.members[i]];
//Display user informations
var userLi = createElem("li", conversation.box.membersList);
var userLink = createElem("a", userLi);
//Add user account image
var userImage = createElem("img", userLink);
userImage.className = "contacts-list-img";
userImage.src = memberInfos.accountImage;
//Add member informations
var memberInfosList = createElem2({
type: "div",
appendTo: userLink,
class: "contacts-list-info",
});
//Add user name
var memberName = createElem2({
type: "span",
appendTo: memberInfosList,
class: "contacts-list-name",
innerHTML: memberInfos.firstName + " " + memberInfos.lastName,
});
//Check if members is a moderator or not of the conversation
var memberStatus = conversation.infos.ID_owner == memberInfos.userID ? "Moderator" : "Member";
//Add member status
var memberStatus = createElem2({
type: "span",
appendTo: memberInfosList,
class: "contats-list-msg",
innerHTML: memberStatus
});
}
}
//Enable slimscrooll
$(conversation.box.membersList).slimscroll({
height: "100%",
color: "#FFFFFF"
});
//Success
return true;
},
/**
* Show conversation settings (button + pane)
*
* @param {Object} conversation Informations about the conversation
* @return {Boolean} True for a success
*/
showConversationSettings: function(conversation){
//First, check conversation settings button and pane don't exists yet
if(conversation.box.settingsButton){
if(conversation.box.settingsButton.remove){
conversation.box.settingsButton.remove();
}
}
if(conversation.box.settingsPane){
if(conversation.box.settingsPane.remove){
conversation.box.settingsPane.remove();
}
}
//Create and display conversation settings button wheel
conversation.box.settingsButton = createElem2({
type: "button",
insertBefore: conversation.box.membersButton,
class: "btn btn-box-tool",
type: "button"
});
//Add button icon
createElem2({
type: "i",
appendTo: conversation.box.settingsButton,
class: "fa fa-gear",
});
//Create settings pane
var settingsPane = createElem2({
type: "div",
appendTo: conversation.box.boxBody,
class: "conversation-settings-pane",
});
conversation.box.settingsPane = settingsPane;
//Make the settings button lives
conversation.box.settingsButton.onclick = function(){
//Update settings pane classname
if(settingsPane.className.includes(" open"))
settingsPane.className = settingsPane.className.replace(" open", ""); //Close the pane
else
settingsPane.className += " open"; //Open the pane
};
//Create the conversation form
var settingsForm = ComunicWeb.components.conversations.utils.createConversationForm(settingsPane);
//Update form informations
settingsForm.createButton.innerHTML = "Update settings";
//Update conversation name
if(conversation.infos.name)
settingsForm.conversationNameInput.value = conversation.infos.name;
//Check if user is a conversation moderator or not
if(conversation.infos.ID_owner == userID()){
//Update conversation members
ComunicWeb.components.userSelect.pushEntries(settingsForm.usersElement, conversation.infos.members);
}
else {
//We disable name field
settingsForm.conversationNameInput.disabled = "true";
//We hide conversation users (presents in members pane)
settingsForm.usersElement.parentNode.style.display = "none";
}
//Update follow conversation checkbox status
if(conversation.infos.following == "1"){
$(settingsForm.followConversationInput).iCheck("check");
}
else {
$(settingsForm.followConversationInput).iCheck("uncheck");
}
//Save settings form in global form
conversation.settingsForm = settingsForm;
//Make update settings button lives
settingsForm.createButton.onclick = function(){
ComunicWeb.components.conversations.chatWindows.submitUpdateForm(conversation);
};
//Success
return true;
},
/**
* Process submited update conversation form
*
* @param {Object} conversation Informations about the conversation
* @return {Boolean} True for a success
*/
submitUpdateForm: function(conversation){
//Then, get informations about the input
var newValues = {
conversationID: conversation.infos.ID,
following: conversation.settingsForm.followConversationInput.checked,
}
//Add other fields if the user is a conversation moderator
if(conversation.infos.ID_owner == userID()){
//Specify conversation name
var nameValue = conversation.settingsForm.conversationNameInput.value
newValues.name = (nameValue === "" ? false : nameValue);
//Get conversation members
newValues.members = ComunicWeb.components.userSelect.getResults(conversation.settingsForm.usersElement);
//Check if any users were selected
if(newValues.members.length === 0){
//Inform user that its input is invalid
ComunicWeb.common.notificationSystem.showNotification("Please select at least one user !", "danger", 3);
return false;
}
}
//Now, freeze the submit button
conversation.settingsForm.createButton.disabled = true;
//Peform a request through the interface
ComunicWeb.components.conversations.interface.updateSettings(newValues, function(result){
//Enable again update button
conversation.settingsForm.createButton.disabled = false;
//Check for errors
if(result.error)
ComunicWeb.common.notificationSystem.showNotification("An error occured while trying to update conversation settings !", "danger", 4);
//Reload the conversation
ComunicWeb.components.conversations.chatWindows.unload(conversation.infos.ID, true);
ComunicWeb.components.conversations.chatWindows.load(conversation.infos.ID, conversation.box);
});
//Success
return true;
},
/**
* Submit a new message form
*
* @param {Object} convInfos Informations about the conversation
* @return {Boolean} True for a success
*/
submitMessageForm: function(convInfos){
//Log action
ComunicWeb.debug.logMessage("Send a new message in a conversation system.");
//Extract main fields
var form = convInfos.box.sendMessageForm;
//Check if message is empty
if(!checkString(form.inputText.value) && !form.inputImage.files[0]){
ComunicWeb.common.notificationSystem.showNotification("Please type a valid message before trying to send it !", "danger", 2);
return false;
}
//Lock send button
form.sendButton.disabled = true;
//Prepare what to do next
var onceSent = function(result){
//Check for errors
if(result.error){
ComunicWeb.common.notificationSystem.showNotification("An error occured while trying to send message! Please try again...", "danger", 2);
//Unlock send button
form.sendButton.disabled = false;
return false;
}
//Reset the form
ComunicWeb.components.conversations.chatWindows.resetCreateMessageForm(convInfos);
}
//Check if an image is included with the message or not
if(form.inputImage.files[0]){
//Include the image with the request (export the image as URL)
var reader = new FileReader();
reader.readAsDataURL(form.inputImage.files[0]);
var sendImage = reader.result;
//The function will resume once the image is fully converted
reader.addEventListener("load", function() {
//Send the message throught the interface
ComunicWeb.components.conversations.interface.sendMessage({
conversationID: convInfos.infos.ID,
message: form.inputText.value,
image: reader.result,
callback: onceSent
});
}, false);
}
else {
//Send the message throught the interface
ComunicWeb.components.conversations.interface.sendMessage({
conversationID: convInfos.infos.ID,
message: form.inputText.value,
callback: onceSent
});
}
//Success
return true;
},
/**
* Reset a create a message form
*
* @param {Object} infos Informations about the conversation
* @return {Boolean} True for a success
*/
resetCreateMessageForm: function(infos){
//Extract form informations
var form = infos.box.sendMessageForm;
//Unlock send button and reset its value
form.sendButton.disabled = false;
//Empty textarea
form.inputText.value = "";
form.textarea2.resetHeight();
//Remove image from image input
form.inputImage.value = "";
//Success
return true;
},
/**
* Add a message to a conversation window
*
* @param {Integer} conversationID The ID of the conversation to update
* @param {Object} messageInfos Informations about the message to add
* @return {Boolean} True for a success
*/
addMessage: function(conversationID, messageInfos){
//First, check if the conversation informations can be found
if(!this.__conversationsCache["conversation-"+conversationID]){
ComunicWeb.debug.logMessage("Conversation Chat Windows : Error ! Couldn't add a message to the conversation because the conversation was not found !");
return false;
}
//Else extract conversation informations
var convInfos = this.__conversationsCache["conversation-"+conversationID];
//Check if it is the current user who sent the message
var userIsPoster = messageInfos.ID_user == userID();
//Check if this is the first message of the conversation or not
if(!convInfos.lastMessage){
//Initialize last message object
convInfos.lastMessage = {
userID: 0,
messageContainer: false,
}
}
//Check if message poster is the same as the last message
if(convInfos.lastMessage.userID == messageInfos.ID_user){
//Skip message container creation & user avatar rendering...
var messageContainer = convInfos.lastMessage.messageContainer;
var firstMessageFromUser = false;
}
else {
//Initialize user & message informations elements
var firstMessageFromUser = true;
//Create message element
var messageContainer = createElem2({
appendTo: convInfos.box.messagesArea,
type: "div",
class: "direct-chat-msg " + (userIsPoster ? "right" : "")
});
//Display message header
var messageHeader = createElem2({
appendTo: messageContainer,
type: "div",
class: "direct-chat-info clearfix"
});
//Add user name
var usernameElem = createElem2({
appendTo: messageHeader,
type: "span",
class: "direct-chat-name pull-" + (userIsPoster ? "right" : "left"),
innerHTML: "Loading",
});
//Hide user name if it is the current user
if(userIsPoster)
usernameElem.style.display = "none";
//Add user account image
var userAccountImage = createElem2({
appendTo: messageContainer,
type: "img",
class: "direct-chat-img",
src: ComunicWeb.__config.assetsURL + "img/defaultAvatar.png",
alt: "User account image",
});
//Load user informations
if(convInfos.membersInfos["user-" + messageInfos.ID_user]){
//Get informations
var userInfos = convInfos.membersInfos["user-" + messageInfos.ID_user];
//Replace poster name
usernameElem.innerHTML = userInfos.firstName + " " + userInfos.lastName;
userAccountImage.src = userInfos.accountImage;
}
//Update conversation informations
convInfos.lastMessage = {
userID: messageInfos.ID_user,
messageContainer: messageContainer,
}
}
//Add message
var messageTargetElem = createElem2({
appendTo: messageContainer,
type: "div",
class: "direct-chat-text " + (!firstMessageFromUser ? "not-first-message" : ""),
});
//Add text message
var textMessage = createElem2({
appendTo: messageTargetElem,
type: "span",
innerHTML: removeHtmlTags(messageInfos.message), //Remove HTML tags
});
//Check if an image has to be added
if(messageInfos.image_path != null){
//Image link
var imageLink = createElem2({
appendTo: messageTargetElem,
type:"a",
href: messageInfos.image_path,
});
//Image element
createElem2({
appendTo: imageLink,
type: "img",
src: messageInfos.image_path,
class: "conversation-msg-image"
});
//Enable lightbox
imageLink.onclick = function(){
$(this).ekkoLightbox({
alwaysShowClose: true,
});
return false;
}
}
//Parse emojies in text message
ComunicWeb.components.emoji.parser.parse({
element: textMessage,
});
//Enable slimscrool
$(convInfos.box.messagesArea).slimscroll({
height: "250px",
});
//Scroll to the bottom of the conversation
var scrollBottom = $(convInfos.box.messagesArea).prop("scrollHeight")+"px";
$(convInfos.box.messagesArea).slimScroll({
scrollTo: scrollBottom
});
//Success
return true;
},
}
//Register conversations cache cleaning function
ComunicWeb.common.cacheManager.registerCacheCleaner("ComunicWeb.components.conversations.chatWindows.unloadAll");