User:Mike Dillon/Scripts/navbox.js

From Wikipedia, the free encyclopedia

Note: After saving, you have to bypass your browser's cache to see the changes. In Internet Explorer and Firefox, hold down the Ctrl key and click the Refresh or Reload button. Opera users have to clear their caches through Tools→Preferences, see the instructions for Opera. Konqueror and Safari users can just click the Reload button. 

// Requires: [[User:Mike Dillon/Scripts/easydom.js]]
 
// <pre><nowiki>
 
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')[0];
    var oldList = newBox.getElementsByTagName('ul')[0];
    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[overflowProperty];
    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[overflowProperty] = newOverflow;
 
        return false;
    };
    toggle.onclick = toggleListDisplay;
    toggleListDisplay(closed);
 
    return list;
}
 
// </nowiki></pre>