README
Project status
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})