diff --git a/assets/css/components/conversations/windows.css b/assets/css/components/conversations/windows.css index 6cb8b343..4ff9778a 100644 --- a/assets/css/components/conversations/windows.css +++ b/assets/css/components/conversations/windows.css @@ -23,6 +23,15 @@ padding-right:6px; } +#conversationsElem .create-message-form .btn.btn-add-image { + background: none; + color: #808080; +} + +#conversationsElem .create-message-form .btn.btn-add-image:hover{ + color: black; +} + /** * Conversation settings pane */ diff --git a/assets/js/components/conversations/chatWindows.js b/assets/js/components/conversations/chatWindows.js index f1dcad9f..89dc9a98 100644 --- a/assets/js/components/conversations/chatWindows.js +++ b/assets/js/components/conversations/chatWindows.js @@ -117,11 +117,11 @@ ComunicWeb.components.conversations.chatWindows = { //Create form contener var conversationFormContener = createElem2({ appendTo: infosBox.boxFooter, - type: "div", + type: "form", class: "create-message-form" }); - //Create input gropu + //Create input group var inputGroup = createElem2({ appendTo: conversationFormContener, type: "div", @@ -131,12 +131,26 @@ ComunicWeb.components.conversations.chatWindows = { //Create text input (for message) var inputText = createElem2({ appendTo: inputGroup, - type: "input", + type: "textarea", class: "form-control", placeholder: "New message...", - elemType: "text" }); + //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, @@ -144,15 +158,51 @@ ComunicWeb.components.conversations.chatWindows = { 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", + type: "input", class: "btn btn-primary btn-flat", elemType: "submit", - innerHTML: "Send", + value: "Send", }); + //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; }, @@ -209,6 +259,16 @@ ComunicWeb.components.conversations.chatWindows = { //Display conversation settings pane ComunicWeb.components.conversations.chatWindows.showConversationSettings(conversationInfos); + //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; + }; + }); }); @@ -493,6 +553,25 @@ ComunicWeb.components.conversations.chatWindows = { //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."); + console.log(convInfos); + + //Check if message is empty + //if(convInfos.sendMessageForm.inputText) + + //Success + return true; + }, } //Register conversations cache cleaning function diff --git a/assets/js/components/textarea.js b/assets/js/components/textarea.js index 9fd30db0..ae112db7 100644 --- a/assets/js/components/textarea.js +++ b/assets/js/components/textarea.js @@ -18,6 +18,7 @@ var textArea2 = function(infos){ * @info {HTMLElement} element The element to make modern * @info {Integer} minHeight The minimal height for the textarea * @info {Integer} maxHeight The maximal height for the textarea + * @info {Boolean} autosize Enable textarea auto-size plugin * @return {Boolean} True for a success */ textArea2.prototype.init = function(infos){ @@ -38,7 +39,8 @@ textArea2.prototype.init = function(infos){ this.element.style.maxHeight = infos.maxHeight; //Initializate textarea auto-size - $(this.element).textareaAutoSize(); + if(infos.autosize === undefined || infos.autosize) + $(this.element).textareaAutoSize(); //Success return true;