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

  • Select an option

    Learn more about clone URLs
  • Save cloudsiege/b693c179ea0af6fcf5c8c1cfa4ae979a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cloudsiege/b693c179ea0af6fcf5c8c1cfa4ae979a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cloudsiege created this gist Jun 28, 2022.
    7 changes: 7 additions & 0 deletions i18n-rendering-by-js-with-localstorage.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    i18n rendering by js with localstorage
    --------------------------------------


    A [Pen](https://codepen.io/tl86br/pen/mBweQE) by [Tiago Luiz Aguiar de Souza](https://codepen.io/tl86br) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/mBweQE).
    19 changes: 19 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <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>
    79 changes: 79 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    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'))

    20 changes: 20 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    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;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />