firefox

diff --git a/planetlab/includes/plc_minitabs.php b/planetlab/includes/plc_minitabs.php
index c315c9e..0574f6b 100644 (file)
--- a/planetlab/includes/plc_minitabs.php
+++ b/planetlab/includes/plc_minitabs.php
@@ -28,11 +28,14 @@ drupal_set_html_head('
 
 
 function plc_tabs($array) {
-  print '<div id="minitabs_container">';
-  print '<ul id="miniflex">';
+  print '<div id="minitabs-container">';
+  print '<ul id="minitabs-list">';
   print "\n";
   foreach ($array as $label=>$todo) {
-    print '<li class="minitabs">';
+    $tracer="class=minitabs";
+    if ($todo['id']) 
+      $tracer .= " id=".$todo['id'];
+    printf ("<li %s>\n",$tracer);
     // in case we have a string, rewrite it as an array
     if (is_string ($todo)) $todo=array('method'=>'GET','url'=>$todo);
     // set default method
@@ -45,7 +48,7 @@ function plc_tabs($array) {
        printf('<input class="minitabs-hidden" type=hidden name="%s" value="%s" />',$key,$value);
       }
     }
-    $class_value="minitabs-submit";
+    $tracer="class=minitabs-submit";
     // image and its companions 'height' 
     if ($todo['image']) {
       $type='type=image src="' . $todo['image'] . '"';
@@ -54,7 +57,7 @@ function plc_tabs($array) {
       $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('<input %s %s onclick=\'miniTab.submit("%s");\' />',$tracer,$type,$todo['confirm']);
     printf('</span>',$todo['bubble']);
     printf("</form></li>\n");
   }

diff --git a/planetlab/minitabs/minitabs.css b/planetlab/minitabs/minitabs.css
index 33c6c27..4ef0ef3 100644 (file)
--- a/planetlab/minitabs/minitabs.css
+++ b/planetlab/minitabs/minitabs.css
@@ -1,12 +1,12 @@
 /* $Id$ */
 
-#minitabs_container {
+#minitabs-container {
     padding: 20px;
     margin: 8px 0;
     width:80%;
     margin:8px auto;
 }
-#miniflex {
+#minitabs-list {
     width: 100%;
     float: left;
     font-size: small;  /* could be specified at a higher level */
@@ -27,7 +27,7 @@ input.minitabs-submit {
     /* buttons are normally outlined */
     background-color: transparent;
 }    
-#miniflex li {
+#minitabs-list li {
     float: left;
     margin: 0;
     padding: 0 8px 0 8px;
@@ -36,7 +36,7 @@ input.minitabs-submit {
     position:relative;
 }
 
-#miniflex input.minitabs-submit {
+#minitabs-list input.minitabs-submit {
     float: left;
     font-size: 85%;
     line-height: 20px;
@@ -47,14 +47,14 @@ input.minitabs-submit {
     color: #9c9;  
 }
 
-#miniflex input.active {
+#minitabs-list input.active {
     /* border-bottom: 4px solid #696; */
     padding-bottom: 2px;
     /* color when mouse is on button */
     color: #696;
 }
 
-#animated-tab {
+#minitabs-sliding {
     position: absolute;
     z-index: 1;
     font-size: 85%;

diff --git a/planetlab/minitabs/minitabs.js b/planetlab/minitabs/minitabs.js
index a433a88..15f0135 100644 (file)
--- a/planetlab/minitabs/minitabs.js
+++ b/planetlab/minitabs/minitabs.js
@@ -10,7 +10,33 @@
   $Id$
 
 */
- 
+
+function plc_debug (txt,value) {
+  window.console.log (txt + ' => ' + value);
+}  
+
+function plc_element (txt,elem) {
+  var message=txt + ':';
+  message += ' type=' + elem.nodeName;
+  message += ' id=' + elem.id;
+  message += ' cls=' + elem.className;
+  window.console.log (message);
+}  
+
+/* lists all attributes - or the specified one - 
+ * verbose means the attribute value gets printed as well */
+function plc_introspect (txt,obj,verbose,attribute) {
+  window.console.log ('=== beg intro ' + txt);
+  for (var prop in obj) {
+    if ( (attribute === undefined) || ( prop == attribute ) ) 
+      if (verbose) 
+       window.console.log (prop + '=' + obj[prop]);
+      else
+       window.console.log (prop);
+  }
+  window.console.log ('=== end intro ' + txt);
+}
+
 var miniTab = {
  currentTab:     0,
  activeTab:      0,
@@ -28,20 +54,36 @@ var miniTab = {
  inputArr:       [],
         
  init: function() {
-    if(!document.getElementById || !document.getElementById("miniflex")) return;
- 
-    miniTab.ul          = document.getElementById("miniflex");
+
+    /* define getElementsByClassName on Element if missing */
+    if ( ! Element.prototype.getElementsByClassName ) {
+      Element.prototype.getElementsByClassName = function (cls) {
+       var retVal = new Array();
+       var elements = this.getElementsByTagName("*");
+       for (var i = 0; i < elements.length; i++) {
+         var element = elements[i];
+         var classes = element.className.split(" ");
+         for (var c = 0; c < classes.length; c++) 
+           if (classes[c] == cls) 
+             retVal.push(elements[i]);
+       }
+       return retVal;
+      }
+    }
+
+    miniTab.ul          = document.getElementById("minitabs-list");
     miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
-    // Thierry: the original impl. relied on <a> links rather than forms - we use ids
+    // Thierry: the original impl. relied on <a> links rather than forms 
+    // we use <input>s and there might be hidden ones, so use a class marker instead
     miniTab.inputArr        = miniTab.ul.getElementsByClassName("minitabs-submit");
  
     for(var i = 0, li; li = miniTab.liArr[i]; i++) {
       li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
        var pos = 0;
        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;
+       /* some browsers - firefox - somehow trigger this on <input> */
+       if (this.nodeName != "LI") return;
+       /* move up until we find the 'LI' tag */
        while(elem.previousSibling) {
          elem = elem.previousSibling;
          if(elem.tagName && elem.tagName == "LI") pos++;
@@ -66,11 +108,14 @@ var miniTab = {
  
     miniTab.slideObj                = miniTab.ul.parentNode.appendChild(document.createElement("div"));
     miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
-    miniTab.slideObj.id             = "animated-tab";
-    miniTab.slideObj.style.top      = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
-    miniTab.slideObj.style.left     = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft + miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
+    miniTab.slideObj.id             = "minitabs-sliding";
+    miniTab.slideObj.style.top      = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + 
+                                      miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
+    miniTab.slideObj.style.left     = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft + 
+                                      miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
     miniTab.slideObj.style.width    = miniTab.inputArr[miniTab.activeTab].offsetWidth + "px";
-    miniTab.aHeight                 = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop;
+    miniTab.aHeight                 = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + 
+                                      miniTab.inputArr[miniTab.activeTab].offsetTop);
  
     miniTab.initSlide(miniTab.activeTab, true);
  
@@ -140,9 +185,11 @@ var miniTab = {
   },
 
  submit: function (message) {
+    /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
+    var submitTab = this.activeTab;
     /* ask for confirmation if message is not empty */
     if (message && ! confirm (message) ) return;
-    this.inputArr[this.activeTab].parentNode.parentNode.submit();
+    this.inputArr[submitTab].parentNode.parentNode.submit();
   },
 }