LightFace MooTools-Based lightbox inspired by Facebook's lightbox.

MooTools Javascript Class

/*
---
description: LightFace

license: MIT-style

authors:
- David Walsh (http://davidwalsh.name)

requires:
- core/1.2.1: "*"

provides: [LightFace]

...
*/

var LightFace = new Class({
	
	Implements: [Options,Events],
	
	options: {
		width: "auto",
		height: "auto",
		draggable: false,
		title: "",
		buttons: [],
		fadeDelay: 400,
		fadeDuration: 400,
		keys: { 
			esc: function() { this.close(); } 
		},
		content: "
Message not specified.
",
		zIndex: 9001,
		pad: 100,
		overlayAll: false,
		constrain: false,
		resetOnScroll: true,
		baseClass: "lightface",
		errorMessage: "
The requested file could not be found.
"/*,
		onOpen: $empty,
		onClose: $empty,
		onFade: $empty,
		onUnfade: $empty,
		onComplete: $empty,
		onRequest: $empty,
		onSuccess: $empty,
		onFailure: $empty
		*/
	},
	
	
	initialize: function(options) {
		this.setOptions(options);
		this.state = false;
		this.buttons = {};
		this.resizeOnOpen = true;
		this.ie6 = typeof document.body.style.maxHeight == "undefined";
		this.draw();
	},
	
	draw: function() {
		
		//create main box
		this.box = new Element("table",{
			"class": this.options.baseClass,
			styles: {
				"z-index": this.options.zIndex,
				opacity: 0
			},
			tween: {
				duration: this.options.fadeDuration,
				onComplete: function() {
					if(this.box.getStyle("opacity") == 0) {
						this.box.setStyles({ top: -9000, left: -9000 });
					}
				}.bind(this)
			}
		}).inject(document.body,"bottom");

		//draw rows and cells;  use native JS to avoid IE7 and I6 offsetWidth and offsetHeight issues
		var verts = ["top","center","bottom"], hors = ["Left","Center","Right"], len = verts.length;
		for(var x = 0; x < len; x++) {
			var row = this.box.insertRow(x);
			for(var y = 0; y < len; y++) {
				var cssClass = verts[x] + hors[y], cell = row.insertCell(y);
				cell.className = cssClass;
				if (cssClass == "centerCenter") {
					this.contentBox = new Element("div",{
						"class": "lightfaceContent",
						styles: {
							width: this.options.width
						}
					});
					cell.appendChild(this.contentBox);
				}
				else {
					document.id(cell).setStyle("opacity", 0.4);
				}
			}
		}
		
		//draw title
		
		this.title = new Element("h2",{
			"class": "lightfaceTitle",
			html: this.options.title
		}).inject(this.contentBox);

		if(this.options.draggable && window["Drag"] != null) {
			this.draggable = true;
			new Drag(this.box, { handle: this.title });
			this.title.addClass("lightfaceDraggable");
		}
		
		//draw message box
		this.messageBox = new Element("div", {
			"class": "lightfaceMessageBox",
			html: this.options.content || "",
			styles: {
				height: this.options.height
			}
		}).inject(this.contentBox);
		
		//button container
		this.footer = new Element("div", {
			"class": "lightfaceFooter",
			styles: {
				display: "none"
			}
		}).inject(this.contentBox);
		
		//draw overlay
		this.overlay = new Element("div", {
			html: " ",
			styles: {
				opacity: 0,
				visibility: "hidden"
			},
			"class": "lightfaceOverlay",
			tween: {
				link: "chain",
				duration: this.options.fadeDuration,
				onComplete: function() {
					if(this.overlay.getStyle("opacity") == 0) this.box.focus();
				}.bind(this)
			}
		}).inject(this.contentBox);
		if(!this.options.overlayAll) {
			this.overlay.setStyle("top", (this.title ? this.title.getSize().y - 1: 0));
		}
		
		//create initial buttons
		this.buttons = [];
		if(this.options.buttons.length) {
			this.options.buttons.each(function(button) {
				this.addButton(button.title, button.event, button.color);
			},this);
		}
		
		//focus node
		this.focusNode = this.box;
		
		return this;
	},
	
	// Manage buttons
	addButton: function(title,clickEvent,color) {
		this.footer.setStyle("display", "block");
		var focusClass = "lightfacefocus" + color;
		var label = new Element("label", {
			"class": color ? "lightface" + color : "",
			events: {
				mousedown: function() {
					if(color) {
						label.addClass(focusClass);
						var ev = function() {
							label.removeClass(focusClass);
							document.id(document.body).removeEvent("mouseup", ev);
						};
						document.id(document.body).addEvent("mouseup", ev);
					}
				}
			}
		});
		this.buttons[title] = (new Element("input", {
			type: "button",
			value: title,
			events: {
				click: (clickEvent || this.close).bind(this)
			}
		}).inject(label));
		label.inject(this.footer);
		return this;
	},
	showButton: function(title) {
		if(this.buttons[title]) this.buttons[title].removeClass("hiddenButton");
		return this.buttons[title];
	},
	hideButton: function(title) {
		if(this.buttons[title]) this.buttons[title].addClass("hiddenButton");
		return this.buttons[title];
	},
	
	// Open and close box
	close: function(fast) {
		if(this.isOpen) {
			this.box[fast ? "setStyles" : "tween"]("opacity", 0);
			this.fireEvent("close");
			this._detachEvents();
			this.isOpen = false;
		}
		return this;
	},
	
	open: function(fast) {
		if(!this.isOpen) {
			this.box[fast ? "setStyles" : "tween"]("opacity", 1);
			if(this.resizeOnOpen) this._resize();
			this.fireEvent("open");
			this._attachEvents();
			(function() {
				this._setFocus();
			}).bind(this).delay(this.options.fadeDuration + 10);
			this.isOpen = true;
		}
		return this;
	},
	
	_setFocus: function() {
		this.focusNode.setAttribute("tabIndex", 0);
		this.focusNode.focus();
	},
	
	// Show and hide overlay
	fade: function(fade, delay) {
		this._ie6Size();
		(function() {
			this.overlay.setStyle("opacity", fade || 1);
		}.bind(this)).delay(delay || 0);
		this.fireEvent("fade");
		return this;
	},
	unfade: function(delay) {
		(function() {
			this.overlay.fade(0);
		}.bind(this)).delay(delay || this.options.fadeDelay);
		this.fireEvent("unfade");
		return this;
	},
	_ie6Size: function() {
		if(this.ie6) {
			var size = this.contentBox.getSize();
			var titleHeight = (this.options.overlayAll || !this.title) ? 0 : this.title.getSize().y;
			this.overlay.setStyles({
				height: size.y - titleHeight,
				width: size.x
			});
		}
	},
	
	// Loads content
	load: function(content, title) {
		if(content) this.messageBox.set("html", content);
		title = title || this.options.title;
		if(title) this.title.set("html", title).setStyle("display", "block");
		else this.title.setStyle("display", "none");
		this.fireEvent("complete");
		return this;
	},
	
	// Attaches events when opened
	_attachEvents: function() {
		this.keyEvent = function(e){
			if(this.options.keys[e.key]) this.options.keys[e.key].call(this);
		}.bind(this);
		this.focusNode.addEvent("keyup", this.keyEvent);
		
		this.resizeEvent = this.options.constrain ? function(e) { 
			this._resize(); 
		}.bind(this) : function() { 
			this._position(); 
		}.bind(this);
		window.addEvent("resize", this.resizeEvent);
		
		if(this.options.resetOnScroll) {
			this.scrollEvent = function() {
				this._position();
			}.bind(this);
			window.addEvent("scroll", this.scrollEvent);
		}
		
		return this;
	},
	
	// Detaches events upon close
	_detachEvents: function() {
		this.focusNode.removeEvent("keyup", this.keyEvent);
		window.removeEvent("resize", this.resizeEvent);
		if(this.scrollEvent) window.removeEvent("scroll", this.scrollEvent);
		return this;
	},
	
	// Repositions the box
	_position: function() {
		var windowSize = window.getSize(), 
			scrollSize = window.getScroll(), 
			boxSize = this.box.getSize();
		this.box.setStyles({
			left: scrollSize.x + ((windowSize.x - boxSize.x) / 2),
			top: scrollSize.y + ((windowSize.y - boxSize.y) / 2)
		});
		this._ie6Size();
		return this;
	},
	
	// Resizes the box, then positions it
	_resize: function() {
		var height = this.options.height;
		if(height == "auto") {
			//get the height of the content box
			var max = window.getSize().y - this.options.pad;
			if(this.contentBox.getSize().y > max) height = max;
		}
		this.messageBox.setStyle("height", height);
		this._position();
	},
	
	// Expose message box
	toElement: function () {
		return this.messageBox;
	},
	
	// Expose entire modal box
	getBox: function() {
		return this.box;
	},
	
	// Cleanup
	destroy: function() {
		this._detachEvents();
		this.buttons.each(function(button) {
			button.removeEvents("click");
		});
		this.box.dispose();
		delete this.box;
	}
});

Class: LightFace

LightFace is a clone of FaceBook's modal dialog.

Implements:

Options, Events

LightFace Method: constructor

Syntax:

var modal = new LightFace(options);

Arguments:

1. options - (object) An object containing the LightFace instance's options.

Options:

• width - (integer|string, defaults to 'auto') The desired width of the of the modal box.
• height - (string|string, defaults to 'auto') The desired height of the of the modal box.
• draggable - (boolean, defaults to false) Should the modal box be draggable by its title? the Drag class is not included with this package, but is available with MooTools More
• title - (string, defaults to '') The modal's initial title.
• content - (string, defaults to '

Message not specified.

') The modal's initial content. * buttons - (array, defaults to []) An array of objects containing button information: { title:'', event:fn, color:'' }. * fadeDelay - (integer, defaults to 150) The delay before instructing the overlay to fade in/out. * fadeDuration - (integer, defaults to 150) The duration of overlay fade while content is loading. * keys - (object, defaults to object w/ 'esc' key handler) Key handlers to add events to while the modal box is open. * zIndex - (integer, defaults to 9001) The desired zIndex of the modal. * overlayAll - (boolean, defaults to true) Should the overlay cover the entire modal dialog? * constrain - (boolean, defaults to false) Should the modal box constrain content when the window is resized? * errorMessage - (string, defaults to '

The requested file could not be found.

') The error message displayed if a resource is not found. * resetOnScroll - (boolean, defaults to true) Keeps the modal box in the same place on the screen if the user scrolls. * baseClass - (string, defaults to 'lightface') The base class of the modal box.

Returns:

A LightFace instance.

Events:

open

• (function) Function to execute when the modal is opened.

Signature

onOpen()

close

• (function) Function to execute when the modal is closed.

Signature

onClose()

fade

• (function) Function to execute when the overlay is faded in of view.

Signature

onFade()

unfade

• (function) Function to execute when the overlay is faded out of view.

Signature

onUnfade()

complete

• (function) Function to execute when the content has successfully loaded.

Signature

onComplete()

request

• (function) Function to execute when the content has been requested.

Signature

onRequest()

success

• (function) Function to execute when the content request is successful.

Signature

onSuccess()

failure

• (function) Function to execute when the content request fails.

Signature

onFailure()

LightFace Method: addButton

Adds a button to the footer of the modal dialog.

Syntax:

modal.addButton('Close',function(){ this.close(); },true);

Arguments:

1. title - (string) The button text.
2. event - (function) The function to execute when the button is clicked.
3. submit - (boolean) If true, styles the button Facebook-blue

LightFace Method: showButton

Shows a button by its text.

Syntax:

modal.showButton('Close');

Arguments:

1. title - (string) The text on the button which should be shown.

Returns:

The button element.

LightFace Method: hideButton

Hides a button by its text.

Syntax:

modal.hideButton('Close');

Arguments:

1. title - (string) The text on the button which should be hidden.

Returns:

The button element.

LightFace Method: open

Open the modal dialog.

Syntax:

modal.open(fast);

Arguments:

1. fast - (boolean) If true, skips fading and quickly sets opacity to 100%.

LightFace Method: close

Closes the modal dialog.

Syntax:

modal.close(fast);

Arguments:

1. fast - (boolean) If true, skips fading and quickly sets opacity to 0%.

LightFace Method: fade

Fades the overlay into view.

Syntax:

modal.fade();

Arguments:

1. opacity - (integer, defaults to 1) The opacity level with which to fade the overlay to.

LightFace Method: unfade

Fades the overlay out of view.

Syntax:

modal.unfade();

LightFace Method: load

Loads static content into the modal dialog.

Syntax:

modal.load('<p>This is the content!</p>','This is the title!');

Arguments:

1. content - (string) The content to place within the modal dialog.
2. title - (string) The title of the modal dialog. (not required)

LightFace Method: destroy

Removes all event bindings and removes the modal element from the DOM.

Syntax:

modal.destroy();

Class: LightFace.IFrame {#LightFace.IFrame}

LightFace extension specially built to handle IFrames.

LightFace.IFrame Method: constructor {#LightFace.IFrame:constructor}

Syntax:

var modal = new LightFace.IFrame(options);

Arguments:

1. options - (object) An object containing the LightFace instance's options.

Options:

LightFace.IFrame uses all of the base LightFace options. In addition to those:

• url - (string, defaults to '') The URL that should be loaded initially.

LightFace.IFrame Method: load {#LightFace.IFrame:load}

Loads a URL into the modal box's IFrame.

Syntax:

modal.load('http://davidwalsh.name','The David Walsh Blog');

Arguments:

1. URL - (string) The URL to load within the IFrame.
2. title - (string) The title of the modal dialog. (not required)

Class: LightFace.Image {#LightFace.Image}

LightFace extension specially built to handle images.

LightFace.Image Method: constructor {#LightFace.Image:constructor}

Syntax:

var modal = new LightFace.Image(options);

Arguments:

1. options - (object) An object containing the LightFace instance's options.

Options:

LightFace.Image uses all of the base LightFace options. In addition to those:

• url - (string, defaults to '') The URL of the image that should be loaded initially.
• constrain (boolean, defaults to true) If true, constrains image height/width if the image is larger than the window area and the window is resized.

LightFace.Image Method: load {#LightFace.Image:load}

Loads an image into the modal box's content area.

Syntax:

modal.load('http://davidwalsh.name/mylogo.png','The David Walsh Blog Logo');

Arguments:

1. URL - (string) The URL of the image to load within the modal dialog.
2. title - (string) The title of the modal dialog. (not required)

Class: LightFace.Static {#LightFace.Static}

LightFace extension specially built to stay in a static position. You must provide X and Y coordinates for where the modal should display.

LightFace.Static Method: constructor {#LightFace.Static:constructor}

Syntax:

var modal = new LightFace.Static(options);

Arguments:

1. options - (object) An object containing the LightFace instance's options.

Options:

LightFace.Static uses all of the base LightFace options. In addition to those:

• offsets - (object, defaults to { x:16, y:16 }) Offsets from the position passed in.

LightFace.Static Method: open {#LightFace.Static:open}

Opens the modal at give x and y coordinates

Syntax:

modal.open(200,100);

Arguments:

1. x - (integer) The x coordinate to place the modal at.
2. y - (integer) The y coordinate to place the modal at.