AnP/Public/ecma/Components/I18NComponent.ecma.js

83 lines
2.5 KiB
JavaScript

"use strict";
import {Common} from "../Utils/Common.ecma.js";
import {Nav, Span, Img, UL, LI} from "../Utils/HTMLDSL.ecma.js";
/**
* @typedef {import("../Application/AnP.ecma.js").AnP} AnP
*/
/**
* @constructs I18NComponent
* @param {!AnP} anp
* @return {void}
* @access public
* @static
*/
export const I18NComponent = (function(){
/**
* @constructs I18NComponent
* @param {!AnP} anp
* @return {void}
* @access private
* @static
*/
const I18NComponent = function(anp){
/** @type {I18NComponent} */
const self = this;
/**
* @returns {void}
* @access private
*/
const constructor = () => {};
/**
* @returns {Array.<any|null>}
* @access public
*/
this.build = () => Nav({class : "i18n-selector"}, [
UL(null, anp.settings.get("i18n_selector").map(([name, text, flag]) => LI({
data_language : name,
data_selected : anp.i18n.is_language_selected(name),
on_click : change,
data_role : "link",
title : text
}, [
Img({src : flag, alt : text}),
Span(null, text)
])))
]);
/**
* @param {!HTMLElement} item
* @param {!Event} event
* @return {void}
* @access private
*/
const change = (item, event) => {
if(anp.i18n.change(item.getAttribute("data-language"))){
item.parentNode.childNodes.forEach(option => {
option.setAttribute("data-selected", option === item ? "true" : "false");
});
anp.components.base.get_from(item).querySelectorAll("[data-i18n]").forEach(element => {
/** @type {string} */
const text = anp.i18n.get(element.getAttribute("data-i18n"), Common.data_decode(element.getAttribute("data-i18n-variables")));
element.getAttribute("data-i18n-without") != "true" && (element.innerText = text);
element.hasAttribute("title") && (element.setAttribute("title", text));
element.hasAttribute("placeholder") && (element.setAttribute("placeholder", text + "..."));
element.hasAttribute("alt") && (element.setAttribute("alt", text));
});
};
};
constructor();
};
return I18NComponent;
})();