From: Timo Tijhof Date: Wed, 16 May 2018 22:55:42 +0000 (+0200) Subject: jquery.spinner: Move files to their own src/ directory X-Git-Tag: 1.34.0-rc.0~5413^2 X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/%7B%7B%20url_for%28%27admin_users%27%29%20%7D%7D?a=commitdiff_plain;h=1ccfbdede02949fa5278988b969a75b25fe2621c;p=lhc%2Fweb%2Fwiklou.git jquery.spinner: Move files to their own src/ directory Reduce clutter in src/jquery/. Bug: T193826 Change-Id: Idb9c7ab89a10728249b6051057b7edbf7efcca78 --- diff --git a/resources/Resources.php b/resources/Resources.php index e187ef24f2..4a4c179367 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -303,8 +303,8 @@ return [ 'targets' => [ 'desktop', 'mobile' ], ], 'jquery.spinner' => [ - 'scripts' => 'resources/src/jquery/jquery.spinner.js', - 'styles' => 'resources/src/jquery/jquery.spinner.css', + 'scripts' => 'resources/src/jquery.spinner/spinner.js', + 'styles' => 'resources/src/jquery.spinner/spinner.css', 'targets' => [ 'desktop', 'mobile' ], ], 'jquery.jStorage' => [ diff --git a/resources/src/jquery.spinner/images/spinner-large.gif b/resources/src/jquery.spinner/images/spinner-large.gif new file mode 100644 index 0000000000..72203fdd7f Binary files /dev/null and b/resources/src/jquery.spinner/images/spinner-large.gif differ diff --git a/resources/src/jquery.spinner/images/spinner.gif b/resources/src/jquery.spinner/images/spinner.gif new file mode 100644 index 0000000000..6146be4e88 Binary files /dev/null and b/resources/src/jquery.spinner/images/spinner.gif differ diff --git a/resources/src/jquery.spinner/spinner.css b/resources/src/jquery.spinner/spinner.css new file mode 100644 index 0000000000..6c7bd0e660 --- /dev/null +++ b/resources/src/jquery.spinner/spinner.css @@ -0,0 +1,40 @@ +.mw-spinner { + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; +} + +.mw-spinner-small { + /* @embed */ + background-image: url( images/spinner.gif ); + height: 20px; + width: 20px; + /* Avoid issues with .mw-spinner-block when floated without width. */ + min-width: 20px; +} + +.mw-spinner-large { + /* @embed */ + background-image: url( images/spinner-large.gif ); + height: 32px; + width: 32px; + /* Avoid issues with .mw-spinner-block when floated without width. */ + min-width: 32px; +} + +.mw-spinner-block { + display: block; + /* This overrides width from .mw-spinner-large / .mw-spinner-small, + * This is where the min-width kicks in. + */ + width: 100%; +} + +.mw-spinner-inline { + display: inline-block; + vertical-align: middle; + + /* IE < 8 */ + zoom: 1; + *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */ +} diff --git a/resources/src/jquery.spinner/spinner.js b/resources/src/jquery.spinner/spinner.js new file mode 100644 index 0000000000..9079cc09b7 --- /dev/null +++ b/resources/src/jquery.spinner/spinner.js @@ -0,0 +1,114 @@ +/** + * jQuery Spinner + * + * Simple jQuery plugin to create, inject and remove spinners. + * + * @class jQuery.plugin.spinner + */ +( function ( $ ) { + + // Default options for new spinners, + // stored outside the function to share between calls. + var defaults = { + id: undefined, + size: 'small', + type: 'inline' + }; + + $.extend( { + /** + * 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: + * + * // 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' } ); + * + * @static + * @inheritable + * @param {Object|string} [opts] Options. If a string is given, it will be treated as the value + * of the `id` option. If an object is given, the possible option keys are: + * @param {string} [opts.id] If given, spinner will be given an id of "mw-spinner-{id}". + * @param {string} [opts.size='small'] 'small' or 'large' for a 20-pixel or 32-pixel spinner. + * @param {string} [opts.type='inline'] '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. + * @return {jQuery} + */ + createSpinner: function ( opts ) { + var $spinner; + + if ( opts !== undefined && $.type( opts ) !== 'object' ) { + opts = { + id: opts + }; + } + + opts = $.extend( {}, defaults, opts ); + + $spinner = $( '
' ).addClass( 'mw-spinner' ).attr( 'title', '...' ); + if ( opts.id !== undefined ) { + $spinner.attr( 'id', 'mw-spinner-' + opts.id ); + } + + $spinner.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' ); + $spinner.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' ); + + return $spinner; + }, + + /** + * Remove a spinner element + * + * @static + * @inheritable + * @param {string} id Id of the spinner, as passed to #createSpinner + * @return {jQuery} The (now detached) spinner element + */ + removeSpinner: function ( id ) { + return $( '#mw-spinner-' + id ).remove(); + } + } ); + + /** + * Inject a spinner after each element in the collection + * + * Inserts spinner as siblings (not children) of the target elements. + * Collection contents remain unchanged. + * + * @param {Object|string} [opts] See #createSpinner + * @return {jQuery} + */ + $.fn.injectSpinner = function ( opts ) { + return this.after( $.createSpinner( opts ) ); + }; + + /** + * @class jQuery + * @mixins jQuery.plugin.spinner + */ + +}( jQuery ) ); diff --git a/resources/src/jquery/images/spinner-large.gif b/resources/src/jquery/images/spinner-large.gif deleted file mode 100644 index 72203fdd7f..0000000000 Binary files a/resources/src/jquery/images/spinner-large.gif and /dev/null differ diff --git a/resources/src/jquery/images/spinner.gif b/resources/src/jquery/images/spinner.gif deleted file mode 100644 index 6146be4e88..0000000000 Binary files a/resources/src/jquery/images/spinner.gif and /dev/null differ diff --git a/resources/src/jquery/jquery.spinner.css b/resources/src/jquery/jquery.spinner.css deleted file mode 100644 index 6c7bd0e660..0000000000 --- a/resources/src/jquery/jquery.spinner.css +++ /dev/null @@ -1,40 +0,0 @@ -.mw-spinner { - background-color: transparent; - background-position: center center; - background-repeat: no-repeat; -} - -.mw-spinner-small { - /* @embed */ - background-image: url( images/spinner.gif ); - height: 20px; - width: 20px; - /* Avoid issues with .mw-spinner-block when floated without width. */ - min-width: 20px; -} - -.mw-spinner-large { - /* @embed */ - background-image: url( images/spinner-large.gif ); - height: 32px; - width: 32px; - /* Avoid issues with .mw-spinner-block when floated without width. */ - min-width: 32px; -} - -.mw-spinner-block { - display: block; - /* This overrides width from .mw-spinner-large / .mw-spinner-small, - * This is where the min-width kicks in. - */ - width: 100%; -} - -.mw-spinner-inline { - display: inline-block; - vertical-align: middle; - - /* IE < 8 */ - zoom: 1; - *display: inline; /* stylelint-disable-line declaration-block-no-duplicate-properties */ -} diff --git a/resources/src/jquery/jquery.spinner.js b/resources/src/jquery/jquery.spinner.js deleted file mode 100644 index 9079cc09b7..0000000000 --- a/resources/src/jquery/jquery.spinner.js +++ /dev/null @@ -1,114 +0,0 @@ -/** - * jQuery Spinner - * - * Simple jQuery plugin to create, inject and remove spinners. - * - * @class jQuery.plugin.spinner - */ -( function ( $ ) { - - // Default options for new spinners, - // stored outside the function to share between calls. - var defaults = { - id: undefined, - size: 'small', - type: 'inline' - }; - - $.extend( { - /** - * 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: - * - * // 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' } ); - * - * @static - * @inheritable - * @param {Object|string} [opts] Options. If a string is given, it will be treated as the value - * of the `id` option. If an object is given, the possible option keys are: - * @param {string} [opts.id] If given, spinner will be given an id of "mw-spinner-{id}". - * @param {string} [opts.size='small'] 'small' or 'large' for a 20-pixel or 32-pixel spinner. - * @param {string} [opts.type='inline'] '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. - * @return {jQuery} - */ - createSpinner: function ( opts ) { - var $spinner; - - if ( opts !== undefined && $.type( opts ) !== 'object' ) { - opts = { - id: opts - }; - } - - opts = $.extend( {}, defaults, opts ); - - $spinner = $( '
' ).addClass( 'mw-spinner' ).attr( 'title', '...' ); - if ( opts.id !== undefined ) { - $spinner.attr( 'id', 'mw-spinner-' + opts.id ); - } - - $spinner.addClass( opts.size === 'large' ? 'mw-spinner-large' : 'mw-spinner-small' ); - $spinner.addClass( opts.type === 'block' ? 'mw-spinner-block' : 'mw-spinner-inline' ); - - return $spinner; - }, - - /** - * Remove a spinner element - * - * @static - * @inheritable - * @param {string} id Id of the spinner, as passed to #createSpinner - * @return {jQuery} The (now detached) spinner element - */ - removeSpinner: function ( id ) { - return $( '#mw-spinner-' + id ).remove(); - } - } ); - - /** - * Inject a spinner after each element in the collection - * - * Inserts spinner as siblings (not children) of the target elements. - * Collection contents remain unchanged. - * - * @param {Object|string} [opts] See #createSpinner - * @return {jQuery} - */ - $.fn.injectSpinner = function ( opts ) { - return this.after( $.createSpinner( opts ) ); - }; - - /** - * @class jQuery - * @mixins jQuery.plugin.spinner - */ - -}( jQuery ) );