262 lines
8.9 KiB
JavaScript
262 lines
8.9 KiB
JavaScript
"use strict";
|
|
|
|
/// *** Scripts to manage the localization ***///
|
|
|
|
// ** Constants and variables definition ** //
|
|
|
|
// Element name constants
|
|
//const elementId_languageSelector = 'ecl-language-list__button';
|
|
|
|
const elementClassName_languageListButtonActive = 'ecl-language-list__item--is-active';
|
|
const elementClassName_languagePrefixPattern = 'language-';
|
|
const elementClassName_selectedLangLabel = 'ecl-site-header__selector-link';
|
|
const elementClassName_selectedLangIcon = 'ecl-site-header__language-icon';
|
|
const elementClassName_selectedLangCodeText = 'ecl-site-header__language-code';
|
|
const elementClassName_dialogDismiss = 'ecl-language-list__close-button';
|
|
const elementClassName_eclsiteHeaderLogoImage = 'ecl-site-header__logo-image';
|
|
|
|
// Key contants
|
|
const key_i18n = 'i18n';
|
|
const key_i18nLink = 'i18n-link';
|
|
const key_dataLocalizationFilesPath = '/js-ecl-v2/i18n';
|
|
const key_languageLogoPattern = 'logo--{0}.ec.svg';
|
|
|
|
// Value constants
|
|
|
|
// HTML snippet constants
|
|
const htmlSnippet_iconSelected = '<svg focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs"><use xlink:href="' + registryApp.hostURL + registryApp.staticResourcesPath + 'icons.svg#ui--check"></use></svg>';
|
|
|
|
// Event name constants
|
|
|
|
// Regular expression constants
|
|
const regularExpression_languagePrefix = /language-[aA-zZ]+/;
|
|
|
|
// Global variables
|
|
var languageFromUrl = val_emptyString;
|
|
var currentLanguage = val_emptyString;
|
|
var i18n;
|
|
|
|
|
|
// ** Script body ** //
|
|
|
|
/*
|
|
* This method ititialize the language of the webapp
|
|
* The global variable currentLanguage is initialized with the language passed
|
|
* the 'selector' parameter or with the default webapp language taken from the
|
|
* configuration file.
|
|
* The UI is then updated with the selected language.
|
|
*
|
|
* @param {type} selector
|
|
*/
|
|
function initLocalization(selector) {
|
|
|
|
let storedLanguage = val_emptyString;
|
|
|
|
// checking if there is the language passed by URL
|
|
if (languageFromUrl !== null && languageFromUrl.length === 2) {
|
|
|
|
currentLanguage = languageFromUrl;
|
|
} else {
|
|
|
|
// Checking if there is a language stored in the cookies
|
|
// if (navigator.cookieEnabled) {
|
|
|
|
// Getting the language stored in the cookie
|
|
storedLanguage = getCookie(key_cookieName_language);
|
|
// }
|
|
|
|
// Takes the cookie stored language if available, otherwise the default
|
|
currentLanguage = (storedLanguage !== val_emptyString) ? storedLanguage : getBrowserLanguage();
|
|
|
|
}
|
|
|
|
// Storing the language to the cookie if needed
|
|
if ((storedLanguage === null || typeof storedLanguage === val_undefined || storedLanguage === val_emptyString)
|
|
// && navigator.cookieEnabled
|
|
) {
|
|
// Storing the language in the cookie
|
|
setCookie(key_cookieName_language, currentLanguage, val_cookieExpirationDays);
|
|
}
|
|
|
|
// Getting the right language button if not passed by parameter.
|
|
if (selector === '' || typeof selector === val_undefined || selector === null) {
|
|
if (typeof currentLanguage === val_undefined) {
|
|
currentLanguage = 'en';
|
|
}
|
|
selector = $('.' + elementClassName_languageListButton + '[' + elementAttributeName_lang + '="' + currentLanguage + '"]');
|
|
}
|
|
|
|
// Loading the localization file for the current language
|
|
loadI18nFile(currentLanguage);
|
|
|
|
// Iinitializing the page elements with the language
|
|
refreshSelectedLanguages(selector);
|
|
}
|
|
|
|
/*
|
|
* This method update the language of the webapp with the one selected by the
|
|
* user (using the language selector in the UI).
|
|
*
|
|
* @param {type} selector
|
|
*/
|
|
function updateLanguage(selector) {
|
|
|
|
// Getting the new language selected
|
|
let newLanguage = selector.attr(elementAttributeName_lang);
|
|
|
|
if (newLanguage !== val_emptyString || typeof newLanguage !== val_undefined || newLanguage !== null) {
|
|
|
|
// Storing the new selected language in the cookie
|
|
setCookie(key_cookieName_language, newLanguage, val_cookieExpirationDays);
|
|
|
|
// Re-initializing the page elements with the new language
|
|
initLocalization(selector);
|
|
|
|
// Launch the update language relate actions
|
|
//updateLanguageActions();
|
|
}
|
|
|
|
// Close the language dialog
|
|
$('.' + elementClassName_dialogDismiss).trigger(eventName_click);
|
|
|
|
}
|
|
|
|
/*
|
|
* This method is called every time the language is changed.
|
|
*/
|
|
function updateLanguageActions() {
|
|
|
|
// Update all the HTML element with the i18n data attribute available
|
|
updateDataI18nLocalization();
|
|
|
|
// Update all the href element with the i18n-link data attribute available
|
|
updateDataI18nLocalizationLinks();
|
|
|
|
// Fetching the data
|
|
fetchData();
|
|
|
|
}
|
|
|
|
/*
|
|
* This method is handling the UI changes after a new language has been selected
|
|
*
|
|
* @param {DOM element} selector
|
|
*/
|
|
function refreshSelectedLanguages(selector) {
|
|
if (currentLanguage === val_undefined) {
|
|
currentLanguage = 'en';
|
|
}
|
|
|
|
// Remove initial active classes and elements in the language selector dialog
|
|
$('.' + elementClassName_languageListButton).each(function () {
|
|
$(this).parent().removeClass(elementClassName_languageListButtonActive);
|
|
$(this).find(elementName_svg).remove();
|
|
});
|
|
|
|
// Set the active language in the language selector dialog
|
|
selector.parent().addClass(elementClassName_languageListButtonActive);
|
|
selector.append(htmlSnippet_iconSelected);
|
|
|
|
// Update the HTML lang
|
|
$(elementName_html).attr(elementAttributeName_lang, currentLanguage);
|
|
|
|
// Update the main logo
|
|
$('.' + elementClassName_eclsiteHeaderLogoImage).attr(key_src, registryApp.hostURL + registryApp.staticResourcesPath + key_languageLogoPattern.replace('{0}', currentLanguage));
|
|
|
|
// Updating the selected text label and code
|
|
let currentLanguageLabel = selector.text();
|
|
let currentLinkHtml = $('.' + elementClassName_selectedLangLabel);
|
|
let spanLanguageCode = currentLinkHtml.find(elementName_span + '.' + elementClassName_selectedLangIcon);
|
|
currentLinkHtml.html(currentLanguageLabel);
|
|
currentLinkHtml.append(spanLanguageCode);
|
|
$('.' + elementClassName_selectedLangCodeText).text(currentLanguage);
|
|
}
|
|
|
|
/*
|
|
* This method loads the i18n localization file and fires the
|
|
* updateLanguageActions method
|
|
*
|
|
* @param {String} locale The locale file to load
|
|
*/
|
|
function loadI18nFile(locale) {
|
|
if (currentLanguage === val_undefined) {
|
|
currentLanguage = 'en';
|
|
locale = 'en';
|
|
}
|
|
$.getJSON(registryApp.hostURL + key_dataLocalizationFilesPath + '/' + locale + '.' + key_json, function (data) {
|
|
|
|
// Stores the i18n Json object in the global variable i18n
|
|
i18n = data;
|
|
|
|
// Launch the methods related to the change locale action
|
|
updateLanguageActions();
|
|
})
|
|
.fail(function () {
|
|
// If the locale language file is not available, reading the
|
|
// default one
|
|
// console.log('Failed loading locale file. Reading the default one.');
|
|
loadI18nFile(registryApp.defaultLanguage);
|
|
});
|
|
}
|
|
|
|
/*
|
|
* This method update all the HTML element with the i18n data attribute
|
|
* available with the text localized in the 'currentLanguage' localization
|
|
*/
|
|
function updateDataI18nLocalization() {
|
|
|
|
// Getting all the elements that have the 'i18n' data attribute valorized
|
|
// The value of the i18n data attribute is the key to get the right text
|
|
// from the i18n localization file.
|
|
let el = $('*').filter(function () {
|
|
return typeof $(this).data(key_i18n) !== val_undefined;
|
|
});
|
|
|
|
// For each element retrieved, the text is updated with the new
|
|
// localized text
|
|
$.each(el, function () {
|
|
let localizationKey = $(this).data(key_i18n);
|
|
$(this).html(i18n[localizationKey]);
|
|
});
|
|
}
|
|
|
|
/*
|
|
* This method update all the href element with the i18n data link attribute
|
|
* available with the link in the right language
|
|
*/
|
|
function updateDataI18nLocalizationLinks() {
|
|
|
|
// Getting all the elements that have the 'i18n-link' data attribute valorized
|
|
// The value of the i18n-link data attribute is the key to get the right link
|
|
// from the i18n localization file.
|
|
let linkEl = $('*').filter(function () {
|
|
return typeof $(this).data(key_i18nLink) !== val_undefined;
|
|
});
|
|
|
|
// For each element retrieved, the link is updated with the new
|
|
// localized link
|
|
$.each(linkEl, function () {
|
|
let localizationKey = $(this).data(key_i18nLink);
|
|
$(this).attr('href', i18n[localizationKey].replace('{0}', currentLanguage));
|
|
});
|
|
}
|
|
|
|
/*
|
|
* This method check and set the Browser language
|
|
*
|
|
* @returns {String} The 2 characters language of the browser if available
|
|
* otherwhise it returns the registryApp.defaultLanguage
|
|
*/
|
|
function getBrowserLanguage() {
|
|
|
|
let userLang = navigator.language || navigator.userLanguage;
|
|
if (userLang !== null && userLang.length > 0) {
|
|
|
|
// Getting just the first 2 characters from the string
|
|
userLang = userLang.substring(0, 2);
|
|
} else {
|
|
userLang = registryApp.defaultLanguage;
|
|
}
|
|
|
|
return userLang;
|
|
} |