mootree.js

Joomla15 - 最新开源CMS

		// put the other divs under the main div:
		this.div.main.adopt(this.div.indent);
		this.div.main.adopt(this.div.gadget);
		this.div.main.adopt(this.div.icon);
		this.div.main.adopt(this.div.text);

		// put the main and sub divs in the specified parent div:
		$(options.div).adopt(this.div.main);
		$(options.div).adopt(this.div.sub);

		// attach event handler to gadget:
		this.div.gadget._node = this;
		this.div.gadget.onclick = this.div.gadget.ondblclick = function() {
			this._node.toggle();
		}

		// attach event handler to icon/text:
		this.div.icon._node = this.div.text._node = this;
		this.div.icon.onclick = this.div.icon.ondblclick = this.div.text.onclick = this.div.text.ondblclick = function() {
			this._node.control.select(this._node);
		}

	},

	/*
	Property: insert
		Creates a new node, nested inside this one.

	Parameters:
		options - an object containing the same options available to the <MooTreeNode> constructor.

	Returns:
		A new <MooTreeNode> instance.
	*/

	insert: function(options) {

		// set the parent div and create the node:
		options.div = this.div.sub;
		options.control = this.control;
		var node = new MooTreeNode(options);

		// set the new node's parent:
		node.parent = this;

		// mark this node's last node as no longer being the last, then add the new last node:
		var n = this.nodes;
		if (n.length) n[n.length-1].last = false;
		n.push(node);

		// repaint the new node:
		node.update();

		// repaint the new node's parent (this node):
		if (n.length == 1) this.update();

		// recursively repaint the new node's previous sibling node:
		if (n.length > 1) n[n.length-2].update(true);

		return node;

	},

	/*
	Property: remove
		Removes this node, and all of it's child nodes. If you want to remove all the childnodes without removing the node itself, use <MooTreeNode.clear>
	*/

	remove: function() {
		var p = this.parent;
		this._remove();
		p.update(true);
	},

	_remove: function() {

		// recursively remove this node's subnodes:
		var n = this.nodes;
		while (n.length) n[n.length-1]._remove();

		// remove the node id from the control's index:
		delete this.control.index[this.id];

		// remove this node's divs:
		this.div.main.remove();
		this.div.sub.remove();

		if (this.parent) {

			// remove this node from the parent's collection of nodes:
			var p = this.parent.nodes;
			p.remove(this);

			// in case we removed the parent's last node, flag it's current last node as being the last:
			if (p.length) p[p.length-1].last = true;

		}

	},

	/*
	Property: clear
		Removes all child nodes under this node, without removing the node itself.
		To remove all nodes including this one, use <MooTreeNode.remove>
	*/

	clear: function() {
		this.control.disable();
		while (this.nodes.length) this.nodes[this.nodes.length-1].remove();
		this.control.enable();
	},

	/*
	Property: update
		Update the tree node's visual appearance.

	Parameters:
		recursive - boolean, defaults to false. If true, recursively updates all nodes beneath this one.
		invalidated - boolean, defaults to false. If true, updates only nodes that have been invalidated while the control has been disabled.
	*/

	update: function(recursive, invalidated) {

		var draw = true;

		if (!this.control.enabled) {
			// control is currently disabled, so we don't do any visual updates
			this.invalidated = true;
			draw = false;
		}

		if (invalidated) {
			if (!this.invalidated) {
				draw = false; // this one is still valid, don't draw
			} else {
				this.invalidated = false; // we're drawing this item now
			}
		}

		if (draw) {

			var x;

			// make selected, or not:
			this.div.main.className = 'mooTree_node' + (this.selected ? ' mooTree_selected' : '');

			// update indentations:
			x = this.div.indent;
			this.empty(x);
			var p = this, i;
			while (p.parent) {
				p = p.parent;
				i = this.getImg(p.last || !this.control.grid ? '' : 'I');
				if (x.firstChild) {
					i.injectBefore( x.firstChild );
				} else {
					x.adopt(i);
				}
			}

			// update the text:
			x = this.div.text;
			this.empty(x);
			x.appendText(this.text);
			if (this.color) x.style.color = this.color;

			// update the icon:
			x = this.div.icon;
			this.empty(x);
			this.getImg( this.nodes.length ? ( this.open ? (this.openicon || this.icon || '_open') : (this.icon || '_closed') ) : ( this.icon || (this.control.mode == 'folders' ? '_closed' : '_doc') ), x );

			// update the plus/minus gadget:
			x = this.div.gadget;
			this.empty(x);
			this.getImg( ( this.control.grid ? ( this.control.root == this ? (this.nodes.length ? 'R' : '') : (this.last?'L':'T') ) : '') + (this.nodes.length ? (this.open?'minus':'plus') : ''), x );

			// show/hide subnodes:
			this.div.sub.style.display = this.open ? 'block' : 'none';

		}

		// if recursively updating, update all child nodes:
		if (recursive) this.nodes.forEach( function(node) {
			node.update(true, invalidated);
		});

	},

	/*
	Property: getImg
		Creates a new image (actually, a div Element) -- or turns a given div into an image.
		You should not need to manually call this method. (though if for some reason you want to, you can)

	Parameters:
		name - the name of new image to create, defined by <MooTreeIcon> or located in an external file.
		div - optional. A string representing an existing div element to be turned into an image, or an element reference.

	Returns:
		The new div Element.
	*/

	getImg: function(name, div) {

		// if no div was specified, create a new one:
		if (div === undefined) div = new Element('div');

		// apply the mooTree_img CSS class:
		div.addClass('mooTree_img');

		// if a blank image was requested, simply return it now:
		if (name == '') return div;

		var img = this.control.theme;
		var i = MooTreeIcon.indexOf(name);
		if (i == -1) {
			// custom (external) icon:
			var x = name.split('#');
			img = x[0];
			i = (x.length == 2 ? parseInt(x[1])-1 : 0);
		}
		div.style.backgroundImage = 'url(' + img + ')';
		div.style.backgroundPosition = '-' + (i*18) + 'px 0px';

		return div;

	},

	/*
	Property: toggle
		By default (with no arguments) this function toggles the node between expanded/collapsed.
		Can also be used to recursively expand/collapse all or part of the tree.

	Parameters:
		recursive - boolean, defaults to false. With recursive set to true, all child nodes are recursively toggle to this node's new state.
		state - boolean. If undefined, the node's state is toggled. If true or false, the node can be explicitly opened or closed.
	*/

	toggle: function(recursive, state) {

		this.open = (state === undefined ? !this.open : state);
		this.update();

		this.onExpand(this.open);
		this.control.onExpand(this, this.open);

		if (recursive) this.nodes.forEach( function(node) {
			node.toggle(true, this.open);
		}, this);

	},

	/*
	Property: select
		Called by <MooTreeControl> when the selection changes.
		You should not manually call this method - to set the selection, use the <MooTreeControl.select> method.
	*/

	select: function(state) {
		this.selected = state;
		this.update();
		this.onSelect(state);
	},

	/*
	Property: load
		Asynchronously load an XML structure into a node of this tree.

	Parameters:
		url - string, required, specifies the URL from which to load the XML document.
		vars - query string, optional.
	*/

	load: function(url, vars) {

		if (this.loading) return; // if this node is already loading, return
		this.loading = true;      // flag this node as loading

		this.toggle(false, true); // expand the node to make the loader visible

		this.clear();

		this.insert(this.control.loader);

		var f = function() {
			new XHR({
				method: 'GET',
				onSuccess: this._loaded.bind(this),
				onFailure: this._load_err.bind(this)
			}).send(url, vars || '');
		};

		window.setTimeout(f.bind(this), 20); // allowing a small delay for the browser to draw the loader-icon.

	},

	_loaded: function(text, xml) {
		// called on success - import nodes from the root element:
		this.control.disable();
		this.clear();
		this._import(xml.documentElement);
		this.control.enable();
		this.loading = false;
	},

	_import: function(e) {
		// import childnodes from an xml element:
		var n = e.childNodes;
		for (var i=0; i<n.length; i++) if (n[i].tagName == 'node') {
			var opt = {data:{}};
			var a = n[i].attributes;
			for (var t=0; t<a.length; t++) {
				switch (a[t].name) {
					case 'text':
					case 'id':
					case 'icon':
					case 'openicon':
					case 'color':
					case 'open':
						opt[a[t].name] = a[t].value;
						break;
					default:
						opt.data[a[t].name] = a[t].value;
				}
			}
			var node = this.insert(opt);
			if (node.data.load) {
				node.open = false; // can't have a dynamically loading node that's already open!
				node.insert(this.control.loader);
				node.onExpand = function(state) {
					this.load(this.data.load);
					this.onExpand = new Function();
				}
			}
			// recursively import subnodes of this node:
			if (n[i].childNodes.length) node._import(n[i]);
		}
	},

	_load_err: function(req) {
		window.alert('Error loading: ' + this.text);
	},

	/*
	Property: empty
		Utility function, used to clear the contents of an Element.
	*/

	empty: function(e) {
		while (e.lastChild) e.removeChild(e.lastChild);
	}

});