From: Thierry Parmentelat Date: Tue, 17 Feb 2009 22:42:03 +0000 (+0000) Subject: first draft for togglable sections X-Git-Tag: PLEWWW-4.3-1~38 X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=e6d716d08141881786f36c376821f2cc8c25c5c7;p=plewww.git first draft for togglable sections --- diff --git a/planetlab/css/plc_toggles.css b/planetlab/css/plc_toggles.css new file mode 100644 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 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 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 --- a/planetlab/includes/plc_minitabs.php +++ b/planetlab/includes/plc_minitabs.php @@ -1,8 +1,9 @@ '); diff --git a/planetlab/includes/plc_toggles.php b/planetlab/includes/plc_toggles.php new file mode 100644 index 0000000..74e9a48 --- /dev/null +++ b/planetlab/includes/plc_toggles.php @@ -0,0 +1,96 @@ + + +'); + +// 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 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 .= ""; + $image_id=$this->id_name('image-hidden'); + $html .= ""; + 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 .= ""; + return $html; + } + + function area_start () { print $this->area_start_html(); } + function area_start_html () { + $area_id=$this->id_name('area'); + $html=""; + $html .= "options['start-hidden']) $html .= " style='display:none'"; + $html .= ">"; + return $html; + } + + function area_end () { print $this->area_end_html(); } + function area_end_html () { + return ""; + } + +} + +?> diff --git a/planetlab/includes/prototype.php b/planetlab/includes/prototype.php new file mode 100644 index 0000000..667bef1 --- /dev/null +++ b/planetlab/includes/prototype.php @@ -0,0 +1,7 @@ + +'); + +?> diff --git a/planetlab/js/plc_toggles.js b/planetlab/js/plc_toggles.js new file mode 100644 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 --- 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 (' - '); diff --git a/planetlab/nodes/node.php b/planetlab/nodes/node.php index 63f345c..24ea554 100644 --- 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 '

'; @@ -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 --- a/planetlab/persons/person.php +++ b/planetlab/persons/person.php @@ -342,5 +342,4 @@ plc_tabs ($tabs,"bottom"); // Print footer include 'plc_footer.php'; - ?>