]> code.citadel.org Git - citadel.git/blobdiff - webcit-ng/static/js/view_mail.js
"make cc/bcc visible" now makes BOTH visible.
[citadel.git] / webcit-ng / static / js / view_mail.js
index 32af5e33bf19969d06c6fcc0d88be0cfdd240049..0e37bd0d9cd417f3636ea67a9cefefb2dff8da1c 100644 (file)
@@ -49,8 +49,8 @@ mail_delete_func = async(table, row) => {
 
 // Delete the selected messages (can be activated by mouse click or keypress)
 function mail_delete_selected() {
-       var table = document.getElementById("ctdl-onscreen-mailbox");
-       var i, row;
+       let table = document.getElementById("ctdl-onscreen-mailbox");
+       let i, row;
        for (i=0; row=table.rows[i]; ++i) {
                if (row.classList.contains("ctdl-mail-selected")) {
                        mail_delete_func(table, row);
@@ -82,29 +82,31 @@ function mail_keypress(event) {
 
 // Handler function for dragging email messages to other folders
 function mail_dragstart(event) {
-       var i;
-       var count = 0;
-       var table = document.getElementById("ctdl-onscreen-mailbox");
+       let i;
+       let count = 0;
+       let table = document.getElementById("ctdl-onscreen-mailbox");
+       let messages_being_dragged = [] ;
 
-       // Figure out how many messages are being dragged
-       for (i=1; row=table.rows[i]; ++i) {
-               if (row.classList.contains("ctdl-mail-selected")) {
-                       count = count + 1;
+       if (event.target.classList.contains("ctdl-mail-selected")) {
+               // The row being dragged IS selected.  See if any OTHER rows are selected, and they will come along for the ride.
+               for (i=1; row=table.rows[i]; ++i) {
+                       if (row.classList.contains("ctdl-mail-selected")) {
+                               count = count + 1;
+                               messages_being_dragged.push(row.id);    // Tell the clipboard what's being moved.
+                       }
                }
        }
+       else {
+               // The row being dragged is NOT selected.  It will be dragged on its own, ignoring the selected rows.
+               count = 1;
+               messages_being_dragged.push(event.target.id);           // Tell the clipboard what's being moved.
+       }
 
        // Set the custom drag image to an envelope + number of messages being dragged
        d = document.getElementById("ctdl_draggo");
-       d.innerHTML = "<font size='+3'><i class='fa fa-envelope' style='color: red'></i> " + count + "</font>"
+       d.innerHTML = "<font size='+2'><i class='fa fa-envelope' style='color: red'></i> " + count + "</font>"
        event.dataTransfer.setDragImage(d, 0, 0);
-       event.dataTransfer.setData("text/html", "blah blah blah");
-       console.log("source dragstart");
-}
-
-
-// Handler function for dragging email messages to other folders
-function mail_dragend(event) {
-       console.log("source dragend");
+       event.dataTransfer.setData("text", messages_being_dragged);
 }
 
 
@@ -174,7 +176,7 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                        // Display the To: recipients, if any are present
                        if (msg.rcpt) {
                                outmsg += "<br><span>" + _("To:") + " ";
-                               for (var r=0; r<msg.rcpt.length; ++r) {
+                               for (let r=0; r<msg.rcpt.length; ++r) {
                                        if (r != 0) {
                                                outmsg += ", ";
                                        }
@@ -186,7 +188,7 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                        // Display the Cc: recipients, if any are present
                        if (msg.cccc) {
                                outmsg += "<br><span>" + _("Cc:") + " ";
-                               for (var r=0; r<msg.cccc.length; ++r) {
+                               for (let r=0; r<msg.cccc.length; ++r) {
                                        if (r != 0) {
                                                outmsg += ", ";
                                        }
@@ -205,6 +207,29 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                          "</div>";                                             // end header
                }
 
+               // Display attachments, if any are present
+               if (msg.part) {
+                       let display_attachments = 0;
+                       for (let r=0; r<msg.part.length; ++r) {
+                               if (msg.part[r].disp == "attachment") {
+                                       if (display_attachments == 0) {
+                                               outmsg += "<ul>";
+                                       }
+                                       display_attachments += 1;
+                                       outmsg += "<li>"
+                                               + "<a href=\"/ctdl/r/" + escapeHTMLURI(current_room) + "/" + msgnum + "/" + msg.part[r].partnum + "/" + escapeHTMLURI(msg.part[r].filename) + "\" target=\"_blank\">"
+                                               + "<i class=\"fa fa-paperclip\"></i>&nbsp;" + msg.part[r].partnum + ": " + msg.part[r].filename
+                                               + " (" + msg.part[r].len + " " + _("bytes") + ")"
+                                               + "</a>"
+                                               + "</li>";
+                               }
+                       }
+                       if (display_attachments > 0) {
+                               outmsg += "</ul><br>";
+                       }
+               }
+
+
                outmsg +=
                  "<div class=\"ctdl-msg-body\" id=\"" + div + "_body\">"       // begin body
                + msg.text
@@ -235,22 +260,6 @@ function mail_display_message(msgnum, target_div, include_controls) {
 }
 
 
-// after a message is selected or deselected, we call this to set or clear the drag handler.
-function enable_or_disable_draggable(row) {
-       if (row.classList.contains("ctdl-mail-selected")) {
-               row.draggable = "true"
-               row.addEventListener("dragstart", mail_dragstart);
-               row.addEventListener("dragend", mail_dragend);
-       }
-       else {
-               row.draggable = "false"
-               row.removeEventListener("dragstart", mail_dragstart);
-               row.removeEventListener("dragend", mail_dragend);
-       }
-}
-
-
-
 // A message has been selected...
 function click_message(event, msgnum) {
        var table = document.getElementById("ctdl-onscreen-mailbox");
@@ -259,7 +268,6 @@ function click_message(event, msgnum) {
        // ctrl + click = toggle an individual message without changing existing selection
        if (event.ctrlKey) {
                document.getElementById("ctdl-msgsum-" + msgnum).classList.toggle("ctdl-mail-selected");
-               enable_or_disable_draggable(document.getElementById("ctdl-msgsum-" + msgnum));
        }
 
        // shift + click = select a range of messages (start with row 1 because row 0 is the header)
@@ -275,7 +283,6 @@ function click_message(event, msgnum) {
                        else {
                                row.classList.remove("ctdl-mail-selected");
                        }
-                       enable_or_disable_draggable(row);
                }
        }
 
@@ -288,7 +295,6 @@ function click_message(event, msgnum) {
                        else {
                                row.classList.remove("ctdl-mail-selected");
                        }
-                       enable_or_disable_draggable(row);
                }
        }
 
@@ -302,11 +308,13 @@ function click_message(event, msgnum) {
 
 // render one row in the mailbox table (this could be called from one of several places)
 function mail_render_row(msg, is_selected) {
-       row     = "<tr "
+       let row = "<tr "
                + "id=\"ctdl-msgsum-" + msg["msgnum"] + "\" "
                + (is_selected ? "class=\"ctdl-mail-selected\" " : "")
                + "onClick=\"click_message(event," + msg["msgnum"] + ");\""
-               + "onselectstart=\"return false;\""
+               + "onselectstart=\"return false;\" "
+               + "draggable=\"true\" "
+               + "ondragstart=\"mail_dragstart(event)\" "
                + ">"
                + "<td class=\"ctdl-mail-subject\">" + msg["subject"] + "</td>"
                + "<td class=\"ctdl-mail-sender\">" + msg["author"] + "</td>"
@@ -364,9 +372,9 @@ function refresh_mail_display() {
        fetch_stat = async() => {
                response = await fetch(url);
                stat = await(response.json());
-               if (stat.room_mtime > room_mtime) {                     // FIXME commented out to force refreshes
+               if (stat.room_mtime > room_mtime) {                     // if modified...
                        room_mtime = stat.room_mtime;
-                       render_mailbox_display(newmail_notify.YES);
+                       render_mailbox_display(newmail_notify.YES);     // ...force a refresh
                }
        }
        fetch_stat();
@@ -423,8 +431,12 @@ function render_mailbox_display(notify) {
 
 // Compose a new mail message (called by the Reply button here, or by the dispatcher in views.js)
 function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subject) {
+
+       let is_reply = 0;
+
        // m_to will be an array of zero or more recipients for the To: field.  Convert it to a string.
        if (m_to) {
+               is_reply = 1;
                m_to = Array.from(new Set(m_to));       // remove dupes
                m_to_str = "";
                for (i=0; i<m_to.length; ++i) {
@@ -440,6 +452,7 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
 
        // m_to will be an array of zero or more recipients for the Cc: field.  Convert it to a string.
        if (m_cc) {
+               is_reply = 1;
                m_cc = Array.from(new Set(m_cc));       // remove dupes
                m_cc_str = "";
                for (i=0; i<m_cc.length; ++i) {
@@ -462,7 +475,7 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
        // references   list of references, be sure to use this in a reply
        // msgid        if a reply, the msgid of the most recent message in the chain, the one to which we are replying
 
-       // Now display the screen.
+       // Now display the screen.  (Yes, I combined regular strings + template literals.  I just learned template literals.  Converting to all template literals would be fine.)
        compose_screen =
                // Hidden values that we are storing right here in the document tree for later
                  "<input id=\"ctdl_mc_is_quoted\" style=\"display:none\" value=\"" + is_quoted + "\"></input>"
@@ -494,36 +507,54 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                + "<div class=\"ctdl-compose-message-box\" id=\"ctdl-editor-body\" contenteditable=\"true\">"
        ;
 
+       // If this is a quoted reply, insert a div within which we will render the original message.
        if (is_quoted) {
-               compose_screen += "<br><br><blockquote><div id=\"" + quoted_div_name + "\"></div></blockquote>";
+               compose_screen += "<br><br><blockquote><div id=\"" + quoted_div_name + "\">QUOTED MESSAGE HERE</div></blockquote>";
        }
 
-       compose_screen +=
-                 "</div>"
-
-               // The button bar is a Grid element, and is also a Flexbox container.
-               + "<div class=\"ctdl-compose-toolbar\">"
-               + "<span class=\"ctdl-msg-button\" onclick=\"mail_send_message()\"><i class=\"fa fa-paper-plane\" style=\"color:green\"></i> " + _("Send message") + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Save to Drafts") + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Attachments:") + " 0" + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Contacts") + "</span>"
-               + "<span class=\"ctdl-msg-button\" onClick=\"gotoroom(current_room)\"><i class=\"fa fa-trash\" style=\"color:red\"></i> " + _("Cancel") + "</span>"
-               + "</div>"
+       // The button bar is a Grid element, and is also a Flexbox container.
+       compose_screen += `
+               </div>
+               <div class="ctdl-compose-toolbar">
+               <span class="ctdl-msg-button" onclick="mail_send_message()"><i class="fa fa-paper-plane" style="color:green"></i> ${_("Send message")} </span>
+               <span class="ctdl-msg-button"> ${_("Save to Drafts")} </span>
+               <span class="ctdl-msg-button" onClick="show_or_hide_upload_window()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${uploads.length} </span></span>
+               <span class="ctdl-msg-button">  ${_("Contacts")} </span>
+               <span class="ctdl-msg-button" onClick="flush_uploads();gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
+               </div>`
        ;
 
+
        document.getElementById("ctdl-main").innerHTML = compose_screen;
-       mail_display_message(quoted_msgnum, document.getElementById(quoted_div_name), 0);
+
        if (m_cc) {
                document.getElementById("ctdl-compose-cc-label").style.display = "block";
                document.getElementById("ctdl-compose-cc-field").style.display = "block";
        }
-}
 
+       activate_uploads("ctdl-editor-body");
+
+       // If this is a quoted reply, render the original message into the div we set up earlier.
+       if (is_quoted) {
+               document.getElementById(quoted_div_name).innerHTML = quoted_msgnum;
+               mail_display_message(quoted_msgnum, document.getElementById(quoted_div_name), 0);
+       }
+
+       if (is_reply) {
+               setTimeout(() => { document.getElementById("ctdl-editor-body").focus(); }, 0);
+       }
+       else {
+               setTimeout(() => { document.getElementById("ctdl-compose-to-field").focus(); }, 0);
+       }
+
+}
 
 // Called when the user clicks the button to make the hidden "CC" and "BCC" lines appear.
 // It is also called automatically during a Reply when CC is pre-populated.
 function make_cc_bcc_visible() {
        document.getElementById("ctdl-cc-bcc-buttons").style.display = "none";
+       document.getElementById("ctdl-compose-cc-label").style.display = "block";
+       document.getElementById("ctdl-compose-cc-field").style.display = "block";
        document.getElementById("ctdl-compose-bcc-label").style.display = "block";
        document.getElementById("ctdl-compose-bcc-field").style.display = "block";
 }
@@ -545,6 +576,7 @@ function msm_field(element_name, separator) {
 function mail_send_message() {
 
        document.body.style.cursor = "wait";
+       deactivate_uploads();
        let url = "/ctdl/r/" + escapeHTMLURI(current_room)
                + "/dummy_name_for_new_mail"
                + "?wefw="      + msm_field("ctdl_mc_references", "!")                          // references (if present)
@@ -553,21 +585,20 @@ function mail_send_message() {
                + "&mailcc="    + msm_field("ctdl-compose-cc-field", ",")                       // Cc: (if present)
                + "&mailbcc="   + msm_field("ctdl-compose-bcc-field", ",")                      // Bcc: (if present)
        ;
-       boundary = randomString();
-       body_text =
-               "--" + boundary + "\r\n"
-               + "Content-type: text/html\r\n"
-               + "Content-transfer-encoding: quoted-printable\r\n"
-               + "\r\n"
-               + quoted_printable_encode(
-                       "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>"
-               ) + "\r\n"
-               + "--" + boundary + "--\r\n"
-       ;
+       if (uploads.length > 0) {
+               url += "&att=";
+               for (let i=0; i<uploads.length; ++i) {
+                       url += uploads[i]["ref"];
+                       if (i != uploads.length - 1) {
+                               url += ",";
+                       }
+               }
+       }
+       body_text = "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>\r\n";
 
        var request = new XMLHttpRequest();
        request.open("PUT", url, true);
-       request.setRequestHeader("Content-type", "multipart/mixed; boundary=\"" + boundary + "\"");
+       request.setRequestHeader("Content-type", "text/html");
        request.onreadystatechange = function() {
                if (request.readyState == 4) {
                        document.body.style.cursor = "default";
@@ -579,6 +610,9 @@ function mail_send_message() {
                                        }
                                }
 
+                               // successfully saving a message means the attachments are now gone from the server.
+                               uploads = [];
+
                                // After saving the message, go back to the mailbox view.
                                gotoroom(current_room);