Don't waste any time coding complex language changing code in JS, just add a few attributes to your HTML elements instead!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
demo.html
langapplier.js

README.md

ko-fi License: MIT

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">