gallery-2010.02.25-22 ericf gallery-overlay-modal

ebi · Feb 25, 2010 · ae01b6c · ae01b6c
1 parent 4b63848
commit ae01b6c
Showing 1 changed file with 76 additions and 44 deletions.
diff --git a/src/gallery-overlay-modal/js/overlay-modal.js b/src/gallery-overlay-modal/js/overlay-modal.js
@@ -1,25 +1,30 @@
-	/**
+	/*!
 	 * Overlay Modal Plugin
 	 * 
 	 * Oddnut Software
-	 * Copyright (c) 2009 Eric Ferraiuolo - http://eric.ferraiuolo.name
+	 * Copyright (c) 2009-2010 Eric Ferraiuolo - http://eric.ferraiuolo.name
 	 * YUI BSD License - http://developer.yahoo.com/yui/license.html
 	 */
 
 	var OverlayModal,
 		OVERLAY_MODAL = 'overlayModal',
 
+		HOST = 'host',
+		BOUNDING_BOX = 'boundingBox',
+
 		OVERLAY = 'overlay',
 		MODAL = 'modal',
 		MASK = 'mask',
 
-		HOST = 'host',
-		BOUNDING_BOX = 'boundingBox',
-
 		CHANGE = 'Change',
 
 		getCN = Y.ClassNameManager.getClassName,
-		isBoolean = Y.Lang.isBoolean;
+		isBoolean = Y.Lang.isBoolean,
+
+		CLASSES = {
+			modal	: getCN(OVERLAY, MODAL),
+			mask	: getCN(OVERLAY, MASK)
+		};
 
 	// *** Constructor *** //
 
@@ -45,12 +50,7 @@
 
 		},
 
-		CLASSES : {
-
-			modal : getCN(OVERLAY, MODAL),
-			mask : getCN(OVERLAY, MASK)
-
-		}
+		CLASSES : CLASSES
 
 	});
 
@@ -62,6 +62,7 @@
 
 		_maskNode : null,
 		_focusHandle : null,
+		_clickHandle : null,
 
 		// *** Lifecycle Methods *** //
 
@@ -85,14 +86,15 @@
 			}
 
 			this._detachFocusHandle();
+			this._detachClickHandle();
 
-			this.get(HOST).get(BOUNDING_BOX).removeClass(OverlayModal.CLASSES.modal);
+			this.get(HOST).get(BOUNDING_BOX).removeClass(CLASSES.modal);
 		},
 
 		renderUI : function () {
 
 			this._maskNode = Y.Node.create('<div></div>');
-			this._maskNode.addClass(OverlayModal.CLASSES.mask);
+			this._maskNode.addClass(CLASSES.mask);
 			this._maskNode.setStyles({
 				position	: 'fixed',
 				width		: '100%',
@@ -102,28 +104,19 @@
 				zIndex		: '-1'
 			});
 
-			this.get(HOST).get(BOUNDING_BOX).addClass(OverlayModal.CLASSES.modal);
+			this.get(HOST).get(BOUNDING_BOX).addClass(CLASSES.modal);
 		},
 
 		bindUI : function () {
 
 			this.after(MASK+CHANGE, this._afterMaskChange);
-
 			this.get(HOST).after('visibleChange', Y.bind(this._afterHostVisibleChange, this));
 		},
 
 		syncUI : function () {
 
-			var host = this.get(HOST);
-
+			this._uiSetHostVisible(this.get(HOST).get('visible'));
 			this._uiSetMask(this.get(MASK));
-
-			if (host.get('visible') === true) {
-				this._attachFocusHandle();
-				host.get(BOUNDING_BOX).focus();
-			} else {
-				this._detachFocusHandle();
-			}
 		},
 
 		// *** Public Methods *** //
@@ -140,50 +133,89 @@
 
 		// *** Private Methods *** //
 
+		_focus : function () {
+
+			var host = this.get(HOST),
+				bb = host.get(BOUNDING_BOX),
+				oldTI = bb.get('tabIndex');
+
+			bb.set('tabIndex', 0);
+			host.focus();
+			bb.set('tabIndex', oldTI);
+		},
+
+		_blur : function () {
+
+			this.get(HOST).blur();
+		},
+
+		_uiSetHostVisible : function (visible) {
+
+			if (visible) {
+				this._attachFocusHandle();
+				this._attachClickHandle();
+				this._focus();
+			} else {
+				this._detachFocusHandle();
+				this._detachClickHandle();
+				this._blur();
+			}
+		},
+
 		_uiSetMask : function (mask) {
 
-			var hostBoundingBox = this.get(HOST).get(BOUNDING_BOX);
+			var bb = this.get(HOST).get(BOUNDING_BOX);
 
 			if (mask) {
-				hostBoundingBox.append(this._maskNode);
-			} else if (this._maskNode.get('parentNode') === hostBoundingBox) {
+				bb.append(this._maskNode);
+			} else if (this._maskNode.get('parentNode') === bb) {
 				this._maskNode.remove();
 			}
 		},
 
 		_attachFocusHandle : function () {
 
-			this._focusHandle = Y.one('document').on('focus', Y.bind(function(e){
-
-				var hostBoundingBox = this.get(HOST).get(BOUNDING_BOX);
-
-				if ( ! hostBoundingBox.contains(e.target)) {
-					hostBoundingBox.focus();
-				}
+			if ( ! this._focusHandle) {
+				this._focusHandle = Y.one(document).on('focus', Y.bind(function(e){
+					if ( ! this.get(HOST).get(BOUNDING_BOX).contains(e.target)) {
+						this._focus();
+					}
+				}, this));
+			}
+		},
+
+		_attachClickHandle : function () {
 
-			}, this));
+			if ( ! this._clickHandle) {
+				var bb = this.get(HOST).get(BOUNDING_BOX);
+				this._clickHandle = this._maskNode.on('click', Y.bind(bb.scrollIntoView, bb, false));
+			}
 		},
 
 		_detachFocusHandle : function () {
 
 			if (this._focusHandle) {
 				this._focusHandle.detach();
+				this._focusHandle = null;
 			}
 		},
 
-		_afterMaskChange : function (e) {
+		_detachClickHandle : function () {
 
-			this._uiSetMask(e.newVal);
+			if (this._clickHandle) {
+				this._clickHandle.detach();
+				this._clickHandle = null;
+			}
 		},
 
 		_afterHostVisibleChange : function (e) {
 
-			if (e.newVal === true) {
-				this._attachFocusHandle();
-				this.get(HOST).get(BOUNDING_BOX).focus();
-			} else {
-				this._detachFocusHandle();
-			}
+			this._uiSetHostVisible(e.newVal);
+		},
+
+		_afterMaskChange : function (e) {
+
+			this._uiSetMask(e.newVal);
 		}
 
 	});