libs/js/jquery-mobile-1.2.0/js/widgets/loader.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: packaged loading message functionality
   3 //>>label: loading message
   4 //>>group: Navigation
   5
   6 define( [ "jquery",     "../jquery.mobile.core", "../jquery.mobile.widget" ], function( $ ) {
   7 //>>excludeEnd("jqmBuildExclude");
   8
   9 (function( $, window ) {
  10         // DEPRECATED
  11         // NOTE global mobile object settings
  12         $.extend( $.mobile, {
  13                 // DEPRECATED Should the text be visble in the loading message?
  14                 loadingMessageTextVisible: undefined,
  15
  16                 // DEPRECATED When the text is visible, what theme does the loading box use?
  17                 loadingMessageTheme: undefined,
  18
  19                 // DEPRECATED default message setting
  20                 loadingMessage: undefined,
  21
  22                 // DEPRECATED
  23                 // Turn on/off page loading message. Theme doubles as an object argument
  24                 // with the following shape: { theme: '', text: '', html: '', textVisible: '' }
  25                 // NOTE that the $.mobile.loading* settings and params past the first are deprecated
  26                 showPageLoadingMsg: function( theme, msgText, textonly ) {
  27                         $.mobile.loading( 'show', theme, msgText, textonly );
  28                 },
  29
  30                 // DEPRECATED
  31                 hidePageLoadingMsg: function() {
  32                         $.mobile.loading( 'hide' );
  33                 },
  34
  35                 loading: function() {
  36                         this.loaderWidget.loader.apply( this.loaderWidget, arguments );
  37                 }
  38         });
  39
  40         // TODO move loader class down into the widget settings
  41         var loaderClass = "ui-loader", $html = $( "html" ), $window = $( window );
  42
  43         $.widget( "mobile.loader", {
  44                 // NOTE if the global config settings are defined they will override these
  45                 //      options
  46                 options: {
  47                         // the theme for the loading message
  48                         theme: "a",
  49
  50                         // whether the text in the loading message is shown
  51                         textVisible: false,
  52
  53                         // custom html for the inner content of the loading message
  54                         html: "",
  55
  56                         // the text to be displayed when the popup is shown
  57                         text: "loading"
  58                 },
  59
  60                 defaultHtml: "<div class='" + loaderClass + "'>" +
  61                         "<span class='ui-icon ui-icon-loading'></span>" +
  62                         "<h1></h1>" +
  63                         "</div>",
  64
  65                 // For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
  66                 fakeFixLoader: function() {
  67                         var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
  68
  69                         this.element
  70                                 .css({
  71                                         top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
  72                                                 activeBtn.length && activeBtn.offset().top || 100
  73                                 });
  74                 },
  75
  76                 // check position of loader to see if it appears to be "fixed" to center
  77                 // if not, use abs positioning
  78                 checkLoaderPosition: function() {
  79                         var offset = this.element.offset(),
  80                                 scrollTop = $window.scrollTop(),
  81                                 screenHeight = $.mobile.getScreenHeight();
  82
  83                         if ( offset.top < scrollTop || ( offset.top - scrollTop ) > screenHeight ) {
  84                                 this.element.addClass( "ui-loader-fakefix" );
  85                                 this.fakeFixLoader();
  86                                 $window
  87                                         .unbind( "scroll", this.checkLoaderPosition )
  88                                         .bind( "scroll", this.fakeFixLoader );
  89                         }
  90                 },
  91
  92                 resetHtml: function() {
  93                         this.element.html( $( this.defaultHtml ).html() );
  94                 },
  95
  96                 // Turn on/off page loading message. Theme doubles as an object argument
  97                 // with the following shape: { theme: '', text: '', html: '', textVisible: '' }
  98                 // NOTE that the $.mobile.loading* settings and params past the first are deprecated
  99                 // TODO sweet jesus we need to break some of this out
 100                 show: function( theme, msgText, textonly ) {
 101                         var textVisible, message, $header, loadSettings;
 102
 103                         this.resetHtml();
 104
 105                         // use the prototype options so that people can set them globally at
 106                         // mobile init. Consistency, it's what's for dinner
 107                         if ( $.type(theme) === "object" ) {
 108                                 loadSettings = $.extend( {}, this.options, theme );
 109
 110                                 // prefer object property from the param then the old theme setting
 111                                 theme = loadSettings.theme || $.mobile.loadingMessageTheme;
 112                         } else {
 113                                 loadSettings = this.options;
 114
 115                                 // here we prefer the them value passed as a string argument, then
 116                                 // we prefer the global option because we can't use undefined default
 117                                 // prototype options, then the prototype option
 118                                 theme = theme || $.mobile.loadingMessageTheme || loadSettings.theme;
 119                         }
 120
 121                         // set the message text, prefer the param, then the settings object
 122                         // then loading message
 123                         message = msgText || $.mobile.loadingMessage || loadSettings.text;
 124
 125                         // prepare the dom
 126                         $html.addClass( "ui-loading" );
 127
 128                         if ( $.mobile.loadingMessage !== false || loadSettings.html ) {
 129                                 // boolean values require a bit more work :P, supports object properties
 130                                 // and old settings
 131                                 if ( $.mobile.loadingMessageTextVisible !== undefined ) {
 132                                         textVisible = $.mobile.loadingMessageTextVisible;
 133                                 } else {
 134                                         textVisible = loadSettings.textVisible;
 135                                 }
 136
 137                                 // add the proper css given the options (theme, text, etc)
 138                                 // Force text visibility if the second argument was supplied, or
 139                                 // if the text was explicitly set in the object args
 140                                 this.element.attr("class", loaderClass +
 141                                         " ui-corner-all ui-body-" + theme +
 142                                         " ui-loader-" + ( textVisible || msgText || theme.text ? "verbose" : "default" ) +
 143                                         ( loadSettings.textonly || textonly ? " ui-loader-textonly" : "" ) );
 144
 145                                 // TODO verify that jquery.fn.html is ok to use in both cases here
 146                                 //      this might be overly defensive in preventing unknowing xss
 147                                 // if the html attribute is defined on the loading settings, use that
 148                                 // otherwise use the fallbacks from above
 149                                 if ( loadSettings.html ) {
 150                                         this.element.html( loadSettings.html );
 151                                 } else {
 152                                         this.element.find( "h1" ).text( message );
 153                                 }
 154
 155                                 // attach the loader to the DOM
 156                                 this.element.appendTo( $.mobile.pageContainer );
 157
 158                                 // check that the loader is visible
 159                                 this.checkLoaderPosition();
 160
 161                                 // on scroll check the loader position
 162                                 $window.bind( "scroll", $.proxy( this.checkLoaderPosition, this ) );
 163                         }
 164                 },
 165
 166                 hide: function() {
 167                         $html.removeClass( "ui-loading" );
 168
 169                         if ( $.mobile.loadingMessage ) {
 170                                 this.element.removeClass( "ui-loader-fakefix" );
 171                         }
 172
 173                         $( window ).unbind( "scroll", $.proxy( this.fakeFixLoader, this) );
 174                         $( window ).unbind( "scroll", $.proxy( this.checkLoaderPosition, this ) );
 175                 }
 176         });
 177
 178         $window.bind( 'pagecontainercreate', function() {
 179                 $.mobile.loaderWidget = $.mobile.loaderWidget || $( $.mobile.loader.prototype.defaultHtml ).loader();
 180         });
 181 })(jQuery, this);
 182
 183 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 184 });
 185 //>>excludeEnd("jqmBuildExclude");