From bd711e9f19109043e56fa3399bab66174982d798 Mon Sep 17 00:00:00 2001
From: Mat Marquis <mat@matmarquis.com>
Date: Mon, 12 Dec 2011 18:32:18 -0500
Subject: [PATCH] Added fade transitions to fetchlinks.

---
 css/structure/jquery.mobile.core.css |  1 -
 docs/pages/fetchlinks.html           | 15 +++++++-------
 js/jquery.mobile.fetchlink.js        | 29 ++++++++++++++--------------
 js/jquery.mobile.page.sections.js    |  1 -
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css
index 0994d79c..22bd5075 100644
--- a/css/structure/jquery.mobile.core.css
+++ b/css/structure/jquery.mobile.core.css
@@ -23,7 +23,6 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 @media screen and (orientation: landscape){
 .ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
 }
-
 /* native overflow scrolling */
 .ui-page.ui-mobile-touch-overflow,
 .ui-mobile-touch-overflow.ui-native-fixed .ui-content {
diff --git a/docs/pages/fetchlinks.html b/docs/pages/fetchlinks.html
index ebf441d2..6e1f97df 100644
--- a/docs/pages/fetchlinks.html
+++ b/docs/pages/fetchlinks.html
@@ -26,15 +26,18 @@
 						
 <pre><code>&lt;a href=&quot;dialog.html&quot; <strong>data-rel=&quot;dialog&quot;</strong>&gt;Link&lt;/a&gt;
 </code></pre>
-				<p>Note: The below example temporary contains a <code>data-fragment</code> attribute.</p>
-
-				<p>A <a data-role="fetchlink" data-target=".quote" href="dialog.html">fetch link</a> is created by adding the <code>data-target</code> attribute to a link. This tells the framework to <strong>not</strong> change pages and instead load the <code>href</code> into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?). </p>
->>>>>>> Refactored sections JS to use widget factory scheme; continued work on fetchlinks/inline loader.
+				<p>A <a data-role="fetchlink" data-target=".quote" href="dialog.html" data-transition="fade">fetch link</a> is created by adding the <code>data-target</code> attribute to a link. This tells the framework to <strong>not</strong> change pages and instead load the <code>href</code> into the target DOM element on the current page when the link is clicked. The target can be any jQuery selector (or restrict to ID only?). </p>
 		
 <pre><code>&lt;a href=&quot;dialog.html&quot; <strong>data-target=&quot;.quote&quot;</strong>&gt;
 </code></pre>
 
 
+<div class="quote">
+	<p>To be replaced.</p>
+</div>
+
+
+
 				<p>The <a href="dialog.html" data-role="fetchlink" data-target=".quote" data-fragment="[data-role='content']">content fragment</a> from the loaded page can be specified. By default, the framework will load in the <strong>contents</strong> of the <code>data-role=&quot;page&quot;</code> container (not the page wrapper itself), but it's possible to specify what content from the page to pull into the target by adding a <code>data-fragment</code> attribute to the link with any jQuery selector.</p>
 	
 <pre><code>&lt;a href=&quot;dialog.html&quot; data-target=&quot;.quote&quot; <strong>data-fragment=&quot;[data-role='content']&quot;</strong>&gt;
@@ -65,10 +68,6 @@
 					
 					</div>
 
-					<div class="quote">
-						<p>To be replaced.</p>
-					</div>
-		
 	</div>
 
 
diff --git a/js/jquery.mobile.fetchlink.js b/js/jquery.mobile.fetchlink.js
index ab08f8fb..17ae7b4a 100644
--- a/js/jquery.mobile.fetchlink.js
+++ b/js/jquery.mobile.fetchlink.js
@@ -6,7 +6,8 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 	},
 	_create: function() {
 
-		$( this.element ).click(function() {
+		$( this.element )
+		 .click(function() {
 			var el			= $( this ),
 				url		    = el.attr( "href" ),
 				target		= el.data( "target" ),
@@ -36,23 +37,19 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 					 });
 					
 					$.get( url, function( data ) {
-					
-						/* Swiped from the jQuery core; $.get() should really be replaced by .load() */
 						var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
 							data = $( $("<div/>").append( data.replace( rscript, "" ) ).find( load ) )
 							responseEl = !fragment ? $( data.html() ) : data;
+									
+						setTimeout(function() {				
+							targetEl[ method ]( responseEl.addClass('fade in') );
 						
-						setTimeout(function() {
-							targetEl[ method ]( responseEl );
 							responseEl
 								.trigger( "create" )
-								.trigger( "fetchlink", { target : targetEl, data: responseEl } );
-							responseEl
-								.find('[data-role="header"]')
-								.trigger( "create" )
-						}, 2000 );
-					});
-					
+								.trigger( "fetchlink", { target : targetEl, data: responseEl });
+						}, 300);
+						
+					});					
 				}
 			}
 			return false;
@@ -61,8 +58,12 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
 	}
 });
 
-$( document ).bind( "inlineLoader", function( e ){
-	$( e.target ).html( "<div class='ui-loader-inline'><span class='ui-icon ui-icon-loading spin'></span></div>" );
+$( document ).bind( "inlineLoader", function( e ){	
+	$( e.target ).children().removeClass('fade in').addClass('fade out');
+	
+	setTimeout(function() {
+		$( e.target ).html( "<div class='ui-loader-inline'><span class='ui-icon ui-icon-loading spin'></span></div>" );
+	}, 300);
 });
 
 //auto self-init widgets
diff --git a/js/jquery.mobile.page.sections.js b/js/jquery.mobile.page.sections.js
index 5720ceac..9262c679 100644
--- a/js/jquery.mobile.page.sections.js
+++ b/js/jquery.mobile.page.sections.js
@@ -39,7 +39,6 @@ $.widget( "mobile.sections", $.mobile.widget, {
 
 				//apply theming and markup modifications to page,header,content,footer
 				if ( role === "header" || role === "footer" ) {
-
 					var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
 
 					$this