ln-translations is applied to form elements via <form data-ln-translations data-ln-translations-default="en"> to coordinate multi-lingual field editing. It identifies translatable input containers ([data-ln-translatable="field"]), dynamically cloning form controls with deterministic nested naming (e.g. trans[lang][field]) as languages are added. It synchronizes active locale badges and selection menus using <template> elements, submitting localized values natively through the standard HTML form submission pipeline without custom network logic.
In ln-ashlar, this zero-dependency coordinator manages inline multi-lingual inputs by dynamically cloning translatable fields on-demand.
A translation utility should only coordinate input fields and serialization layouts. It remains detached from language dictionaries or API translating services. It operates on structured form boundaries, mapping fields dynamically using deterministic HTML attributes. The generated input name attribute is the sole contract.
data-ln-translatable serve as templates. When a language is toggled, the coordinator clones the internal input or textarea, sets appropriate placeholder guides, and mounts it cleanly.
trans[en][title] or items[1][trans][en][title]), allowing standard form submissions to parse arrays natively.
<template> elements.
For the full guide see the ln-translations README and the architecture reference.
| Attribute | On element | Description |
|---|---|---|
data-ln-translations | <form> | Initializes instance |
data-ln-translations-default | <form> | Default language code (flag on originals) |
data-ln-translations-add | <button> | Trigger button (inside data-ln-dropdown) |
data-ln-translations-active | <ul> | Container for active language badges |
data-ln-translatable="field" | wrapper | Marks a translatable field |
data-ln-translations-prefix | wrapper | Nested prefix for name attr |
data-ln-translatable-lang | input/textarea | Language code (set by JS or server) |
const el = document.querySelector('[data-ln-translations]');
el.lnTranslations.addLanguage('en');
el.lnTranslations.addLanguage('sq', { scope: 'Prodhimi...' });
el.lnTranslations.removeLanguage('en');
el.lnTranslations.hasLanguage('en'); // boolean
el.lnTranslations.getActiveLanguages(); // Set| Event | Bubbles | Cancelable | Detail |
|---|---|---|---|
ln-translations:before-add | yes | yes | { target, lang, langName } |
ln-translations:added | yes | no | { target, lang, langName } |
ln-translations:before-remove | yes | yes | { target, lang } |
ln-translations:removed | yes | no | { target, lang } |
ln-translations:request-add | no | no | { lang } |
ln-translations:request-remove | no | no | { lang } |
// Without prefix:
name="trans[en][scope]"
// With prefix (data-ln-translations-prefix="items[5]"):
name="items[5][trans][en][title]"