]> 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 2e05f7d6df7516643dadf8e0c33460613c33dde8..0e37bd0d9cd417f3636ea67a9cefefb2dff8da1c 100644 (file)
@@ -13,7 +13,6 @@ var newmail_notify = {
         NO  : 0,                                                               // do not perform new mail notifications
         YES : 1                                                                        // yes, perform new mail notifications
 };
-var num_attachments = 0;                                                       // number of attachments in current composed msg
 
 
 // This is the async back end for mail_delete_selected()
@@ -373,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();
@@ -432,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) {
@@ -449,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) {
@@ -503,8 +507,9 @@ 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>";
        }
 
        // The button bar is a Grid element, and is also a Flexbox container.
@@ -513,137 +518,43 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                <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_attachments()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${num_attachments} </span></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="document.getElementById('ctdl_big_modal').style.display='none';gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </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();
-}
-
-
-function activate_uploads() {
-               document.getElementById("ctdl_big_modal").innerHTML = `
-                       <div id="ctdl_attachments_outer">
-                               <div id="ctdl_attachments_title" class="ctdl-compose-attachments-title">
-                                       <div><h1><i class="fa fa-paperclip" style="color:grey"></i>` + _("Attachments:") + " " + num_attachments + `</h1></div>
-                                       <div><h1><i class="fas fa-window-close" style="color:red" onClick="show_or_hide_attachments()"></i></h1></div>
-                               </div>
-                               <br>
-                               <ul id="ctdl_upload_list">
-                                       <li>uploaded file</li>
-                                       <li>another uploaded file</li>
-                                       <li>philez and warez</li>
-                               </ul>
-                               <br>
-                               <div id="drop-area" class="ctdl-upload-drop-area">
-                                       <form class="my-form">
-                                               <p>${_("Drop files here to upload")}</p>
-                                               <input type="file" id="fileElem" multiple acce=t="*/*" onChange="handleFiles(this.files)">
-                                               <label class="button" for="fileElem">Select some files</label>
-                                       </form>
-                               </div>
-                       </div>
-               `;
-
-               // activate drag and drop (shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ )
-               let dropArea = document.getElementById("drop-area");
-               ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                       dropArea.addEventListener(eventName, preventDefaults, false)
-               })
-               ;["dragenter", "dragover"].forEach(eventName => {
-                       dropArea.addEventListener(eventName, highlight, false)
-               })
-               ;['dragleave', 'drop'].forEach(eventName => {
-                       dropArea.addEventListener(eventName, unhighlight, false)
-               })
-               dropArea.addEventListener('drop', handleDrop, false);
-
-               // make the modal smaller than the containing window but pretty big
-               document.getElementById("ctdl_attachments_outer").style.width =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.60).toString() + "px";
-               document.getElementById("ctdl_attachments_outer").style.height =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.60).toString() + "px";
-}
+       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);
+       }
 
-// prevent drag and drop events from propagating up through the DOM
-function preventDefaults(e) {
-       e.preventDefault();
-       e.stopPropagation();
-}
-
-
-function handleDrop(e) {
-       let dt = e.dataTransfer;
-       let files = dt.files;
-       handleFiles(files);
-}
-
-
-function handleFiles(files) {
-       ([...files]).forEach(uploadFile)
-}
-
-
-function uploadFile(file) {
-       var url = '/ctdl/zzz/attach_it;'
-       var xhr = new XMLHttpRequest();
-       var formData = new FormData();
-       xhr.open('POST', url, true);
-      
-       xhr.addEventListener('readystatechange', function(e) {
-               if (xhr.readyState == 4 && xhr.status == 200) {
-                       document.getElementById("ctdl_upload_list").innerHTML += "<li>succeeeeed</li>";
-                       console.log("upload succeeded");
-               }
-               else if (xhr.readyState == 4 && xhr.status != 200) {
-                       document.getElementById("ctdl_upload_list").innerHTML += "<li>EPIC FAIL</li>";
-                       console.log("upload failed");
-               }
-       })
-       formData.append('file', file);
-       xhr.send(formData);
-}
-
-
-function highlight(e) {
-       let dropArea = document.getElementById("drop-area");
-       dropArea.classList.add('highlight')
-}
-      
-function unhighlight(e) {
-       let dropArea = document.getElementById("drop-area");
-       dropArea.classList.remove('highlight')
-}
-
-
-
-// Show or hide the attachments window in the composer
-function show_or_hide_attachments() {
-
-       if (document.getElementById("ctdl_big_modal").style.display == "block") {
-               document.getElementById("ctdl_big_modal").style.display = "none";
+       if (is_reply) {
+               setTimeout(() => { document.getElementById("ctdl-editor-body").focus(); }, 0);
        }
        else {
-               document.getElementById("ctdl_big_modal").style.display = "block";
+               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";
 }
@@ -665,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)
@@ -673,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";
@@ -699,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);