From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Thu, 24 Mar 2011 16:47:04 +0000 (+0100)
Subject: cleanup ctd + toggles remember their visible state in localStorage
X-Git-Tag: plewww-4.3-64~23
X-Git-Url: http://git.onelab.eu/?p=plewww.git;a=commitdiff_plain;h=781e3b93738314bab6e700f0cdb93a1cda316884

cleanup ctd + toggles remember their visible state in localStorage
---

diff --git a/planetlab/slices/slice.php b/planetlab/slices/slice.php
index d5e743d..3269dce 100644
--- a/planetlab/slices/slice.php
+++ b/planetlab/slices/slice.php
@@ -581,8 +581,8 @@ if ($count && $privileges) {
   $toggle_nodes=new PlekitToggle('my-slice-nodes-reserve',
 				 "Leases - " . count($reservable_nodes) . " reservable node(s)",
 				 array('visible'=>get_arg('show_nodes_resa',false), 
-				       'info_text'=>$leases_info,
-				       'info_visible'=>$show_reservable_info));
+				       'info-text'=>$leases_info,
+				       'info-visible'=>$show_reservable_info));
   $toggle_nodes->start();
 
   // get settings from environment, otherwise set to defaults
@@ -650,8 +650,8 @@ href="http://trac.myslice.info">http://trac.myslice.info</a>.
 $toggle_nodes=new PlekitToggle('my-slice-nodes-configuration',
                                "Node table layout",
                                array('visible'=>$column_conf_visible, 
-				     'info_text'=>$layout_info,
-				     'info_visible'=>$show_layout_info));
+				     'info-text'=>$layout_info,
+				     'info-visible'=>$show_layout_info));
 $toggle_nodes->start();
 
 //usort ($table_headers, create_function('$col1,$col2','return strcmp($col1["header"],$col2["header"]);'));
@@ -923,7 +923,7 @@ if ($local_peer) {
   $toggle = new PlekitToggle('slice-initscripts',$label,
 			     array('bubble'=>'Manage initscript on that slice',
 				   'visible'=>get_arg('show_initscripts',false),
-				   'info_text'=>$initscript_info
+				   'info-text'=>$initscript_info
 				   // not messing with persontags to guess whether this should be displayed or not
 				   // hopefully some day toggle will know how to handle that using web storage
 				   ));
diff --git a/plekit/php/toggle.php b/plekit/php/toggle.php
index 897a8b8..65e3996 100644
--- a/plekit/php/toggle.php
+++ b/plekit/php/toggle.php
@@ -20,10 +20,9 @@ drupal_set_html_head('
 // (*) options:	a hash that can define
 //	- trigger-tagname : to be used instead of <span> for wrapping the trigger
 //	- bubble : might not work if trigger-tagname is redefined
-//	- init-hidden : start hidden rather than visible
-//	- info_div : the id of a 'div' element that contains a help text
-//	- info_text : the text for help on the tab
-//	- info_visible : whether info needs to be visible at startup
+//	- visible : if set to false, start hidden rather than visible
+//	- info-text : the text for help on the tab
+//	- info-visible : whether info needs to be visible at startup
 // 
 // methods are as follows
 // (*) trigger_html ():	return the html code for the trigger
@@ -67,9 +66,23 @@ class PlekitToggle {
     $html = "";
     $html .= $this->area_end_html();
     $html .= $this->container_end();
+    // turn or or off from local storage
+    $html .= $this->visible_from_store_html();
     return $html;
   }
 
+  function visible_from_store_html() {
+    $id=$this->id;
+    $html = "";
+    $html .= "<script type='text/javascript'>";
+    // javascript code can't take -
+    //    $idj=str_replace('-','_',$id);
+    //    $html .= "function init_$idj () { plekit_toggle_from_store('$id');}";
+    //    $html .= "Event.observe(window,'load',init_$idj);";
+    $html .= "plekit_toggle_from_store('$id');";
+    $html .= "</script>";
+    return $html;
+  }
 
   // create two images that get shown/hidden - could not find a better way to do it
   function image_html () {
@@ -102,7 +115,7 @@ class PlekitToggle {
     $html .= $this->image_html();
     $html .= $this->trigger;
     $html .= "</$tagname>";
-    if (array_key_exists ('info_text',$this->options)) {
+    if (array_key_exists ('info-text',$this->options)) {
       $id=$this->id;
       $html .= "<span class='toggle-info-button' onClick='plekit_toggle_info(\"$id\");'><img height=20 src='/planetlab/icons/info.png' alt='close info'/></span>";
     }
@@ -111,14 +124,14 @@ class PlekitToggle {
 
   function info()		{ print $this->info_html();}
   function info_html () {
-    if (! array_key_exists ('info_text',$this->options)) return "";
+    if (! array_key_exists ('info-text',$this->options)) return "";
 
     // compute if info should be visible at startup
     // xxx in fact the default should be fetched in the browser storage xxx
     $info_visible=TRUE;
-    // if info_visible is set, use this value
-    if (array_key_exists ('info_visible',$this->options)) 
-      $info_visible=$this->options['info_visible'];
+    // if info-visible is set, use this value
+    if (array_key_exists ('info-visible',$this->options)) 
+      $info_visible=$this->options['info-visible'];
 
     $id=$this->id;
     $div_id=$this->id_name('info');
@@ -128,7 +141,7 @@ class PlekitToggle {
     if ($info_visible) $html .= " style='display:none'";
     // tmp
     $html .= "<table class='center'><tr><td class='top'>";
-    $html .= $this->options['info_text'];
+    $html .= $this->options['info-text'];
     $html .= "</td><td class='top'><span onClick='plekit_toggle_info(\"$id\");'><img height=20 class='reset' src='/planetlab/icons/close.png' alt='toggle info' /></span>";
     $html .= "</td></tr></table></div>";
     return $html;
diff --git a/plekit/toggle/toggle.js b/plekit/toggle/toggle.js
index 37dddda..8305e25 100644
--- a/plekit/toggle/toggle.js
+++ b/plekit/toggle/toggle.js
@@ -1,3 +1,20 @@
+// use localStorage to remember open/closed toggles
+function plekit_toggle_store(id) {
+    var area=$('toggle-area-'+id);
+    key='toggle.'+id;
+    flag= (area.visible()) ? 'on' : 'off';
+    localStorage.setItem(key,flag);
+}
+function plekit_toggle_from_store (id) {
+    window.console.log('id='+id);
+    var area=$('toggle-area-'+id);
+    key='toggle.'+id;
+    flag=localStorage.getItem(key);
+    // on by default
+    if (flag=='off') area.hide();
+    else area.show();
+}
+
 function plekit_toggle(id){
 
     var area=$('toggle-area-'+id);
@@ -11,6 +28,7 @@ function plekit_toggle(id){
 	visible.hide();
 	hidden.show();
     }
+    plekit_toggle_store(id);
 }
 
 // make sure it's open