dizquetv
dizquetv copied to clipboard
Using angular-translate for localized Strings
This isn't necessarily a problem, but it could help improve maintainability. String changes could be made in a single location, and translations of the UI could be made feasible. Downside is it would be a pain to initially set-up, but that's usually true of most maintenance improvements :)
Essentially you'd have a /public/i18n/{Language Code}.json
file containing strings used throughout the application. Using angular-translate, you can call a string via {{ STRING_KEY | translate }}
, or in an element, using the attribute data-translate="STRING_KEY."
Additional parameters can be passed in, as well, for example:
<span data-translate="WARN.NO_FILLER_SOURCES" data-translate-values="{ param: '<span class=\'fa fa-plus\'></span>'}"
I have an example commit here of what it might look like, affecting the main page, the version page, channel config, and programming config(partial): https://github.com/khuckins/dizquetv/commit/40dff4efe359e8a712d9e705b6375f057baa7689
It would require two additional packages: angular-translate
and angular-translate-loader-static-files
. angular-sanitize
is also in the above commit, but only because I didn't notice their support for preventing XSS attacks via the sanitize method has issues, and the 'escape' method is preferred. If there's any interest, I'll make some further progress and make a PR.
Language support was in the road map with #266 . I haven't really decided what framework to use for it. I'll have to take a look. I do not really like string replacement methods because sometimes you need concatenation and concatenation doesn't work when the grammar varies. Hopefully angular-translate has a fix for that stuff.
The parameter functionality can assist there, as it supports variables, if that's the worry. So on the localization json side, your entry becomes, for example,: "NO_FILLER_SOURCES": "No filler sources set. Click the {{param}} to add filler lists.",
- While that param is referencing my above data-translate-values
example, you can pass in any variables, as well. This leaves it up to the translator to decide where best to fit the information into their language's grammar