Overlay

Overlay is a compact, simple overlay class which allows for maximum control over its use.

Overlay Class

var Overlay = new Class({
	
	Implements: [Options,Events],
	
	options:  {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
	},
	
	initialize: function(container,options) {
		this.setOptions(options);
		this.container = document.id(container);
		this.overlay = new Element('div',{
			id: this.options.id,
			opacity: 0,
			styles: {
				position: 'absolute',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
			events: {
				click: function() {
					this.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay,{ 
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function() {
				this.overlay.setStyles({
					width: '100%',
					height: this.container.getScrollSize().y
				});
			}.bind(this),
			onComplete: function() {
				this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
			}.bind(this)
		});
	},
	open: function() {
		this.fireEvent('open');
		this.tween.start(this.options.opacity);
		return this;
	},
	close: function() {
		this.fireEvent('close');
		this.tween.start(0);
		return this;
	}
});

Sample Usage

var overlay = new Overlay(document.body,{
	id: 'overlay',
	color: '#000',
	duration: 300,
	opacity: 0.4,
	onClick: function() {
		this.close();
	},
	onOpen: function() {
		//make ajax call while the overlay is happening...?
		//var Request = new Request()....
	}
});

Arguments

• container: The container of that will host the overlay.
• options: The class' options.

Options

• id: (defaults to 'overlay') The ID of the overlay to be created.
• color: (defaults to '#000') The background color of the overlay.
• duration: (defaults to 500) The open/close duration of the overlay.
• opacity: (defaults to 0.5) The destination opacity level of the overlay.
• zIndex: (defaults to 5000) The z-index of the overlay.

Events

• onClick: Executes when the overlay is clicked
• onClose: Executes when the close directive has been given
• onHide: Executes when the overlay is completely hidden
• onOpen: Executes when open directive is given
• onShow: Executes when overlay has faded into view