internationalisation is a customizable jQuery net web page localization and globalization plugin that makes it simpler to translate any strings inside your doc on consumer facet.
Set up:
# NPM $ npm set up internationalisation
Learn how to use it:
1. Set up and import the internationalisation into your mission.
$ npm set up internationalisation --save
2. Or embrace the compiled model on the net web page as comply with:
<script src="//code.jquery.com/jquery.min.js"></script> <script src="//unpkg.com/internationalisation"></script>
3. Add alternate model of your textual content as these:
<h1> Hiya World! <!--deDE:Hallo Welt!--> <!--frFR:Bonjour le monde!--> </h1>
4. Create the hyperlinks to change 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 choices.
$(($) => $.Language())
6. Default configuration choices.
$(($) => $.Language({
// Selector prefix for all nodes to consider.
domNodeSelectorPrefix: 'physique',
// Preliminary language to make use of
default: 'enUS',
// Listing of all supported languages.
choice: [],
// Preliminary set language (if omitted will probably be visitor.
preliminary: null,
// Template delimiter to acknowledge dynamic content material.
templateDelimiter: {pre: '{{', submit: '}}'},
// Signifies whether or not a fade impact ought to be carried out.
fadeEffect: true,
// Saves informations how mother or father dom nodes ought to be animated when containing textual content might be switched.
textNodeParent: {
presentAnimation: [{opacity: 1}, {duration: 'fast'}],
hideAnimation: [{opacity: 0}, {duration: 'fast'}]
},
// Sample to introduce a pre substitute language node.
preReplacementLanguagePattern: '^|({1})$',
// Textual content sample to introduce a submit substitute node.
replacementLanguagePattern: '^([a-z]{2}[A-Z]{2}):((.|s)*)$',
// Saves a sample to acknowledge present language marker.
currentLanguagePattern: '^[a-z]{2}[A-Z]{2}$',
// Dom node tag identify which ought to be interpreted as a hidden alternate language node (comprises textual content in one other language).
replacementDomNodeName: ['#comment', 'langreplacement'],
// Tag names which signifies dom nodes which ought to be changed.
replaceDomNodeNames: ['#text', 'langreplace'],
// Lock description for the locking mechanism offered by the prolonged instruments class.
toolsLockDescription: '{1}Swap',
// Hash prefix to find out present energetic language by url.
languageHashPrefix: 'language-',
// Class identify which marks present language switcher button or hyperlink.
currentLanguageIndicatorClassName: 'present',
// Identify to make use of for saving most popular language in native storage for present 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 wanted inside dom node descriptions to their corresponding selectors.
domNode: {knownTranslation: 'div.toc'}
}))
7. Callback capabilities obtainable.
$(($) => $.Language({
// Callback which might be triggered after a language change has been completed.
onSwitched: this.constructor.noop,
// Callback which might be triggered after a language examine has been carried out.
// Wanted if some nodes have one other language energetic then others.
// Helpful if just some elements of the dom tree was updated and a full language replace is not required.
onEnsured: this.constructor.noop,
// Callback which ought to be referred to as earlier than a language change ought to be carried out.
onSwitch: this.constructor.noop,
// Callback which ought to be referred to as earlier than a language change ought to be ensured.
onEnsure: this.constructor.noop,
}))
Changelog:
2022-09-27
This superior jQuery plugin is developed by thaibault. For extra Superior Usages, please examine the demo web page or go to the official web site.
