Logic for substate

4 files changed, 149 insertions, 109 deletions

diff --git a/index.html b/index.html
index 06a2c98..803daba 100644
--- a/index.html
+++ b/index.html
@@ -276,8 +276,8 @@
 						<dt>jQuery.prompt.removeState(stateName)</dt>
 						<dd>Removes the state. Returns true on success, false on failure.</dd>
 						
-						<dt>jQuery.prompt.goToState(stateName, callback)</dt>
-						<dd>Transitions to the specified state. Callback represents a statechanged event.</dd>
+						<dt>jQuery.prompt.goToState(stateName, subState, callback)</dt>
+						<dd>Transitions to the specified state. subState is a Boolean to use substate functionality.  Callback represents a statechanged event.</dd>
 						
 						<dt>jQuery.prompt.nextState(callback)</dt>
 						<dd>Transitions to the next state. Callback represents a statechanged event.</dd>
@@ -378,8 +378,9 @@ $.prompt.getStateContent('state2')
 			if(v){
 				e.preventDefault();
 				$.prompt.goToState('state1');
+				return false;
 			}
-			return false; 
+			$.prompt.close();
 		}
 	},
 	state1: {
@@ -387,11 +388,56 @@ $.prompt.getStateContent('state2')
 		buttons: { Back: -1, Exit: 0 },
 		focus: 1,
 		submit:function(e,v,m,f){
-			if(v==0) $.prompt.close()
+			e.preventDefault();
+			if(v==0)
+				$.prompt.close();
 			else if(v==-1)
 				$.prompt.goToState('state0');
+		}
+	}
+};
+
+$.prompt(statesdemo);</pre>
+	<div class="buttons">
+		<button class="run">Run It!</button>
+	</div>
+</div>
+
+
+<div class="example-container">
+	<p>To use a substate create your states as normal, but use the subState option.</p>
+<pre class="code">var statesdemo = {
+	state0: {
+		title: 'Terms of Use',
+		html:'&lt;p&gt;These are the terms of use.  You should agree to these terms before proceeding.&lt;/p&gt;&lt;p&gt;(This is just an example)&lt;/p&gt;',
+		buttons: { Cancel: false, Agree: true },
+		focus: 1,
+		submit:function(e,v,m,f){
+			if(v){
+				e.preventDefault();
+				$.prompt.goToState('state1', true);
+				return false;
+			}
+			$.prompt.close();
+		}
+	},
+	state1: {
+		html:'Are you sure?',
+		buttons: { No: -1, Yes: 0 },
+		focus: 1,
+		submit:function(e,v,m,f){
 			e.preventDefault();
+			if(v==0) 
+				$.prompt.goToState('state2');
+			else if(v==-1)
+				$.prompt.goToState('state0');
 		}
+	},
+	state2: {
+		title: "You're Done!",
+		html: "Congratulations, you've finished this example!",
+		buttons: { Close: 0 },
+		focus: 0
 	}
 };
 
@@ -401,6 +447,7 @@ $.prompt(statesdemo);</pre>
 	</div>
 </div>
 
+
 <div class="example-container" id="TourExample">
 	<p>To use states pass in a collection (array or object) of objects with common properties (html, buttons, focus, submit, position..).</p>
 <pre class="code" id="TourCode">var tourSubmitFunc = function(e,v,m,f){
@@ -546,10 +593,6 @@ $.prompt(statesdemo);</pre>
 		</div>
 
 		<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>
-
 		<script type="text/javascript" src="jquery-impromptu.js"></script>
 		<script type="text/javascript">
 			
@@ -589,7 +632,7 @@ $.prompt(statesdemo);</pre>
 		
 		<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>
-
+		<!-- 
 		<script type="text/javascript">
 		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
@@ -599,6 +642,6 @@ $.prompt(statesdemo);</pre>
 		var pageTracker = _gat._getTracker("UA-7602218-1");
 		pageTracker._trackPageview();
 		} catch(err) {}</script>
-
+		-->
 	</body>
 </html>
\ No newline at end of file
diff --git a/jquery-impromptu.css b/jquery-impromptu.css
index 5f18389..4fb489a 100644
--- a/jquery-impromptu.css
+++ b/jquery-impromptu.css
@@ -30,6 +30,33 @@ div.jqi .jqiclose{
 	color: #bbbbbb; 
 	font-weight: bold; 
 }
+div.jqi .jqistate{
+	background-color: #fff;
+}
+div.jqi .jqiparentstate::after{ 
+	background-color: #eee;
+	opacity: 0.7;
+	filter: alpha(opacity=70);
+	content: '';
+	position: absolute;
+	top:0;left:0;bottom:0;right:0;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+}
+div.jqi .jqisubstate{ 
+
+	position: absolute;
+	top:0;
+	left: 20%;
+	width: 60%;
+	padding: 7px;
+	border: solid 1px #eeeeee;
+	border-top: none;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
 div.jqi .jqititle{
 	padding: 5px 10px;
 	font-size: 16px; 
diff --git a/jquery-impromptu.js b/jquery-impromptu.js
index ecb57d3..301645f 100644
--- a/jquery-impromptu.js
+++ b/jquery-impromptu.js
@@ -40,7 +40,7 @@
 			msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';

 		}

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

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

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

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

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

 					'</form>'+

@@ -185,7 +185,7 @@
 					.on('impromptu:statechanged', opts.statechanged);

 

 		//Show it

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

+		$.prompt.jqif[opts.show](opts.overlayspeed);

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

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

 		});

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

 	  	overlayspeed: 'slow',

 	   	promptspeed: 'fast',

-   		show: 'impShow',

+   		show: 'fadeIn',

 	   	focus: 0,

 	   	useiframe: false,

 	 	top: '15%',

@@ -289,33 +289,6 @@
 	};

 

 	/**

-	* 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

 	*/

@@ -325,7 +298,7 @@
 			stateObj = $.prompt.options.states[$state.data('jqi-name')],

 			pos = stateObj? stateObj.position : undefined,

 			$window = $(window),

-			bodyHeight = document.body.scrollHeight, //$.prompt.outerSize($(document.body), true).h,

+			bodyHeight = document.body.scrollHeight, //$(document.body).outerHeight(true),

 			windowHeight = $(window).height(),

 			documentHeight = $(document).height(),

 			height = bodyHeight > windowHeight ? bodyHeight : windowHeight,

@@ -374,7 +347,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(){}); // TODO: Fix animation

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

 			}

 		}

 		// custom state width animation

@@ -396,7 +369,7 @@
 				position: "absolute",

 				top: top,

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

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

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

 			});

 		}

 

@@ -519,7 +492,7 @@
 			}

 		}

 		else{

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

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

 		}

 

 		return true;

@@ -556,26 +529,49 @@
 	/**

 	* goToState - Goto the specified state

 	* @param state String - name of the state to transition to

+	* @param subState Boolean - true to be a sub state within the currently open state

 	* @param callback Function - called when the transition is complete

 	* @return jQuery - the newly active state

 	*/	

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

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

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

 			jqiopts = $.prompt.options,

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

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

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

 

+		// subState can be ommitted

+		if(typeof subState === 'function'){

+			callback = subState;

+			subState = false;

+		}

+

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

 		

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

-			

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

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

-			

+			$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'parentstate').removeClass($.prompt.currentPrefix +'parentstate');

+

+			if(subState){ // hide any open substates

+				// get rid of any substates

+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'substate').not($state)

+					.slideUp(jqiopts.promptspeed)

+					.removeClass('.'+ $.prompt.currentPrefix +'substate')

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

+

+				// add parent state class so it can be visible, but blocked

+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state:visible').addClass($.prompt.currentPrefix +'parentstate');

+

+				// add substate class so we know it will be smaller

+				$state.addClass($.prompt.currentPrefix +'substate');

+			}

+			else{ // hide any open states

+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state').not($state)

+					.slideUp(jqiopts.promptspeed)

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

+			}

 			$.prompt.currentStateName = stateobj.name;

 

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

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

 				var $t = $(this);

 

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

@@ -596,8 +592,9 @@
 					$.prompt.jqib.off('impromptu:statechanged', callback);

 				}

 			});

-		

-			$.prompt.position();		

+			if(!subState){

+				$.prompt.position();

+			}

 		}

 		return $state;

 	};

@@ -631,15 +628,14 @@
 	* @return jQuery - the newly active state

 	*/	

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

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

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

 

 			if(callCallback) {

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

 			}

 			$.prompt.jqib.remove();

 			

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

-			

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

 		});

 	};

 	

@@ -655,58 +651,5 @@
 		

 		$.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;

-	}

 	

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

+})(jQuery);

diff --git a/themes/base.css b/themes/base.css
index c437daa..ec4b0e9 100644
--- a/themes/base.css
+++ b/themes/base.css
@@ -28,6 +28,33 @@ div.jqi .jqiclose{
 	color: #bbbbbb; 
 	font-weight: bold; 
 }
+div.jqi .jqistate{
+	background-color: #fff;
+}
+div.jqi .jqiparentstate::after{ 
+	background-color: #eee;
+	opacity: 0.7;
+	filter: alpha(opacity=70);
+	content: '';
+	position: absolute;
+	top:0;left:0;bottom:0;right:0;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+}
+div.jqi .jqisubstate{ 
+
+	position: absolute;
+	top:0;
+	left: 20%;
+	width: 60%;
+	padding: 7px;
+	border: solid 1px #eeeeee;
+	border-top: none;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
 div.jqi .jqititle{
 	padding: 5px 10px;
 	border-bottom: solid 1px #eeeeee;