Combine and reuse translations?

[nrenner]

#314 appends keyboard shortcuts to tooltip texts like this (see en.json diff):

"reverse-route": "Reverse route (R key)",

I wonder if we can make translator's life easier by combining the tooltip text itself and the key appendix in a more generic fashion.

Maybe by using nesting, leaving the original translations untouched and using a new translation key that concatenates both, e.g. (untested):

  "keyboard": {
    "shortcut": "key"
  },
  "map": {
    "reverse-route": "Reverse route",
    "reverse-route-key": "$t(map.reverse-route) (R $t(keyboard.shortcut))"

Or, maybe if append works with attributes like this (also untested):

data-i18n="[title]map.reverse-route;[title][append]keyboard.shortcut"
data-i18n-options='{ "key": "R" }'

with

  "keyboard": {
    "shortcut": " ({{key}} key)"
  },

[rkflx]

Good idea.

Not sure if statically appending will be applicable in every language (sometimes prepending might be needed?), but i18next's "nesting" combined with "interpolation" worked for me:

diff --git a/js/index.js b/js/index.js
index cc19ee7..519241e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -78,7 +78,7 @@
function() {
routing.reverse();
},
-            i18next.t('map.reverse-route')
+            i18next.t('keyboard.generic-shortcut', { action: '$t(map.reverse-route)', key: 'R' })
);
var deletePointButton = L.easyButton(
diff --git a/js/plugin/stravaSegments.js b/js/plugin/stravaSegments.js
index a4de7ec..626a9db 100644
--- a/js/plugin/stravaSegments.js
+++ b/js/plugin/stravaSegments.js
@@ -1,8 +1,8 @@
BR.stravaSegments = function(map, layersControl) {
var stravaControl = L.control
.stravaSegments({
-            runningTitle: i18next.t('map.strava-running'),
-            bikingTitle: i18next.t('map.strava-biking'),
+            runningTitle: i18next.t('map.strava-shortcut', { action: '$t(map.strava-running)', key: 'S' }),
+            bikingTitle: i18next.t('map.strava-shortcut', { action: '$t(map.strava-biking)', key: 'S' }),
loadingTitle: i18next.t('map.loading'),
stravaToken: BR.keys.strava
})
diff --git a/locales/en.json b/locales/en.json
index 56573bf..cc25042 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -126,12 +126,13 @@
"opacity-slider": "Set transparency of route track and markers\n(Hold M key to mute temporarily)",
"preview": "Preview",
"privacy": "Privacy",
-    "reverse-route": "Reverse route (R key)",
+    "reverse-route": "Reverse route",
"route-quality-altitude": "Altitude coding (C key to toggle)",
"route-quality-cost": "Cost coding (C key to toggle)",
"route-quality-incline": "Incline coding (C key to toggle)",
-    "strava-biking": "Show Strava biking segments\n(S key to toggle layer, click to reload for current area)",
-    "strava-running": "Show Strava running segments\n(S key to toggle layer, click to reload for current area)",
+    "strava-biking": "Show Strava biking segments",
+    "strava-running": "Show Strava running segments",
+    "strava-shortcut": "{{action}}\n({{key}} key to toggle layer, click to reload for current area)",
"zoomInTitle": "Zoom in (+ key)",
"zoomOutTitle": "Zoom out (- key)"
},
@@ -266,5 +267,8 @@
"temporary-profile": "<strong>Note:</strong> Uploaded custom profiles are only cached temporarily on the server.<br/>Please save your edits to your local PC.",
"tracks-load-error": "Error loading tracks: {{error}}",
"upload-error": "Upload error: {{error}}"
+  },
+  "keyboard": {
+    "generic-shortcut": "{{action}} ({{key}} Key)"
}
}

Let me know if I should continue with this approach and send a PR.

[rkflx]

PR: #317

Couldn't get data-i18n-options='{ "key": "k" }' to be evaluated, though:

i18next::interpolator: missed to pass in variable key for interpolating TestAction {{key}}

Therefore, I'm using $('#testButton').localize({ key: 'k' }) for now (unless someone sees why that does not work?).

[nrenner]

jquery-i18next seems to have an init option useOptionsAttr that defaults to false (for whatever reason).

Probably that needs to be set here (not tested).

[rkflx]

Thanks for the tip. I already tried this before, but it did not help.

However, now that I tried it again, I noticed I have to remove $('html').localize({...}) in parallel for it to work. Apparently we can only use either localize() with data-i18n-options or localize({...}) for any given element, since options do not merge. So we have to adapt privacyPolicyUrl too.

Updated PR.

[nrenner]

Hm, Ok, good to know.