/************************************************************************************************************
Automatic collapsible list generation script written by Mark Wilton-Jones - 2002 - script@freegames.uk.eu.org
*************************************************************************************************************
Feel free to use this code yourself on non-profit websites.
Please leave this header section and the comments in there.
If you change anything, please leave a note saying what you did and why.
_________________________________________________________________________
You can put as lists on the page as you like, each list may have a different format
To use:
_________________________________________________________________________
Inbetween the tags, put:
_________________________________________________________________________
For best results, all images should be the same height, slightly taller than
the text around them. I would recommend about 21px.
Now, wherever you want the list (not in a layer or positioned element due
to Netscape 4 style bug), put:
*******************************************************************************************************
And here's the actual code
******************************************************************************************************/
window.collapsibleListRef = []; window.imageCache = [];
function collapsibleList() {
//hold tree information about the list and the images used
this.treeImg = arguments[0];
this.expdImg = arguments[1];
this.sub = [];
}
function sub() {
//hold information about the list item
this.text = arguments[0];
this.expanded = arguments[1];
this.sub = [];
}
//done because WebTV does not understand inline object syntax
function ColLexPdOb(plI,miI) { this.plI = plI; this.miI = miI; this.subs = []; }
function ColLexPdIT(name,expanded) { this.name = name; this.expanded = expanded; }
function createList(listObject,currentExt,imgExt,oLev,oBase) {
if( !currentExt ) {
//create the list, start by defining aditional stuff that is required, counting the lists etc.
window.collapsibleListRef[window.collapsibleListRef.length] = new ColLexPdOb( listObject.expdImg[4], listObject.expdImg[5] );
currentExt = 'treeList_'+( window.collapsibleListRef.length - 1 ); imgExt = ''; oLev = 0; oBase = listObject;
document.write( '' );
}
document.write( '' );
for( var x = 0; x < listObject.sub.length; x++ ) {
var style= 1;
var tempStr = '';
var linkStr1 = '';
var linkStr2 = '';
if (listObject.sub[x].sub.length) {
tempStr = '![[+/-]](' + oBase.expdImg[2] + ')
';
linkStr1 = '';
//linkStr1 = '';
linkStr2 = '';
}
else {
linkStr1 = '';
tempStr = '
';
linkStr2 = '';
}
//for every child object, create their line
document.write(
//the line break on all except the very first line
( ( oLev || x ) ? '\n
' : '' ) +
//what may or may not remain of the trunk
imgExt +
//this branch
( oLev ? ' ? oBase.treeImg[2] : oBase.treeImg[3] ) + ')
' : '' ) +
//the expand / collapse link or not as the case may be
( listObject.sub[x].sub.length ? ' ' : ' ' ) +
//the text of the branch
linkStr1 +
//the text of the branch
listObject.sub[x].text +
linkStr2
);
if( listObject.sub[x].sub.length ) {
//add the span id to a list so we can easily find it and collapse it later
window.collapsibleListRef[window.collapsibleListRef.length - 1].subs[window.collapsibleListRef[window.collapsibleListRef.length - 1].subs.length] = new ColLexPdIT( currentExt + '_' + x, listObject.sub[x].expanded );
//create children
createList( listObject.sub[x], currentExt + '_' + x, oLev ? ( imgExt + ( ( x < listObject.sub.length - 1 ) ? '
' : '
' ) ) : '', oLev + 1, oBase );
}
}
document.write( '' );
if( !oLev ) {
//end the list and prepare to collapse as soon as the browser lays it out
document.write( '
\n' );
if( document.all || document.getElementById ) { window.setTimeout('prepareForUse('+(window.collapsibleListRef.length-1)+')',100); }
}
}
function expandList(spanName,imgName,plsImg,minImg) {
var theSpan = document.getElementById ? document.getElementById(spanName) : document.all ? document.all[spanName] : (new Object());
if( !theSpan ) { return; } if( theSpan.style ) { theSpan = theSpan.style; }
if( typeof( theSpan.display ) == 'undefined' ) {
//if we could not access the span element or if its display style cannot be changed, say so
window.alert( 'Sorry, your browser cannot collapse or expand these lists\nso the lists will remain constantly expanded.' );
} else {
//expand / collapse the list and change the image
theSpan.display = theSpan.display ? '' : 'none';
document.images[imgName].src = theSpan.display ? plsImg : minImg;
}
}
function prepareForUse(listNum) {
if( !window.collapsibleListRef[listNum].subs.length ) { return; } //no branches to collapse
var lastPart = window.collapsibleListRef[listNum].subs[window.collapsibleListRef[listNum].subs.length - 1].name;
lastPart = document.getElementById ? document.getElementById(lastPart) : document.all[lastPart];
//if the page has not loaded enough, try again later
if( !lastPart ) { window.setTimeout('prepareForUse('+listNum+')',100); } else {
//if their browser cannot change the display style, don't try
if( lastPart.style ) { lastPart = lastPart.style; }
if( typeof( lastPart.display ) == 'undefined' ) { return; }
//cache images for faster changes
window.imageCache[listNum] = [(new Image()),(new Image())];
window.imageCache[listNum][0].src = window.collapsibleListRef[listNum].plI;
window.imageCache[listNum][1].src = window.collapsibleListRef[listNum].miI;
for( var x = 0; x < window.collapsibleListRef[listNum].subs.length; x++ ) {
var lastPart = window.collapsibleListRef[listNum].subs[x];
if( lastPart.expanded ) {
//if they want it expanded by default, just change the image
document.images[lastPart.name + '_img'].src = window.imageCache[listNum][1].src;
} else {
//collapse the branch and change the image
document.images[lastPart.name + '_img'].src = window.imageCache[listNum][0].src;
lastPart = document.getElementById ? document.getElementById(lastPart.name) : document.all[lastPart.name];
if( lastPart.style ) { lastPart = lastPart.style; }
lastPart.display = 'none';
}
}
}
}