/LangApplier

Don't waste any time coding complex language changing code in JS, just add a few attributes to your HTML elements instead!

Primary LanguageHTMLMIT LicenseMIT

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