v. 0.557b

Auto-rescale on window resize
This commit is contained in:
Azgaar 2018-04-01 14:12:48 +03:00
parent ad9583e115
commit 23a4e18693
2 changed files with 31 additions and 4 deletions

View file

@ -1,5 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116735150-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-116735150-1');
</script>
<title>Azgaar's Fantasy Map Generator Demo</title> <title>Azgaar's Fantasy Map Generator Demo</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="author" content="Azgaar (Max Ganiev)"> <meta name="author" content="Azgaar (Max Ganiev)">
@ -21,13 +28,13 @@
<script src="libs/polylabel.js"></script> <script src="libs/polylabel.js"></script>
<script src="libs/quantize.js" defer></script> <script src="libs/quantize.js" defer></script>
<script src="libs/d3-hexbin.v0.2.min.js" defer></script> <script src="libs/d3-hexbin.v0.2.min.js" defer></script>
<link rel="stylesheet" type="text/css" href="index.css?version=0.556b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.557b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.556b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.557b"/>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
</head> </head>
<body class="fullscreen"> <body class="fullscreen">
<div id="loading"> <div id="loading">
<h1 class="icon-cog spin"></h1> <h1 class="spin">&#9881;</h1>
<p id="loading-text">Loading...</p> <p id="loading-text">Loading...</p>
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" class="fullscreen"> <svg xmlns="http://www.w3.org/2000/svg" class="fullscreen">
@ -753,5 +760,5 @@
Type: <span id="feature">no</span> Type: <span id="feature">no</span>
</div> </div>
<script type="text/javascript" src="script.js?version=0.556b"></script> <script type="text/javascript" src="script.js?version=0.557b"></script>
</body> </body>

View file

@ -5665,6 +5665,26 @@ function fantasyMap() {
if ($("body").hasClass("fullscreen")) {$("#statusbar").css("top", mapHeight - 20);} if ($("body").hasClass("fullscreen")) {$("#statusbar").css("top", mapHeight - 20);}
} }
// fit full-screen map if window is resized
$(window).resize(function() {
if ($("body").hasClass("fullscreen")) {
console.log("resized");
mapWidthInput.value = $(window).width();
mapHeightInput.value = $(window).height();
applyMapSize();
oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight);
oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight);
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
$("#statusbar").css("top", mapHeight - 20);
if (d3.select("#scaleBar").size()) {
var bbox = d3.select("#scaleBar").node().getBBox();
var tr = [mapWidth - 10 - bbox.width, mapHeight - 10 - bbox.height];
d3.select("#scaleBar").attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
localStorage.removeItem("scaleBar");
}
}
});
// Options handlers // Options handlers
$("input, select").on("input change", function() { $("input, select").on("input change", function() {
var id = this.id; var id = this.id;