Aller au contenu

MediaWiki:JSScripts/Toolbar

Un livre de Wikilivres.

/*


Lors de l'édition d'une page, pourquoi rassembler tous les boutons en un seul groupe, le plus souvent mal ordonné, pour finir par ne plus retrouver le bouton recherché ?

Ce script permet la création de barres d'outils séparées. Chaque barre possède un titre et peut être affichée ou cachée (mémorisation par cookie).

Un exemple :

Utilisation

Dans votre script monobook.js :

  1. Ajoutez les 2 lignes de code suivantes :
    obtenir("Toolbar");
    obtenirCss("Toolbar");
  2. Créez une fonction de configuration pour cette extension :
    function maBarreDOutil()
    {
    ...
    }
    addSetup("Toolbar",maBarreDOutil);
    Vous pouvez créer une fonction de configuration pour chaque nouvelle barre d'outils ou créer toutes vos barres d'outils dans la même fonction de configuration.
  3. Dans cette fonction, créez la barre d'outils en appelant la fonction createToolbar(id, titre) en lui attribuant un identifiant unique et un titre.
    • Exemple: var mabarre = createToolbar( "MYBAR" , "Ma barre d'outils" );
  4. Ajouter des boutons à la barre, en appelant les méthodes de l'objet créé :
    addButton(imageFile, speedTip, tagOpen, tagClose, sampleText, summary)
    Ajouter un bouton d'édition.
    • Exemple: mabarre.addButton(url_wpen+'c/c8/Button_redirect.png','Redirection',"#REDIRECT [[","]]",'nom de la destination');
    addModel(imageFile, text, summary)
    Ajouter un bouton d'insertion de modèle.
    • Exemple: mabarre.addModel(url_wpfr+"e/eb/Button_accueilB.png","{{subst:" + "Bienvenue" + "}}" + "--" + "~~" + "~~", "Bienvenue !");
    addScript(imageFile, speedTip, code, summary)
    Ajouter un bouton appelant un code javascript.
    • Exemple: mabarre.addScript(url_wpcm+"c/cb/Button_wikipedia.png", "Importation des liens de wikipédia", "replaceExtLinks('w')");

Ces méthodes ont des paramètres communs :

imageFile
Le nom de l'image du bouton (obligatoire),
speedTip
Texte affiché lors du survol du bouton par la souris (obligatoire),
summary
Texte à placer dans le champ "Résumé" (optionnel).

Exemple de script

obtenir("Toolbar");
obtenirCss("Toolbar");

function maBarreDOutil()
{
    var mabarre = createToolbar( "MYBAR" , "Ma barre d'outils" );

    mabarre.addButton(url_wpen+'c/c8/Button_redirect.png',
        'Redirection', "#REDIRECT [[","]]",'nom de la destination');

    mabarre.addModel(url_wpfr+"e/eb/Button_accueilB.png",
        "{{subst:" + "Bienvenue" + "}}" + "--" + "~~" + "~~", "Bienvenue !");

    mabarre.addScript(url_wpcm+"c/cb/Button_wikipedia.png",
        "Importation des liens de wikipédia", "replaceExtLinks('w')");
}
addSetup("Toolbar",maBarreDOutil);

Barres d'outils prédéfinies

Voici une liste des extensions créant une barre d'outils utilisant ce script :

Source

 */


/*********************************************/
/* Barres d'outils séparées (auteur: DavidL) */
/*********************************************/

function SetVar(name,value)
{
    var expires=new Date();
    expires.setFullYear(expires.getFullYear()+1);
    document.cookie=name+"="+escape(value)+
        ";expires="+expires.toGMTString()+";path=/";
}

function GetVar(name,defvalue)
{
    var s=";"+document.cookie.replace(/ /g,"")+";";
    var i=s.indexOf(";"+name+"=");
    if (i<0) return defvalue;
    i+=name.length+2;
    return unescape(s.substring(i,s.indexOf(";",i)));
}

var visible_toolbars=GetVar("toolbars","").split("/");
function findToolbar(id)
{
    for(var i in visible_toolbars)
        if (visible_toolbars[i]==id) return i;
    return -1;
}

// Créer/Obtenir le conteneur de barres d'outils
function getToolbarContainer()
{
var e=document.getElementById("toolbarcontainer");
if (e!=null) return e;
else
{
    var e=document.getElementById("toolbar");
    if (e==null) return null;
    var tc=document.createElement("div");
    tc.setAttribute("id","toolbarcontainer");
    var p=e.parentNode;
    e=p.replaceChild(tc,e);
    var alls=document.createElement("div");
    alls.setAttribute("id","all_toolbars");
    alls.appendChild(document.createTextNode("Barres d'outils :"));
    tc.appendChild(alls);
    tc.appendChild(e);
    return tc;
}
}

function addToolbarButton(toolbar, imageFile, speedTip, tagOpen, tagClose, sampleText, summary)
{
	toolbar.buttons.push(
		{"imageFile": imageFile,
		 "speedTip": speedTip,
		 "tagOpen": tagOpen,
		 "tagClose": tagClose,
		 "sampleText": sampleText,
		 "summary": summary});
}

function addToolbarButtonScript(toolbar, imageFile, speedTip, jsCode, summary)
{
	toolbar.buttons.push(
		{"imageFile": imageFile,
		 "speedTip": speedTip,
		 "jscode": jsCode,
		 "summary": summary});
}

function showToolbar(id,n)
{
    var t=document.getElementById(id);
    if (n==2) n=(t.style.display&&(t.style.display=="none"))?1:0;
    t.style.display=(n==0)?"none":"block";
    var ti=findToolbar(id);
    if (n==1) {if (ti<0) visible_toolbars.push(id);}
    else if (ti>=0) visible_toolbars.splice(ti,1);
    SetVar("toolbars",visible_toolbars.join("/"));
    return false;
}

var toolbars=[];
// Créer une nouvelle barre d'outils
function createToolbar(id,title)
{
    var node=document.createElement("div");
    node.setAttribute("id",id);
    node.setAttribute("title",title);
    node.setAttribute("class","toolbar_perso");
    node.setAttribute("className","toolbar_perso");

    var titlenode=document.createElement("div");
    titlenode.setAttribute("class","toolbartitle");
    titlenode.setAttribute("className","toolbartitle");
    titlenode.appendChild(document.createTextNode(title));
    node.appendChild(titlenode);
    if (findToolbar(id)<0) node.style.display="none";

    var link=document.createElement("a");
    link.setAttribute("id",id+"_link");
    link.setAttribute("href","#");
    link.setAttribute("onclick","return showToolbar('"+id+"',2);");
    if (document.all)
    { link.onclick=function(){return showToolbar(id,2);} }
    link.setAttribute("title","montrer / cacher");
    link.appendChild(document.createTextNode("["+title+"]"));

    var toolbar={ "buttons": [], "title": title, "node": node, "nodelink": link,
        "addButton": function(imageFile, speedTip, tagOpen, tagClose, sampleText, summary)
            {addToolbarButton(this, imageFile, speedTip, tagOpen, tagClose, sampleText, summary);},
        "addModel": function(imageFile, text, summary)
            {addToolbarButton(this, imageFile, summary, '', text, '', summary);},
        "addScript": function(imageFile, speedTip, code, summary)
            {addToolbarButtonScript(this, imageFile, speedTip, code, summary);}
        };
    toolbars.push(toolbar);
    return toolbar;
}

/*
function mwInsertEditButton(parent, item) {
    var image = document.createElement("img");
    image.width = 23;
    image.height = 22;
    image.src = item.imageFile;
    image.border = 0;
    image.style.cursor = "pointer";
    var ref = document.createElement("a");
    var href;
    if (item.jscode != null) href="javascript:"+item.jscode+";";
    else href="javascript:insertTags(\"" + item.tagOpen + "\",\"" + item.tagClose + "\",\"" + item.sampleText + "\");";
    if (item.summary != null)
        href+="javascript:changeSummary(\"" + item.summary + "\");";
    ref.setAttribute("href", href);
    ref.setAttribute("title", item.speedTip);
    ref.appendChild(image);
 
    parent.appendChild(ref);
}
*/

function openToolbars()
{
    if (toolbars.length>0)
    {
        var tc=getToolbarContainer();
        if (tc==null) return;
        var tca=document.getElementById("all_toolbars");
        for(var i in toolbars)
        {
            var t=toolbars[i];
            tc.appendChild(t.node);
            tca.appendChild(document.createTextNode(" "));
            tca.appendChild(t.nodelink);
            for(var j in t.buttons)
                mwInsertEditButton(t.node,t.buttons[j]);
        }
    }
    toolbars=[];
}
addOnloadHook(openToolbars);
doSetup("Toolbar");

/*********************************************/
/*

*/

Récupérée de « https://fr.wikibooks.org/w/index.php?title=MediaWiki:JSScripts/Toolbar&oldid=563901 »