Proximus

This project was created so you can easy change your page content base on a language but maybe it has another usages...

Table of Content

1. Coming Soon
2. Run Test

MIT License

Install JS

<!-- Proximus JS -->
<script src="proximus-min.js"></script>

Text change with class i18n, usage example:

<!-- Proximus will change the inside of the h1 tags to the one define in the language object  -->
<!-- Proximus knows you want to change the inside of this because of the class 'i18n'  -->
<!-- Proximus will take the 'id' and look for a key with that same 'id' and set it's value  -->
<!-- Note: If the key is not found proximus will set the inside with the 'id' name -->
<h1 class="i18n" id="title"></h1>
<!-- If we use the configuration of the simple initialization example --> 
<!-- Then this will be the result: -->
<h1 class="i18n" id="title">Hello world!</h1>

Text change with class i18nAtt, usage example:

<!-- Proximus will change the inside of the h1 tags to the one define in the language object  -->
<!-- Proximus knows you want to change the inside of this because of the class 'i18nAtt'  -->
<!-- Proximus will take the 'data-i18n' and look for a key with that same 'data-i18n' and set it's value  -->
<!-- Note: If the key is not found proximus will set the inside with the 'data-i18n' name -->
<h1 class="i18nAtt" data-i18n="title"></h1>
<!-- If we use the configuration of the simple initialization example --> 
<!-- Then this will be the result: -->
<h1 class="i18nAtt" data-i18n="title">Hello world!</h1>

Src change with class i18nImg, usage example:

<!-- Proximus will change the inside of the 'src' tag for what you specify in the language object if it's define -->
<!-- Proximus knows you want to change this because of the class 'i18nImg'  -->
<!-- Proximus will take the data-i18n and look for a key with that same data-i18n and set it's value  -->
<!-- Note: If the key is not found proximus will not change the src -->
<img class="i18nImg" data-i18n="logo" src="../img/placeholder.png"/>
<!-- If we use the configuration of the simple initialization example --> 
<!-- Then this will be the result: -->
<img class="i18nImg" data-i18n="logo" src="../img/logo.png"/>

Simple initialization

// Create your language object
var langObj = {
    'en':{
        "title":"Hello world!",
        "logo": "../img/logo.png"
    },
    'es':{
        'title': "Hola mundo",
    }
}
// Initialize Proximus
/*
* 1. The language object is Required.
* 2. Default staring language is 'en'.
* 3. Default cookie is lng.
*/
proximus.init(langObj);

Complex initialization

// Create your language object
var langObj = {
    'en':{
        "title":"Hello world!",
    },
    'es':{
        'title': "Hola mundo",
    }
}
/*
* 1. The language object ir Required.
* 2. Default staring language is 'en', but here I set it to 'es'.
* 3. Default cookie is 'lng', but here I set it to 'lang'.
*/
proximus.init(langObj, 'es', 'lang');

// Note: If you like you can have diferent instance of proximus by setting diferent cookies and object
// Example:
proximus.init(langObj);
proximus.init(langObj2, 'es', 'lang');

Utils functions

// You can change the cookie with this function
/*
* 1. The value variable is Required and will definde to what the language cookie will be change to.
* 2. The cookie name is optional and by default it will be 'lng'.
*/
proximus.change('es', 'lnp');

// You can get the current language with this function
/*
* 1. The cookie name is optional and by default it will be 'lng'.
*/
proximus.getLang('lnp'); 

/* Returns: 
*  'en'
*/

// You can get the current language with this function (Beta)
/*
* 1. The language object is Required.
* 2. The key you are looking for is Required.
* 3. The cookie name is optional and by default it will be 'lng'.
*/
proximus.getKeyValue(langObj, 'keyObject', 'lnp');

/* It will returns the key value */

// Will return and obj with default values and the variables use by proximus
proximus.getVariables();

/* Returns:
* var proximusObj = {
*   defaultLngName: 'en',
*   defaultcookieName: 'lng',
*   lngByIdClass: '.i18n',
*   lngImgClass: '.imgi18n',
*   lngByAtrrClass: '.i18nAtt',
*   lngAtrrName: 'data-i18n'
* };
*/

Coming Soon

1. Change the html tag? or the class? 😲😲
2. Return and chose nested object from object 😲😲😲

Test

You can run the test index with this command on terminal:

	gulp server

License

This project is licensed under the MIT License - see the LICENSE.md file for details**

Go Top