Is there any method for me to create page translations with Javascript or Typescript?

Question

Is there any method for me to create page translations with Javascript or Typescript?

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I would like to know if there is any method for me to create my own static page translations with Javascript.

javascript ecmascript-6 typescript front-end

asked by anonymous 12.12.2017 / 02:23

2 answers

0

If you want something automatic you can use Google Translate , example:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div id="google_translate_element"></div>

    <p>Olá, mundo!</p>

    <!-- O Javascript deve vir depois -->
    <script type="text/javascript">
    //Disparado como callback para ?cb=googleTranslateElementInit
    function googleTranslateElementInit()
    {
        new google.translate.TranslateElement({
            pageLanguage: 'pt', //Idioma principal da página
            includedLanguages: 'en,es', //Idiomas que pode traduzir
            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
        }, 'google_translate_element'); //google_translate_element é o elemento no div
    }
    </script>

    <!-- Adiciona o script do tradutor -->
    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></body></html>

Exampleon jsfiddle

Customize Google translator

With CSS it is possible to change some things and to remove that top menu can use this:

#google_translate_element {
    display: none;
}
.goog-te-banner-frame {
    display: none !important;
}
body {
    position: static !important;
    top: 0 !important;
}

For more customizations see this: link

12.12.2017 / 02:40

Release access to a page with defined time [closed] Runtime permissions on android

score 3 · Accepted Answer

See, just create a object containing the string .

let TRANSLATIONS = {
  'en': {
    'Homepage': 'Homepage',
    ...
  },
  'pt-br': {
    'Homepage': 'Pagina inicial',
    ...
  }
}

For the elements, set a dataset as data-lang-str example:

<a class="nav-link" href="#" data-lang-str="Features"></a>
...

For language selection elements, set a dataset as data-lang , example:

<button class="btn btn-primary" name="btn-translate" data-lang="pt-br">Português</button>
<button class="btn btn-dark" name="btn-translate" data-lang="en">Inglês</button>
...

Method to translate:

const translate = (lang = null) => {
  if (lang === null) {
    lang = DEFAULT_LANG;
  }
  let DEFAULT_LANG_LENGTH = Object.keys(TRANSLATIONS[DEFAULT_LANG]).length;
  // Verifica se o idioma selecionado existe.
  if (TRANSLATIONS[lang]) {
    // Existe... Agora verifica se a tradução selecionada está completa
    // Se não estiver exibe a mensagem.
    ALERT_TRANSLATION_UNAVAILABLE.style.display = 'none';
    let LANG_LENGTH = Object.keys(TRANSLATIONS[lang]).length;
    if (LANG_LENGTH < DEFAULT_LANG_LENGTH) {
      ALERT_TRANSLATION_INCOMPLETE.style.display = 'block';
    } else {
      ALERT_TRANSLATION_INCOMPLETE.style.display = 'none';
    }
    DATA_LANG_ELEMENTS.forEach((el) => {
      let STR = el.getAttribute('data-lang-str');
      if (TRANSLATIONS[lang][STR]) {
        el.innerText = (TRANSLATIONS[lang][STR]);
      }
    });
  } else {
    // Não existe, então exibe a mensagem
    ALERT_TRANSLATION_INCOMPLETE.style.display = 'none';
    ALERT_TRANSLATION_UNAVAILABLE.style.display = 'block';
  }
}

Example running

let DEFAULT_LANG = 'en';
let ALERT_TRANSLATION_INCOMPLETE = document.querySelector('#translatoin-incomplete');
let ALERT_TRANSLATION_UNAVAILABLE = document.querySelector('#translatoin-unavailable');
let DATA_LANG_ELEMENTS = document.querySelectorAll('[data-lang-str]');
let TRANSLATIONS = {
  'en': {
    'Homepage': 'Homepage',
    'Features': 'Features',
    'Pricing': 'Pricing',
    'Disabled': 'Disabled',
    'Email': 'Email',
    'Password': 'Password',
    'Address': 'Address',
    'City': 'City',
    'State': 'State',
    'Zip': 'Zip',
    'SendMeNewsletters': 'Send me newsletters'
  },
  'pt-br': {
    'Homepage': 'Pagina inicial',
    'Features': 'Características',
    'Pricing': 'Preços',
    'Disabled': 'Desativado',
    'Email': 'Email',
    'Password': 'Senha',
    'Address': 'Endereço',
    'City': 'Cidade',
    'State': 'Estado',
    'Zip': 'CEP',
    'SendMeNewsletters': 'Envie-me boletins informativos'
  },
  'es': {
    'Homepage': 'Página principal',
    'Features': 'Caracteristicas',
    'Pricing': 'Precio',
    'Disabled': 'Discapacitado',
    'Email': 'Email',
    'Password': 'Contraseña',
    'Address': 'Dirección'
  },
  'ru': {
    'Homepage': 'домашняя страница',
    'Features': 'Особенности',
    'Pricing': 'ценообразование',
    'Disabled': 'Отключено',
    'Email': 'Адрес электронной почты',
    'Password': 'пароль',
    'Address': 'Адрес'
  },
  'ja': {
    'Homepage': 'ホームページ',
    'Features': '特徴',
    'Pricing': '価格設定',
    'Disabled': '無効',
    'Password': 'Password',
    'Address': 'Address'
  }
};


const translate = (lang = null) => {
  if (lang === null) {
    lang = DEFAULT_LANG;
  }
  let DEFAULT_LANG_LENGTH = Object.keys(TRANSLATIONS[DEFAULT_LANG]).length;
  // Verifica se o idioma selecionado existe.
  if (TRANSLATIONS[lang]) {
    // Existe... Agora verifica se a tradução selecionada está completa
    // Se não estiver exibe a mensagem.
    ALERT_TRANSLATION_UNAVAILABLE.style.display = 'none';
    let LANG_LENGTH = Object.keys(TRANSLATIONS[lang]).length;
    if (LANG_LENGTH < DEFAULT_LANG_LENGTH) {
      ALERT_TRANSLATION_INCOMPLETE.style.display = 'block';
    } else {
      ALERT_TRANSLATION_INCOMPLETE.style.display = 'none';
    }
    DATA_LANG_ELEMENTS.forEach((el) => {
      let STR = el.getAttribute('data-lang-str');
      if (TRANSLATIONS[lang][STR]) {
        el.innerText = (TRANSLATIONS[lang][STR]);
      }
    });
  } else {
    // Não existe, então exibe a mensagem
    ALERT_TRANSLATION_INCOMPLETE.style.display = 'none';
    ALERT_TRANSLATION_UNAVAILABLE.style.display = 'block';
  }
}

let BTNS_TRANSLATE = document.querySelectorAll('[name=btn-translate]');
BTNS_TRANSLATE.forEach((btn) => {
  btn.addEventListener('click', (ev) => {
    translate(btn.getAttribute('data-lang'));
  });
});

translate();

* {
  border-radius: 0px !important;
}
body {
  margin-top: 60px !important;
}
.btn {
  cursor: pointer;
  margin-bottom: 14px;
  text-transform: uppercase;
}
#idioma-indisponivel,
#traducao-incompleta {
  display: none;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#" data-lang-str="Homepage"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-lang-str="Features"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-lang-str="Pricing"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" data-lang-str="Disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="alert alert-info" role="alert" id="translatoin-incomplete">
        Incomplete translation
      </div>
      <div class="alert alert-danger" role="alert" id="translatoin-unavailable">
        Language unavailable
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-primary" name="btn-translate" data-lang="pt-br">Português</button>
      <button class="btn btn-dark" name="btn-translate" data-lang="en">Inglês</button>
      <button class="btn btn-danger" name="btn-translate" data-lang="es">Espanhol</button>
      <button class="btn btn-info" name="btn-translate" data-lang="ru">Russo</button>
      <button class="btn btn-success" name="btn-translate" data-lang="ja">Japonês</button>
      <button class="btn btn-secondary" name="btn-translate" data-lang="ko">Coreano</button>
    </div>
  </div>
</div>

<div class="container">
    <form>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4" class="col-form-label" data-lang-str="Email"></label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4" class="col-form-label" data-lang-str="Password"></label>
          <input type="password" class="form-control" id="inputPassword4">
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddress" class="col-form-label" data-lang-str="Address"></label>
        <input type="text" class="form-control" id="inputAddress">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity" class="col-form-label" data-lang-str="City"></label>
          <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group col-md-4">
          <label for="inputState" class="col-form-label" data-lang-str="State"></label>
          <select id="inputState" class="form-control">Choose</select>
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip" class="col-form-label" data-lang-str="Zip"></label>
          <input type="text" class="form-control" id="inputZip">
        </div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> <span data-lang-str="SendMeNewsletters"></span>
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>