Loader: Attach to body when no $.mobile.pageContainer found

Gabriel Schulhof · Gabriel Schulhof · commit de43d3f103c7 · 2014-10-25T00:09:16.000+03:00
Closes jquery-archivegh-7761 Fixes jquery-archivegh-7760
diff --git a/js/widgets/loader.js b/js/widgets/loader.js
@@ -3,7 +3,11 @@
 //>>label: Loading Message
 //>>group: Widgets
 
-define( [ "jquery",	"../core", "../widget" ], function( jQuery ) {
+define( [
+	"jquery",
+	"../helpers",
+	"../defaults",
+	"../widget" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 
 (function( $ ) {
@@ -114,8 +118,11 @@ define( [ "jquery",	"../core", "../widget" ], function( jQuery ) {
 				this.element.find( "h1" ).text( message );
 			}
 
-			// attach the loader to the DOM
-			this.element.appendTo( $.mobile.pageContainer );
+			// If the pagecontainer widget has been defined we may use the :mobile-pagecontainer
+			// and attach to the element on which the pagecontainer widget has been defined. If not,
+			// we attach to the body.
+			this.element.appendTo( $.mobile.pagecontainer ?
+				$( ":mobile-pagecontainer" ) : $( "body" ) );
 
 			// check that the loader is visible
 			this.checkLoaderPosition();
@@ -131,8 +138,8 @@ define( [ "jquery",	"../core", "../widget" ], function( jQuery ) {
 				this.element.removeClass( "ui-loader-fakefix" );
 			}
 
-			$.mobile.window.unbind( "scroll", this.fakeFixLoader );
-			$.mobile.window.unbind( "scroll", this.checkLoaderPosition );
+			this.window.unbind( "scroll", this.fakeFixLoader );
+			this.window.unbind( "scroll", this.checkLoaderPosition );
 		}
 	});
 
diff --git a/tests/unit/individual-modules/loader-tests.html b/tests/unit/individual-modules/loader-tests.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Loader Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../js/requirejs.config.js"></script>
+	<script src="../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../../tests/jquery.testHelper.js"></script>
+
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css"/>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+	<link rel="stylesheet" href="../../jqm-tests.css"/>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[
+				"widgets/loader"
+			],
+			[
+				"../../jquery.setNameSpace.immediately.js"
+			],
+			[
+				"loader_core.js"
+			]
+		]);
+	</script>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+	<div id="qunit"></div>
+</body>
+</html>
diff --git a/tests/unit/individual-modules/loader_core.js b/tests/unit/individual-modules/loader_core.js
@@ -0,0 +1,10 @@
+test( "Loader attaches to DOM when running individually", function() {
+	var loader = $.mobile.loading( "show" );
+
+	deepEqual( $.contains( document, loader[ 0 ] ), true,
+		"Document contains the loader after it is shown" );
+
+	deepEqual( loader.is( ":visible" ), true, "Loader is visible when shown" );
+
+	$.mobile.loading( "hide" );
+});
