XML.js

Some of these functions are very useful in most classes I wrote. It helps in keeping a CMS interface neat and coherant for example when making some widgets appear with fadein effects or whatever.

Element.implement({
	toggle: function() { // Show/hide
		if (this.getStyle('display') == 'none')
		this.open();
		else this.close();
	},
	open: function() { // Show and fade in
		this.setStyles({'display': 'block', 'opacity': 0});
		this.set({'tween': {
			duration: 200,
			onComplete: (function(){this.setStyle('display', 'block');}).bind(this)
		}});
		this.fade(1);
	},
	close: function() { // Hide and fade in
		this.set({'tween': {
			duration: 200,
			onComplete: (function(){this.setStyle('display', 'none');}).bind(this)
		}});
		this.fade(0);
	},
	popup: function(parent) { // Popup an element relatively to "parent"
		fn = function(e) {
			var e = new Event(e);
			var el = e.target;
			while (el != document.body && el.nodeType == 1) {
				if (el == this || el == parent) { return false; }
				else { el = el.parentNode; }
			}
			this.close();
			this.inject(parent, 'after');
		}
		document.removeEvent('mousedown', fn.bind(this));
		if(this.getStyle('display') == 'none'){
			this.inject(document.body);
			this.open();
			if(parent){
				this.setStyles({
					'width': parent.getWidth() ,
					'top': parent.getPosition().y + parent.getHeight(),
					'left': parent.getPosition().x,
					'z-index': 10000
				});
			}
		}
		document.addEvent('mousedown', fn.bind(this));
	},
	appendHTML: function(HTML){
		// append HTML to an element.
		// ex : $('el').appendHTML('<div>toto</div>')
		// => <div id="el">tata<div>toto</div></div>
		return this.innerHTML = this.innerHTML + HTML;
	}
});