3 require_once 'prototype.php';
4 require_once 'jstorage.php';
5 require_once 'nifty.php';
8 <script type="text/javascript" src="/plekit/toggle/toggle.js"></script>
9 <link href="/plekit/toggle/toggle.css" rel="stylesheet" type="text/css" />
12 // This is for creating an area that users can hide and show
13 // It is logically made of 3 parts:
14 // (*) area is what gets hidden and shown
15 // (*) trigger is the area that can be clicked for toggling
16 // (*) image contains a visual indication of the current status
19 // (*) id: an 'id', used for naming the three parts
20 // (*) trigger: the html text for the trigger
21 // (*) options: a hash that can define
22 // - trigger-tagname : to be used instead of <span> for wrapping the trigger
23 // - bubble : might not work if trigger-tagname is redefined
24 // - visible : if set to false, start hidden rather than visible
25 // - info-text : the text for help on the tab
26 // - info-visible : whether info needs to be visible at startup
28 // methods are as follows
29 // (*) trigger_html (): return the html code for the trigger
30 // (*) image_html (): returns the html code for the image
31 // (*) area_start (): because we have too many places where php 'prints' code: instead
32 // (*) area_end(): of returning it, we do not expect the code for the area to be passed
33 // 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 // 'visible' may be set or not; if set to NULL it's considered as undefined
45 // so using NULL as the default means 'select from local storage i.e. last status'
46 if (array_key_exists ('visible',$options) && $options['visible']==NULL)
47 unset ($options['visible']);
48 // start-hidden is internal and is always set
49 if (array_key_exists ('visible',$options)) {
50 $options['start-hidden'] = ! $options['visible'];
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();
65 $html .= $this->info_html();
69 function end () { print $this->end_html(); }
70 function end_html () {
72 $html .= $this->area_end_html();
73 $html .= $this->container_end();
74 // if 'visible' is not set, set or or off from local storage
75 if ( ! array_key_exists('visible',$this->options) )
76 $html .= $this->visible_from_store_html();
80 function visible_from_store_html() {
83 $html .= "<script type='text/javascript'>";
84 // javascript code can't take -
85 // $idj=str_replace('-','_',$id);
86 // $html .= "function init_$idj () { pletoggle_from_store('$id');}";
87 // $html .= "Event.observe(window,'load',init_$idj);";
88 $html .= "pletoggle_from_store('$id');";
93 // create two images that get shown/hidden - could not find a better way to do it
94 function image_html () {
96 if ( ! $this->options['start-hidden']) { $x1=""; $x2=" style='display:none'"; }
97 else { $x2=""; $x1=" style='display:none'"; }
98 $image_id=$this->id_name('image-visible');
99 $html .= "<img id='$image_id' class='plc-toggle-visible' src='/plekit/icons/toggle-visible.png'$x1";
100 $html .= " alt='Hide this section' />";
101 $image_id=$this->id_name('image-hidden');
102 $html .= "<img id='$image_id' class='plc-toggle-hidden' src='/plekit/icons/toggle-hidden.png'$x2";
103 $html .= " alt='Show this section' />";
107 function trigger () { print $this->trigger_html(); }
108 function trigger_html () {
109 $trigger_id=$this->id_name('trigger');
110 if (array_key_exists ('trigger-tagname',$this->options)) $tagname=$this->options['trigger-tagname'];
111 if (empty($tagname)) $tagname="span";
113 if (array_key_exists ('bubble',$this->options)) $bubble=$this->options['bubble'];
116 $html .= " id='$trigger_id'";
117 $html .= " class='plc-toggle-trigger'";
118 if ($bubble) $html .= " title='$bubble'";
119 $html .= " onclick=\"pletoggle_toggle('$this->id')\"";
121 $html .= $this->image_html();
122 $html .= $this->trigger;
123 $html .= "</$tagname>";
124 if (array_key_exists ('info-text',$this->options)) {
126 $html .= "<span class='toggle-info-button' onClick='pletoggle_toggle_info(\"$id\");'><img height=20 src='/planetlab/icons/info.png' alt='close info'/></span>";
131 function info() { print $this->info_html();}
132 function info_html () {
133 if (! array_key_exists ('info-text',$this->options)) return "";
135 // compute if info should be visible at startup
136 // xxx in fact the default should be fetched in the browser storage xxx
138 // if info-visible is set, use this value
139 if (array_key_exists ('info-visible',$this->options))
140 $info_visible=$this->options['info-visible'];
143 $div_id=$this->id_name('info');
145 $html .= "<div class='toggle-info'";
146 $html .= " id='$div_id'";
147 if (!$info_visible) $html .= " style='display:none'";
150 $html .= "<table class='center'><tr><td class='top'>";
151 $html .= $this->options['info-text'];
152 $html .= "</td><td class='top'><span onClick='pletoggle_toggle_info(\"$id\");'><img height=20 class='reset' src='/planetlab/icons/close.png' alt='toggle info' /></span>";
153 $html .= "</td></tr></table></div>";
158 function area_start () { print $this->area_start_html(); }
159 function area_start_html () {
160 $area_id=$this->id_name('area');
163 $html .= " class='plc-toggle-area'";
164 $html .= " id='$area_id'";
165 if ($this->options['start-hidden']) $html .= " style='display:none'";
170 function area_end () { print $this->area_end_html(); }
171 function area_end_html () {
175 /* if desired, you can embed the whole (trigger+area) in another div for visual effects */
176 function container_start () { print $this->container_start_html(); }
177 function container_start_html () {
178 $id=$this->id_name('container');
179 $this->nifty=new PlekitNifty ($id,'plc-toggle-container','medium');
180 return $this->nifty->start_html();
183 function container_end () { print $this->container_end_html(); }
184 function container_end_html () { return $this->nifty->end_html(); }
187 function id_name ($zonename) { return "toggle-$zonename-$this->id"; }