From a2593d7f2be05fc0f34fbb381646a9f726b94f6b Mon Sep 17 00:00:00 2001 From: MatmaRex Date: Mon, 3 Sep 2012 17:08:46 +0200 Subject: [PATCH] enhance jquery.spinner, keeping backwards compatibility Replaced single `id` argument to $.createSpinner with an options object. The options allow one to set the id (as before), spinner size (small or large), and its display mode (inline or block). Analogic change was made to $.fn.injectSpinner. Default options are kept the same as they used to be, and old-style calls still work. However, the definition of .mw-spinner CSS class has been changed (although, with a bit of hairy code, it could be kept compatible...). These changes should be enough to allow us to replace old usages of .mw-small-spinner and .mw-ajax-loader classes, as defined in shared.css. This is a reimplementation of the idea described in Ie55ffb6b. Copied spinner.gif and ajax-loader.gif from /skins/common/images/. Change-Id: I0ff71ba1eef299e0e699df84c68f1be1c20492f7 --- resources/jquery/images/spinner-large.gif | Bin 0 -> 1788 bytes resources/jquery/images/spinner.gif | Bin 4648 -> 1819 bytes resources/jquery/jquery.spinner.css | 34 ++++++++- resources/jquery/jquery.spinner.js | 85 +++++++++++++++++----- 4 files changed, 99 insertions(+), 20 deletions(-) create mode 100644 resources/jquery/images/spinner-large.gif diff --git a/resources/jquery/images/spinner-large.gif b/resources/jquery/images/spinner-large.gif new file mode 100644 index 0000000000000000000000000000000000000000..72203fdd7f7b00902737fc984e38aa90e468ffd6 GIT binary patch literal 1788 zcmZXUc~p~E8izlVkF1|2gn$V`NEBm;F+{eq7=$1@2tt}76KWEK1O!EbvWOD$1;~Q3 z%0WaXP_e<#7Su8*VhLNtYBz0%sXdCyD2Hfq>M%-ehxt7AoN_w%ulvWn_j%s)d*2%! z8x`S{+S=Lz0sKa0FVG4vPT|e0s#2r`BZFKe1m_S2;cd#Tvsl4#*>kf5Z3aB+;H+WjylT-YeUOQh{meFz@qfIi#Z z{@0N1^QU7h#x85`nTzhNf`LzqHa5hl4W`1~+hQvCl};0ezqR16H7Y)HN_SO!o)oDJ z23sqlcW3ZNgg=DePukV4u6|6Kmnz0o{Gg{owQ{kdBeV8J)Tsb6R>L`VDs!DVQnUw))$DI}t>;CF)b?oI|`XIIH2n&ek1$i#XEt z_Bc#SeAo0+;b7-kz*nfM1NX5`dj{Yh`TEN$*=WoM^-NBgQ+C4bbpANRkbgWFh1E8U z0LnX{T3s4@ zpOWjr%ETvOJ@)S@_}aJ{*Ia#zXwwm@7~8Pp8?I16X-jDwj5U)^X7@9b!Nk?J88`J> z#fLu^yzlwp>BIToYU2sgkn;N5ua{jRElk{g4Aw&$k^!n(fk)~GC;$z?XOW%%eSWyL zS?fIU-Q?~Gf#yLr>#@Nov6@N0a<*hxlU@&VwK-HDno1i!S}1VUbBr%6)&$bU^NT&t z%04?;Rg&=C@vltWGC5N-4DTr(kqus1`~_w7o26&H>p(0mPA`J?{~wuwkTrrHgq-GB z<#25W&Sm1gs`1Ek>|DpQe>c{JwLE?lT71knfU?KHfX8GYG5ap%J0{oet2!_!UApq(f;)LI9ZeW>_`^ zTKB%bX?|GB95}8rQn*|Qo=z_~ep8%sCt|Bp^vWCDE9ht_SU{_}_Nk^Sq~RXw8rzPk5Ja?rns2&(r}N~KyA!KS*gVX!=#y9hV`;;w{$ oNWE$!oMtny&87zW%R=j~^R9H)gy% z`T8TD?Q3F)Z)Ajzcc?Gdk&Olc0I+=t!2|#V987-`f(ihbd@)Tu6RKr>WlaYZ>SlGV zM3HsV`GN-ly1w&QE6WUNoX^?^^(5vpsY~MH)f%Q$95YwKX_4l1)TSyEmAW+Mj~=rl ze>slreo)c6XR0e9+BbR&S zhX6SZ1l$6w%*IEV0RF`OLmEklO4Vzpf6!5PM|^A=e4??gaLSX0=lRtjWU*8RM$prd z0!?Xz%Bi#zY%ff2R~FbwnhLV34Ezsr3KuvdTGmUCq$Y)2rw$p#_6Ja(Uv=*3lwLBp zSRa#B(`xL5E;f0x7>I;A4gQgTJsbi->Hgpd+_Oj9oL@926F#3%5?c~er!28DpCjLHqe5s5LKY$p2!x_T5IqR|40Oc-=v>!i6p&b(+@dP* zq~qXRd7a${ImM<(Z#gMjH-0{kHCs2+XXSQudPALIS;Ek*dkX7Gv7pPqIhoED#G~XQzS1Pq3Y!{H z7{OLOh|9_VF=)Y}g|akLIgRn2MX+EYZu(D4w)xy|%ENcNHV%cdR>cmK=>k|nO|QaB zK=sQCqN7a+kOHG|A_{<_fC>t>LQse3>!C(>l$O#>hlwf#x66IeW3$v#ag+I;r)t47 z|9?Cp$NOGa!J(cSfOhpj4}u2Ra}Fd1i4f!fXCfFh0bNOgi6R?xW+Os`MNnl^hnYqI zVUTt@DUFMld>B;n(ID&PfY|HG@-?!v0`8G@x0@(+YeLrvD3EO0-kyhtFg8SdthYZw zieMoE4Ew~`K~i<72vcg)suf`BJ8Z~V?j+*dTJNk=xCAqpP1u~X{@UZ+Kld0r`^OIo z=Sh&k_UX({Dh@p5m7BjQEOg{TLC|bCMzU&l=oL1Jdok`$^;GYfgolas7IN=f-wfP< zp?q^9gCEEt<|9Nx6~9On>F(}Ih~#ku94F^H literal 4648 zcmd6q`BT&R8OH;`1j3bIxCw!9ciQPRe?TUAecsRO zc|V852YEqhcmy8t9SdP(WMph?j6@<$Oia*dw3(S1iA17MC_X+u0RaIA4jhPxh=`1g zjE;_ui;GK0NH}`*s7xly$jB%tC@3l_Dl03isHjjXm34J>_4V}{ji$Z5y{oIMudi=x zY;1CJa$#X%adGk5wQJX}U%zqV#?6~IZ{NPXyu7@!vU2zC-PP6Ad-v|$zkh#yeSKqN z!-~;*}R` zEe^7x>(Ovy9Qdh~q*4Z071UL~#8L@=|75M$Q6q)3>}>St9i-7Tz1D7sc8W|ZG9UXo1?Ut67-u8U&^LD7#<-Q_bQ;J%YPGS4t zm5q@liRYPxCUR`8-im0G_O}H@#e~*!p~#G>nsi@h>rSe1X@|$In28B4?*6G&ejE{z z;E~Gqt2-s;(7Za^Iy?RS^(cEB~Dag z`jt+pQOPLgJgo&MqL1m|6 zYo*+5F~_U>Shn7a$?VhVsT|#?kkKqg7TJoNF!pzff_ z>$<7c9{Nh^!;!V1#YbYsGPURPF^ID+eHCf`4%%P{_w)~)P6z%0kasCaDwTpf8$^_n zl41~1adELhL<)ssr;7mdA9v9^^Srsa33LQ#KYjXiPvEGYuz@0;g%(8mQQ)5{ls4j$ zXHov;PTJNl^;S}P+W1HZb4i%kp!#!_gKo&gGq0|0%JHux8WC$({t~x2%EDfhz)ZDu zOjYHG0zA7tbwL$7p1qwQl@$vy^=@PZ-GXJSR=q=B=2lJPmL!Lbv4nZhr1$ z&dIf*1Red%r%-?*hjE8G#6R{?zy_S{owQ+rxVX6NatHtp>|sbaY!BdkAbemC5NV(e zU<{CIgESf&8$qyJTU!m@=;`U{?d|RF?}r64J3IS6@!m7rZ>8P4P1~~*(4Gmj__=cM zRNU8b{^hZ02ib(llr1v(bHcspXDw0tog}~F+n-q<#vStiV)e7xm;{Am8+GM}7>oZ2kklYH8xKrjm%qF3RLd>w8TtP(Pr466jh8n#JLP|!}H z7_ts*5*r(vn3xD`0=NTf17*WP0rY`Wv|24#v_L4pCWC{6LqkKu!^6PZKr0gy6H`-D z)6>&4Gc%VjU!I$r`wvC)~5E`ptEC?l(c%$ivvT!exNlPWAekc-#M)Rm1>F+uOG+KM~aQtbR|3y(%Mg&_T(KtA_5Ph4HWX`QF?ivw6MlY7) zEvy|H=pF@9H=M-?#HoZnfNU^AOKTxn&PN*Y?NHY>Zc`L?E38L`m5 zeZu{&eUOz|#;a)+yq?w{+Lf)Xt-*{$BJq6+7T88Wk#M^Ls|d6!Fs*RA+9gWZk6=iD zsviyP4GZZ_@TlJ9OGP~07hv)Kg%UELynL+W`{Q5sZvG}}oA<}LixqtSIl5yfI^Qyx zlb-*y;}?K;Q)vD`>NaoAOWs_-yNS$VwKPlUD$Q}3U$NBFmFU&rM=p@ENCbjA#H)m` z5e_y&;#8{8(#Qdg6gXSi>JbT)DER2Y2;ZL)!x92&h``z^&iL-EY7h zG4v95I>7DvvmbD)0q*J7xcla&xBdxm5ADWHVY6GBn^YQsT4ZOfOjg+=5lC6^*%Jc1 zu`xzK+8^QJTA1S4580py7_`9K$-Nt8DL^j?h)x$ z+aWu$4RwpQ%M(eM9l-RQen(S&w?&dnEN` zwwH1j6Z!m7szW(C!7_n0>~mi+HoXkOi6LG zA+D~%Ky{yoI~?ns=L1X{U^X>11qU@;y1=n!Xjz5|0H0}~W$mn3z}ITE8l2MbT?PW( z-Q5kF<4tYs3D|H}@0sH_0mEAyrQbdu@-~1)zM?fmhh zIC6@oitK>PelUM<};%XGTu3Iimf$v|5>+Ea(oJL9wItc9ASCnYVB(!F&m$D?dz9F52|OYCTkwkXY#NZ9rk=)v}0N=tj_d8xODmadNQCOW&xf-e9?xVX4~ q$T^n+G2$w3LKlLQxOrm>Nui9)tj#otw;+rC{BhA(C^sKSB>3O=fEoM% diff --git a/resources/jquery/jquery.spinner.css b/resources/jquery/jquery.spinner.css index 150a51b41d..4a77528327 100644 --- a/resources/jquery/jquery.spinner.css +++ b/resources/jquery/jquery.spinner.css @@ -1,12 +1,40 @@ .mw-spinner { + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; +} + +.mw-spinner-small { /* @embed */ - background: transparent url(images/spinner.gif); + 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 Hacks */ + /* IE < 8 */ zoom: 1; *display: inline; -} \ No newline at end of file +} diff --git a/resources/jquery/jquery.spinner.js b/resources/jquery/jquery.spinner.js index e8b683e6bb..4a6ec3b41c 100644 --- a/resources/jquery/jquery.spinner.js +++ b/resources/jquery/jquery.spinner.js @@ -5,40 +5,91 @@ */ ( function ( $ ) { - $.extend( { + // Default options for new spinners, + // stored outside the function to share between calls. + var defaults = { + id: undefined, + size: 'small', + type: 'inline' + }; + + $.extend({ /** * Creates a spinner element. * - * @param id {String} id of the spinner - * @return {jQuery} spinner + * The argument is an object with options used to construct the spinner. These can be: + * + * 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 ); + * @example + * // 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 ); + * @example + * // The following two are equivalent: + * $.createSpinner( 'magic' ); + * $.createSpinner({ id: 'magic' }); + * + * @param {Object|String} opts [optional] ID string or options: + * - id: If given, spinner will be given an id of "mw-spinner-" + * - size: 'small' (default) or 'large' for a 20-pixel or 32-pixel spinner + * - type: 'inline' (default) 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 ( id ) { - return $( '
' ).attr( { - id: 'mw-spinner-' + id, - 'class': 'mw-spinner', - title: '...' - } ); + createSpinner: function ( opts ) { + if ( opts !== undefined && $.type( opts ) !== 'object' ) { + opts = { + id: opts + }; + } + + opts = $.extend( {}, defaults, opts ); + + var $spinner = $( '
', { 'class': 'mw-spinner', '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; }, /** * Removes a spinner element. * - * @param id {String} - * @return {jQuery} spinner + * @param {String} id [optional] Id of the spinner, as passed to createSpinner. + * @return {jQuery} The (now detached) spinner. */ removeSpinner: function ( id ) { return $( '#mw-spinner-' + id ).remove(); } - } ); + }); /** - * Injects a spinner after the elements in the jQuery collection. + * Injects a spinner after the elements in the jQuery collection + * (as siblings, not children). Collection contents remain unchanged. * - * @param id String id of the spinner + * @param {Object} opts See createSpinner() for description. * @return {jQuery} */ - $.fn.injectSpinner = function ( id ) { - return this.after( $.createSpinner( id ) ); + $.fn.injectSpinner = function ( opts ) { + return this.after( $.createSpinner( opts ) ); }; - }( jQuery ) ); -- 2.20.1