JavaScript module to switch the user interface language on the fly without reloading the page.

On elements you want to switch the language text you have to add an attribute (data-lang-ckey="...") to the element. The value of the attribute is the key into the language data.

When switching the language the content, title or placeholder of the element will be set according to value of the attribute.

Requirements

To use mini-i18n you need

JavaScript enabled.
include jQuery before mini-i18n.
Pass language text data to mini-i18n, either direct or via an api url.

Minimal example

Here is a minimal working example:

<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button data-lang-switch="en-US">English</button>
    <button data-lang-switch="de-DE">Deutsch</button>
    <hr>

    <h1 data-lang-ckey="catalog">Catalog</h1>
    <h4 data-lang-ckey="northern">Northern</h4>
    <small data-lang-ckey="last_update">Last update:</small>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://raw.githubusercontent.com/AndiSHFR/mini-i18n.js/master/mini-i18n.js"></script>
    
    <script>
    $.fn.miniI18n({ 
      data: {
        'de-DE': {
          'catalog': 'Katalog',
          'northern': 'nördlich',
          'last_update': 'Letzte Aktualisierung',
        },
        'en-US': {
          'catalog': 'Catalog',
          'northern': 'nothern',
          'last_update': 'Last update',
        }
      }
    });

    $(function() {
      $.fn.miniI18n('en-US');
    });
    </script>

  </body>
</html>

Attributes used

To control the behaviour of the module you need to add attributes to your page elements.

data-lang-switch

Use this attribute to mark an element that is able to switch the language. i.e. a button or link. The value of the attribute will be the name of the language to switch to.

<button data-lang-switch="en-US">English</button>

data-lang-ckey

Use this attribute to set the language text key for the content of the element.

<label data-lang-ckey="fname">...</label><input type="text" />

data-lang-tkey

Use this attribute to set the language text key for the title attribute of the element.

<label data-lang-tkey="fname" title="-">...</label><input type="text" />

data-lang-pkey

Use this attribute to set the language text key for the placeholder attribute of the element.

<input type="text" placeholder="..." data-lang-pkey="fname" />

Flat vs. Nested Language Data

Usually the language data comes as a list of key/value pairs.

{
  "fname": "Firstname",
  "lname": "Lastname",
  "city": "City",
  "zip": "Zip"
  }

You will specify this data as simple as

<p><label data-lang-ckey="fname">...</label><input type="text" /></p>
<p><label data-lang-ckey="lname">...</label><input type="text" /></p>

However, sometimes it is more convenient to bring more structure into the language data. So mini-i18n supports nested/structred language data.

This helps organizing language text on a per module base in different files and combine them on the server side into one huge download.

{
  "address": {
    "fname": "Firstname",
    "lname": "Lastname",
    "city": "City",
    "zip": "Zip"
    },
  "login" : {
    "uname": "Username",
    "pword": "Password"
    }
  }

With the structure above you can use the following way to specify the language key:

<label data-lang-ckey="address.fname">-</label><input type="text" />
<label data-lang-ckey="address.lname">-</label><input type="text" />

License

mini-i18n is MIT licensed.