form functionailties

webroot/index.html

@@ -24,8 +24,6 @@
       </h1>
 
       <div id="user-options-container" class="flex">
-        <span id="chat-toggle" class="rounded-full">💬</span>
-
         <div id="user-info">
           <div id="user-info-display" title="Click to update user name" class="flex">
             <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
@@ -44,6 +42,7 @@
             <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
           </div>
         </div>
+        <div id="chat-toggle" class="flex">💬</div>
       </div>
 
     </header>
@@ -56,7 +55,9 @@
             id="video"
             preload="auto"
             controls
-            src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+            autoplay
+            muted
+            src="https://goth.land/hls/stream.m3u8"
           ></video>
         </div>
 
@@ -78,7 +79,7 @@
                   />
                   <div class="message-content">
                     <p class="message-author">{{ message.author }}</p>
-                    <p class="message-text"v-html="message.linkedText()"></p>
+                    <p class="message-text"v-html="message.formatText()"></p>
                   </div>
               </div>
             </div>
@@ -108,7 +109,7 @@
               ></textarea>
               
               <div id="message-form-actions" class="flex">
-                <span id="message-form-warning">X chars left</span>
+                <span id="message-form-warning"></span>
                 <button
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
                 > Send

webroot/js/message.js

@@ -6,8 +6,13 @@ class Message {
 		this.id = model.id
 	}
 
-	linkedText() {
+	addNewlines(str) {
-		return autoLink(this.body, { embed: true })
+		return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
+
+	}
+	formatText() {
+		var linked = autoLink(this.body, { embed: true });
+		return this.addNewlines(linked);
 	}
 
 	toModel() {
@@ -31,6 +36,7 @@ class Messaging {
 
 		this.messageCharCount = 0;
 		this.maxMessageLength = 500;
+		this.maxMessageBuffer = 20;
 
 
 		this.tagChatToggle = document.querySelector("#chat-toggle");
@@ -62,7 +68,7 @@ class Messaging {
 		this.btnCancelUpdateUsername.addEventListener("click", this.handleHideChangeNameForm);
 		
 		this.inputChangeUserName.addEventListener("keydown", this.handleUsernameKeydown);
-		this.formMessageInput.addEventListener("keyup", this.handleMessageInputKeydown);
+		this.formMessageInput.addEventListener("keydown", this.handleMessageInputKeydown);
 	}
 
 	handleChatToggle = () => {
@@ -104,12 +110,19 @@ class Messaging {
 			this.handleHideChangeNameForm();
 		}
 	}
+
 	handleMessageInputKeydown = event => {
-		console.log("keydown text", event.keyCode + ", " + this.formMessageInput.value + " , ", this.formMessageInput.value.length)
+		var okCodes = [37,38,39,40,16,91,18,46,8];
-		// if event.isComposing || 
+		var value = this.formMessageInput.value.trim();
+		var numCharsLeft = this.maxMessageLength - value.length;
+
 		if (event.keyCode === 13) { // enter
 			if (!this.prepNewLine) {
-				// submit
+				// submit()
+				event.preventDefault();
+				// clear out things.
+				this.formMessageInput.value = "";
+				this.tagMessageFormWarning.innerText = "";
 				return;
 			}
 			this.prepNewLine = false;
@@ -120,7 +133,15 @@ class Messaging {
 			this.prepNewLine = true;
 		}
 
-		// var numChars = this.value.
+		if (numCharsLeft <= this.maxMessageBuffer) {
+			this.tagMessageFormWarning.innerText = numCharsLeft + " chars left";
+			if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
+				event.preventDefault();
+				return;
+			}
+		} else {
+			this.tagMessageFormWarning.innerText = "";
+		}
 	}
 
 

webroot/styles/layout.css

@@ -49,32 +49,33 @@ header h1 {
 }
 
 #chat-toggle {
-  margin-right: 2em;
   cursor: pointer;
-  background-color: #000;
+  background-color: #555;
-  border: 1px solid green;
-  display: inline-block;
-  padding: .25em;
-  height: 2em;
-  width: 2em;
   text-align: center;
+  height: 100%;
+  width: 3em;
+  justify-content: center;
+  align-items: center;
+}
+#chat-toggle:hover {
+  background-color: #666;
 }
 
 /* ************************************************8 */
 
 #user-options-container {
-  padding: .5em 1em;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
 }
 
 #user-info-display {
-  display: none;
+  display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  padding: .5em 1em;
 }
 
 #username-avatar {
@@ -96,9 +97,10 @@ header h1 {
 
 
 #user-info-change {
-  display: flex;
+  display: none;
   justify-content: flex-end;
   align-items: center;
+  padding: .25em;
 }
 #username-change-input {
   font-size: .75em;
@@ -202,6 +204,7 @@ header h1 {
 }
 #message-form-warning {
   font-size: .75em;
+  color: red;
 }
 
 /* ************************************************8 */
@@ -242,6 +245,12 @@ header h1 {
   display: none;
 }
 
+.no-chat #chat-toggle {
+  opacity: .5;
+}
+
+/* ************************************************8 */
+
 @media screen and (max-width: 860px) {
   :root {
     --right-col-width: 20em;