Skip to content

Instantly share code, notes, and snippets.

@cloudsiege

cloudsiege/i18n-rendering-by-js-with-localstorage.markdown

Created June 28, 2022 01:40
Show Gist options
  • Save cloudsiege/b693c179ea0af6fcf5c8c1cfa4ae979a to your computer and use it in GitHub Desktop.
Save cloudsiege/b693c179ea0af6fcf5c8c1cfa4ae979a to your computer and use it in GitHub Desktop.
Download ZIP
i18n rendering by js with localstorage
Raw
index.html
<div class="container margin-top-lg">
<div class="row">
<div class="col s6 offset-s3">
<div class="card hoverable">
<div class="card-content">
<span class="card-title" data-i18n="title"></span>
<p class="blue-grey-text" data-i18n="name"></p>
<p class="blue-grey-text" data-i18n="job"></p>
<p class="blue-grey-text" data-i18n="company"></p>
</div>
<div class="card-action padding-bottom-md">
<a role="button" class="btn-pure-text red-text" data-renderlanguage="en">en</a>
<a role="button" class="btn-pure-text green-text" data-renderlanguage="pt">pt</a>
<a role="button" class="btn-pure-text amber-text" data-renderlanguage="es">es</a>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
var data = {
"pt": {
"title": "Perfil",
"name": "Pedro Parker",
"job": "Fotógrafo",
"company": "Jornal Clarin"
},
"en": {
"title": "Profile",
"name": "Peter Parker",
"job": "Photographer",
"company": "Clarin Newspaper"
},
"es": {
"title": "Perfiles",
"name": "Pedro Parker",
"job": "Fotógrafo",
"company": "Periódico Clarin"
}
}
var i18nReferences = Array.from( document.querySelectorAll( '[data-i18n]' ));
function toRenderI18nContent( language ) {
return function setLanguage( i18nReference ) {
var contentLanguageToReference = data[ language ][ i18nReference.dataset.i18n ]
return i18nReference.innerHTML = contentLanguageToReference
}
}
function renderContentOnPage( language ) {
console.log('language rendered')
return i18nReferences.map( toRenderI18nContent( language ) )
}
var btnChangeLanguage = Array.from( document.querySelectorAll( '[data-renderlanguage]' ));
function changeContentLanguage( event ) {
var language = this.dataset.renderlanguage
var isNotCurrentLanguage = language !== localStorage.getItem( 'language' )
console.log('language to change is equal to current? :' + isNotCurrentLanguage)
return isNotCurrentLanguage
? renderContentOnPage( language ) && storeInNavigator( language )
: storeInNavigator( language )
}
function storeInNavigator( language ) {
localStorage.setItem( 'language', language)
}
function toSetEvent( button ) {
return button.addEventListener( 'click', changeContentLanguage )
}
btnChangeLanguage.map( toSetEvent )
function renderContentBy( language ) {
var isFirstAccess = !localStorage.language
var storedLanguage = localStorage.getItem( 'language' )
return isFirstAccess
? setUserNavigatorDefaultLanguage( language )
: renderContentOnPage( storedLanguage )
}
function setUserNavigatorDefaultLanguage( language ) {
var hasSpanishInNavigator = language.match(/^es/)
var hasPortugueseInNavigator = language.match(/^pt/)
console.log('first access so store language')
return hasPortugueseInNavigator ? renderContentOnPage( 'pt' ) && storeInNavigator( 'pt' )
: hasSpanishInNavigator ? renderContentOnPage( 'es' ) && storeInNavigator( 'es' )
: renderContentOnPage( 'en' ) && storeInNavigator( 'en' )
}
window.onload = renderContentBy( navigator.language )
console.log('stored language:' + localStorage.getItem('language'))
Raw
style.css
body {
background-color: #e0e0e0;
}
.btn-pure-text {
cursor: pointer;
border: 1px solid transparent;
padding: 8px;
margin-left: -8px;
margin-bottom: 16px;
}
.btn-pure-text:hover {
border: 1px solid #aaa;
border-radius: 4px;
}
.margin-top-lg {
margin-top: 100px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment