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 class "mw-made-collapsible".
9 * Except for tables and lists, the inner content is wrapped in "mw-collapsible-content".
11 * @author Krinkle <krinklemail@gmail.com>
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 $.fn
.makeCollapsible = function () {
21 return this.each(function () {
23 // Define reused variables and functions
25 lpx
= 'jquery.makeCollapsible> ',
26 $that
= $(this).addClass( 'mw-collapsible' ), // case: $( '#myAJAXelement' ).makeCollapsible()
28 collapsetext
= $(this).attr( 'data-collapsetext' ),
29 expandtext
= $(this).attr( 'data-expandtext' ),
30 toggleElement = function ( $collapsible
, action
, $defaultToggle
, instantHide
) {
31 var $collapsibleContent
, $containers
;
33 // Validate parameters
34 if ( !$collapsible
.jquery
) { // $collapsible must be an instance of jQuery
37 if ( action
!== 'expand' && action
!== 'collapse' ) {
38 // action must be string with 'expand' or 'collapse'
41 if ( $defaultToggle
=== undefined ) {
42 $defaultToggle
= null;
44 if ( $defaultToggle
!== null && !($defaultToggle
instanceof $) ) {
45 // is optional (may be undefined), but if defined it must be an instance of jQuery.
46 // If it's not, abort right away.
47 // After this $defaultToggle is either null or a valid jQuery instance.
51 if ( action
=== 'collapse' ) {
53 // Collapse the element
54 if ( $collapsible
.is( 'table' ) ) {
55 // Hide all table rows of this table
56 // Slide doens't work with tables, but fade does as of jQuery 1.1.3
57 // http://stackoverflow.com/questions/467336#920480
58 $containers
= $collapsible
.find( '>tbody>tr' );
59 if ( $defaultToggle
) {
60 // Exclude tablerow containing togglelink
61 $containers
.not( $defaultToggle
.closest( 'tr' ) ).stop(true, true).fadeOut();
66 $containers
.stop( true, true ).fadeOut();
70 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
71 $containers
= $collapsible
.find( '> li' );
72 if ( $defaultToggle
) {
73 // Exclude list-item containing togglelink
74 $containers
.not( $defaultToggle
.parent() ).stop( true, true ).slideUp();
79 $containers
.stop( true, true ).slideUp();
83 } else { // <div>, <p> etc.
84 $collapsibleContent
= $collapsible
.find( '> .mw-collapsible-content' );
86 // If a collapsible-content is defined, collapse it
87 if ( $collapsibleContent
.length
) {
89 $collapsibleContent
.hide();
91 $collapsibleContent
.slideUp();
94 // Otherwise assume this is a customcollapse with a remote toggle
95 // .. and there is no collapsible-content because the entire element should be toggled
97 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
98 $collapsible
.fadeOut();
100 $collapsible
.slideUp();
107 // Expand the element
108 if ( $collapsible
.is( 'table' ) ) {
109 $containers
= $collapsible
.find( '>tbody>tr' );
110 if ( $defaultToggle
) {
111 // Exclude tablerow containing togglelink
112 $containers
.not( $defaultToggle
.parent().parent() ).stop(true, true).fadeIn();
114 $containers
.stop(true, true).fadeIn();
117 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
118 $containers
= $collapsible
.find( '> li' );
119 if ( $defaultToggle
) {
120 // Exclude list-item containing togglelink
121 $containers
.not( $defaultToggle
.parent() ).stop( true, true ).slideDown();
123 $containers
.stop( true, true ).slideDown();
126 } else { // <div>, <p> etc.
127 $collapsibleContent
= $collapsible
.find( '> .mw-collapsible-content' );
129 // If a collapsible-content is defined, collapse it
130 if ( $collapsibleContent
.length
) {
131 $collapsibleContent
.slideDown();
133 // Otherwise assume this is a customcollapse with a remote toggle
134 // .. and there is no collapsible-content because the entire element should be toggled
136 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
137 $collapsible
.fadeIn();
139 $collapsible
.slideDown();
145 // Toggles collapsible and togglelink class and updates text label
146 toggleLinkDefault = function ( that
, e
) {
148 $collapsible
= $that
.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
152 // It's expanded right now
153 if ( !$that
.hasClass( 'mw-collapsible-toggle-collapsed' ) ) {
154 // Change link to "Show"
155 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
156 if ( $that
.find( '> a' ).length
) {
157 $that
.find( '> a' ).text( expandtext
);
159 $that
.text( expandtext
);
162 toggleElement( $collapsible
, 'collapse', $that
);
164 // It's collapsed right now
166 // Change link to "Hide"
167 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
168 if ( $that
.find( '> a' ).length
) {
169 $that
.find( '> a' ).text( collapsetext
);
171 $that
.text( collapsetext
);
174 toggleElement( $collapsible
, 'expand', $that
);
178 // Toggles collapsible and togglelink class
179 toggleLinkPremade = function ( $that
, e
) {
180 var $collapsible
= $that
.eq(0).closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
181 if ( $(e
.target
).is( 'a' ) ) {
187 // It's expanded right now
188 if ( !$that
.hasClass( 'mw-collapsible-toggle-collapsed' ) ) {
189 // Change toggle to collapsed
190 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
192 toggleElement( $collapsible
, 'collapse', $that
);
194 // It's collapsed right now
196 // Change toggle to expanded
197 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
199 toggleElement( $collapsible
, 'expand', $that
);
203 // Toggles customcollapsible
204 toggleLinkCustom = function ( $that
, e
, $collapsible
) {
205 // For the initial state call of customtogglers there is no event passed
210 // Get current state and toggle to the opposite
211 var action
= $collapsible
.hasClass( 'mw-collapsed' ) ? 'expand' : 'collapse';
212 $collapsible
.toggleClass( 'mw-collapsed' );
213 toggleElement( $collapsible
, action
, $that
);
217 // Use custom text or default ?
218 if ( !collapsetext
) {
219 collapsetext
= mw
.msg( 'collapsible-collapse' );
222 expandtext
= mw
.msg( 'collapsible-expand' );
225 // Create toggle link with a space around the brackets ( [text] )
227 $( '<a href="#"></a>' )
228 .text( collapsetext
)
229 .wrap( '<span class="mw-collapsible-toggle"></span>' )
231 .prepend( ' [' )
233 .on( 'click.mw-collapse', function ( e
) {
234 toggleLinkDefault( this, e
);
237 // Return if it has been enabled already.
238 if ( $that
.hasClass( 'mw-made-collapsible' ) ) {
241 $that
.addClass( 'mw-made-collapsible' );
244 // Check if this element has a custom position for the toggle link
245 // (ie. outside the container or deeper inside the tree)
246 // Then: Locate the custom toggle link(s) and bind them
247 if ( ( $that
.attr( 'id' ) || '' ).indexOf( 'mw-customcollapsible-' ) === 0 ) {
249 var thatId
= $that
.attr( 'id' ),
250 $customTogglers
= $( '.' + thatId
.replace( 'mw-customcollapsible', 'mw-customtoggle' ) );
251 mw
.log( lpx
+ 'Found custom collapsible: #' + thatId
);
253 // Double check that there is actually a customtoggle link
254 if ( $customTogglers
.length
) {
255 $customTogglers
.on( 'click.mw-collapse', function ( e
) {
256 toggleLinkCustom( $(this), e
, $that
);
259 mw
.log( lpx
+ '#' + thatId
+ ': Missing toggler!' );
263 if ( $that
.hasClass( 'mw-collapsed' ) ) {
264 $that
.removeClass( 'mw-collapsed' );
265 toggleLinkCustom( $customTogglers
, null, $that
);
268 // If this is not a custom case, do the default:
269 // Wrap the contents add the toggle link
272 // Elements are treated differently
273 if ( $that
.is( 'table' ) ) {
274 // The toggle-link will be in one the the cells (td or th) of the first row
275 var $firstRowCells
= $that
.find( 'tr:first th, tr:first td' );
276 $toggle
= $firstRowCells
.find( '> .mw-collapsible-toggle' );
278 // If theres no toggle link, add it to the last cell
279 if ( !$toggle
.length
) {
280 $firstRowCells
.eq(-1).prepend( $toggleLink
);
282 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
) {
283 toggleLinkPremade( $toggle
, e
);
287 } else if ( $that
.is( 'ul' ) || $that
.is( 'ol' ) ) {
288 // The toggle-link will be in the first list-item
289 var $firstItem
= $that
.find( 'li:first' );
290 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
292 // If theres no toggle link, add it
293 if ( !$toggle
.length
) {
294 // Make sure the numeral order doesn't get messed up, force the first (soon to be second) item
295 // to be "1". Except if the value-attribute is already used.
296 // If no value was set WebKit returns "", Mozilla returns '-1', others return null or undefined.
297 var firstval
= $firstItem
.attr( 'value' );
298 if ( firstval
=== undefined || !firstval
|| firstval
=== '-1' || firstval
=== -1 ) {
299 $firstItem
.attr( 'value', '1' );
301 $that
.prepend( $toggleLink
.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent() );
303 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
) {
304 toggleLinkPremade( $toggle
, e
);
308 } else { // <div>, <p> etc.
310 // The toggle-link will be the first child of the element
311 $toggle
= $that
.find( '> .mw-collapsible-toggle' );
313 // If a direct child .content-wrapper does not exists, create it
314 if ( !$that
.find( '> .mw-collapsible-content' ).length
) {
315 $that
.wrapInner( '<div class="mw-collapsible-content"></div>' );
318 // If theres no toggle link, add it
319 if ( !$toggle
.length
) {
320 $that
.prepend( $toggleLink
);
322 $toggleLink
= $toggle
.off( 'click.mw-collapse' ).on( 'click.mw-collapse', function ( e
) {
323 toggleLinkPremade( $toggle
, e
);
329 // Initial state (only for those that are not custom)
330 if ( $that
.hasClass( 'mw-collapsed' ) && ( $that
.attr( 'id' ) || '').indexOf( 'mw-customcollapsible-' ) !== 0 ) {
331 $that
.removeClass( 'mw-collapsed' );
332 // The collapsible element could have multiple togglers
333 // To toggle the initial state only click one of them (ie. the first one, eq(0) )
334 // Else it would go like: hide,show,hide,show for each toggle link.
335 toggleElement( $that
, 'collapse', $toggleLink
.eq(0), /* instantHide = */ true );
336 $toggleLink
.eq(0).click();
341 }( jQuery
, mediaWiki
) );