File: TreeMenu.js

// +----------------------------------------------------------------------+
// | PHP Version 4                                                        |
// +----------------------------------------------------------------------+
// | Copyright (c) 1997-2002 The PHP Group                                |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.02 of the PHP license,      |
// | that is bundled with this package in the file LICENSE, and is        |
// | available at through the world-wide-web at                           |
// | http://www.php.net/license/2_02.txt.                                 |
// | If you did not receive a copy of the PHP license and are unable to   |
// | obtain it through the world-wide-web, please send a note to          |
// | license@php.net so we can mail you a copy immediately.               |
// +----------------------------------------------------------------------+
// | Author: Richard Heyes <richard@phpguru.org>                          |
// |         Harald Radi <harald.radi@nme.at>                             |
// +----------------------------------------------------------------------+
//
// $Id: TreeMenu.js,v 1.2 2002/06/18 23:28:35 richard Exp $

function TreeMenu(layer, iconpath, myname, linkTarget)
{
	// Properties
	this.layer      = layer;
	this.iconpath   = iconpath;
	this.myname     = myname;
	this.linkTarget = linkTarget;
	this.n          = new Array();

	this.branches       = new Array();
	this.branchStatus   = new Array();
	this.layerRelations = new Array();
	this.childParents   = new Array();
	
	// Methods
	//this.preloadImages      = preloadImages;
	this.drawMenu           = drawMenu;
	this.toggleBranch       = toggleBranch;
	this.swapImage          = swapImage;
	this.doesMenu           = doesMenu;
	this.doesPersistence    = doesPersistence;
	this.getLayer           = getLayer;
	this.saveExpandedStatus = saveExpandedStatus;
	this.loadExpandedStatus = loadExpandedStatus;
	this.resetBranches      = resetBranches;
}

function TreeNode(title, icon, link, expanded)
{
	this.title    = title;
	this.icon     = icon;
	this.link     = link;
	this.expanded = expanded;
	this.n        = new Array();
}

/**
* Preload images hack for CrapZilla
*/
function preloadImages()
{
	var plustop    = new Image; plustop.src    = this.iconpath + '/plustop.gif';
	var plusbottom = new Image; plusbottom.src = this.iconpath + '/plusbottom.gif';
	var plus       = new Image; plus.src       = this.iconpath + '/plus.gif';

	var minustop    = new Image; minustop.src    = this.iconpath + '/minustop.gif';
	var minusbottom = new Image; minusbottom.src = this.iconpath + '/minusbottom.gif';
	var minus       = new Image; minus.src       = this.iconpath + '/minus.gif';
}

/**
* Main function that draws the menu and assigns it
* to the layer (or document.write()s it)
*/
function drawMenu()// OPTIONAL ARGS: nodes = [], level = [], prepend = '', expanded = false, visbility = 'inline', parentLayerID = null
{
	/**
    * Necessary variables
    */
	var output        = '';
	var modifier      = '';
	var layerID       = '';
	var parentLayerID = '';

	/**
    * Parse any optional arguments
    */
	var nodes         = arguments[0] ? arguments[0] : this.n
	var level         = arguments[1] ? arguments[1] : [];
	var prepend       = arguments[2] ? arguments[2] : '';
	var expanded      = arguments[3] ? arguments[3] : false;
	var visibility    = arguments[4] ? arguments[4] : 'inline';
	var parentLayerID = arguments[5] ? arguments[5] : null;

	var currentlevel  = level.length;

	for (var i=0; i<nodes.length; i++) {
	
		level[currentlevel] = i+1;
		layerID = this.layer + '_' + 'node_' + implode('_', level);

		/**
        * Store the child/parent relationship
        */
		this.childParents[layerID] = parentLayerID;

		/**
        * Gif modifier
        */
		if (i == 0 && parentLayerID == null) {
			modifier = nodes.length > 1 ? "top" : 'single';
		} else if(i == (nodes.length-1)) {
			modifier = "bottom";
		} else {
			modifier = "";
		}

		/**
        * Single root branch is always expanded
        */
		if (!doesMenu() || (parentLayerID == null && nodes.length == 1)) {
			expanded = true;
		}

		/**
        * Setup branch status and build an indexed array
		* of branch layer ids
        */
		if (nodes[i].n.length > 1) {
			this.branchStatus[layerID] = expanded;
			this.branches[this.branches.length] = layerID;
		}

		/**
        * Setup toggle relationship
        */
		if (!this.layerRelations[parentLayerID]) {
			this.layerRelations[parentLayerID] = new Array();
		}
		this.layerRelations[parentLayerID][this.layerRelations[parentLayerID].length] = layerID;

		/**
        * Branch images
        */
		var gifname = nodes[i].n.length && this.doesMenu() ? (expanded ? 'minus' : 'plus') : 'branch';
		var iconimg = nodes[i].icon ? sprintf('<img src="%s/%s" align="top">', this.iconpath, nodes[i].icon) : '';
		

		/**
        * Build the html to write to the document
        */
		var divTag    = sprintf('<div id="%s" style="display: %s; behavior: url(#default#userdata)">', layerID, visibility);
		var onClick   = doesMenu() && nodes[i].n.length ? sprintf('onclick="%s.toggleBranch(\'%s\', true)" style="cursor: pointer; cursor: hand"', this.myname, layerID) : '';
		var imgTag    = sprintf('<img src="%s/%s%s.gif" align="top" border="0" name="img_%s" %s />', this.iconpath, gifname, modifier, layerID, onClick);
		var linkStart = nodes[i].link ? sprintf('<a href="%s" target="%s">', nodes[i].link, this.linkTarget) : '';
		var linkEnd   = nodes[i].link ? '</a>' : '';

		output = sprintf('%s<nobr>%s%s%s%s%s%s</nobr><br></div>',
		                  divTag,
						  prepend,
		                  parentLayerID == null && nodes.length == 1 ? '' : imgTag,
						  iconimg,
						  linkStart,
						  nodes[i].title,
						  linkEnd);

		/**
        * Write out the HTML
        */
		if (this.doesMenu()) {
			this.getLayer(this.layer).innerHTML += output

		} else {
			document.write(output);
		}

		if (nodes[i].n.length) {
			/**
            * Determine what to prepend. If there is only one root
			* node then the prepend to pass to children is nothing.
			* Otherwise it depends on where we are in the tree.
            */
			if (parentLayerID == null && nodes.length == 1) {
				var newPrepend = '';

			} else if (i < (nodes.length - 1)) {
				var newPrepend = prepend + sprintf('<img src="%s/line.gif" align="top">', this.iconpath);

			} else {
				var newPrepend = prepend + sprintf('<img src="%s/linebottom.gif" align="top">', this.iconpath);
			}

			this.drawMenu(nodes[i].n,
			              explode('_', implode('_', level)), // Seemingly necessary to enforce passing by value
			              newPrepend,
			              nodes[i].expanded,
			              expanded ? 'inline' : 'none',
			              layerID);
		}
	}
}

function toggleBranch(layerID, updateStatus) // OPTIONAL ARGS: noSave = false
{
	var currentDisplay = this.getLayer(layerID).style.display;
	var newDisplay     = (this.branchStatus[layerID] && currentDisplay == 'inline') ? 'none' : 'inline'

	for (var i=0; i<this.layerRelations[layerID].length; i++) {
		if (this.branchStatus[this.layerRelations[layerID][i]]) {
			this.toggleBranch(this.layerRelations[layerID][i], false);
		}

		this.getLayer(this.layerRelations[layerID][i]).style.display = newDisplay;
	}

	if (updateStatus) {
		this.branchStatus[layerID] = !this.branchStatus[layerID];

		/**
        * Persistence
        */
		if (this.doesPersistence() && !arguments[2]) {
			this.saveExpandedStatus(layerID, this.branchStatus[layerID]);
		}

		// Swap image
		this.swapImage(layerID);
	}
}

/**
* Swaps the plus/minus branch images
*/
function swapImage(layerID)
{
	imgSrc = document.images['img_' + layerID].src;

	re = /^(.*)(plus|minus)(bottom|top|single)?.gif$/
	if (matches = imgSrc.match(re)) {
		
		document.images['img_' + layerID].src = sprintf('%s%s%s%s',
		                                                matches[1],
														matches[2] == 'plus' ? 'minus' : 'plus',
														matches[3],
														'.gif');
	}
}

/**
* Can the browser handle the dynamic menu?
*/
function doesMenu()
{
	return (is_ie5up || is_nav6up || is_gecko);
}

/**
* Can the browser handle save the branch status
*/
function doesPersistence()
{
	return is_ie5up;
}

/**
* Returns the appropriate layer accessor
*/
function getLayer(layerID)
{
	if (document.getElementById(layerID)) {
		return document.getElementById(layerID);
	} else if (document.all(layerID)) {
		return document.all(layerID);
	}
}

/**
* Save the status of the layer
*/
function saveExpandedStatus(layerID, expanded)
{
	document.all(layerID).setAttribute("expandedStatus", expanded);
	document.all(layerID).save(layerID);
}

/**
* Load the status of the layer
*/
function loadExpandedStatus(layerID)
{
	document.all(layerID).load(layerID);
	if (val = document.all(layerID).getAttribute("expandedStatus")) {
		return val;
	} else {
		return null;
	}
}

/**
* Reset branch status
*/
function resetBranches()
{
	if (!this.doesPersistence()) {
		return false;
	}

	for (var i=0; i<this.branches.length; i++) {
		var status = this.loadExpandedStatus(this.branches[i]);
		// Only update if it's supposed to be expanded and it's not already
		if (status == 'true' && this.branchStatus[this.branches[i]] != true) {
			if (this.childParents[this.branches[i]] == null || (in_array(this.childParents[this.branches[i]], this.branches) && this.branchStatus[this.childParents[this.branches[i]]])) {
				this.toggleBranch(this.branches[i], true, true);
			} else {
				this.branchStatus[this.branches[i]] = true;
				this.swapImage(this.branches[i]);
			}
		}
	}
}

/**
* Javascript mini implementation of sprintf()
*/
function sprintf(strInput)
{
	var strOutput  = '';
	var currentArg = 1;

	for (var i=0; i<strInput.length; i++) {
		if (strInput.charAt(i) == '%' && i != (strInput.length - 1) && typeof(arguments[currentArg]) != 'undefined') {
			switch (strInput.charAt(++i)) {
				case 's':
					strOutput += arguments[currentArg];
					break;
				case '%':
					strOutput += '%';
					break;
			}
			currentArg++;
		} else {
			strOutput += strInput.charAt(i);
		}
	}

	return strOutput;
}

function explode(seperator, input)
{
	var output = [];
	var tmp    = '';
	skipEmpty  = arguments[2] ? true : false;
	
	for (var i=0; i<input.length; i++) {
		if (input.charAt(i) == seperator) {
			if (tmp == '' && skipEmpty) {
				continue;
			} else {
				output[output.length] = tmp;
				tmp = '';
			}
		} else {
			tmp += input.charAt(i);
		}
	}
	if (tmp != '' || !skipEmpty) {
		output[output.length] = tmp;
	}
	
	return output;
}

function implode(seperator, input)
{
	var output = '';

	for (var i=0; i<input.length; i++) {
		if (i == 0) {
			output += input[i];
		} else {
			output += seperator + input[i];
		}
	}
	
	return output;
}

function in_array(item, arr)
{
	for (var i=0; i<arr.length; i++) {
		if (arr[i] == item) {
			return true;
		}
	}

	return false;
}