4 * Simple jQuery plugin to create, inject and remove spinners.
6 * @class jQuery.plugin.spinner
10 // Default options for new spinners,
11 // stored outside the function to share between calls.
20 * Create a spinner element
22 * The argument is an object with options used to construct the spinner (see below).
24 * It is a good practice to keep a reference to the created spinner to be able to remove it
25 * later. Alternatively, one can use the 'id' option and #removeSpinner (but make sure to choose
26 * an id that's unlikely to cause conflicts, e.g. with extensions, gadgets or user scripts).
30 * - .mw-spinner for every spinner
31 * - .mw-spinner-small / .mw-spinner-large for size
32 * - .mw-spinner-block / .mw-spinner-inline for display types
36 * // Create a large spinner reserving all available horizontal space.
37 * var $spinner = $.createSpinner({ size: 'large', type: 'block' });
38 * // Insert above page content.
39 * $( '#mw-content-text' ).prepend( $spinner );
41 * // Place a small inline spinner next to the "Save" button
42 * var $spinner = $.createSpinner({ size: 'small', type: 'inline' });
43 * // Alternatively, just `$.createSpinner();` as these are the default options.
44 * $( '#wpSave' ).after( $spinner );
46 * // The following two are equivalent:
47 * $.createSpinner( 'magic' );
48 * $.createSpinner({ id: 'magic' });
52 * @param {Object|string} [opts] Options. An object with the following keys:
54 * - id: If given, spinner will be given an id of "mw-spinner-{id}"
55 * - size: 'small' (default) or 'large' for a 20-pixel or 32-pixel spinner
56 * - type: 'inline' (default) or 'block'. Inline creates an inline-block with width and
57 * height equal to spinner size. Block is a block-level element with width 100%, height
58 * equal to spinner size.
60 * If a string is given, it will be treated as the value of the 'id' option.
64 createSpinner: function ( opts
) {
65 if ( opts
!== undefined && $.type( opts
) !== 'object' ) {
71 opts
= $.extend( {}, defaults
, opts
);
73 var $spinner
= $( '<div>', { 'class': 'mw-spinner', 'title': '...' } );
74 if ( opts
.id
!== undefined ) {
75 $spinner
.attr( 'id', 'mw-spinner-' + opts
.id
);
78 $spinner
.addClass( opts
.size
=== 'large' ? 'mw-spinner-large' : 'mw-spinner-small' );
79 $spinner
.addClass( opts
.type
=== 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' );
85 * Remove a spinner element
89 * @param {string} id Id of the spinner, as passed to #createSpinner
90 * @return {jQuery} The (now detached) spinner element
92 removeSpinner: function ( id
) {
93 return $( '#mw-spinner-' + id
).remove();
98 * Inject a spinner after each element in the collection
100 * Inserts spinner as siblings (not children) of the target elements.
101 * Collection contents remain unchanged.
103 * @param {Object|string} [opts] See #createSpinner
106 $.fn
.injectSpinner = function ( opts
) {
107 return this.after( $.createSpinner( opts
) );
112 * @mixins jQuery.plugin.spinner