5 require_once 'prototype.php';
6 require_once 'nifty.php';
9 <script type="text/javascript" src="/plekit/toggle/toggle.js"></script>
10 <link href="/plekit/toggle/toggle.css" rel="stylesheet" type="text/css" />
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
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
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
40 function PlekitToggle ($id,$trigger,$options=NULL) {
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']);
49 if (array_key_exists ('info_div',$options)) {
50 $this->info_div = $options['info_div'];
53 if (!isset ($options['start-hidden'])) $options['start-hidden']=false;
54 $this->options = $options;
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 () {
62 $html .= $this->container_start();
63 $html .= $this->trigger_html();
64 $html .= $this->area_start_html();
68 function end () { print $this->end_html(); }
69 function end_html () {
71 $html .= $this->area_end_html();
72 $html .= $this->container_end();
77 // create two images that get shown/hidden - could not find a better way to do it
78 function image_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' />";
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";
97 if (array_key_exists ('bubble',$this->options)) $bubble=$this->options['bubble'];
100 $html .= " id='$trigger_id'";
101 $html .= " class='plc-toggle-trigger'";
102 if ($bubble) $html .= " title='$bubble'";
103 $html .= " onclick=\"plc_toggle('$this->id')\"";
105 $html .= $this->image_html();
106 $html .= $this->trigger;
107 $html .= "</$tagname>";
108 if ($this->info_div != "")
109 $html .= " (<a href=javascript:plc_show_toggle_info('$this->info_div','$this->id')>?</a>)";
113 function area_start () { print $this->area_start_html(); }
114 function area_start_html () {
115 $area_id=$this->id_name('area');
118 $html .= " class='plc-toggle-area'";
119 $html .= " id='$area_id'";
120 if ($this->options['start-hidden']) $html .= " style='display:none'";
125 function area_end () { print $this->area_end_html(); }
126 function area_end_html () {
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();
138 function container_end () { print $this->container_end_html(); }
139 function container_end_html () { return $this->nifty->end_html(); }
142 function id_name ($zonename) { return "toggle-$zonename-$this->id"; }