diff --git a/components/slider-input.js b/components/slider-input.js index 93193bf7..d3b84b01 100644 --- a/components/slider-input.js +++ b/components/slider-input.js @@ -24,13 +24,11 @@ constructor() { super(); this.appendChild(template.content.cloneNode(true)); - } - connectedCallback() { const range = this.querySelector("input[type=range]"); const number = this.querySelector("input[type=number]"); - range.value = number.value = this.getAttribute("value") || 50; + range.value = number.value = this.value || this.getAttribute("value") || 50; range.min = number.min = this.getAttribute("min") || 0; range.max = number.max = this.getAttribute("max") || 100; range.step = number.step = this.getAttribute("step") || 1; diff --git a/index.css b/index.css index bceaf86d..da6acf9e 100644 --- a/index.css +++ b/index.css @@ -1820,11 +1820,6 @@ div.editorLine { padding: 0px 3px !important; } -#unitsBody > div > * { - display: inline-block; - margin-bottom: 0.2em; -} - .unitsHeader { margin: 0.8em 0 0 -1.1em; font-weight: bold; @@ -1836,28 +1831,21 @@ div.editorLine { margin: 6px 0 0 6px; } -#unitsBody > div > div { +#unitsBody label { + display: inline-block; width: 9em; } -#unitsBody > div > input[type="range"] { - width: 7em; -} - #unitsBody > div > select, #unitsBody > div > input[type="text"] { - width: 12em; -} - -#unitsBody > div > input[type="number"] { - width: 4.35em; -} - -#unitsBody > div > input, -#unitsBody > div > select { + width: 14.4em; border: 1px solid #e9e9e9; } +#unitsBody input[type="range"] { + width: 9em; +} + #unitsEditor i.icon-lock-open, #unitsEditor i.icon-lock { color: #626573; diff --git a/index.html b/index.html index 0e29e116..a5206b4e 100644 --- a/index.html +++ b/index.html @@ -5107,11 +5107,11 @@
-
Distance:
+
-
Distance unit:
+
-
-
1 map pixel =
- - + + + +
-
Area unit:
+
-
Altitude:
+
-
Height unit:
+ - + value="2" + > + +
-
Temperature:
+
-
Temperature scale:
+ - + > + +
-
Urbanization rate:
- - + + +
-
Urban density:
- - + + +
diff --git a/modules/io/load.js b/modules/io/load.js index 6d655485..85ac2982 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -222,14 +222,14 @@ async function parseLoadedData(data, mapVersion) { void (function parseSettings() { const settings = data[1].split("|"); if (settings[0]) applyOption(distanceUnitInput, settings[0]); - if (settings[1]) distanceScale = distanceScaleInput.value = distanceScaleOutput.value = settings[1]; + if (settings[1]) distanceScale = distanceScaleInput.value = settings[1]; if (settings[2]) areaUnit.value = settings[2]; if (settings[3]) applyOption(heightUnit, settings[3]); - if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4]; + if (settings[4]) heightExponentInput.value = settings[4]; if (settings[5]) temperatureScale.value = settings[5]; // setting 6-11 (scaleBar) are part of style now, kept as "" in newer versions for compatibility - if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12]; - if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13]; + if (settings[12]) populationRate = populationRateInput.value = settings[12]; + if (settings[13]) urbanization = urbanizationInput.value = settings[13]; if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100); if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100); if (settings[18]) precInput.value = precOutput.value = settings[18]; @@ -241,7 +241,7 @@ async function parseLoadedData(data, mapVersion) { if (settings[21]) hideLabels.checked = +settings[21]; if (settings[22]) stylePreset.value = settings[22]; if (settings[23]) rescaleLabels.checked = +settings[23]; - if (settings[24]) urbanDensity = urbanDensityInput.value = urbanDensityOutput.value = +settings[24]; + if (settings[24]) urbanDensity = urbanDensityInput.value = +settings[24]; if (settings[25]) longitudeInput.value = longitudeOutput.value = minmax(settings[25] || 50, 0, 100); })(); diff --git a/modules/river-generator.js b/modules/river-generator.js index fd8a95b4..fd6c8620 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -35,7 +35,6 @@ window.Rivers = (function () { TIME && console.timeEnd("generateRivers"); function drainWater() { - //const MIN_FLUX_TO_FORM_RIVER = 10 * distanceScale; const MIN_FLUX_TO_FORM_RIVER = 30; const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25; diff --git a/modules/ui/options.js b/modules/ui/options.js index bdad020d..6d0a9fef 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -539,7 +539,6 @@ function applyStoredOptions() { for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); - if (key === "speakerVoice") continue; const input = byId(key + "Input") || byId(key); @@ -612,8 +611,7 @@ function randomizeOptions() { // 'Units Editor' settings const US = navigator.language === "en-US"; - if (randomize || !locked("distanceScale")) - distanceScale = distanceScaleOutput.value = distanceScaleInput.value = gauss(3, 1, 1, 5); + if (randomize || !locked("distanceScale")) distanceScale = distanceScaleInput.value = gauss(3, 1, 1, 5); if (!stored("distanceUnit")) distanceUnitInput.value = US ? "mi" : "km"; if (!stored("heightUnit")) heightUnit.value = US ? "ft" : "m"; if (!stored("temperatureScale")) temperatureScale.value = US ? "°F" : "°C"; diff --git a/modules/ui/submap.js b/modules/ui/submap.js index 0341f8af..c5f24972 100644 --- a/modules/ui/submap.js +++ b/modules/ui/submap.js @@ -258,15 +258,8 @@ window.UISubmap = (function () { byId("latitudeInput").value = latitudeOutput.value; // fix scale - distanceScale = - distanceScaleInput.value = - distanceScaleOutput.value = - rn((distanceScale = distanceScaleOutput.value / scale), 2); - - populationRateInput.value = populationRateOutput.value = rn( - (populationRate = populationRateOutput.value / scale), - 2 - ); + distanceScale = distanceScaleInput.value = rn(distanceScaleInput.value / scale, 2); + populationRate = populationRateInput.value = rn(populationRateInput.value / scale, 2); customization = 0; startResample(options); diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index ff911567..67562ada 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -17,27 +17,22 @@ function editUnits() { }; // add listeners - byId("distanceUnitInput").addEventListener("change", changeDistanceUnit); - byId("distanceScaleOutput").addEventListener("input", changeDistanceScale); - byId("distanceScaleInput").addEventListener("change", changeDistanceScale); - byId("heightUnit").addEventListener("change", changeHeightUnit); - byId("heightExponentInput").addEventListener("input", changeHeightExponent); - byId("heightExponentOutput").addEventListener("input", changeHeightExponent); - byId("temperatureScale").addEventListener("change", changeTemperatureScale); + byId("distanceUnitInput").on("change", changeDistanceUnit); + byId("distanceScaleInput").on("change", changeDistanceScale); + byId("heightUnit").on("change", changeHeightUnit); + byId("heightExponentInput").on("input", changeHeightExponent); + byId("temperatureScale").on("change", changeTemperatureScale); - byId("populationRateOutput").addEventListener("input", changePopulationRate); - byId("populationRateInput").addEventListener("change", changePopulationRate); - byId("urbanizationOutput").addEventListener("input", changeUrbanizationRate); - byId("urbanizationInput").addEventListener("change", changeUrbanizationRate); - byId("urbanDensityOutput").addEventListener("input", changeUrbanDensity); - byId("urbanDensityInput").addEventListener("change", changeUrbanDensity); + byId("populationRateInput").on("change", changePopulationRate); + byId("urbanizationInput").on("change", changeUrbanizationRate); + byId("urbanDensityInput").on("change", changeUrbanDensity); - byId("addLinearRuler").addEventListener("click", addRuler); - byId("addOpisometer").addEventListener("click", toggleOpisometerMode); - byId("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode); - byId("addPlanimeter").addEventListener("click", togglePlanimeterMode); - byId("removeRulers").addEventListener("click", removeAllRulers); - byId("unitsRestore").addEventListener("click", restoreDefaultUnits); + byId("addLinearRuler").on("click", addRuler); + byId("addOpisometer").on("click", toggleOpisometerMode); + byId("addRouteOpisometer").on("click", toggleRouteOpisometerMode); + byId("addPlanimeter").on("click", togglePlanimeterMode); + byId("removeRulers").on("click", removeAllRulers); + byId("unitsRestore").on("click", restoreDefaultUnits); function changeDistanceUnit() { if (this.value === "custom_name") { @@ -92,7 +87,6 @@ function editUnits() { function restoreDefaultUnits() { distanceScale = 3; - byId("distanceScaleOutput").value = distanceScale; byId("distanceScaleInput").value = distanceScale; unlock("distanceScale"); @@ -110,16 +104,16 @@ function editUnits() { calculateFriendlyGridSize(); // height exponent - heightExponentInput.value = heightExponentOutput.value = 1.8; + heightExponentInput.value = 1.8; localStorage.removeItem("heightExponent"); calculateTemperatures(); renderScaleBar(); // population - populationRate = populationRateOutput.value = populationRateInput.value = 1000; - urbanization = urbanizationOutput.value = urbanizationInput.value = 1; - urbanDensity = urbanDensityOutput.value = urbanDensityInput.value = 10; + populationRate = populationRateInput.value = 1000; + urbanization = urbanizationInput.value = 1; + urbanDensity = urbanDensityInput.value = 10; localStorage.removeItem("populationRate"); localStorage.removeItem("urbanization"); localStorage.removeItem("urbanDensity");