Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: jquery/jquery-mobile
...
head fork: jquery/jquery-mobile
Checking mergeability… Don't worry, you can still create the pull request.
  • 6 commits
  • 3 files changed
  • 0 commit comments
  • 2 contributors
View
27 js/jquery.mobile.core.js
@@ -60,17 +60,34 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
// Show loading message during Ajax requests
// if false, message will not appear, but loading classes will still be toggled on html el
- loadingMessage: "loading",
+ loading: {
+ // When the text is visible, what theme does the loading box use?
+ theme: undefined,
- // Error response message - appears when an Ajax page request fails
- pageLoadErrorMessage: "Error Loading Page",
+ // 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
+ },
- // Should the text be visble in the loading message?
+ // DEPRECATED Should the text be visble in the loading message?
loadingMessageTextVisible: false,
- // When the text is visible, what theme does the loading box use?
+ // 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",
+
// For error messages, which theme does the box uses?
pageLoadErrorMessageTheme: "e",
View
52 js/jquery.mobile.init.js
@@ -73,22 +73,54 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
}
$.extend($.mobile, {
- // turn on/off page loading message.
+ // 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 ( $.mobile.loadingMessage ) {
+ // 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 || $.mobile.loadingMessageTextVisible;
+ 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;
+ }
- theme = theme || $.mobile.loadingMessageTheme,
+ $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
- .attr( "class", loaderClass + " ui-corner-all ui-body-" + ( theme || "a" ) + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) )
- .find( "h1" )
- .text( msgText || $.mobile.loadingMessage )
- .end()
- .appendTo( $.mobile.pageContainer );
+ $loader.appendTo( $.mobile.pageContainer );
checkLoaderPosition();
$window.bind( "scroll", checkLoaderPosition );
View
72 tests/unit/init/init_core.js
@@ -150,79 +150,72 @@
same($("#bar").jqmData('url'), "bak");
});
- asyncTest( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
+ test( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
$.mobile.loadingMessage = false;
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- ok(!$(".ui-loader").length, "no ui-loader element");
- start();
- }, 500);
+ ok(!$(".ui-loader").length, "no ui-loader element");
});
- asyncTest( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
+ test( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
$.mobile.loadingMessage = true;
+ $.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loading").length, 0, "page should not be in the loading state");
- start();
- }, 500);
+ same($(".ui-loading").length, 0, "page should not be in the loading state");
});
- asyncTest( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
- expect( 1 );
+ test( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
$.mobile.loadingMessage = true;
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loading").length, 1, "page should be in the loading state");
- start();
- }, 500);
+ same($(".ui-loading").length, 1, "page should be in the loading state");
});
- asyncTest( "page loading should contain default loading message", function(){
- expect( 1 );
+ test( "page loading should contain default loading message", function(){
reloadCoreNSandInit();
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "loading");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "loading");
});
- asyncTest( "page loading should contain custom loading message", function(){
+ test( "page loading should contain custom loading message", function(){
$.mobile.loadingMessage = "foo";
$.testHelper.reloadLib(libName);
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "foo");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "foo");
});
- asyncTest( "page loading should contain custom loading message when set during runtime", function(){
+ test( "page loading should contain custom loading message when set at runtime", function(){
$.mobile.loadingMessage = "bar";
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "bar");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "bar");
});
+ test( "page loading should contain custom loading message when used in param object", function() {
+ $.mobile.showPageLoadingMsg({ text: "bak" });
+ same($(".ui-loader h1").text(), "bak", "loader has custom message 'bak'");
+ });
+
+ test( "page loading should contain different theme when used in param object", function() {
+ $.mobile.showPageLoadingMsg({ theme: "l" });
+ ok($(".ui-loader").hasClass( "ui-body-l"), "loader has theme l");
+ });
- // NOTE: the next two tests work on timeouts that assume a page will be created within 2 seconds
- // it'd be great to get these using a more reliable callback or event
+ test( "page loading should contain new html when provided", function() {
+ $.mobile.showPageLoadingMsg({ html: "<div class='foo'>foo</div>" });
+ same($(".ui-loader > div.foo").length, 1, "loader has a custom html");
+ });
+ // NOTE the next two tests work on timeouts that assume a page will be
+ // created within 2 seconds it'd be great to get these using a more
+ // reliable callback or event
asyncTest( "page does auto-initialize at domready when autoinitialize option is true (default) ", function(){
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" )
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" );
$(document).one("mobileinit", function(){
$.mobile.autoInitializePage = true;
@@ -245,7 +238,7 @@
$.mobile.autoInitializePage = false;
});
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" )
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" );
location.hash = "";
@@ -264,8 +257,5 @@
start();
}, 2000);
});
-
-
-
});
})(jQuery);

No commit comments for this range

Something went wrong with that request. Please try again.