add dropzone logic

public/edit.css

@@ -152,17 +152,20 @@ body {
   margin-bottom: 10px;
 }
 
-.dropZone {
+#dropZone {
   position: fixed;
-  top: 0px;
-  left: 0px;
+  top: 20px;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+  display: none;
+  border: 8px rgba(100,100,100) dotted;
+  background-color: rgba(105, 255, 105, 0.9);
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  color: rgba(100,100,100);
+}
+#dropZone.focused {
   display: flex;
-  margin: 10px;
-  width: 100px;
-  height: 100px;
-  border: 2px rgba(200,200,200, 0.5) dotted;
-}
-.dropZone.focused {
-  border: 2px rgba(105,255,105, 0.5) dotted;
-  background-color: rgba(105, 255, 105, 0.5);
 }

public/dropZone.js → src/dropZone.js

@@ -1,11 +1,16 @@
-const dropZone = document.querySelector('.dropZone')
 const setupDropZone = () => {
+  const dropZone = document.querySelector('#dropZone')
+  const title = document.querySelector('#dropZone__title')
+  if (!dropZone) {
+    return
+  }
   createDropEvent = (clear=true) => {
     return (e) => {
       if (clear) {
         dropZone.classList.remove('focused')
       } else {
         dropZone.classList.add('focused')
+        title.innerText = `Uploading ${e.dataTransfer.items.length} files`
       }
       e.preventDefault()
       e.stopPropagation()
@@ -48,6 +53,6 @@ const setupDropZone = () => {
   })
 }
 
-if (dropZone) {
-  setupDropZone()
+module.exports = {
+  setupDropZone
 }

src/index.js

@@ -1,5 +1,6 @@
 /* globals clientPath */
 const { setupChangeLogs } = require('./changeLogs')
+const { setupDropZone } = require('./dropZone')
 
 const setupHome = require('./home')
 const setupNew = require('./new')
@@ -11,9 +12,11 @@ const startApp = () => {
     return setupHome()
   }
   if (clientPath === 'new') {
+    setupDropZone()
     return setupNew()
   }
   if (clientPath === 'edit') {
+    setupDropZone()
     return setupEdit()
   }
   if (clientPath === 'view') {

views/notes.ejs

@@ -9,6 +9,9 @@ const clientPath = '<%- data.path %>'
 <pre id="rawData"><%- data.rawData -%></pre>
 
 <div id="logDisplay"></div>
+<div id="dropZone">
+  <h1 id="dropZone__title">oaeuaou</h1>
+</div>
 
 <script src="/main.js"></script>