tabs can do POST, nodes.php uses it
authorThierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Tue, 20 Jan 2009 10:33:05 +0000 (10:33 +0000)
committerThierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Tue, 20 Jan 2009 10:33:05 +0000 (10:33 +0000)
planetlab/includes/plc_minitabs.php
planetlab/minitabs/minitabs.css
planetlab/minitabs/minitabs.js
planetlab/nodes/node.php

index 8cdaf71..6e8e1b7 100644 (file)
@@ -16,8 +16,6 @@ drupal_set_html_head('
 //     (*) '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) {
@@ -35,12 +33,10 @@ function plc_tabs($array) {
     // set values
     if ( $todo['values'] ) {
       foreach ($todo['values'] as $key=>$value) {
-       printf('<input class="minitabs" type=hidden name="%s" value="%s" />',$key,$value);
+       printf('<input class="minitabs-hidden" type=hidden name="%s" value="%s" />',$key,$value);
       }
     }
-    $class_value="minitabs";
-    if ($todo['active']) $class_value += ' active';
-    // onmouseover="over()" onmouseout="out()"
+    $class_value="minitabs-submit";
     printf('<input class="%s" value="%s" type=submit />',$class_value,$label);
     printf("</form></li>\n");
   }
index 3abc6c3..9b63387 100644 (file)
@@ -7,20 +7,22 @@
 #miniflex {
     width: 100%;
     float: left;
-    font-size: small; /* could be specified at a higher level */
+    font-size: small;  /* could be specified at a higher level */
     margin: 0;
     padding: 0 10px 0 10px;
+    /* thickness and color for the fixed thin horizontal bar */
     border-bottom: 1px solid #696;
     position:relative;
     z-index:2;
 }
 
-input.minitabs, li.minitabs {
+input.minitabs-submit {
     font-family: verdana, sans-serif;
     font-size: 14px;
     text-align: center;
     font-style: oblique;
     border: 0;
+    /* buttons are normally outlined */
     background-color: transparent;
 }    
 #miniflex li {
@@ -32,7 +34,7 @@ input.minitabs, li.minitabs {
     position:relative;
 }
 
-#miniflex input.minitabs {
+#miniflex input.minitabs-submit {
     float: left;
     font-size: 85%;
     line-height: 20px;
@@ -44,22 +46,19 @@ input.minitabs, li.minitabs {
 }
 
 #miniflex input.active {
-    border-bottom: 4px solid #696;
+    /* 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;
+    /* color for the sliding bar */
     border-bottom: 4px solid #696;
 }
 
index db43c50..5086cce 100644 (file)
@@ -30,11 +30,12 @@ var miniTab = {
  
     miniTab.ul          = document.getElementById("miniflex");
     miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
-    // Thierry: the original impl. relied on <a> links rather than forms
-    miniTab.aArr        = miniTab.ul.getElementsByTagName("input");
+    // Thierry: the original impl. relied on <a> links rather than forms - we use ids
+    miniTab.aArr        = miniTab.ul.getElementsByClassName("minitabs-submit");
  
     for(var i = 0, li; li = miniTab.liArr[i]; i++) {
       li.onmouseover = miniTab.aArr[i].onfocus = function(e) {
+       window.console.log('onmouseover/onfocus');
        var pos = 0;
        var elem = this.nodeName == "LI" ? this : this.parentNode;
        while(elem.previousSibling) {
@@ -48,6 +49,7 @@ var miniTab = {
  
     miniTab.ul.onmouseout = function(e) {
       miniTab.initSlide(miniTab.currentTab);
+      miniTab.setActive (miniTab.activeTab,false);
     };
  
     for(var i = 0, a; a = miniTab.aArr[i]; i++) {
@@ -79,21 +81,23 @@ var miniTab = {
  
  initSlide: function(pos, force) {
     if(!force && pos == miniTab.activeTab) return;
+    miniTab.setActive (miniTab.activeTab,false);
     miniTab.activeTab = pos;
+    miniTab.setActive (miniTab.activeTab,true);
     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;
-    }
+ setActive: function (pos,active) {
+    var input=miniTab.liArr[pos].getElementsByClassName("minitabs-submit")[0];
+    var cn=input.className;
+    cn=cn.replace(" active","");
+    if (active) cn += " active";
+    input.className=cn;
   },
-    
  initAnim: function() {
-    var input=miniTab.locateSubmitInput();
+    /* search for the input with type != hidden */
+    var input=miniTab.liArr[miniTab.activeTab].getElementsByClassName("minitabs-submit")[0];
     miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
     miniTab.destW = parseInt(input.offsetWidth);
     miniTab.t = 0;
index 78b3059..c0fbd4f 100644 (file)
@@ -114,6 +114,14 @@ if (empty($nodes)) {
     if ($extra_privileges) {
       $tabs["Events"]=l_event("Node","node",$node_id);
     }
+
+    $tabs['Update'] = array ('url'=>"/db/nodes/node_actions.php",
+                            'method'=>'POST',
+                            'values'=>array('action'=>'prompt-update','node_id'=>$node_id));
+    $tabs['Delete (no confirm)'] = array ('url'=>"/db/nodes/node_actions.php",
+                            'method'=>'POST',
+                            'values'=>array('action'=>'delete','node_id'=>$node_id));
+
     plc_tabs($tabs);
 
     // the javascript callback we set on the form; this
@@ -123,17 +131,6 @@ if (empty($nodes)) {
     //     so submit only when value is not empty
     $change='if (document.actions.action.value=="delete") if (! confirm("Are you sure you want to delete ' . $hostname . ' ? ") ) return false; if (document.actions.action.value!="") submit();';
     
-    echo "<table><tr><td>";
-    echo "</td><td>";
-    echo "<form name='actions' action='/db/nodes/node_actions.php' method='post'>\n";
-    echo "<input type=hidden name='node_id' value='$node_id'></input>\n";
-    echo "<select name='action' onChange='$change'>\n";
-    echo "<option value='' selected='selected'> Choose Action </option>\n";
-    echo "<option value='prompt-update'> Update $hostname </option>\n";
-    echo "<option value='delete'> Delete $hostname </option>\n";
-    echo "</select></form>\n";
-    
-    echo "</td></tr></table>";
   }    
   
   echo "<hr />";