// Copyright (c) 2016-2023 by the citadel.org team
//
// This program is open source software. Use, duplication, or
-// disclosure are subject to the GNU General Public License v3.
+// disclosure is subject to the GNU General Public License v3.
// Display the mail folder list in the specified div
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" } );
});
// Turn it into displayable markup
- let rendered_list = "";
- rendered_list += "<ul class=\"ctdl_mail_folders\">\n";
+ let rendered_list = "<ul class=\"ctdl_mail_folders\" id=\"ctdl_mail_folders\">\n";
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 + "');\" "
- + "onClick=\"gotoroom('" + roomlist_json[i].name + "');\">"
+ + "id=\"" + randomString() + "\" "
+ + "onclick=\"gotoroom('" + roomlist_json[i].name + "')\" "
+ + "ondragover=\"mail_folder_dragover(event)\" "
+ + "ondragleave=\"mail_folder_dragleave(event)\" "
+ + "ondrop=\"mail_folder_drop(event, '" + escapeJS(roomlist_json[i].name) + "')\" "
+ + ">"
+ ((roomlist_json[i].name == "Mail") ? _("INBOX") : escapeHTML(roomlist_json[i].name))
+ "</li>\n"
;
}
}
rendered_list += "</ul>";
- console.log(rendered_list);
-
return rendered_list;
}
-// 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);
+// There MUST be a dragover handler, otherwise drop doesn't work.
+// This also seems to be more reliable than a dragStart handler.
+function mail_folder_dragover(event) {
+ event.preventDefault();
+ event.target.classList.toggle("ctdl_mail_folder_droppable", true);
+}
+
+
+// The user is no longer hovering over this folder.
+function mail_folder_dragleave(event) {
+ event.preventDefault();
+ event.target.classList.toggle("ctdl_mail_folder_droppable", 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.
+// Something has been dropped onto a folder.
+function mail_folder_drop(event, destination_room) {
+ event.preventDefault();
+ event.target.classList.toggle("ctdl_mail_folder_droppable", false);
+ var msgs = event.dataTransfer.getData("text").split(",");
+ for (var i=0; i<msgs.length; ++i) {
+ mail_move(msgs[i], destination_room);
+ }
}
+
+// mail_folder_drop() calls this function for each message being moved
+mail_move = async(msgdivid, destination_room) => {
+ let msgdiv = document.getElementById(msgdivid);
+ let m = parseInt(msgdivid.substring(12)); // derive msgnum from row id
+ let source = "/ctdl/r/" + escapeHTMLURI(current_room) + "/" + m;
+ let destination = "/ctdl/r/" + escapeHTMLURI(destination_room);
+
+ let response = await fetch(
+ source, {
+ method: "MOVE",
+ headers: {
+ "Destination" : destination
+ }
+ }
+ );
+
+ // If the server accepted the MOVE operation, delete the row from our screen.
+ if (response.ok) {
+ var table = document.getElementById("ctdl-onscreen-mailbox");
+ for (var i = 0, row; row = table.rows[i]; i++) {
+ if (row.id == msgdivid) {
+ table.deleteRow(i);
+ }
+ }
+ }
+}