42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip write msg now shift enter to send

Browse Source
This commit is contained in:
hugogogo
2022-12-21 15:44:12 +01:00
parent 55cff329c3
commit 084e18da80
5 changed files with 132 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -395,10 +395,11 @@
<div class="text_area" id="chat_msg_write" onkeypress="send_msg(event.key, event.shiftKey)" contenteditable="true"></div>
<div class="text_area" id="chat_msg_write" onkeypress="" contenteditable="true"></div>
<div class="text_area" id="chat_msg_write" contenteditable="true"></div>
<textarea class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)"></textarea>
<textarea class="text_area" id="chat_msg_write" onkeyup="send_if_enter(event)"></textarea>
<textarea class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)" placeholder="type here"></textarea>
<textarea class="text_area" id="chat_msg_write" onkeyup="send_if_enter(event)" placeholder="type here"></textarea>
<div class="text_area" id="chat_msg_write" onkeydown="send_if_enter(event)" contenteditable="true"></div>
-->
<div class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)" contenteditable="true"></div>
<div class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true"></div>
</div>
<!-- send -->
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>

5
tests_hugo/chat_node/chat_client/chat_add_msg.js
View File

@@ -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);

123
tests_hugo/chat_node/chat_client/chat_send_msg.js
View File

@@ -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 = '<br>';
// range.insertNode(div);
// range.setStartAfter(div);
// range.setEndAfter(div);
// document.getSelection().removeAllRanges();
// document.getSelection().addRange(range);
//
// /*
// document.execCommand('insertLineBreak');
// document.execCommand('insertHTML', false, '<div><br></div>');
// */
//
// return;
// }
}

2
tests_hugo/chat_node/chat_client/style/chat_msg.css
View File

@@ -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;
*/
}

35
tests_hugo/chat_node/chat_client/style/chat_write.css
View File

@@ -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%;
}