add support for minitabs

diff --git a/planetlab/minitab/minitab.css b/planetlab/minitab/minitab.css
new file mode 100644 (file)
index 0000000..ab89226
--- /dev/null
+++ b/planetlab/minitab/minitab.css
@@ -0,0 +1,62 @@
+li.minitab {
+    font-family: verdana, sans-serif;
+    font-size: 14px;
+    text-align: center;
+    font-style: oblique;
+}    
+#container {
+        padding: 15px;
+        margin: 8px 0;
+        width:80%;
+/*        margin:40px 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;
+        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 a.active:link, #miniflex a.active:visited, #miniflex a:hover {
+        border-bottom: 4px solid #696;
+        padding-bottom: 2px;
+        color: #696;
+        }
+        
+#animated-tab {
+        position: absolute;
+        z-index: 1;
+        font-size: 85%;
+        line-height: 20px;
+        padding-bottom: 2px;
+        border-bottom: 4px solid #696;
+        }
+/*
+   br
+        {
+        clear:both;
+        }
+*/

diff --git a/planetlab/minitab/minitab.js b/planetlab/minitab/minitab.js
new file mode 100644 (file)
index 0000000..a42823e
--- /dev/null
+++ b/planetlab/minitab/minitab.js
@@ -0,0 +1,125 @@
+/*
+ 
+   Animated miniTabs by frequency decoder (http://www.frequency-decoder.com/)
+ 
+   Based on an idea by Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/) itself
+   derived from the original idea of Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
+ 
+*/
+ 
+var miniTab = {
+        currentTab:     0,
+        activeTab:      0,
+        destX:          0,
+        destW:          0,
+        t:              0,
+        b:              0,
+        c:              0,
+        d:              20,
+        animInterval:   null,
+        sliderObj:      null,
+        aHeight:        0,
+        ul:             [],
+        liArr:          [],
+        aArr:           [],
+        
+        init: function() {
+                if(!document.getElementById || !document.getElementById("miniflex")) return;
+ 
+                miniTab.ul          = document.getElementById("miniflex");
+                miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
+                miniTab.aArr        = miniTab.ul.getElementsByTagName("a");
+ 
+                for(var i = 0, li; li = miniTab.liArr[i]; i++) {
+                        li.onmouseover = miniTab.aArr[i].onfocus = function(e) {
+                                var pos = 0;
+                                var elem = this.nodeName == "LI" ? this : this.parentNode;
+                                while(elem.previousSibling) {
+                                        elem = elem.previousSibling;
+                                        if(elem.tagName && elem.tagName == "LI") pos++;
+ 
+                                }
+                                miniTab.initSlide(pos);
+                        }
+                }
+ 
+                miniTab.ul.onmouseout = function(e) {
+                        miniTab.initSlide(miniTab.currentTab);
+                };
+ 
+                for(var i = 0, a; a = miniTab.aArr[i]; i++) {
+                        if(a.className.search("active") != -1) {
+                                miniTab.activeTab = miniTab.currentTab = i;
+                        }
+                        a.style.borderBottom  = "0px";
+                        a.style.paddingBottom = "6px";
+                }
+ 
+                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.aArr[miniTab.activeTab].offsetTop) + "px";
+                miniTab.slideObj.style.left     = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft + miniTab.aArr[miniTab.activeTab].offsetLeft) + "px";
+                miniTab.slideObj.style.width    = miniTab.aArr[miniTab.activeTab].offsetWidth + "px";
+                miniTab.aHeight                 = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.aArr[miniTab.activeTab].offsetTop;
+ 
+                miniTab.initSlide(miniTab.activeTab, true);
+ 
+                var intervalMethod = function() { miniTab.slideIt(); }
+                miniTab.animInterval = setInterval(intervalMethod,10);
+        },
+ 
+        cleanUp: function() {
+                clearInterval(miniTab.animInterval);
+                miniTab.animInterval = null;
+        },
+ 
+        initSlide: function(pos, force) {
+                if(!force && pos == miniTab.activeTab) return;
+                miniTab.activeTab = pos;
+                miniTab.initAnim();
+        },
+ 
+        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);
+                miniTab.t = 0;
+                miniTab.b = miniTab.slideObj.offsetLeft;
+                miniTab.c = miniTab.destX - miniTab.b;
+ 
+                miniTab.bW = miniTab.slideObj.offsetWidth;
+                miniTab.cW = miniTab.destW - miniTab.bW;
+ 
+                miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.aArr[miniTab.activeTab].offsetTop) + "px";
+        },
+ 
+        slideIt:function() {
+ 
+                // Has the browser text size changed?
+                if(miniTab.aHeight != miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.aArr[miniTab.activeTab].offsetTop) {
+                        miniTab.initAnim();
+                        miniTab.aHeight = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.aArr[miniTab.activeTab].offsetTop
+                };
+ 
+                if(miniTab.t++ < miniTab.d) {
+                        var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
+                        var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
+ 
+                        miniTab.slideObj.style.left = parseInt(x) + "px";
+                        miniTab.slideObj.style.width = parseInt(w) + "px";
+                } else {
+                        miniTab.slideObj.style.left = miniTab.destX + "px";
+                        miniTab.slideObj.style.width = miniTab.destW +"px";
+                }
+        },
+ 
+        animate: function(t,b,c,d) {
+                if ((t/=d/2) < 1) return c/2*t*t + b;
+                return -c/2 * ((--t)*(t-2) - 1) + b;
+        }
+}
+ 
+window.onload = miniTab.init;
+window.onunload = miniTab.cleanUp;
+ 

diff --git a/planetlab/nodes/newindex.php b/planetlab/nodes/newindex.php
index 90c14e4..4350ddc 100644 (file)
--- a/planetlab/nodes/newindex.php
+++ b/planetlab/nodes/newindex.php
@@ -25,11 +25,13 @@ $header_tablesort_js='
 <script type="text/javascript" src="/planetlab/tablesort/tablesort.js"></script>
 <script type="text/javascript" src="/planetlab/tablesort/customsort.js"></script>
 <script type="text/javascript" src="/planetlab/tablesort/paginate.js"></script>
+<script type="text/javascript" src="/planetlab/minitab/minitab.js"></script>
 <script type="text/javascript" src="/planetlab/js/plc_paginate.js"></script>
 <script type="text/javascript" src="/planetlab/js/plc_filter.js"></script>
 ';
 
 $header_tablesort_css='
+<link href="/planetlab/minitab/minitab.css" rel="stylesheet" type="text/css" />
 <link href="/planetlab/css/plc_style.css" rel="stylesheet" type="text/css" />
 <link href="/planetlab/css/plc_table.css" rel="stylesheet" type="text/css" />
 <link href="/planetlab/css/plc_paginate.css" rel="stylesheet" type="text/css" />
@@ -43,8 +45,21 @@ $nodepattern=$_GET['nodepattern'];
 $peerscope=$_GET['peerscope'];
 $tablesize=25;
 
+drupal_set_title('Nodes');
+
 ?>
 
+<div id="container">
+  <ul id="miniflex">
+  <li class='minitab'><a href="/db/nodes/index.php" title="">Old page</a></li>
+  <li class='minitab'><a href="/db/about.php" title="">About</a></li>
+  <li class='minitab'><a href="/planetlab/logout.php" title="">Log out</a></li>
+  <li class='minitab'><a href="http://www.google.com/" title="">Google</a></li>
+  <li class='minitab'><a href="/undefined/" title="">Other stuff</a></li>
+  </ul>
+</div>
+
+
 <!------------------------------------------------------------>
 <?php
 
@@ -62,13 +77,6 @@ if ($nodepattern) {
 list ( $peer_filter, $peer_label) = plc_peer_info($api,$_GET['peerscope']);
 $node_filter=array_merge($node_filter,$peer_filter);
 
-$title='Nodes';
-if ($nodepattern) {
-  $title .= " matching " . $nodepattern;
- }
-$title .= ' (' . $peer_label . ')';
-drupal_set_title($title);
-
 // go
 $nodes=$api->GetNodes($node_filter,$node_columns);
 
@@ -123,6 +131,7 @@ function nodes_filter () {
 }
 </script>
 
+<br/>
 <!------------------------------------------------------------>
 <table class='table_dialogs'> <tr>
 <td class='table_flushleft'>