whitespace according to mw conventions + using mw.msg instead of english hardcoding
authorKrinkle <krinkle@users.mediawiki.org>
Thu, 23 Dec 2010 19:26:30 +0000 (19:26 +0000)
committerKrinkle <krinkle@users.mediawiki.org>
Thu, 23 Dec 2010 19:26:30 +0000 (19:26 +0000)
resources/jquery/jquery.makeCollapsible.js

index 363f307..eb40482 100644 (file)
@@ -1,5 +1,5 @@
 /**
- * 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 (&nbsp)
-               $toggleLink = $('<span class="kr-collapsible-toggle kr-collapsible-toggle-hide">&nbsp;[<a href="#">' + collapsetext + '</a>]&nbsp;</span>').click(function(){
+               $toggleLink = $( '<span class="kr-collapsible-toggle kr-collapsible-toggle-hide">&nbsp;[<a href="#">' + collapsetext + '</a>]&nbsp;</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