Picasso

Programmerte stilsett

Strategien er at vi lager et stilsett for hver av de aktuelle språkene. Når brukeren velger forsøker vi å aktivisere det aktuelle stilsettet. Stilsettene har inegn annen funksjon enn å skjule alle andre tekster enn den vi vil vise fram

Stilsettet som viser fram engelsk tekst er slik:

.rightimage{float:right; margin: 0 0 10px 10px;padding:2px;}
.english{display:visible;}
.german,.spanish,.italian{display:none}
	

Det som viser fram tysk er slik:

.rightimage{float:right; margin: 0 0 10px 10px;padding:2px;}
.german{display:visible;}
.english,.spanish,.italian{display:none}
	

Tilsvarende for fransk, italiensk og spansk.

De 5 stilsettene lenkes til i headeren på siden slik:

  <link rel="stylesheet" href="styleFrench.css">
  <link rel="stylesheet" href="styleEnglish.css">
  <link rel="stylesheet" href="styleGerman.css">
  <link rel="stylesheet" href="styleSpansish.css">
  <link rel="stylesheet" href="styleItalian.css">
	

Utfordringen blir da å skrive en Javascript-funksjon som aktiviserer det riktige stilsettet:

   function chooseStyle(theChoice){
    if(document.styleSheets)
      for (i=0;i<document.styleSheets.length;i++)
         if (i==theChoice)
          document.styleSheets[i].disabled=false;
         else
          document.styleSheets[i].disabled=true;
  }

Hvordan vi kaller denne funksjonen avhenger av hvordan vi lager layout på siden. På eksempelt du kan teste er det enkle stringer som kan klikkes.

Programmerte stilegenskaper

Vi legger ut alle tekstene og merker dem med:

<div class="french-lang">
<div class="english-lang">
..osv

Vi lage et enkelt stilsett:

.french-lang{display:block}
.english-lang{display:none}
.german-lang{display:none}
.spanish-lang{display:none}
.italian-lang{display:none}
.rightimage{float:right}

Når brukeren velger et språk kjøre følgende javascript:

function setStyle(theChoice){
  // assume only one stylesheet
  var myrules=document.styleSheets[0].cssRules;
    for(i=0; i < myrules.length; i++)
      if(myrules[i].selectorText.indexOf('lang')!=-1)
      {
          myrules[i].style['display']='none';
          if(myrules[i].selectorText.indexOf('.'+theChoice)!=-1)
              myrules[i].style['display']='block';		
      }
}
  

Skjulte felt

Strategien her er også å laste opp all teksten med en gang og skjule det vi ikke ønsker å se. Men her flytter vi den ønskede skjulte teksten til et element der den blir synlig. Prinsippielt blir det slik:

...
  <div>
    <img class="rightimage" src="Le-fauteuil-rouge.gif" alt="Le-fauteuil-rouge"/>
    <div id="show">
    </div>
  </div>

  <div style="display:none">
	  <div id="french">
	    Picasso poursuit ...
	  </div>
	  <div id="english">
	    Picasso continues ...
	  </div>
	  ...
  </div>

JavaScriptet som henter en skjult tekst til "show"-elementet ser slik ut:

  function showLanguage(languageID){
    T=document.getElementById(languageID).innerHTML;
    document.getElementById('show').innerHTML=T;

AJAX

Her er strategien å hente den teksten vi ønsker når det er behov for den. Vi henter de filene vi trenger direkte.

Javascriptkoden blir slik:

function fetchLanguage(language)
{
    // relies on jquery.js   
    $.ajax({
      url:language+".txt",
      success:function(data)
      {
        $('#show').text(data);
      },
      error:function(data)
      {
        $('#show').text('error');
      }
      });
 }

Google translate

Google har kommersialisert den tjenesten som tar en tekst og sender til bake oversettelsen. Jeg har derfor valgt å lage en løsning som oversetter hele siden, men med mulighte for å holde noen elementer uten for oversettelsen. Dette gjøres ved å gi de aktuelle elementene class skiptranslate eller notranslate.

Vi finner beskrivelse av oversettelsestjenesten i Google Translate API [1] .