From 29560163b7aaa8a1697b314ad627ba5f6bcd71c3 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Wed, 11 Oct 2017 13:33:56 -0700
Subject: [PATCH] added drag over affect

---
 public/assets/css/general.css         |  7 +++++++
 public/assets/js/dropzoneFunctions.js | 10 ++++++++++
 views/index.handlebars                | 15 ++++++---------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index 0224c884..07ee4916 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -405,13 +405,20 @@ table {
 .dropzone {
 	border: 2px dashed lightgrey;
 	text-align: center;
+	background-color: white;
 }
 
 .dropzone:hover {
 	border: 2px dashed #1e90ff;
+	background-color: lightgrey;
 	cursor: pointer;
 }
 
+.dropzone--drag-over {
+	background-color: lightgrey;
+	border: 2px dashed #1e90ff;
+}
+
 #primary-dropzone-wrapper, #publish-form-wrapper {
 	height: 100%;
 }
diff --git a/public/assets/js/dropzoneFunctions.js b/public/assets/js/dropzoneFunctions.js
index d25528bd..fba96cca 100644
--- a/public/assets/js/dropzoneFunctions.js
+++ b/public/assets/js/dropzoneFunctions.js
@@ -37,4 +37,14 @@ function dragend_handler(event) {
     } else {
         event.dataTransfer.clearData();
     }
+}
+
+function dragenter_handler(event) {
+    console.log('drag enter', event);
+    document.getElementById(event.target.id).setAttribute('class', 'dropzone dropzone--drag-over');
+}
+
+function dragexit_handler(event) {
+    console.log('drag exit', event);
+    document.getElementById(event.target.id).setAttribute('class', 'dropzone');
 }
\ No newline at end of file
diff --git a/views/index.handlebars b/views/index.handlebars
index dcc53998..8cf3fc1e 100644
--- a/views/index.handlebars
+++ b/views/index.handlebars
@@ -1,14 +1,14 @@
 <div class="row row--full-height">
+    <form>
+        <input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+    </form>
     <div id="primary-dropzone-wrapper">
-        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
+        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
             <div id="primary-dropzone-instructions">
                 <div class="row">
                     <p>Drag & drop image or video here</p>
                     <p>OR</p>
-                    <form>
-                        <label class="input-file-label">CHOOSE FILE</label>
-                        <input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-                    </form>
+                    <label class="input-file-label">CHOOSE FILE</label>
                 </div>
                 <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
             </div>
@@ -28,10 +28,7 @@
                         <div class="row">
                             <p>Drag & drop image or video here</p>
                             <p>OR</p>
-                            <form>
-                                <label class="input-file-label">CHOOSE FILE</label>
-
-                            </form>
+                            <label class="input-file-label">CHOOSE FILE</label>
                         </div>
                     </div>