Add modal for upload map link

index.html

@@ -705,8 +705,8 @@
             Load
           </button>
           <div id="loadDropdown" class="dropdown__options">
-            <div id="loadMap" onmouseover="tip('Load map from file')">File</div>
+            <div role="button" id="loadMap" onmouseover="tip('Load map from file')">File</div>
-            <div id="loadMapFromURL" onmouseover="tip('Load map from URL')" class="options">URL</div>
+            <div role="button" id="loadMapFromURL" onmouseover="tip('Load map from URL')" class="options">URL</div>
           </div>
         </article>
         <button id="zoomReset" onmouseover="tip('Reset map zoom. Hotkey: 0')" class="options">Reset Zoom</button>

script.js

@@ -275,7 +275,7 @@ function fantasyMap() {
     placePoints();
     calculateVoronoi(points);
     
-    makeFileFromUrl(decodeURIComponent(mapLink)).then(blob => {
+    makeBlobFromUrl(decodeURIComponent(mapLink)).then(blob => {
       uploadFile(blob);
       manorsAndRegions(); // namesBase global state
       cleanData();
@@ -6824,7 +6824,7 @@ function fantasyMap() {
     uploadFile(fileToLoad);
   });
   
-  function makeFileFromUrl(mapLink) {
+  function makeBlobFromUrl(mapLink) {
     return fetch(mapLink, {
       method: 'GET',
       mode: 'cors',
@@ -7728,7 +7728,7 @@ function fantasyMap() {
     }
     if (id === "saveButton") {$("#saveDropdown").slideToggle();}
     if (id === "loadButton") {$("#loadDropdown").slideToggle();}
-    if (id === "loadMap") {mapToLoad.click();}
+
     if (id === "zoomReset") {resetZoom(1000);}
     if (id === "zoomPlus") {
       scale += 1;
@@ -7826,6 +7826,96 @@ function fantasyMap() {
     $("#saveDropdown").slideUp("fast");
   });
 
+  $('#loadDropdown > div[role="button"]').click(event => {
+    const id = event.target.id;
+    console.log(event, id);
+
+    if (id === "loadMap") {
+      mapToLoad.click();
+    }
+    if (id === "loadMapFromURL") {
+      const modal = document.createElement("form");
+      Object.assign(modal.style, {
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate3d(-50%, -50%, 0)",
+        border: "1px solid #5e4fa2",
+        boxShadow: "2px 2px 5px -3px #3a2804",
+        padding: "auto",
+        background: "white"
+      });
+      modal.className = "ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons"; 
+
+      // <div
+      //   style="height: auto; width: 320px; top: 365.9px; left: 648px;" 
+      //   tabindex="-1" 
+      //   role="dialog" 
+      //   class="ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable"
+      //   aria-describedby="alert"
+      //   aria-labelledby="ui-id-1">
+      //     <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">Map size conflict</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="✖"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>✖</button></div><div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
+      //       <p id="alertMessage">
+      //         The loaded map has size 1920 x 1005 pixels, while the current canvas size is 1408 x 1005 pixels.
+      //         Click "Rescale" to fit the map to the current canvas size. Click "OK" to browse the map without rescaling
+      //       </p>
+      //     </div>
+      //     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
+      //       <div class="ui-dialog-buttonset">
+      //         <button type="button" class="ui-button ui-corner-all ui-widget">
+      //           Rescale
+      //         </button>
+      //         <button type="button" class="ui-button ui-corner-all ui-widget">
+      //           OK
+      //         </button>
+      //       </div>
+      //     </div>
+      //   </div>
+
+      modal.innerHTML = `    
+        <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle">
+          <span id="ui-id-1" class="ui-dialog-title">
+            Load Map
+          </span>
+          <button
+            class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close"
+            title="✖"
+          >
+            <span class="ui-button-icon ui-icon ui-icon-closethick"></span>
+            <span class="ui-button-icon-space"></span>
+            ✖
+          </button>
+        </div>
+        <div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
+          <label style="display: block;">
+            <div>Enter link to your map</div>
+            <input
+              style="width: 24em; margin-top: 0.5em"
+              type="url" 
+              pattern=".*\\.map"
+              placeholder="https://example.com/faerun.map" 
+              required
+            />
+          </label>
+        </div>
+        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
+          <div class="ui-dialog-buttonset">
+            <button type="submit" class="ui-button">Load</button>
+          </div>
+        </div>
+      `;
+
+      modal.onsubmit = (event) => {
+        event.preventDefault();
+        console.log("ok", event)
+        document.body.removeChild(modal);
+      }
+
+      document.body.appendChild(modal);
+    }
+    $("#loadDropdown").slideUp("fast");
+  });
+
   // lock / unlock option randomization
   $("#options i[class^='icon-lock']").click(function() {
     $(this).toggleClass("icon-lock icon-lock-open");