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 :

Twitter comme outil de Wikipédia

Cette semaine, j’ai eu envie de Révolutionner Wikipédia. Oh, et m’amuser à apprendre à coder des bots twitter (en plus, ça fera joli sur mon CV)

Bref.

Il existe depuis longtemps des comptes bots "RSS" sur twitter, postant un lien vers les nouveaux articles d’un site donné au moment de leur parution. C’est très pratique si comme moi avoir un truc dédié au RSS vous gave.

J’ai eu l’idée de faire quelque chose de similaire mais en rapport avec la maintenance de Wikipédia. Après les avoir laissé tourner pendant quelques jours pour m’assurer que tout allait bien, je peut donc vous présenter :

@WP_fr_PaS

@WP_FR_PaS se base sur la création de pages de type Discuter:xxxxx/Suppression

Chaque heure, un script vérifie la création de nouvelles pages de ce type et poste un tweet par nouvelle PàS trouvée.

@WP_fr_labels

Le principe est exactement le même que pour l’autre, mais en se basant sur les motifs suivants :

• Discuter:xxxxx/Bon_article
• Discuter:xxxxx/Article_de_qualité

La cadence de création de ce type de pages étant beaucoup plus faibles que les PàS, j’ai choisi de ne faire tourner la mise à jour que toutes les 12 heures, à 7H et 19H GMT  (soit 9H et 21H heure d’été française)

Remarques

Le principal problème que j’ai rencontré est la gestion URL.

Twitter force l’utilisation de son URL shortener interne, qui nous donne des liens en t.co/xXxXyy. Et pour que twitter reconnaisse une adresse correctement, je suis forcé de l’encoder (ce qui fait par exemple apparaitre "Apr%C3%A8s" au lieu de "Après")

De plus, cette conne d’API de twitter compte le nombre de caractères *avant* que l’url ne soit raccourcie, ce qui pose un problème pour les titres de plus de 95 chars. Et bien sur, il est impossible de spécifier à Twitter qu’il y a une URL à raccourcir,  ni de lui envoyer à part pour qu’il la réduise d’abord.

C’est assez dommage. Je ne veux pas utiliser un raccourcissement externe (genre bit.ly) car ces saloperies masquent  le lien de destination. Pour moi, la destination DOIT être visible. J’ai testé frwp.org pour augmenter la limite de taille du titre, mais il ne semble pas fonctionner correctement avec les url encodées.

Donc tant pis. Tant que Twitter n’aura pas corrigé son API, les quelques titres les plus longs ne seront pas twittés ; ces deux feeds vous permettront toutefois de voir les 99% restant :)

—

Voili, amusez vous bien et soyez nombreux à les suivre !

Personnalisons Wikipédia : ajouter une année de sous pages du BA en quelques lignes

La personnalisation du jour nous viens tout droit du bulletin des administrateurs et vous permettra d’ajouter rapidement l’ensemble des sous pages 2011 du BA dans votre liste de suivi.

L’idée de Dereckson est excellente, mais si je conçois que chacun préfère programmer dans les languages qu’il connait… franchement, charger un executable ? le framework .NET ? … une machine virtuelle O_o ? Personne ne va faire ça

Bref, j’ai repris l’idée en javascript.

• La première moitié du script est "l’ajouteur" en lui même, une boucle qui fait un appel API par sous page (je n’ai pas trouvé de moyen de tous les ajouter en un seul appel)
• la 2eme moitié fait apparaitre un lien "=> Mass ajout LdS <=" dans le menu de gauche, histoire que ça soit lançable proprement.

Comme d’habitude, le code est à copier dans votre monobook.js ou vector.js, selon l’habillage que vous utilisez.

//ajout des 53 sous pages du BA en liste de suivi.
function massAddToWatchlist() {
   var http_request = sajax_init_object()
   for( var nb=1 ; nb < 54 ; nb++) {
      var address = "/w/api.php?action=watch&title=Wikip%C3%A9dia:Bulletin_des_administrateurs/2011/Semaine_"+nb
      http_request.open('POST', address , false)
      http_request.send(null)
   }
   alert("fini !")
   return false;
}

//faire apparaitre un lien dans le menu navigation pour lancer la fonction ci dessus.
function massAddToWatchlist_lien() {
var ul = document.getElementById("p-navigation").getElementsByTagName("ul")[0]
var li = document.createElement('li')
li.appendChild( createAdressNode('#', '==Mass ajout LdS==', 'return massAddToWatchlist()') )
ul.appendChild( li )
}

addOnloadHook( massAddToWatchlist_lien )

• C’est très facilement adaptable à d’autres pages (le bistro, etc) ; je sortirais les variantes dont vous avez besoin sur demande en commantaire.
• Me script étant à usage unique, il vous suffit de coller le code, prévisualiser, cliquer sur le lien et attendre que la popup indiquant la fin du traitement apparaisse. Il n’y a pas besoin de sauvegarder (même si du coup, ça m’empeche de voir si bcp de monde utilise mes scripts à partir des modifications récentes :)

Le script a été testé sous Firefox, je n’ai pas de moyen simple de le tester sous d’autres systèmes pour le moment.

Enjoy.

-Temps pour faire et tester le programme : 10 minutes

-Temps perdu pour publier un billet de blog à partir du WIFI pourrave de mon hotel : 1H -_-;

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

le million ! le million !

Bon, la Wikipédia en langue française a dépassée le million d’ébauches d’articles.

Pour ceux et celles que le logo "spécial millionème article" emmerde, je rappelle que j’explique comment mettre un logo personnalisé dans ce billet :)

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.