fabi1cazenave / webl10n Goto Github PK
View Code? Open in Web Editor NEWClient-side internationalization / localization library
Home Page: http://fabi1cazenave.github.com/webL10n/
Client-side internationalization / localization library
Home Page: http://fabi1cazenave.github.com/webL10n/
I've created a PR to handle reading multi-line string from property files which have a \
EOL delimiter.
PR: #65
Subj.
Error is here:
...
// initialize _pluralRules
if (!gMacros._pluralRules) {
gMacros._pluralRules = getPluralRules(gLanguage);
}
...
so, pluralRules are intializaed only once.
To fix it, remove if statement:
...
// initialize _pluralRules
gMacros._pluralRules = getPluralRules(gLanguage);
...
Alluded to already in #48, webl10n makes synchronous XMLHttp requests.
As warned in the Chrome console, and specified on https://xhr.spec.whatwg.org/
Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.
This must be addressed going forward.
After a release, produce a minified l10n.js. 'Nuff said ;)
This problem occurs with Chrome and Opera because Blink uses es-419 for latin american spanish.
My locales.ini
@import url(en/app.properties)
[es]
@import url(es/app.properties)
I wanted to use innerHTML
duck = run <a href="http://duck.net">baby</a>
But you use =
to split the string, so everything after href is lost.
Here's a quick fix proposal:
git diff --no-prefix
diff --git l10n.js l10n.js
index 3be588a..2924727 100644
--- l10n.js
+++ l10n.js
@@ -127,7 +127,7 @@ document.webL10n = (function(window, document, undefined) {
var reComment = /^\s*#|^\s*$/;
var reSection = /^\s*\[(.*)\]\s*$/;
var reImport = /^\s*@import\s+url\((.*)\)\s*$/i;
- var reSplit = /\s*=\s*/; // TODO: support backslashes to escape EOLs
+ var reSplit = /^([^=\s]*)\s*=\s*(.+)$/; // TODO: support backslashes to escape EOLs
// parse the *.properties file into an associative array
function parseRawLines(rawText, extendedSyntax) {
@@ -162,9 +162,9 @@ document.webL10n = (function(window, document, undefined) {
}
// key-value pair
- var tmp = line.split(reSplit);
- if (tmp.length > 1)
- dictionary[tmp[0]] = evalString(tmp[1]);
+ var tmp = line.match(reSplit);
+ if (tmp.length === 3)
+ dictionary[tmp[1]] = evalString(tmp[2]);
}
}
Is there a script in place to create the initial locales.ini file from the original HTML file, as long as data-l10n-id attributes are in place?
Hi,
The function
function translateFragment(element) {
element = element || document.documentElement;
// check all translatable children (= w/ a `data-l10n-id' attribute)
var children = getTranslatableChildren(element);
var elementCount = children.length;
for (var i = 0; i < elementCount; i++) {
translateElement(children[i]);
}
// translate element itself if necessary
translateElement(element);
}
in webL10n should be able to translate a documentFragment, I think, and is exposed as translate
in the public API.
But the last call to translateElement(element)
fails in such a case as it is not possible to getAttributes
of a documentFragment. What about encapsulating it in a test to not call it on documentFragment elements?
Hi, as part of porting Loqui (which uses this library) we are seeing a lot of undefined warning logs according to the following code:
function getL10nData(key, args, fallback) {
var data = gL10nData[key]; // << basically gL10nData does not have the Key.
if (!data) {
consoleWarn('#' + key + ' is undefined.');
if (!fallback) {
return null;
}
data = fallback;
}
It looks like load and parse l10n data is happening AFTER the warning is printed (set breakpoints, above code executes first before the loading is complete). The code in index.html is:
<script type="text/spacebars" name="welcome">
<h1>{{_ 'WelcomeTo' app.name}}</h1>
</script>
However others are working:
<h1 data-l10n-id="Providers">Add accounts</h1> // << This works fine.
Thanks for your help.
Hallo i try to add localization into very simple FirefoxOS html5 app
https://github.com/Vitexus/ConverTemp
And there is problem with unicode strings encoding. Example:
czech word "převaděč" is written as "p\u0159evad\u011b\u010d"
What i did wrong or how to fix ?
Thanks for your time
Hi! Hope someone may help me, please. I have a very simple one-page website.
I connected this library: used your l10n.js, added locales.ini with:
[*] @import url(data.en.properties) [ru] @import
url(data.ru.properties)`
and two files data.en.properties
and data.ru.properties
.
The situation is that If navigator.language is [ru-RU] it is translated as [ru]. And it's great! English works fine too.
But, if navigator.language is [ru] it uses the default language, which is [en].
Absolutely don't know what's wrong :(
Dream of some help...
Unfortunately for IE9, it caps the lang code incorrectly. But it caps zh-TW
correctly.
Don't worry though coz English is usually the default language.
For most Mozilla web projects, we use .PO files which are a pretty mature standard (and enable us to use xgettext to extract strings from our JS. Adding support would make it easier for lots of projects to migrate to webL10n.
Hi,
I have been using PDF.js' viewer to display PDF files and I found out it was using this library. I have an issue with the synchronous request. I believe that nothing should ever block the Javascript thread, no matter what, and using a synchronous XHR request is a really bad idea.
I'm currently working on a local server that shares the same thread with Javascript, so the synchronous request ended up causing a deadlock. So, in order to fix my issue, I have forked the project and fixed it for my scenario. I believe it should work for requesting multiple .properties files, but I have not tested it, since I'm on a very tight schedule, so I'm not creating a pull request at the moment. If anyone is interested in fixing this, you can find my solution to this problem at https://github.com/KTachyon/webL10n
not confirmed yet, bug see mozilla-b2g/gaia#6333 (comment)
Let's define a string as this:
steps-walk = From *{{stop}}* walk for *{{duration}}* to *{{to}}*.
Then in JavaScript, use it this way:
text = _('steps-walk', {from: step.indic.stop, to: step.indic.direction, duration: step.duration});
The first parameter is invalid but one could expects that the other parameters are correctly substitued. Currently, as of the webL10n version included in Gaia for v1.0.1 of Firefox OS, none of the parameters gets replaced by their values.
import("foo.js") is broken
import(foo.js) works
document.webL10n.locales read only getter ?
excuse me,
I have one problem when I call setLanguage();
My requirement:
set a cookie combine with webL10n, if the user set language before, the website will auto set language by last cookie.
The console appear loop message, can't stop, I don't know what happened....please help me check it, thank you.
Currently, it looks like the l20n parser doesn't support conditional expressions which branch into another conditional expressions:
<plural(n) { n==1 ? "one" : n<5 ? "twofour" : "many" }>
It looks like logical expressions are not currently supported
<macro(n) { n>2 && n<5 }>
(minimized example, not very useful in real life)
Hi,
I am trying to mix plural and properties other than textContent
, such as innerHTML
.
My properties file contains:
available_bikes.innerHTML = {[ plural(n) ]}
available_bikes[zero].innerHTML = available<br/>bike
available_bikes[one].innerHTML = available<br/>bike
available_bikes[other].innerHTML = available<br/>bikes
And my HTML file contains:
<span data-l10n-id="available_bikes" data-l10n-args='{ "n": "42" }'>vélos<br/>disponibles</span>
Which, as far as I understand the syntax and the way the code works, should be working. But it does not. It displays {[ plural(n) ]}
, which is unexpected. If I edit the HTML file to look like this:
<span data-l10n-id="available_bikes[other]">vélos<br/>disponibles</span>
it works.
Do you know if I am doing anything wrong or if this is a bug?
Thanks
It would be very useful to have some kind of versioning for l10n.js, both on the github page via releases (which are simply created by tagging a commit) and within the file itself. Otherwise (as it is now), it is hard (read: impossible) to track newer vs. older versions, especially in regard to fixed bugs.
Additionally, it would be useful to have the version changelog documented for each release, but this is not so essential.
would be nice to have a bower package of webL10n
When a l10n file contains localizations for several language codes, but not the primary subtag, and the browser reports only the primary subtag, then this library fails to map the browser's language code to a l10n file.
For instance, in the following situation, one would expect the es-ES locale to be used because the primary subtag matches the browser's language (example from mozilla/pdf.js#6048 (comment)):
es-ES
es-ES
(=letters before the first hyphen): es
es
This could easily be implemented by mapping primary subtags to the first language code with the same primary subtag if the localization data for the primary subtag is not specified.
Note that this operation does not always guarantee usable results, because there are language codes with identical primary subtags that are not mutually intelligible, az-Latin
and az-Cyrl
is given as an example by RFC 4646, section 4.2.
I think there is a bug at the line 1144
if (e.propertyName === 'localized')
might need to be replaced with
if (e.type === 'localized')
Credit goes to TypeScript
Country Code is missing, i.e.:
en-US
en-GB
...
It's a bit cumbersome to have to duplicate the string in the default language in the [*]
section in the .ini
file (or the respective .properties
file). Often, with multiple folks editing files, they can forget to adjust the .ini
file after editing the string in the HTML/JS.
Either this case isn't supported, I'm doing it wrongly, or there's a more obvious way to automatically generate these strings that I haven't thought of. I had considered a build step to re-generate create human-readable l10n ids. Thoughts?
SemanticUI uses data-attributes for specifying tooltip/popup values. Example:
<div class="ui icon button" data-l10n-id="name" data-tooltip="Add users to your feed">
<i class="add icon"></i>
</div>
I've tried setting up many variants in the ini file, like:
name.data-tooltip
name.data[tooltip]
name.dataTooltip
but the data-atrribute never is referenced.
Is this supported and, if not, could it be?
(Needless to say that other localizations, either of elements or of attributes, work fine.)
locales.ini
emailFieldName = E-Mail
emptyFieldMessage = Plaese fill out the "{{ fieldName }}" field!
HTML
<span data-l10n-id="emptyFieldMessage" data-l10n-args="{ fieldName: THIS SHOULD BE REPLACED WITH TRANSLATED emailFieldName }"></span>
Hi guys,
I would like to use your web10ln in a project whose pages are served by a very restrictive web server. This webserver can't serve anything whose extension is not .html, .css, .js, .png, .jpg and .gif.
Considering this limitation is it possible for me to embedded the .ini content or convert it to javascript somehow?
Thanks in advance,
Eric
👍
For templates, components, ...
Right now when new elements are added using data-l10n
attributes, they're not translated live. Using Mutation Observers may solve the issue and bring a nice feature to the lib.
I'm using setLanguage() in my unit tests to ensure my localisation is functioning.
Now that resources are loaded asynchronously, you must wait for setLanguage() to complete before continuing.
I've made it work using the 'localized' event, but I don't find that intuitive - I would expect 'localized' to fire after translation, not just loading a language.
If there were a callback parameter to setLanguage, it wouldn't be so ambiguous.
Paul
Because of bug 688580, if l10n.js
is loaded with <script defer>
over a HTTP webpage, the DOMContentLoaded
listener added in the script event will never fire. The page will never be localized.
According to spec, deferred script should block the event and other browsers implemented as such.
Unfortunately document.readyState
will be interactive
in both browsers.
Need to find a way to workaround this bug, in order to make webL10n fit this use case (and all other use cases).
Excuse me,
I am a beginner for JS.
Is possible to load variable in other script with webL10n?
ex:
var myLanguage = getLanguage();
thank you.
According the the doc, one should put the default lang under a [*]
section, and all languages w/o a matching would match against that. So we would have:
[*]
greeting=Hello <-- an English string
[zh-TW]
greeting=您好
and when l10n.js
loads in a fr-FR
browser, we would have a localized
event with evt.language
set to fr-FR
but the UI isn't actually French.
I currently workaround this limit by writing <html data-l10n-id="html">
and html.lang
a entry for every language. Tell me if that's what you intended.
data- prefixed attributes get the job done but in SVG or XHTML it's not valid
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.