Stability and aawesomeness

Assets/lightface.css

@@ -13,7 +13,7 @@
 	margin: 0;
 	background-color: transparent;
 	vertical-align: top;
-	font-family: "Verdana";
+	font-family: 'Verdana';
 	font-size: 11px;
 }
 
@@ -79,6 +79,10 @@
 	padding: 5px 10px;
 }
 
+.lightface .lightfaceContent .lightfaceDraggable {
+	cursor:move;
+}
+
 .lightface .lightfaceContent .lightfaceMessage {
 	overflow: auto;
 	margin: 0;
@@ -97,29 +101,96 @@
 .lightface .lightfaceContent .lightfaceFooter {
 	background-color: #f2f2f2;
 	border-top: 1px solid #ccc;
-	padding: 2px 10px;
+	padding: 6px 10px;
 	text-align: right;
 }
-
-.lightface .lightfaceFooter input[type="button"] {
+/*
+.lightface .lightfaceFooter input[type='button'] {
 	border: 1px solid #666;
 	border-top-color: #e7e7e7;
 	border-left-color: #e7e7e7;
 	background-color: #f0f0f0;
-	padding: 3px 15px;
+	padding: 1px 0 2px;
 	line-height: 16px;
 	vertical-align: middle;
 	margin-left: 5px;
-	cursor:pointer;
+	cursor: pointer;
+	font-size: 13px;
+	display: inline-block;
+	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
+	font-weight: bold;
+	white-space: nowrap;
+	border:2px outset buttonface;
+	border-style: inset;
+	text-align:center;
 }
 
-.lightface .lightfaceFooter input[type="button"].lightfaceSubmit {
+.lightface .lightfaceFooter input[type='button'].lightfaceBlue {
 	border-color: #0e1f5b;
 	border-top-color: #d9dfea;
 	border-left-color: #d9dfea;
 	background-color: #3b598a;
 	color: #fff;
 }
+*/
+
+.lightface .lightfaceFooter label {
+	font-size: 13px;
+	border-style: solid;
+	background-image:url(button.png);
+	cursor:pointer;
+	font-weight:bold;
+	padding:2px 6px 2px 6px;
+	text-align:center;
+	vertical-align:top;
+	white-space:nowrap;
+	border-width:1px;
+	margin-left:3px;
+	background-position:0 0;
+	border-color:#999;
+	line-height:normal !important;
+	display:inline-block;
+}
+
+.lightface .lightfaceFooter label input {
+	background:none;
+	border:0 !important;
+	cursor:pointer;
+	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
+	font-weight:bold;
+	margin:0;
+	padding:1px 0 2px;
+	white-space:nowrap;
+	text-align:center;
+	color:#fff;
+	font-size:13px;
+	border: 2px outset buttonface;
+	text-indent:0;
+	text-shadow:none;
+	display:inline-block;
+	color:#444;
+	font-size:13px;
+}
+/* ie6 hacks */
+* html .lightface .lightfaceFooter label input { border:0; }
+
+.lightface .lightfaceFooter label.lightfaceblue {
+	border-color: #29447E #29447E #1A356E;
+	background-position:0 -48px;
+}
+.lightface .lightfaceFooter label.lightfaceblue.lightfacefocusblue { background-color: #5b74a8; background-image:none; }
+
+.lightface .lightfaceFooter label.lightfacegreen {
+	border-color: #3B6E22 #3B6E22 #2C5115;
+	background-position:0 -96px;
+}
+.lightface .lightfaceFooter label.lightfacegreen.lightfacefocusgreen { background-color: #69A74E; background-image:none; }
+
+.lightface .lightfaceFooter label.lightfaceblue input,
+.lightface .lightfaceFooter label.lightfacegreen input {
+	color:#fff;
+}
+
 
 .lightface .hiddenButton {
 	visibility: hidden;
@@ -131,21 +202,26 @@
 	top: 0;
 	bottom: 0;
 	right: 0;
+	/*
 	background-image: url(fbloader.gif);
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-color: #fff;
+	*/
+	background:url(fbloader.gif) center center no-repeat #fff;
 }
 
 .lightface .lightfaceMessageBox	{ 
 	overflow: auto;
 	padding: 10px 10px;
-	min-height: 50px
+	min-height: 50px;
+	position:relative;
 }
 
 .lightface .lightFaceMessageBoxImage {
 	overflow: hidden;
 	padding: 0;
+	background:url(fbloader.gif) center center no-repeat #fff;
 }
 
 .lightface .lightFaceMessageBoxImage img {

Docs/LightFace.md

@@ -25,15 +25,16 @@ LightFace Method: constructor {#LightFace:constructor}
 * 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 '<p>Message not specified.</p>')  The modal's initial content.
-* buttons - (*array*, defaults to [])  An array containing any number of objects containing button information.
+* 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.
-* overlayTitle - (*boolean*, defaults to false)  Should the overlay cover the modal title?
+* 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 '<p>The requested file could not be found.</p>')  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:
 

README.md

@@ -20,7 +20,7 @@ LightFace instances can be created at any time.  There are no arguments other th
 		title: 'Hello from LightFace!',
 		content: '<p>This is the LightFace content!</p>',
 		buttons: [
-			{ title: 'Close', event: function() { this.close(); }, submit: false }
+			{ title: 'Close', event: function() { this.close(); }, color: 'blue' }
 		],
 		resetOnScroll: true
 	});

Source/LightFace.Image.js

@@ -43,6 +43,10 @@ LightFace.Image = new Class({
 		if(imageDimensions.y > maxHeight) {
 			this.image.height = maxHeight;
 			this.image.width = (imageDimensions.x * (maxHeight / imageDimensions.y));
+			this.image.setStyles({
+				height: maxHeight,
+				width: (imageDimensions.x * (maxHeight / imageDimensions.y)).toInt()
+			});
 		}
 
 		//get rid of styles
@@ -66,8 +70,10 @@ LightFace.Image = new Class({
 			events: {
 				load: function() {
 					(function() {
-						this.image.inject(this.messageBox).store('dimensions',this.image.getSize());
+						var setSize = function() { this.image.inject(this.messageBox).store('dimensions',this.image.getSize()); }.bind(this);
+						setSize();
 						this._resize();
+						setSize();
 						this.unfade();
 						this.fireEvent('complete');
 					}).bind(this).delay(10);
@@ -78,10 +84,11 @@ LightFace.Image = new Class({
 					delete this.image;
 					this.messageBox.set('html',this.options.errorMessage).removeClass('lightFaceMessageBoxImage');
 				}
-			}
+			},
+			style: 'width:auto;height:auto;'
 		});
 		this.image.src = url || this.options.url;
-		if(title && this.title) this.title.set('html',title);
+		if(title && this.title) this.title.set('html',title);	
 		return this;
 	}
 });

Source/LightFace.Request.js

@@ -48,6 +48,7 @@ LightFace.Request = new Class({
 			}.bind(this),
 			onComplete: function() {
 				this._resize();
+				this.messageBox.setStyle('opacity',1);
 				this.unfade();
 				this.fireEvent('complete');
 			}.bind(this)