From 85edf78e7ecb8897427dd9ddb2141f4ace438867 Mon Sep 17 00:00:00 2001 From: kingo2157 Date: Sat, 10 Oct 2020 17:41:16 +0100 Subject: [PATCH 1/4] Added Styling, dummy div to auto scroll --- .vscode/settings.json | 3 +++ client/dist/home.css | 0 client/dist/main.css | 11 +++++++++++ client/dist/main.dev.js | 15 +++++++++++++++ client/index.html | 5 ++++- client/main.js | 4 +++- client/main.scss | 12 ++++++++++++ 7 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 client/dist/home.css create mode 100644 client/dist/main.css create mode 100644 client/dist/main.dev.js create mode 100644 client/main.scss diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..28a51d5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": false +} \ No newline at end of file diff --git a/client/dist/home.css b/client/dist/home.css new file mode 100644 index 0000000..e69de29 diff --git a/client/dist/main.css b/client/dist/main.css new file mode 100644 index 0000000..6d65a54 --- /dev/null +++ b/client/dist/main.css @@ -0,0 +1,11 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto Condensed"; +} + +body { + background-color: #5386E4; +} \ No newline at end of file diff --git a/client/dist/main.dev.js b/client/dist/main.dev.js new file mode 100644 index 0000000..fc09a54 --- /dev/null +++ b/client/dist/main.dev.js @@ -0,0 +1,15 @@ +"use strict"; + +var webSocket = new WebSocket("wss://192.168.0.11:8000/"); +document.getElementById("messageForm").addEventListener("submit", function (e) { + e.preventDefault(); + webSocket.send(JSON.stringify({ + username: document.getElementById('usernameInput').value, + message: document.getElementById('messageInput').value + })); +}); +webSocket.addEventListener('message', function (e) { + var msg = JSON.parse(e.data); + document.getElementById("messages").innerHTML += "\n ".concat(msg.username, ": ").concat(msg.message, "
\n "); + dummy.scrollIntoView(); +}); \ No newline at end of file diff --git a/client/index.html b/client/index.html index bb61bf8..ed09560 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,8 @@ - Chat + Chat App + @@ -11,6 +12,8 @@
+
+
diff --git a/client/main.js b/client/main.js index 70f17e2..656649d 100644 --- a/client/main.js +++ b/client/main.js @@ -1,4 +1,4 @@ -var webSocket = new WebSocket("wss://192.168.0.11:8000/"); +const webSocket = new WebSocket("wss://192.168.0.11:8000/"); document.getElementById("messageForm").addEventListener("submit", (e) => { e.preventDefault(); @@ -15,4 +15,6 @@ webSocket.addEventListener('message', function(e) { document.getElementById("messages").innerHTML += ` ${msg.username}: ${msg.message}
`; + + dummy.scrollIntoView(); }); diff --git a/client/main.scss b/client/main.scss new file mode 100644 index 0000000..ea848ed --- /dev/null +++ b/client/main.scss @@ -0,0 +1,12 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto Condensed"; +} + +body { + background-color: #5386E4; +} \ No newline at end of file From 4422613ec21124615098c08448a1533cd5e4fb40 Mon Sep 17 00:00:00 2001 From: kingo2157 Date: Sun, 11 Oct 2020 22:12:23 +0100 Subject: [PATCH 2/4] innerHTML changed to safer method --- .gitignore | 2 ++ client/dist/home.css | 0 client/dist/main.dev.js | 4 ++-- client/index.html | 2 +- client/main.js | 8 ++++---- 5 files changed, 9 insertions(+), 7 deletions(-) delete mode 100644 client/dist/home.css diff --git a/.gitignore b/.gitignore index 0213404..5449006 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,5 @@ bin/ # Dependency directories (remove the comment below to include it) # vendor/ +client/dist/main.dev.js +client/dist/home.css diff --git a/client/dist/home.css b/client/dist/home.css deleted file mode 100644 index e69de29..0000000 diff --git a/client/dist/main.dev.js b/client/dist/main.dev.js index fc09a54..601836f 100644 --- a/client/dist/main.dev.js +++ b/client/dist/main.dev.js @@ -10,6 +10,6 @@ document.getElementById("messageForm").addEventListener("submit", function (e) { }); webSocket.addEventListener('message', function (e) { var msg = JSON.parse(e.data); - document.getElementById("messages").innerHTML += "\n ".concat(msg.username, ": ").concat(msg.message, "
\n "); - dummy.scrollIntoView(); + document.getElementById("messages").insertAdjacentHTML('beforebegin', "
".concat(msg.username, ": ").concat(msg.message, "

")); + scrollBtm.scrollIntoView(); }); \ No newline at end of file diff --git a/client/index.html b/client/index.html index ed09560..b30f89c 100644 --- a/client/index.html +++ b/client/index.html @@ -12,7 +12,7 @@
-
+
diff --git a/client/main.js b/client/main.js index 656649d..2ab9fe1 100644 --- a/client/main.js +++ b/client/main.js @@ -1,3 +1,5 @@ +"use strict"; + const webSocket = new WebSocket("wss://192.168.0.11:8000/"); document.getElementById("messageForm").addEventListener("submit", (e) => { @@ -12,9 +14,7 @@ document.getElementById("messageForm").addEventListener("submit", (e) => { webSocket.addEventListener('message', function(e) { var msg = JSON.parse(e.data); - document.getElementById("messages").innerHTML += ` - ${msg.username}: ${msg.message}
- `; + document.getElementById("messages").insertAdjacentHTML('beforebegin', `
${msg.username}: ${msg.message}

`); - dummy.scrollIntoView(); + scrollBtm.scrollIntoView(); }); From 21fec66439bc75540c68f00d38407d3c97d93899 Mon Sep 17 00:00:00 2001 From: IRHM <37304121+IRHM@users.noreply.github.com> Date: Mon, 12 Oct 2020 07:53:38 +0100 Subject: [PATCH 3/4] Remove unnecessary files --- .gitignore | 2 -- .vscode/settings.json | 3 --- client/dist/main.css | 11 ----------- client/dist/main.dev.js | 15 --------------- 4 files changed, 31 deletions(-) delete mode 100644 .vscode/settings.json delete mode 100644 client/dist/main.css delete mode 100644 client/dist/main.dev.js diff --git a/.gitignore b/.gitignore index 5449006..0213404 100644 --- a/.gitignore +++ b/.gitignore @@ -14,5 +14,3 @@ bin/ # Dependency directories (remove the comment below to include it) # vendor/ -client/dist/main.dev.js -client/dist/home.css diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 28a51d5..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "compile-hero.disable-compile-files-on-did-save-code": false -} \ No newline at end of file diff --git a/client/dist/main.css b/client/dist/main.css deleted file mode 100644 index 6d65a54..0000000 --- a/client/dist/main.css +++ /dev/null @@ -1,11 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Roboto Condensed"; -} - -body { - background-color: #5386E4; -} \ No newline at end of file diff --git a/client/dist/main.dev.js b/client/dist/main.dev.js deleted file mode 100644 index 601836f..0000000 --- a/client/dist/main.dev.js +++ /dev/null @@ -1,15 +0,0 @@ -"use strict"; - -var webSocket = new WebSocket("wss://192.168.0.11:8000/"); -document.getElementById("messageForm").addEventListener("submit", function (e) { - e.preventDefault(); - webSocket.send(JSON.stringify({ - username: document.getElementById('usernameInput').value, - message: document.getElementById('messageInput').value - })); -}); -webSocket.addEventListener('message', function (e) { - var msg = JSON.parse(e.data); - document.getElementById("messages").insertAdjacentHTML('beforebegin', "
".concat(msg.username, ": ").concat(msg.message, "

")); - scrollBtm.scrollIntoView(); -}); \ No newline at end of file From 7d55c50d058408ea663ab94933a7a1d8687d3509 Mon Sep 17 00:00:00 2001 From: IRHM <37304121+IRHM@users.noreply.github.com> Date: Mon, 12 Oct 2020 08:11:59 +0100 Subject: [PATCH 4/4] Add some basic styling to make messages scrollable on its own also fix insertAdjacentHTML inserting before div and scroll to bottom of div with a better method --- .gitignore | 3 +++ client/index.html | 17 ++++++++--------- client/main.js | 6 +++--- client/main.scss | 12 ------------ client/styles/main.scss | 21 +++++++++++++++++++++ 5 files changed, 35 insertions(+), 24 deletions(-) delete mode 100644 client/main.scss create mode 100644 client/styles/main.scss diff --git a/.gitignore b/.gitignore index 0213404..c446294 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,6 @@ bin/ # Dependency directories (remove the comment below to include it) # vendor/ + +# Compiled client files +main.min.css* diff --git a/client/index.html b/client/index.html index b30f89c..cdc90ec 100644 --- a/client/index.html +++ b/client/index.html @@ -3,19 +3,18 @@ Chat App - + - Username: -

+
+ -
+
-
- - - - +
+ +
+
diff --git a/client/main.js b/client/main.js index 2ab9fe1..094a821 100644 --- a/client/main.js +++ b/client/main.js @@ -13,8 +13,8 @@ document.getElementById("messageForm").addEventListener("submit", (e) => { webSocket.addEventListener('message', function(e) { var msg = JSON.parse(e.data); + let msgEl = document.getElementById("messages"); - document.getElementById("messages").insertAdjacentHTML('beforebegin', `
${msg.username}: ${msg.message}

`); - - scrollBtm.scrollIntoView(); + msgEl.insertAdjacentHTML('beforeend', `
${msg.username}: ${msg.message}

`); + msgEl.scrollTop = msgEl.scrollHeight; }); diff --git a/client/main.scss b/client/main.scss deleted file mode 100644 index ea848ed..0000000 --- a/client/main.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Roboto Condensed"; -} - -body { - background-color: #5386E4; -} \ No newline at end of file diff --git a/client/styles/main.scss b/client/styles/main.scss new file mode 100644 index 0000000..9d941e2 --- /dev/null +++ b/client/styles/main.scss @@ -0,0 +1,21 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto Condensed"; +} + +body { + background-color: #5386E4; +} + +.messagesContainer { + height: 100vh; + + #messages { + height: 250px; + overflow: auto; + } +}