Combine and reuse translations for keyboard shortcuts

Using i18next's "nesting" and "interpolation" features should reduce the
overall number of strings to translate, as well as provide a
standardized pattern for shortcut tooltips (if applicable).

Note that this approach is still allowing for flexibility regarding
differently structured sentences in each language.

Resolves #315
This commit is contained in:
Henrik Fehlauer 2020-06-21 18:00:00 +00:00
parent e3a9f6206f
commit 09f987ea07
9 changed files with 156 additions and 66 deletions

View file

@ -61,7 +61,8 @@
role="button"
aria-haspopup="true"
aria-expanded="false"
data-i18n="[title]navbar.export-tooltip"
data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(navbar.export-tooltip)", "key": "X" }'
title="Export route"
>
<span class="fa fa-lg fa-cloud-download" aria-hidden="true"> </span>
@ -79,6 +80,12 @@
aria-haspopup="true"
aria-expanded="false"
data-i18n="[title]navbar.load.tooltip"
data-i18n-options='{
"tracksAction": "$t(navbar.load.tracks)",
"tracksKey": "O",
"nogosAction": "$t(navbar.load.nogos)",
"nogosKey": "$t(keyboard.shift)+O"
}'
title="Load route"
>
<span class="fa fa-lg fa-cloud-upload" aria-hidden="true"> </span>
@ -113,7 +120,8 @@
</div>
<div
class="nav-item"
data-i18n="[title]about.tooltip"
data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(about.tooltip)", "key": "H" }'
title="Show more information about BRouter-Web"
>
<a class="nav-link" href="#" data-toggle="modal" data-target="#about"
@ -314,7 +322,7 @@
updated daily, see dates of
<a href="https://brouter.de/brouter/segments4/" target="_blank">data files</a>.
</p>
<p data-i18n="[html]about.details">
<p id="aboutLinks" data-i18n="[html]about.details">
<i><a href="{{privacyPolicyUrl}}" target="_blank">Privacy Policy</a></i
>,
<i
@ -709,7 +717,12 @@
<a
href="#tab_layers_control"
role="tab"
data-i18n="[title]sidebar.layers.tooltip"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.layers.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
title="Select layers"
>
<!--
@ -738,7 +751,12 @@
<a
href="#tab_itinerary"
role="tab"
data-i18n="[title]sidebar.itinerary.tooltip"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.itinerary.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
title="Show Itinerary"
><i class="fa fa-map-signs"></i
></a>
@ -747,7 +765,12 @@
<a
href="#tab_profile"
role="tab"
data-i18n="[title]sidebar.customize-profile.tooltip"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.customize-profile.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
title="Customize profile"
><i class="fa fa-wrench"></i
></a>
@ -756,7 +779,12 @@
<a
href="#tab_data"
role="tab"
data-i18n="[title]sidebar.data.tooltip"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.data.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
title="Show detailed route data table"
><i class="fa fa-table"></i
></a>
@ -765,7 +793,12 @@
<a
href="#tab_statistics"
role="tab"
data-i18n="[title]sidebar.analysis.tooltip"
data-i18n="[title]sidebar.tab-tooltip"
data-i18n-options='{
"action": "$t(sidebar.analysis.tooltip)",
"toggleKey": "T",
"switchKey": "$t(keyboard.shift)+T"
}'
title="Analyse route"
><i class="fa fa-pie-chart"></i
></a>
@ -1073,7 +1106,8 @@
id="elevation-btn"
aria-expanded="false"
aria-label="Toggle elevation chart"
data-i18n="[title]footer.elevation-chart"
data-i18n="[title]keyboard.generic-shortcut"
data-i18n-options='{ "action": "$t(footer.elevation-chart)", "key": "E" }'
title="Toggle elevation chart"
>
<span class="fa fa-area-chart"></span>