Aide:Gadget-Barre de luxe

Le gadget Barre de luxe est un gadget JavaScript, activable par tout utilisateur enregistré dans ses préférences, qui ajoute toute une panoplie de boutons pour faciliter l’édition des pages. Il est compatible avec la barre d’outils de modification.

Ce que fait ce gadget

Il ajoute une collection de boutons pour aider la contribution. Si vous utilisez la barre d’outils de modification, ils se situent dans l’onglet « Avancé ». Si vous ne l’utilisez pas, les boutons apparaitront au-dessus de la zone d’édition.e

Liste exhaustive des boutons

Image barre d’outils	Action	Groupe	Caché si barre d’outils activée
	Apostrophe typographique	Format	non
	Espace insécable	Format	non
	Guillemets français	Format	non
-	Redirection (déjà présent dans la barre d’outils)	-	oui
	Lien vers Wikipédia	Liens	non
	Message de remerciement à une IP	Messages	non
	Message de bienvenue	Messages	non
	Message d’avertissement débutant	Messages	non
	Message vandale	Messages	non
	Message vandale 2	Messages	non
	Message de blocage	Messages	non
	Message spam	Messages	non
	Message spam 2	Messages	non
	Message copyvio	Messages	non
	Message copyvio 2	Messages	non
	Modèle de suppression immédiate	Bandeaux	non
	Bandeau de proposition de suppression	Bandeaux	non
	Patron d’entrée en français long	Patrons	non
	Patron d’entrée en français court	Patrons	non
	Section références	Patrons	non
	Modèle {{source}}	Insérer	non
	Modèle {{Autres projets}}	Liens	non
	Modèle {{refnec}}	Modèles	non
	Modèle {{?}}	Modèles	non

Installation

Cochez la case suivante dans vos préférences (onglet « Gadget », section « Modification des pages ») :

Barre de luxe : ajoute des boutons pour insérer des modèles pré-remplis en un clic (pour éditer une page, avertir les débutants, etc.). Nécessite de vider le cache du navigateur. (page d’aide) (version de base) (version intégrée à la barre d’édition)

C’est tout

Ajout de boutons personnalisés

Deux type de boutons sont disponibles :

Un premier qui ajoute du texte autour du texte sélectionné,
Un deuxième qui exécute une fonction personnalisée pour faire des traitements plus complexes.

Pour ajouter des boutons, il faut vous modifier votre page Utilisateur:XXX/common.js et y insérer le code qui définira les boutons et les ajoutera :

var bdl_buttons = [
  // Définition des boutons.
];

La liste indiquée par // Définition des boutons. est l’endroit où les boutons doivent être définis.

Pour définir un bouton, il faut déclarer un objet avec les attributs suivants :

imageFileName Le chemin de l’icone du bouton sur Commons si la barre d’outils de modification est désactivée (après « commons/ »). Taille recommandée : 23×22 pixels. Si l’extension n’est pas renseignée, le fichier sera considéré comme étant un .PNG.
imageFileNameOOUI Le chemin de l’icone du bouton sur Commons pour la barre d’outils de modification (après « commons/ »). Taille recommandée : 24×24 pixels. Optionnel si vous n’utilisez pas cette barre d’outils. S’il n’est pas défini et que vous utilisez la barre d’outils, l’image définie par imageFileName sera utilisée à la place. Si l’extension n’est pas renseignée, le fichier sera considéré comme étant un .PNG. Les images ne sont pas redimensionnées automatiquement.
tooltip Le texte apparaissant dans l’infobulle au survol du bouton.
buttonId L’identifiant unique du bouton. Il doit n’utiliser que les 26 lettres de l’alphabet, le tiret (-) ou des chiffres.
group Le groupe de la barre d’outils de modification dans lequel ranger le bouton. Optionnel si vous n’utilisez pas cette barre d’outils. Les groupes disponibles sont :
- format : « Format »
- insert : « Insérer »
- size : Boutons pour modifier la taille du texte
- links : « Liens »
- section_templates : « Patrons »
- messages : « Messages »
- headers : « Bandeaux »
- html_tags : « Balises »
toolbarIgnore Si défini avec la valeur true, le bouton ne sera pas ajouté à la barre d’outils de modification.

Bouton simple

Ce type de bouton nécessite la définition de deux autres attributs :

tagOpen Le texte à insérer avant le texte sélectionné.
tagClose Le texte à insérer après le texte sélectionné.

Exemple complet (bouton insérant une balise <includeonly>) :

{
  tagOpen: "<includeonly>",
  tagClose: "</includeonly>",
  imageFileName: "9/9f/Button_nowiki_symbol.png",
  imageFileNameOOUI: "thumb/8/8c/OOjs_UI_icon_markup.svg/24px-OOjs_UI_icon_markup.svg.png",
  tooltip: "Balises includeonly",
  buttonId: "includeonly-tag",
  group: "html_tags",
},

Bouton avec fonction

Ce type de bouton nécessite la définition de trois autres attributs :

promptText Le texte à afficher dans le popup de saisie.
promptDefault Le valeur par défaut du champ de texte du popup de saisie.
action La fonction à exécuter après que l’utilisateur a validé le popup de saisie, qui retourne le texte qui remplacera celui sélectionné par l’utilisateur. Elle prend deux paramètres :
- selectedText Le texte sélectionné par l’utilisateur.
- inputText Le texte saisi par l’utilisateur dans le popup.

Exemple complet (bouton pour insérer le modèle {{pron}} dans la langue voulue) :

{
  action: function (selectedText, inputText) {
    return "{{pron|" + selectedText + "|" + inputText + "}}";
  },
  promptText: "Langue",
  promptDefault: "fr",
  imageFileName: "1/13/Button_API_ʃ.png",
  imageFileNameOOUI: "thumb/0/0a/OOjs_UI_icon_feedback-ltr.svg/24px-OOjs_UI_icon_feedback-ltr.svg.png",
  tooltip: "Prononciation",
  buttonId: "pron",
  group: "insert",
},

Exemple complet avec les boutons précédents

var bdl_buttons = [
  {
    action: function (selectedText, inputText) {
      return "{{pron|" + selectedText + "|" + inputText + "}}";
    },
    promptText: "Langue",
    promptDefault: "fr",
    imageFileName: "1/13/Button_API_ʃ.png",
    imageFileNameOOUI: "thumb/0/0a/OOjs_UI_icon_feedback-ltr.svg/24px-OOjs_UI_icon_feedback-ltr.svg.png",
    tooltip: "Prononciation",
    buttonId: "pron",
    group: "insert",
  },
  {
    tagOpen: "<includeonly>",
    tagClose: "</includeonly>",
    imageFileName: "9/9f/Button_nowiki_symbol.png",
    imageFileNameOOUI: "thumb/8/8c/OOjs_UI_icon_markup.svg/24px-OOjs_UI_icon_markup.svg.png",
    tooltip: "Balises includeonly",
    buttonId: "includeonly-tag",
    group: "html_tags",
  },
];

Ancienne syntaxe

L’ancienne syntaxe de définition est toujours prise en charge mais déconseillée car moins lisible.

Le bouton est défini dans un tableau plutôt que dans un objet :

Indice 0 : Le texte à ajouter avant la sélection.
Indice 1 : Le texte à ajouter après la sélection.
Indice 2 : L’URL de l’icône sur Commons (après « commons/ »).
Indice 3 : Le texte qui apparaît au survol de la souris.
Indice 4 : L’identifiant unique du bouton. Il doit n’utiliser que les 26 lettres de l’alphabet latin, le tiret (-) ou des chiffres.

Exemple complet (bouton pour insérer une redirection) :

[
  "#REDIRECT[[",
  "]]",
  "4/47/Button_redir",
  "Redirection",
  "redirect",
],

Signaler un problème ou suggérer une amélioration

→ voir Discussion MediaWiki:Gadget-Barre_de_luxe.js

Annexe — Pour les développeurs du gadget

Message système (le texte de description dans la page des préférences)

MediaWiki:Gadget-Barre de luxe

Code JavaScript

MediaWiki:Gadget-Barre de luxe.js

Requêtes des utilisateurs