Highlight drop target folders

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 9031087f54dad55965f2615fd52976b106c9ffe1..66147d118c5db2cb4c1015e5e3dfababa3d40a61 100644 (file)
--- 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 6f216c418103fcca478db93ccc516c3b838f9527..237962b7b4f8035b84670924d89395df9f852ffd 100644 (file)
--- 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);
 }