ju Client Language
For client-side language text.
Installation
$ npm install juclientlang
Usage
Example File Tree
├── node_modules
│ ├── juclientlang
├── page.build.js
├── locales
│ ├── tr.js
│ └── en.js
├── page.html
└── page.js
page.html file
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
</head>
<body>
<julang text="language"></julang>
<button id="changeBtn" julang="title:title;">
<julang text="title"></julang>
</button>
<script src="./page.build.js"></script>
</body>
</html>
page.js file
const juLang = require("juclientlang");
const langPath = './locales';
juLang(langPath)
.then(function () {
console.log("language loaded.");
}).catch(function (err) {
console.log(err.message);
});
document.addEventListener("juLangChanged", function (e) {
console.log(e.detail);
});
document.getElementById("changeBtn").addEventListener("click", function (e) {
var html = document.getElementsByTagName("html")[0];
if (html.attributes.lang.value == "en")
html.setAttribute("lang", "tr");
else
html.setAttribute("lang", "en");
});
page.build.js file
page.build.js file is generated from page.js with libraries like browserify or babel or parcel or webpack.
tr.js file
var juLangObject = {
language: "Türkçe",
title: "Değiştir"
}
Methods
juLang(languageScriptPath)
With the return of the Promise object, you can capture the completion of the process and errors.
Parameters:
languageScriptPath
: Path of language javascript files.
juLangChanged Event
If you want to catch events after each change, use
document.addEventListener("juLangChanged", function handle(e) { ... })
handle Function Parameters:
Examples
This example shows the most basic way of usage.
License
This software is free to use under the JosephUz. See the LICENSE file for license text and copyright information.