Lightweight, easy to use and lightning fast language changer for infinite languages!
Don't waste any time coding complex language changing code in JS, just add a few attributes to your HTML elements instead!
Demonstration on this page
Installation:
1. Put this in your document header:
<script src="https://cdn.jsdelivr.net/gh/Sv443/langapplier@1/langapplier.js"></script>2. (optional) Set a default language on your element:
<body data-default_lang="YOUR_LANG_CODE">
<!-- I recommend using a sequence of chars before the lang code (for example: __EN), because it may conflict with your specified content otherwise -->How to use:
1. Add the class langapp to every element that needs to be affected by the language change
<div class="langapp"></div>2. Add the needed attributes to change specific things of the element
<!-- in this example __EN and __DE are my language codes -->
<!-- when the language change function gets called it will search for that code -->
<!-- here's how to use it: -->
<!-- (you can also stack the attributes to change multiple things at once) -->
<div class="langapp" data-lang_content="__EN°English Content|__DE°German Content">
<!--(this affects the innerHTML of the element)-->
<div class="langapp" data-lang_title="__EN°English Content|__DE°German Content">
<!--(this affects the title attribute of the element)-->
<img class="langapp" data-lang_src="__EN°http://url.to/your/image_EN.png|__DE°http://url.to/your/image_DE.png">
<!--(this affects the src attribute of the element)-->
<!-- the same thing can be applied to the onclick, href and placeholder attributes using "data-lang_onclick", "data-lang_href" or "data-lang_placeholder" respectively -->Syntax (remove spaces): LANG1_CODE ° LANG1_CONTENT | LANG2_CODE ° LANG2_CONTENT (you can add infinite languages)
3. Switch between languages
langapp.change("LANG_CODE");4. If you want to trigger a function once the language was changed, use an event listener like this
document.addEventListener("lang_change", yourFunction);5. The document's lang dataset contains the currently selected language so you can read it like this
var xy = document.body.dataset.lang;6. If you want to disable the watermark in the console, add this to your document header
<meta id="langapplier_disable_watermark">7. If you want to enable console debugging, add this to your document header
<meta id="langapplier_enable_debug">