ResourceLoader/Modules du noyau

Cette page liste une partie des modules présents dans le noyau MediaWiki par défaut. Elle reflète la version de développement actuelle de MediaWiki et peut être différente de la dernière version stable. Il ne prétend pas être aussi concis et à jour que la documentation JavaScript de Wikimedia sur doc.wikimedia.org, ni contenir tous les modules de la liste officielle des modules de Resources.php, mais il apporte beaucoup d'informations supplémentaires. Pour les anciens modules, voir le Guide de migration.

Les modules jquery et mediawiki.base forment ensemble l'environnement de base ("startup") et sont toujours présents. Ils ne doivent pas être déclarés comme des dépendances.

• JS Documentation

C'est le module de base de MediaWiki. Il initialise l'objet global mw.

• JS Documentation

La liste stable des clés de configuration à lire dans mw.config est donnée dans Interface/JavaScript.

// Vérifier l'existence
if(mw.config.exists('wgGlobalGroups')){
// CentralNotice a enregistré cette variable...
}
// Ou simplement un accès direct par comparaison.
// (pas besoin de vérifier l'existence d'abord, elle rend nul).
if(mw.config.get('wgPageName')==='ResourceLoader'){
// ... votre code ...
}
// Accès à plusieurs pour une utilisation avec une base de code plus grande.
// Rend un objet de dictionnaire contenant les variables demandées
// en tant que clés avec leurs valeurs correspondantes.
constconf=mw.config.get([
'wgServer',
'wgPageName',
'wgCanonicalSpecialPageName',
'wgUserLanguage'
]);
if(conf.wgCanonicalSpecialPageName==='Blankpage'){
// ... votre code ...
}

• JS Documentation

Un environnement pour enregistrer et déclencher des événements en JavaScript (plutôt que de le faire sur le document final). Par exemple, le code ci-dessous fournit un message une fois que les catégories sont chargées sur la page :

mw.hook('wikipage.categories').add(($content)=>{
if(mw.config.get('wgCategories').length===0){
alert('Please add categories to this page');
}
});

Dans les scripts utilisateur et les gadgets, vous pouvez déclencher des accroches (des événements) préfixés par userjs.. Par exemple :

functionMyScriptInit(){
varsimpleVariable='done';
varobjectPassed={me:this};
mw.hook('userjs.myScript.postInit').fire(simpleVariable,objectPassed);
}
//...

Ensuite on souscrit à cet événement ainsi :

// ici les 2 variables sont reçues (ignorées aussi)
mw.hook('userjs.myScript.postInit').add((simple,objectPassed)=>{
//...
});

Notez que les accroches sont exécutées en séquence (et à l'endroit où elles sont déclenchées).

functionMyGadget(){
varobjectPassed={
abc:'default'
};
this.objectPassed=objectPassed;
console.log('before hooks',objectPassed);// (2)
mw.hook('userjs.MyGadget.postInit').fire(objectPassed);
console.log('after hooks',objectPassed);// (4)
}
mw.hook('userjs.MyGadget.postInit').add((objectPassed)=>{
objectPassed.abc='changed in hook';
console.log('inside a hook',objectPassed);// (3)
});
console.log('before init');// (1)
constgadget=newMyGadget();
console.log('after init',gadget.objectPassed);// (5)

Ce qui donne l'ordre suivant :

1. before init
2. before hooks, Object { abc: "default" }
3. inside a hook, Object { abc: "changed in hook" }
4. after hooks, Object { abc: "changed in hook" }
5. after init, Object { abc: "changed in hook" }

• JS Documentation

Fonctions d'aide pour échapper et créer des chaînes HTML.

Raccourci pour mw.inspect.runReports . Affiche dans la console une liste de tous les modules ResourceLoader chargés sur cette page, triés selon la taille totale du JavaScript, CSS, etc. de chaque module.

• JS Documentation

• JS Documentation

Collection de méthodes pour aider à journaliser les messages sur la console.

• JS Documentation

Si le module mediawiki.jqueryMsg est chargé, le comportement de ce module change considérablement. Voir le lien ci-dessus.

Obtenir l'heure actuelle en millisecondes depuis le 1er janvier 1970 (UTC).

Sur les navigateurs qui implémentent l'API Navigation Timing, cette fonction donne des valeurs en virgule flottante avec une précision de la microseconde et la garantie d'être monotonique. Sur tous les autres navigateurs, le repli se fait en utilisant Date.

vartotalTime,time=mw.now();
// ... ici, votre code coûteux ...
totalTime=mw.now()-time;

Publier des données arbitraires dans un tampon pour une consommation ultérieure.

La conception de mw.track() encourage les interactions asynchrones et sans dépendance grâce au contrat des messages stables, basé uniquement sur la chaîne des sujets et sur quelques données.

Le code JavaScript de MediaWiki peut appeler mw.track() pour capturer et observer efficacement les données de n'importe où. Il existe une séparation complète des préoccupations entre l'éditeur et l'abonné. Vous n'avez pas besoin de connaître le nom de l'extension qui consomme les données, ni de dépendre de son module ou de le charger en premier, ou même d'appeler son code pour traiter les données. Au lieu de cela, si et lorsque cette autre fonctionnalité charge son module, elle appellera mw.trackSubscribe() pour accéder au tampon et le traiter à partir de ce point.

Les noms de sujets sont constitués de composants de chemin séparés par des points, disposés du plus général au plus spécifique. Chaque composant du chemin doit avoir une signification claire et bien définie. Les gestionnaires de données sont enregistrés via mw.trackSubscribe() et reçoivent l'ensemble des événements correspondant à leur abonnement, y compris ceux qui ont été activés avant que le gestionnaire ne soit attaché.

Un exemple remarquable est Extension:EventLogging :

mw.track('event.Sandbox',{
name:'grain',
number:12
});
// // ... si l'extension optionnelle EventLogging est installée et activée, 
// ... et après que le module "ext.eventLogging" ait terminé de charger, 
// ... on appellera `mw.trackSubscribe ('événement.') ` 
// ... et finalement `mw.eventLog.logEvent () ` pour chaque événement.
// it will call `mw.trackSubscribe( 'event.' )` and eventually call `mw.eventLog.logEvent()` for each event.

statsd.js est un exemple remarquable dans Extension:WikimediaEvents (source) :

// compteur Prometheus
mw.track('stats.mediawiki_foo_bar_total');// valeur par défaut de l'incrément = 1
// notez que la valeur des champs ne doit pas contenir de caractère "-" sinon elle sera considérée comme valeur non valide.
mw.track('stats.mediawiki_foo_bar_total',1,{something:'example',skin:mw.config.get('skin').replace(/-/g,'')});
// temporisation Prometheus
mw.track('stats.mediawiki_foo_quux_seconds',42.3);// 42ms
// histogramme Prometheus
// _distribution suffix is required, also the buckets label must be there.
// The buckets must be added as hard-coded values, not dynamically calculated, because they must not be changed once data collection has started
mw.track(
'stats.mediawiki_foo_bar_distribution',
0.347,
{
wiki:mw.config.get('wgDBname'),
buckets:[0,0.05,0.1,0.2,0.3,0.5,0.8,1.1,1.5,2],// choisissez-les comme cela vous convient !
},
);
// ... si WikimediaEvents est installé, alors ceci envoie éventuellement une balise au service StatsV

Pour utiliser les compteurs de statistiques dans les gadgets, voir Gadget kitchen: recording metrics .

Pour savoir comment fonctionne StatsV, voir Statsv sur Wikitech.

Graphite s'est éteint mais les événements précédents peuvent être générés avec le code suivant.

Ces exemples sont utilisés comme référence mais ne fonctionnent pas en production.

// compteur Graphite
mw.track('counter.MediaWiki.foo.bar.example');
// temporisation Graphite
mw.track('timer.MediaWiki.foo.quux',42.3);// 42ms

• JS Documentation

Crée des notifications Bubble notifications . Exemple de base :

mw.notify('This is a notification.');// Envoyer une notification en texte simple
mw.notify(mw.message('some-message'));// Utiliser un message i18n pour envoyer une notification
mw.notify($('<span>This is an <u>HTML</u> notification.</span>'));// Envoyez une notification HTML avec une instance jQuery (un nœud DOM fonctionne également)
mw.notify('Test',{title:'Title!'});// donner un titre à la notification
mw.notify('Test',{autoHide:false});// ne pas masquer automatiquement la notification
mw.notify('Test',{tag:'foobar'});// envoyer une notification marquée d'une balise
mw.notify('Test 2',{tag:'foobar'});// Ceci va remplacer l'ancienne notification 'foobar'.

Les options disponibles sont décrites à API Bubble notifications.

• JS Documentation

Charger un ou plusieurs modules, un script ou une feuille de style. Pour charger un script ou une feuille de style externe, l'URL doit commencer soit par "http://", "https://" ou "//" (relatif au protocole) ou par "/" (chemin local). Fournir un type MIME comme deuxième paramètre (soit "text/javascript" ou "text/css"). Si aucun type MIME n'est fourni, "text/javascript" est pris par défaut. mw.loader crée une demande asynchrone; si vous devez exécuter du code qui dépend d'un module, utilisez mw.loader.using à la place qui fournit une procédure de rappel (callback). Si vous avez besoin d'un rappel à partir d'un script externe, utilisez mw.loader.getScript (ou jQuery.getScript ).

les instructions du chargeur indiquent qu'un module portant ce nom doit être chargé le même module ne sera pas chargé une seconde fois s'il a déjà été chargé Ceci ne s'applique pas aux scripts ni aux feuilles de style – ils seront rechargés à chaque fois même s'ils sont déjà présents. Si un script définit window.Foo, vous pouvez utiliser ( window.Foo !== undefined ) pour vérifier qu'il a déjà été chargé.

// Module par nom
mw.loader.load('oojs');
// Modules multiples
mw.loader.load(['oojs','mediawiki.Title']);
// Module de gadget local. Ceci doit être défini dans [[MediaWiki:Gadgets-definition]].
mw.loader.load('ext.gadget.Navigation_popups');
// Page JavaScript
mw.loader.load('https://www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-UTCLiveClock.js&action=raw&ctype=text/javascript');
mw.loader.load('https://commons.wikimedia.org/w/index.php?title=MediaWiki:Gadget-HotCat.js&action=raw&ctype=text/javascript');
// feuille de style CSS
mw.loader.load('https://en.wikipedia.org/w/index.php?title=User:Example/custom-foo.css&action=raw&ctype=text/css','text/css');
// feuille de style CSS de la page wiki utilisant la méthode getUrl
mw.loader.load(mw.util.getUrl('MediaWiki:Foo.css',{action:'raw'})+'&ctype=text/css','text/css');
// feuille de style externe
mw.loader.load('https://wiki.example/mystyles.css','text/css');

Charger un ou plusieurs modules et exécuter une fonction une fois ces modules sont chargés. Voir JS Documentation

Depuis MediaWiki 1.28 la promesse rendue par cette fonction est résolue par une fonction require qui peut être utilisée pour accéder à l'interface publique des modules du paquet. Par exemple :

mw.loader.using(['mediawiki.util'],(require)=>{
constutil=require('mediawiki.util');
});

Charger un script par URL. Rend un objet promesse jQuery pouvant être utilisé pour spécifier des procédures de rappel.

Exemple :

mw.loader.getScript('https://example.org/x-1.0.0.js').then(
()=>{
// le script a réussi. Vous pouvez utiliser X maintenant.
},
(e)=>{
// le script a échoué. X n'est pas disponible
mw.log.error(e.message);// => "Échec au chargement du script"
}
);

Pour obtenir un rappel unique à partir de promesses multiples, utiliser jQuery.when ou Promise.all

$.when(
mw.loader.getScript('https://example.org/x-1.0.0.js'),
mw.loader.getScript('https://example.org/y-2.0.0.js')
).then(
()=>{
// les deux scripts ont réussi. Vous pouvez utiliser maintenant X et Y.
},
(e)=>{
// Un script a échoué et n'est pas disponible
mw.log.error(e.message);// => "Failed to load script"
}
);

• JS Documentation

Importer une page JavaScript locale des espaces de noms User: ou MediaWiki: pour être utilisée par les scripts utilisateur et les scripts globaux. Si le même titre est importé plusieurs fois, il ne sera chargé et exécuté qu'une seule fois

• JS Documentation

importer une page CSS locale des espaces de noms User: ou MediaWiki: pour être utilisée par les scripts utilisateur et les scripts globaux.

• JS Documentation

bouchon pour tracer les erreurs Javascript toujours chargé. fournit une méthode pour journaliser les exceptions :

try{
// ...
}catch(e){
mw.errorLogger.logError(e,'my-component');
}

Rend deux types d'événements #mw.track :

• error_caught: c'est là où vont les erreurs journalisées via logError
• global_error: exceptions non capturées signalées par le navigateur

Par défaut, on ne fait rien avec ces événements; un gestionnaire mw.trackSubscribe peut les rediriger vers l'API de trace appropriée. Voir par exemple clientError.js dans Extension:WikimediaEvents .

• JS Documentation

Module contenant les informations sur l'utilisateur actuel.

Disponible depuis 1.41.0-wmf.20

Peut être utilisé pour manipuler certaines classes sur l'élément HTML de manière à ne pas entraîner un clignotement du contenu sans style. Cela peut être utilisé lorsque vous demandez au générateur de bloquer les modifications des utilisateurs anonymes.

A cause de la conception, les seules classes pouvant être manipulées ont le suffixe -clientpref-[A-Za-z0-9]. Ceci, pour empêcher la manipulation involontaire des classes ainsi que servir d'indicateur pour les personnes qui consultent la source HTML des classes qui sont soumises à traitement.

// Rend la valeur actuelle de la préférence client "foo".
// The value of preference corresponds with a class on the HTML element that matches the form foo-clientpref-<value>.
// For example if there is a class on the HTML element foo-clientpref-1 then get will return 1.
// returns false if there is no class on the HTML element e.g. nothing matches the regular expression /foo-clientpref-[a-zA-Z0-9]+/
mw.user.clientPrefs.get('foo');
// Rend false si aucune classe n'a été trouvée sur l'élément HTML.
// If there is a class foo-clientpref-1 on the HTML element this will be replaced with foo-clientpref-5.
// Importantly: This replacement will persist across page views.
mw.user.clientPrefs.set('foo','5');

• Source code

Contient les préférences utilisateur ou les valeurs par défaut si non connecté.

// Obtenir une option des préférences et l'utiliser directement
alert('According to your preferences, your gender is '+mw.user.options.get('gender'));
// obtenir plusieurs préférences et les comparer
constopts=mw.user.options.get(['diffonly','showhiddencats']);
if(opts.diffonly===0&&opts.showhiddencats===false){
// les préférences utilisateur correspondent
}else{
// les préférences utilisateur ne correspondent pas
}

Ce module est chargé de manière asynchrone et peut dépendre d'une demande HTTP séparée pour le module user.defaults. Toujours déclarer les dépendances correspondantes pour votre module, ou utiliser mw.loader.using().

Exemple d'utilisation des options dans les gadgets comme des préférences permanentes. Voir aussi : mw.Api saveOptions.

varMwGadgetUserOptions=class{
/** La clé doit être : "userjs--unique-gadget-name--option" . */
constructor(saveKey){
this.saveKey=saveKey;
this.api=newmw.Api();
}
/** Enregistrer dans le dépôt utilisateur de MediaWiki (compatible asynchrone). */
save(options){
constdata={};
data[this.saveKey]=JSON.stringify(options);
returnthis.api.saveOptions(data);
}
/** Lire à partir du dépôt utilisateur MediaWiki (synchrone). */
read(){
constraw=mw.user.options.get(this.saveKey);
try{
returnraw?JSON.parse(raw):null;
}catch(e){
console.warn('Failed to parse saved options',e);
returnnull;
}
}
};
// Exemple d'utilisation avec une attente
(async()=>{
letoptionsHelper=newMwGadgetUserOptions('userjs-tmp1');
// ceci va lire les options disponibles au chargement, c'est rapide
letoptions=optionsHelper.read();
console.log(`User's options:`,options);
options={
s:'abc',
r:[1,'def',true]
};
awaitoptionsHelper.save(options);// il n'est pas utile d'attendre mais vous le pouvez
console.log(`Saved new options`);
})();

Ceci contient un objet mw.Map pré-rempli avec des jetons à utiliser par mediawiki.api.

• JS Documentation
• Source code

Ce module fournit les objets mw.Api et mw.Rest. Les principales méthodes de l'objet mw.Api sont : get(), post(), ajax(). Le module mediawiki.api et ses greffons renvoient un Promise – similaire à jQuery.ajax (et ses dérivés tels que : jQuery.get, jQuery.post, jQuery.getJSON).

Avant MediaWiki 1.32 (Gerrit change 434179), les méthodes faisaient partie de modules séparés nommés sous mediawiki.api.*. Ils ont été fusionnés dans le module principal mediawiki.api, donc vous n'avez qu'à dépendre de ce module. Les sous-modules sont obsolètes avec des avertissements. Ces sous-modules ont été supprimés dans MediaWiki 1.33.

Exemples de méthodes disponibles :

• mw.Api#edit – Modifiez une page existante.
• mw.Api#saveOptions – Modifie une ou plusieurs préférences utilisateur.
• mw.Api#watch – Ajouter un titre donné (ou plusieurs) à la liste de suivi de l'utilisateur.

// Exemple
constapi=newmw.Api();
api.watch('Page to watch');

• Documentation JS : mw.cookie
• Documentation JS : $.cookie (greffon jQuery)

Module de cookies qui utilise les mêmes paramètres que la configuration du côté serveur MediaWiki (sauf pour wgCookieSecure).

Exemple d'utilisation :

mw.cookie.set('myCookie','some-value');
constvalue=mw.cookie.get('myCookie');

Ce module préfixe le nom des cookies avec $wgCookiePrefix (par exemple "enwikimyCookie=some-value").

Évitez d'accéder au même cookie de manières différentes, par exemple via mw.cookie et via $.cookie sinon vous risquez de rencontrer des problèmes.

Voir la documentation de l'API pour les options disponibles.

• JS Documentation
• Source code

Interface utilisateur pour recueillir les commentaires, en particulier sur les nouvelles fonctionnalités.

• JS Documentation

Une extension de mediawiki.api orientée spécifiquement sur la gestion de tout ce qui est nécessaire à la comunication avec les autres wikis MediaWiki via des requêtes d'origines croisées (CORS). Voir Manuel:CORS .

• JS Documentation

Extension de mw.Rest. Voir Manuel:CORS .

• JS Documentation

Extension de mw.Upload.

• mediawiki.jqueryMsg

Ce module met à jour l'analyseur syntaxique mw.message pour prendre en charge la traduction de base du wikicode et les fonctions de formatage. Par exemple, mediawiki.jqueryMsg est nécessaire pour la prise en charge du pluriel et du genre, le mot magique 4ドル et les liens.

• JS Documentation

Enregistrer et détecter un ensemble de routes de navigation dans la page (par exemple, des fragments de hachage). Il est basé sur OOjs .

• JS Documentation
• mediawiki.storage

Conteneur pour HTML5 Web Storage (localStorage et sessionStorage).

Si vous faite la migration de $.jStorage, notez que mw.storage.get() et mw.storage.set() ne stockent que des valeurs de chaînes. Utiliser JSON.stringify() et JSON.parse() ou parseInt (ou parseFloat) selon qu'il s'agit d'initialiser ou de récupérer les valeurs qui ne sont pas des chaînes. Vous pouvez également utiliser mw.storage.getObject() et mw.storage.setObject() (Gerrit change 506145) pour que MediaWiki s'insère de manière transparente dans la sérialisation JSON.

• mediawiki.ui (obsolète depuis v. 1.29)

Utiliser Codex à la place !

Module de l'interface utilisateur développé dans le cadre du projet Agora . Il définit les styles CSS mw-ui-*. Il a été utilisé dans les formulaires de Connexion et de Création de compte ainsi que dans plusieurs extensions et ses différents modules sont obsolètes depuis la v1.29, ayant été remplacés par les composants du Wikimedia Design System Codex.

• JS Documentation

Module fournissant des widgets OOUI spécifiques à MediaWiki tels que le widget d'entrée d'utilisateur ou le widget de saisie de l'espace de noms.

• JS Documentation
• mediawiki.util

Ajoute un élément ‎<style> à HEAD et renvoie l'objet CSSStyleSheet.

L'objet CSSStyleSheet peut être utilisé pour désactiver des règles CSS à tout moment ou réactiver les règles désactivées. Ceci peut être réalisé via l'attribut 'disabled'. Quand la valeur est true, les règles ne s'appliquent plus. Quand la valeur est false, les règles s'appliquent à nouveau.

Voir aussi W3 sur CSSStyleSheet pour plus d'informations.

// Ajouter une simple règle de style
mw.util.addCSS('.plainlinks { color: green; }');
// Ajouter une règle et définir une variable vers la feuille
constmyCssRules=mw.util.addCSS('.plainlinks { color: green; }');
$('#myButton').on('click',()=>{
// Lorsque le bouton est cliqué, on bascule la feuille de style de true à not true (c'est à dire false),
// ou de false à non-false (cad true)
myCssRules.disabled=!myCssRules.disabled;
});

• JS documentation

Cette fonction vous permet de créer un nouveau portlet sur la page.

Le premier argument est l'identifiant du nouveau portlet portefeuille; c'est le seul nécessaire. Lorsque vous utilisez uniquement le premier argument, aucun portlet ne sera ajouté à la page et vous devez l'insérer vous-même en utilisant la valeur renvoyée. Lorsque vous spécifiez seulement la première valeur, vous devez ajouter le portlet avant d'utiliser l'API mw.util.addPortletLink.

constp=mw.util.addPortlet('detached');
document.body.appendChild(p);
mw.util.addPortletLink('detached','#','My test link');

Le deuxième argument vous permet de créer une étiquette - ce qui est important pour les menus qui apparaissent dans la barre latérale et pour les menus déroulants.

Le troisième paramètre (s'il est utilisé) va automatiquement ajouter le portlet à la page avant le sélecteur fourni. Il fournit également une indication aux habillages pour que le nouveau portlet clone la mise en forme du portlet actuel.

Voir la documentation JS mw.util pour d'autres détails.

// créer un portlet qui est ajouté avant #p-interaction et cloner la mise en forme de #p-interaction.
mw.util.addPortlet('p-mytest','My test portlet','#p-interaction');
mw.util.addPortletLink('p-mytest','#','My test link');

Dans de nombreux cas d'utilisation, le menu peut ne pas apparaître stylisé comme prévu et le portlet est fourni tel quel.

Dans ces situations, vous devrez fournir votre propre style.

Quelques fois vous souhaiterez utiliser le troisième paramètre pour cloner la mise en forme du portlet, mais sans l'appliquer avant.

Pour faire cela, vous devez utiliser la valeur de retour et la déplacer à un autre endroit.

constp=mw.util.addPortlet('p-mytest','My test portlet','#p-interaction');
mw.util.addPortletLink('p-mytest','#','My test link');
// déplacer le porlet en fin de liste.
if(p){
p.parentNode.appendChild(p);
}

Les habillages Vector (2022) et l'ancien Vector (2010) prennent en charge l'ajout de portlets en tant que menus déroulants dans la barre d'onglets. Ceci est implémenté en interceptant les requêtes de création de portlet avec le sélecteur #p-cactions dans l'argument avant et en clonant le style utilisé par l'habillage pour ses propres menus déroulants.

// créer un menu déroulant dans l'ancien Vector et dans Vector
mw.util.addPortlet('p-mytest','My test dropdown','#p-cactions');
mw.util.addPortletLink('p-mytest','#','My test link');

Dans Monobook cela va créer à la place, un portlet régulier dans la barre latérale gauche. Dans Timeless, leportlet sera créé dans la barre latérale droite. Dans les habillages où l'élément #p-cactions n'existe pas (par exemple Minerva sur mobile pour les utilisateurs anonymes) il s'agit essentiellement d'un NOOP.

L'ajout de ce portlet et son déplacement pour cloner le style des menus déroulant fonctionne dans l'ancien Vector (2010), mais ne fonctionne pas dans Vector (2022) parce que l'habillage l'enveloppe dans un balisage supplémentaire (votre portlet existe à l'intérieur d'un menu déroulant créé par l'habillage pour vous, mais ce n'est pas en soi un menu déroulant). Donc, pour le mettre ailleurs, par exemple pour obtenir une liste déroulante à côté des onglets de la page principale à gauche, vous devrez trouver le nœud du DOM qui représente la liste déroulante réelle et déplacer. Ceci n'est pas recommandé car on s'appuie alors sur l'implémentation interne de l'habillage (structure du balisage et mise en forme) ce qui peut présenter un problème de compatibilité si l'implémentation est modifiée, mais si c'est ce qu'il vous faut, vous pouvez vous inspirer du code suivant :

// créer un menu déroulant dans l'ancien Vector et dans Vector
constp=mw.util.addPortlet('p-mytest','My test dropdown','#p-cactions');
mw.util.addPortletLink('p-mytest','#','My test link');
if(mw.config.get("skin")==='vector-2022'){
// faites confiance à Vector en utilisant l'ID que vous avez fourni pour le portlet et
// ajouter '-dropdown' à celui-ci comme l'ID du menu déroulant actuel.
$('#p-mytest'+'-dropdown').appendTo('#left-navigation');
}else{
// utiliser le nœud renvoyé par mw.util.addPortlet()
$(p).appendTo('#left-navigation');
}

Cette fonction est portée à partir de l'ancien wikibits en le gardant entièrement compatible arrière, avec quelques ajustements qui prennent en charge tous les habillages de base ainsi qu'un sélecteur CSS comme nextnode. Notez qu'elle ne prend pas en charge MobileFrontend avec l'habillage Minerva pour les utilisateurs non connectés.

Seuls les trois premiers arguments sont nécessaires. Si vous devez exécuter une fonction personnalisée lorsque l'utilisateur clique sur un portlet, utilisez le jQuery(...).on('click', .. ) sur l'objet Element rendu pour attacher une fonction de rappel qui exécute le code souhaité.

Voir la documentation mw.util pour les détails.

// Attendre d'abord que mediawiki.util soit chargé et que la page soit prête.
$.when(mw.loader.using('mediawiki.util'),$.ready).then(()=>{
// Motif d'utilisation générale :
// mw.util.addPortletLink( portletId, href, text /* Optional: , id, tooltip, accesskey, nextnode */ );
// Exemple : ajoutez un lien vers mediawiki.org dans la zone Outils, au-dessus du lien "Pages spéciales".
constnewElement=mw.util.addPortletLink(
'p-tb',
{
href:'https://www.mediawiki.org/',
text:'Link to mediawiki.org',
id:'t-mworg',
tooltip:'Go to www.mediawiki.org',
accesskey:'m',
nextnode:'#t-specialpages'
}
);
// L'ancienne manière de passer un nœud DOM fonctionne également
mw.util.addPortletLink(
'p-tb',
{
href:'https://www.mediawiki.org/',
text:'Link to mediawiki.org',
id:'t-mworg',
tooltip:'Go to www.mediawiki.org',
accesskey:'m',
nextnode:document.getElementById('t-specialpages')
}
);
});

Cette fonction vous permet de masquer un portlet (menu) de manière cohérente entre les habillages.

// Attendre d'abord que mediawiki.util soit chargé et que la page soit prête.
$.when(mw.loader.using('mediawiki.util'),$.ready).then(()=>{
/// masquer la boîte à outils
mw.util.hidePortlet('p-tb');
});

// Attendre d'abord que mediawiki.util soit chargé et que la page soit prête.
$.when(mw.loader.using('mediawiki.util'),$.ready).then(()=>{
mw.util.addSubtitle('Hello');
constsub=document.createElement('div');
sub.textContent=' world';
mw.util.addSubtitle(sub);
});

Généralement appelé en même temps que addSubtitle quand vous voulez rafraîchir le contenu des sous-titres. Étant donné que vous ne pouvez ajouter qu'au sous-titre, vous devez effacer son contenu existant si vous voulez redessiner.

// Attendre d'abord que mediawiki.util soit chargé et que la page soit prête.
$.when(mw.loader.using('mediawiki.util'),$.ready).then(()=>{
mw.util.clearSubtitle();
});

Un objet jQuery pour la zone globale du contenu de la page, indépendant de l'habillage utilisé. C'est par exemple #content de l'habillage Vector (#bodyContent avant la v1.20).

Ceci ne se rapporte pas à la zone qui reçoit le contenu de la page. Si vous souhaitez travailler avec cette zone de la page plutôt que la zone globale de contenu, vous devez utiliser $( '#mw-content-text' ) à la place.

Cette propriété est initialisée quand le document est prêt. Pour l'utiliser, attendez $.ready et assurez-vous d'avoir une dépendance de module sur mediawiki.util ce qui garantira que votre document est prêt à être utilisé après l'initialisation.

En raison de la nature d'initialisation minimale de cette propriété, il n'est pas recommandé de l'utiliser.

/* Ajouter du HTML au contenu de la page */
mw.util.$content.append('<h2>Lorem ipsum</h2><p>This section was just added to the bottom of the wiki page.</p>');
/* Compter le nombre de tables dans le contenu de la page qui ont la classe "wikitable" */
const$wikitablesInPage=mw.util.$content.find('table.wikitable');
if($wikitablesInPage.length){
alert('There are '+$wikitablesInPage.length+' wikitables on this page.');
}else{
alert('There are no wikitables on this page.');
}

Voici un exemple plus avancé impliquant le chargement de contenu supplémentaire avec une demande AJAX. Exécuter cet exemple sur une page différente de la page d'accueil.

/* Charge sur la page principale (ou toute page qui a cette fonction) par dessus AJAX (et peut être utile pour Special:BlankPage) */
// Placer un message de chargement en haut de la page
mw.util.$content.prepend('<p><em>Loading...</em></p><hr/>');
// Pour obtenir le contenu de l'article, utiliser #mw-content-text instead.
$('#mw-content-text').load(mw.util.getUrl('')+' #mw-content-text',function(){
mw.notify('Load complete!');
});

Cette fonction renvoie la valeur du paramètre d'URL spécifié. Par défaut, c'est l'adresse de la fenêtre actuelle qui est utilisée. Vous pouvez éventuellement passer une adresse personnalisée.

Elle renvoie null si le paramètre est absent. Renvoie une chaîne vide ("") si le paramètre était vide (comme dans /page.php?some=parameter&emptyparameter=&id=12).

// Supposons que nous affichons une ancienne version
// sur https://www.example.org/w/index.php?title=Hello_world&oldid=123
varoldid=mw.util.getParamValue('section');
// ^ '123'
// Si nous obtenons la valeur de '<a href>', par exemple un lien « ← Modification précétente »
varoldid=mw.util.getParamValue('oldid','https://www.example.org/w/index.php?title=Hello_world&oldid=500');
// ^ '500'

Cette fonction renvoie un booléen qui indique si la chaîne passée est une adresse IPv4 valide ou pas.

// true
mw.util.isIPv4Address('192.0.2.0');
// false (intervalle non valide d'adresses IPv4)
mw.util.isIPv4Address('192.0.2.0/24');
// false
mw.util.isIPv4Address('string');

Cette fonction vous permet de générer un message d'erreur ou d'avertissement. Cette méthode ne doit être appelée que dans les environnements où les styles Codex ont été chargés (par exemple, le module mediawiki.codex.messagebox.styles)

document.body.appendChild(mw.util.messageBox('Error occurred','error'));
document.body.appendChild(mw.util.messageBox('Warning occurred','warning'));
document.body.appendChild(mw.util.messageBox('Notice about something.,','notice'));

Cette fonction renvoie un booléen qui indique si la chaîne passée est une adresse IPv6 valide ou pas.

// true
mw.util.isIPv6Address('2001:db8:a:0:0:0:0:0');
// true
mw.util.isIPv6Address('2001:db8:a::');
// false (ce n'est pas un intervalle d'adresses IPV6)
mw.util.isIPv6Address('2001:db8:a::/32');
// false
mw.util.isIPv6Address('string');

Cette fonction renvoie une chaîne codée sous sa forme brute pour une utilisation dans les URL.

constexFooUrl='http://example.org/foo/'+mw.util.rawurlencode(mw.config.get('wgPageName'));

Pour construire les chaînes des requêtes, vous pouvez utiliser jQuery.param à la place :

constquery={
page:'MyPage',
value:mw.config.get('skin'),
action:'foo'
};
constfooQuery='http://example.com/stuff.php?'+$.param(query);

Cette fonction renvoie l'emplacement du script sur le wiki actuel. Semblable à wfScript dans GlobalFunctions.php .

Paramètres :

str - Nom du script (par exemple api), par défaut index.

jQuery.getJSON(mw.util.wikiScript('api'),{
format:'json',
action:'query',
titles:'Main Page',
prop:'revisions'
}).done(function(data){
// data.query
});

(obsolète depuis v. 1.34)

Voir mediawiki.RegExp du Guide de migration du ResourceLoader

• Documentation JS
• mediawiki.Title

Cela déclare le constructeur mw.Title avec ses multiples méthodes. Exemple de base :

constt=newmw.Title('Image: foo_bar baz.jpg');
t.getMain();// "Foo_bar_baz.jpg"
t.getNamespaceId();// 6
t.getNamespacePrefix();// "File:"

(obsolète depuis v. 1.43)

• Documentation JS
• mediawiki.Uri

Utiliser à la place l'interface d'URL native du navigateur.

(obsolète depuis v. 1.44)

• Documentation amont : https://momentjs.com/

Moment.js peut analyser, manipuler et formater les références temporelles des dates et des heures. La traduction est automatiquement chargée et configurée dans la langue actuelle de l'interface utilisateur.

constmoment=require('moment');
moment('2011-04-01 09:00').format('LLLL');
// "Friday, 1 April 2011 9:00 AM"
moment.version
//> "2.25.2"

• [[wmdoc:oojs/master/OO.html|Documentation JS ]]

OOjs est une bibliothèque qui fournit une façon cohérente d'implémenter une conception orientée objet en JS.

• Documentation JS

OOjs est un ensemble d'outils de l'interface utilisateur basés sur OOjs. Notez que oojs-ui est juste le nom historique du module. Voir le nom de tous les modules OOUI connus.

• jquery

Pour plus d'informations sur la présence de jQuery dans MediaWiki, voir jQuery . Pour plus d'information sur jQuery en général et dans toutes les fonctions de son noyau, consultez https://api.jquery.com/

ResourceLoader fournit jQuery en tant que partie de son environnement de base (le chargeur client utilise jQuery en interne), c'est pourquoi ce module est toujours chargé et ne doit pas (et en réalité il ne le peut pas) être chargé via ResourceLoader (comme dépendance ou assimilé).

• jquery.chosen

chosen est un greffon jQuery qui rend les boîtes de sélection longues et difficiles beaucoup plus conviviales. – harvesthq.github.io

En fait on transforme une sélection en liste déroulante avec la fonctionnalité d'autocomplétion par défaut, mais qui accepte aussi le regroupement et le marquage (c'est à dire les valeurs multiples).

$('select').chosen({/* options */});

• Documentation JS

Greffon qui extrait les informations sur le navigateur du client, le moteur de mise en page et le système d'exploitation.

Voici quelques exemples :

if($.client.profile().layout=='gecko'&&$.client.profile().platform=='linux'){
// Ceci ne fonctionnera que sur les navigateurs Gecko (comme Mozilla Firefox) sous Linux.
}
if($.client.profile().name=='msie'){
// Seulement pour le bon vieux Internet Explorer
}
// Raccourci
constprof=$.client.profile();
if(prof.name=='firefox'&&prof.versionBase=='2'&&prof.platform=='win'){
// Cible les navigateurs Mozilla Firefox 2.x sous Windows
}

Vérifier jquery.client.js pour les valeurs possibles du nom des navigateurs, des moteurs de mise en page et des plateformes.

• code source (depuis MediaWiki 1.40)

Ce module a été supprimé en MediaWiki 1.41 via Gerrit change 964085.

(obsolète depuis v. 1.41)

• {{1ドル|text=Documentation JS}}

Pour utiliser les méthodes de cookie jQuery, charger le module mediawiki.cookie . Nous recommandons d'utiliser l'interface mw.cookie car elle applique automatiquement les paramètres appropriés basés sur la configuration du site MediaWiki (comme le domaine, le chemin et la rétention).

Ce greffon vous permet de créer, de lire et de supprimer les cookies.

// Créer un cookie (simple, page ou chemin actuel)
$.cookie('myName','Flower');
// Créer un cookie (options supplémentaires)
$.cookie('myName','Flower',{
expires:7,// expires in 7 days
path:'/'// domain-wide, entire wiki
});
// Lire un cookie
constname=$.cookie('myName');
// Supprimer un cookie
// Obsolète depuis la v1.2, utiliser $.removeCookie( 'foo' ) à la place
$.cookie('myName',null);
$.removeCookie('foo')

Lorsque vous supprimez un cookie, vous devez utiliser le même chemin et le même domaine que lorsque le cookie a été créé.

• jquery.i18n

Voir aussi Manuel:Eléments repliables .

• Documentation JS
• jquery.makeCollapsible

Permet de replier des éléments. Prend en charge de nombreuses variantes telles que :

Simple

Ajoutez mw-collapsible à un élément (un <div> par exemple) avec un certain contenu et sauvegardez la page. Le contenu interne de cet élément sera traité comme du contenu masquable. Préfixe l'élément, avant le contenu repliable, c'est un lien de basculement avec un libellé traduit (collapsible-expand, collapsible-collapse)

Etat initial

En ajoutant mw-collapsed comme classe supplémentaire vous permettez que l'élément sera initialement replié au chargement de la page.

Étiquette personnalisée

^{HTML5 seulement} En utilisant les attributs data-collapsetext et data-expandtext on peut définir un texte personnalisé pour les libellés de basculement ajoutés par le script. Si l'ajout est en wikicode elles peuvent être initialisées via un message traduit de cette façon :
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">

Basculement à distance

Si vous ne voulez pas que le script mette le lien de commutation par défaut (qu'il soit ou non avec une étiquette personnalisée) dans votre élément, vous pouvez le faire vous-même. Cela peut se faire n'importe où, à l'intérieur de l'élément repliable, ou à l'extérieur. Sa relation avec l'élément repliable est détectée en utilisant un attribut ID de préfixe mw-customcollapsible et un attribut de la classe correspondante , préfixé par mw-customtoggle, respectivement pour l'élément repliable et pour le lien de basculement.

Entrée :

{| class="wikitable"
! Foo
! Bar
|-
| Lorem
| Ipsum
|-
| Informations supplémentaires
|<!--
-->
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Début
! Haut
|-
| cellule
| contenu
|-
| Ce tableau est repliable
| car il a la classe "mw-collapsible"
|-
| Il était initialement replié
| parce qu'il a la classe "mw-collapsed"
|}<!--
-->
|-
|}
<div class="toccolours mw-collapsible" style="width: 400px;">
Ce texte est repliable. {{Lorem}}
</div>

Sortie :

Exemple : masquer l'élément repliable par défaut, l'élément de basculement se trouve en dehors de celui-ci

Entrée :

<div class="mw-customtoggle-myDivision" style="background:#e0e8ff">Cliquer ici pour basculer cet élément</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">Lorem ipsum dolor sit amet...</div>
</div>
<div class="mw-customtoggle-myDivision" style="background:#e8ffe0">Cliquer ici aussi pour basculer cet élément !</div>

Sortie :

Pour d'autres exemples réels, voir Wikipedia de test - page de test du repli.

• module-jquery.suggestions

• module-jquery.spinner

(obsolète depuis v. 1.34)

• jquery.tabIndex

• jquery.tablesorter

• module-jquery.textSelection
• resources/src/jquery/jquery.textSelection.js

mw.util.jsMessage('The selected text is "'+mw.html.escape($('#wpTextbox1').textSelection('getSelection'))+'".');

(obsolète depuis v. 1.28)

• jquery.tipsy

La bibliothèque sera disponible dans un avenir prévisible, mais elle redéfinira les fonctionnalités de OOUI et fournira une expérience sub-optimale aux utilisateurs sur mobiles. Lorsque jQuery.tipsy est utilisé, nous encourageons les développeurs à inspecter OOUI et à commenter la façon dont la bibliothèque pourrait être améliorée pour prendre en charge le cas d'utilisation fourni par jquery.tipsy.

Page d'exemple; page de projet jQuery

mw.loader.using('jquery.tipsy',()=>{
$someObject.prepend(
$('<span>',{
title:'Some tipsy test title'
})
.append('Hover here')
.tipsy({
option:'value',
option2:'value2'
})
);
});

(obsolète depuis v. 1.29) Utiliser Codex à la place.

Pour plus d'informations sur l'interface utilisateur de jQuery et les démonstrations, voir http://jqueryui.com/.

Ce module charge les scripts du site à partir des pages :

• MediaWiki:Common.js,
• et MediaWiki:Vector.js (selon l'habillage actuel).

Si $wgUseSiteJs est désactivé par la configuration, alors le module est vide.

Ce module charge :

• User:<name>/common.js,
• User:<name>/vector.js (en fonction de l'habillage actuel),
• MediaWiki:Group-user.js,
• MediaWiki:Group-<groupname>.js (pour chaque groupe, l'utilisateur actuel est membre par exemple de : sysop, bureaucrat etc.)

Si $wgAllowUserJs est désactivé dans la configuration, alors les sous-pages « User » ne sont pas incluses.

Si $wgUseSiteJs est désactivé dans la configuration, alors les sous-pages « MediaWiki:Group- » ne sont pas incluses.

• définitions TypeScript pour les modules listés ici (fonctionne dans les projets JavaScript et dans les IDE populaires)

• ResourceLoader/fr
• JavaScript/fr

• Pages using duplicate arguments in template calls