fix chat; get rid of jquery

webroot/index.html

@@ -10,9 +10,6 @@
   <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
   <script src="//unpkg.com/video.js/dist/video.min.js"></script>
 
-  <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
-  <script src="vendor/jquery-2.1.4.min.js"></script>
-
   <script src="vendor/autolink.js"></script>
   <link href="./styles/layout.css" rel="stylesheet" />
 
@@ -85,38 +82,28 @@
                   />
                   <div class="message-content">
                     <p class="message-author">{{ message.author }}</p>
-                    <p class="message-text"v-html="message.formatText()"></p>
+                    <p class="message-text" v-html="message.formatText()"></p>
                   </div>
               </div>
             </div>
           </div>
     
           <div id="message-input-container" class="shadow-md">
-            <form id="message-form" class="flex" @submit="submitChatForm">
+            <form id="message-form" class="flex" /*@submit="submitChatForm"*/>
 
               <input type="hidden" name="inputAuthor" id="self-message-author"  v-model="message.author" />
 
-              <!-- Author -->
-              <!-- <label class="control-label" for="inputAuthor">Author</label>
-              <input
-                id="inputAuthor"
-                type="text"
-                class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
-                placeholder="Name"
-                v-model="message.author"
-              /> -->
-     
-
               <textarea
-                id="inputBody"
+                id="message-body-form"
                 placeholder="Message"
                 v-model="message.body"
-                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 leading-tight  focus:bg-white"
+                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
               ></textarea>
               
               <div id="message-form-actions" class="flex">
                 <span id="message-form-warning"></span>
                 <button
+                  id="button-submit-message"
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
                 > Send
                 </button>

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?
     }
   }
 

webroot/js/message.js

@@ -8,7 +8,6 @@ class Message {
 
 	addNewlines(str) {
 		return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
-
 	}
 	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 = "";
+	}
 }

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);
+  });
+}

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;