tabs : support for bubble text and image buttons

diff --git a/planetlab/includes/plc_minitabs.php b/planetlab/includes/plc_minitabs.php
index 9e86f74..c315c9e 100644 (file)
--- a/planetlab/includes/plc_minitabs.php
+++ b/planetlab/includes/plc_minitabs.php
@@ -15,8 +15,17 @@ drupal_set_html_head('
 // (*) or an associative array with the following keys
 //     (*) 'method': 'POST' or 'GET' -- default is 'GET'
 //     (*) 'url': where to go
-//     (*) 'confirm': a question to display before actually triggering
 //     (*) 'values': an associative array of (key,value) pairs to send to the URL; values are strings
+//     (*) 'confirm': a question to display before actually triggering
+//     (*) 'bubble': a longer message displayed when the mouse stays quite for a while on the label
+//     (*) 'image' : the url of an image used instead of the full title
+//     (*) 'height' : used for the image
+
+////////// Notes: limited support for images
+// (*) for some reason, confirmation does not work with image tabs 
+//     (the form gets submitted whatever the confirmation....)
+// (*) you need to tune the image size, which is wrong, as the image should rather be bottom-aligned 
+
 
 function plc_tabs($array) {
   print '<div id="minitabs_container">';
@@ -37,7 +46,16 @@ function plc_tabs($array) {
       }
     }
     $class_value="minitabs-submit";
-    printf('<input class="%s" value="%s" type=button onclick=\'miniTab.submit("%s");\' />',$class_value,$label,$todo['confirm']);
+    // image and its companions 'height' 
+    if ($todo['image']) {
+      $type='type=image src="' . $todo['image'] . '"';
+      if ($todo['height']) $type.= ' height=' . $todo['height'];
+    } else {
+      $type='type=button value="' . $label . '"';
+    }
+    printf('<span title="%s">',$todo['bubble']);
+    printf('<input class="%s" %s onclick=\'miniTab.submit("%s");\' />',$class_value,$type,$todo['confirm']);
+    printf('</span>',$todo['bubble']);
     printf("</form></li>\n");
   }
   print '</ul>';

diff --git a/planetlab/minitabs/minitabs.js b/planetlab/minitabs/minitabs.js
index 8608e41..fcceb1e 100644 (file)
--- a/planetlab/minitabs/minitabs.js
+++ b/planetlab/minitabs/minitabs.js
@@ -38,7 +38,10 @@ var miniTab = {
     for(var i = 0, li; li = miniTab.liArr[i]; i++) {
       li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
        var pos = 0;
-       var elem = this.nodeName == "LI" ? this : this.parentNode;
+       var elem = this;
+       /* move up twice until we find the 'LI' tag */
+       elem = (elem.nodeName == "LI") ? this : this.parentNode;
+       elem = (elem.nodeName == "LI") ? this : this.parentNode;
        while(elem.previousSibling) {
          elem = elem.previousSibling;
          if(elem.tagName && elem.tagName == "LI") pos++;