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

wip handle newline with enter shift

Browse Source
This commit is contained in:
hugogogo
2022-12-20 23:02:45 +01:00
parent 6f29dab558
commit 55cff329c3
6 changed files with 114 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests_hugo/chat_node/chat_client/_test_layouts.js
View File

@@ -2,7 +2,7 @@
*/
let test = document.createElement('form');
test.innerHTML = `
<br><br><button onclick="chat_layout(this.innerText)" type="reset">close</button>
<button onclick="chat_layout(this.innerText)" type="reset">close</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">home</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">room</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">new</button>

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

@@ -12,21 +12,21 @@
<div class="close" id="chat_box">
<!--
classes:
close -> layout close
home -> layout home
room -> layout room
new -> layout new
settings -> layout settings
room_set -> layout room_set
protected -> layout protected
create -> layout create
mute -> layout mute
user -> layout user
_blocked -> for user layout : user is blocked
_muted -> for user layout : user is muted
_admin -> for user layout : you are admin
_room_set -> for user layout : comes from room_set
_settings -> for user layout : comes from settings
1. close -> layout close
2. home -> layout home
3. room -> layout room
4. new -> layout new
5. settings -> layout settings
6. room_set -> layout room_set
7. protected -> layout protected
8. create -> layout create
9. mute -> layout mute
10. user -> layout user
11. _blocked -> for user layout : user is blocked
12. _muted -> for user layout : user is muted
13. _admin -> for user layout : you are admin
14. _room_set -> for user layout : comes from room_set
15. _settings -> for user layout : comes from settings
classes for layout must replace the entire previous class
but classes starting with "_" must be added to existing class
@@ -37,7 +37,6 @@
<button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p>&lt;room_name&gt;</p></button>
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p>
@@ -73,8 +72,8 @@
<div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
<!-- placeholders -------
-->
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">a room</p>
</button>
@@ -88,23 +87,6 @@
</div>
</div>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders -------
-->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
</div>
</div>
<!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn btn"><p>create</p></button>
@@ -113,8 +95,8 @@
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders -------
-->
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p>
</button>
@@ -135,8 +117,8 @@
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p>
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
<!-- placeholders -------
-->
<!-- placeholders
------------- -->
<button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 1</p>
</button>
@@ -161,8 +143,8 @@
<div class="chat_public_rooms __show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders -------
-->
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
<p class="__left">user 1</p>
</button>
@@ -390,15 +372,40 @@
</form>
</div>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders
------------- -->
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
</div>
</div>
<!-- WRITE -->
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
<div class="text_area" contenteditable></div>
<!--
<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>
-->
<div class="text_area" id="chat_msg_write" onkeypress="send_if_enter(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>
<!-- --------------------------------
MODELS
<div class="chat_model" id="chat_model_myroom_name">
</div>
<div class="chat_model" id="chat_model_msg">

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

@@ -13,6 +13,7 @@ const build_new_message = (from, message) => {
const p_name = document.createElement("p");
const p_msg = document.createElement("p");
div.classList.add("chat_msg");
div.classList.add(from);
p_name.classList.add("name");
p_msg.classList.add("msg");
@@ -25,3 +26,10 @@ const build_new_message = (from, message) => {
return div;
}
/*
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
*/

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

@@ -1,14 +1,50 @@
const send_msg = () => {
const div_msg = document.getElementById('msg_write');
function send_msg(evt = null)
{
const div_msg = document.getElementById('chat_msg_write');
const msg = div_msg.innerText.trim();
div_msg.innerText = "";
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)
{
//let test = new Event('test');
let test = new evt;
test = evt;
console.log("evt:");
console.log(evt);
console.log("test:");
console.log(test);
// change height of textarea according to content
//evt.target.style.height = evt.target.scrollHeight + "px";
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'));
return;
}
evt.preventDefault();
send_msg();
}

19
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -1,6 +1,5 @@
/*
cxv
*/
@import 'chat__global.css';
@@ -25,23 +24,9 @@ cxv
@import 'chat_blocked.css';
@import 'chat_form.css';
/*
@import '_chat_controls.css';
@import '_action_board.css';
*/
/* vanish elements wihtout display:none;
input.vanish {
opacity: 0;
position: absolute;
pointer-events: none;
}
*/
/*
/* GRID
GRID
*/
#chat_box * {
@@ -52,7 +37,7 @@ input.vanish {
padding: 0px;
margin: auto;
}
#chat_box .chat_item {
#chat_box .chat_item {
display: none;
/*
border: 1px solid black;

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

@@ -1,15 +1,15 @@
.chat_item#chat_panel_msg {
#chat_box #chat_panel_msg {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid black;
}
.chat_item#chat_panel_msg #chat_api_msg_thread {
#chat_box #chat_panel_msg #chat_api_msg_thread {
flex-direction: column;
width: 100%;
padding: 0px 5px;
margin-bottom: 0px;
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
@@ -22,21 +22,23 @@
ALL MSG
*/
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p {
padding: 0px;
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
margin: 0px;
margin-bottom: 5px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
margin: 5px 0px;
line-height: 8px;
}
@@ -44,12 +46,12 @@
MSG PERSO
*/
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
display: none;
}
@@ -58,14 +60,14 @@
MSG SERVER
*/
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
display: none;
}
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
#chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);