From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Tue, 20 Jan 2009 15:52:37 +0000 (+0000)
Subject: tabs : support for bubble text and image buttons
X-Git-Tag: PLEWWW-4.3-1~96
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=e13bb3116da73769355116384a77480c59468ec0;p=plewww.git

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
--- 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
--- 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++;