CNET JS Code Documentation

Class: Waiter

Adds a semi-transparent overlay over a dom element with a 'spinning' ajax icon.

Author: Aaron Newton

Implements

Syntax

new Waiter(target[, options]);
 

Arguments

  1. target - (mixed) A string of the id for an Element or an Element reference to overlay; defaults to document.body
  2. options - (object) a key/value set of options

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

Events

  • onShow - (function) callback to execute when the waiting layer is shown; passed the target element to which the Waiter was attached
  • onHide - (function) callback to execute when the waiting layer is hidden; passed the target element to which the Waiter was attached

Default Element Properties

These are the default properties for all the DOM elements created by the Waiter class. You can pass in your own properties. If you pass in a subset of these properties, the remaining (unspecified) properties will be merged from the default.

baseHref: 'http://www.cnet.com/html/rb/assets/global/waiter/',
containerProps: {
    styles: {
        position: 'absolute',
        display: 'none',
        opacity: 0,
        zIndex: 999,
        '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: 998,
        display: 'none',
        opacity: 0.9,
        background: '#fff'
    },
    'class': 'waitingDiv'
}
 

Example

<div id="myElement">...</div>
 
new Waiter('myElement', {
    baseHref: 'http://myserver.com/art',
    img: {
        src: 'waiter.gif',
        id: 'waitingImg',
        styles: {
            position: 'absolute',
            width: 24,
            height: 24,
            display: 'none',
            opacity: 0,
            zIndex: 999
        }
    },
    layer: {
        id: 'waitingDiv',
        background: '#fff',
        opacity: 0.9
    }
});
 

Waiter Method: toggle

Toggles the waiter over the specified element. If the waiter is currently showing over the specified element, it will hide. Otherwise it will display.

Syntax

myWaiter.toggle(element);
 

Arguments

  1. element - (mixed, optional) A string of the id for an Element or an Element reference to overlay; defaults to the target passed in at initialization, but you can specify a different element if you wish to reuse the class.

Returns

  • (object) This instance of Waiter

Waiter Method: start

Displays the waiter layer.

Syntax

myWaiter.start(element);
 

Arguments

  1. element - (mixed, optional) A string of the id for an Element or an Element reference to overlay; defaults to the target passed in at initialization, but you can specify a different element if you wish to reuse the class.

Returns

  • (object) This instance of Waiter

Waiter Method: stop

Hides the waiter layer.

Syntax

myWaiter.stop();
 

Returns

  • (object) This instance of Waiter

Class: Request.HTML

Extends Request.HTML to add integrated Waiter functionality.

Extends

Syntax

new Request.HTML(options);
 

Arguments

  • options - (object) an object with key/value options

Options

  • all of Request.HTML options PLUS:
  • useWaiter - (boolean) use the Waiter class with this request
  • waiterOptions - (object) the options object for the Waiter class
  • waiterTarget - (mixed) a string of the id for an Element or an Element reference to use instead of the one specifed in the update option. This is useful if you want to overlay a different area (or, say, the parent of the one being updated).

Example

new Reqest.HTML({
    url: '/myHtmlFragment.html',
    update: $('myElement'),
    useWaiter: true,
    waiterOptions: {
        baseHref: 'http://myserver.com/art',
        img: {
            src: 'waiter.gif',
            styles: {
                width: 24,
                height: 24
            }
        },
        layer: {
            background: '#fff',
            opacity: 0.9
        }
    }
});
 

Notes

  • When you execute Request.HTML.send the Waiter class will automatically overlay the area on the page that's going to get updated with the new content and, when it arrives, it will hide itself.