Nougat Predominant Middleware
    Wondering what’s next for npm?Check out our public roadmap! »

    internationalisation

    1.0.230 • Public • Published

    Project status

    npm version downloads build status code coverage dependencies development dependencies peer dependencies documentation website

    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>
    

    Install

    npm i internationalisation

    DownloadsWeekly Downloads

    1,654

    Version

    1.0.230

    License

    CC-BY-3.0

    Unpacked Size

    63.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar