Planète Wikimedia

Si vous participez aux RMLL, j’espère bien sûr vous voir à la conférence consacrée à Wikibooks. Elle aura lieu le vendredi, en début d’après-midi. Par ailleurs, si vous souhaitez rencontrer des contributeurs du projet, passez sur le stand de Wikimédia France dans le village associatif.

Si vous vous intéressez plus généralement aux initiatives qui œuvrent, comme Wikilivres, au développement du savoir libre : je ne peux que vous inviter à consulter le programme du thème « Publication et partage du savoir ».

J’ai travaillé à l’élaboration de ce cycle de conférence et je peux vous dire que nous avons réussi à faire intervenir les personnes les plus importantes dans le domaine. Elles viendront, parfois depuis l’étranger, présenter des projets qui sont autant d’étapes significatives dans l’accomplissement de notre projet commun : le savoir, pour tous.

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter un système d’onglets en JavaScript sur votre page utilisateur. Vous pourrez du coup profiter d’une page utilisateur différente de celle que vous montrerez au monde (par exemple, mettre une jolie image pour l’extérieur, et un gros paquet de liens/pense-bêtes affichés pour vous)

En pratique, ça fonctionne pour une quelconque  page, mais n’oubliez pas que seules les personnes ayant ce même code dans leur monobook pourrons en profiter :)

Partie HTML

Tout d’abord, créons le squelette de notre page à onglets

1) un div vide pour le menu “onglets”

<div id=”ongletMenu” />

Il est possible de créer le menu de l’onglet entièrement en JavaScript, mais je suis assez flemmard. Du coup, je créée le “conteneur” directement en HTML, et me contenterais de le remplir ensuite en javascript.

Le menu étant en JavaScript, là encore, seul vous et les personnes ayant ce code dans leur monobook pourrons le voir.

2) Un div pour la vue par défaut

<div id=”onglet0″>

(ici le contenu)

</div>

Vous mettrez à l’intérieur de ce div ce que vous voulez faire apparaitre pour le commun des mortels : son contenu sera affiché par défaut.

3) D’autres divs pour vos contenus cachés

<div id=”onglet1″ style=”display:none;”>

….

</div>

<div id=”onglet2″ style=”display:none;”>

….

</div>

<div id=”onglet3″ style=”display:none;”>

….

</div>

Chaque div correspond à un onglet. Comme vous l’aurez sans doute remarqué, display:none spécifie qu’ils n’apparaitront pas sur la page par défaut.

Le code de votre page ressemble donc à ceci :

Partie JavaScript

Comme dans le billet précédent, nous allons utiliser une fonction de mon invention pour nous faciliter la vie, cette fois ci createAdressNode(). Comme son nom l’indique, elle encapsule la creation d’un node lien et nous le retourne.

Syntaxe :

createAdressNode(’lien’, ‘texte du lien’, ‘code JavaScript‘)

Le 3eme paramètre de cette fonction est optionnel et permet de spécifier un code à éxecuter lorsque le lien sera cliqué. Nous nous en servirons pour dire “lorsque je clique sur ce lien, alors afficher ce div (=cet onglet) et cacher les autres”.

createAdressNode() étant présent dans mediawiki:common.js (car utilisé par deux de mes gadgets), vous n’aurez aucune page (bibliothèque de fonctions) à importer cette fois ci.

Note : createLiAdressNode() possède aussi ce paramètre optionnel.

1) la fonction qui génèrera le menu onglets

Je n’entrerais pas dans les détails car ce sont des éléments déjà vu dans l’autre billet. Par contre, chaque action reste commentée.

function ongletsPageUser() {
    //afficher l'onglet 1 par defaut (c'est normalement le 0 qui est visible )
    document.getElementById("onglet0").style.display = "none" //masquer
    document.getElementById("onglet1").style.display = "block" //afficher

    //on recupere le futur conteneur du menu onglets
    var ongletMenu = document.getElementById("ongletMenu")

    //ajout des liens dedans.
    //le "return afficherOnglet(x)" indique qu'en cliquant dessus, cela appellera la fonction js "afficherOnglet"
    // ...  avec en parametre le numero de l'onglet que l'on veux faire apparaitre
    ongletMenu.appendChild( createAdressNode('#', 'Défaut',    'return afficherOnglet(0);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) ) //on sépare chaque lien par un node texte contenant un tiret et deux espaces.
    ongletMenu.appendChild( createAdressNode('#', 'Principal', 'return afficherOnglet(1);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) )
    ongletMenu.appendChild( createAdressNode('#', 'Outils',    'return afficherOnglet(2);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) )
    ongletMenu.appendChild( createAdressNode('#', 'Autre',     'return afficherOnglet(3);') )
}

Ce qui vous affichera, une fois appelée, quelque chose comme ça, dont vous êtes bien-entendu invité à améliorer l’apparence avec un peu de CSS (vous connaissez son id) :

Note importante : aucune vérification n’est faite sur l’existence des éléments aux id “onglet0″, “onglet1″ et “ongletMenu”.

Ce qui veux dire que si vous lancez cette fonction sur une page qui ne les possèdent pas, l’exécution du code JavaScript s’arrêtera en erreur en essayant de mettre des liens dans quelque chose qui n’existe pas (si “ongletMenu” absent) ou en tentant de changer le CSS d’éléments d’existant pas (le display pour “onglet0″ et/ou “onglet1″). Selon le navigateur, cela causera un “plantage”  de la fonction (FF3, sans doute d’autres), ou de toute la page (auquel cas aucun code appelé après ne sera exécuté) ; donc faites bien attention à ne pas l’appeler n’importe ou :) J’indiquerais plus bas une manière de limiter l’appel à la page qui va bien.

Dans un code plus propre (et donc plus compliqué), des tests seraient faits pour vérifier que chaque node existe. Mais je garde ça pour une prochaine fois : le but de ce tutoriel est de rester le plus simple possible.

2) la fonction qui permet de changer d’onglet

La fonction ci dessous réalise le changement d’onglets en lui même.

Comme elle ne sais pas quel onglet est actuellement activé, elle passe tous les onglets qu’elle trouve à “display:none” – c’est à dire qu’elle parcoure chaque identifiant possible (onglet0, onglet1…ongletN) et s’arrête lorsque celui demandé n’existe pas- , puis passe celui qu’on lui demande d’afficher en “display:block”.

//afficher un onglet, masquer tous les autres
function afficherOnglet(numero) {
  //cette boucle est générique : elle marche pour 4 onglets, comme elle marchera pour 40. Pratique si vous en voulez un nombre différent :)
  for (var i=0 ; (onglet = document.getElementById("onglet"+i)) ; i++) {
     onglet.style.display="none"
  }
  document.getElementById("onglet"+numero).style.display="block"
  //retourner false reviens à repondre "non" à la demande de clic (c'est à dire que la page ou pointe le lien ne sera pas ouverte)
  return false
}

3) Gestion de l’appel à la fonction

Le code ci dessous détermine quand la fonction sera lancée (en l’occurrence, uniquement lorsque vous visitez votre page utilisateur).

Il y a la gestion d’un seul appel ici, mais je me sert de cette même fonction pour gérer l’appel à toutes mes fonctions JavaScript, donc ce même bout de code sera réutilisé dans tous mes prochains billets sur le sujet.

function main() {
   if ( wgPageName == "Utilisateur:(votre pseudo à la place de cette parenthèse)" ) {
       ongletsPageUser()
   }
}

addOnloadHook(main)

Et Voila le travail !

La prise de décision de l’arrêt des wikipompiers étant terminé, j’ai décidé de faire des petites statistiques quand aux votant. Je vous laisse regarder par vous-même !

Nombre de votants total

Nombre de votants admins et leur opinion

Nombre de votants péons sans les abstention, ni les neutres

Voilà. Comme vous le constatez, beaucoup de péons sont contre, les admins, moins.

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter des liens dans le menu de gauche de l’interface de Wikipédia, à l’aide de quelques lignes de JavaScript. Ceux qui ne veulent pas d’explications trouveront le code tout en bas de la page.

Commençons par quelques notions de base

Comme nous l’avons vu lors de précédents billets, le HTML est une structure en arbre composé de balises imbriquées les unes dans les autres. le JavaScript, tout comme le CSS, permet de modifier des éléments HTML à partir de leur type, de leur identification, ou de leurs positions dans l’arbre.

il est recommandé d’avoir des notions dans un quelconque langage de programmation, mais vous trouverez les bases sur Wikibooks et Wikiversity.

Pour être honnète, je pense qu’un partie d’entre vous va trouver ça beaucoup plus compliqué que mes billets sur le CSS. Mais rassurez vous, un code “tout fait” est fourni .

Il y a principalement deux types d’écriture :

• l’écriture normale

• L’écriture condensée

L’écriture condensée permet d’effectuer une série d’actions sur une seule ligne.

dans l’exemple suivant, je veux modifier le texte contenu dans le premier lien de la page. si vous ne comprenez pas complètement ce n’est pas grave : ça viendra avec le temps.

var a = document.getElementsByTagName("a") //recuperer la liste des liens de la page (tableau)
var a_first = a[0] // le premier lien de la liste
var a_text = a_first.firstChild // le node contenant le texte dans ce lien
a_text.nodeValue = "liaison" // remplacer son contenu par "liaison"

Ce code peut aussi s’écrire en condensé :

document.getElementsByTagName("a")[0].firstChild.nodeValue = "liaison"

J’utiliserai généralement la deuxième version.

Le code HTML du menu de gauche est disponible dans ce billet, je ne le détaillerai donc pas ici.

Passons au code

Fonctions personnalisées ?

Pour me faciliter la vie, je me suis créé quelques fonctions. Pour vous faciliter la vie, nous nous servirons de l’une d’elles :)

Cette fonction est createLiAdressNode(). Elle encapsule :

• La création d’un node texte (le texte que le lien affichera)

• La creation d’un node ‘a’ (un lien)

• L’affectation d’une adresse à la propriété “href” du lien.

• La mise de ce node texte dans le lien

• la création d’un node ‘li’ (car le menu de gauche est constitué de listes à points)

• La mise du node ‘a’ dans le node ‘li’

et nous retourne ce node ‘li’

En plus compréhensible, elle créée ce qui correspond au code HTML suivant :

<li>
   <a href="lien">
        texte du lien
   </a>
</li>

(elle permet en réalité plus de choses, mais Le comportement qu’on lui demande fera ça)

Sa syntaxe est

createLiAdressNode(adresse, texte du lien)

le code en lui même

Tout d’abord, importons le fichier contenant createLiAdressNode()

importScript('Utilisateur:Darkoneko/divers.js')

Le code en lui-même sera placé dans une fonction

function addLinksInLeftBar() {
    //ici notre code
}

Je veux ajouter des liens en bas du menu navigation.

En pratique, cela veux dire “je veux ajouter des balises <li> (contenant chacune un lien) qui se trouveront dans le premier <ul> situé dans l’élement ayant l’id p-navigation”.

<div id="#p-navigation">
  (...)
  <ul>
     <li>...</li>
     <-- c'est à dire ici pour ceux qui ont du mal à suivre :)
  </ul>
  (...)
</div>

Récuperons donc le “<ul>” dans lequel nous stockerons nos balises <li>.

var ul = document.getElementById("p-navigation").getElementsByTagName("ul")[0]

Ensuite, ajoutons lui les liens+li que l’on veux.

• “appenchild()” est la méthode qui permet d’ajouter des “fils” dans d’une balise (à la suite des éventuels existants). En l’occurence, nos balises <li>
• b=fonction1( fonction2() ) est l’equivalent de a=fonction1() suvi de b=fonction2(a)

ul.appendChild( createLiAdressNode( '/wiki/Wikipédia:Wikimag_de_la_semaine', 'Wikimag') )
ul.appendChild( createLiAdressNode( 'http://darkoneko.wordpress.com/' , 'mon blog à moua' ) )
ul.appendChild( createLiAdressNode( '/wiki/Wikipédia:Bot/Requêtes/Mensuel', 'Requêtes bot' ) )

Et pour finir, il faut indiquer que notre fonction doit être chargée au démarrage de la page. MediaWiki fournie une fonction dédiée pour ce faire :

addOnloadHook(addLinksInLeftBar)

Notre code final, celui que vous pouvez ajouter dans votre monobook.js,  est donc :

importScript('Utilisateur:Darkoneko/divers.js')

function addLinksInLeftBar() {
     //ajouter des liens en bas de la boite "navigation"
     var ul = document.getElementById("p-navigation").getElementsByTagName("ul")[0]
     ul.appendChild( createLiAdressNode( '/wiki/lien_1', 'texte 1')  )
     ul.appendChild( createLiAdressNode( '/wiki/lien_2', 'texte 2')  )

    //ajouter des liens en bas de la boite "contribuer"
     var ul2 = document.getElementById("p-Contribuer").getElementsByTagName("ul")[0]
     ul2.appendChild( createLiAdressNode( '/wiki/lien_3', 'texte 3')  )
     ul2.appendChild( createLiAdressNode( '/wiki/lien_4', 'texte 4')  )
    //etc...
}

addOnloadHook(addLinksInLeftBar)