Revise for zepto

2 files changed, 151 insertions, 64 deletions

diff --git a/index.html b/index.html
index ee8f173..0fc8272 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
 			.header ul li a:hover{ color: #555; }
 			.header .tour{ color: #fff; background-color: #9ec45f; padding: 4px 10px; margin: 10px 0; font-size: 18px; line-height: 18px; text-decoration: none;border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px;}
 			.header .tour:hover{ background-color: #8eb44f; }
-			.header ul.scrollnav{ position: fixed; top: 0px; left: 50%; background-color: #777; display: none; margin: 0 0 0 -185px; border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;}
+			.header ul.scrollnav{ position: fixed; top: 0px; left: 50%; z-index: 9999999; background-color: #777; display: none; margin: 0 0 0 -185px; border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;}
 			.header ul.scrollnav li a{ color: #fff; }
 			.header ul.scrollnav.scrolled{ display: inline; }
 			.clear{ clear: both; }
@@ -479,7 +479,7 @@ $.prompt(tourStates);</pre>
 		html:'&lt;label&gt;First &lt;input type="text" name="fname" value=""&gt;&lt;/label&gt;&lt;br /&gt;'+
 			'&lt;label&gt;Last &lt;input type="text" name="lname" value=""&gt;&lt;/label&gt;&lt;br /&gt;',
 		buttons: { Next: 1 },
-		focus: "input[name='fname']",
+		//focus: "input[name='fname']",
 		submit:function(e,v,m,f){ 
 			console.log(f);
 
@@ -492,7 +492,7 @@ $.prompt(tourStates);</pre>
 		html:'&lt;label&gt;&lt;input type="radio" name="gender" value="Male"&gt; Male&lt;/label&gt;&lt;br /&gt;'+
 			'&lt;label&gt;&lt;input type="radio" name="gender" value="Female"&gt; Female&lt;/label&gt;',
 		buttons: { Back: -1, Next: 1 },
-		focus: ":input:first",
+		//focus: ":input:first",
 		submit:function(e,v,m,f){ 
 			console.log(f);
 
@@ -545,7 +545,8 @@ $.prompt(statesdemo);</pre>
 			</div>
 		</div>
 
-		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+		<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> -->
+		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
 		<script type="text/javascript" src="http://sellfy.com/js/api_buttons.js"></script>
 		<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>
 
diff --git a/jquery-impromptu.js b/jquery-impromptu.js
index 7bc3818..95f8c24 100644
--- a/jquery-impromptu.js
+++ b/jquery-impromptu.js
@@ -39,12 +39,16 @@
 		} else {

 			msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';

 		}

-		msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'"><div class="'+ opts.prefix +'container"><div class="';

-		msgbox += opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div><div class="'+ opts.prefix +'states"></div>';

-		msgbox += '</div></div></div>';

+		msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'">'+

+					'<form action="javascript:false;" class="'+ opts.prefix +'form">'+

+						'<div class="'+ opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div>'+

+						'<div class="'+ opts.prefix +'states"></div>'+

+					'</form>'+

+				'</div>'+

+			'</div>';

 

 		$.prompt.jqib = $(msgbox).appendTo($body);

-		$.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix).data('jqi',opts);

+		$.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix);//.data('jqi',opts);

 		$.prompt.jqif = $.prompt.jqib.children('.'+ opts.prefix +'fade');

 

 		//if a string was passed, convert to a single state

@@ -62,6 +66,7 @@
 		}

 

 		//build the states

+		$.prompt.options.states = {};

 		var k,v;

 		for(k in message){

 			v = $.extend({},$.prompt.defaults.state,{name:k},message[k]);

@@ -72,14 +77,14 @@
 		}

 

 		// Go ahead and transition to the first state. It won't be visible just yet though until we show the prompt

-		var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state:first');

-		$.prompt.goToState($firstState.data('jqi').name);

+		var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);

+		$.prompt.goToState($firstState.data('jqi-name'));

 

 		//Events

-		$.prompt.jqi.delegate('.'+ opts.prefix +'buttons button', 'click', function(e){

+		$.prompt.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){

 			var $t = $(this),

 				$state = $t.parents('.'+ opts.prefix +'state'),

-				stateobj = $state.data('jqi'),

+				stateobj = $.prompt.options.states[$state.data('jqi-name')],

 				msg = $state.children('.'+ opts.prefix +'message'),

 				clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],

 				forminputs = {};

@@ -93,8 +98,8 @@
 				}

 			}

 

-			//collect all form element values from all states

-			$.each($.prompt.jqi.find('.'+ opts.prefix +'states :input').serializeArray(),function(i,obj){

+			//collect all form element values from all states.

+			$.each($.prompt.jqi.children('form').serializeArray(),function(i,obj){

 				if (forminputs[obj.name] === undefined) {

 					forminputs[obj.name] = obj.value;

 				} else if (typeof forminputs[obj.name] == Array || typeof forminputs[obj.name] == 'object') {

@@ -105,7 +110,7 @@
 			});

 

 			// trigger an event

-			var promptsubmite = new $.Event('promptsubmit');

+			var promptsubmite = new $.Event('impromptu:submit');

 			promptsubmite.stateName = stateobj.name;

 			promptsubmite.state = $state;

 			$state.trigger(promptsubmite, [clicked, msg, forminputs]);

@@ -150,19 +155,19 @@
 			

 			//constrain tabs, tabs should iterate through the state and not leave

 			if (key == 9){

-				var $inputels = $(':input:enabled:visible',$.prompt.jqib);

+				var $inputels = $('input,select,textarea,button',$.prompt.getCurrentState());

 				var fwd = !e.shiftKey && e.target == $inputels[$inputels.length-1];

 				var back = e.shiftKey && e.target == $inputels[0];

 				if (fwd || back) {

-				setTimeout(function(){ 

-					if (!$inputels)

-						return;

-					var el = $inputels[back===true ? $inputels.length-1 : 0];

-

-					if (el)

-						el.focus();						

-				},10);

-				return false;

+					setTimeout(function(){ 

+						if (!$inputels)

+							return;

+						var el = $inputels[back===true ? $inputels.length-1 : 0];

+

+						if (el)

+							el.focus();						

+					},10);

+					return false;

 				}

 			}

 		};

@@ -173,16 +178,16 @@
 		$.prompt.jqif.click(fadeClicked);

 		$window.resize({animate:false}, $.prompt.position);

 		$.prompt.jqi.find('.'+ opts.prefix +'close').click($.prompt.close);

-		$.prompt.jqib.bind("keydown keypress",keyPressEventHandler)

-					.bind('promptloaded', opts.loaded)

-					.bind('promptclose', opts.close)

-					.bind('promptstatechanging', opts.statechanging)

-					.bind('promptstatechanged', opts.statechanged);

+		$.prompt.jqib.on("keydown",keyPressEventHandler)

+					.on('impromptu:loaded', opts.loaded)

+					.on('impromptu:close', opts.close)

+					.on('impromptu:statechanging', opts.statechanging)

+					.on('impromptu:statechanged', opts.statechanged);

 

 		//Show it

-		$.prompt.jqif.fadeIn(opts.overlayspeed);

+		$.prompt.jqif.impShow(opts.overlayspeed);

 		$.prompt.jqi[opts.show](opts.promptspeed, function(){

-			$.prompt.jqib.trigger('promptloaded');

+			$.prompt.jqib.trigger('impromptu:loaded');

 		});

 		

 		if(opts.timeout > 0)

@@ -218,7 +223,7 @@
 	 	zIndex: 999,

 	  	overlayspeed: 'slow',

 	   	promptspeed: 'fast',

-   		show: 'fadeIn',

+   		show: 'impShow',

 	   	focus: 0,

 	   	useiframe: false,

 	 	top: '15%',

@@ -231,6 +236,7 @@
 		},

 	  	persistent: true,

 	  	timeout: 0,

+	  	states: {},

 	  	state: {

 	  		name: null,

 	  		title: '',

@@ -283,15 +289,42 @@
 	};

 

 	/**

+	* outerSize - Utility for getting the outerWidth/Height. Zepto doesn't provide this

+	* @param $el jQuery - Element to detect width/height of.

+	* @param $includeMargin Bool - Whether to include the margin to the width/height

+	* @return Object - { w: 123, h: 234 }

+	*/

+	$.prompt.outerSize = function($el, includeMargin){

+		var bm = $el.css('box-sizing'),

+			size = { 

+				w: $el.width(), 

+				h: $el.height() 

+			};

+

+		// border-box includes the padding and border in width, height, others don't

+		if(bm !== undefined || bm !== 'border-box'){

+			size.w += ($el.css('padding-left').replace('px','')*1 + $el.css('padding-right').replace('px','')*1 + $el.css('border-left-width').replace('px','')*1 + $el.css('border-right-width').replace('px','')*1);

+			size.h += ($el.css('padding-top').replace('px','')*1 + $el.css('padding-bottom').replace('px','')*1 + $el.css('border-top-width').replace('px','')*1 + $el.css('border-bottom-width').replace('px','')*1);

+		}

+

+		if(includeMargin !== undefined && includeMargin === true){

+			size.w += ($el.css('margin-left').replace('px','')*1 + $el.css('margin-right').replace('px','')*1);

+			size.h += ($el.css('margin-top').replace('px','')*1 + $el.css('margin-bottom').replace('px','')*1);

+		}

+

+		return size;

+	};

+

+	/**

 	* position - Repositions the prompt (Used internally)

 	* @return void

 	*/

 	$.prompt.position = function(e){

 		var restoreFx = $.fx.off,

 			$state = $.prompt.getCurrentState(),

-			pos = $state.data('jqi').position,

+			pos = $.prompt.options.states[$state.data('jqi-name')].position,

 			$window = $(window),

-			bodyHeight = $(document.body).outerHeight(true),

+			bodyHeight = $.prompt.outerSize($(document.body), true).h,

 			windowHeight = $(window).height(),

 			documentHeight = $(document).height(),

 			height = bodyHeight > windowHeight ? bodyHeight : windowHeight,

@@ -340,7 +373,7 @@
 					width: (pos.width !== undefined)? pos.width : null

 				});

 				top = (offset.top + pos.y) - ($.prompt.options.top.toString().indexOf('%') >= 0? (windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));

-				$('html,body').animate({ scrollTop: top }, 'slow', 'swing', function(){});

+				$('html,body').animate({ scrollTop: top }, 'slow', 'swing', function(){}); // TODO: Fix animation

 			}

 		}

 		// custom state width animation

@@ -362,7 +395,7 @@
 				position: "absolute",

 				top: top,

 				left: '50%',//$window.width()/2,

-				marginLeft: (($.prompt.jqi.outerWidth()/2)*-1)

+				marginLeft: (($.prompt.outerSize($.prompt.jqi,false).w /2)*-1)

 			});

 		}

 

@@ -448,7 +481,7 @@
 		

 		$state = $(state);

 

-		$state.data('jqi',stateobj).bind('promptsubmit', stateobj.submit);

+		$state.on('impromptu:submit', stateobj.submit);

 

 		if(afterState !== undefined){

 			$jqistates.find('#'+ $.prompt.currentPrefix +'state_'+ afterState).after($state);

@@ -457,6 +490,8 @@
 			$jqistates.append($state);

 		}

 

+		$.prompt.options.states[statename] = stateobj;

+

 		return $state;

 	};

 	

@@ -483,7 +518,7 @@
 			}

 		}

 		else{

-			$state.slideUp('slow', rm);

+			$state.impTranOut('slow', rm);

 		}

 

 		return true;

@@ -525,39 +560,39 @@
 	*/	

 	$.prompt.goToState = function(state, callback) {

 		var $jqi = $.prompt.get(),

-			jqiopts = $jqi.data('jqi'),

+			jqiopts = $.prompt.options,

 			$state = $.prompt.getState(state),

-			stateobj = $state.data('jqi'),

-			promptstatechanginge = new $.Event('promptstatechanging');

+			stateobj = jqiopts.states[$state.data('jqi-name')],

+			promptstatechanginge = new $.Event('impromptu:statechanging');

 

 		$.prompt.jqib.trigger(promptstatechanginge, [$.prompt.getCurrentStateName(), state]);

 		

 		if(!promptstatechanginge.isDefaultPrevented() && $state.length > 0){

 			

-			$('.'+ $.prompt.currentPrefix +'state').not($state).slideUp(jqiopts.promptspeed)

-				.find('.'+ $.prompt.currentPrefix +'arrow').fadeOut();

+			$('.'+ $.prompt.currentPrefix +'state').not($state).impTranOut(jqiopts.promptspeed)

+				.find('.'+ $.prompt.currentPrefix +'arrow').hide();

 			

 			$.prompt.currentStateName = stateobj.name;

 

-			$state.slideDown(jqiopts.promptspeed,function(){

+			$state.impTranIn(jqiopts.promptspeed,function(){

 				var $t = $(this);

 

 				// if focus is a selector, find it, else its button index

 				if(typeof(stateobj.focus) === 'string'){

-					$t.find(stateobj.focus).focus();

+					$t.find(stateobj.focus).eq(0).focus();

 				}

 				else{

 					$t.find('.'+ $.prompt.currentPrefix +'defaultbutton').focus();

 				}

 

-				$t.find('.'+ $.prompt.currentPrefix +'arrow').fadeIn(jqiopts.promptspeed);

+				$t.find('.'+ $.prompt.currentPrefix +'arrow').show(jqiopts.promptspeed);

 				

 				if (typeof callback == 'function'){

-					$.prompt.jqib.bind('promptstatechanged.tmp', callback);

+					$.prompt.jqib.on('impromptu:statechanged', callback);

 				}

-				$.prompt.jqib.trigger('promptstatechanged', [state]);

+				$.prompt.jqib.trigger('impromptu:statechanged', [state]);

 				if (typeof callback == 'function'){

-					$.prompt.jqib.unbind('promptstatechanged.tmp');

+					$.prompt.jqib.off('impromptu:statechanged', callback);

 				}

 			});

 		

@@ -595,14 +630,14 @@
 	* @return jQuery - the newly active state

 	*/	

 	$.prompt.close = function(callCallback, clicked, msg, formvals){

-		$.prompt.jqib.fadeOut('fast',function(){

+		$.prompt.jqib.impHide('fast',function(){

 

 			if(callCallback) {

-				$.prompt.jqib.trigger('promptclose', [clicked,msg,formvals]);

+				$.prompt.jqib.trigger('impromptu:close', [clicked,msg,formvals]);

 			}

 			$.prompt.jqib.remove();

 			

-			$('window').unbind('resize',$.prompt.position);

+			$('window').off('resize',$.prompt.position);

 			

 		});

 	};

@@ -611,15 +646,66 @@
 	* Enable using $('.selector').prompt({});

 	* This will grab the html within the prompt as the prompt message

 	*/

-	$.fn.extend({ 

-		prompt: function(options){

-			if(options == undefined) 

-				options = {};

-			if(options.withDataAndEvents == undefined)

-				options.withDataAndEvents = false;

-			

-			$.prompt($(this).clone(options.withDataAndEvents).html(),options);

-		}		

-	});

+	$.fn.prompt = function(options){

+		if(options == undefined) 

+			options = {};

+		if(options.withDataAndEvents == undefined)

+			options.withDataAndEvents = false;

+		

+		$.prompt($(this).clone(options.withDataAndEvents).html(),options);

+	};

+

+	/**

+	* Since Zepto only supports animate, we'll make our own

+	*/

+	$.fn.impShow = function(duration, callback){ // impShow

+		var $t = $(this),

+			currOpacity = $t.css('opacity') || 1;

+		$t.css({display:'block', visibility:'visible', opacity:0}).animate({opacity: currOpacity}, { duration: duration, complete: callback });

+		return $t;

+	};

+	$.fn.impHide = function(duration, callback){// impHide

+		var $t = $(this);

+		$t.css({ opacity: 1 }).animate({opacity: 0}, { duration: duration, complete: function(){

+			$t.css({display: 'none', visibility: 'hidden'});

+			if(callback){

+				callback.apply($t);

+			}

+		}});

+		return $t;

+	};

+	$.fn.impTranIn = function(duration, callback){ // slideDown

+		// TODO: Fix animation

+		// var position = this.css('position');

+		// this.show();

+		// this.css({ position: 'absolute', visibility: 'hidden' });

+		// var height = this.height();

+		// this.css({ position: position, visibility: 'visible', overflow: 'hidden', height: 0 });

+		// return this.animate({ height: height }, { duration: duration, complete: callback });

+

+		var $t = $(this);

+		$t.show();

+		if(callback){

+			callback.apply($t);

+		}

+		return $t;

+	};

+	$.fn.impTranOut = function(speed, callback){ // slideUp

+		var $t = $(this);

+		$t.hide();

+		if(callback){

+			callback.apply($t);

+		}

+		return $t;

+		// TODO: Fix animation

+		// var $t = $(this);

+		// $t.animate({height: 0}, { duration: speed, complete: function(){

+		// 	$t.css({ display: 'none', visibility: 'visible' });

+		// 	if(callback){

+		// 		callback.apply($t);

+		// 	}

+		// }});

+		// return $t;

+	}

 	

-})(jQuery);

+})(window.jQuery || window.Zepto || window.$);