mail_folder_list.js: accept hover and drop events

[citadel.git] / webcit-ng / static / js / mail_folder_list.js

diff --git a/webcit-ng/static/js/mail_folder_list.js b/webcit-ng/static/js/mail_folder_list.js
index e84730586964b1432a1aa459b9b57712f22a299e..ba8a74f56dd26cef4bff340d2f02387c48e31659 100644 (file)
--- a/webcit-ng/static/js/mail_folder_list.js
+++ b/webcit-ng/static/js/mail_folder_list.js
@@ -10,7 +10,7 @@
 function display_mail_folder_list(target_div) {
 
        display_mail_folder_list_async = async(target_div) => {
-               let rendered_list = "hi from display_mail_folder_list_async()";
+               let rendered_list = "";
 
                // load the room list from the Citadel Server
                response = await fetch("/ctdl/r/", { method: "GET" } );
@@ -51,7 +51,11 @@ function render_mail_folder_list(roomlist_json) {
        for (let i=0; i<roomlist_json.length; ++i) {
                if (roomlist_json[i].current_view == views.VIEW_MAILBOX) {
                        rendered_list += "<li "
-                                       + "onmouseup=\"mail_mouseup('" + roomlist_json[i].name + "');\" "
+                                       + "id=\"" + randomString() + "\" "
+                                       + "onDragEnter=\"return mail_dragenter_handler(event)\" "
+                                       + "onDragOver=\"return mail_dragover_handler(event)\" "
+                                       + "onDragLeave=\"return mail_dragleave_handler(event)\" "
+                                       + "onDrop=\"return mail_drop_handler(event, '" + escapeJS(roomlist_json[i].name) + "')\" "
                                        + "onClick=\"gotoroom('" + roomlist_json[i].name + "');\">"
                                        + ((roomlist_json[i].name == "Mail") ? _("INBOX") : escapeHTML(roomlist_json[i].name))
                                        + "</li>\n"
@@ -63,13 +67,28 @@ function render_mail_folder_list(roomlist_json) {
 }
 
 
-// The user released the mouse button over a folder name -- this is probably a drop event
-function mail_mouseup(roomname) {
-       console.log("mail_mouseup " + roomname);
+function mail_dragenter_handler(event) {
+       event.preventDefault();
+       return false;
+}
+
+
+function mail_dragover_handler(event) {
+       event.preventDefault();
+       return false;
+}
 
-       // todo:
-       // 1. First check to see if a drag operation is in progress.  Exit if there is no such case.
-       // 2. Perform the MOVE operation on the selected rows.
 
+function mail_dragleave_handler(event) {
+       event.preventDefault();
+       return false;
 }
 
+
+function mail_drop_handler(event, to_room) {
+       console.log("Drop! " + event.currentTarget.id + " to room '" + to_room + "'");
+       event.preventDefault();
+       return false;
+}
+
+