Waiter

docs

The Waiter class automates the little spinning Ajax indicator functionality that users expect when something on the page is being processed. It greys out the area being updated and makes it un-clickable until the update completes (or it fails).

Here's an example of Waiter doing it's thing:

The html I'm using:

<div id="waiterExample" style="width: 400px; height: 100px;border: 1px solid black; background: #ccc;">
I'm a div with some stuff in it...
</div>

var waiterExample = new Waiter($('waiterExample'));
waiterExample.start();
waiterExample.stop.delay(2000, waiterExample); //hide after 2 sec

Waiter has a few options, most to do with the display of the layer. You can pass in styles for the spinner image, styles for the opacity layer, and options for the opacity effect (see Fx.Styles).

Here are the options:

• baseHref - (string) url prefix for the img src (see below); defaults to 'http://www.cnet.com/html/rb/assets/global/waiter/'
• img - (object or false) options for the image (see below); if set to false no image will be injected.
• containerPosition - (object) options passed to Element:setPosition for the container of the message; relativeTo is set to the target above automatically (but can be overwritten).
• containerProps - (object) attributes for the container div that contains the (optional) message and the image
• msg - (mixed, optional) message placed above the spinner image (as in "Please wait..."). Can be a string or an element.
• msgProps - (object) attributes for the container of the (optional) message
• layer - (object) options for the overlay layer (see below)
• fxOptions - (object) options passed to the effects used to transition the overlay and the image opacity
• useIframeShim - (boolean) true: an IframeShim will be used underneath the modal layer; false: no shim is used; defaults to true
• iframeShimOptions - (object) options passed to IframeShim

	baseHref: 'http://www.cnet.com/html/rb/assets/global/waiter/',
	containerProps: {
		styles: {
			position: 'absolute',
			'text-align': 'center'
		},
		'class':'waiterContainer'
	},
	containerPosition: {},
	msg: false,
	msgProps: {
		styles: {
			'text-align': 'center',
			fontWeight: 'bold'
		},
		'class':'waiterMsg'
	},
	img: {
		src: 'waiter.gif',
		styles: {
			width: 24,
			height: 24
		},
		'class':'waiterImg'
	},
	layer:{
		styles: {
			width: 0,
			height: 0,
			position: 'absolute',
			zIndex: 999,
			display: 'none',
			opacity: 0.9,
			background: '#fff'
		},
		'class': 'waitingDiv'
	},
	useIframeShim: true,
	fxOptions: {}

You can get the default spinner image by downloading our assets for your own server. See: External Assets

Additionally, there are two shortcuts on the Element class that let you quickly display a *Waiter*. *Element.wait* turns it on and *Element.release* turns the waiter off.

$('waiterExample2').wait();
 
(function(){
	$('waiterExample2').release();
}).delay(1000);

You can pass options along to these two methods - see the docs.

If you're using the Request.HTML class to update content on a page and you have Waiter.js included in your environment, you can just set a new option to use a Waiter automatically on the content area being updated:

new Request.HTML({
	url: '/Ajax.Request.Example.html',
  update: $('ajaxWaiterExample'),
  /* useWaiter will automatically mask out $('ajaxWaiterExample') */
  useWaiter: true,
  /* waiterOptions is the options object for the Waiter class */
  waiterOptions: {
    fxOptions: {duration: 500}
  }
}).send();