Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including internationalisation with all npm packages installed. Try it out:

require("@babel/plugin-transform-runtime/package.json"); // @babel/plugin-transform-runtime is a peer dependency. require("clientnode/package.json"); // clientnode is a peer dependency. require("jquery/package.json"); // jquery is a peer dependency. var internationalisation = require("internationalisation")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

internationalisation v1.0.202

Expand your audience

Use case --------

A jQuery plugin to replace alternate version of text for client side internationalisation.

Content ------- [TOC] Installation ------------ ### Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:

#!HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://goo.gl/HEL97d"></script>
<!--Inject downloaded file:-->
<script src="index.compiled.js"></script>
<!--Or integrate via cdn:
<script src="https://goo.gl/3Axp2L"></script>
-->

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

### Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:

#!JSON

...
"dependencies": {
    ...
    "internationalisation": "latest",
    ...
},
...

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.

#!JavaScript

...
import Language from 'internationalisation'
class SpecialLanguage extends Language...
Language({options..})
// or
import {$} from 'internationalisation'
$.Language()
class SpecialLanguage extends $.Language.class ...
// or
Language = require('internationalisation').default
value instanceof Language
// or
$ = require('internationalisation').$
$.Language()
...
Usage -----

To add two versions of a text string you can simply add your translation directly in markup. See how easy it is:

#!HTML

<p>
    Your englisch version.
    <!--deDE:Ihre deutsche Variante.-->
    <!--frFR:
        Sa version française.
    -->
</p>

Sometime you need to explicit mark a text node as text to replace with next translation node. In this case you can simple wrap a self defined dom node.

#!HTML

<langreplace>
    Your englisch version with <strong>dom nodes</strong> inside.
</langreplace>
<!--deDE:
    Ihre deutsche Variante mit eingebetteten <strong>dom Knoten</strong>.
-->
<!--frFR:
    Votre version français <strong>dom nodes</strong> à l'intérieur.
-->

It is also possible to use an alternative replacement node.

#!HTML

<langreplace>
    Your englisch version with <strong>dom nodes</strong> inside.
</langreplace>
<langreplacement>deDE:
    Ihre deutsche Variante mit eingebetteten <strong>dom Knoten</strong>.
</langreplacement>
<langreplacement>frFR:
    Votre version français <strong>dom nodes</strong> à l'intérieur.
</langreplacement>

Usually the language dom node precedes the text node to translate. It is possible to write a special syntax to use a replacement for the next dom node containing text.

#!HTML

<!--|deDE:Ihre deutsche Variante.--><!--|frFR:Votre version français.-->
<p>Your englisch version.</p>

Its possible to save one translation once if you specify the area with known translations.

#!HTML

<!--The "div.toc" selector defines the default known language area.-->
<div class="toc">
  <ul>
    <li><a href="title-1">title 1</a></li>
      <ul>
        <li><a href="title-2">title 2</a></li>
      </ul>
  </ul>
</div>
<h1 id="title-1">title 1<!--deDE:Titel 1--><!--frFR:titre 1--></h1>
<h2 id="title-2">title 2<!--deDE:Titel 2--><!--frFR:titre 2--></h2>

With the below initialisation you can simple add this links everywhere in your page to switch language. On click you will switch the current language interactively. Try it by yourself:

#!HTML

<a href="#language-deDE">de</a>
<a href="#language-enUS">en</a>
<a href="#language-frFR">fr</a>

Here you can see a complete initialisation example with all available options to initialize the plugin with different configuration.

#!HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://goo.gl/HEL97d"></script>
<script src="https://goo.gl/3Axp2L"></script>
<script>
    $(($) => $.Language({
        domNodeSelectorPrefix: 'body',
        default: 'enUS',
        selection: [],
        initial: null,
        templateDelimiter: {pre: '{{', post: '}}'},
        fadeEffect: true,
        textNodeParent: {
            showAnimation: [{opacity: 1}, {duration: 'fast'}],
            hideAnimation: [{opacity: 0}, {duration: 'fast'}]
        },
        preReplacementLanguagePattern: '^\\|({1})apos;,
        replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|\\s)*)apos;,
        currentLanguagePattern: '^[a-z]{2}[A-Z]{2}apos;,
        replacementDomNodeName: ['#comment', 'langreplacement'],
        replaceDomNodeNames: ['#text', 'langreplace'],
        toolsLockDescription: '{1}Switch',
        languageHashPrefix: 'language-',
        currentLanguageIndicatorClassName: 'current',
        sessionDescription: '{1}',
        languageMapping: {
            deDE: ['de', 'de_de', 'de-de', 'german', 'deutsch'],
            enUS: ['en', 'en_us', 'en-us'],
            enEN: ['en_en', 'en-en', 'english'],
            frFR: ['fr', 'fr_fr', 'fr-fr', 'french']
        },
        onSwitched: $.noop(),
        onEnsured: $.noop(),
        onSwitch: $.noop(),
        onEnsure: $.noop(),
        domNode: {knownTranslation: 'div.toc'}
    }))
</script>
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free