From 6fe67cc0019326dbdbf73f51030452c6f1c8db0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrien=20LES=C3=89N=C3=89CHAL?= Date: Fri, 8 Mar 2024 15:34:27 +0100 Subject: [PATCH] Add types for `jquery.spinner` --- jquery/makeCollapsible.d.ts | 2 +- jquery/spinner.d.ts | 85 +++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 jquery/spinner.d.ts diff --git a/jquery/makeCollapsible.d.ts b/jquery/makeCollapsible.d.ts index 0041aad..e13b597 100644 --- a/jquery/makeCollapsible.d.ts +++ b/jquery/makeCollapsible.d.ts @@ -10,7 +10,7 @@ declare global { * - The inner content is wrapped in a "div.mw-collapsible-content" (except for tables and lists). * * @param {Options} [options] - * @return {JQuery} + * @returns {JQuery} */ makeCollapsible(options?: Options): this; } diff --git a/jquery/spinner.d.ts b/jquery/spinner.d.ts new file mode 100644 index 0000000..c79dbda --- /dev/null +++ b/jquery/spinner.d.ts @@ -0,0 +1,85 @@ +declare global { + interface JQueryStatic { + /** + * Create a spinner element + * + * The argument is an object with options used to construct the spinner (see below). + * + * It is a good practice to keep a reference to the created spinner to be able to remove it + * later. Alternatively, one can use the 'id' option and #removeSpinner (but make sure to choose + * an id that's unlikely to cause conflicts, e.g. with extensions, gadgets or user scripts). + * + * CSS classes used: + * + * - .mw-spinner for every spinner + * - .mw-spinner-small / .mw-spinner-large for size + * - .mw-spinner-block / .mw-spinner-inline for display types + * + * @example + * ```js + * // Create a large spinner reserving all available horizontal space. + * var $spinner = $.createSpinner( { size: 'large', type: 'block' } ); + * // Insert above page content. + * $( '#mw-content-text' ).prepend( $spinner ); + * + * // Place a small inline spinner next to the "Save" button + * var $spinner = $.createSpinner( { size: 'small', type: 'inline' } ); + * // Alternatively, just `$.createSpinner();` as these are the default options. + * $( '#wpSave' ).after( $spinner ); + * + * // The following two are equivalent: + * $.createSpinner( 'magic' ); + * $.createSpinner( { id: 'magic' } ); + * ``` + * + * @param {string|Options} [opts] Options. If a string is given, it will be treated as the value + * of the `id` option. + * @returns {JQuery} + */ + createSpinner(opts?: string | Options): JQuery; + + /** + * Remove a spinner element. + * + * @param {string} id Id of the spinner, as passed to {@link createSpinner} + * @returns {JQuery} The (now detached) spinner element + */ + removeSpinner(id: string): JQuery; + } + + interface JQuery { + /** + * Inject a spinner after each element in the collection + * + * Inserts spinner as siblings (not children) of the target elements. + * Collection contents remain unchanged. + * + * @param {string|Object} [opts] Options. If a string is given, it will be treated as the value + * of the `id` option. + * @returns {JQuery} + */ + injectSpinner(opts?: string | Options): this; + } +} + +type Size = "large" | "small"; +type Type = "block" | "inline"; + +interface Options { + /** + * If given, spinner will be given an id of "mw-spinner-{id}". + */ + id?: string | undefined; + + /** + * 'small' or 'large' for a 20-pixel or 32-pixel spinner. + */ + size?: Size; + + /** + * 'inline' or 'block'. Inline creates an inline-block with width and height equal to spinner size. Block is a block-level element with width 100%, height equal to spinner size. + */ + type?: Type; +} + +export {};