GitHub Repository with more Information




How to install:

  1. Put this in your document header:
    <script src="https://cdn.jsdelivr.net/gh/Sv443/langapplier@1/langapplier.js"></script>




  2. (optional) Modify your <body> tag with the default language
    I recommend using a sequence of chars before the lang code (for example: __EN), because it may conflict with your specified content otherwise
    <body data-default_lang="YOUR_LANG_CODE">









How to use:

  1. Add the class langapp to every element that needs to be affected by the language change:
    <div class="langapp">




  2. Add the needed attributes to change specific things of the element:
    innerHTML:     <div class="langapp" data-lang_content="__EN°English Content|__DE°German Content">                             (this affects the innerHTML of the element)
    title:     <div class="langapp" data-lang_title="__EN°English Content|__DE°German Content">                                   (this affects the title attribute of the element)
    src:     <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)
    Furthermore you can use data-lang_onclick, data-lang_href and data-lang_placeholder


    Syntax:    LANG1_CODE  °  LANG1_CONTENT  |  LANG2_CODE  °  LANG2_CONTENT    (remove spaces)




  3. Switch between languages:
    langapp.change("LANG_CODE");




  4. If you want to deactivate the watermark in the console, add this to your header:
    <meta id="langapplier_disable_watermark">
  5. [1.1.0] If you want to enable console debugging, add this to your header:
    <meta id="langapplier_enable_debug">




  6. If you want to call a function when the language changes you can add an event listener like this:
    document.addEventListener("lang_change", yourFunction);




  7. The document's lang dataset contains the currently selected language so you can return it like this:
    document.body.dataset.lang;









Demonstration:

Change Language:
(Using an invalid language will leave everything as is)

Current Language:




<div class="langapp" data-lang_content="__EN°English Content|__DE°German Content|__CUSTOM°Custom Content" data-lang_title="__EN°English Title|__DE°German Title|__CUSTOM°Custom Language Title"></div>







<span class="langapp" data-lang_title="__EN°English hover title|__DE°German hover title|__CUSTOM°Custom Language hover title" data-lang_content="__EN°Language: English - hover over me!|__DE°Language: German - hover over me!|__CUSTOM°Language: Custom - hover over me!">Hover over me</span>

Hover over me







<img class="langapp" data-lang_src="__EN°http://sv443.net/resources/images/lang_en.png|__DE°http://sv443.net/resources/images/lang_de.png|__CUSTOM°http://sv443.net/resources/images/lang_custom.png" data-lang_title="__EN°English Flag|__DE°German Flag|__CUSTOM°Custom Flag">

(MIT License)