plekit/php/toggle.php

   1 <?php
   2
   3   // $Id$
   4
   5 require_once 'prototype.php';
   6 require_once 'nifty.php';
   7
   8 drupal_set_html_head('
   9 <script type="text/javascript" src="/plekit/toggle/toggle.js"></script>
  10 <link href="/plekit/toggle/toggle.css" rel="stylesheet" type="text/css" />
  11 ');
  12
  13 // This is for creating an area that users can hide and show
  14 // It is logically made of 3 parts:
  15 // (*) area is what gets hidden and shown
  16 // (*) trigger is the area that can be clicked for toggling
  17 // (*) image contains a visual indication of the current status
  18 //
  19 // constructor needs
  20 // (*) id:      an 'id', used for naming the three parts
  21 // (*) trigger: the html text for the trigger
  22 // (*) options: a hash that can define
  23 //      - trigger-tagname : to be used instead of <span> for wrapping the trigger
  24 //      - bubble : might not work if trigger-tagname is redefined
  25 //      - init-hidden : start hidden rather than visible
  26 //
  27 // methods are as follows
  28 // (*) trigger_html (): return the html code for the trigger
  29 // (*) image_html ():   returns the html code for the image
  30 // (*) area_start ():   because we have too many places where php 'prints' code: instead
  31 // (*) area_end():        of returning it, we do not expect the code for the area to be passed
  32 //                        so these methods can be used to delimit the area in question
  33
  34 class PlekitToggle {
  35   // mandatory
  36   var $id;
  37   var $nifty;
  38   var $info_div = "";
  39
  40   function PlekitToggle ($id,$trigger,$options=NULL) {
  41     $this->id = $id;
  42     $this->trigger=$trigger;
  43     if ( ! $options ) $options = array();
  44     if (array_key_exists ('visible',$options)) {
  45       $options['start-hidden'] = ! $options['visible'];
  46       unset ($options['visible']);
  47     }
  48
  49     if (array_key_exists ('info_div',$options)) {
  50         $this->info_div = $options['info_div'];
  51     }
  52
  53     if (!isset ($options['start-hidden'])) $options['start-hidden']=false;
  54     $this->options = $options;
  55   }
  56
  57   // the simple, usual way to use it :
  58   // a container that contains the switch and the area in sequence
  59   function start ()             { print $this->start_html(); }
  60   function start_html () {
  61     $html = "";
  62     $html .= $this->container_start();
  63     $html .= $this->trigger_html();
  64     $html .= $this->area_start_html();
  65     return $html;
  66   }
  67
  68   function end ()               { print $this->end_html(); }
  69   function end_html () {
  70     $html = "";
  71     $html .= $this->area_end_html();
  72     $html .= $this->container_end();
  73     return $html;
  74   }
  75
  76
  77   // create two images that get shown/hidden - could not find a better way to do it
  78   function image_html () {
  79     $html="";
  80     if ( ! $this->options['start-hidden'])      { $x1=""; $x2=" style='display:none'"; }
  81     else                                        { $x2=""; $x1=" style='display:none'"; }
  82     $image_id=$this->id_name('image-visible');
  83     $html .= "<img id='$image_id' class='plc-toggle-visible' src='/plekit/icons/toggle-visible.png'$x1";
  84     $html .= " alt='Hide this section' />";
  85     $image_id=$this->id_name('image-hidden');
  86     $html .= "<img id='$image_id' class='plc-toggle-hidden' src='/plekit/icons/toggle-hidden.png'$x2";
  87     $html .= " alt='Show this section' />";
  88     return $html;
  89   }
  90
  91   function trigger ()           { print $this->trigger_html(); }
  92   function trigger_html () {
  93     $trigger_id=$this->id_name('trigger');
  94     if (array_key_exists ('trigger-tagname',$this->options)) $tagname=$this->options['trigger-tagname'];
  95     if (empty($tagname)) $tagname="span";
  96     $bubble="";
  97     if (array_key_exists ('bubble',$this->options)) $bubble=$this->options['bubble'];
  98
  99     $html="<$tagname";
 100     $html .= " id='$trigger_id'";
 101     $html .= " class='plc-toggle-trigger'";
 102     if ($bubble) $html .= " title='$bubble'";
 103     $html .= " onclick=\"plc_toggle('$this->id')\"";
 104     $html .= ">";
 105     $html .= $this->image_html();
 106     $html .= $this->trigger;
 107     $html .= "</$tagname>";
 108     if ($this->info_div != "")
 109     $html .= "&nbsp;(<a href=javascript:plc_show_toggle_info('$this->info_div','$this->id')>?</a>)";
 110     return $html;
 111   }
 112
 113   function area_start () { print $this->area_start_html(); }
 114   function area_start_html () {
 115     $area_id=$this->id_name('area');
 116     $html="";
 117     $html .= "<div";
 118     $html .= " class='plc-toggle-area'";
 119     $html .= " id='$area_id'";
 120     if ($this->options['start-hidden']) $html .= " style='display:none'";
 121     $html .= ">";
 122     return $html;
 123   }
 124
 125   function area_end () { print $this->area_end_html(); }
 126   function area_end_html () {
 127     return "</div>";
 128   }
 129
 130   /* if desired, you can embed the whole (trigger+area) in another div for visual effects */
 131   function container_start ()           { print $this->container_start_html(); }
 132   function container_start_html ()      {
 133     $id=$this->id_name('container');
 134     $this->nifty=new PlekitNifty ($id,'plc-toggle-container','medium');
 135     return $this->nifty->start_html();
 136   }
 137
 138   function container_end ()             { print $this->container_end_html(); }
 139   function container_end_html ()        { return $this->nifty->end_html(); }
 140
 141   // build id names
 142   function id_name ($zonename) { return "toggle-$zonename-$this->id"; }
 143
 144 }
 145
 146 ?>