view_mail.js: more progress on upload dialog

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

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 4553b8bff712dab3e1f3f9de5832ba64b74f0c08..2e05f7d6df7516643dadf8e0c33460613c33dde8 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -471,7 +471,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>"
@@ -525,9 +525,109 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                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";
+}
+
+
+// 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() {
 
@@ -536,26 +636,6 @@ function show_or_hide_attachments() {
        }
        else {
                document.getElementById("ctdl_big_modal").style.display = "block";
-               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>
-                       <span class="ctdl_dfhtu">` + _("Drop files here to upload") + `</span>
-                       <br>
-                       <ul>
-                               <li>uploaded file</li>
-                               <li>another uploaded file</li>
-                               <li>philez and warez</li>
-                       </ul>
-                       </div>`
-               ;
-               document.getElementById("ctdl_attachments_outer").style.width =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
-               document.getElementById("ctdl_attachments_outer").style.height =
-                       Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
        }
 }