minitabs reimplemented with forms, now support POSTing

diff --git a/planetlab/includes/plc_minitabs.php b/planetlab/includes/plc_minitabs.php
index 00cb870..8cdaf71 100644 (file)
--- a/planetlab/includes/plc_minitabs.php
+++ b/planetlab/includes/plc_minitabs.php
@@ -7,13 +7,42 @@ drupal_set_html_head('
 ');
 
 
+// the expected argument is an (ordered) associative array
+// ( label => todo , ...)
+// label is expected to be the string to display in the menu
+// todo can be either
+// (*) a string : it is then taken to be a URL to move to
+// (*) or an associative array with the following keys
+//     (*) 'method': 'POST' or 'GET' -- default is 'GET'
+//     (*) 'url': where to go
+//     (*) 'values': an associative array of (key,value) pairs to send to the URL; values are strings
+//     (*) 'active': if set, this entry is the default one on startup
+//                  (not supported yet)
+
+
 function plc_tabs($array) {
   print '<div id="minitabs_container">';
   print '<ul id="miniflex">';
   print "\n";
-  foreach ($array as $name=>$url) {
-    printf ('<li class="minitabs"><a href="%s" title="">%s</a></li>',$url,$name);
-    print "\n";
+  foreach ($array as $label=>$todo) {
+    print '<li class="minitabs">';
+    // in case we have a string, rewrite it as an array
+    if (is_string ($todo)) $todo=array('method'=>'GET','url'=>$todo);
+    // set default method
+    if ( ! $todo['method'] ) $todo['method']='GET';
+    // create form
+    printf ('<form name="%s" action="%s" method="%s">',$label,$todo['url'],$todo['method']);
+    // set values
+    if ( $todo['values'] ) {
+      foreach ($todo['values'] as $key=>$value) {
+       printf('<input class="minitabs" type=hidden name="%s" value="%s" />',$key,$value);
+      }
+    }
+    $class_value="minitabs";
+    if ($todo['active']) $class_value += ' active';
+    // onmouseover="over()" onmouseout="out()"
+    printf('<input class="%s" value="%s" type=submit />',$class_value,$label);
+    printf("</form></li>\n");
   }
   print '</ul>';
   print '</div>';

diff --git a/planetlab/minitabs/minitabs.css b/planetlab/minitabs/minitabs.css
index 065cf0d..3abc6c3 100644 (file)
--- a/planetlab/minitabs/minitabs.css
+++ b/planetlab/minitabs/minitabs.css
@@ -1,56 +1,65 @@
-li.minitabs {
+#minitabs_container {
+    padding: 20px;
+    margin: 8px 0;
+    width:80%;
+    margin:8px auto;
+}
+#miniflex {
+    width: 100%;
+    float: left;
+    font-size: small; /* could be specified at a higher level */
+    margin: 0;
+    padding: 0 10px 0 10px;
+    border-bottom: 1px solid #696;
+    position:relative;
+    z-index:2;
+}
+
+input.minitabs, li.minitabs {
     font-family: verdana, sans-serif;
     font-size: 14px;
     text-align: center;
     font-style: oblique;
+    border: 0;
+    background-color: transparent;
 }    
-#minitabs_container {
-        padding: 20px;
-        margin: 8px 0;
-        width:80%;
-        margin:8px auto;
-        }
-#miniflex {
-        width: 100%;
-        float: left;
-        font-size: small; /* could be specified at a higher level */
-        margin: 0;
-        padding: 0 10px 0 10px;
-        border-bottom: 1px solid #696;
-        position:relative;
-        z-index:2;
-        }
-
 #miniflex li {
-        float: left;
-        margin: 0;
-        padding: 0 8px 0 8px;
-        display: inline;
-        list-style: none;
-        position:relative;
-        }
+    float: left;
+    margin: 0;
+    padding: 0 8px 0 8px;
+    display: inline;
+    list-style: none;
+    position:relative;
+}
 
-#miniflex a:link, #miniflex a:visited {
-        float: left;
-        font-size: 85%;
-        line-height: 20px;
-        font-weight: bold;
-        margin: 0 5px 0 5px; 
-        text-decoration: none;
-        color: #9c9;
-        }
+#miniflex input.minitabs {
+    float: left;
+    font-size: 85%;
+    line-height: 20px;
+    font-weight: bold;
+    margin: 0 5px 0 5px; 
+    text-decoration: none;
+    /* color when passive */
+    color: #9c9;  
+}
 
-#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
-        border-bottom: 4px solid #696;
-        padding-bottom: 2px;
-        color: #696;
-        }
+#miniflex input.active {
+    border-bottom: 4px solid #696;
+    padding-bottom: 2px;
+    /* color when mouse is on button */
+    color: #696;
+}
+
+#miniflex input[type=hidden] {
+    padding-bottom: 0px;
+}
         
 #animated-tab {
-        position: absolute;
-        z-index: 1;
-        font-size: 85%;
-        line-height: 20px;
-        padding-bottom: 2px;
-        border-bottom: 4px solid #696;
-        }
+    position: absolute;
+    z-index: 1;
+    font-size: 85%;
+    line-height: 20px;
+    padding-bottom: 2px;
+    border-bottom: 4px solid #696;
+}
+

diff --git a/planetlab/minitabs/minitabs.js b/planetlab/minitabs/minitabs.js
index a42823e..74c1999 100644 (file)
--- a/planetlab/minitabs/minitabs.js
+++ b/planetlab/minitabs/minitabs.js
@@ -28,7 +28,8 @@ var miniTab = {
  
                 miniTab.ul          = document.getElementById("miniflex");
                 miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
-                miniTab.aArr        = miniTab.ul.getElementsByTagName("a");
+               // Thierry: the original impl. relied on <a> links rather than forms
+               miniTab.aArr        = miniTab.ul.getElementsByTagName("input");
  
                 for(var i = 0, li; li = miniTab.liArr[i]; i++) {
                         li.onmouseover = miniTab.aArr[i].onfocus = function(e) {
@@ -52,7 +53,7 @@ var miniTab = {
                                 miniTab.activeTab = miniTab.currentTab = i;
                         }
                         a.style.borderBottom  = "0px";
-                        a.style.paddingBottom = "6px";
+                        /*a.style.paddingBottom = "6px";*/
                 }
  
                 miniTab.slideObj                = miniTab.ul.parentNode.appendChild(document.createElement("div"));
@@ -80,10 +81,19 @@ var miniTab = {
                 miniTab.initAnim();
         },
  
+       /* search for input with type != hidden */
+       locateSubmitInput: function () {
+               inputs=miniTab.liArr[miniTab.activeTab].getElementsByTagName("input");
+               for(var i=0,input; inputs[i]; i++) {
+                 input=inputs[i];
+                 if (input.type == "submit") return input;
+               }
+       },
+    
         initAnim: function() {
- 
-                miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + miniTab.liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + miniTab.ul.offsetLeft);
-                miniTab.destW = parseInt(miniTab.liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);
+               var input=miniTab.locateSubmitInput();
+                miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
+                miniTab.destW = parseInt(input.offsetWidth);
                 miniTab.t = 0;
                 miniTab.b = miniTab.slideObj.offsetLeft;
                 miniTab.c = miniTab.destX - miniTab.b;