add a drop indicator

Author: konklone

assets/site.css

@@ -18,17 +18,25 @@ h1 {
 .json textarea,
 .json pre,
 .csv textarea,
-.csv .table {
+.csv .table,
+.json .drop {
   width: 100%; height: 100%;
   position: absolute;
 }
 .csv .table {overflow-x: scroll;}
 .json pre {cursor: pointer;}
 
+.json .drop {
+  opacity: 0.5; background-color: #444;
+  vertical-align: middle; text-align: center;
+  color: #fff; font-size: 40pt;
+  padding-top: 75px;
+}
 
 /* show empty textarea by default */
 .json textarea {display: block;}
 .json .rendered {display: none;}
+.json .drop {display: none; z-index: 100;}
 .csv textarea {}
 .csv .rendered {display: none;}
 

index.html

@@ -43,6 +43,9 @@
   // }
 
   function doJSON() {
+    // just in case
+    $(".drop").hide();
+
     // get input JSON, try to parse it
     var newInput = $(".json textarea").val();
     if (newInput == input) return;
@@ -275,16 +278,29 @@
       })
       .keyup(doJSON); // harmless to repeat doJSON
 
-    $(".json")
+    // go away
+    $("body").click(function() {
+      $(".drop").hide();
+    });
+
+    $(document)
       .on("dragenter", function(e) {
         e.preventDefault();
         e.stopPropagation();
+        $(".drop").show();
       })
       .on("dragover", function(e) {
         e.preventDefault();
         e.stopPropagation();
       })
+      .on("dragend", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        $(".drop").hide();
+      })
       .on("drop", function(e) {
+        $(".drop").hide();
+
         if (e.originalEvent.dataTransfer) {
           if (e.originalEvent.dataTransfer.files.length) {
             e.preventDefault();
@@ -342,6 +358,7 @@ <h1>Convert JSON to CSV</h1>
   <div class="areas">
     <textarea class="editing"></textarea>
     <pre class="rendered"><code></code></pre>
+    <div class="drop">DROP JSON HERE</div>
   </div>
 
   <div class="warning">