User:Mike Dillon/Scripts/navbox.js
< User:Mike Dillon | Scripts
Note – after saving, you may have to bypass your browser’s cache to see the changes.
- Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
- Konqueror and Chrome: click Reload or press F5;
- Opera: clear the cache in Tools → Preferences;
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.
- This script lacks a documentation subpage. Please create it.
- Useful links: root page • root page’s subpages • links • redirects • your own
// Requires: [[User:Mike Dillon/Scripts/easydom.js]]
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;
}