Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Archive for the ‘Personnalisons Wikipédia’ Category

Des astuces pour personnaliser l’affichage et les fonctionnalités de Wikipédia (enfin tout wiki de type Mediawiki, mais Wikipédia les gens sauront ce que c’est)

Personnalisons Wikipédia : icone de suivi sous Vector

Posted by DarkoNeko sur dimanche 13 juin 2010

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%;
}
Publicités

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , , | Leave a Comment »

Personnalisons Wikipédia : la barre du haut

Posted by DarkoNeko sur vendredi 12 mars 2010

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 ?

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , , | 3 Comments »

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

Posted by DarkoNeko sur mercredi 10 mars 2010

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.

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , | 1 Comment »

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

Posted by DarkoNeko sur lundi 8 mars 2010

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
  }
}


Posted in Personnalisons Wikipédia | Tagué: , , , , , , , | 9 Comments »

concours de personnalisation : plus que 4 jours !

Posted by DarkoNeko sur mardi 8 décembre 2009

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 ! :)

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , | 2 Comments »

Mini concours de personnalisation de sommaire

Posted by DarkoNeko sur dimanche 29 novembre 2009

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 !

Posted in Personnalisons Wikipédia | Tagué: , , , , , , , | 6 Comments »

Personnalisons Wikipédia : le sommaire

Posted by DarkoNeko sur samedi 21 novembre 2009

Ce billet fait partie de la série « Personnalisons Wikipédia« . La personnalisation du jour vous permettra de rendre toutes ces pages trop sérieuses un poil plus rigolotes (ou pas) en modifiant la tronche de leur sommaire à l’aide de quelques lignes de CSS.

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

Partie HTML

Le code d’un sommaire ressemble à ça (l’exemple est pris sur la page du bulletin des admins, pour les titres de section) :


<table id="toc" class="toc">
[...]
<ul>
	<li class="toclevel-1 tocsection-1">
		<a href="#(semaine)"><span class="tocnumber">(numérotation)</span> <span class="toctext">(semaine)</span></a>
		<ul>
			<li class="toclevel-2 tocsection-2">
				[..lien section jour, identique a celui des semaines ci dessus..]
				<ul>
					<li class="toclevel-3 tocsection-3">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-4 ">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-5">[..lien section titre..]</li>
				</ul>
			</li>
			<li class="toclevel-2 tocsection-6">
				[..lien section jour..]
				<ul>
					<li class="toclevel-3 tocsection-7">[..lien section titre..]</li>
					<li class="toclevel-3 tocsection-8">[..lien section titre..]</li>
				</ul>
			</li>
			[...]
		</ul>
	</li>
</ul>
</table>

Les deux choses importantes à retenir sont :

  • Chaque niveau du sommaire à une classe dédiée (toclevel-X ). C’est là dessus que se basera notre code CSS.
  • Les niveaux sont imbriqués (niveau 2 contenu dans le 1, 3 dans le 2, etc), ce qui signifie que si on ne précise pas le contraire, un code affecté au niveau 2 affectera par défaut tous les niveaux 3 à 6  qu’il contient

Le code CSS

Vous connaissez déjà le gros de la syntaxe utilisée car elle a déjà été expliquée dans mes précédents billets (si vous ne les avez pas lu, c’est le moment :). Les quelques éléments nouveaux seront détaillés en /* commentaires */ dans le code.

Le bout de code ci dessous donnera un style « météo » à l’ensemble des sommaires. J’expliquerais plus bas comment limiter son action à seulement certains d’entre eux (par exemple, uniquement le bistro, ou uniquement l’espace wikipédia: )

Initialement, je comptais faire un style plus ensoleillé… mais pas moyen de trouver une icone potable de chapeaux mexicains. Donc tant pis, les icones météo feront l’affaire. De toute manière, ça n’est qu’un exemple, le but étant que vous ayez la curiosité de modifier/adapter  le code à votre sauce ensuite (soyons fous et optimistes…)


/* sommaires, "météo mode"
   les modifications sont faites sur le lien (a) plutôt que sur la ligne (li) afin que l'icône soit cliquable.
 */

/* effacer la numérotation du sommaire, car elle va m'embêter pour la suite */
.tocnumber {
	display:none;
}

/* grande font, bleu foncé, avec un soleil à gauche */
.toclevel-1 a {
	color:#007;
	font-size:160%;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Crystal_sun.png/25px-Crystal_sun.png') no-repeat scroll left bottom;
	padding-left:29px; /* décaler le texte sur la droite pour laisser de la place a l'icône */
}

/* font un peu moins grande, bleu standard, icône nuageuse à sa gauche */
.toclevel-2 a {
	font-size:130%;
	color:#00F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Cloudy01.svg/20px-Cloudy01.svg.png') no-repeat scroll left bottom;
	padding-left:24px;
}

/* font taille normal, bleu plus clair, icône orage */
.toclevel-3 a {
	font-size:100%;
	color:#55F;

	background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/cf/Weather_lightning.png') no-repeat scroll left bottom;
	padding-left:19px;
}

/* font plus petite, bleu encore un peu plus clair, pas d'icône (car serait trop petite pour être reconnaissable) */
.toclevel-4 a {
	font-size:80%;
	color:#99F;

	background:none; /* pas d'image de fond (l'icône sur la gauche), il faut le spécifier sinon celle du niveau 3 s'affichera */
	/* je laisse le padding-left hérité du niveau supérieur pour que le décalage soit cohérent avec les niveaux d'au dessus */}

Le résultat

Pour vous donner une meilleure idée de l’impact, j’ai aussi fait une capture des sommaires du BA et du bistro avec ce thème, c’est cliquable et c’est ci dessous. Moins lugubre tout de suite, non ?

Limiter la portée du code

Maintenant, vous n’avez probablement pas envie que ce code soit actif sur absolument toutes les pages, et souhaitez le limiter a un/des namespace(s) ou des pages en particuliers.

Je veux dire, ce style rend bien pour les pages qui ont une arborescence sur plusieurs niveaux, mais pour une page ou ça n’est pas le cas, ça ressemble plutôt à ça, que je trouve moche :

Pour ce faire, nous allons nous servir d’une série de classes que MediaWiki affecte à chaque page. Par exemple, le Bulletin des administrateurs (avec ma config) possède celles ci :


<body class="mediawiki ltr ns-4 ns-subject page-Wikipédia_Bulletin_des_administrateurs skin-monobook">

(je saute celles que je ne connais/comprend pas)

  • « ltr » indique que nous sommes dans un mode « left to right » (en opposition, par exemple, à l’arabe qui se lis en rtl, de droite à gauche)
  • « ns-4 » est l’identifiant du namespace de la page (ici wikipédia: )
  • « page-Wikipédia_Bulletin_des_administrateurs » est un identifiant unique (ou presque) de la page
  • « skin-monobook« , comme son nom l’indique, spécifie que j’utilise le skin « monobook » pour visualiser la page. Les utilisateurs d’Açai/Babaco verront à la place « skin-vector« .

Les deux qui nous intéressent sont celui qui indique le namespace et celui qui est unique à la page.

Mettons que je veuille limiter la portée du code au namespace wikipédia: . Au lieu de

.toclevel-1 a {

il suffit de mettre

.ns-4 .toclevel-1 a {

Et si je veux limiter sa portée au BA et au bistro, le code devient

.page-Wikipédia_Bulletin_des_administrateurs .toclevel-1 a, .page-Wikipédia_Le_Bistro .toclevel-1 a  {

Et voila le travail !

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 3 Comments »

Personnalisons Wikipédia : raccourcis clavier en mode édition

Posted by DarkoNeko sur dimanche 1 novembre 2009

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

La plupart des logiciels WYSIWYG permettent de modifier l’apparence d’un texte (mise en gras, italique, souligné, etc) à l’aide de raccourcis clavier (respectivement ctrl+b, ctrl+i, ctrl+u, …) La personnalisation d’aujourd’hui vous permettra de créer des raccourcis clavier en JavaScript afin d’avoir des facilités similaires lors de vos éditions sur Wikipédia

Introduction

(ceux qui ne s’intéressent pas aux explications peuvent passer directement au code complet, à la fin du billet)

Le code du jour fait appel à la notion d’évènement, pour lesquels vous trouverez plus d’informations sur Wikibooks. Les évènements qui nous intéressent ici sont ceux qui nous permettront de savoir quand l’utilisateur appuie sur une certaine combinaison de toucher sur le claviers, et sont au nombre de deux :

  • « appui sur une touche du clavier » (onkeydown)
  • « relachement d’une touche du clavier » (onkeyup).

Ces deux évènements permettent d’accéder en interne à un code correspondant à la touche qui viens d’être appuyée ou relachée.

Histoire de nous faciliter la vie, MediaWiki possède déjà une fonction JavaScript permettant de modifier un texte sélectionne comme l’on veux. Cette fonction est par exemple utilisée lorsque vous cliquez sur un des boutons au dessus (la barre de menu) ou en dessous (les listes de caractères spéciaux), en mode édition.

Cette fonction est insertTags(). Elle prend 3 paramètres, qui sont respectivement :

  • les caractères à ajouter avant la sélection
  • Les caractères  à ajouter après la sélection
  • Le texte par défaut,  s’il n’y avait pas de texte séléctionné.

Exemple pour mettre un texte en souligné :


 insertTags('<u>', '</u>', 'souligné');

Note : Le code n’a été, pour l’instant, testé que sous Firefox 3.0 et 3.5.4. N’hésitez pas à me donner un feedback sur le bon fonctionnement (ou non) sur d’autres versions et navigateurs.

Note2 : il faut savoir que les raccourcis défini en javascripts seront prioritaires sur ceux du logiciel (du moins avec firefox)

Passons au code…

Conteneur

Histoire d’être un minimum propre, notre code sera, comme pour les autres de mes billets, encapsulé dans une fonction


function keyboardShortcuts() {
  // le code sera ici
}

 

Utilisation des évènements

La méthode pour définir une action (= l’appel à une fonction) sur les évènements qui nous intéresse est la suivante :


  document.onkeyup = function(e) { //l'user relâche une touche
    //code à executer
  }

  document.onkeydown = function(e){  //l'user appuie sur une touche
    //code à executer
  }

Problématique de la double touche

Problème : nous avons besoin de savoir lorsque l’utilisateur appuie à la fois sur « ctrl » et une lettre. Or, l’événement de base ne permet de le faire que pour une seule touche à la fois
Solution : créer une variable qui sait si ctrl est actuellement appuyé ou non


  var isCtrl = false; //la touche commence "non enfoncée"

  //l'evenement "onkeyup" est appelé à chaque fois qu'une touche est relachée.
  document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;  //l'user relâche la touche ctrl (qui a le code 17). La variable passe a False
  }

  //l'evenement "onkeydown" est appelé à chaque fois qu'une touche est pressée.
  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
    }
  }

Gestion des actions en elle-même

J’ai géré ci dessous 5 raccourcis :

  • ctrl+b, pour mettre un texte en gras
  • ctrl+i, pour mettre un texte en italique
  • ctrl+l (L minuscule), pour faire un lien interne
  • ctrl+m pour mettre le texte entre {{ }} et faire un modèle
  • ctrl+u, pour souligner un texte

D’autres sont ajoutables à volonté, attention juste à ne pas utiliser des lettre dont vous vous servez souvent en édition pour vos raccourci (par exemple ctrl+x/c/V pour couper/copier/coller)

(sera mis dans la fonction d’onKeyDown)


    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
            insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
            insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
            insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
            insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
            insertTags('<u>','</u>', 'souligné');
            return false
	    break
       }
     }

Résultat final

Pour les flemmards et ceux qui ont peur d’en oublier un morceau, le code complet ci dessous; recopiable tel quel :


function keyboardShortcuts() {

  var isCtrl = false;

  document.onkeyup=function(e) { //l'user relâche la touche ctrl. La variable passe a False
    if(e.which == 17) isCtrl=false;
  }

  document.onkeydown=function(e){
    if(e.which == 17) { //l'user appuie sur la touche ctrl. La variable passe a True
      isCtrl=true;
      return;
    }

    //gestion des ctrl+lettre que l'on veux ajouter.
    if( isCtrl == true ) {
       switch (e.which) { //quelle touche a été enfoncée ?
  	  case 66: //b
	    insertTags("'''", "'''", 'gras');
            return false
	    break;
	  case 73: //i
	    insertTags("''", "''", 'italique');
            return false
	    break;
          case 76: // l
	    insertTags('[[', ']]', 'lien interne');
            return false
	    break;
          case 77: // m
	    insertTags('{{', '}}', 'modèle');
            return false
	    break;
	  case 85: //u
	    insertTags('<u>', '</u>', 'souligné');
            return false
	    break
       }
     }
  }
  return true
}

//la fonction qui gère tous les appel de fonctions (du moins dans mes divers billets :)
//!\ CELA VEUX DIRE QU'IL FAUT FUSIONNER AVEC LA FONCTION main() EXISTANTE, SI VOUS EN AVEZ UNE /!\
function main() {
  // [...  autres fonctions  ... ]

   if (wgAction == "edit" || wgAction == "submit")  { //à n'appeller que si en mode edition, sinon c'est inutile
      keyboardShortcuts()
   }
}

addOnloadHook(main)

Et Voili ! Comme d’habitude, n’oubliez pas de forcer le rafraichissement du monobook (ou vector) après avoir sauvegardé.

Source : Ce billet sur Lixya.org ; et un merci à Phe pour le coup de main :)

Edit : retiré un « ] » qui trainait au milieu du code – forcement, ça marche mieux maintenant – désolé :(

Posted in Personnalisons Wikipédia | Tagué: , , , , , , | 2 Comments »

Personnalisons Wikipédia : changer l’apparence du « vous avez un nouveau message » (2)

Posted by DarkoNeko sur samedi 15 août 2009

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

La personnalisation d’aujourd’hui vous permettra de changer l’apparence  du sempiternel « vous avez un nouveau message » (voire le cacher) à l’aide d’un peu de CSS  – à ne pas confondre avec mon billet d’hier qui indiquait comment en changer le texte (et qui explique pourquoi j’ai un truc louche dans mes captures d’écran ci dessous :)

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , | 4 Comments »

Personnalisons Wikipédia : vous avez un nouveau message

Posted by DarkoNeko sur vendredi 14 août 2009

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

La personnalisation d’aujourd’hui vous permettra d’altérer le texte du sempiternel « vous avez un nouveau message » à l’aide de quelques lignes de JavaScript.

Lire le reste de cette entrée »

Posted in Personnalisons Wikipédia | Tagué: , , , , , | 9 Comments »