From b421e8365f5536166435db5b934dc567851fdefd Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 21 Jun 2017 16:44:10 +0200 Subject: [PATCH] First version of send conversation message --- .../css/components/conversations/windows.css | 7 + assets/js/common/utils.js | 6 +- .../components/conversations/chatWindows.js | 189 +++++++++++------- assets/js/pages/home/home.js | 2 +- 4 files changed, 133 insertions(+), 71 deletions(-) diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css index 44735d97..6cb8b343 100644 --- a/assets/css/components/conversations/windows.css +++ b/assets/css/components/conversations/windows.css @@ -15,6 +15,13 @@ margin-bottom: 0px; } +/** + * Conversations create message form + */ +#conversationsElem .create-message-form .btn { + padding-left: 6px; + padding-right:6px; +} /** * Conversation settings pane diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index 0aa07281..9e761e06 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -32,7 +32,7 @@ function createElem(nodeType, appendTo){ * @info {String} id The ID of the new element * @info {String} title The title of the new element * @info {String} src The src attribute of the new element - * @info {String} type The type of the new element + * @info {String} elemType The type attribute of the new element * @info {String} value The value of the new element * @info {String} placeholder The placeholder of the new element * @info {String} innerHTML Specify the html content of the newly created element @@ -67,8 +67,8 @@ function createElem2(infos){ newElem.src = infos.src; //Specify element type - if(infos.type) - newElem.type = infos.type; + if(infos.elemType) + newElem.type = infos.elemType; //Specify element value if(infos.value) diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index f0d571d8..f1dcad9f 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/assets/js/components/conversations/chatWindows.js @@ -35,6 +35,128 @@ ComunicWeb.components.conversations.chatWindows = { 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 + infosBox.boxBody.innerHTML = "
Hello world

"; + + //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: "div", + class: "create-message-form" + }); + + //Create input gropu + var inputGroup = createElem2({ + appendTo: conversationFormContener, + type: "div", + class: "input-group" + }); + + //Create text input (for message) + var inputText = createElem2({ + appendTo: inputGroup, + type: "input", + class: "form-control", + placeholder: "New message...", + elemType: "text" + }); + + //Create button group + var buttonGroup = createElem2({ + appendTo: inputGroup, + type: "span", + class: "input-group-btn", + }); + + //Add send button + var sendButton = createElem2({ + appendTo: buttonGroup, + type: "button", + class: "btn btn-primary btn-flat", + elemType: "submit", + innerHTML: "Send", + }); + + //Success + return true; + }, + /** * Load (or reload) a conversation * @@ -134,73 +256,6 @@ ComunicWeb.components.conversations.chatWindows = { 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 - infosBox.boxBody.innerHTML = "
Hello world

"; - - //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"; - - //Return informations about the chat window - return infosBox; - - }, - /** * Change the name of the converation at the top of the windows * diff --git a/assets/js/pages/home/home.js b/assets/js/pages/home/home.js index ee399706..259ce4fe 100644 --- a/assets/js/pages/home/home.js +++ b/assets/js/pages/home/home.js @@ -60,7 +60,7 @@ ComunicWeb.pages.home.home = { maxHeight: "70px", }); - console.log(textarea2); + } else{ //Display landing page