From 4f742265bbb15c3bfd2a32113807723f981b86c3 Mon Sep 17 00:00:00 2001 From: Thierry Parmentelat Date: Tue, 13 Jan 2009 17:10:39 +0000 Subject: [PATCH] add support for minitabs --- planetlab/minitab/minitab.css | 62 +++++++++++++++++ planetlab/minitab/minitab.js | 125 ++++++++++++++++++++++++++++++++++ planetlab/nodes/newindex.php | 23 +++++-- 3 files changed, 203 insertions(+), 7 deletions(-) create mode 100644 planetlab/minitab/minitab.css create mode 100644 planetlab/minitab/minitab.js diff --git a/planetlab/minitab/minitab.css b/planetlab/minitab/minitab.css new file mode 100644 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 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 --- a/planetlab/nodes/newindex.php +++ b/planetlab/nodes/newindex.php @@ -25,11 +25,13 @@ $header_tablesort_js=' + '; $header_tablesort_css=' + @@ -43,8 +45,21 @@ $nodepattern=$_GET['nodepattern']; $peerscope=$_GET['peerscope']; $tablesize=25; +drupal_set_title('Nodes'); + ?> +
+ +
+ + GetNodes($node_filter,$node_columns); @@ -123,6 +131,7 @@ function nodes_filter () { } +
-- 2.47.0