include/javascript/jquery/jquery.showLoading.js

   1 /*
   2  * jQuery showLoading plugin v1.0
   3  *
   4  * Copyright (c) 2009 Jim Keller
   5  * Context - http://www.contextllc.com
   6  *
   7  * Dual licensed under the MIT and GPL licenses.
   8  *
   9  */
  10
  11         jQuery.fn.showLoading = function(options) {
  12
  13                 var indicatorID;
  14                 var settings = {
  15                         'addClass': '',
  16                         'beforeShow': '',
  17                         'afterShow': '',
  18                         'hPos': 'center',
  19                         'vPos': 'center',
  20                         'indicatorZIndex' : 5001,
  21                         'overlayZIndex': 5000,
  22                         'parent': '',
  23                         'marginTop': 0,
  24                         'marginLeft': 0,
  25                         'overlayWidth': null,
  26                         'overlayHeight': null
  27                 };
  28
  29                 jQuery.extend(settings, options);
  30
  31         var loadingDiv = jQuery('<div></div>');
  32                 var overlayDiv = jQuery('<div></div>');
  33
  34                 // Set up ID and classes
  35                 if ( settings.indicatorID ) {
  36                         indicatorID = settings.indicatorID;
  37                 }
  38                 else {
  39                         indicatorID = jQuery(this).attr('id');
  40                 }
  41
  42                 jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
  43                 jQuery(loadingDiv).addClass('loading-indicator-ui');
  44
  45                 if ( settings.addClass ){
  46                         jQuery(loadingDiv).addClass(settings.addClass);
  47                 }
  48
  49
  50                 // Create the overlay
  51                 jQuery(overlayDiv).css('display', 'none');
  52
  53                 // Append to body, otherwise position() doesn't work on Webkit-based browsers
  54                 jQuery(document.body).append(overlayDiv);
  55
  56                 // Set overlay classes
  57                 jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
  58
  59                 jQuery(overlayDiv).addClass('loading-indicator-ui-overlay');
  60
  61                 if ( settings.addClass ){
  62                         jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
  63                 }
  64
  65                 // Set overlay position
  66
  67                 var overlay_width;
  68                 var overlay_height;
  69
  70                 var border_top_width = jQuery(this).css('border-top-width');
  71                 var border_left_width = jQuery(this).css('border-left-width');
  72
  73                 //
  74                 // IE will return values like 'medium' as the default border,
  75                 // but we need a number
  76                 //
  77                 border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
  78                 border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
  79
  80                 var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
  81                 var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
  82
  83                 if ( settings.overlayWidth !== null ) {
  84                         overlay_width = settings.overlayWidth;
  85                 }
  86                 else {
  87                         overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
  88                 }
  89
  90                 if ( settings.overlayHeight !== null ) {
  91                         overlay_height = settings.overlayWidth;
  92                 }
  93                 else {
  94                         overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
  95                 }
  96
  97
  98                 jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
  99                 jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
 100
 101                 jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
 102                 jQuery(overlayDiv).css('position', 'absolute');
 103
 104                 jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
 105                 jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
 106
 107                 // Set any custom overlay CSS
 108                 if ( settings.overlayCSS ) {
 109                         jQuery(overlayDiv).css ( settings.overlayCSS );
 110                 }
 111
 112
 113                 //
 114                 // We have to append the element to the body first
 115                 // or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
 116                 //
 117                 jQuery(loadingDiv).css('display', 'none');
 118                 jQuery(document.body).append(loadingDiv);
 119
 120                 jQuery(loadingDiv).css('position', 'absolute');
 121                 jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
 122
 123                 // Set top margin
 124
 125                 var indicatorTop = overlay_top_pos;
 126
 127                 if ( settings.marginTop ) {
 128                         indicatorTop += parseInt(settings.marginTop);
 129                 }
 130
 131                 var indicatorLeft = overlay_left_pos;
 132
 133                 if ( settings.marginLeft ) {
 134                         indicatorLeft += parseInt(settings.marginTop);
 135                 }
 136
 137
 138                 // set horizontal position
 139                 if ( settings.hPos.toString().toLowerCase() == 'center' ) {
 140                         jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString()  + 'px');
 141                 }
 142                 else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
 143                         jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
 144                 }
 145                 else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
 146                         jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString()  + 'px');
 147                 }
 148                 else {
 149                         jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
 150                 }
 151
 152                 // set vertical position
 153                 if ( settings.vPos.toString().toLowerCase() == 'center' ) {
 154                         jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString()  + 'px');
 155                 }
 156                 else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
 157                         jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
 158                 }
 159                 else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
 160                         jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString()  + 'px');
 161                 }
 162                 else {
 163                         jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
 164                 }
 165
 166                 // Set any custom css for loading indicator
 167                 if ( settings.css ) {
 168                         jQuery(loadingDiv).css ( settings.css );
 169                 }
 170
 171                 // Set up callback options
 172                 var callback_options =
 173                         {
 174                                 'overlay': overlayDiv,
 175                                 'indicator': loadingDiv,
 176                                 'element': this
 177                         };
 178
 179                 // beforeShow callback
 180                 if ( typeof(settings.beforeShow) == 'function' ) {
 181                         settings.beforeShow( callback_options );
 182                 }
 183
 184                 // Show the overlay
 185                 jQuery(overlayDiv).show();
 186
 187
 188                 // Show the loading indicator
 189                 jQuery(loadingDiv).show();
 190
 191                 // afterShow callback
 192                 if ( typeof(settings.afterShow) == 'function' ) {
 193                         settings.afterShow( callback_options );
 194                 }
 195
 196                 return this;
 197          };
 198
 199
 200         jQuery.fn.hideLoading = function(options) {
 201
 202         var settings = {};
 203
 204         jQuery.extend(settings, options);
 205
 206                 if ( settings.indicatorID ) {
 207                         indicatorID = settings.indicatorID;
 208                 }
 209                 else {
 210                         indicatorID = jQuery(this).attr('id');
 211                 }
 212
 213                 jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
 214                 jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
 215
 216                 return this;
 217      };