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>
19 $.fn
.makeCollapsible = function() {
21 return this.each(function() {
22 var _fn
= 'jquery.makeCollapsible> ';
24 // Define reused variables and functions
25 var $that
= $(this).addClass( 'mw-collapsible' ), // case: $( '#myAJAXelement' ).makeCollapsible()
27 collapsetext
= $(this).attr( 'data-collapsetext' ),
28 expandtext
= $(this).attr( 'data-expandtext' ),
29 toggleElement = function( $collapsible
, action
, $defaultToggle
, instantHide
) {
30 // Validate parameters
31 if ( !$collapsible
.jquery
) { // $collapsible must be an instance of jQuery
34 if ( action
!= 'expand' && action
!= 'collapse' ) {
35 // action must be string with 'expand' or 'collapse'
38 if ( typeof $defaultToggle
== 'undefined' ) {
39 $defaultToggle
= null;
41 if ( $defaultToggle
!== null && !($defaultToggle
instanceof 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 var $containers
= null;
50 if ( action
== 'collapse' ) {
52 // Collapse the element
53 if ( $collapsible
.is( 'table' ) ) {
54 // Hide all table rows of this table
55 // Slide doens't work with tables, but fade does as of jQuery 1.1.3
56 // http://stackoverflow.com/questions/467336#920480
57 $containers
= $collapsible
.find( '>tbody>tr' );
58 if ( $defaultToggle
) {
59 // Exclude tablerow containing togglelink
60 $containers
.not( $defaultToggle
.closest( 'tr' ) ).stop(true, true).fadeOut();
65 $containers
.stop( true, true ).fadeOut();
69 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
70 $containers
= $collapsible
.find( '> li' );
71 if ( $defaultToggle
) {
72 // Exclude list-item containing togglelink
73 $containers
.not( $defaultToggle
.parent() ).stop( true, true ).slideUp();
78 $containers
.stop( true, true ).slideUp();
82 } else { // <div>, <p> etc.
83 var $collapsibleContent
= $collapsible
.find( '> .mw-collapsible-content' );
85 // If a collapsible-content is defined, collapse it
86 if ( $collapsibleContent
.size() ) {
88 $collapsibleContent
.hide();
90 $collapsibleContent
.slideUp();
93 // Otherwise assume this is a customcollapse with a remote toggle
94 // .. and there is no collapsible-content because the entire element should be toggled
96 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
97 $collapsible
.fadeOut();
99 $collapsible
.slideUp();
106 // Expand the element
107 if ( $collapsible
.is( 'table' ) ) {
108 $containers
= $collapsible
.find( '>tbody>tr' );
109 if ( $defaultToggle
) {
110 // Exclude tablerow containing togglelink
111 $containers
.not( $defaultToggle
.parent().parent() ).stop(true, true).fadeIn();
113 $containers
.stop(true, true).fadeIn();
116 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
117 $containers
= $collapsible
.find( '> li' );
118 if ( $defaultToggle
) {
119 // Exclude list-item containing togglelink
120 $containers
.not( $defaultToggle
.parent() ).stop( true, true ).slideDown();
122 $containers
.stop( true, true ).slideDown();
125 } else { // <div>, <p> etc.
126 var $collapsibleContent
= $collapsible
.find( '> .mw-collapsible-content' );
128 // If a collapsible-content is defined, collapse it
129 if ( $collapsibleContent
.size() ) {
130 $collapsibleContent
.slideDown();
132 // Otherwise assume this is a customcollapse with a remote toggle
133 // .. and there is no collapsible-content because the entire element should be toggled
135 if ( $collapsible
.is( 'tr' ) || $collapsible
.is( 'td' ) || $collapsible
.is( 'th' ) ) {
136 $collapsible
.fadeIn();
138 $collapsible
.slideDown();
144 // Toggles collapsible and togglelink class and updates text label
145 toggleLinkDefault = function( that
, e
) {
147 $collapsible
= $that
.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
151 // It's expanded right now
152 if ( !$that
.hasClass( 'mw-collapsible-toggle-collapsed' ) ) {
153 // Change link to "Show"
154 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
155 if ( $that
.find( '> a' ).size() ) {
156 $that
.find( '> a' ).text( expandtext
);
158 $that
.text( expandtext
);
161 toggleElement( $collapsible
, 'collapse', $that
);
163 // It's collapsed right now
165 // Change link to "Hide"
166 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
167 if ( $that
.find( '> a' ).size() ) {
168 $that
.find( '> a' ).text( collapsetext
);
170 $that
.text( collapsetext
);
173 toggleElement( $collapsible
, 'expand', $that
);
177 // Toggles collapsible and togglelink class
178 toggleLinkPremade = function( $that
, e
) {
179 var $collapsible
= $that
.eq(0).closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
183 // It's expanded right now
184 if ( !$that
.hasClass( 'mw-collapsible-toggle-collapsed' ) ) {
185 // Change toggle to collapsed
186 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
188 toggleElement( $collapsible
, 'collapse', $that
);
190 // It's collapsed right now
192 // Change toggle to expanded
193 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
195 toggleElement( $collapsible
, 'expand', $that
);
199 // Toggles customcollapsible
200 toggleLinkCustom = function( $that
, e
, $collapsible
) {
201 // For the initial state call of customtogglers there is no event passed
206 // Get current state and toggle to the opposite
207 var action
= $collapsible
.hasClass( 'mw-collapsed' ) ? 'expand' : 'collapse';
208 $collapsible
.toggleClass( 'mw-collapsed' );
209 toggleElement( $collapsible
, action
, $that
);
213 // Use custom text or default ?
214 if( !collapsetext
|| collapsetext
=== '' ){
215 collapsetext
= mw
.msg( 'collapsible-collapse' );
217 if ( !expandtext
|| expandtext
=== '' ){
218 expandtext
= mw
.msg( 'collapsible-expand' );
221 // Create toggle link with a space around the brackets ( [text] )
222 var $toggleLink
= $( '<a href="#"></a>' ).text( collapsetext
).wrap( '<span class="mw-collapsible-toggle"></span>' ).parent().prepend( ' [' ).append( '] ' ).bind( 'click.mw-collapse', function(e
){
223 toggleLinkDefault( this, e
);
226 // Return if it has been enabled already.
227 if ( $that
.hasClass( 'mw-made-collapsible' ) ) {
230 $that
.addClass( 'mw-made-collapsible' );
233 // Check if this element has a custom position for the toggle link
234 // (ie. outside the container or deeper inside the tree)
235 // Then: Locate the custom toggle link(s) and bind them
236 if ( $that
.attr( 'id' ).indexOf( 'mw-customcollapsible-' ) === 0 ) {
238 var thatId
= $that
.attr( 'id' ),
239 $customTogglers
= $( '.' + thatId
.replace( 'mw-customcollapsible', 'mw-customtoggle' ) );
240 mw
.log( _fn
+ 'Found custom collapsible: #' + thatId
);
242 // Double check that there is actually a customtoggle link
243 if ( $customTogglers
.size() ) {
244 $customTogglers
.bind( 'click.mw-collapse', function( e
) {
245 toggleLinkCustom( $(this), e
, $that
);
248 mw
.log( _fn
+ '#' + thatId
+ ': Missing toggler!' );
252 if ( $that
.hasClass( 'mw-collapsed' ) ) {
253 $that
.removeClass( 'mw-collapsed' );
254 toggleLinkCustom( $customTogglers
, null, $that
);
257 // If this is not a custom case, do the default:
258 // Wrap the contents add the toggle link
261 // Elements are treated differently
262 if ( $that
.is( 'table' ) ) {
263 // The toggle-link will be in one the the cells (td or th) of the first row
264 var $firstRowCells
= $( 'tr:first th, tr:first td', that
),
265 $toggle
= $firstRowCells
.find( '> .mw-collapsible-toggle' );
267 // If theres no toggle link, add it to the last cell
268 if ( !$toggle
.size() ) {
269 $firstRowCells
.eq(-1).prepend( $toggleLink
);
271 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
272 toggleLinkPremade( $toggle
, e
);
276 } else if ( $that
.is( 'ul' ) || $that
.is( 'ol' ) ) {
277 // The toggle-link will be in the first list-item
278 var $firstItem
= $( 'li:first', $that
),
279 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
281 // If theres no toggle link, add it
282 if ( !$toggle
.size() ) {
283 // Make sure the numeral order doesn't get messed up, reset to 1 unless value-attribute is already used
284 // WebKit return '' if no value, Mozilla returns '-1' is no value.
285 // Needs ==, will fail with ===
286 if ( $firstItem
.attr( 'value' ) == '' || $firstItem
.attr( 'value' ) == '-1' ) {
287 $firstItem
.attr( 'value', '1' );
289 $that
.prepend( $toggleLink
.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent() );
291 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
292 toggleLinkPremade( $toggle
, e
);
296 } else { // <div>, <p> etc.
297 // If a direct child .content-wrapper does not exists, create it
298 if ( !$that
.find( '> .mw-collapsible-content' ).size() ) {
299 $that
.wrapInner( '<div class="mw-collapsible-content"></div>' );
302 // The toggle-link will be the first child of the element
303 var $toggle
= $that
.find( '> .mw-collapsible-toggle' );
305 // If theres no toggle link, add it
306 if ( !$toggle
.size() ) {
307 $that
.prepend( $toggleLink
);
309 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
310 toggleLinkPremade( $toggle
, e
);
316 // Initial state (only for those that are not custom)
317 if ( $that
.hasClass( 'mw-collapsed' ) && $that
.attr( 'id' ).indexOf( 'mw-customcollapsible-' ) !== 0 ) {
318 $that
.removeClass( 'mw-collapsed' );
319 // The collapsible element could have multiple togglers
320 // To toggle the initial state only click one of them (ie. the first one, eq(0) )
321 // Else it would go like: hide,show,hide,show for each toggle link.
322 toggleElement( $that
, 'collapse', $toggleLink
.eq(0), /* instantHide = */ true );
323 $toggleLink
.eq(0).click();
327 } )( jQuery
, mediaWiki
);