Customizable jQuery Page Localization Plugin - internationalisation

internationalisation is a customizable jQuery web page localization and globalization plugin that makes it easier to translate any strings within your document on client side.

Installation:

# NPM
$ npm install internationalisation

How to use it:

1. Install and import the internationalisation into your project.

$ npm install internationalisation --save

2. Or include the compiled version on the web page as follow:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//unpkg.com/internationalisation"></script>

3. Add alternate version of your text as these:

<h1>
  Hello World!
  <!--deDE:Hallo Welt!-->
  <!--frFR:Bonjour le monde!-->
</h1>

4. Create the links to switch between languages.

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

5. Initialize the plugin with default options.

$(($) => $.Language())

6. Default configuration options.

$(($) => $.Language({

  // Selector prefix for all nodes to take into account.
  domNodeSelectorPrefix: 'body',

  // Initial language to use
  default: 'enUS',

  // List of all supported languages.
  selection: [],

  // Initial set language (if omitted it will be guest.
  initial: null,

  // Template delimiter to recognize dynamic content.
  templateDelimiter: {pre: '{{', post: '}}'},

  // Indicates whether a fade effect should be performed.
  fadeEffect: true,

  // Saves informations how parent dom nodes should be animated when containing text will be switched.
  textNodeParent: {
      showAnimation: [{opacity: 1}, {duration: 'fast'}],
      hideAnimation: [{opacity: 0}, {duration: 'fast'}]
  },

  // Pattern to introduce a pre replacement language node.
  preReplacementLanguagePattern: '^\\|({1})$',

  // Text pattern to introduce a post replacement node.
  replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|\\s)*)$',

  // Saves a pattern to recognize current language marker.
  currentLanguagePattern: '^[a-z]{2}[A-Z]{2}$',

  // Dom node tag name which should be interpreted as a hidden alternate language node (contains text in another language).
  replacementDomNodeName: ['#comment', 'langreplacement'],

  // Tag names which indicates dom nodes which should be replaced.
  replaceDomNodeNames: ['#text', 'langreplace'],

  // Lock description for the locking mechanism provided by the extended tools class.
  toolsLockDescription: '{1}Switch',

  // Hash prefix to determine current active language by url.
  languageHashPrefix: 'language-',

  // Class name which marks current language switcher button or link.
  currentLanguageIndicatorClassName: 'current',

  // Name to use for saving preferred language in local storage for current session.
  sessionDescription: '{1}',

  // A mapping of alternate language descriptions.
  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']
  },

  // A mapping of needed internal dom node descriptions to their corresponding selectors.
  domNode: {knownTranslation: 'div.toc'}

}))

7. Callback functions available.

$(($) => $.Language({

  // Callback which will be triggered after a language switch has been finished.
  onSwitched: this.constructor.noop,

  // Callback which will be triggered after a language check has been performed. 
  // Needed if some nodes have another language active then others. 
  // Useful if only some parts of the dom tree was updated and a full language update isn't required.
  onEnsured: this.constructor.noop,

  // Callback which should be called before a language switch should be performed.
  onSwitch: this.constructor.noop,

  // Callback which should be called before a language switch should be ensured.
  onEnsure: this.constructor.noop,

}))

Changelog:

2024-03-02

• v1.0.315

---

This awesome jQuery plugin is developed by thaibault. For more Advanced Usages, please check the demo page or visit the official website.