Permalink
Browse files

move loader into a module

  • Loading branch information...
1 parent df4ec8e commit 61dd021f078de8ac45377771cd33dd0d5b1c2ce9 @johnbender johnbender committed May 9, 2012
Showing with 161 additions and 103 deletions.
  1. +1 −0 js/index.php
  2. +2 −0 js/jquery.mobile.core.js
  3. +2 −88 js/jquery.mobile.init.js
  4. +147 −0 js/jquery.mobile.loading.js
  5. +1 −0 tests/unit/init/index.html
  6. +8 −15 tests/unit/init/init_core.js
View
@@ -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',
@@ -61,6 +61,7 @@ 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
loading: {
+ config: {
// When the text is visible, what theme does the loading box use?
theme: undefined,
@@ -74,6 +75,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
// 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?
@@ -35,38 +35,6 @@ 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" );
@@ -77,65 +45,11 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
// 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 );
- }
+ this.loading.show.apply(this.loading, arguments);
},
hidePageLoadingMsg: function() {
- $html.removeClass( "ui-loading" );
-
- if( $.mobile.loadingMessage ){
- $loader.removeClass( "ui-loader-fakefix" );
- }
-
- $( window ).unbind( "scroll", fakeFixLoader );
- $( window ).unbind( "scroll", checkLoaderPosition );
+ this.loading.hide.apply(this.loading, arguments);
},
// find and enhance the pages in the dom and transition to the first page.
@@ -0,0 +1,147 @@
+//>>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 ) {
+ // loading div which appears during Ajax requests
+ // will not appear if $.mobile.loadingMessage is false
+ var loaderClass = "ui-loader", $html = $( "html" ), $window = $( window ),
+ $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(){
+ 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 );
+ }
+ }
+
+ $.extend($.mobile.loading, {
+ defaultHtml: "<div class='" + loaderClass + "'>" +
+ "<span class='ui-icon ui-icon-loading'></span>" +
+ "<h1></h1>" +
+ "</div>",
+
+ // Show loading message during Ajax requests
+ // if false, message will not appear, but loading classes will still be toggled on html el
+ config: {
+ // 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
+ },
+
+ resetHtml: function() {
+ $loader.remove();
+ $loader= $( this.defaultHtml );
+ },
+
+ // 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
+ show: function( theme, msgText, textonly ) {
+ this.resetHtml();
+
+ var loadSettings = $.mobile.loading.config;
+
+ // 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 );
+ }
+ },
+
+ hide: function() {
+ $html.removeClass( "ui-loading" );
+
+ if( $.mobile.loadingMessage ){
+ $loader.removeClass( "ui-loader-fakefix" );
+ }
+
+ $( window ).unbind( "scroll", fakeFixLoader );
+ $( window ).unbind( "scroll", checkLoaderPosition );
+ }
+ });
+
+ $loader = $( $.mobile.loading.defaultHtml );
+})(jQuery, this);
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
@@ -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"/>
@@ -7,7 +7,6 @@
coreLib = 'jquery.mobile.core.js',
extendFn = $.extend,
originalLoadingMessage = $.mobile.loadingMessage,
- originalConfigObject = $.mobile.loading,
setGradeA = function(value) { $.mobile.gradeA = function(){ return value; }; },
reloadCoreNSandInit = function(){
$.testHelper.reloadLib(coreLib);
@@ -21,25 +20,23 @@
// NOTE reset for gradeA tests
$('html').removeClass('ui-mobile');
- $.mobile.showPageLoadingMsg();
- loader = $('.ui-loader').html();
-
- // NOTE reset for showPageLoadingMsg/hidePageLoadingMsg tests
$('.ui-loader').remove();
},
teardown: function(){
$.extend = extendFn;
- // NOTE reset for showPageLoadingMsg/hidePageLoadingMsg tests
- $.mobile.showPageLoadingMsg({ html: loader });
$('.ui-loader').remove();
// clear the classes added by reloading the init
$("html").attr('class', '');
$.mobile.loadingMessage = originalLoadingMessage;
- $.mobile.loading = originalConfigObject;
+
+ // reset config
+ for( key in $.mobile.loading.config) {
+ $.mobile.loading.config[key] = undefined;
+ }
}
});
@@ -211,9 +208,7 @@
});
test( "page loading should contain new html when provided, prefers passed param", function() {
- $.mobile.loading = {
- html: "<div class='baz'>foo</div>"
- };
+ $.mobile.loading.config.html = "<div class='baz'>foo</div>";
$.mobile.showPageLoadingMsg({
html: "<div class=\"foo\"></div>"
@@ -226,10 +221,8 @@
$.mobile.loadingMessage = "fozzle";
$.mobile.loadingMessageTheme = "x";
- $.mobile.loading = {
- text: "fizzle",
- theme: "z"
- };
+ $.mobile.loading.config.text = "fizzle";
+ $.mobile.loading.config.theme = "z";
$.mobile.showPageLoadingMsg();
ok($(".ui-loader").hasClass( "ui-body-z" ), "has theme z");

0 comments on commit 61dd021

Please sign in to comment.