Merge pull request #1 from emillon/annuaire

La cause avance. Merci !

TODO.txt

@@ -1,7 +1,5 @@
   - l'en t<>te est un peu grand et un peu vide (mais je sais pas trop quoi en faire)
   - les couleurs un peu rouges font bizarre, <20>a manque un peu de contraste entre le texte et le fond, pareil pour le box-shadow autour de .groupe-lettre (d'ailleurs pourquoi box-shadow plut<75>t que border?)
   - le contraste rouge/vert doit pas etre terrible pour les daltoniens
-  - des liens vers chaque lettre de l'alphabet peuvent <20>tre utiles
-  - tu peux <20>ventuellement ajouter une feature inversion de l'annuaire (trier par clef fran<61>aises). OK en fait c'est fait mais c'est un peu confusant, on voit pas qu'il y a 2 listes. Ajouter un lien en haut ou un switch pour changer.
 
 suggestion: un sous-titre en forme de d<>finition. D<>finition de bitoduc, par ex.

www.bitoduc.fr/creuille.js

@@ -1,3 +1,29 @@
+function trouveElement(id)
+{
+    return document.getElementById(id);
+}
+
+function obtenirLAttribut(element, attribut)
+{
+    return element.getAttribute(attribut);
+}
+
+function definirLAttribut(element, attribut, valeur)
+{
+    return element.setAttribute(attribut, valeur);
+}
+
+function changeDeSens(window)
+{
+    var element = trouveElement('mots')
+    var langueDesClefsActuelle = obtenirLAttribut(element, 'data-langue');
+    var autre = {'anglais': 'francais',
+                 'francais': 'anglais'};
+    var langueDesClefsNouvelle = autre[langueDesClefsActuelle];
+    definirLAttribut(element, 'data-langue', langueDesClefsNouvelle);
+    construitListe(window)
+}
+
 function construitListe(window)
 {
     var document = window.document;        
@@ -78,11 +104,6 @@ function construitListe(window)
         {anglais: 'tweet', francais: 'gazouilli'}
     ];
 
-    function trouveElement(id)
-    {
-        return document.getElementById(id);
-    }
-
     function cache(e)
     {
         e.style.visibility = 'hidden';
@@ -96,10 +117,11 @@ function construitListe(window)
     var tous_les_mots = vrais_mots.concat(faux_mots);
 
     var i;
-    var noeudFRversANG = trouveElement('francais_vers_anglais');
-    var noeudANGversFR = trouveElement('anglais_vers_francais');
-    var lettresFRversANG = new Array(26);
-    var lettresANGversFR = new Array(26);
+    var lien = trouveElement('lienChange');
+    var index = trouveElement('index');
+    var mots = trouveElement('mots');
+    var langueDesClefs = obtenirLAttribut(mots, 'data-langue');
+    var lettres = new Array(26);
     var noeud;        
 
     function enleveLesAccents(s) {
@@ -107,25 +129,33 @@ function construitListe(window)
         return s;
     }
 
+    var lienFR = '<span class="mot-francais">Français</span>';
+    var lienANG = '<span class="mot-anglais">Anglais</span>';
+    var lienSource = lienFR;
+    var lienDestination = lienANG;
+    if (langueDesClefs === 'anglais') {
+        lienSource = lienANG;
+        lienDestination = lienFR;
+    }
+    lien.innerHTML = lienSource + ' &rarr; ' + lienDestination;
+
+    mots.innerHTML = '';
+    index.innerHTML = '';
+
 
     for (i = 0; i < 26; ++i) {
 
         var lettre = String.fromCharCode(65 + i);
-        lettresFRversANG[i] = noeud = document.creeElement('div');
+
+        lettres[i] = noeud = document.creeElement('div');
         noeud.className = 'groupe-lettre';
         noeud.enfants = 0;
-
+        var ancre = document.creeElement('a');
+        ancre.name = lettre;
+        noeud.appendChild(ancre);
         var titre = document.creeElement('h3');
         titre.innerHTML = lettre;
         noeud.appendChild(titre);            
-        
-
-        lettresANGversFR[i] = noeud = document.creeElement('div');
-        noeud.className = 'groupe-lettre';
-        noeud.enfants = 0;
-        titre = document.creeElement('h3');
-        titre.innerHTML = lettre;
-        noeud.appendChild(titre);            
     }
 
     // renvoie un nombre entre 0 et 25
@@ -144,31 +174,33 @@ function construitListe(window)
         noeud = document.createElement('div');
         noeud.className = 'definition';
 
-        noeud.innerHTML = '· <span class="mot-anglais"> ' + mot.anglais + ' </span> : ' 
-                        + '<span class="mot-francais">' + mot.francais + "</span>";
-        var indice = indiceDeLaPremiereLettre(mot.anglais);
+        var spanAnglais = '<span class="mot-anglais"> ' + mot.anglais + ' </span>';
+        var spanFrancais = '<span class="mot-francais">' + mot.francais + '</span>';
 
-        lettresANGversFR[indice].appendChild(noeud);
-        lettresANGversFR[indice].enfants++;
+        var spanClef = spanFrancais;
+        var spanValeur = spanAnglais;
+        var indice = indiceDeLaPremiereLettre(mot.francais);
+        if (langueDesClefs === 'anglais') {
+            spanClef = spanAnglais;
+            spanValeur = spanFrancais;
+            indice = indiceDeLaPremiereLettre(mot.anglais);
+        }
 
-        noeud = document.createElement('div');
-        noeud.className = 'definition';
-        noeud.innerHTML = mot.francais + ' &rarr; ' + mot.anglais;
-        noeud.innerHTML = '· <span class="mot-francais"> ' + mot.francais + '</span> : '
-                        + '<span class="mot-anglais">' + mot.anglais + ' </span>';
+        noeud.innerHTML = '· ' + spanClef + ' : ' + spanValeur;
 
-        indice = indiceDeLaPremiereLettre(mot.francais);
-        lettresFRversANG[indice].appendChild(noeud);
-        lettresFRversANG[indice].enfants++;
+        lettres[indice].appendChild(noeud);
+        lettres[indice].enfants++;
     }
 
     for (i = 0; i < 26; ++i) {
-        noeud = lettresFRversANG[i];
-        if (noeud.enfants > 1)
-            noeudFRversANG.appendChild(noeud);
-
-        noeud = lettresANGversFR[i];
-        if (noeud.enfants > 1)
-            noeudANGversFR.appendChild(noeud);
+        var lettre = String.fromCharCode(65 + i);
+        noeud = lettres[i];
+        if (noeud.enfants > 1) {
+            mots.appendChild(noeud);
+            var lettreIndex = document.creeElement('a');
+            lettreIndex.href = '#' + lettre;
+            lettreIndex.innerHTML = lettre;
+            index.appendChild(lettreIndex);
+        }
     }
 }

www.bitoduc.fr/feuille_de_style.css

@@ -66,3 +66,22 @@ h3
     color: #905050;
     margin: 50px;
 }
+
+#index
+{
+    text-align: center;
+}
+
+#index a
+{
+    font-size: larger;
+    color: black;
+    text-decoration: none;
+    margin-right: 5px;
+    position:relative;
+}
+
+#index a:hover
+{
+    background-color: #999;
+}

www.bitoduc.fr/index.htm

@@ -16,14 +16,17 @@
 
             <div id="intro">
                 De nos jours on rencontre de nombreux termes techniques en anglais : &laquo;&nbsp;megabyte&nbsp;&raquo;, &laquo;&nbsp;URL&nbsp;&raquo; ou encore &laquo;&nbsp;plugin&nbsp;&raquo;.<br/><br/> Pourtant, ces nouveaux mots ont souvent un équivalent francais qu'il conviendrait d'utiliser. En voici une liste bien pratique. Bonne lecture !
+
+                <br/><br/>
+                <div>
+                    <a id="lienChange" href="#" onclick="changeDeSens(window)"></a>
+                </div>
             </div>
 
-            <div id="anglais_vers_francais">
-                <h2>Lexique anglais-français</h2>
+            <div id="index">
             </div>
 
-            <div id="francais_vers_anglais">
-                <h2>Lexique français-anglais</h2>
+            <div id="mots" data-langue="anglais">
             </div>
 
         </div>