2 * jQuery makeCollapsible
4 * This will enable collapsible-functionality on all passed elements.
5 * - Will prevent binding twice to the same element.
6 * - Initial state is expanded by default, this can be overriden by adding class
7 * "mw-collapsed" to the "mw-collapsible" element.
8 * - Elements made collapsible have jQuery data "mw-made-collapsible" set to true.
9 * - The inner content is wrapped in a "div.mw-collapsible-content" (except for tables and lists).
11 * @author Krinkle, 2011-2012
14 * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
15 * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
17 ( function ( $, mw
) {
19 * @param {jQuery} $collapsible
20 * @param {string} action The action this function will take ('expand' or 'collapse').
21 * @param {jQuery|null} [optional] $defaultToggle
22 * @param {Object|undefined} options
24 function toggleElement( $collapsible
, action
, $defaultToggle
, options
) {
25 var $collapsibleContent
, $containers
;
26 options
= options
|| {};
28 // Validate parameters
30 // $collapsible must be an instance of jQuery
31 if ( !$collapsible
.jquery
) {
34 if ( action
!== 'expand' && action
!== 'collapse' ) {
35 // action must be string with 'expand' or 'collapse'
38 if ( $defaultToggle
=== undefined ) {
39 $defaultToggle
= null;
41 if ( $defaultToggle
!== null && !$defaultToggle
.jquery
) {
42 // is optional (may be undefined), but if defined it must be an instance of jQuery.
43 // If it's not, abort right away.
44 // After this $defaultToggle is either null or a valid jQuery instance.
48 // Handle different kinds of elements
50 if ( $collapsible
.is( 'table' ) ) {
52 $containers
= $collapsible
.find( '> tbody > tr' );
53 if ( $defaultToggle
) {
54 // Exclude table row containing togglelink
55 $containers
= $containers
.not( $defaultToggle
.closest( 'tr' ) );
58 if ( action
=== 'collapse' ) {
59 // Hide all table rows of this table
60 // Slide doesn't work with tables, but fade does as of jQuery 1.1.3
61 // http://stackoverflow.com/questions/467336#920480
62 if ( options
.instantHide
) {
65 $containers
.stop( true, true ).fadeOut();
68 $containers
.stop( true, true ).fadeIn();
71 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
73 $containers
= $collapsible
.find( '> li' );
74 if ( $defaultToggle
) {
75 // Exclude list-item containing togglelink
76 $containers
= $containers
.not( $defaultToggle
.parent() );
79 if ( action
=== 'collapse' ) {
80 if ( options
.instantHide
) {
83 $containers
.stop( true, true ).slideUp();
86 $containers
.stop( true, true ).slideDown();
90 // Everything else: <div>, <p> etc.
91 $collapsibleContent
= $collapsible
.find( '> .mw-collapsible-content' );
93 // If a collapsible-content is defined, act on it
94 if ( $collapsibleContent
.length
) {
95 if ( action
=== 'collapse' ) {
96 if ( options
.instantHide
) {
97 $collapsibleContent
.hide();
99 $collapsibleContent
.slideUp();
102 $collapsibleContent
.slideDown();
105 // Otherwise assume this is a customcollapse with a remote toggle
106 // .. and there is no collapsible-content because the entire element should be toggled
108 if ( action
=== 'collapse' ) {
109 if ( options
.instantHide
) {
112 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
113 $collapsible
.fadeOut();
115 $collapsible
.slideUp();
119 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
120 $collapsible
.fadeIn();
122 $collapsible
.slideDown();
130 * Handles clicking on the collapsible element toggle and other
131 * situations where a collapsible element is toggled (e.g. the initial
132 * toggle for collapsed ones).
134 * @param {jQuery} $toggle the clickable toggle itself
135 * @param {jQuery} $collapsible the collapsible element
136 * @param {jQuery.Event|null} e either the event or null if unavailable
137 * @param {Object|undefined} options
139 function togglingHandler( $toggle
, $collapsible
, event
, options
) {
140 var wasCollapsed
, $textContainer
, collapseText
, expandText
;
143 // Don't fire if a link was clicked, if requested (for premade togglers by default)
144 if ( options
.linksPassthru
&& $.nodeName( event
.target
, 'a' ) ) {
147 event
.preventDefault();
148 event
.stopPropagation();
152 wasCollapsed
= $collapsible
.hasClass( 'mw-collapsed' );
154 // Toggle the state of the collapsible element (that is, expand or collapse)
155 $collapsible
.toggleClass( 'mw-collapsed', !wasCollapsed
);
157 // Toggle the mw-collapsible-toggle classes, if requested (for default and premade togglers by default)
158 if ( options
.toggleClasses
) {
160 .toggleClass( 'mw-collapsible-toggle-collapsed', !wasCollapsed
)
161 .toggleClass( 'mw-collapsible-toggle-expanded', wasCollapsed
);
164 // Toggle the text ("Show"/"Hide"), if requested (for default togglers by default)
165 if ( options
.toggleText
) {
166 collapseText
= options
.toggleText
.collapseText
;
167 expandText
= options
.toggleText
.expandText
;
169 $textContainer
= $toggle
.find( '> a' );
170 if ( !$textContainer
.length
) {
171 $textContainer
= $toggle
;
173 $textContainer
.text( wasCollapsed
? collapseText
: expandText
);
176 // And finally toggle the element state itself
177 toggleElement( $collapsible
, wasCollapsed
? 'expand' : 'collapse', $toggle
, options
);
181 * Toggles collapsible and togglelink class and updates text label.
183 * @param {jQuery} $that
184 * @param {jQuery.Event} e
185 * @param {Object|undefined} options
187 function toggleLinkDefault( $that
, e
, options
) {
188 var $collapsible
= $that
.closest( '.mw-collapsible' );
189 options
= $.extend( { toggleClasses
: true }, options
);
190 togglingHandler( $that
, $collapsible
, e
, options
);
194 * Toggles collapsible and togglelink class.
196 * @param {jQuery} $that
197 * @param {jQuery.Event} e
198 * @param {Object|undefined} options
200 function toggleLinkPremade( $that
, e
, options
) {
201 var $collapsible
= $that
.eq( 0 ).closest( '.mw-collapsible' );
202 options
= $.extend( { toggleClasses
: true }, options
);
203 togglingHandler( $that
, $collapsible
, e
, options
);
207 * Toggles customcollapsible.
209 * @param {jQuery} $that
210 * @param {jQuery.Event} e
211 * @param {Object|undefined} options
212 * @param {jQuery} $collapsible
214 function toggleLinkCustom( $that
, e
, options
, $collapsible
) {
215 options
= $.extend( { linksPassthru
: true }, options
);
216 togglingHandler( $that
, $collapsible
, e
, options
);
219 $.fn
.makeCollapsible = function () {
220 return this.each(function () {
221 // Define reused variables and functions
222 var lpx
= 'jquery.makeCollapsible> ',
224 // Ensure class "mw-collapsible" is present in case .makeCollapsible()
225 // is called on element(s) that don't have it yet.
226 $collapsible
= $(collapsible
).addClass( 'mw-collapsible' ),
227 collapsetext
= $collapsible
.attr( 'data-collapsetext' ),
228 expandtext
= $collapsible
.attr( 'data-expandtext' ),
236 // Return if it has been enabled already.
237 if ( $collapsible
.data( 'mw-made-collapsible' ) ) {
240 $collapsible
.data( 'mw-made-collapsible', true );
243 // Use custom text or default ?
244 if ( !collapsetext
) {
245 collapsetext
= mw
.msg( 'collapsible-collapse' );
248 expandtext
= mw
.msg( 'collapsible-expand' );
251 // Create toggle link with a space around the brackets ( [text] )
253 $( '<a href="#"></a>' )
254 .text( collapsetext
)
255 .wrap( '<span class="mw-collapsible-toggle"></span>' )
257 .prepend( ' [' )
259 .on( 'click.mw-collapse', function ( e
, options
) {
260 options
= $.extend( { toggleText
: { collapseText
: collapsetext
, expandText
: expandtext
} }, options
);
261 toggleLinkDefault( $(this), e
, options
);
264 // Check if this element has a custom position for the toggle link
265 // (ie. outside the container or deeper inside the tree)
266 // Then: Locate the custom toggle link(s) and bind them
267 if ( ( $collapsible
.attr( 'id' ) || '' ).indexOf( 'mw-customcollapsible-' ) === 0 ) {
268 collapsibleId
= $collapsible
.attr( 'id' );
269 $customTogglers
= $( '.' + collapsibleId
.replace( 'mw-customcollapsible', 'mw-customtoggle' ) );
270 mw
.log( lpx
+ 'Found custom collapsible: #' + collapsibleId
);
272 // Double check that there is actually a customtoggle link
273 if ( $customTogglers
.length
) {
274 $customTogglers
.on( 'click.mw-collapse', function ( e
, options
) {
275 toggleLinkCustom( $(this), e
, options
, $collapsible
);
278 mw
.log( lpx
+ '#' + collapsibleId
+ ': Missing toggler!' );
282 if ( $collapsible
.hasClass( 'mw-collapsed' ) ) {
283 // Remove here so that the toggler goes in the right direction,
284 // It re-adds the class.
285 $collapsible
.removeClass( 'mw-collapsed' );
286 toggleLinkCustom( $customTogglers
, null, { instantHide
: true }, $collapsible
);
289 // If this is not a custom case, do the default:
290 // Wrap the contents add the toggle link
292 // Elements are treated differently
293 if ( $collapsible
.is( 'table' ) ) {
294 // The toggle-link will be in one the the cells (td or th) of the first row
295 $firstItem
= $collapsible
.find( 'tr:first th, tr:first td' );
296 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
298 // If theres no toggle link, add it to the last cell
299 if ( !$toggle
.length
) {
300 $firstItem
.eq(-1).prepend( $toggleLink
);
302 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
, options
) {
303 toggleLinkPremade( $toggle
, e
, options
);
307 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
308 // The toggle-link will be in the first list-item
309 $firstItem
= $collapsible
.find( 'li:first' );
310 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
312 // If theres no toggle link, add it
313 if ( !$toggle
.length
) {
314 // Make sure the numeral order doesn't get messed up, force the first (soon to be second) item
315 // to be "1". Except if the value-attribute is already used.
316 // If no value was set WebKit returns "", Mozilla returns '-1', others return null or undefined.
317 firstval
= $firstItem
.attr( 'value' );
318 if ( firstval
=== undefined || !firstval
|| firstval
=== '-1' || firstval
=== -1 ) {
319 $firstItem
.attr( 'value', '1' );
321 $collapsible
.prepend( $toggleLink
.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent() );
323 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
, options
) {
324 toggleLinkPremade( $toggle
, e
, options
);
328 } else { // <div>, <p> etc.
330 // The toggle-link will be the first child of the element
331 $toggle
= $collapsible
.find( '> .mw-collapsible-toggle' );
333 // If a direct child .content-wrapper does not exists, create it
334 if ( !$collapsible
.find( '> .mw-collapsible-content' ).length
) {
335 $collapsible
.wrapInner( '<div class="mw-collapsible-content"></div>' );
338 // If theres no toggle link, add it
339 if ( !$toggle
.length
) {
340 $collapsible
.prepend( $toggleLink
);
342 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
, options
) {
343 toggleLinkPremade( $toggle
, e
, options
);
349 // Initial state (only for those that are not custom,
350 // because the initial state of those has been taken care of already).
351 if ( $collapsible
.hasClass( 'mw-collapsed' ) && ( $collapsible
.attr( 'id' ) || '').indexOf( 'mw-customcollapsible-' ) !== 0 ) {
352 $collapsible
.removeClass( 'mw-collapsed' );
353 // The collapsible element could have multiple togglers
354 // To toggle the initial state only click one of them (ie. the first one, eq(0) )
355 // Else it would go like: hide,show,hide,show for each toggle link.
356 // This is just like it would be in reality (only one toggle is clicked at a time).
357 $toggleLink
.eq( 0 ).trigger( 'click', [ { instantHide
: true } ] );
361 }( jQuery
, mediaWiki
) );