From 084e18da80a1c5deaf7b0a827d660793c4031224 Mon Sep 17 00:00:00 2001 From: hugogogo Date: Wed, 21 Dec 2022 15:44:12 +0100 Subject: [PATCH] wip write msg now shift enter to send --- tests_hugo/chat_node/chat_client/chat.html | 7 +- .../chat_node/chat_client/chat_add_msg.js | 5 +- .../chat_node/chat_client/chat_send_msg.js | 123 +++++++++++++----- .../chat_node/chat_client/style/chat_msg.css | 2 + .../chat_client/style/chat_write.css | 35 ++++- 5 files changed, 132 insertions(+), 40 deletions(-) diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html index a5287245..06a0aa86 100644 --- a/tests_hugo/chat_node/chat_client/chat.html +++ b/tests_hugo/chat_node/chat_client/chat.html @@ -395,10 +395,11 @@
- - + + +
--> -
+
diff --git a/tests_hugo/chat_node/chat_client/chat_add_msg.js b/tests_hugo/chat_node/chat_client/chat_add_msg.js index 4a8af0e0..5cbd2028 100644 --- a/tests_hugo/chat_node/chat_client/chat_add_msg.js +++ b/tests_hugo/chat_node/chat_client/chat_add_msg.js @@ -5,6 +5,7 @@ const add_message = (from, message ) => { //console.log("received message:"); //console.log(`[${message}]`); + // TODO : find the best and secure way to create element with svelte div_thread.appendChild(build_new_message(from, message)); } @@ -19,7 +20,9 @@ const build_new_message = (from, message) => { p_msg.classList.add("msg"); p_name.appendChild(document.createTextNode(from + " :")); - p_msg.appendChild(document.createTextNode(message)); + //p_msg.appendChild(document.createTextNode(message)); + // tmp, bad security practice : + p_msg.innerHTML = message; div.appendChild(p_name); div.appendChild(p_msg); diff --git a/tests_hugo/chat_node/chat_client/chat_send_msg.js b/tests_hugo/chat_node/chat_client/chat_send_msg.js index b29a7deb..62620ee2 100644 --- a/tests_hugo/chat_node/chat_client/chat_send_msg.js +++ b/tests_hugo/chat_node/chat_client/chat_send_msg.js @@ -1,50 +1,115 @@ -function send_msg(evt = null) +function send_msg() { const div_msg = document.getElementById('chat_msg_write'); - const msg = div_msg.innerText.trim(); - - div_msg.innerText = ""; +//console.log(div_msg.innerHTML); + let msg = ""; + if (div_msg.localName === "div") + { + //msg = div_msg.innerText.trim(); + msg = div_msg.innerHTML; + div_msg.innerText = ""; + } + else if (div_msg.localName === "textarea") + { + msg = div_msg.value.trim(); + div_msg.value = ""; + } div_msg.focus(); - /* - const div_msg = document.getElementById('chat_msg_write'); - const msg = div_msg.value.trim(); - - div_msg.value = ""; - div_msg.focus(); - */ - if (msg.length > 0) { socket.emit('sendmsg', msg); add_message("me", msg); } } -function send_if_enter(evt) +function send_msg_if(evt) { - //let test = new Event('test'); +//console.log("evt:"); +//console.log(evt); + // https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events + /* + let test = new Event('test'); let test = new evt; - test = evt; - console.log("evt:"); - console.log(evt); - console.log("test:"); - console.log(test); + let test = new Event('keypress'); +console.log("test:"); +console.log(test); +// test = evt; + test = structuredClone(evt); +console.log("test:"); +console.log(test); +// test = Object.setPrototypeOf(test, evt); +// test = Object.create(evt); +//console.log("test:"); +//console.log(test); + Object.defineProperty(evt, 'shiftKey', {value: false}); +console.log("evt:"); +console.log(evt); + */ // change height of textarea according to content //evt.target.style.height = evt.target.scrollHeight + "px"; - if (evt.key != "Enter") +/* + if (evt.key !== "Enter") return; - if (evt.shiftKey == true) - { - console.log(evt.target); - console.log(evt.target.value); - console.log(evt.target.innerText); - evt.preventDefault(); - // https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330 - evt.target.dispatchEvent(new Event('Enter')); + evt.preventDefault(); + if (evt.shiftKey === false) + send_msg(); + +// alternative: + if (evt.shiftKey === true) return; - } evt.preventDefault(); send_msg(); +*/ + + if (evt.shiftKey && evt.key === "Enter") + { + evt.preventDefault(); + send_msg(); + } + +// else +// { +// //console.log(evt.target); +// //console.log(evt.target.value); +// //console.log(evt.target.innerText); +// // https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330 +// //evt.target.dispatchEvent(new Event('Enter')); +// //evt.target.dispatchEvent(new CustomEvent('keypress', { +// // charCode: 13, +// // key: "Enter", +// // keyCode: 13, +// //})); +// +// //let start = evt.target.selectionStart; +// //console.log("start:"); +// //console.log(start); +// //let end = evt.target.selectionEnd; +// //console.log("end:"); +// //console.log(end); +// //console.log("evt.selectionStart:"); +// //console.log(evt.selectionStart); +// +// //evt.preventDefault(); +// //console.log("document.getSelection():"); +// //console.log(document.getSelection()); +// //document.getSelection().insertText('\n'); +// +// const range = document.getSelection().getRangeAt(0); +// const div = document.createElement('div'); +// div.innerHTML = '
'; +// range.insertNode(div); +// range.setStartAfter(div); +// range.setEndAfter(div); +// document.getSelection().removeAllRanges(); +// document.getSelection().addRange(range); +// +// /* +// document.execCommand('insertLineBreak'); +// document.execCommand('insertHTML', false, '

'); +// */ +// +// return; +// } } diff --git a/tests_hugo/chat_node/chat_client/style/chat_msg.css b/tests_hugo/chat_node/chat_client/style/chat_msg.css index 0e382aa5..5d7180a6 100644 --- a/tests_hugo/chat_node/chat_client/style/chat_msg.css +++ b/tests_hugo/chat_node/chat_client/style/chat_msg.css @@ -37,8 +37,10 @@ color: rgb(100, 100, 100); } #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg { + /* margin: 5px 0px; line-height: 8px; + */ } diff --git a/tests_hugo/chat_node/chat_client/style/chat_write.css b/tests_hugo/chat_node/chat_client/style/chat_write.css index aeed2481..77188d81 100644 --- a/tests_hugo/chat_node/chat_client/style/chat_write.css +++ b/tests_hugo/chat_node/chat_client/style/chat_write.css @@ -9,17 +9,38 @@ bottom: 0px; left: 0px; width: 100%; - height: auto; - min-height: 100%; - max-height: 300px; - /* - resize: none; - */ overflow-x: hidden; overflow-y: scroll; background-color: white; border: 1px solid black; } -#chat_box .chat_item#chat_panel_write .text_area div { +#chat_box .chat_item#chat_panel_write .text_area * { + /* + margin-left: 0px; + */ display: block ruby; } +/* +#chat_box .chat_item#chat_panel_write .text_area br { + margin-top: 10px; +} +#chat_box .chat_item#chat_panel_write .text_area div { +} +*/ +/* if .text_area is a contenteditable div +*/ +#chat_box .chat_item#chat_panel_write .text_area { + height: auto; + min-height: 100%; + max-height: 300px; +} +/* if .text_area is a textarea +*/ +#chat_box .chat_item#chat_panel_write textarea.text_area { + resize: none; + height: 100px; +} +#chat_box .chat_item#chat_panel_write textarea.text_area:placeholder-shown { + height: 100%; +} +