resolving dialog blocking elements

lib/alertify.js

@@ -24,7 +24,7 @@
 		    isopen    = false,
 		    keys      = { ENTER: 13, ESC: 27, SPACE: 32 },
 		    queue     = [],
-		    $, elCallee, elCover, elDialog, elLog, getTransitionEvent;
+		    $, btnCancel, btnOK, btnReset, elCallee, elCover, elDialog, elLog, form, input, getTransitionEvent;
 
 		/**
 		 * Markup pieces
@@ -50,11 +50,10 @@
 			var t,
 			    el = document.createElement("fakeelement"),
 			    transitions = {
-					"transition"       : "transitionend",
-					"OTransition"      : "otransitionend",
-					"MSTransition"     : "msTransitionEnd",
+					"WebkitTransition" : "webkitTransitionEnd",
 					"MozTransition"    : "transitionend",
-					"WebkitTransition" : "webkitTransitionEnd"
+					"OTransition"      : "otransitionend",
+					"transition"       : "transitionend"
 				};
 
 			for (t in transitions) {
@@ -113,12 +112,7 @@
 			 * @return {undefined}
 			 */
 			addListeners : function (fn) {
-				var btnReset  = $("alertify-resetFocus"),
-				    btnOK     = $("alertify-ok")     || undefined,
-				    btnCancel = $("alertify-cancel") || undefined,
-				    input     = $("alertify-text")   || undefined,
-				    form      = $("alertify-form")   || undefined,
-				    hasOK     = (typeof btnOK !== "undefined"),
+				var hasOK     = (typeof btnOK !== "undefined"),
 				    hasCancel = (typeof btnCancel !== "undefined"),
 				    hasInput  = (typeof input !== "undefined"),
 				    val       = "",
@@ -185,11 +179,7 @@
 				// bind form submit
 				if (hasInput) this.bind(form, "submit", ok);
 				if (typeof this.transition === "undefined") {
-					if (input) {
-						input.focus();
-						input.select();
-					}
-					else btnOK.focus();
+					this.setFocus();
 				}
 			},
 
@@ -376,13 +366,28 @@
 			 * @return {undefined}
 			 */
 			hide : function () {
+				var transitionDone,
+				    self = this;
 				// remove reference from queue
 				queue.splice(0,1);
 				// if items remaining in the queue
 				if (queue.length > 0) this.setup();
 				else {
 					isopen = false;
-					elDialog.className = "alertify alertify-hide alertify-hidden";
+					// Hide the dialog box after transition
+					// This ensure it doens't block any element from being clicked
+					transitionDone = function (event) {
+						elDialog.className += " alertify-isHidden";
+						// unbind event so function only gets called once
+						self.unbind(elDialog, self.transition, transitionDone);
+					};
+					// whether CSS transition exists
+					if (typeof this.transition !== "undefined") {
+						this.bind(elDialog, this.transition, transitionDone);
+						elDialog.className = "alertify alertify-hide alertify-hidden";
+					} else {
+						elDialog.className = "alertify alertify-hide alertify-hidden alertify-isHidden";
+					}
 					elCover.className  = "alertify-cover alertify-cover-hidden";
 					// set focus to the last element or body
 					// after the dialog is closed
@@ -492,51 +497,53 @@
 				}
 			},
 
+			/**
+			 * Common place to set focus to proper element
+			 *
+			 * @return {undefined}
+			 */
+			setFocus : function () {
+				if (input) {
+					input.focus();
+					input.select();
+				}
+				else btnOK.focus();
+			},
+
 			/**
 			 * Initiate all the required pieces for the dialog box
 			 *
 			 * @return {undefined}
 			 */
 			setup : function () {
-				var item  = queue[0],
-				    first = true,
-				    self  = this,
+				var item = queue[0],
+				    self = this,
 				    transitionDone;
 
+				// dialog is open
 				isopen = true;
-
-				/**
-				 * Set button focus after transition
-				 *
-				 * @param  {Event} event transition event
-				 *
-				 * @return {undefined}
-				 */
+				// Set button focus after transition
 				transitionDone = function (event) {
-					var input = $("alertify-text") || undefined,
-					    btnOK = $("alertify-ok")   || undefined;
-
 					event.stopPropagation();
 					// transitionend event gets fired for every property (using `all`)
 					// this ensures it only tries to remove the element once
-					if (first) {
-						first = false;
-						if (input) {
-							input.focus();
-							input.select();
-						}
-						else btnOK.focus();
-						self.unbind(elDialog, self.transition, transitionDone);
-					}
+					self.setFocus();
+					self.unbind(elDialog, self.transition, transitionDone);
 				};
-
 				// whether CSS transition exists
 				if (typeof this.transition !== "undefined") {
 					this.bind(elDialog, this.transition, transitionDone);
 				}
-
+				// build the proper dialog HTML
 				elDialog.innerHTML = this.build(item);
-				if (typeof item.placeholder === "string" && item.placeholder !== "") $("alertify-text").value = item.placeholder;
+				// assign all the common elements
+				btnReset  = $("alertify-resetFocus");
+				btnOK     = $("alertify-ok")     || undefined;
+				btnCancel = $("alertify-cancel") || undefined;
+				input     = $("alertify-text")   || undefined;
+				form      = $("alertify-form")   || undefined;
+				// add placeholder value to the input field
+				if (typeof item.placeholder === "string" && item.placeholder !== "") input.value = item.placeholder;
 				this.addListeners(item.callback);
 			},
 
@@ -575,10 +582,8 @@
 	// AMD and window support
 	if (typeof define === "function") {
 		define([], function () { return new Alertify(); });
-	} else {
-		if (typeof global.alertify === "undefined") {
-			global.alertify = new Alertify();
-		}
+	} else if (typeof global.alertify === "undefined") {
+		global.alertify = new Alertify();
 	}
 
 }(this));