User:Mike Dillon/Scripts/navbox.js

// Requires: ]

function addNavbox(id, title, refId, refMode) {
    // Find the toolbox
    var oldBox = document.getElementById('p-tb');
    if (!oldBox) return;

    // Clone the toolbox and change its DOM id
    var newBox = oldBox.cloneNode(true);
    newBox.id = id;

    // Find the header and list components
    var oldHeader = newBox.getElementsByTagName('h5');
    var oldList = newBox.getElementsByTagName('ul');
    if (!(oldHeader && oldList)) return;

    // Create the new header and list
    var newHeader = easyDom.h5(title);
    var newList = easyDom.ul();

    // Replace the header and list
    oldHeader.parentNode.replaceChild(newHeader, oldHeader);
    oldList.parentNode.replaceChild(newList, oldList);

    var parent = oldBox.parentNode;
    if (refId) {
        var refElement = toolbox.parentNode.getElementById(refId);
        if (refElement) {
            if (refMode && refMode == 'replace') {
                parent.replaceChild(newBox, refElement);
            } else {
                parent.insertBefore(newBox, refElement);
            }
        } else {
            parent.appendChild(newBox);
        }
    } else {
        parent.appendChild(newBox);
    }

    return newList;
}

function addToggleNavbox(id, title, closed, refId, refMode) {
    with (easyDom) {
        var toggle = a({ "href": "#" }, "+/-");
        var toggleTitle = span(title, ' ', toggle);
    }
    var list = addNavbox(id, toggleTitle, refId, refMode);

    if (!list.parentNode.style.maxHeight) {
        list.parentNode.style.maxHeight = "15em";
    }

    var overflowProperty = list.parentNode.style.overflowX
        ? "overflowX" : "overflow";
    var origDisplay = list.style.display;
    var origOverflow = list.parentNode.style;
    var toggleListDisplay = function (closed) {
        if (typeof closed != typeof false) {
            closed = list.style.display == origDisplay;
        }
        var newDisplay;
        var newOverflow; 
        if (!closed) {
            newDisplay = origDisplay;
            newOverflow = 'scroll';
        } else {
            newDisplay = 'none';
            newOverflow = origOverflow;
        }
   
        list.style.display = newDisplay;
        list.parentNode.style = newOverflow;

        return false;
    };
    toggle.onclick = toggleListDisplay;
    toggleListDisplay(closed);

    return list;
}