Personnalisons Wikipédia : vous avez un nouveau message (update)

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

Suite à une modification sur MediaWiki, mon  bout de code permettant de changer le texte du bandeau « vous avez un nouveau message » ne fonctionne plus. Corrigeons ça.

Le nouveau message ressemble à ceci :

Soit structurellement, texte1/lien1/texte2/lien2/texte3.

Je n’utilise que texte1 et lien2 (lien1 et texte2 deviennent vides, texte3 n’est pas touché), mais l’endroit ou est modifié chaque élément est spécifié en commentaire pour que vous puissiez changer ça si ça vous dit :)

Nouveau code (n’oubliez pas d’effacer l’ancien le cas échéant !)

function youHaveANewInsultingMessage() {
  div = document.body.getElementsByClassName("usermessage")[0]
  if( !div) return

  div.firstChild.nodeValue = " Rhaaah tu as fait une connerie (" //texte1

  a = div.getElementsByTagName("a")
  a[0].firstChild.nodeValue = "" //lien1
  a[0].nextSibling.nodeValue = "" //texte2
  a[1].firstChild.nodeValue = "bâtard" //lien2
}

addOnloadHook(youHaveANewInsultingMessage)

Personnalisons Wikipédia : liste de suivi (3)

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

Les perspicaces d’entre vous aurons remarqué un bouton « (stop) » sur les captures d’écran de mon billet d’hier. Cette fonctionnalité (qui est une amélioration d’un vieux script de Dake) permet d’arrêter de suivre des pages directement depuis [[spécial:liste_de_suivi]], en un seul clic.

après clic sur « stop », la ligne est barrée et la page n’est plus suivie. Pratique non ?

À titre exceptionnel, je vous épargne le décorticage du code :) Pour tester, éditez votre monobook.js/vector.js et ajoutez y la ligne suivante :

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

NB : au collage, verifiez bien que les apostrophes droites n’aient pas été transformées en apostrophes courbes. JavaScript ne reconnaît pas les apostrophes courbes.

Personnalisons Wikipédia : liste de suivi (2)

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

Le style des listes de suivi a un peu changé :

En mettant de côté mes modifications persos (qui sont expliquées sur cet autre billet), le titre est maintenant en gras et ça m’emmerde.

Si vous aussi, alors direction votre monobook.css/ ou vector.css et ajoutez y la ligne suivante :

.mw-watched { 
   font-weight:normal; 
}

Ce qui nous donne maintenant :

Tant qu’on y est, virons ce point qui occupe inutilement de l’espace au début de chaque ligne :

.mw-special-Watchlist #mw-content-text ul li { 
   list-style:none; /* plus de point */ 
} 
.mw-special-Watchlist #mw-content-text ul {
    margin-left:5px; /* reduire la marge pour ne pas avoir un espace vide */ 
}

Et voili :

Personnalisons Wikipédia : confirmer une action

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

La personnalisation du jour vous permettra d’ajouter une demande de confirmation lorsque vous cliquez sur « révoquer » avec quelques lignes de JavaScript. En gros, cette fonction est prévue pour ceux et celles qui cliquent plus sur le bouton par erreur que volontairement :)

Lors d’un clic sur le lien de révocation, la fenêtre suivante apparaitra :

Code à ajouter dans votre monobook.js ou vector.js

Le code est tout simple :

1. récupération de la liste les liens « révoquer » de la page (repérables par leur classe « mw-rollback-link »)
2. ajout d’un appel à la fonction de confirmation à leur évènement « onclick » (=quand l’utilisateur clique)

confirm() est une fonction native de JavaScipt, donc rien de spécial à faire de ce côté là.

si l’utilisateur clique sur « ok », confirm() retourne True et l’action (aller vers la page) est validée, dans le cas contraire elle retourne False et l’action est annulée

function addRevertButtonConfirm() {
   var list_boutons = document.getElementsByClassName("mw-rollback-link")
   for (var a = 0, len = list_boutons.length ; a < len ; a++) {
      list_boutons[a].setAttribute('onclick', 'return confirm("revoquer ?")')
   }
}
addOnloadHook( addRevertButtonConfirm )

Note : le script n’a été testé que sous firefox

Personnalisons Wikipédia : icone de suivi sous Vector

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

En suivant un lien depuis le dernier billet de Popo, je suis tombé sur une discussion de bistro remplie de complaintes, dont une partie était au sujet de l’icône « étoile » faisant sous Vector office de raccourci pour ajouter une page à sa liste de suivi.

Wikipédiens, Wikipédiennes, Je Vous Ai Compris™. La personnalisation du jour permettra aux vectorisés d’entre vous  de changer l’icône de ce lien.

Un code similaire a été utilisé dans plusieurs de mes autres billets de personnalisation, donc pas d’explications. Pour cet exemple, je me suis basé sur cette image pour la « mise en suivi » et sur celle ci pour le « retrait de suivi ». N’hésitez pas à les remplacer par quelquechose que vous plait :)

/* icone "mettre en suivi" */
#ca-watch.icon a, #ca-watch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png");
   background-position:5px 60%; /* cette partie est nécessaire car le mode hover "par défaut" a des valeurs différentes */
}

/* icone "retirer de la liste de suivi" */
#ca-unwatch.icon a, #ca-unwatch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Black_x.svg/15px-Black_x.svg.png");
   background-position:5px 60%;
}

Personnalisons Wikipédia : la barre du haut

Ce billet fait partie de la série « Personnalisons Wikipédia ». La personnalisation du jour vous permettra de changer la tronche de la barre en haut à droite.
Je commencerais doucement avec des modifications esthétiques simples  (en CSS), puis ce sera au tour de l’ajout d’icônes (toujours en CSS), pour finir sur la modification du texte des liens et l’ajout d’autres liens dans la barre (en JavaScript).

Histoire d’avoir une base de travail « propre » (mon compte principal étant très customisé), je me servirais ici d’un compte « user:Pelote de laine », donc ne soyez pas surpris du nom affiché dans la barre sur les exemples :)

Au moment ou j’écris ces lignes, la version par défaut de la barre du haut, avec le skin monobook, ressemble à ça :

Jouons un peu avec le CSS (monobook.css ou vector.css)

Pour commencer, voici quelques exemples de changement d’apparence. C’est juste pour vous donner une idée de ce qui peut être fait, donc c’est très hétéroclite ; n’hésitez pas à réutiliser les bouts qui vous plaisent :)  Lors de vos tests, pas besoin de sauvegarder votre monobook, un simple « prévisualiser » suffit pour jauger le résultat.

/* virer le lien "essayer la béta" */
li#pt-optin-try {
   display:none!important;
}

/* lien discussion : espace plus grand entre chaque lettre */
li#pt-mytalk a {
   letter-spacing:2px;
}

/* préférences : en italique */
li#pt-preferences a {
   font-style:italic;
}

/* liste de suivi : en petites majuscules */
li#pt-watchlist a {
   font-variant:small-caps;
}

/* contributions : barré */
li#pt-mycontris a {
   text-decoration:line-through ;
}

/* déconnexion : en rouge et gras */
li#pt-logout a {
   font-weight:bold;
   color:red;
}

Résultat :

Ajouter des icônes (toujours monobook.css ou vector.css)

Repartons de zéro (ou presque, je garde le bout supprimant le lien « essayer la beta »), et ajoutons cette fois des « icônes » à gauche de certains liens.

Chaque icône, étant attachée au node « a » et non au node « li », fait partie intégrante du lien et est donc cliquable.

/* boc de biere à gauche du lien vers ma page de discussions */
li#pt-mytalk a {
  /* mettre une image de fond (l'icône) au node "a", tout à gauche */
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/2piva.png/15px-2piva.png') no-repeat scroll left top;
  /* décaler le texte sur la droite (d'environ la largeur de l'image) pour que les deux ne se chevauchent pas */
  padding-left:17px;
}

/* une roue crantée à gauche des prefs */
li#pt-preferences a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Crystal_Clear_app_kservices.png/15px-Crystal_Clear_app_kservices.png') no-repeat scroll left top;
  padding-left:17px;
}

/* une loupe à gauche de la liste de suivi */
li#pt-watchlist a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png') no-repeat scroll left top;
  padding-left:17px;
}

/* un crayon à gauche de la liste de contributions */
li#pt-mycontris a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emblem-pen-new.svg/13px-Emblem-pen-new.svg.png') no-repeat scroll left top;
  padding-left:15px;
}

Résultat :

changer le texte, ajouter des liens (monobook.js ou vector.js)

Passons maintenant à la partie JavaScript (pour les étourdis, ça veux dire « ne collez pas le code ci dessous dans votre monobook.css, ça ne marchera pas ») . Nous allons ajouter des liens…

• vers votre monobook perso  : « js » et « css » (remplacez « monobook » par « vector » dans les liens au besoin, et adaptez si vous utilisez secure.wikimedia.org)

• vers vos logs

Et tant qu’on y est, modifions le texte des liens existants.

Le principe utilisé est le même que dans cet autre billet de personnalisation ainsi que celui ci, je ne m’étendrais donc pas trop sur son fonctionnement

importScript('Utilisateur:Darkoneko/divers.js') // si vous ne l'avez pas déjà

function customizeTopBar() {
   var logout = document.getElementById("pt-logout")
   if (!logout) return
   var topBarUl = logout.parentNode

   var mytalk = document.getElementById('pt-mytalk');
   //ajouter "js" a gauche de discussion. La variable "wgUserName" contient le nom de l'utilisateur en cours.
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.js', 'js'), mytalk)

   //ajouter "css" a gauche de discussion, donc il sera entre "js" et "discut'"
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.css', 'css'), mytalk)

   //changer le texte pour "Page de discussion"
   mytalk.getElementsByTagName("a")[0].firstChild.nodeValue = "discut' "

   //changer le texte pour "Préférences"
   document.getElementById('pt-preferences').getElementsByTagName("a")[0].firstChild.nodeValue = "prefs"

   //changer le texte pour "Liste de suivi"
   document.getElementById('pt-watchlist').getElementsByTagName("a")[0].firstChild.nodeValue = "watchlist"

   //changer le texte pour "Contributions"
   document.getElementById('pt-mycontris').getElementsByTagName("a")[0].firstChild.nodeValue = "contribs"

   //ajouter "log" a gauche de déconnexion
   topBarUl.insertBefore( createLiAdressNode('/w/index.php?title=Special:Journal&user='+wgUserName, 'log'), logout )

   //changer le texte pour "Déconnexion"
   logout.getElementsByTagName("a")[0].firstChild.nodeValue = "X"
}
addOnloadHook(customizeTopBar)

Résultat :

Et vous, quels autres liens ajouteriez vous ?

Personnalisons Wikipédia : enrouler/dérouler des sections v2

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

Vous trouverez ci dessous une mise à jour du code de mon précédent billet, Personnalisons Wikipédia : enrouler/dérouler des sections, qui vous permet de masquer ou réafficher des sections de pages de Wikipédia en cliquant sur leur titre.

Les améliorations sont les suivantes :

• Au lieu d’encoder directement un display:none/display:block , le script fait maintenant appel à la classe CSS « hidden » pour masquer les textes, afin d’éviter des problèmes d’affichage lors du dépliage (un modèle s’affichant sur toute la largeur de la page au lieu d’une largeur fixe, par exemple). 2 mini fonctions sont dédiées à cette tâche.

• le bug faisant afficher un bout de code an dessous du sommaire lors d’un dépliage a été résolu.

• lorsque vous repliez une sous-section, puis repliez/dépliez sa section parente, cette sous section restera repliée jusqu’à ce que vous cliquiez spécifiquement sur son titre (auparavant, lorsque l’on dépliait une section, tout son contenu était déplié, peu importe que des sous-sections aient été indépendamment repliées)

• La section ne se replie plus lorsque vous cliquez sur le « modifier » à droite du titre de cele-ci.

Comme d’habitude, le script a surtout été testé avec firefox 3.x et marche au moins aussi avec Safari (pas de garantie pour IE ou chrome, prévenez moi si vous rencontrez un problème dessus)

Nouveau code pour la partie JavaScript (monobook.js ou vector.js)

/* ajoute une classe à un element */
function addClass(elem,classe) {
  elem.className += " "+classe;
}

/* enlève la premiere occurence du nom d'une classe d'un element */
function removeClass(elem,classe) {
    var reg = new RegExp('(\\s|^)'+classe+'(\\s|$)');
    elem.className=elem.className.replace(reg,' '); //ne replace que la premiere occurence (comme ça les hide imbriqués restent en hide ^^)
}

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {
   for( var titleLevel = 1 ; titleLevel <= 6 ; titleLevel++) { //tous les h1, h2 ... h6
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var a = 0 ; a < nb ; a++) {
          titleList[a].setAttribute('onclick', "toogleTitle(this)");
      }
   }
  //pour que ça ne se replie pas quand on clique sur un bouton modifier, on annule l'event au niveau du lien
  var editLinkList = document.getElementsByClassName('editsection')
  nb = editLinkList.length
  for( a = 0 ; a < nb ; a++) {
     editLinkList[a].setAttribute('onclick', "event.cancelBubble=true;");
  }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var titre_niveau = p_this.nodeName.substring(1,2) //le x de hx (1 de h1, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var niveau = 2 ; niveau <= titre_niveau ; niveau++)  {
    stopMatch += "|h" + niveau
  }
  stopMatch += ")"
  regex_stopMatch = new RegExp(stopMatch, "i" )

  var nextSiblingNode = p_this.nextSibling

  if( p_this.className != "neko_toogle_cache"  ) { // il faut replier
    p_this.className = "neko_toogle_cache"  //on ajoute une classe au titre pour savoir s'il est en mode replié

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break; //on a atteint le titre "bloquant" suivant = stop
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) addClass(nextSiblingNode, "hidden") //ne pas affecter les nodes texte ni script
       nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
    }
  } else { //il faut déplier
    p_this.className = ""

    while( nextSiblingNode ) {
       if( nextSiblingNode.nodeName.match(regex_stopMatch) ) break;
       if( nextSiblingNode.style && nextSiblingNode.nodeName != 'SCRIPT' ) removeClass(nextSiblingNode, "hidden")
       nextSiblingNode = nextSiblingNode.nextSibling
    }
  }
}

voili.

Personnalisons Wikipédia : enrouler/dérouler des sections

Ce billet fait partie de la série « Personnalisons Wikipédia ».  Avez vous déjà rêvé de pouvoir plier/déplier des sections entières du bistro ou d’un article quelconque de notre belle Wikipédia  ? Grâce à la personnalisation d’aujourd’hui, c’est maintenant possible juste en cliquant sur le titre de la section.

Exemple par l’image, prise sur le bistro du jour  :

(faites pas attention à la couleur de fond grise, c’est un de mes autres test CSS)

*clic* sur « Le bistro/7 mars 2010 » => enroulé avec toutes ses sous-sections !

un autre clic dessus pour le re-dérouler.

Si le titre est un lien,  alors cliquez à droite du texte, ça marche aussi.

Malheureusement, il se trouve que j’ai totalement la flemme d’expliquer comment fonctionne la partie javascript (en plus, il y a un bout assez compliqué) ; donc je me contenterais de vous fournir le code :)

Comme d’habitude, le code est à insérer dans votre sous page monobook ou vector selon le skin MediaWiki  que vous utilisez.

Partie à mettre dans votre monobook.css (ou vector.css)

Ce petit bout de CSS est la raison de la colorisation différente (+ mise en italique) des titres repliés dans l’image ci dessus. « neko_toogle_cache » est le nom de la classe CSS que le code javascript donne aux titres repliés, pour pouvoir savoir qu’ils sont repliés et qu’ils faut « déplier » en cas de nouveau clic sur le titre.

/* couleur des titres dont la section est cachée par la fonction toogle */
.neko_toogle_cache {
  color:#333;
  font-style:italic;
}

Partie à mettre dans votre monobook.js (ou vector.js)

Pas d’explication détaillée pour cette partie là, désolé (juste les commentaires du code). Peut être plus tard, je vous promet rien :)

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {

   for( var titleLevel = 1 ; titleLevel < 7 ; titleLevel++) {
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var b = 0 ; b < nb ; b++) {
          titleList[b].setAttribute('onclick', "toogleTitle(this)");
      }
   }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var p_niveau = p_this.nodeName.substring(1,2) //le 1 de h1 (ou 2 de h2, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var a = 2 ; a <= p_niveau ; a++)  {
    stopMatch += "|h"+a
  }
  stopMatch += ")"
  reg = new RegExp(stopMatch, "i" )

  //on ajoute une classe (neko_toogle_cache) au titre pour savoir s'il est en mode replié
  if( p_this.className != "neko_toogle_cache") { //il faut  replier
     p_this.className = "neko_toogle_cache"
     var display_to_put = "none"
  } else { //il faut faire déplier
     p_this.className = ""
     var display_to_put = "block"
  }

  var nextSiblingNode = p_this.nextSibling

  while( nextSiblingNode ) {
     if(  nextSiblingNode.nodeName.match(reg) ) break; //on a atteint le titre "bloquant" suivant = stop

     if( nextSiblingNode.style) { //certains nodes sont des nodes texte et n'ont pas de style.
        nextSiblingNode.style.display = display_to_put
        if( nextSiblingNode.className = "neko_toogle_cache") nextSiblingNode.className = "" // x
     }
     nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
  }
}

concours de personnalisation : plus que 4 jours !

Il vous reste jusqu’à samedi pour participer au mini concours de personnalisation de sommaire.

Les modifs CSS  sont expliqués dans ce post… Un peu d’courage messieurs dames, c’est pourtant tout simple à réaliser ! :)

Mini concours de personnalisation de sommaire

Chalutations,

Suite à mon billet « Personnalisons Wikipédia : le sommaire« , je lance un mini-concours de personnalisations : il n’y a rien à gagner, si ce n’est le plaisir de partager son code et de le voir réutilisé ! :)

Donc, j’invite chacun à faire son propre design de sommaire, et poster dans la zone commentaire du présent billet un lien vers une capture d’écran du résultat (par exemple uploadée sur imageShack)+un lien vers votre monobook.css/vector.css. Une personne peut poster plusieurs designs, pour peu qu’ils soient notablement différents.

Le « mini concours » ouvre aujourd’hui (29 novembre) et se terminera dans 2 semaines (le 12 décembre 2009 au soir), suite à quoi je posterais une compilation de vos différentes œuvres. Je suis disponible sur IRC et ma page de discussion pour répondre à vos éventuelles questions et vous aider à débugger un peu si nécessaire.

Wikimédiens, à vos claviers !