Keskustelu: Nettisivujen teko: Javascriptillä monikielisyys

Olisi tässä ongelma web-pohjaisen mobiilisovelluksen kanssa, johon tarvitsee toteuttaa monikielisyys. Normaalisti sivun ladatessa seuraava tapa toimii niin kuin pitääkin:

<a href="#" onclick="addNewSurvey()" data-ajax="false" data-role="button"><script type="text/javascript">document.write(Lang.get("start_new_survey"));
</script></a>

Mutta ongelma tulee siinä kun uusia sivuja ladataan sen jälkeen kuin sivu on latautunut.

Sovelluksessa sivuja ladataan contentDiviin seuraavalla tavalla:

function loadPage(page, sub)
{
    if (page == null || page==undefined || page=="undefined")
    {
        addLog("Attempt to load undefined page.. cancelled");
        return;
    }

    currentSubPage = sub;
    currentPage = page;
    heading = currentPage.substring(0, 1).toUpperCase() + currentPage.substring(1, currentPage.length).toLowerCase();
    $('#headerdiv').find('.ui-title').text(heading.replace("_", " "));


    $('#contentdiv').html(localStorage.getItem(page + ".htm"));

    //Edit: tällä saa span elementit muutettua
    $('#contentdiv').find('.lang').each(function ()
    {
        $(this).text(Lang.get($(this).text()));
    }
    );


    addLog("Page loading done... ready");
}

Joten sivu ei periaatteessa vaihdu ensimmäisen latauskerran jälkeen, vaan pelkkä contentDivin sisältö vaihtuu localStoragesta ladattuun sivuun.

Eli JavaScript luulee sivun olevan ladattu ja uusia sivuja ladatessa document.write tyhjentää aiemman sisällön, sen sijaan että tulostaisi sitä aiemman jatkeeksi.
Esimerkki sisällöstä jota localStoragesta ladatulla sivulla on:

<li><a id='general' href="#" mpage='survey' class="headerlinks" spage='general' data-ajax="false" data-role="button" data-inline="true">
              <script type="text/javascript">document.write(Lang.get("survey_header_general"))
</script></a></li>

Tämä varmaa onnistuisi jos laittaisi document.writen sijasta jotain elementtejä koodin sekaan, jotka sitten muuttaisi kielisyyden perusteella tekstiksi, mutta olisikohan muita vaihtoehtoja?

Edit: No tuo että tekee tuon span-elementeillä esim. niin näyttää olevan ihan toimiva vaihtoehto eli tekee span-elementtejä seuraavasti:

<span class="lang">survey_mdp_h1</span>

Jotka loadPage:n yhteydessä muutetaan sitten kielisyyttä vastaamaan spanin sisällön perusteella. En sitte tiiä pitäisikö joka paikkaan muuttaa nuin, vai ainoastaan localStoragen sivuille. Sivun normaali latauksessa tuo document.write toimii kumminkin ja on varmaankin nopeampi kuin se, että käyttää sivun latauksen jälkeen eri functiota jolla muuttaa nuo.

(Mod. huom: HTML-koodille HTML-tagit.)

Mikä olikaan kysymys?

No tossa ehti yhden tavan tuohon kehittää, jonka editillä lisäsin. Lähinnä kysymys oli se, että mitä vaihtoehtoja tossa olisi. Tarkotus olisi kumminkin saada helppokäyttönen ja hyvän suoritustehon omaava tapa.

Helpoin se olisi suoraa lisätä document.writejä joka paikkaan että sais suoraa halutun tekstin tulostettua, mutta eipä tolla onnistu.

Jos ladattavien sivujen rakenteet eivät hirveästi poikkea toisistaan, ne voisi tallentaa raa'an HTML:n sijaan JSON-muodossa. JavaScriptillä voi sitten leipoa dommin ja hakea tekstit.

Pari pikkujuttua koodissa sattui silmään:

(page == null || page == undefined)
sama asia:
(page == null)

Oletan, että vertailuun merkkijonon "undefined" kanssa on jokin syy enkä halua tietää mikä se on.

Näinkin voi sanoa: $("#contentdiv .lang")

Väittäisin, että monikielisyys pitäis toteuttaa palvelinpäässä.

Normaalisti ei sinänsä olisi mahdollista toteuttaa tuota palvelin päässä, koska kyseessä on puhelimeen tai tablettiin asennettava sovellus. Sovellus toimii ilman nettiyhteyttäkin, kunhan se on kerran hakenu palvelimelta data-tiedostot, jotka sisältää html sivut ja javascriptit joita sovellus käyttää. Olisi tuo sinänsä vaihtoehto että palvelimelta ladataan data-tiedostot kielisyyden perusteella, kerta tässä sovelluksessa ne data-tiedostot on päivitettävissä palvelimelta koska vaan. Eli jos palvelimen laittais parseemaan ne tiedot siten että se käyttää tietyissä paikoissa kielen perusteella sanoja ja lähettää ne sitten mobiilisovellukseen, niin vois onnistuakkin. Pitäs tutustua tarkemmin, jotta tulis kaikki ongelmat tossa vaihtoehdossa esille.

jlaire: Tuo undefined homma on vaa jäännös siitä ko en oo varma voiko sitä tulla nii pistin kaikki vaihtoehdot. Tällä hetkellä nuo html sivut on normaali html muodossa palvelimen hakemistosta, josta mobiilisovellus ne sit noutaa ja tallentaa localStorageen, niin sinänsä helpompi muokata niitä jos ne pitää vaa html sivuina.

No itse ainakin pistäisin sisältötekstit ihan talteen johonkin vaikka array-muuttujaan, jossa olisi siis joku looginen rakenne kielisyyden vuoksi, ja josta ne sitten tulostettaisiin jqueryn avulla omaan elementtiin.

Joo kyllä sitä tuo <span>-elementtien käyttö iha toimiva ratkaisu näyttäis olevan, joitan pienia muutoksia kyllä aiheutti koodissa. Tosiaan tommosta Language objectia sitä alkoi tossa käyttämään:

//lang.js
var Lang = {
    words: null,
    langError: function () { return "No language is loaded" },
    nullError: function (word){return "Failed to load word: (" + word + "),  got null"},
    emptyError: function (word){return "Failed to load word: (" + word + "),  got empty string"},
    undefinedError: function (word){return "Failed to load word: (" + word + "),  got undefined string"},
    load: function (language)
    {
        jQuery.globalEval(localStorage.getItem("lang_" + language + ".js"));
        addLog("Loaded language: " + language);
    },
    get: function (word)
    {
        if (this.words == null) return this.langError();
        if (this.words[word] == null) return this.nullError(word);
        if (this.words[word] == "") return this.emptyError(word);
        if (this.words[word] == undefined) return this.undefinedError(word);

        return this.words[word];
    },
    getParsed: function (word, var1)
    {
        if (this.words == null) return this.langError();
        if (this.words[word] == null) return this.nullError(word);
        if (this.words[word] == "") return this.emptyError(word);
        if (this.words[word] == undefined) return this.undefinedError(word);

        var tmp = "";
        tmp = this.words[word].replace("{0}", var1);
        return tmp;
    }
};
Lang.load("en");


//lang_en.js
var lang_words = {
    //start
    start_continue_last_survey: "Continue Last Survey",
    start_new_survey: "New Survey",
    start_browse_surveys: "Browse Surveys",
    start_help: "Help",

    //survey header
    survey_header_general:"General",
    survey_header_team:"Team",
    survey_header_mdp:"MDP",
    survey_header_zones:"Zones",
    survey_header_samples:"Samples",
    survey_header_nrda:"NRDA",
    survey_header_trenches:"Trenches",
    survey_header_waypoints: "Waypoints",

    //Survey MDP
    survey_mdp_h1: 'Marine Depris Point',

    //Browse Surveys
    browse_surveys_h1: "Browse Surveys",
    browse_surveys_started: "Started",
    browse_surveys_completed: "Completed",
    browse_surveys_edited: "Edited",

    //help

    //header
    help_header_esi_shoreline_types:"ESI Shoreline Types",

    parsetest: "Value is {0} and test."

};

Lang.words = lang_words;

Synomi kirjoitti:

Tämä varmaa onnistuisi jos laittaisi document.writen sijasta jotain elementtejä koodin sekaan, jotka sitten muuttaisi kielisyyden perusteella tekstiksi, mutta olisikohan muita vaihtoehtoja?

Vaikka document.write on usein kätevä pikku jutuissa, sitä ei ole tarkoitettu käytettäväksi sen jälkeen, kun dokumentti on "valmis", ja siitä tulee muutoinkin ongelmia. Se ei edes mainittavasti säästä siihen verrattuna, että muutetaan elementin sisältöä innerHTML-ominaisuuden kautta (suoraan tai jQueryn avulla vähän mutkan kautta). Tyylikäs DOM-solmujen luonti on sitten vähän eri asia, periaatteessa parempi, käytännössä usein turhan hankala.

Yksi menettelytapa voisi olla se, että sivussa on valmiiksi englanninkielinen sisältö, ja se sitten vaihdetaan tuohon tapaan valitun kielen mukaiseksi. Etuna mm. se, että jos kielen lataus tai käyttöönotto menee jostain syystä kiville, käyttäjällä on edes englanninkielinen versio käytettävissä. Toinen etu on, että erikielisiä versioita voi testata puolivalmiina: mukana ovat ne tekstit, jotka on käännetty, muiden tilalla englantia. (Toki nämä jutut voi toteuttaa muissakin lähestymistavoissa.) Riskinä on, että saattaa olla hiukan helpompaa olla huomaamatta, että jotain tekstiä ei olekaan käännetty.

Yucca kirjoitti:

Lebe80 kirjoitti:

Tämä varmaa onnistuisi jos laittaisi document.writen sijasta jotain elementtejä koodin sekaan, jotka sitten muuttaisi kielisyyden perusteella tekstiksi, mutta olisikohan muita vaihtoehtoja?

Mistäköhän sä ton mun nimen tohon lainaukseen vetäsit...? Itse en ainakaan muista tuollaista sanoneeni....

Lebe80 kirjoitti:

Mistäköhän sä ton mun nimen tohon lainaukseen vetäsit...?

Lainaustekniikassani on pientä viilaamisen varaa, sorry. Korjasin.