adding url dialog

index.css

@@ -904,6 +904,26 @@ div.slider .ui-slider-handle {
 	color: white;
 }
 
+#loadDropdown {
+	display: none;
+	position: absolute;
+	left: 54%;
+	top: 100%;
+	border: 1px solid #5e4fa2;
+	background-color: #a4879b;
+	width: 44px;
+}
+
+#loadDropdown>div {
+	padding: 2px 4px;
+	cursor: pointer;
+}
+
+#loadDropdown>div:hover {
+	color: white;
+}
+
+
 #brushPower,
 #brushRadius {
 	width: 88px;

index.html

@@ -1090,7 +1090,12 @@
           <div id="saveSVG" data-tip="Download the map as .svg image (open in browser or Inkscape). Shortcut: Ctrl + S">.svg</div>
           <div id="savePNG" data-tip="Download visible part of the map as image. Texture will not be shown. Shortcut: Ctrl + P">.png</div>
         </div>
-        <button id="loadMap" data-tip="Load fully functional map in a .map format. Shortcut: Ctrl + L">Load</button>
+        <button id="loadButton" data-tip="Select location to load a .map file">Load</button>
+        <div id="loadDropdown">
+          <div id="loadMap" data-tip="Load fully functional map in a .map format. Shortcut: Ctrl + L">local</div>
+          <div id="loadURL" data-tip="Load fully functional map in a .map format for a url.">url</div>
+        </div>
+        
         <button id="zoomReset" data-tip="Reset map zoom. Shortcut: 0">Reset Zoom</button>
       </div>
 
@@ -1970,6 +1975,14 @@
       </div>
     </div>
 
+    <div id="loadURLDialog" class="dialog stable textual" style="display: none">
+      <div>
+        <span>URL of .map: </span>
+        <input id="loadURLText" data-tip="Type url of .map file" autocorrect="off" spellcheck="false" style="width: 120px;">
+      </div>
+      <button id="loadURLConfirm" data-tip="Confirm url" class="icon-link"></button>
+    </div>
+
     <div id="alert" style="display: none" class="dialog">
       <p id="alertMessage">Warning!</p>
     </div>

main.js

@@ -542,7 +542,7 @@ function addDragToUpload() {
 function postload() {
 
   let success = false;
-  if(params.get("from")==="GIST"){
+  if(params.get("from")==="url"){
     console.time("loadURL");
     console.log("Loading URL");
     fetch(params.get("url"))

modules/ui/options.js

@@ -901,7 +901,9 @@ document.getElementById("sticked").addEventListener("click", function(event) {
   const id = event.target.id;
   if (id === "newMapButton") regeneratePrompt();
   else if (id === "saveButton") toggleSavePane();
+  else if (id === "loadButton") toggleLoadPane();
   else if (id === "loadMap") mapToLoad.click();
+  else if (id === "loadURL") loadURL();
   else if (id === "zoomReset") resetZoom(1000);
   else if (id === "saveMap") saveMap();
   else if (id === "saveSVG") saveAsImage("svg");
@@ -946,6 +948,11 @@ function toggleSavePane() {
 
 }
 
+function toggleLoadPane() {
+    if (loadDropdown.style.display === "block") { loadDropdown.style.display = "none"; return; }
+    loadDropdown.style.display = "block";
+}
+
 // load map
 document.getElementById("mapToLoad").addEventListener("change", function() {
   closeDialogs();
@@ -953,3 +960,46 @@ document.getElementById("mapToLoad").addEventListener("change", function() {
   this.value = "";
   uploadFile(fileToLoad);
 });
+// load url
+function loadURL() {
+  let urlLoad = "";
+  // update list of objects
+  let urlObj = document.getElementById("loadURLText");
+  urlLoad = urlObj.value;
+  
+
+  // open a dialog
+  $("#loadURLDialog").dialog({
+    title: "Legends Editor", minWidth: Math.min(svgWidth, 400),
+    position: {my: "center", at: "center", of: "svg"}
+  });
+
+  // add listeners
+  urlObj.addEventListener("input", changedText);
+  document.getElementById("loadURLConfirm").addEventListener("click", triggerURLConfirm);
+
+  function changedText() {
+    urlObj = this.value;
+  }
+
+  function triggerURLConfirm() {
+    urlLoad = document.getElementById("loadURLText").value;
+      if (urlLoad !== "" && urlLoad !== undefined) {
+      console.log (urlLoad);
+      var url = new URL(window.location.href);
+      url.searchParams.set('from', 'url');
+      url.searchParams.set('url', urlLoad);
+      window.location = url;
+    } else {
+      alertMessage.innerHTML = 'Invalid URL.';
+      $("#alert").dialog({title: "Invalid URL", resizable: false, position: {my: "center", at: "center", of: "svg"},
+        buttons: {
+          OK: function() {
+            localStorage.setItem("dns_allow_popup_message", true);
+            $(this).dialog("close");
+          }
+        }
+      });
+    }
+  }
+}