From 82458aac26f5b508ec93228afcad25f996efb601 Mon Sep 17 00:00:00 2001
From: Evyatar Amitay <evyatron@gmail.com>
Date: Tue, 1 May 2018 11:09:32 +0100
Subject: [PATCH] Add drag to upload functionality

Allow users to drag and drop .map files onto the browser to load
existing maps
---
 index.css  | Bin 102040 -> 102906 bytes
 index.html |   8 ++++++
 script.js  |  75 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/index.css b/index.css
index df03bf56284b1f49af3aa6d0d4afc21070f50cd3..b0b69064373790e6a0a25ffd08441b7ee08b88ea 100644
GIT binary patch
delta 482
zcmbO+m+jYLwuUW?7rLeg*f6q*>oTM;6fq<+q%)*5q%x#1C@@qr@G@{smp5ZH)+}Mj
zXDDE>Vo+c(V6X-WGbk`9Fyt_#GNdt-Ad62o4`P&`9-zy}!e7Dw(v=I7ot_`eD6O6b
z)>MIHNFqZHLncEyLmq=JLncEBLn=cqL-BO^3`S|$EQV5sVuliiOolXuN(NnqWQKf(
zJg|~Hh7z!n>0xG!LY#&$S51G<!)QGHLoXxCbe;@Gz3Dl+j1s;@4CxF>42cXH3<eB3
zU>_hzJqA+-O{imP!TwTa$Yn@mC}6-0jsj4SOl%aM9-zR;!)*+9C^#&pZ<JsZp8n2)
zQOp;gZYzc)aCqf26fvZN%mUj73P%)wfx}CkL7l-G9AeWSgfc2gmocO=6oEq`nE@1F
jx?mC<Y}3ywFiKAsOJNjYHegVl{*j+ic>9Ge#uLl{^ru~{

delta 22
ecmeyhm~F;fwuUW?7rLg`IWux>x9Vd&zzhI%@d*+D

diff --git a/index.html b/index.html
index 24516794..3938cbf5 100644
--- a/index.html
+++ b/index.html
@@ -741,6 +741,14 @@
       <button id="removeAllRulers" title="Remove all rulers from the map. Click on ruler label to remove ruler separately" class="icon-trash"></button>
     </div>
   </div>
+
+  <div id="map-dragged" style="display: none">
+    <p>Drop to upload</p>
+  </div>
+
+  <div id="uploading-map" class="dialog" style="display: none">
+    <p>Uploading map...</p>
+  </div>
   
   <div id="alert" title="Warning!" style="display: none">
     <p id="alertMessage">Warning!</p>
diff --git a/script.js b/script.js
index 174b63eb..47f90ffd 100644
--- a/script.js
+++ b/script.js
@@ -132,12 +132,69 @@ function fantasyMap() {
   $("#mapLayers").sortable({items: "li:not(.solid)", cancel: ".solid", update: moveLayer});
   $("#templateBody").sortable({items: "div:not(div[data-type='Mountain'])"});
   $("#mapLayers, #templateBody").disableSelection();
-   
+
+  addDragToUpload();
+
   var drag = d3.drag()
     .container(function() {return this;})
     .subject(function() {var p=[d3.event.x, d3.event.y]; return [p, p];})
     .on("start", dragstarted);
   
+  function addDragToUpload()
+  {
+    document.addEventListener('dragover', function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        $('#map-dragged').show();
+    });
+
+    document.addEventListener('dragleave', function(e) {
+        $('#map-dragged').hide();
+    });
+
+    document.addEventListener('drop', function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      $('#map-dragged').hide();
+
+      // no files or more than one
+      if (e.dataTransfer.items == null || e.dataTransfer.items.length != 1) {
+        return;
+      }
+
+      var file = e.dataTransfer.items[0].getAsFile();
+
+      // not a .map file
+      if (file.name.indexOf('.map') == -1) {
+        alertMessage.innerHTML = 'Invalid map file - please upload the <b>.map</b> file you have previously downloaded.';
+        $("#alert").dialog({
+          resizable: false,
+          title: "Invalid map file",
+          width: 400,
+          buttons: {
+            Close: function() { $(this).dialog("close"); }
+          },
+          position: {my: "center", at: "center", of: "svg"}
+        });
+
+        return;
+      }
+
+      // all good - show uploading dialog and load the map
+      $('#uploading-map').dialog({
+        resizable: false,
+        title: "Uploading Map...",
+        width: 400,
+        position: {my: "center", at: "center", of: "svg"}
+      });
+
+      uploadFile(file, function onUploadFinish() {
+        $('#uploading-map').dialog("close");
+      });
+    });
+  }
+
   function zoomed() {
     var scaleDiff = Math.abs(scale - d3.event.transform.k);
     scale = d3.event.transform.k;
@@ -3643,9 +3700,14 @@ function fantasyMap() {
 
   // Map Loader based on FileSystem API
   $("#fileToLoad").change(function() {
-    console.time("loadMap");
     var fileToLoad = this.files[0];
     this.value = "";
+    uploadFile(fileToLoad);
+  });
+
+  function uploadFile(file, callback) {
+    console.time("loadMap");
+    
     var fileReader = new FileReader();
     fileReader.onload = function(fileLoadedEvent) {
       var dataLoaded = fileLoadedEvent.target.result;
@@ -3765,9 +3827,14 @@ function fantasyMap() {
       });
       invokeActiveZooming();
       console.timeEnd("loadMap");
+
+      if (callback) {
+        callback();
+      }
     };
-    fileReader.readAsText(fileToLoad, "UTF-8");
-  });
+
+    fileReader.readAsText(file, "UTF-8");
+  }
 
   // Poisson-disc sampling for a points
   // Source: bl.ocks.org/mbostock/99049112373e12709381; Based on https://www.jasondavies.com/poisson-disc