Utilisateur:Dr Brains/Arbre.js

Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;
Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
//<syntaxhighlight lang=javascript>//<pre><nowiki>


// **********************************************************
// TEXTES ; todo : permettre la personnalisation des "title"

var Arbre_Text = new Array();

Arbre_Text["ShowTreeTitle"] = "Tout développer";
Arbre_Text["HideTreeTitle"] = "Tout fermer";
Arbre_Text["ShowTitle"] = "Ouvrir";
Arbre_Text["HideTitle"] = "Fermer";
Arbre_Text["ShowText"] = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Pictogram_voting_support.svg/12px-Pictogram_voting_support.svg.png" width="12" heigth="12" alt="' + Arbre_Text["ShowTitle"] + '" />';
Arbre_Text["HideText"] = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Pictogram_voting_oppose.svg/12px-Pictogram_voting_oppose.svg.png" width="12" heigth="12" alt="' + Arbre_Text["HideTitle"] + '" />';
 

// **********************************************************
// LANCEMENT

$(Arbre_Init);
 

// **********************************************************
// INITIALISATION

function Arbre_Init(Element){
    if(!Element) Element = document
    var Trees = getElementsByClassName(Element, "div", "treeview");
    for(var a=0,l=Trees.length;a<l;a++){
        var Tree = Trees[a];
        if($(Tree).hasClass("NoDynamicTree")) continue;
        Tree.id = "treeview_" + a;
        var Deepth = parseInt(Tree.className.replace(/.*treeviewDeep/g, "").replace(/ .*/g, ""));
        if(Deepth == "NaN" || Deepth == NaN) Deepth == -1;
        var ToggleAllP = document.createElement('p');
        var ToggleAllLink = document.createElement('a'); 
        ToggleAllLink.href = "javascript:Arbre_ToggleAllLis("+a+");"
        if(Deepth == -1){
            ToggleAllLink.title = Arbre_Text["HideTreeTitle"]
            ToggleAllLink.innerHTML = Arbre_Text["HideTreeTitle"]
        }else{
            ToggleAllLink.title = Arbre_Text["ShowTreeTitle"]
            ToggleAllLink.innerHTML = Arbre_Text["ShowTreeTitle"]
        }
        ToggleAllP.appendChild(ToggleAllLink);
        Tree.insertBefore(ToggleAllP, Tree.firstChild);
        var WithChildLis = new Array();
        var WithoutChildLis = new Array();
        var branche = Tree.getElementsByTagName('li');
        for(var b=0,m=branche.length;b<m;b++){
            var ThisLi = branche[b];
            ThisLi.id = "treeviewPart_" + a + "_" + b;
            $(ThisLi).addClass("treeviewPart_level" + Arbre_GetLevel(ThisLi, Tree));
            var HasChild = ThisLi.getElementsByTagName('ul')[0];
            if(HasChild){
                WithChildLis.push(ThisLi);
            }else{
                
                WithoutChildLis.push(ThisLi);
            }
        }
        Arbre_AddToggleLinks(WithChildLis, true);
        Arbre_AddToggleLinks(WithoutChildLis, false);
        if(Deepth!=-1){
            for(var c=0,n=WithChildLis.length;c<n;c++){
                var ID = WithChildLis[c].id.split("treeviewPart_").join("");
                var LiDeepth = parseInt(WithChildLis[c].className.replace(/.*treeviewPart_level/g, "").replace(/ .*/g, ""));
                if(LiDeepth>Deepth) Arbre_ToggleThisLi(ID);
            }
        }
    }
}
 

// **********************************************************
// DETERMINATION PROFONDEUR D'UN LI

function Arbre_GetLevel(Li, Parent){
     var Deepth = 1;
     var Node = Li.parentNode;
     while(Node != Parent){
          if(Node.tagName){
               if(Node.tagName.toLowerCase() == "li"){
                    Deepth++
               }
          }
          Node = Node.parentNode;
     }
     return Deepth;
}


// **********************************************************
// AJOUT DES LIENS
 
function Arbre_AddToggleLinks(Lis, NotEmpty){
     for(var d=0,r=Lis.length;d<r;d++){
          var Li = Lis[d];
          var ID = Li.id.split("treeviewPart_").join("");
          var Link;
          if(NotEmpty){
               $(Li).addClass("Collapsible");
               Link = document.createElement('a');
               Link.id = "treeviewPartLink_"+ID;
               Link.href = "javascript:Arbre_ToggleThisLi('"+ID+"');";
               Link.title = Arbre_Text["HideTitle"];
               Link.innerHTML = Arbre_Text["HideText"];
               Li.insertBefore(document.createTextNode(" "), Li.firstChild);
               Li.insertBefore(Link, Li.firstChild);
          }else{
               Link = document.createElement('span');
               Link.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;"
               Li.insertBefore(Link, Li.firstChild);
          }
     }
}


// **********************************************************
// ENROULAGE OU DÉROULAGE D'UNE BRANCHE

function Arbre_ToggleThisLi(Index, state){
     var Link = document.getElementById("treeviewPartLink_"+Index);
     var Li = document.getElementById("treeviewPart_"+Index);
     var Ul = Li.getElementsByTagName('ul')[0];
     if(!Li || !Link || !Ul) return;
 
     if(Link.title == Arbre_Text["HideTitle"] || (state!="undefined" && state === true) ){
          Link.innerHTML = Arbre_Text["ShowText"]
          Link.title = Arbre_Text["ShowTitle"]
          Ul.style.display = "none"
     }else if(Link.title == Arbre_Text["ShowTitle"] || (state!="undefined" && state === true) ){
          Link.innerHTML = Arbre_Text["HideText"]
          Link.title = Arbre_Text["HideTitle"];
          Ul.style.display = "block";
     }
}


// **********************************************************
// ENROULAGE OU DÉROULAGE DE L'ARBRE COMPLET

function Arbre_ToggleAllLis(Index){
     var Tree = document.getElementById("treeview_"+Index);
     var Link =  document.getElementById("treeview_ToggleAllLink_"+Index);
     if(!Tree || !Link) return;
     var state;
     if(Link.title==Arbre_Text["ShowTreeTitle"]){
          Link.title==Arbre_Text["HideTreeTitle"];
          Link.innerHTML==Arbre_Text["HideTreeTitle"];          
          state == true;
     }else{
          Link.title==Arbre_Text["ShowTreeTitle"];
          Link.innerHTML==Arbre_Text["ShowTreeTitle"];
          state == false;
     }
     var AllLis = Tree.getElementsByTagName('li');
     for(var a=0,l=AllLis.length;a<l;a++){
          var ThisLi = AllLis[a];
          if(!$(ThisLi).hasClass("Collapsible")) continue;
          var ID = ThisLi.id.split("treeviewPart_").join("");
          Arbre_ToggleThisLi(ID, state);
     }

}


//</nowiki></pre></syntaxhighlight>