JQuery Extension To Replace Text For Client-Side Internationalization

Internationalization is a customizable jQuery webpage localization plugin that makes it easy to client-side translate any strings within your document.

jQuery extension to replace an alternate version of the text for client-side internationalization.

Must Read: JavaScript Client-Side HTML Table Sorting Library

How to make use of it:

1. You can simply download the compiled version as a zip file from here and paste the following required dependencies:

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
></script>
<script
    src="https://torben.website/clientnode/data/distributionBundle/index.js"
></script>
<!--Inject downloaded file:
<script src="index.js"></script>
-->
<!--Or integrate via cdn:-->
<script
    src="https://torben.website/internationalisation/data/distributionBundle/index.js"
></script>

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

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

3. After you update your packages, you can simply rely on this script and let the module compiler do the tricky stuff or access them via an exported variable name in a given context.

...
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()
...

4. To add two versions of a text string, you simply add your translation directly in the markup.

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

Must Read: Handles a Table Loading with AJAX | jQuery ajaxTable

5. Sometimes you need to explicitly mark a text node as text to replace it with the next translation node.

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

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

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
></script>
<script
    src="/clientnode/data/distributionBundle/index.js"
></script>
<script
    src="/internationalisation/data/distributionBundle/index.js"
></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', 'lang-replacement'],
        replaceDomNodeNames: ['#text', 'lang-replace'],
        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>

Read More –

Vanilla JavaScript Library For Creating Avatars On The Client or Server-Side
Client-Side Javascript JSON To HTML Templating Library | json2html


See Demo And Download

Official Website(thaibault): Click Here

This superior jQuery/javascript plugin is developed by thaibault. For extra Advanced Usage, please go to the official website.

Share