first draft for togglable sections

diff --git a/planetlab/css/plc_toggles.css b/planetlab/css/plc_toggles.css
new file mode 100644 (file)
index 0000000..7ee452b
--- /dev/null
+++ b/planetlab/css/plc_toggles.css
@@ -0,0 +1,18 @@
+/*
+ $Id$
+ */
+
+h1.plc-toggle-switch, h2.plc-toggle-switch {
+    text-align:center;
+}
+
+img.plc-toggle-visible, img.plc-toggle-hidden {
+    height: 14px;
+    padding-right: 20px;
+}
+
+div.plc-toggle-area {
+    border-color:#a84444 !important;
+    border:1px solid #ccc;
+}
+

diff --git a/planetlab/icons/toggle-hidden.png b/planetlab/icons/toggle-hidden.png
new file mode 100755 (executable)
index 0000000..c5cc718
Binary files /dev/null and b/planetlab/icons/toggle-hidden.png differ

diff --git a/planetlab/icons/toggle-visible.png b/planetlab/icons/toggle-visible.png
new file mode 100755 (executable)
index 0000000..1332dca
Binary files /dev/null and b/planetlab/icons/toggle-visible.png differ

diff --git a/planetlab/includes/plc_minitabs.php b/planetlab/includes/plc_minitabs.php
index b6dbf36..d5617eb 100644 (file)
--- a/planetlab/includes/plc_minitabs.php
+++ b/planetlab/includes/plc_minitabs.php
@@ -1,8 +1,9 @@
 <?php
   // $Id$
 
+require_once 'prototype.php';
+
 drupal_set_html_head('
-<script type="text/javascript" src="/planetlab/prototype/prototype.js"></script>
 <script type="text/javascript" src="/planetlab/minitabs/minitabs.js"></script>
 <link href="/planetlab/minitabs/minitabs.css" rel="stylesheet" type="text/css" />
 ');

diff --git a/planetlab/includes/plc_toggles.php b/planetlab/includes/plc_toggles.php
new file mode 100644 (file)
index 0000000..74e9a48
--- /dev/null
+++ b/planetlab/includes/plc_toggles.php
@@ -0,0 +1,96 @@
+<?php
+
+  // $Id$
+
+require_once 'prototype.php';
+
+drupal_set_html_head('
+<script type="text/javascript" src="/planetlab/js/plc_toggles.js"></script>
+<link href="/planetlab/css/plc_toggles.css" rel="stylesheet" type="text/css" />
+');
+
+// This is for creating an area that users can hide and show
+// It is logically made of 3 parts:
+// (*) area is what gets hidden and shown
+// (*) switch is the area that can be clicked for toggling
+// (*) image contains a visual indication of the current status
+// 
+// constructor needs 
+// (*) id:     an 'id', used for naming the three parts
+// (*) switch: the html text for the switch
+// (*) options:        a hash that can define
+//     - switch-tagname : to be used instead of <span> for wrapping the switch
+//     - switch-bubble : might not work if switch-tagname is redefined
+//     - init-hidden : start hidden rather than visible
+// 
+// methods are as follows
+// (*) switch_html (): return the html code for the switch
+// (*) image_html ():  returns the html code for the image
+// (*) area_start ():  because we have too many places where php 'prints' code instead 
+// (*) area_end():       of returning it, we do not expect the code for the area to be passed
+//                       so these methods can be used to delimit the area in question
+
+class PlcToggle {
+  // mandatory
+  var $id;
+
+  function PlcToggle ($id,$switch,$options=NULL) {
+    $this->id = $id;
+    $this->switch=$switch;
+    if ( ! $options ) $options = array();
+    $this->options = $options;
+  }
+
+  function id_name ($zonename) { return "toggle-$zonename-$this->id"; }
+
+  // create two images that get shown/hidden - could not find a better way to do it
+  function image_html () {
+    $html="";
+    if ( ! $this->options['start-hidden'])     { $x1=""; $x2=" style='display:none'"; }
+    else                                       { $x2=""; $x1=" style='display:none'"; }
+    $image_id=$this->id_name('image-visible');
+    $html .= "<img id=$image_id class='plc-toggle-visible' src='/planetlab/icons/toggle-visible.png'$x1>";
+    $image_id=$this->id_name('image-hidden');
+    $html .= "<img id=$image_id class='plc-toggle-hidden' src='/planetlab/icons/toggle-hidden.png'$x2>";
+    return $html;
+  }
+
+  // don't define switch as it's a php keyword 
+  function switch_html () {
+    $switch_id=$this->id_name('switch');
+    $tagname='span';
+    if (array_key_exists ('switch-tagname',$this->options)) $tagname=$this->options['switch-tagname'];
+    if (array_key_exists ('switch-bubble',$this->options)) $bubble=$this->options['switch-bubble'];
+    
+    $html="<$tagname";
+    $html .= " id=$switch_id";
+    $html .= " class=plc-toggle-switch";
+    if ($bubble) $html .= " title='$bubble'";
+    $html .= " onclick=\"plc_toggle('$this->id')\"";
+    $html .= ">";
+    $html .= $this->image_html();
+    $html .= $this->switch;
+    $html .= "</$tagname>";
+    return $html;
+  }
+
+  function area_start () { print $this->area_start_html(); }
+  function area_start_html () {
+    $area_id=$this->id_name('area');
+    $html="";
+    $html .= "<div";
+    $html .= " class=plc-toggle-area";
+    $html .= " id=$area_id";
+    if ($this->options['start-hidden']) $html .= " style='display:none'";
+    $html .= ">";
+    return $html;
+  }
+
+  function area_end () { print $this->area_end_html(); }
+  function area_end_html () {
+    return "</div>";
+  }
+
+}
+
+?>    

diff --git a/planetlab/includes/prototype.php b/planetlab/includes/prototype.php
new file mode 100644 (file)
index 0000000..667bef1
--- /dev/null
+++ b/planetlab/includes/prototype.php
@@ -0,0 +1,7 @@
+<?php
+
+drupal_set_html_head('
+<script type="text/javascript" src="/planetlab/prototype/prototype.js"></script>
+');
+
+?>

diff --git a/planetlab/js/plc_toggles.js b/planetlab/js/plc_toggles.js
new file mode 100644 (file)
index 0000000..c9d2e2f
--- /dev/null
+++ b/planetlab/js/plc_toggles.js
@@ -0,0 +1,17 @@
+/* 
+   $Id$
+*/
+
+function plc_toggle (id) {
+  var area=$('toggle-area-' + id);
+  area.toggle();
+  var visible=$('toggle-image-visible-' + id);
+  var hidden=$('toggle-image-hidden-' + id);
+  if (area.visible()) {
+    visible.show();
+    hidden.hide();
+  } else {
+    visible.hide();
+    hidden.show();
+  }
+}

diff --git a/planetlab/nodes/interface.php b/planetlab/nodes/interface.php
index 697a843..d199c0c 100644 (file)
--- a/planetlab/nodes/interface.php
+++ b/planetlab/nodes/interface.php
@@ -12,6 +12,7 @@ require_once 'plc_functions.php';
 require_once 'plc_minitabs.php';
 require_once 'plc_details.php';
 require_once 'plc_tables.php';
+require_once 'prototype.php';
 
 require_once 'plc_drupal.php';
 include 'plc_header.php';
@@ -61,7 +62,6 @@ drupal_set_title("Interface on " . $node['hostname']);
 
 // include javacsript helpers
 drupal_set_title ('
-<script type="text/javascript" src="/planetlab/prototype/prototype.js"></script>
 <script type="text/javascript" src="/planetlab/nodes/interface.js"></script>
 ');
 

diff --git a/planetlab/nodes/node.php b/planetlab/nodes/node.php
index 63f345c..24ea554 100644 (file)
--- a/planetlab/nodes/node.php
+++ b/planetlab/nodes/node.php
@@ -20,6 +20,7 @@ require_once 'plc_minitabs.php';
 require_once 'plc_tables.php';
 require_once 'plc_details.php';
 require_once 'plc_forms.php';
+require_once 'plc_toggles.php';
 require_once 'plc_objects.php';
 
 // -------------------- 
@@ -225,7 +226,12 @@ if ( $local_peer ) {
   $tagnames = array_map ("get_tagname",$tags);
   $nodegroups_hash=plc_nodegroup_global_hash($api,$tagnames);
   
-  plc_section("Tags");
+  $toggle = new PlcToggle ('tags',"Tags",array('switch-tagname'=>'h2',
+                                              'switch-bubble'=>'Inspect and set tags on that node',
+                                              'start-hidden'=>true));
+  print $toggle->switch_html();
+  $toggle->area_start();
+
   $headers=array("Name"=>"string",
                 "Value"=>"string",
                 "Nodegroup"=>"string",
@@ -274,12 +280,18 @@ if ( $local_peer ) {
   }
   
   $table->end();
+  $toggle->area_end();
  }
 
 //////////////////////////////////////////////////////////// interfaces
 if ( $local_peer ) {
 
-  plc_section ("Interfaces");
+  $toggle=new PlcToggle ('interfaces',"Interfaces",array('switch-tagname'=>'h2',
+                                                        'switch-bubble'=>'Inspect and tune interfaces on that node',
+                                                        'start-hidden'=>true));
+
+  print $toggle->switch_html();
+  $toggle->area_start();
   // display interfaces
   if( ! $interfaces ) {
     echo '<p>';
@@ -342,12 +354,18 @@ if ( $local_peer ) {
     }
     $table->end();
   }
+  $toggle->area_end();
  }
 
 //////////////////////////////////////////////////////////// slices
 // display slices
 
-plc_section ("Slices");
+$toggle=new PlcToggle ('slices',"Slices",array('switch-tagname'=>'h2',
+                                              'switch-bubble'=>'Review slices running on that node',
+                                              'start-hidden'=>true));
+print $toggle->switch_html();
+
+$toggle->area_start();
 if ( ! $slices  ) {
   plc_warning ("This node is not associated to any slice");
  } else {
@@ -373,6 +391,7 @@ if ( ! $slices  ) {
   }
   $table->end();
  }
+$toggle->area_end();
 
 $form->end();
 

diff --git a/planetlab/persons/person.php b/planetlab/persons/person.php
index c3eea4b..6bff3b0 100644 (file)
--- a/planetlab/persons/person.php
+++ b/planetlab/persons/person.php
@@ -342,5 +342,4 @@ plc_tabs ($tabs,"bottom");
 // Print footer
 include 'plc_footer.php';
 
-
 ?>