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 seule	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 supportée mais déconseillée car moins lisible.

Le bouton est défini dans un tableau plutot 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’icone sur Commons (après « commons/ »).
• Indice 3 : Le texte qui apparait au survol de la souris.
• Indice 4 : L’identifiant unique du bouton. Il doit n’utiliser que les 26 lettres de l’alphabet, 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

• Discussion MediaWiki:Gadget-Barre de luxe.js
• Wiktionnaire:Demandes aux administrateurs