From 4e780f3a91df17c0df33027092f39f68bb3d728e Mon Sep 17 00:00:00 2001
From: Jeffrey Warren <jeff@unterbahn.com>
Date: Mon, 11 Sep 2017 20:30:50 -0400
Subject: [PATCH] drag drop added to demo (#121)

---
 examples/demo.css   |  4 ++++
 examples/index.html | 37 +++++++++++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index ee19c435..53f52764 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -40,6 +40,10 @@ h1 {
   color: #444;
 }
 
+.hover {
+  background: #eee;
+}
+
 #imageSelect input {
   max-width: 100%;  
 }
diff --git a/examples/index.html b/examples/index.html
index 53cbfa4e..fa050981 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -27,9 +27,9 @@
 
       <header class="text-center">
         <h1>Image Sequencer</h1>
-        <h3>
-          <a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
-        </h3>
+        <p>
+          Open Source <a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a> by <a href="https://publiclab.org">Public Lab</a>
+        </p>
       </header>
 
       <div id="imageSelect">
@@ -199,8 +199,13 @@
           sequencer.removeSteps(index).run();
         });
 
-        $('#file').on('change',function(e){
-          var file = e.target.files[0];
+        function handleFile(e) {
+
+          e.preventDefault();
+          e.stopPropagation(); // stops the browser from redirecting.
+
+          if (e.target && e.target.files) var file = e.target.files[0];
+          else var file = e.dataTransfer.files[0];
           if(!file) return;
 
           reader.onload = function(){
@@ -211,11 +216,31 @@
           }
 
           reader.readAsDataURL(file);
+        }
+
+        $('#file').on('change', handleFile);
+
+        var select = $('#imageSelect');
+
+        select[0].addEventListener('drop', handleFile, false);
+
+        select.on('dragover', function(e) {
+          e.stopPropagation();
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+        }, false);
+
+        select.on('dragenter', function(e) {
+          select.addClass('hover');
         });
+  
+        select.on('dragleave', function(e) {
+          select.removeClass('hover');
+        });
+
       }
     </script>
 
   </body>
 
-
 </html>