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})$', replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|\\s)*)$', currentLanguagePattern: '^[a-z]{2}[A-Z]{2}$', 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> 
