Reduce the number of divs and make it more generic. Allow the upload dialog to
be attached to any parent div. Make the dialog appear automatically when a file
is dragged into the parent div.
-.ctdl-compose-attachments-title {
- padding: 1em;
- background: Gainsboro;
- display: flex;
- flex-wrap: nowrap;
- flex-direction: row;
- justify-content: space-between;
- align-items: auto;
- align-content: start
-}
-
- display: none; /* set to "block" to make the modal appear */
- z-index: 8;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- border-style: outset;
- border-width: 3px;
+ display: none; /* set to 'block' to make it appear when needed */
+ width: 95%;
+ height: 95%;
+ border: 2px dashed #ccc;
+ border-radius: 20px;
border-color: Black;
justify-content: center;
align-items: center;
border-color: Black;
justify-content: center;
align-items: center;
background-color: GhostWhite;
}
background-color: GhostWhite;
}
-.ctdl-upload-drop-area { /* shamelessly swiped from https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/ */
- border: 2px dashed #ccc;
- border-radius: 20px;
- width: 480px;
- font-family: sans-serif;
- margin: 100px auto;
- padding: 20px;
+.ctdl-upload.highlight {
+ border-color: purple;
-.ctdl-upload-drop-area.highlight {
- border-color: purple;
+.ctdl-compose-attachments-title {
+ padding: 1em;
+ background: Gainsboro;
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: auto;
+ align-content: start
<!-- When we need a custom ghost image for drag-and-drop, we can attach it to this element -->
<div id="ctdl_draggo" style="position:absolute; left:0px; top:0px; z-index:-9"> </div>
<!-- When we need a custom ghost image for drag-and-drop, we can attach it to this element -->
<div id="ctdl_draggo" style="position:absolute; left:0px; top:0px; z-index:-9"> </div>
-<!-- When we need a place to do drag-and-drop uploads, we can attach it to this element -->
-<div class="ctdl-upload" id="ctdl-upload"></div>
-
<div class="ctdl-main-grid-container">
<div class="ctdl-grid-banner-item" id="banner">
<div class="ctdl-main-grid-container">
<div class="ctdl-grid-banner-item" id="banner">
document.getElementById("ctdl-compose-cc-field").style.display = "block";
}
document.getElementById("ctdl-compose-cc-field").style.display = "block";
}
+ 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>
<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 id="drop-area" class="ctdl-upload-drop-area">
<form class="my-form">
<p>${_("Drop files here to upload")}</p>
<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/ )
</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)
})
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
})
dropArea.addEventListener('drop', handleDrop, false);
// make the modal smaller than the containing window but pretty big
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";
- let dropArea = document.getElementById("drop-area");
+ let dropArea = document.getElementById("ctdl-upload");
dropArea.classList.add('highlight')
dropArea.classList.add('highlight')
+
+ document.getElementById("ctdl-upload").style.display = "block"; /* also make it appear */
}
function unhighlight(e) {
}
function unhighlight(e) {
- let dropArea = document.getElementById("drop-area");
+ let dropArea = document.getElementById("ctdl-upload");
dropArea.classList.remove('highlight')
}
dropArea.classList.remove('highlight')
}
function show_or_hide_attachments() {
if (document.getElementById("ctdl-upload").style.display == "block") {
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 */
- document.getElementById("ctdl-upload").style.display = "block";
+ document.getElementById("ctdl-upload").style.display = "block"; /* turn it on */