<p></p>
<p><b>@hlfan</b> commented on this pull request.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5915#discussion_r2039306783">app/assets/javascripts/index/directions-route-output.js</a>:</p>
<pre style='color:#555'>> + const miSize = 1609.344;
+ const ftSize = 0.3048;
+
function formatTotalDistance(m) {
- if (m < 1000) {
- return OSM.i18n.t("javascripts.directions.distance_m", { distance: Math.round(m) });
- } else if (m < 10000) {
- return OSM.i18n.t("javascripts.directions.distance_km", { distance: (m / 1000.0).toFixed(1) });
+ if (distanceUnits === "km") {
+ return format(m, "m", m / 1000, "km");
} else {
- return OSM.i18n.t("javascripts.directions.distance_km", { distance: Math.round(m / 1000) });
+ return format(m / ftSize, "ft", m / miSize, "mi");
+ }
+
+ function format(minorValue, minorName, majorValue, majorName) {
+ const scope = "javascripts.directions.distance_in_units";
+
+ if (minorValue < 1000) {
+ return OSM.i18n.t(minorName, { scope, distance: Math.round(minorValue) });
+ } else if (majorValue < 10) {
+ return OSM.i18n.t(majorName, { scope, distance: majorValue.toFixed(1) });
+ } else {
+ return OSM.i18n.t(majorName, { scope, distance: Math.round(majorValue) });
+ }
}
}
function formatStepDistance(m) {
if (m < 5) {
return "";
- } else if (m < 200) {
- return OSM.i18n.t("javascripts.directions.distance_m", { distance: String(Math.round(m / 10) * 10) });
- } else if (m < 1500) {
- return OSM.i18n.t("javascripts.directions.distance_m", { distance: String(Math.round(m / 100) * 100) });
- } else if (m < 5000) {
- return OSM.i18n.t("javascripts.directions.distance_km", { distance: String(Math.round(m / 100) / 10) });
+ } else if (distanceUnits === "km") {
+ return format(m, "m", m / 1000, "km");
} else {
- return OSM.i18n.t("javascripts.directions.distance_km", { distance: String(Math.round(m / 1000)) });
+ return format(m / ftSize, "ft", m / miSize, "mi");
+ }
+
+ function format(minorValue, minorName, majorValue, majorName) {
+ const scope = "javascripts.directions.distance_in_units";
+
+ if (minorValue < 200) {
+ return OSM.i18n.t(minorName, { scope, distance: Math.round(minorValue / 10) * 10 });
+ } else if (minorValue < 1500) {
+ return OSM.i18n.t(minorName, { scope, distance: Math.round(minorValue / 100) * 100 });
+ } else if (majorValue < 5) {
+ return OSM.i18n.t(majorName, { scope, distance: majorValue.toFixed(1) });
+ } else {
+ return OSM.i18n.t(majorName, { scope, distance: Math.round(majorValue) });
+ }
}
}
function formatHeight(m) {
- return OSM.i18n.t("javascripts.directions.distance_m", { distance: Math.round(m) });
+ const scope = "javascripts.directions.distance_in_units";
+
+ if (distanceUnits === "km") {
+ return OSM.i18n.t("m", { scope, distance: Math.round(m) });
+ } else {
+ const ft = m / ftSize;
+ return OSM.i18n.t("ft", { scope, distance: Math.round(ft) });
+ }
}
</pre>
<p dir="auto">I think separating the unit-agnostic logic from the unit-specific stuff could make the functions more straightforward:</p>
<div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">common</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
<span class="pl-c1">scope</span>: <span class="pl-s">"javascripts.directions.distance_in_units"</span><span class="pl-kos">,</span>
<span class="pl-en">_formatTotal</span><span class="pl-kos">(</span><span class="pl-s1">minorValue</span><span class="pl-kos">,</span> <span class="pl-s1">minorName</span><span class="pl-kos">,</span> <span class="pl-s1">majorValue</span><span class="pl-kos">,</span> <span class="pl-s1">majorName</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-s1">scope</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scope</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">minorValue</span> <span class="pl-c1"><</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">minorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">minorValue</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">majorValue</span> <span class="pl-c1"><</span> <span class="pl-c1">10</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">majorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-s1">majorValue</span><span class="pl-kos">.</span><span class="pl-en">toFixed</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">majorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">majorValue</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">_formatStep</span><span class="pl-kos">(</span><span class="pl-s1">minorValue</span><span class="pl-kos">,</span> <span class="pl-s1">minorName</span><span class="pl-kos">,</span> <span class="pl-s1">majorValue</span><span class="pl-kos">,</span> <span class="pl-s1">majorName</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-s1">scope</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scope</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">minorValue</span> <span class="pl-c1"><</span> <span class="pl-c1">200</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">minorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">minorValue</span> <span class="pl-c1">/</span> <span class="pl-c1">10</span><span class="pl-kos">)</span> <span class="pl-c1">*</span> <span class="pl-c1">10</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">minorValue</span> <span class="pl-c1"><</span> <span class="pl-c1">1500</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">minorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">minorValue</span> <span class="pl-c1">/</span> <span class="pl-c1">100</span><span class="pl-kos">)</span> <span class="pl-c1">*</span> <span class="pl-c1">100</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">majorValue</span> <span class="pl-c1"><</span> <span class="pl-c1">5</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">majorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-s1">majorValue</span><span class="pl-kos">.</span><span class="pl-en">toFixed</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">majorName</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> scope<span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">majorValue</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">_formatHeight</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">,</span> <span class="pl-s1">name</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span> <span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">scope</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scope</span><span class="pl-kos">,</span> <span class="pl-c1">distance</span>: <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">formatTime</span><span class="pl-kos">(</span><span class="pl-s1">s</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-s1">m</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">round</span><span class="pl-kos">(</span><span class="pl-s1">s</span> <span class="pl-c1">/</span> <span class="pl-c1">60</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">h</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">floor</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-c1">60</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">return</span> <span class="pl-s1">h</span> <span class="pl-c1">+</span> <span class="pl-s">":"</span> <span class="pl-c1">+</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">m</span> <span class="pl-c1">-</span> <span class="pl-kos">(</span><span class="pl-s1">h</span> <span class="pl-c1">*</span> <span class="pl-c1">60</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">.</span><span class="pl-en">padStart</span><span class="pl-kos">(</span><span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">formatters</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
<span class="pl-c1">km</span>: <span class="pl-kos">{</span>
...<span class="pl-s1">common</span><span class="pl-kos">,</span>
<span class="pl-en">formatTotal</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatTotal</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">,</span> <span class="pl-s">"m"</span><span class="pl-kos">,</span> <span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span> <span class="pl-s">"km"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">formatStep</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatStep</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">,</span> <span class="pl-s">"m"</span><span class="pl-kos">,</span> <span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span> <span class="pl-s">"km"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">formatHeight</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatHeight</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">,</span> <span class="pl-s">"m"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-c1">mi</span>: <span class="pl-kos">{</span>
...<span class="pl-s1">common</span><span class="pl-kos">,</span>
<span class="pl-c1">ftSize</span>: <span class="pl-c1">0.3048</span><span class="pl-kos">,</span>
<span class="pl-c1">miSize</span>: <span class="pl-c1">1609.344</span><span class="pl-kos">,</span>
<span class="pl-en">formatTotal</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatTotal</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ftSize</span><span class="pl-kos">,</span> <span class="pl-s">"ft"</span><span class="pl-kos">,</span> <span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">miSize</span><span class="pl-kos">,</span> <span class="pl-s">"mi"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">formatStep</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatStep</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ftSize</span><span class="pl-kos">,</span> <span class="pl-s">"ft"</span><span class="pl-kos">,</span> <span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">miSize</span><span class="pl-kos">,</span> <span class="pl-s">"mi"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-en">formatHeight</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_formatHeight</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">/</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ftSize</span><span class="pl-kos">,</span> <span class="pl-s">"ft"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Then, set <code class="notranslate">currentFormatter = formatters.mi</code> in the <code class="notranslate">#directions_distance_units_mi.change</code> handler and use the <code class="notranslate">formatStep</code>, <code class="notranslate">formatTotal</code>, etc.. directly from <code class="notranslate">currentFormatter</code>.</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5915#pullrequestreview-2759955517">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLP6Z6XUH4VJ4PT7F6D2Y6NXJAVCNFSM6AAAAAB236JSZ6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDONJZHE2TKNJRG4">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLK4ZVIRYU672FGHH5L2Y6NXJA5CNFSM6AAAAAB236JSZ6WGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTVEQGKD2.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5915/review/2759955517</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5915#pullrequestreview-2759955517",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5915#pullrequestreview-2759955517",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>