-
-
-
-
-
diff --git a/webroot/js/app.js b/webroot/js/app.js
index e9864a693..8505bd9e6 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -84,8 +84,8 @@ function setupWebsocket() {
})
if (existing.length === 0 || !existing) {
- this.messagesContainer.messages.push(message)
- scrollSmoothToBottom("messages-container")
+ this.messagesContainer.messages.push(message);
+ setTimeout(() => { jumpToBottom("#messages-container"); } , 10); // could be better. is there a sort of Vue "componentDidUpdate" we can do this on?
}
}
diff --git a/webroot/js/message.js b/webroot/js/message.js
index 61014de8d..b69084e19 100644
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@@ -8,7 +8,6 @@ class Message {
addNewlines(str) {
return str.replace(/(?:\r\n|\r|\n)/g, '
');
-
}
formatText() {
var linked = autoLink(this.body, { embed: true });
@@ -21,7 +20,7 @@ class Message {
body: this.body(),
image: this.image(),
id: this.id
- }
+ };
}
}
@@ -58,8 +57,9 @@ class Messaging {
this.inputChangeUserName = document.querySelector("#username-change-input");
this.btnUpdateUserName = document.querySelector("#button-update-username");
this.btnCancelUpdateUsername = document.querySelector("#button-cancel-change");
+ this.btnSubmitMessage = document.querySelector("#button-submit-message");
- this.formMessageInput = document.querySelector("#inputBody");
+ this.formMessageInput = document.querySelector("#message-body-form");
}
init() {
this.tagChatToggle.addEventListener("click", this.handleChatToggle);
@@ -70,30 +70,8 @@ class Messaging {
this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
+ this.btnSubmitMessage.addEventListener("click", this.handleSubmitChatButton);
this.initLocalStates();
-
- var vueMessageForm = new Vue({
- el: "#message-form",
- data: {
- message: {
- author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1),
- body: ""
- }
- },
- methods: {
- submitChatForm: function (e) {
- const message = new Message(this.message);
- message.id = uuidv4();
- localStorage.author = message.author;
- const messageJSON = JSON.stringify(message);
- window.ws.send(messageJSON);
- e.preventDefault();
-
- this.message.body = "";
- }
- }
- });
-
}
@@ -136,10 +114,6 @@ class Messaging {
if (newValue) {
this.userName = newValue;
this.updateUsernameFields(newValue);
- // this.inputChangeUserName.value = newValue;
- // this.inputMessageAuthor.value = newValue;
- // this.tagUsernameDisplay.innerText = newValue;
- // this.imgUsernameAvatar.src = this.avatarSource + newValue;
setLocalStorage(this.keyUsername, newValue);
}
this.handleHideChangeNameForm();
@@ -160,11 +134,9 @@ class Messaging {
if (event.keyCode === 13) { // enter
if (!this.prepNewLine) {
- // submit()
+ this.submitChat(value);
event.preventDefault();
- // clear out things.
- this.formMessageInput.value = "";
- this.tagMessageFormWarning.innerText = "";
+
return;
}
this.prepNewLine = false;
@@ -185,7 +157,30 @@ class Messaging {
this.tagMessageFormWarning.innerText = "";
}
}
+ handleSubmitChatButton = event => {
+ var value = this.formMessageInput.value.trim();
+ if (value) {
+ this.submitChat(value);
+ event.preventDefault();
+ return false;
+ }
+ event.preventDefault();
+ return false;
+ }
+ submitChat(content) {
+ if (!content) {
+ return;
+ }
+ var message = new Message({
+ body: content,
+ author: this.username,
+ id: uuidv4(),
+ });
+ const messageJSON = JSON.stringify(message);
+ window.ws.send(messageJSON);
-
-
+ // clear out things.
+ this.formMessageInput.value = "";
+ this.tagMessageFormWarning.innerText = "";
+ }
}
\ No newline at end of file
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
new file mode 100644
index 000000000..d01eeb777
--- /dev/null
+++ b/webroot/js/utils.js
@@ -0,0 +1,32 @@
+function getLocalStorage(key) {
+ try {
+ return localStorage.getItem(key);
+ } catch (e) {
+ }
+ return null;
+}
+
+function setLocalStorage(key, value) {
+ try {
+ localStorage.setItem(key, value);
+ return true;
+ } catch (e) {}
+ return false;
+}
+
+function jumpToBottom(id) {
+ const div = document.querySelector(id);
+ console.log(div.scrollTop, div.scrollHeight , div.clientHeight)
+ div.scrollTo({
+ top: div.scrollHeight - div.clientHeight,
+ left: 0,
+ behavior: 'smooth'
+ });
+}
+
+function uuidv4() {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+ const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ });
+}
\ No newline at end of file
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index c72bf203c..583c4de44 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -198,6 +198,9 @@ header h1 {
align-items: flex-end;
margin-bottom: 0;
}
+#message-body-form {
+ font-size: 1em;
+}
#message-form-actions {
flex-direction: row;
justify-content: space-between;