mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 03:51:23 +01:00
Add modal for upload map link
This commit is contained in:
hasparus
parent
55ef878480
commit
eb8e715bb5
2 changed files with 95 additions and 5 deletions
|
|
@ -705,8 +705,8 @@
|
|||
Load
|
||||
</button>
|
||||
<div id="loadDropdown" class="dropdown__options">
|
||||
<div 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="loadMap" onmouseover="tip('Load map from file')">File</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>
|
||||
|
|
|
|||
96
script.js
96
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");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue