• [^] # Re: Cookies

    Posté par . En réponse au message Menu arborescent pliable et conservation de l'état lors de la navigation. Évalué à 2.

    Bien sûr. Je tiens cependant à dire que c'est la première fois de ma vie que je fais du javascript, ce n'est certainement pas dans les règles de l'art ni sans bug.

    Voilà la partie javascript (les deux premières fonctions ne sont pas de moi) :

    <script type="text/javascript">
    <!--

    function setcookie(name, value, expire) {
    var timestamp=new Date(expire);
    document.cookie=name + "=" + escape(value) + "; expires=" + timestamp.toGMTString();
    }

    function getcookie(name) {
    var cookies = document.cookie.split(/;/);
    for(var i=0; i < cookies.length; i++){
    var mycook = cookies[i].split(/=/);
    if(mycook[0]==name)return unescape(mycook[1]);
    }
    }

    function getOpenMenuNodes(d,list) {
    if (d) {
    var nodes = d.childNodes;

    for(var i=0;i<nodes.length;i++) {
    if(nodes[i].hasChildNodes()) getOpenMenuNodes(nodes[i],list);
    if(nodes[i].className == "submenu" && nodes[i].style.display == "block") list.push(nodes[i].id);
    }
    }
    }

    function saveMenu() {
    var list = new Array();
    getOpenMenuNodes(document.getElementById("menu"),list);
    setcookie("menustate",list,(new Date(2042, 12).getTime()));
    }

    function restoreMenu() {
    var openNodes = getcookie("menustate");
    openNodes = new String(openNodes.toString());
    openNodes = openNodes.split(',');

    if (openNodes != undefined)
    for (var i in openNodes) {
    node = document.getElementById(openNodes[i]);
    node.style.display = "block";
    }
    }

    function showhide(id) {
    var d = document.getElementById(id);
    if (d) {
    if (d.style.display=="block") {
    d.style.display="none";
    } else {
    d.style.display="block";
    }
    }
    }
    //-->
    </script>


    Mon menu est contruit de la sorte :


    <li class='menu-top'><span onclick="javascript:showhide('menu-a');">A</span>
    <ul class='submenu' id='menu-a'>
    <li class='menu-leaf'><a href="?page=AA">AA</a></li>
    <li class='menu-dir'><span onclick="javascript:showhide('menu-ab');">AB</span>
    <ul class='submenu' id='menu-ab'>
    <li class='menu-leaf'><a href="?page=ABA">ABA</a></li>
    <li class='menu-leaf'><a href="?page=ABB">ABB</a></li>
    </ul>
    </li>
    <li class='menu-leaf'><a href="?page=AC">AC</a></li>
    <li class='menu-leaf'><a href="?page=AD">AD</a></li>
    </ul>
    </li>
    <li class='menu-top'><span onclick="javascript:showhide('menu-b');">B</span>
    <ul class='submenu' id='menu-b'>
    <li class='menu-leaf'><a href="?page=BA">BA</a></li>
    <li class='menu-leaf'><a href="?page=BB">BB</a></li>
    </ul>
    etc.


    Il suffit alors d'avoir une balise body comme ceci et le tour est joué:

    <body onLoad="javascript:restoreMenu();" onUnLoad="javascript:saveMenu();">


    Ça marche parfaitement dans Firefox. En revanche avec Konqueror, le menu n'est pas sauvé lorsqu'on ferme l'onglet ou le navigateur, cela marche cependant normalement pour la navigation. C'est apparemment à cause de ce bug : http://bugs.kde.org/show_bug.cgi?id=78331 , pour les kdeistes auxquels il reste des votes ... Opera souffre du même défaut apparemment. Je n'ai pas testé sous IE par flemme de rebooter l'ordi.