From f96e8a5f63e77482a1f1b2cc7a38293886c5cb00 Mon Sep 17 00:00:00 2001
From: Art Cancro <ajc@citadel.org>
Date: Tue, 4 Jul 2023 08:13:49 -0900
Subject: [PATCH] Highlight drop target folders

---
 webcit-ng/static/css/webcit.css         |  5 +++++
 webcit-ng/static/js/mail_folder_list.js | 26 ++++++++++++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 9031087f5..66147d118 100644
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -287,6 +287,11 @@ html,body,h1,h2,h3,h4,h5 {
 	color: DarkSlateGrey;
 }
 
+.ctdl_mail_folder_droppable {
+	background-color: LightGrey;
+	font-weight: bold;
+}
+
 .ctdl-avatar {
 	float: left;
 	padding-right: 2px;
diff --git a/webcit-ng/static/js/mail_folder_list.js b/webcit-ng/static/js/mail_folder_list.js
index 6f216c418..237962b7b 100644
--- a/webcit-ng/static/js/mail_folder_list.js
+++ b/webcit-ng/static/js/mail_folder_list.js
@@ -52,7 +52,7 @@ function render_mail_folder_list(roomlist_json) {
 			rendered_list += "<li "
 					+ "id=\"" + randomString() + "\" "
 					+ "onclick=\"gotoroom('" + roomlist_json[i].name + "')\" "
-					+ "ondragstart=\"mail_folder_dragstart(event)\" "
+					//+ "ondragstart=\"mail_folder_dragstart(event)\" "
 					+ "ondragover=\"mail_folder_dragover(event)\" "
 					+ "ondragleave=\"mail_folder_dragleave(event)\" "
 					+ "ondrop=\"mail_folder_drop(event, '" + escapeJS(roomlist_json[i].name) + "')\" "
@@ -67,27 +67,31 @@ function render_mail_folder_list(roomlist_json) {
 }
 
 
-// The user has begun hovering over this folder while dragging one or more messages -- highlight it as a drop target
-function mail_folder_dragstart(event) {
-	event.preventDefault();
-	// FIXME write this
-}
+// The user has begun hovering over this folder while dragging one or more messages.
+//function mail_folder_dragstart(event) {
+	//event.preventDefault();
+	//console.log("mail_folder_dragstart()");
+//}
 
 
-// There MUST be a dragover handler, otherwise drop doesn't work.  This may be a browser specific quirk.
+// There MUST be a dragover handler, otherwise drop doesn't work.
 function mail_folder_dragover(event) {
 	event.preventDefault();
+	console.log("mail_folder_dragover() " + event.target.id);
+	event.target.classList.toggle("ctdl_mail_folder_droppable", true);
 }
 
 
-// The user is no longer hovering over this folder -- unhighlight it
+// The user is no longer hovering over this folder.
 function mail_folder_dragleave(event) {
 	event.preventDefault();
-	// FIXME write this
+	console.log("mail_folder_dragleave()");
+	event.target.classList.toggle("ctdl_mail_folder_droppable", false);
 }
 
 
-function mail_folder_drop(event, target) {
+function mail_folder_drop(event, destination_room) {
 	event.preventDefault();
-	console.log("FIXME: complete the code for target DROP! " + target);
+	console.log("mail_folder_drop(" + destination_room + ")");
+	event.target.classList.toggle("ctdl_mail_folder_droppable", false);
 }
-- 
2.39.2