/** * 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.__conversationsContenerID), 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"; //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 contener infosBox.messagesArea = createElem2({ appendTo: infosBox.boxBody, type: "div", class: "direct-chat-messages", innerHTML: "

Loading, please wait...

", }); //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 contener var conversationFormContener = createElem2({ appendTo: infosBox.boxFooter, type: "form", class: "create-message-form" }); //Create input group var inputGroup = createElem2({ appendTo: conversationFormContener, type: "div", class: "input-group" }); //Create text input (for message) var inputText = createElem2({ appendTo: inputGroup, type: "textarea", class: "form-control", placeholder: "New message...", }); //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: conversationFormContener, 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 = "

Reloading, please wait...

"; //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; }, } //Register conversations cache cleaning function ComunicWeb.common.cacheManager.registerCacheCleaner("ComunicWeb.components.conversations.chatWindows.unloadAll");