From 8232059164561d7e53ba99f85c74756e59a74852 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 27 Jan 2012 18:42:22 +0700 Subject: [PATCH] Added an optional 1.0-style loading box design, configurable via a new loadingMessageTextVisible option, which defaults to false for regular loading messages, but is true for internal error messages. In order to support this change, the show loader method was modified with 3 arguments: theme, text, and text-only. Other new core options have been added to configure the theme for default and error message boxes: loadingMessageTheme and pageLoadErrorMessageTheme. --- css/structure/jquery.mobile.core.css | 12 +++++++++--- docs/api/globalconfig.html | 11 +++++++++++ js/jquery.mobile.core.js | 9 +++++++++ js/jquery.mobile.init.js | 17 ++++++++++++----- js/jquery.mobile.navigation.js | 15 ++++++--------- 5 files changed, 47 insertions(+), 17 deletions(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 8b24297f..1e2670a7 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -26,9 +26,15 @@ div.ui-mobile-viewport { overflow-x: hidden; } /* loading screen */ .ui-loading .ui-loader { display: block; } -.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } -.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } -.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; } +.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; } +.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } +.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; padding: 10px; } +.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; } +.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; } +.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; } +.ui-loader-verbose .ui-icon { margin: 0 auto 10px; } +.ui-loader-textonly { padding: 15px; margin-left: -115px; } +.ui-loader-textonly .ui-icon { display: none; } .ui-loader-fakefix { position: absolute; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index da1f1f61..edac11c9 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -121,9 +121,20 @@ $(document).bind("mobileinit", function(){
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
+ +
loadingMessageTheme string, default: "a"
+
Set the theme that the loading message box uses, when text is visible.
pageLoadErrorMessage string, default: "Error Loading Page"
Set the text that appears when a page fails to load through Ajax.
+ +
pageLoadErrorMessageTheme string, default: "e"
+
Set the theme that the error message box uses.
+ +
loadingMessageTextVisible string, default: false
+
Should the text be visible when loading message is shown. (note: currently, the text is always visible for loading errors)
+ +
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery
Any support conditions that must be met in order to proceed.
diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 2bb3b6a0..db61d189 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -63,6 +63,15 @@ define( [ "jquery", "text!../version.txt", "./jquery.mobile.widget" ], function( // Error response message - appears when an Ajax page request fails pageLoadErrorMessage: "Error Loading Page", + + // Should the text be visble in the loading message? + loadingMessageTextVisible: false, + + // When the text is visible, what theme does the loading box use? + loadingMessageTheme: "a", + + // For error messages, which theme does the box uses? + pageLoadErrorMessageTheme: "e", //automatically initialize the DOM when it's ready autoInitializePage: true, diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index c5b45a93..0e14b11e 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -30,7 +30,8 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu // loading div which appears during Ajax requests // will not appear if $.mobile.loadingMessage is false - var $loader = $( "

" ); + var loaderClass = "ui-loader", + $loader = $( "

" ); // For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top function fakeFixLoader(){ @@ -56,14 +57,20 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu $.extend($.mobile, { // turn on/off page loading message. - showPageLoadingMsg: function() { + showPageLoadingMsg: function( theme, msgText, textonly ) { $html.addClass( "ui-loading" ); + if ( $.mobile.loadingMessage ) { - var activeBtn = $( "." + $.mobile.activeBtnClass ).first(); + var activeBtn = $( "." + $.mobile.activeBtnClass ).first(), + theme = theme || $.mobile.loadingMessageTheme, + // text visibility from argument takes priority + textVisible = textonly || $.mobile.loadingMessageTextVisible; + $loader + .attr( "class", loaderClass + " ui-body-" + ( theme || "a" ) + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) ) .find( "h1" ) - .text( $.mobile.loadingMessage ) + .text( msgText || $.mobile.loadingMessage ) .end() .appendTo( $.mobile.pageContainer ); @@ -77,7 +84,7 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu if( $.mobile.loadingMessage ){ $loader.removeClass( "ui-loader-fakefix" ); - } + } $( window ).unbind( "scroll", fakeFixLoader ); }, diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index f9cea378..6c3ba3c1 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -863,18 +863,15 @@ define( [ // Remove loading message. if ( settings.showLoadMsg ) { - + // Remove loading message. hideMsg(); - //show error message - $( "

"+ $.mobile.pageLoadErrorMessage +"

" ) - .css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 }) - .appendTo( settings.pageContainer ) - .delay( 800 ) - .fadeOut( 400, function() { - $( this ).remove(); - }); + // show error message + $.mobile.showPageLoadingMsg( $.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true ); + + // hide after delay + setTimeout( $.mobile.hidePageLoadingMsg, 1500 ); } deferred.reject( absUrl, options );