v1.3.12a

index.css

@@ -1720,34 +1720,6 @@ input[type="checkbox"] {
 	color: #333333;
 }
 
-.shadowed {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 10;
-	pointer-events: none;
-	text-align: center;
-	background: rgba(0, 0, 0, .5);
-}
-
-#map-dragged p {
-	font-size: 2.4em;
-	color: #fff5da;
-	text-shadow: 0px 1px 4px #4c3a35;
-}
-
-#map-dragged p:before {
-	content: '';
-	display: inline-block;
-	vertical-align: middle;
-	height: 100%;
-}
-
 div.textual select,
 div.textual textarea {
 	font-family: Copperplate, monospace;
@@ -2044,6 +2016,24 @@ svg.button {
 	border: dashed 1px #5d4651;
 }
 
+#mapOverlay {
+	position: absolute;
+	display: flex;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	pointer-events: none;
+	text-align: center;
+	background: rgba(0, 0, 0, .5);
+	font-size: 2.4em;
+	color: #fff5da;
+	text-shadow: 0px 1px 4px #4c3a35;
+}
+
 #debug {
 	font-size: 1px;
 	opacity: .8;

index.html

@@ -29,9 +29,9 @@
     #title {font-size: 7em;margin: -12px 0 -6px 0;}
     #version {text-align: right;font-size: 2em;margin-right: 3%;}
     #loading-text > span {font-size: 1.3em; padding-left: 1px; line-height: 0px;}
-    #loading-text > span, #uploading-map span {animation: 3s infinite both blink;}
+    #loading-text > span, #mapOverlay > span {animation: 3s infinite both blink;}
-    #loading-text span:nth-child(2) {animation-delay: 1s;}
+    #loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;}
-    #loading-text span:nth-child(3) {animation-delay: 2s;}
+    #loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
     @keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
   </style>
   <link rel="preload" href="index.css?version=1.3" as="style">
@@ -3474,10 +3474,6 @@
 
   </div>
 
-  <div id="map-dragged" class="shadowed" style="display: none">
-    <p>Drop a .map file to open</p>
-  </div>
-
   <div id="notes">
     <div id="notesHeader"></div>
     <div id="notesBody"></div>
@@ -3485,6 +3481,8 @@
 
   <div id="tooltip" style="opacity:0" data-main="Сlick the arrow button for options. Zoom in to see the map in details">Сlick the arrow button for options. Zoom in to see the map in details</div>
 
+  <div id="mapOverlay" style="display: none">Drop a .map file to open</div>
+
   <div id="fileInputs" style="display: none">
     <input type="file" accept=".map" id="mapToLoad">
     <input type="file" accept=".txt,.csv" id="burgsListToLoad">

main.js

@@ -448,41 +448,42 @@ function invokeActiveZooming() {
   }
 }
 
-// Pull request from @evyatron
+// add drag to upload logic, pull request from @evyatron
 void function addDragToUpload() {
-  document.addEventListener('dragover', function(e) {
+  document.addEventListener("dragover", function(e) {
     e.stopPropagation();
     e.preventDefault();
-    $('#map-dragged').show();
+    document.getElementById("mapOverlay").style.display = null;
   });
 
   document.addEventListener('dragleave', function(e) {
-    $('#map-dragged').hide();
+    document.getElementById("mapOverlay").style.display = "none";
   });
 
-  document.addEventListener('drop', function(e) {
+  document.addEventListener("drop", function(e) {
     e.stopPropagation();
     e.preventDefault();
-    $('#map-dragged').hide();
+
-    // no files or more than one
+    const overlay = document.getElementById("mapOverlay");
-    if (e.dataTransfer.items == null || e.dataTransfer.items.length != 1) {return;}
+    overlay.style.display = "none";
+    if (e.dataTransfer.items == null || e.dataTransfer.items.length !== 1) return; // no files or more than one
     const file = e.dataTransfer.items[0].getAsFile();
-    // not a .map file
+    if (file.name.indexOf('.map') == -1) { // not a .map file
-    if (file.name.indexOf('.map') == -1) {
       alertMessage.innerHTML = 'Please upload a <b>.map</b> file you have previously downloaded';
       $("#alert").dialog({
-        resizable: false, title: "Invalid file format",
+        resizable: false, title: "Invalid file format", position: {my: "center", at: "center", of: "svg"},
-        width: "40em", buttons: {
+        buttons: {Close: function() {$(this).dialog("close");}}
-          Close: function() { $(this).dialog("close"); }
-        }, position: {my: "center", at: "center", of: "svg"}
       });
       return;
     }
+
     // all good - show uploading text and load the map
-    $("#map-dragged > p").text("Uploading<span>.</span><span>.</span><span>.</span>");
+    overlay.style.display = null;
-    closeDialogs();
+    overlay.innerHTML = "Uploading<span>.</span><span>.</span><span>.</span>";
-    uploadMap(file, function onUploadFinish() {
+    if (closeDialogs) closeDialogs();
-      $("#map-dragged > p").text("Drop to upload");
+    uploadMap(file, () => {
+      overlay.style.display = "none";
+      overlay.innerHTML = "Drop a .map file to open";
     });
   });
 }()

modules/save-and-load.js

@@ -242,7 +242,7 @@ function getMapData() {
     // set transform values to default
     cloneEl.setAttribute("width", graphWidth);
     cloneEl.setAttribute("height", graphHeight);
-    cloneEl.querySelector("#viewbox").setAttribute("transform", null);
+    cloneEl.querySelector("#viewbox").removeAttribute("transform");
     const svg_xml = (new XMLSerializer()).serializeToString(cloneEl);
 
     const gridGeneral = JSON.stringify({spacing:grid.spacing, cellsX:grid.cellsX, cellsY:grid.cellsY, boundary:grid.boundary, points:grid.points, features:grid.features});
@@ -505,6 +505,7 @@ function uploadMap(file, callback) {
 
   const fileReader = new FileReader();
   fileReader.onload = function(fileLoadedEvent) {
+    if (callback) callback();
     const dataLoaded = fileLoadedEvent.target.result;
     const data = dataLoaded.split("\r\n");
 
@@ -532,7 +533,6 @@ function uploadMap(file, callback) {
   };
 
   fileReader.readAsText(file, "UTF-8");
-  if (callback) callback();
 }
 
 function parseLoadedData(data) {

modules/ui/burgs-overview.js

@@ -303,7 +303,7 @@ function overviewBurgs() {
       burgHighlightOff(ev);
       if (!document.getElementById("burgsInfo")) return;
       burgsInfo.innerHTML = "‍";
-      d3.select(ev.target).transition().attr("stroke", "null");
+      d3.select(ev.target).transition().attr("stroke", null);
       tip("");
     }