JavaScript - Traductor JS

 
Vista:
sin imagen de perfil

Traductor JS

Publicado por David (1 intervención) el 16/02/2016 19:48:33
¡Buenas!

Estoy arrancando mi primer laburo como programador.

Estoy desarrollando una página, y me pidieron que fuera sólo HTML, por lo que tengo que manejarme bastante limitadamente.

El tema es que tengo un idioma base, y al hacer click en el idioma especificado (hay otros 2 posbiles) se debe traducir el sitio.

Yo lo que pensé es esto (manejando por cookie el idioma):

Opción 1 - Lenta y no reutilizable:
. Al no ser mucho texto, poner un div con texto en cada idioma, establecer clase para cada idioma y por script mostrar u ocultar lo elegido.

Opción 2 - Hacer un sistema más o menos automatizado reutilizable:

Al tener que cambiar el idioma:
- Llamada a javascript.
- Llamar a un archivo para obtener las traducciones de ese idioma. (acá estoy complicado)
- Se hace un recorrido para las traducciones obtenidas, incluyendo en el html el texto si el id de etiqueta corresponde con alguno de la página.

Pensé algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Función para obtener la cookie del idioma
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
 
translate(setLang) {
    document.cookie="lang="+setLang+";expires=time() + (20 * 365 * 24 * 60 * 60)";
 
    /* Acá debo ejecutar algo que llame al archivo con las traducciones, ya que poner variables al principio con los idiomas quizás sea muy sucio. Necesito ayuda en ésto. */
 
   var traducciones=setLang+".txt"; // (es un ejemplo sin sentido, lo pongo para intentar ser más claro)
   var labels=home-labels.txt // ejemplo: etiquetas que están en el home
 
    for (i=0, i<traducciones.length, i++) {
       if (document.getElementById(labels(i))) { // verifico si se puede obtener la etiqueta con ese id
    document.getElementById(labels(i)).innerHTML=traducciones(i); // acá debería obtener ese id
     }
 
onLoad() {
// if cookie doesn't exists, check for available langs or set vietnamese
if (!getCookie("lang")) {
    var userLang = navigator.language || navigator.userLanguage;
    if (userLang=="ja_JP") lang="ja"; else
    if (userLang=="en_AU" || userLang=="en_BW" || userLang=="en_CA" userLang=="en_GB" || userLang=="en_HK" || userLang=="en_IE" || userLang=="en_IN" || userLang=="en_MT" || userLang=="en_NZ" || userLang=="en_PH" || userLang=="en_SG" || userLang=="en_US" || userLang=="en_ZW") lang="en"; else lang="vi";
    document.cookie="lang="+lang+";expires=time() + (10 * 365 * 24 * 60 * 60)";
    }
   translate(lang);
}

Ya sé que no es lo más adecuado, me siento incómodo teniendo que hacer ésto (pensé hasta en ver de crear un objeto, pero tendría que hacer los constructores y todo...), pero me lo pidieron en html y simple.

¿Qué me recomiendan para proseguir? Realmente estoy desorientado. Veo opciones y después siento que no valen. jeje

¡Gracias y perdón por lo largo!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder