From e6d716d08141881786f36c376821f2cc8c25c5c7 Mon Sep 17 00:00:00 2001 From: Thierry Parmentelat Date: Tue, 17 Feb 2009 22:42:03 +0000 Subject: [PATCH] first draft for togglable sections --- planetlab/css/plc_toggles.css | 18 ++++++ planetlab/icons/toggle-hidden.png | Bin 0 -> 1611 bytes planetlab/icons/toggle-visible.png | Bin 0 -> 1499 bytes planetlab/includes/plc_minitabs.php | 3 +- planetlab/includes/plc_toggles.php | 96 ++++++++++++++++++++++++++++ planetlab/includes/prototype.php | 7 ++ planetlab/js/plc_toggles.js | 17 +++++ planetlab/nodes/interface.php | 2 +- planetlab/nodes/node.php | 25 +++++++- planetlab/persons/person.php | 1 - 10 files changed, 163 insertions(+), 6 deletions(-) create mode 100644 planetlab/css/plc_toggles.css create mode 100755 planetlab/icons/toggle-hidden.png create mode 100755 planetlab/icons/toggle-visible.png create mode 100644 planetlab/includes/plc_toggles.php create mode 100644 planetlab/includes/prototype.php create mode 100644 planetlab/js/plc_toggles.js 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 0000000000000000000000000000000000000000..c5cc718bcaaafebd0db9b56b0b79f3eec862e9da GIT binary patch literal 1611 zcmV-R2DJH!P)4Tx0C)kdl0QqsKp4iKM5G{91nVCJA%oNoRYJS8 zAVQl#r4F$as@>8gwuPF8Bv$+t7uxoivel;s?ZI`6b6GV)YNKMmSJEN)_d^TwOc!a?8heZ}^ zkmDCE>`+2Lh>#~z;T&UJ=Df^!-?KgPsEqZhW)M?H+$rQ0;ui5(h4UHXGUr>yO})bQ zwuxoSs9D7C#3{pcbwFgfJl%H4Bc2k^v-8uJnwJAs=76D2Un{x5^%XE3?Q5|aV6q6@ zC;M7=Gq@9Bs^jh?6G1p3oCStoe7_q7LdQU_<@=u(zTdl~9M3@8()XNZ;H94w)4*SI zel{MR*MOMSBB;kt=I0OmGH|{I6i0yE5pePfEZhJScYrzy6w(k=Z{MBYRj_YX(dxCb zqj{zwvFD;R>J7)WHQfxB|8MZj1F8w2H0(pCR;hYYhF+H$m)0$PDJ~^sIgKy)9c||h zx}5(2000SaNLh0L01FcU01FcV0GgZ_000C|Nklx_d~9g1G%&n}W1!!KgaB8rsmPp{@y9v;%JpBY6WqZk zG~d|D_&4zWXn*9h;pbY0_aF2yxYI;L^9cpmu7s*1qhu*qUJYUTCm{1xIkPceo1o$8 zCRA=Z^c~T6x1M?Iz1F^CFBlj~RiVlOESI5T%BWZ}Y6KKuIRvz(RLH%F?)*w{*v{JL zX#P#XY63gZlQ?tugO;8*p1p-c#Dh^)P$;P|$`Sz`IF1MSGJH;8SBA?O;_U(a9j(#z zKfQgtXrClrwEw*R3};hMMof z4;VVaHsY!e%VtQWRcM2Wals;>Jo3;}K}X+RCTp`y6hCFCEyv&+K%!)WIO1`|(! z(PDXf3E!=J1Vt^vqg}JG3`xbyilT7NDEA`4d5hzbt|u{)e0~$M)k$jiK$vK|;tyiZ zn8w-46x~H54YZOZ1s*;x84NZ_!t!-ozMa9caTQg&goVp}-9IERVdyBOVZ2(y*zm^}Y9B2tVNv2bALIF1gyRfm3k?NfZeI0a26 z2(Q3a$|Up%N{$L^wF(mFNg1Q^Fmm!gs?)& zuoi0IGaFwBR{f>8W{@eY1Y>>s^fp}$aHASV$y4D53RX8t7!2Kq_PPa(;GYt-N$$~v! znddXb6Y#hwu%+h2|NF)%;8Cg=?=W3jC(F|RNwSB@qGa2)zX3=(1jcXdNh$yU002ov JPDHLkV1h;J@%jJ& literal 0 HcmV?d00001 diff --git a/planetlab/icons/toggle-visible.png b/planetlab/icons/toggle-visible.png new file mode 100755 index 0000000000000000000000000000000000000000..1332dca34f67db5091dbd2c5ba70c356311d0455 GIT binary patch literal 1499 zcmV<11tj{3P)4Tx0C)kdl0QqsKp4iKM5G{91nVCJA%oNoRYJS8 zAVQl#r4F$as@>8gwuPF8Bv$+t7uxoivel;s?ZI`6b6GV)YNKMmSJEN)_d^TwOc!a?8heZ}^ zkmDCE>`+2Lh>#~z;T&UJ=Df^!-?KgPsEqZhW)M?H+$rQ0;ui5(h4UHXGUr>yO})bQ zwuxoSs9D7C#3{pcbwFgfJl%H4Bc2k^v-8uJnwJAs=76D2Un{x5^%XE3?Q5|aV6q6@ zC;M7=Gq@9Bs^jh?6G1p3oCStoe7_q7LdQU_<@=u(zTdl~9M3@8()XNZ;H94w)4*SI zel{MR*MOMSBB;kt=I0OmGH|{I6i0yE5pePfEZhJScYrzy6w(k=Z{MBYRj_YX(dxCb zqj{zwvFD;R>J7)WHQfxB|8MZj1F8w2H0(pCR;hYYhF+H$m)0$PDJ~^sIgKy)9c||h zx}5(2000SaNLh0L01FcU01FcV0GgZ_000BtNklQ)1pyWX-t%00%2oNqb>+Lk+q2nS0t{C3!`jIgoQD|xN%h%#?V5<2Wg>3 zs17rw!{}h!J9F=yd#>Mqhe-;Sc#?A;=bZohzwdt>jR%h$x2B-fVIxqb!F;-zcm_X}sx?S4%AI~y_X z2b{FFKJke&ePnOyseMQd=3#3KDl&+Si3tWl2=C4+{P{Tqb6;LI_4&66c(D(<5wN0m zRKCu>cziU!tAs>S0U?39VGI_@cNlU_{v!mwfm^M@{qD1saB1!!0WS!szKdK`qZ8j0 z4xQXSRGx@giIHX7P^lzzIt86cLM0Qi^vDaK!T?S#2WzO54eE;rBDZ;tSnEANJN^E^ z3nyM0o|=Xgb-7NNNe9ZYVM**nhh@Ris^=h+LKJji+z#w)4v{Vl`%9M;O!r&r!l<)- z@3F%4bD%yZk+w=vo~(fM|!LbXKVSGVA*_BGUca>PA&`M zwfPGeCV&NkL*qp}vu#kw#Y3EZUv1(1)dn<~+k*oLSJ!9|BDrHvG5B+?!XW9R>9KKo z3gQHa_b%gC8p+_p=O2e7k~fUQPmbc(S_{85UD&pQCXw!XlZ+o>eD%w=rJYxGE>AGV z#1Cj1F_8v&o&67(;EIDhODXhyCPp)HOan<+i4;R+zeR@1@SKXvBL)-&lpK&TH}2&p z?pQh8Gd|<3X)1A$MM1F`eanQOMjba!f-vk)ad1BvP2x4#>z|XiB+&S6sn^ey3B2?E z@(oFCEIXnU@Q}OK5&KO?yeB|HpxudMAGYeG?w^w^&$bt48=3O{qF5Wxhh|#m|G16! z&i;S{6A#C29Pd%u%t9^RlPnv~q^38yEWJ#Jhd!OC^4&3ts)c&n%4PKg5Va`^YHSJD&vhM9GQt_!dem`t)` zcaU*^YRP~&WK~2SE2Hhgz4*mq*t+>99lO2OV-I%!s?Ub4#=+#+o~%kqk$Z9ArN!b3 z5Rm>9)*`pPMzFKD{OV6f2(~Cn`hfC%Gg!GX4D-FdxWt|BxU{XU@t4yoo3kO zwy7@&*pGhgm!mwe>GjpOEU*Pmq#m1m-PyK#mp$|-EGON&58YLCn@a+A)vx}1hL?d{ zu>bT8|L;A(1N#}pcP%@$!nw@vcewT}XZAtH{{lzC_Lj9B7;yjq002ovPDHLkV1gbM B# '); 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'; - ?> -- 2.47.0