List of resource IDs
Function that returns a generator over FluentBundles
Applies translations onto elements.
Add newRoot to the list of roots managed by this DOMLocalization.
Additionally, if this DOMLocalization has an observer, start observing
newRoot in order to translate mutations in it.
Root to observe.
Remove root from the list of roots managed by this DOMLocalization.
Additionally, if this DOMLocalization has an observer, stop observing
root.
Returns true if the root was the last one managed by this
DOMLocalization.
Root to disconnect.
Retrieve the translation corresponding to the id identifier.
If passed, args is a simple hash object with a list of variables that
will be interpolated in the value of the translation.
docL10n.formatValue(
'hello', { who: 'world' }
).then(console.log);
// 'Hello, world!'
Returns a Promise resolving to the translation string.
Use this sparingly for one-off messages which don't need to be retranslated when the user changes their language preferences, e.g. in notifications.
Identifier of the translation to format
Retrieve translations corresponding to the passed keys.
A generalized version of DOMLocalization.formatValue. Keys must
be {id, args} objects.
docL10n.formatValues([
{id: 'hello', args: { who: 'Mary' }},
{id: 'hello', args: { who: 'John' }},
{id: 'welcome'}
]).then(console.log);
// ['Hello, Mary!', 'Hello, John!', 'Welcome!']
Returns a Promise resolving to an array of the translation strings.
Get the data-l10n-* attributes from DOM elements.
localization.getAttributes(
document.querySelector('#welcome')
);
// -> { id: 'hello', args: { who: 'world' } }
HTML element
Get the data-l10n-* attributes from DOM elements as a two-element
array.
Collects all translatable child elements of the element.
Pauses the MutationObserver.
Resumes the MutationObserver.
Set the data-l10n-id and data-l10n-args attributes on DOM elements.
FluentDOM makes use of mutation observers to detect changes
to data-l10n-* attributes and translate elements asynchronously.
setAttributes is a convenience method which allows to translate
DOM elements declaratively.
You should always prefer to use data-l10n-id on elements (statically in
HTML or dynamically via setAttributes) over manually retrieving
translations with format. The use of attributes ensures that the
elements can be retranslated when the user changes their language
preferences.
localization.setAttributes(
document.querySelector('#welcome'), 'hello', { who: 'world' }
);
This will set the following attributes on the #welcome element.
The MutationObserver will pick up this change and will localize the element
asynchronously.
<p id='welcome'
data-l10n-id='hello'
data-l10n-args='{"who": "world"}'>
</p>
Element to set attributes on
l10n-id string
KVP list of l10n arguments
Translate a list of DOM elements asynchronously using this
DOMLocalization object.
Manually trigger the translation (or re-translation) of a list of elements.
Use the data-l10n-id and data-l10n-args attributes to mark up the DOM
with information about which translations to use.
Returns a Promise that gets resolved once the translation is complete.
List of elements to be translated
Translate a DOM element or fragment asynchronously using this
DOMLocalization object.
Manually trigger the translation (or re-translation) of a DOM fragment.
Use the data-l10n-id and data-l10n-args attributes to mark up the DOM
with information about which translations to use.
Returns a Promise that gets resolved once the translation is complete.
Element or DocumentFragment to be translated
Translate mutations detected by the MutationObserver.
Translate all roots associated with this DOMLocalization.
The
DOMLocalizationclass is responsible for fetching resources and formatting translations.It implements the fallback strategy in case of errors encountered during the formatting of translations and methods for observing DOM trees with a
MutationObserver.