From 5ed54335a11e063f46c80620edb084d814a34155 Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Sun, 1 Nov 2020 17:06:02 +0100
Subject: [PATCH] Disable attachment button when input is not empty

---
 files/style/be.bastelstu.chat.scss                 |  6 ++++++
 .../js/Bastelstu.be/Chat/Ui/Attachment/Upload.js   | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/files/style/be.bastelstu.chat.scss b/files/style/be.bastelstu.chat.scss
index d8358a7..3645f1b 100644
--- a/files/style/be.bastelstu.chat.scss
+++ b/files/style/be.bastelstu.chat.scss
@@ -385,6 +385,12 @@ #tpl_chat_log {
 				flex-shrink: 0;
 				margin-right: 5px;
 
+				@include screen-xs {
+					> .disabled {
+						display: none;
+					}
+				}
+
 				.icon16 {
 					display: none;
 				}
diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
index 58740b4..b7c3adc 100644
--- a/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
+++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Attachment/Upload.js
@@ -23,9 +23,9 @@ define([ 'WoltLabSuite/Core/Language'
 	const DIALOG_BUTTON_ID    = 'chatAttachmentUploadButton'
 	const DIALOG_CONTAINER_ID = 'chatAttachmentUploadDialog'
 
-	const DEPENDENCIES = [ 'Room' ];
+	const DEPENDENCIES = [ 'UiInput', 'Room' ];
 	class UiAttachmentUpload extends Upload {
-		constructor(room) {
+		constructor(input, room) {
 			const buttonContainer = document.querySelector(`#${DIALOG_CONTAINER_ID} > .upload`)
 			const buttonContainerId = DomUtil.identify(buttonContainer)
 
@@ -37,6 +37,7 @@ define([ 'WoltLabSuite/Core/Language'
 				acceptableFiles: [ '.png', '.gif', '.jpg', '.jpeg' ]
 			})
 
+			this.input = input
 			this.room = room
 			this.previewContainer = previewContainer
 			this.tmpHash = undefined
@@ -64,6 +65,15 @@ define([ 'WoltLabSuite/Core/Language'
 
 				const deleteAction = new WCF.Action.Delete('wcf\\data\\attachment\\AttachmentAction', `#${this.previewContainer.id} > p`)
 				deleteAction.setCallback(() => this.closeDialog())
+
+				this.input.on('input', (event) => {
+					if (event.target.input.value.length == 0) {
+						button.classList.remove('disabled')
+					}
+					else {
+						button.classList.add('disabled')
+					}
+				})
 			}
 		}