Simplify the 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 db84eaec0ffc8748dda2aaa788e18a3550c26c02..91180d9e62fd07818684c3475c00de0ad4fd5cd2 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -526,13 +526,14 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                document.getElementById("ctdl-compose-cc-field").style.display = "block";
        }
 
-       activate_uploads();
+       activate_uploads("ctdl-editor-body");
 }
 
 
-function activate_uploads() {
-               document.getElementById("ctdl-upload").innerHTML = `
-                       <div id="ctdl_attachments_outer">
+// Turn the specified div into a place where we can upload.  (Note: permanently changes the drag-and-drop behavior of that div.)
+function activate_uploads(parent_div) {
+               document.getElementById(parent_div).innerHTML += `
+                       <div class="ctdl-upload" id="ctdl-upload">
                                <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>
@@ -547,15 +548,15 @@ function activate_uploads() {
                                <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>
+                                               <input type="file" id="fileElem" multiple accept="*/*" onChange="handleFiles(this.files)">
                                        </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");
+               //let dropArea = document.getElementById("ctdl-upload");
+               let dropArea = document.getElementById(parent_div);
                ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                        dropArea.addEventListener(eventName, preventDefaults, false)
                })
@@ -568,10 +569,10 @@ function activate_uploads() {
                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";
+               //document.getElementById("ctdl-upload").style.width =
+                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().width) * 0.90).toString() + "px";
+               //document.getElementById("ctdl-upload").style.height =
+                       //Math.trunc((document.getElementById("ctdl-editor-body").getBoundingClientRect().height) * 0.90).toString() + "px";
 }
 
 
@@ -617,12 +618,14 @@ function uploadFile(file) {
 
 
 function highlight(e) {
-       let dropArea = document.getElementById("drop-area");
+       let dropArea = document.getElementById("ctdl-upload");
        dropArea.classList.add('highlight')
+
+       document.getElementById("ctdl-upload").style.display = "block";         /* also make it appear */
 }
       
 function unhighlight(e) {
-       let dropArea = document.getElementById("drop-area");
+       let dropArea = document.getElementById("ctdl-upload");
        dropArea.classList.remove('highlight')
 }
 
@@ -632,10 +635,10 @@ function unhighlight(e) {
 function show_or_hide_attachments() {
 
        if (document.getElementById("ctdl-upload").style.display == "block") {
-               document.getElementById("ctdl-upload").style.display = "none";
+               document.getElementById("ctdl-upload").style.display = "none";          /* turn it off */
        }
        else {
-               document.getElementById("ctdl-upload").style.display = "block";
+               document.getElementById("ctdl-upload").style.display = "block";         /* turn it on */
        }
 }