diff --git a/api.js b/api.js
index 7521469..f591ff5 100644
--- a/api.js
+++ b/api.js
@@ -56,6 +56,8 @@ wss.on('connection', (ws, req) => {
ws.on('close', () => {
user.splice(user.indexOf(thisuser), 1);
console.log(`${req.socket.remoteAddress} (${thisuser}) closed`)
+ wss.clients.forEach(client =>
+ client.send(JSON.stringify({type: "room", name: "open chat", user: user})))
})
ws.send(JSON.stringify({type: "info", time: Date.now(), content: "connected"}))
diff --git a/public/sym/expand_more-black-24dp.svg b/public/sym/expand_more-black-24dp.svg
new file mode 100644
index 0000000..3a8e084
--- /dev/null
+++ b/public/sym/expand_more-black-24dp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/error.vue b/src/components/error.vue
index 1511f62..a8a28ad 100644
--- a/src/components/error.vue
+++ b/src/components/error.vue
@@ -31,6 +31,7 @@ name: "error",
background-color: #E53935;
border-radius: 15px;
box-shadow: 3px 3px 10px #111;
+ animation: slide-from-left alternate 0.2s;
}
#errorBox{
display: none;
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 2645085..3b6df14 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -25,8 +25,8 @@ export default {
this.msg.content.text = ""
document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
document.getElementById("newMessageInput").style.height = "1.25rem"
- let msgContainer = document.getElementById("messagesContainer")
- msgContainer.scrollTo(0, msgContainer.scrollHeight)
+ //let msgContainer = document.getElementById("messagesContainer")
+ //msgContainer.scrollTo(0, msgContainer.scrollHeight)
}
},
resizeMessageBanner(){
diff --git a/src/main.js b/src/main.js
index e56184a..3a8c102 100644
--- a/src/main.js
+++ b/src/main.js
@@ -72,8 +72,8 @@ new Vue({
}
}).$mount('#app')
-const wsurl = 'ws://127.0.0.1:8090'
-//const wsurl = 'wss://chat.adb.sh:8080'
+//const wsurl = 'ws://127.0.0.1:8090'
+const wsurl = 'wss://chat.adb.sh:8080'
const socket = new WebSocket(wsurl)
function element(id){ return document.getElementById(id)}
@@ -102,7 +102,9 @@ socket.onmessage = (e) => {
else if (msg.type === 'message'){
chatroom.messages.push(msg)
let msgContainer = document.getElementById("messagesContainer")
- if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
+ if (msg.content.user === chatroom.username || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
+ setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
+ else document.getElementById("scrollDown").style.display = "block"
}
}
diff --git a/src/views/chat.vue b/src/views/chat.vue
index 91c31f9..48e2784 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -14,6 +14,7 @@
+
@@ -26,16 +27,25 @@ import newMessage from '@/components/newMessage.vue';
import topBanner from '@/components/topBanner.vue';
import main from '@/main.js';
import ChatInformation from "@/components/chatInformation";
+import Icon from "@/components/icon";
export default {
name: 'chat',
components: {
+ Icon,
ChatInformation,
message,
messageReceive,
newMessage,
topBanner
},
+ methods:{
+ scrollToBottom(){
+ let msgContainer = document.getElementById("messagesContainer")
+ msgContainer.scrollTo(0, msgContainer.scrollHeight)
+ document.getElementById("scrollDown").style.display = "none"
+ }
+ },
data(){
return {
chatroom: main.data().chatroom
@@ -59,4 +69,11 @@ export default {
margin-top: 1rem;
margin-bottom: 1rem;
}
+#scrollDown{
+ position: absolute;
+ background-color: #fff;
+ bottom: 5rem;
+ right: 1rem;
+ display: none;
+}