includes/TabbedCardSet.php

   1 <?php
   2 // CardSet is a widget for displaying a stack of cards, e.g. for
   3 // user preferences. It is skinnable by overloading.
   4 // Default CardSet uses fieldsets for the cards,
   5 // the derived class TabbedCardSet uses JavaScript-based tabs
   6 //
   7 // Usage:
   8 // First, create a CardSet using the constructor
   9 // Then, add cards to it
  10 // Finally Render to get the HTML
  11
  12 class TabbedCardSet extends CardSet {
  13
  14         // Return the HTML of this CardSet
  15         function renderToOutpage( &$out )
  16         {
  17                 $s = "<div id=\"column-content\"><div id=\"content\">\n";
  18
  19                 for ( $i=0; $i<count( $this->mLabels ); $i++ )
  20                 {
  21                         $s .= "<div class=\"usage\" id=\"area{$i}\"><div id=\"subheading{$i}\"><h2><a name=\"card{$i}\"></a>".
  22                                 $this->mLabels[$i] . "</h2></div>" . $this->mBodies[$i] . "</div>\n\n";
  23                 }
  24                 $s .= "</div></div>\n\n<div id=\"bar\"><div id=\"p-cactions\" class=\"portlet\">\n<ul>\n";
  25
  26                 for ( $i=0; $i<count( $this->mLabels ); $i++ )
  27                 {
  28                         $selected = ($i==0 ? "class=\"selected\"" : "");
  29                         $s .= "<li id=\"tab{$i}\" {$selected} onclick=\"chgArea({$i},this);\"
  30                             onmouseover=\"hilight({$i});\" onmouseout=\"if(prev!={$i}){hilight(this,-1);}\"><a href=\"#card{$i}\">".
  31                             $this->mLabels[$i] . "</a></li>";
  32                 }
  33
  34                 $s .= "</ul></div></div>\n\n";
  35
  36                 $out->addScript("
  37                         <script>
  38                         var elements=". count( $this->mLabels ) .";
  39                         var prev=-1;
  40
  41                         function hideall(){
  42                                 for(i=0; i<elements; i++){document.getElementById('area'+i).style.display='none';}
  43                                 document.getElementById('bar').style.display='inline';
  44                         }
  45
  46                         function chgArea(n,obj){
  47                                 if(prev>=0){
  48                                         hilight( document.getElementById('tab'+prev) , -1);
  49                                         document.getElementById('area'+prev).style.display='none';
  50                                 }
  51                                 hilight(obj,n);
  52
  53                                 document.getElementById('area'+n).style.display='inline';
  54                                 prev=n ;
  55                         }
  56
  57                         function hilight(obj,n){
  58                                 if (n<0) { obj.className=\"\"; }
  59                                 else  { obj.className=\"selected\"; }
  60                         }
  61                         function inittabs(){
  62                                 hideall();
  63                                 chgArea(0,document.getElementById('tab0'));
  64                         }
  65                         </script>
  66                 " );
  67
  68                 $out->setOnloadHandler( $out->getOnloadHandler() . "inittabs();" );
  69                 $out->addHTML( $s );
  70         }
  71
  72 } // end of: class CardSet
  73
  74 ?>