resources/skins.common/skins.common.js

   1 /*
   2  * Scripts common to all skins
   3  */
   4
   5 /**
   6  * Collapsible tables and divs.
   7  *
   8  * Users can create tables and nested divs which collapse either on-click or on-load,
   9  * to save space on a page, or to conceal information at first sight.  Eg:
  10  *
  11  *   <table class="wikitable collapsible collapsed"><tr>
  12  *      <th>A table header which will always be visible</th>
  13  *   </tr><tr>
  14  *      <td>A table cell which will be hidden on page-load</td>
  15  *   </tr></table>
  16  *
  17  *   <div class="collapsible collapsed">
  18  *      Content which will always be visible
  19  *      <span class="collapsible-expander">Click me!</span>
  20  *      <div>
  21  *              This content will be hidden until the span above is clicked
  22  *      </div>
  23  *   </div>
  24  *
  25  * If the user does not create a toggle-button manually, one will be created,
  26  * in the top-right header cell for tables, and at the beginning of the outer
  27  * div's content for a collapsible div.
  28  * @author Happy-melon
  29  */
  30 $('.collapsible').each( function(){
  31         var $x = $j(this);
  32         if( $('.collapsible-expander', $x).size() ){
  33                 $('.collapsible-expander', $x)
  34                         .click(function(e, rmClass){
  35                                 e.preventDefault();
  36                                 rmClass = !(rmClass == false);
  37                                 $(this)
  38                                         .toggleClass('show')
  39                                         .trigger('mw-toggle-collapse', [rmClass]);
  40                                 return false;
  41                         });
  42         } else {
  43                 var $expander = $j('<div class="collapsible-expander">')
  44                         .text( '[' + mediaWiki.msg( 'hide' ) + ']' )
  45                         .click(function(e, rmClass){
  46                                 rmClass = !(rmClass == false);
  47                                 e.preventDefault();
  48                                 $(this)
  49                                         .toggleClass('show')
  50                                         .trigger('mw-toggle-collapse', [rmClass])
  51                                         .text(
  52                                                 '[' +
  53                                                 ($(this).is('.collapsible.collapsed .collapsible-expander')
  54                                                         ? mediaWiki.msg( 'show' )
  55                                                         : mediaWiki.msg( 'hide' )) +
  56                                                 ']'
  57                                         );
  58                                 return false;
  59                         });
  60                 if( $x.is('div.collapsible')){
  61                         $x.prepend($expander);
  62                 } else {
  63                         $('tr:first th:last',$x).append($expander);
  64                 }
  65         }
  66
  67 });
  68
  69 /**
  70  * This is a bit nasty because it also toggles any nested
  71  * collapsible objects.  But it would be a nightmare to only
  72  * select the outer collapser without adding ids everywhere.
  73  */
  74 $('table.collapsible').live( 'mw-toggle-collapse', function(e, rmClass){
  75         e.stopPropagation();
  76         var time = rmClass ? 500 : 0;
  77         $('tr:gt(0)',$(this))
  78                 // We'd like to use slideToggle() like for divs, but the jQuery
  79                 // slide animation for table rows is just *pig ugly*...
  80                 .toggle("fade", { direction: "vertical" }, time);
  81         if( rmClass ){
  82                 $('table.collapsible',$(this)).andSelf().toggleClass('collapsed');
  83         }
  84         return false;
  85 });
  86
  87 $('div.collapsible').live( 'mw-toggle-collapse', function(e, rmClass){
  88         e.stopPropagation();
  89         var time = rmClass ? 500 : 0;
  90         $(this).children(':not(.collapsible-expander)')
  91                 .slideToggle(time);
  92         if( rmClass ){
  93                 $('div.collapsible',$(this)).andSelf().toggleClass('collapsed');
  94         }
  95         return false;
  96 });
  97
  98 /**
  99  * Here we want to collapse .collapsible-expander buttons whose closest
 100  * div.collapsible parent wants to be collapsed on first view
 101  */
 102 $('.collapsible-expander').filter(function(){
 103         return $(this).closest('.collapsible').is('.collapsible.collapsed')
 104 }).trigger( 'click', [false] );
 105
 106
 107