docs/api/globalconfig.html

@@ -112,21 +112,6 @@ <h2>Configurable options</h2>
 	<dt><code>linkBindingEnabled</code> <em>boolean</em>, default: true</dt>
 	<dd>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this options to false will prevent all anchor click handling <em>including</em> the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.</dd>
 
-	<dt><code>loading.text</code> <em>string</em>, default: "loading"</dt>
-	<dd>
-    Set the text that appears when a page is loading. If set to false, the message will not appear at all. <b>Note</b> the actual default is <code>undefined</code> but for the operation of the <code>$.mobile.showPageLoadingMsg()</code> the default is the value of <code>$.mobile.loadingMessage</code> while it's deprecated.
-  </dd>
-
-	<dt><code>loading.textVisible</code> <em>boolean</em>, default: false</dt>
-	<dd>
-    Whether the text should be visible when a loading message is shown. The text is always visible for loading errors. <b>Note</b> the actual default is <code>undefined</code> but for the operation of the <code>$.mobile.showPageLoadingMsg()</code> the default is the value of <code>$.mobile.loadingMessageTextVisible</code> while it's deprecated.
-  </dd>
-
-	<dt><code>loading.theme</code> <em>string</em>, default: "a"</dt>
-	<dd>
-    The theme that the loading message box uses when text is visible. <b>Note</b> the actual default is <code>undefined</code> but for the operation of the <code>$.mobile.showPageLoadingMsg()</code> the default is the value of <code>$.mobile.loadingMessageTheme</code> while it's deprecated.
-  </dd>
-
 	<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
 	<dd>
     Set the text that appears when a page is loading. If set to false, the message will not appear at all.

js/index.php

@@ -15,6 +15,7 @@
 	'jquery.hashchange.js',
 	'jquery.mobile.page.js',
 	'jquery.mobile.core.js',
+  'jquery.mobile.loading.js',
 	'jquery.mobile.navigation.js',
 	'jquery.mobile.navigation.pushstate.js',
 	'jquery.mobile.transition.js',

js/jquery.mobile.core.js

@@ -58,33 +58,6 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
 		// Set default dialog transition - 'none' for no transitions
 		defaultDialogTransition: "pop",
 
-		// Show loading message during Ajax requests
-		// if false, message will not appear, but loading classes will still be toggled on html el
-		loading: {
-			// When the text is visible, what theme does the loading box use?
-			theme: undefined,
-
-			// Should the text be visble in the loading message?
-			textVisible: undefined,
-
-			// by default the loading message is just text and an optional spinner
-			// here we provide for the replacement of the popup with markup
-			html: undefined,
-
-			// users updating this setting to custom values will override
-			// $.mobile.loadingMessage value otherwise it will default to it
-			text: undefined
-		},
-
-		// DEPRECATED Should the text be visble in the loading message?
-		loadingMessageTextVisible: false,
-
-		// DEPRECATED When the text is visible, what theme does the loading box use?
-		loadingMessageTheme: "a",
-
-		// DEPRECATED default message setting
-		loadingMessage: "loading",
-
 		// Error response message - appears when an Ajax page request fails
 		pageLoadErrorMessage: "Error Loading Page",
 

js/jquery.mobile.init.js

@@ -35,109 +35,12 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
 	// this ensures the rendering class is removed after 5 seconds, so content is visible and accessible
 	setTimeout( hideRenderingClass, 5000 );
 
-	// loading div which appears during Ajax requests
-	// will not appear if $.mobile.loadingMessage is false
-	var loaderClass = "ui-loader",
-		$loader = $( "<div class='" + loaderClass + "'><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
-
-	// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
-	function fakeFixLoader(){
-		var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
-
-		$loader
-			.css({
-				top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
-				activeBtn.length && activeBtn.offset().top || 100
-			});
-	}
-
-	// check position of loader to see if it appears to be "fixed" to center
-	// if not, use abs positioning
-	function checkLoaderPosition(){
-		var offset = $loader.offset(),
-			scrollTop = $window.scrollTop(),
-			screenHeight = $.mobile.getScreenHeight();
-
-		if( offset.top < scrollTop || (offset.top - scrollTop) > screenHeight ) {
-			$loader.addClass( "ui-loader-fakefix" );
-			fakeFixLoader();
-			$window
-				.unbind( "scroll", checkLoaderPosition )
-				.bind( "scroll", fakeFixLoader );
-		}
-	}
-
 	//remove initial build class (only present on first pageshow)
 	function hideRenderingClass(){
 		$html.removeClass( "ui-mobile-rendering" );
 	}
 
 	$.extend($.mobile, {
-		// Turn on/off page loading message. Theme doubles as an object argument
-		// with the following shape: { theme: '', text: '', html: '', textVisible: '' }
-		// NOTE that the $.mobile.loading* settings and params past the first are deprecated
-		showPageLoadingMsg: function( theme, msgText, textonly ) {
-			var loadSettings = $.mobile.loading;
-
-			// support for object literal params
-			if( $.type(theme) == "object" ){
-				loadSettings = theme;
-
-				// prefer object property from the param or the $.mobile.loading object
-				// then the old theme setting
-				theme = loadSettings.theme || $.mobile.loadingMessageTheme;
-			} else {
-				theme = theme || loadSettings.theme || $.mobile.loadingMessageTheme;
-			}
-
-			$html.addClass( "ui-loading" );
-
-			// if any of these things are provided make the necessary alterations
-			if ( $.mobile.loadingMessage || msgText || loadSettings.text || loadSettings.html ) {
-				// text visibility from argument takes priority
-				var textVisible = textonly, message, $header;
-
-				// boolean values require a bit more work :P
-				// support object properties and old settings
-				if( loadSettings.textVisible != undefined ) {
-					textVisible = loadSettings.textVisible;
-				} else {
-					textVisible = $.mobile.loadingMessageTextVisible;
-				}
-
-				$loader.attr( "class", loaderClass + " ui-corner-all ui-body-" + theme + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) );
-
-				// TODO verify that jquery.fn.html is ok to use in both cases here
-				//      this might be overly defensive in preventing unknowing xss
-				// if the html attribute is defined on the loading settings, use that
-				// otherwise use the fallbacks from above
-				if( loadSettings.html ) {
-					$loader.html( loadSettings.html );
-				} else {
-					// prefer the param, then the settings object then loading message
-					message = msgText || loadSettings.text || $.mobile.loadingMessage;
-					$loader.find( "h1" )
-						.text( message );
-				}
-
-				$loader.appendTo( $.mobile.pageContainer );
-
-				checkLoaderPosition();
-				$window.bind( "scroll", checkLoaderPosition );
-			}
-		},
-
-		hidePageLoadingMsg: function() {
-			$html.removeClass( "ui-loading" );
-
-			if( $.mobile.loadingMessage ){
-				$loader.removeClass( "ui-loader-fakefix" );
-			}
-
-			$( window ).unbind( "scroll", fakeFixLoader );
-			$( window ).unbind( "scroll", checkLoaderPosition );
-		},
-
 		// find and enhance the pages in the dom and transition to the first page.
 		initializePage: function() {
 			// find present pages

js/jquery.mobile.loading.js

@@ -0,0 +1,174 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: packaged loading message functionality
+//>>label: loading message
+//>>group: Navigation
+
+define( [
+	"jquery",
+	"./jquery.mobile.core",
+	"./jquery.mobile.init" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+
+(function( $, window ) {
+
+	// DEPRECATED
+	// NOTE global mobile object settings
+	$.extend($.mobile, {
+		// DEPRECATED Should the text be visble in the loading message?
+		loadingMessageTextVisible: undefined,
+
+		// DEPRECATED When the text is visible, what theme does the loading box use?
+		loadingMessageTheme: undefined,
+
+		// DEPRECATED default message setting
+		loadingMessage: undefined,
+
+		// DEPRECATED
+		// Turn on/off page loading message. Theme doubles as an object argument
+		// with the following shape: { theme: '', text: '', html: '', textVisible: '' }
+		// NOTE that the $.mobile.loading* settings and params past the first are deprecated
+		showPageLoadingMsg: function( theme, msgText, textonly ) {
+			this.loaderWidget.loader( 'show', theme, msgText, textonly );
+		},
+
+		// DEPRECATED
+		hidePageLoadingMsg: function() {
+			this.loaderWidget.loader( 'hide' );
+		}
+	});
+
+	// TODO move loader class down into the widget settings
+	var loaderClass = "ui-loader", $html = $( "html" ), $window = $( window );
+
+	$.widget( "mobile.loader", {
+		// NOTE we cannot use the options object because the widget
+		//      won't force the undefined value on the options prototype
+		//      and we need them to be undefined to use the global config
+		//      defaults until we can remove those
+		options: {
+			// When the text is visible, what theme does the loading box use?
+			theme: "a",
+
+			// Should the text be visble in the loading message?
+			textVisible: false,
+
+			// by default the loading message is just text and an optional spinner
+			// here we provide for the replacement of the popup with markup
+			html: "",
+
+			// users updating this setting to custom values will override
+			// $.mobile.loadingMessage value otherwise it will default to it
+			text: "loading"
+		},
+
+		defaultHtml: "<div class='" + loaderClass + "'>" +
+								 "<span class='ui-icon ui-icon-loading'></span>" +
+								 "<h1></h1>" +
+								 "</div>",
+
+		// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
+		fakeFixLoader: function(){
+			var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
+
+			this.element
+				.css({
+					top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
+						activeBtn.length && activeBtn.offset().top || 100
+				});
+		},
+
+		// check position of loader to see if it appears to be "fixed" to center
+		// if not, use abs positioning
+		checkLoaderPosition: function(){
+			var offset = this.element.offset(),
+				scrollTop = $window.scrollTop(),
+				screenHeight = $.mobile.getScreenHeight();
+
+			if( offset.top < scrollTop || (offset.top - scrollTop) > screenHeight ) {
+				this.element.addClass( "ui-loader-fakefix" );
+				this.fakeFixLoader();
+				$window
+					.unbind( "scroll", this.checkLoaderPosition )
+					.bind( "scroll", this.fakeFixLoader );
+			}
+		},
+
+		resetHtml: function() {
+			this.element.html( $(this.defaultHtml).html() );
+		},
+
+		// Turn on/off page loading message. Theme doubles as an object argument
+		// with the following shape: { theme: '', text: '', html: '', textVisible: '' }
+		// NOTE that the $.mobile.loading* settings and params past the first are deprecated
+		// TODO sweet jesus we need to break some of this out
+		show: function( theme, msgText, textonly ) {
+			this.resetHtml();
+
+			var loadSettings;
+
+			// support for object literal params
+			if( $.type(theme) == "object" ){
+				loadSettings = $.extend({}, this.options, theme);
+
+				// prefer object property from the param or the $.mobile.loading object
+				// then the old theme setting
+				theme = loadSettings.theme || $.mobile.loadingMessageTheme;
+			} else {
+				loadSettings = this.options;
+				theme = theme || $.mobile.loadingMessageTheme || loadSettings.theme;
+			}
+
+			$html.addClass( "ui-loading" );
+
+			if ( $.mobile.loadingMessage != false || loadSettings.html ) {
+				// text visibility from argument takes priority
+				var textVisible = textonly, message, $header;
+
+				// boolean values require a bit more work :P
+				// support object properties and old settings
+				if( $.mobile.loadingMessageTextVisible != undefined ) {
+					textVisible = $.mobile.loadingMessageTextVisible;
+				} else {
+					textVisible = loadSettings.textVisible;
+				}
+
+				this.element.attr( "class", loaderClass + " ui-corner-all ui-body-" + theme + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) );
+
+				// TODO verify that jquery.fn.html is ok to use in both cases here
+				//      this might be overly defensive in preventing unknowing xss
+				// if the html attribute is defined on the loading settings, use that
+				// otherwise use the fallbacks from above
+				if( loadSettings.html ) {
+					this.element.html( loadSettings.html );
+				} else {
+					// prefer the param, then the settings object then loading message
+					message = msgText || $.mobile.loadingMessage || loadSettings.text;
+					this.element.find( "h1" )
+						.text( message );
+				}
+
+				this.element.appendTo( $.mobile.pageContainer );
+
+				this.checkLoaderPosition();
+				$window.bind( "scroll", $.proxy(this.checkLoaderPosition, this));
+			}
+		},
+
+		hide: function() {
+			$html.removeClass( "ui-loading" );
+
+			if( $.mobile.loadingMessage ){
+				this.element.removeClass( "ui-loader-fakefix" );
+			}
+
+			$( window ).unbind( "scroll", $.proxy(this.fakeFixLoader, this) );
+			$( window ).unbind( "scroll", $.proxy(this.checkLoaderPosition, this) );
+		}
+	});
+
+	$.mobile.loaderWidget = $( $.mobile.loader.prototype.defaultHtml ).loader();
+})(jQuery, this);
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");

tests/unit/init/index.html

@@ -13,6 +13,7 @@
 	<!-- added explicitly for library reloading (see testHelper )  -->
 	<script src="../../../js/jquery.mobile.core.js"></script>
 	<script src="../../../js/jquery.mobile.init.js"></script>
+	<script src="../../../js/jquery.mobile.loading.js"></script>
 	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
 	<link rel="stylesheet" href="../../../external/qunit.css"/>