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>
18 $.fn
.makeCollapsible = function() {
20 return this.each(function() {
21 mw
.config
.set( 'mw.log.prefix', 'jquery.makeCollapsible' );
23 // Define reused variables and functions
24 var $that
= $(this).addClass( 'mw-collapsible' ), // case: $( '#myAJAXelement' ).makeCollapsible()
26 collapsetext
= $(this).attr( 'data-collapsetext' ),
27 expandtext
= $(this).attr( 'data-expandtext' ),
28 toggleElement = function( $collapsible
, action
, $defaultToggle
) {
29 // Validate parameters
30 if ( !$collapsible
.jquery
) { // $collapsible must be an instance of jQuery
33 if ( action
!= 'expand' && action
!= 'collapse' ) {
34 // action must be string with 'expand' or 'collapse'
37 if ( typeof $defaultToggle
!== 'undefined' && !$defaultToggle
.jquery
) {
38 // is optional, but if passed must be an instance of jQuery
42 if ( action
== 'collapse' ) {
44 // Collapse the element
45 if ( $collapsible
.is( 'table' ) ) {
46 // Hide all table rows of this table
47 // Slide doens't work with tables, but fade does as of jQuery 1.1.3
48 // http://stackoverflow.com/questions/467336#920480
50 if ( $defaultToggle
.jquery
) {
51 // Exclude tablerow containing togglelink
52 $collapsible
.find( '>tbody>tr' ).not( $defaultToggle
.parent().parent() ).stop(true, true).fadeOut();
54 $collapsible
.find( '>tbody>tr' ).stop( true, true ).fadeOut();
57 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
58 if ( $defaultToggle
.jquery
) {
59 // Exclude list-item containing togglelink
60 $collapsible
.find( '> li' ).not( $defaultToggle
.parent() ).stop( true, true ).slideUp();
62 $collapsible
.find( '> li' ).stop( true, true ).slideUp();
65 } else { // <div>, <p> etc.
66 $collapsible
.find( '> .mw-collapsible-content' ).slideUp();
72 if ( $collapsible
.is( 'table' ) ) {
73 if ( $defaultToggle
.jquery
) {
74 // Exclude tablerow containing togglelink
75 $collapsible
.find( '>tbody>tr' ).not( $defaultToggle
.parent().parent() ).stop(true, true).fadeIn();
77 $collapsible
.find( '>tbody>tr' ).stop(true, true).fadeIn();
80 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
81 if ( $defaultToggle
.jquery
) {
82 // Exclude list-item containing togglelink
83 $collapsible
.find( '> li' ).not( $defaultToggle
.parent() ).stop( true, true ).slideDown();
85 $collapsible
.find( '> li' ).stop( true, true ).slideDown();
88 } else { // <div>, <p> etc.
89 $collapsible
.find( '> .mw-collapsible-content' ).slideDown();
93 toggleLinkDefault = function( that
, e
) {
95 $collapsible
= $that
.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
98 // It's expanded right now
99 if ( $that
.hasClass( 'mw-collapsible-toggle-expanded' ) ) {
100 // Change link to "Show"
101 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
102 if ( $that
.find( '> a' ).size() ) {
103 $that
.find( '> a' ).text( expandtext
);
105 $that
.text( expandtext
);
108 toggleElement( $collapsible
, 'collapse', $that
);
110 // It's collapsed right now
112 // Change link to "Hide"
113 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
114 if ( $that
.find( '> a' ).size() ) {
115 $that
.find( '> a' ).text( collapsetext
);
117 $that
.text( collapsetext
);
120 toggleElement( $collapsible
, 'expand', $that
);
124 toggleLinkCustom = function( that
, e
) {
126 classes
= that
.className
.split(' ');
128 // Check each class to see if it belongs to a customcollapse
129 for ( i
= 0; i
< classes
.length
; i
++ ) {
130 if ( classes
[i
].indexOf( 'mw-customtoggle-' ) === 0 ) {
131 var id
= '#' + classes
[i
].replace( 'mw-customtoggle-', 'mw-customcollapsible-' ),
132 $collapsible
= $( id
),
133 action
= $collapsible
.hasClass( 'mw-collapsed' ) ? 'expand' : 'collapse';
135 $collapsible
.toggleClass( 'mw-collapsed' );
136 toggleElement( $collapsible
, action
, $that
);
141 // Use custom text or default ?
142 if( !collapsetext
|| collapsetext
=== '' ){
143 collapsetext
= mw
.msg( 'collapsible-collapse', 'Collapse' );
145 if ( !expandtext
|| expandtext
=== '' ){
146 expandtext
= mw
.msg( 'collapsible-expand', 'Expand' );
149 // Create toggle link with a space around the brackets ( [text] )
150 var $toggleLink
= $( '<a href="#">' ).text( collapsetext
).wrap( '<span class="mw-collapsible-toggle mw-collapsible-toggle-expanded">' ).parent().prepend( ' [' ).append( '] ' ).bind( 'click.mw-collapse', function(e
){
151 toggleLinkDefault( this, e
);
154 // Return if it has been enabled already.
155 if ( $that
.hasClass( 'mw-made-collapsible' ) ) {
158 $that
.addClass( 'mw-made-collapsible' );
161 // Check if this element has a custom position for the toggle link
162 // (ie. outside the container or deeper inside the tree)
163 // Then: Locate the custom toggle link(s) and bind them
164 if ( $that
.attr( 'id' ).indexOf( 'mw-customcollapsible-' ) === 0 ) {
166 var thatId
= $that
.attr( 'id' ),
167 $customTogglers
= $( '.' + thatId
.replace( 'mw-customcollapsible', 'mw-customtoggle' ) );
168 mw
.log( 'Found custom collapsible: #' + thatId
);
170 // Double check that there is actually a customtoggle link
171 if ( $customTogglers
.size() ) {
172 $customTogglers
.bind( 'click.mw-collapse', function( e
) {
173 toggleLinkCustom( this, e
);
176 mw
.log( '#' + thatId
+ ': Missing toggler!' );
179 // To change initial state at the bottom of the script
180 // Set this variable to one of the togglers
181 var $toggleLink
= $customTogglers
.eq(0);
183 // If this is not a custom case, do the default:
184 // Wrap the contents add the toggle link
187 // Elements are treated differently
188 if ( $that
.is( 'table' ) ) {
189 // The toggle-link will be in one the the cells (td or th) of the first row
190 var $firstRowCells
= $( 'tr:first th, tr:first td', that
),
191 $toggle
= $firstRowCells
.find( '> .mw-collapsible-toggle' );
193 // If theres no toggle link, add it to the last cell
194 if ( !$toggle
.size() ) {
195 $firstRowCells
.eq(-1).prepend( $toggleLink
);
197 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
198 toggleLinkDefault( this, e
);
202 } else if ( $that
.is( 'ul' ) || $that
.is( 'ol' ) ) {
203 // The toggle-link will be in the first list-item
204 var $firstItem
= $( 'li:first', $that
),
205 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
207 // If theres no toggle link, add it
208 if ( !$toggle
.size() ) {
209 // Make sure the numeral order doesn't get messed up, reset to 1 unless value-attribute is already used
210 // WebKit return '' if no value, Mozilla returns '-1' is no value
211 if ( $firstItem
.attr( 'value' ) == '' || $firstItem
.attr( 'value' ) == '-1' ) { // Will fail with ===
212 $firstItem
.attr( 'value', '1' );
214 $that
.prepend( $toggleLink
.wrap( '<li class="mw-collapsible-toggle-li">' ).parent() );
216 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
217 toggleLinkDefault( this, e
);
221 } else { // <div>, <p> etc.
222 // If a direct child .content-wrapper does not exists, create it
223 if ( !$that
.find( '> .mw-collapsible-content' ).size() ) {
224 $that
.wrapInner( '<div class="mw-collapsible-content">' );
227 // The toggle-link will be the first child of the element
228 var $toggle
= $that
.find( '> .mw-collapsible-toggle' );
230 // If theres no toggle link, add it
231 if ( !$toggle
.size() ) {
232 $that
.prepend( $toggleLink
);
234 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
235 toggleLinkDefault( this, e
);
242 if ( $that
.hasClass( 'mw-collapsed' ) ) {
243 $that
.removeClass( 'mw-collapsed' );