feat(website): multiline chat input

ScuffleTV · Aug 12, 2023 · daaf93a · daaf93a
1 parent 8360a9d
commit daaf93a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/frontend/website/src/assets/styles/global.scss b/frontend/website/src/assets/styles/global.scss
@@ -65,9 +65,13 @@ button {
 		background-color: white;
 		color: black;
 
-		&:hover {
+		&:hover:not(:disabled) {
 			filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
 		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
 	}
 
 	&.secondary {

diff --git a/frontend/website/src/components/user-page/chatroom.svelte b/frontend/website/src/components/user-page/chatroom.svelte
@@ -11,6 +11,8 @@
 	import { faFaceSmile } from "@fortawesome/free-regular-svg-icons";
 	import Send from "../icons/send.svelte";
 
+	const MAX_MESSAGE_LENGTH = 500;
+
 	let collapsed: boolean = browser && window.localStorage.getItem("chatroom_collapsed") === "true";
 	$: {
 		if (browser) {
@@ -75,7 +77,11 @@
 	let messagesEl: HTMLDivElement;
 	let atBottom = true;
 
-	$: valid = chatMessage.length > 0 && $user && chatStatus === ChatStatus.Connected;
+	$: valid =
+		chatMessage.length > 0 &&
+		chatMessage.length <= MAX_MESSAGE_LENGTH &&
+		$user &&
+		chatStatus === ChatStatus.Connected;
 
 	function onScroll() {
 		atBottom = messagesEl.scrollTop + messagesEl.offsetHeight >= messagesEl.scrollHeight - 30;
@@ -169,6 +175,21 @@
 		}
 	}
 
+	function onChatmessageKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			sendMessage();
+		} else if (chatMessage.length > MAX_MESSAGE_LENGTH) {
+			e.preventDefault();
+		}
+	}
+
+	function onChatmessagePaste(e: ClipboardEvent) {
+		if (chatMessage.length > MAX_MESSAGE_LENGTH) {
+			e.preventDefault();
+		}
+	}
+
 	function sendMessage() {
 		if (valid) {
 			sendMessageInner(chatMessage);
@@ -230,13 +251,16 @@
 	{/if}
 	<form class="chatbox" on:submit|preventDefault={sendMessage}>
 		<div class="chatbox-input">
-			<input
-				type="text"
-				maxlength="500"
-				placeholder="SEND A MESSAGE"
-				bind:value={chatMessage}
-				required
+			<div
+				class="input"
+				role="textbox"
+				tabindex="0"
+				bind:innerText={chatMessage}
+				on:paste={onChatmessagePaste}
+				on:keydown={onChatmessageKeydown}
+				contenteditable="true"
 			/>
+			<span class="placeholder" class:hidden={chatMessage.trim().length !== 0}>SEND A MESSAGE</span>
 			<button type="button">
 				<Fa icon={faFaceSmile} size="1.5x" />
 			</button>
@@ -396,10 +420,13 @@
 		display: flex;
 		align-items: center;
 
-		& > input {
+		& > .input {
+			max-height: 10rem;
 			width: 100%;
 			font: inherit;
 			color: $textColor;
+			word-break: break-all;
+			overflow-y: scroll;
 
 			background-color: $bgColor2;
 			padding: 0.75rem 1rem;
@@ -415,9 +442,25 @@
 				border-color: $textColorDark;
 				background-color: black;
 			}
+		}
 
-			&::placeholder {
-				color: $translucentColor;
+		& > .placeholder {
+			font: inherit;
+			font-weight: 500;
+			position: absolute;
+			left: 1rem;
+			top: 0;
+			bottom: 0;
+			pointer-events: none;
+
+			display: flex;
+			align-items: center;
+
+			color: $textColorLight;
+			opacity: 0.5;
+
+			&.hidden {
+				visibility: hidden;
 			}
 		}
 
@@ -447,10 +490,6 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-
-		&:disabled {
-			cursor: not-allowed;
-		}
 	}
 
 	.no-messages {