User:Amit6/collapselist4.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* -----------------------------------------------------------------------------------
                functions to build the tree on document load
   ----------------------------------------------------------------------------------- */


function getRandomID() {
    myRandomID = '';
    for (irandom=0;irandom<10;irandom++) {
        p = Math.floor(Math.random()*26);
        myRandomID += 'abcdefghijklmnopqrstuvwxyz'.substring(p,p+1);
    }
    return myRandomID;
}

function makeaqtree(ul,level) {
    var cn=ul.childNodes;
    var myReplacementNode = document.createElement("div");
    
    // Walk through all LIs that are subordinate to this UL
    for (var icn=0;icn<cn.length;icn++) {
        // Check for validity
        if (cn[icn].nodeName.toUpperCase() != 'LI') {
            if (cn[icn].nodeName == '#text') {
                var isBlankNV = cn[icn].nodeValue.replace(/[\f\n\r\t\v ]*/,'');
                if (isBlankNV.length > 0) {
                    alert("UL structure is invalid; a UL contains a text node: '"+cn[icn].nodeValue+"'");
                    return;
                }
            } else {
                alert("UL structure is invalid; a UL contains something other than an LI (a "+cn[icn].nodeName+", in fact)");
                return;
            }
        }
        
        // We know that the node we have now is an LI
        // Walk through it and get all its content; add that content to a div
        // If the content contains a UL, then:
        //    call makeaqtree with the UL; this will create its content as a div and return that div
        //    our content div must get an onClick handler that shows/hides the id'ed div
        
        var contentNodes = cn[icn].childNodes;
        var thereIsASubMenu = 0;
        var subNodes = new Array();
        for (var icontentNodes=0;icontentNodes<contentNodes.length;icontentNodes++) {
            var thisContentNode = contentNodes[icontentNodes];
            if (thisContentNode.nodeName == 'UL') {
                var subMenu = makeaqtree(thisContentNode,level+1);
                thereIsASubMenu = 1;
            } else {
                // get a copy of this node ready to add to our new tree
                subNodes[subNodes.length] = thisContentNode.cloneNode(true);
            }
        }
        
        // Create the container element to put all the subnodes in (we will then add this
        //   container element to our new tree)
        // If there's a submenu, then the container element is an anchor; if not, it's a div
        if (thereIsASubMenu) {
            var containerDiv = document.createElement("div");
            var containerElement = document.createElement("a");
            containerDiv.appendChild(containerElement);
            containerElement.setAttribute("attachedsection",subMenu.getAttribute("id"));
            containerElement.setAttribute("href","#");
            containerElement.onclick = aqtree2ToggleVisibility;
            containerElement.className = "aqtree2link";
            
            var icon = document.createElement("span");
            icon.innerHTML = aqtree2_expandMeHTML;
            icon.className = 'aqtree2icon';
            icon.id = 'icon-'+subMenu.id;
            containerElement.appendChild(icon);
        } else {
            var containerElement = document.createElement("div");
            var containerDiv = containerElement;

            if (subNodes.length > 0) {
                var icon = document.createElement("span");
                icon.innerHTML = aqtree2_bulletHTML;
                icon.className = 'aqtree2icon';
                containerElement.appendChild(icon);
            }
        }
        
        // Add all subnodes to the container element
        for (isubNodes=0;isubNodes<subNodes.length;isubNodes++) {
            sN = subNodes[isubNodes];
            if (sN.nodeName == '#text' && sN.nodeValue.replace(/[ \v\t\r\n]*/,'').length == 0) continue;
            containerElement.appendChild(sN);
        }
        
        if (thereIsASubMenu) {
            // now add the submenu itself!
            containerDiv.appendChild(subMenu);
        }

        myReplacementNode.appendChild(containerDiv);
    }
    // generate a random ID
    var randID = getRandomID();
    myReplacementNode.setAttribute("id",randID);
    myReplacementNode.style.display = 'none';
    myReplacementNode.style.paddingLeft = (level*10)+'px';
    
    // return our node
    return myReplacementNode;
}

function makeaqtrees() {
    // do it for each appropriate UL
    uls = document.getElementsByTagName("ul");
    for (iuls=0;iuls<uls.length;iuls++) {
        ULclassName = uls[iuls].className;
        if (ULclassName) {
            if (ULclassName.match(/\baqtree2\b/)) {
                returnNode = makeaqtree(uls[iuls],0);
                returnNode.style.display = 'block';
                pn = uls[iuls].parentNode;
                pn.replaceChild(returnNode,uls[iuls]);
            }
        }
    }
}

function initaqtrees() {
    // Check the current browser has the spuds to do the work
    if (document.createElement &&
        document.getElementsByTagName &&
        RegExp &&
        document.body.innerHTML)
        makeaqtrees();
    else
        return;
}

window.onload = initaqtrees;

/* -----------------------------------------------------------------------------------
                    functions to handle the tree when working
   ----------------------------------------------------------------------------------- */

function aqtree2ToggleVisibility() {
    elemID = this.getAttribute("attachedsection");
    thisElem = document.getElementById(elemID);
    thisDisp = thisElem.style.display;
    thisElem.style.display = thisDisp == 'none' ? 'block' : 'none';
    // change the icon
    icon = document.getElementById("icon-"+elemID);
    if (icon) icon.innerHTML = thisDisp == 'none' ? aqtree2_collapseMeHTML : aqtree2_expandMeHTML;
    return false;
}

/* -----------------------------------------------------------------------------------
                 required data -- override this in the page if you want
   ----------------------------------------------------------------------------------- */

aqtree2_expandMeHTML = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Plus%2B.svg/10px-Plus%2B.svg.png" border="0" width="10" height="10"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="8" height="8">';
aqtree2_collapseMeHTML = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Minus-.svg/10px-Minus-.svg.png" border="0" width="10" height="10"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="8" height="8">';
aqtree2_bulletHTML = '<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Color_icon_black.svg/8px-Color_icon_black.svg.png" border="0" width="8" height="8"><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" width="10" height="8">';