Améliorer MediaWiki grâce aux gadgets : introduction aux langages JavaScript et CSS


© Chris Williams, DP


© Rudloff, CC-BY 3.0

User:Arkanosis — WikiConvention francophone 2017

Gadgets ?

  • Outils optionnels pour améliorer MediaWiki
  • Développés en JavaScript et CSS (et HTML)


[[Spécial:Préférences#mw-prefsection-gadgets]]

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

JavaScript ?


© Chris Williams, DP

  • Langage de programmation inventé en 1995
  • Standardisé par l'ECMA sous le nom d'ECMAScript
    • … variantes : JScript, DMDScript, ActionScript…
  • Utilisé notamment
    • … sur les sites web (via les navigateurs)
    • … sur les serveurs (via Node.js)
    • … sur les ordinateurs de bureau (via Electron)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

CSS ?


© Rudloff, CC-BY 3.0

  • Langage de description de présentation inventé en 1996
  • « Feuilles de style en cascade » en anglais
  • Standardisé par le W3C
  • Utilisé notamment
    • … dans les navigateurs internet
    • … dans les bibliothèques d'interfaces graphiques Qt et GTK
    • … dans la bibliothèque JavaScript jQuery (sélecteurs uniquement)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Gadgets

  • Locaux à un wiki donné
    • … mais chargement possible depuis un autre wiki
  • Dans [[MediaWiki:Gadget-$GADGET.js]] (et / ou .css)
    • ⇒ modifiable uniquement par les administrateurs
  • Maintenus quasi-exclusivement par la communauté locale
    • ⇒ qualité très variable selon les scripts
    • ⇒ peu de suivi par les développeurs (hors enwiki)
    • ⇒ casse fréquente
    • ⇒ réparations lentes
    • … sauf pour quelques gadgets notables (Popups, HotCats…)

Scripts utilisateur

  • Même technologie que les gadgets
  • Pas activable dans les préférences
    • … mais chargement possible depuis un autre utilisateur
  • Dans [[Utilisateur:$UTILISATEUR/$SCRIPT.js]] (ou .css)
    • ⇒ modifiable uniquement par le propriétaire
    • … et les administrateurs
  • Moins bonnes performances que les gadgets

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Scripts utilisateur


[[Spécial:Préférences#mw-prefsection-rendering]]

  • $SKIN.js, $SKIN.css ⇒ spécifique à l'apparence et au wiki
  • common.js, common.css ⇒ toutes les apparences, spécifique au wiki
  • global.js, global.css ⇒ toutes les apparences et tous les wikis

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Éditeur

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Éditeur

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Éditeur

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

It's all text! / GhostText


It's All Text!

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

© Paul Stein, CC-BY-SA 2.0

Inspecteur de DOM

  • Permet d'explorer la structure d'une page web
  • Étape indispensable pour interagir avec elle en CSS ou en JavaScript

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Exemple CSS

  • Masquer l'avertissement sur les droits d'auteur au dessus de la zone d'édition


#cpwarn {
    display:none;
}
						
[[Utilisateur:$UTILISATEUR/common.css]] (CSS)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Exemple CSS

  • Masquer l'avertissement sur les droits d'auteur au dessus de la zone d'édition


#cpwarn {
    display:none;
}
						
[[Utilisateur:$UTILISATEUR/common.css]] (CSS)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Console JavaScript

  • Permet d'explorer la structure d'une objet JavaScript
  • Pratique pour découvrir, expérimenter, etc.

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Fonctions disponibles

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Exemple JavaScript

  • Ajouter un lien vers les annonces dans le menu de gauche


mw.loader.using( 'mediawiki.util', function() {
    mw.util.addPortletLink(
        'p-navigation',
        '/wiki/Wikipedia:Annonces',
        'Annonces',
        'n-annonces',
        'Annonces',
        'a',
        '#n-randompage'
    );
} );

						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Exemple JavaScript

  • Ajouter un lien vers les annonces dans le menu de gauche


mw.loader.using( 'mediawiki.util', function() {
    mw.util.addPortletLink(
        'p-navigation',
        '/wiki/Wikipedia:Annonces',
        'Annonces',
        'n-annonces',
        'Annonces',
        'a',
        '#n-randompage'
    );
} );

						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

API

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

API


$( function() { // TODO uniquement sur Spécial:Nouvelles_pages
    $( 'bienvenuter' ).click( function() {
	var api = new mw.Api();
	api.get(
	    {
		"action": "query",
		"format": "json",
		"meta": "tokens"
	    }
	).done( function ( data ) {
	    api.post(
		{
		    "action": "edit",
		    "format": "json",
		    "title": "User:Arktest/bienvenue", // TODO PdD de l'utilisateur
		    "section": "new",
		    "sectiontitle": "Bienvenue sur Wikipédia !",
		    "text": "Hello !~~~~", // TODO message de bienvenue
		    "summary": "Bienvenue !",
		    "token": data.query.tokens.csrftoken
		}
	    ).done( function ( data ) {
		console.log( 'CEFE!' ); // TODO feedback
	    } );
	} );
    } ).insertAfter( $( '.mw-usertoollinks-contribs' ) ).before( ' | ' );
} );
						

Exemple « improvisé » interactivement durant l'atelier et ajouté à la présentation à postériori © User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Import local

  • Importer les scripts d'un autre utilisateur sur le même wiki

importScript( 'User:Arkanosis/xpatrol.js' );
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

importStyleSheet( 'User:Arkanosis/xpatrol.css' );
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Import distant

  • Importer les scripts d'un autre utilisateur sur un autre wiki
    • … voire un autre site
    • … ou une ancienne version d'un script

mw.loader.load( '//meta.wikimedia.org/w/index.php?title=MediaWiki:Wikiminiatlas.js&action=raw&ctype=text/javascript' );
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

@import url('//fr.wikipedia.org/w/index.php?title=MediaWiki:Gadget-VectorClassic.css&action=raw&ctype=text/css');
						
[[Utilisateur:$UTILISATEUR/common.css]] (CSS)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Développement en local


mw.loader.load('//localhost/~arkanosis/wikipedia/scripts/common.js');
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

@import url('//localhost/~arkanosis/wikipedia/scripts/common.css');
						
[[Utilisateur:$UTILISATEUR/common.css]] (CSS)
  • Édition / enregistrement des fichiers en local
  • Rechargement avec ctrl + f5
  • Historique et liste des contributions « propres »

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Transformer un script utilisateur
en gadget

  • Besoin des droits d'administrateur
  • Renommage en [[MediaWiki:Gadget-$GADGET.js]] (et / ou .css)

obtenir( '$GADGET' );
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

importScript( 'MediaWiki:Gadget-$GADGET.js' );
						
[[Utilisateur:$UTILISATEUR/common.js]] (JavaScript)

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Transformer un script utilisateur
en gadget

  • Ajouter à la liste des gadgets

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Transformer un script utilisateur
en gadget

  • Rédiger la description

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Transformer un script utilisateur
en gadget

  • Le gadget est accessible à tous les utilisateurs

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

Aller plus loin


© Pierre-Yves Beaudouin, CC-BY-SA 4.0

© User:Arkanosis — CC-BY 4.0 — WikiConvention francophone 2017

~~~~


© J. B. Scott, DP