/**
- * make lists, divs, tables etc. toggleable
+ * jQuery makeCollapsible
*
* This will enable collapsible-functionality on all passed elements.
* Will prevent binding twice to the same element.
* Elements made collapsible have class "kr-made-collapsible".
* Except for tables and lists, the inner content is wrapped in "kr-collapsible-content".
*
- * Copyright 2008-2009 Krinkle <krinklemail@gmail.com>
+ * @author Krinkle <krinklemail@gmail.com>
*
- * @license CC-BY 2.0 NL <http://creativecommons.org/licenses/by/2.0/nl/deed.en>
+ * @TODO: Remove old "kr-" prefix
+ *
+ * Dual license:
+ * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
+ * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
*/
$.fn.makeCollapsible = function() {
return this.each(function() {
- var $that = $(this).addClass('kr-collapsible'), // in case $('#myAJAXelement').makeCollapsible() was called
+ var $that = $(this).addClass( 'kr-collapsible' ), // in case $( '#myAJAXelement' ).makeCollapsible() was called
that = this,
- collapsetext = $(this).attr('data-collapsetext'),
- expandtext = $(this).attr('data-expandtext');
+ collapsetext = $(this).attr( 'data-collapsetext' ),
+ expandtext = $(this).attr( 'data-expandtext' );
// Use custom text or default ?
- if( !collapsetext || collapsetext == ''){
- collapsetext = 'Collapse';
+ if( !collapsetext || collapsetext == '' ){
+ collapsetext = mw.msg( 'hide' );
}
- if ( !expandtext || expandtext == ''){
- expandtext = 'Expand';
+ if ( !expandtext || expandtext == '' ){
+ expandtext = mw.msg( 'show' );
}
// Create toggle link with a space around the brackets ( )
- $toggleLink = $('<span class="kr-collapsible-toggle kr-collapsible-toggle-hide"> [<a href="#">' + collapsetext + '</a>] </span>').click(function(){
+ $toggleLink = $( '<span class="kr-collapsible-toggle kr-collapsible-toggle-hide"> [<a href="#">' + collapsetext + '</a>] </span>' ).click( function(){
var $that = $(this),
- $collapsible = $that.closest('.kr-collapsible.kr-made-collapsible').toggleClass('kr-collapsed');
- if ($that.hasClass('kr-collapsible-toggle-hide')) {
+ $collapsible = $that.closest( '.kr-collapsible.kr-made-collapsible' ).toggleClass( 'kr-collapsed' );
+ if ( $that.hasClass( 'kr-collapsible-toggle-hide' ) ) {
// Change link to "Show"
$that
- .removeClass('kr-collapsible-toggle-hide').addClass('kr-collapsible-toggle-show')
- .find('> a').html(expandtext);
+ .removeClass( 'kr-collapsible-toggle-hide' ).addClass( 'kr-collapsible-toggle-show' )
+ .find( '> a' ).html( expandtext );
// Hide the collapsible element
- if ($collapsible.is('table')) {
+ if ( $collapsible.is( 'table' ) ) {
// Hide all direct childing table rows of this table, except the row containing the link
// Slide doens't work, but fade works fine as of jQuery 1.1.3
// http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row#920480
// Stop to prevent animaties from stacking up
- $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeOut();
- } else if ($collapsible.is('ul') || $collapsible.is('ol')) {
- $collapsible.find('> li').not($that.parent()).stop(true, true).slideUp();
+ $collapsible.find( '> tbody > tr' ).not( $that.parent().parent() ).stop(true, true).fadeOut();
+
+ } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) {
+ $collapsible.find( '> li' ).not($that.parent()).stop(true, true).slideUp();
+
} else { // <div>, <p> etc.
- $collapsible.find('> .kr-collapsible-content').slideUp();
+ $collapsible.find( '> .kr-collapsible-content' ).slideUp();
}
+
} else {
// Change link to "Hide"
$that
- .removeClass('kr-collapsible-toggle-show').addClass('kr-collapsible-toggle-hide')
- .find('> a').html(collapsetext);
+ .removeClass( 'kr-collapsible-toggle-show' ).addClass( 'kr-collapsible-toggle-hide' )
+ .find( '> a' ).html( collapsetext );
// Show the collapsible element
- if ($collapsible.is('table')) {
- $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeIn();
- } else if ($collapsible.is('ul') || $collapsible.is('ol')) {
- $collapsible.find('> li').not($that.parent()).stop(true, true).slideDown();
+ if ( $collapsible.is( 'table' ) ) {
+ $collapsible.find( '> tbody > tr' ).not( $that.parent().parent() ).stop(true, true).fadeIn();
+
+ } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) {
+ $collapsible.find( '> li' ).not( $that.parent() ).stop(true, true).slideDown();
+
} else { // <div>, <p> etc.
- $collapsible.find('> .kr-collapsible-content').slideDown();
+ $collapsible.find( '> .kr-collapsible-content' ).slideDown();
}
}
return false;
- });
+ } );
+
// Skip if it has been enabled already.
- if ($that.hasClass('kr-made-collapsible')) {
+ if ($that.hasClass( 'kr-made-collapsible' )) {
return;
} else {
- $that.addClass('kr-made-collapsible');
+ $that.addClass( 'kr-made-collapsible' );
}
+
// Elements are treated differently
- if ($that.is('table')) {
+ if ( $that.is( 'table' ) ) {
// The toggle-link will be in the last cell (td or th) of the first row
- var $lastCell = $('tr:first th, tr:first td', that).eq(-1);
- if (!$lastCell.find('> .kr-collapsible-toggle').size()) {
- $lastCell.prepend($toggleLink);
+ var $lastCell = $( 'tr:first th, tr:first td', that ).eq(-1);
+ if ( !$lastCell.find( '> .kr-collapsible-toggle' ).size() ) {
+ $lastCell.prepend( $toggleLink );
}
- } else if ($that.is('ul') || $that.is('ol')) {
- if (!$('li:first', $that).find('> .kr-collapsible-toggle').size()) {
+ } else if ($that.is( 'ul' ) || $that.is( 'ol' )) {
+ if ( !$( 'li:first', $that).find( '> .kr-collapsible-toggle' ).size() ) {
// Make sure the numeral count doesn't get messed up, reset to 1 unless value-attribute is already used
- if ( $('li:first', $that).attr('value') == '' ) {
- $('li:first', $that).attr('value', '1');
+ if ( $( 'li:first', $that ).attr( 'value' ) == '' ) {
+ $( 'li:first', $that ).attr( 'value', '1' );
}
- $that.prepend($toggleLink.wrap('<li class="kr-collapsibile-toggle-li">').parent());
+ $that.prepend( $toggleLink.wrap( '<li class="kr-collapsibile-toggle-li">' ).parent() );
}
} else { // <div>, <p> etc.
// Is there an content-wrapper already made ?
// If a direct child with the class does not exists, create the wrap.
- if (!$that.find('g> .kr-collapsible-content').size()) {
- $that.wrapInner('<div class="kr-collapsible-content">');
+ if ( !$that.find( '> .kr-collapsible-content' ).size() ) {
+ $that.wrapInner( '<div class="kr-collapsible-content">' );
}
// Add toggle-link if not present
- if (!$that.find('> .kr-collapsible-toggle').size()) {
- $that.prepend($toggleLink);
+ if ( !$that.find( '> .kr-collapsible-toggle' ).size() ) {
+ $that.prepend( $toggleLink );
}
}
// Initial state
- if ($that.hasClass('kr-collapsed')) {
+ if ( $that.hasClass( 'kr-collapsed' ) ) {
$toggleLink.click();
}
- });
+ } );
};
-$(function(){
- $('.kr-collapsible').makeCollapsible();
-});
\ No newline at end of file
+$( function(){
+ $( '.kr-collapsible' ).makeCollapsible();
+} );
\ No newline at end of file