plekit/php/toggle.php

   1 <?php
   2
   3 require_once 'prototype.php';
   4 require_once 'jstorage.php';
   5 require_once 'nifty.php';
   6
   7 drupal_set_html_head('
   8 <script type="text/javascript" src="/plekit/toggle/toggle.js"></script>
   9 <link href="/plekit/toggle/toggle.css" rel="stylesheet" type="text/css" />
  10 ');
  11
  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
  17 //
  18 // constructor needs
  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
  27 //
  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
  34
  35 class PlekitToggle {
  36   // mandatory
  37   var $id;
  38   var $nifty;
  39
  40   function PlekitToggle ($id,$trigger,$options=NULL) {
  41     $this->id = $id;
  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'];
  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     $html .= $this->info_html();
  66     return $html;
  67   }
  68
  69   function end ()               { print $this->end_html(); }
  70   function end_html () {
  71     $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();
  77     return $html;
  78   }
  79
  80   function visible_from_store_html() {
  81     $id=$this->id;
  82     $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');";
  89     $html .= "</script>";
  90     return $html;
  91   }
  92
  93   // create two images that get shown/hidden - could not find a better way to do it
  94   function image_html () {
  95     $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' />";
 104     return $html;
 105   }
 106
 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";
 112     $bubble="";
 113     if (array_key_exists ('bubble',$this->options)) $bubble=$this->options['bubble'];
 114
 115     $html="<$tagname";
 116     $html .= " id='$trigger_id'";
 117     $html .= " class='plc-toggle-trigger'";
 118     if ($bubble) $html .= " title='$bubble'";
 119     $html .= " onclick=\"pletoggle_toggle('$this->id')\"";
 120     $html .= ">";
 121     $html .= $this->image_html();
 122     $html .= $this->trigger;
 123     $html .= "</$tagname>";
 124     if (array_key_exists ('info-text',$this->options)) {
 125       $id=$this->id;
 126       $html .= "<span class='toggle-info-button' onClick='pletoggle_toggle_info(\"$id\");'><img height=20 src='/planetlab/icons/info.png' alt='close info'/></span>";
 127     }
 128     return $html;
 129   }
 130
 131   function info()               { print $this->info_html();}
 132   function info_html () {
 133     if (! array_key_exists ('info-text',$this->options)) return "";
 134
 135     // compute if info should be visible at startup
 136     // xxx in fact the default should be fetched in the browser storage xxx
 137     $info_visible=TRUE;
 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'];
 141
 142     $id=$this->id;
 143     $div_id=$this->id_name('info');
 144     $html="";
 145     $html .= "<div class='toggle-info'";
 146     $html .= " id='$div_id'";
 147     if ($info_visible) $html .= " style='display:none'";
 148     $html .= ">";
 149     // tmp
 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>";
 154     return $html;
 155   }
 156
 157
 158   function area_start () { print $this->area_start_html(); }
 159   function area_start_html () {
 160     $area_id=$this->id_name('area');
 161     $html="";
 162     $html .= "<div";
 163     $html .= " class='plc-toggle-area'";
 164     $html .= " id='$area_id'";
 165     if ($this->options['start-hidden']) $html .= " style='display:none'";
 166     $html .= ">";
 167     return $html;
 168   }
 169
 170   function area_end () { print $this->area_end_html(); }
 171   function area_end_html () {
 172     return "</div>";
 173   }
 174
 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();
 181   }
 182
 183   function container_end ()             { print $this->container_end_html(); }
 184   function container_end_html ()        { return $this->nifty->end_html(); }
 185
 186   // build id names
 187   function id_name ($zonename) { return "toggle-$zonename-$this->id"; }
 188
 189 }
 190
 191 ?>