planetlab/minitabs/minitabs.js

   1 /*
   2
   3   Animated miniTabs by frequency decoder (http://www.frequency-decoder.com/)
   4
   5   Based on an idea by Rob L Glazebrook (http://www.rootarcana.com/test/smartmini/) itself
   6   derived from the original idea of Stephen Clark (http://www.sgclark.com/sandbox/minislide/)
   7
   8   Adjusted by Thierry Parmentelat -- INRIA - uses only forms rather than <a> tags, for supporting http-POST
   9
  10   $Id$
  11
  12 */
  13
  14 function plc_debug (txt,value) {
  15   window.console.log (txt + ' => ' + value);
  16 }
  17
  18 function plc_element (txt,elem) {
  19   var message=txt + ':';
  20   message += ' type=' + elem.nodeName;
  21   message += ' id=' + elem.id;
  22   message += ' cls=' + elem.className;
  23   window.console.log (message);
  24 }
  25
  26 /* lists all attributes - or the specified one -
  27  * verbose means the attribute value gets printed as well */
  28 function plc_introspect (txt,obj,verbose,attribute) {
  29   window.console.log ('=== beg intro ' + txt);
  30   for (var prop in obj) {
  31     if ( (attribute === undefined) || ( prop == attribute ) )
  32       if (verbose)
  33         window.console.log (prop + '=' + obj[prop]);
  34       else
  35         window.console.log (prop);
  36   }
  37   window.console.log ('=== end intro ' + txt);
  38 }
  39
  40 /* I'm done with this - write it ourselves - don't care about perfs so much anyway */
  41 /* define getElementsByClassName on Element if missing */
  42 function getElementsByClassName (elt,cls) {
  43   try {
  44     var retval= elt.getElementsByClassName(cls);
  45     return retval;
  46     } catch (err) {
  47     var retVal = new Array();
  48     var elements = elt.getElementsByTagName("*");
  49     for (var i = 0; i < elements.length; i++) {
  50       var element = elements[i];
  51       var classes = element.className.split(" ");
  52       for (var c = 0; c < classes.length; c++)
  53         if (classes[c] == cls)
  54           retVal.push(elements[i]);
  55     }
  56     return retVal;
  57   }
  58 }
  59
  60 var miniTab = {
  61  currentTab:     0,
  62  activeTab:      0,
  63  destX:          0,
  64  destW:          0,
  65  t:              0,
  66  b:              0,
  67  c:              0,
  68  d:              20,
  69  animInterval:   null,
  70  sliderObj:      null,
  71  aHeight:        0,
  72  ul:             [],
  73  liArr:          [],
  74  inputArr:       [],
  75
  76  init: function() {
  77
  78     miniTab.ul          = document.getElementById("minitabs-list");
  79     miniTab.liArr       = miniTab.ul.getElementsByTagName("li");
  80     // Thierry: the original impl. relied on <a> links rather than forms
  81     // we use <input>s and there might be hidden ones, so use a class marker instead
  82     miniTab.inputArr        = getElementsByClassName(miniTab.ul,"minitabs-submit");
  83
  84     for(var i = 0, li; li = miniTab.liArr[i]; i++) {
  85       li.onmouseover = miniTab.inputArr[i].onfocus = function(e) {
  86         var pos = 0;
  87         var elem = this;
  88         /* some browsers - firefox - somehow trigger this on <input> */
  89         if (this.nodeName != "LI") return;
  90         /* move up until we find the 'LI' tag */
  91         while(elem.previousSibling) {
  92           elem = elem.previousSibling;
  93           if(elem.tagName && elem.tagName == "LI") pos++;
  94
  95         }
  96         miniTab.initSlide(pos);
  97       }
  98     }
  99
 100     miniTab.ul.onmouseout = function(e) {
 101       miniTab.initSlide(miniTab.currentTab);
 102       miniTab.setActive (miniTab.activeTab,false);
 103     };
 104
 105     for(var i = 0, a; a = miniTab.inputArr[i]; i++) {
 106       if(a.className.search("active") != -1) {
 107         miniTab.activeTab = miniTab.currentTab = i;
 108       }
 109       a.style.borderBottom  = "0px";
 110       /*a.style.paddingBottom = "6px";*/
 111     }
 112
 113     miniTab.slideObj                = miniTab.ul.parentNode.appendChild(document.createElement("div"));
 114     miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));
 115     miniTab.slideObj.id             = "minitabs-sliding";
 116     miniTab.slideObj.style.top      = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
 117                                        miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
 118     miniTab.slideObj.style.left     = (miniTab.ul.offsetLeft + miniTab.liArr[miniTab.activeTab].offsetLeft +
 119                                        miniTab.inputArr[miniTab.activeTab].offsetLeft) + "px";
 120     miniTab.slideObj.style.width    = miniTab.inputArr[miniTab.activeTab].offsetWidth + "px";
 121     miniTab.aHeight                 = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop +
 122                                        miniTab.inputArr[miniTab.activeTab].offsetTop);
 123
 124     miniTab.initSlide(miniTab.activeTab, true);
 125
 126     var intervalMethod = function() { miniTab.slideIt(); }
 127     miniTab.animInterval = setInterval(intervalMethod,10);
 128   },
 129
 130  cleanUp: function() {
 131     clearInterval(miniTab.animInterval);
 132     miniTab.animInterval = null;
 133   },
 134
 135  initSlide: function(pos, force) {
 136     if(!force && pos == miniTab.activeTab) return;
 137     miniTab.setActive (miniTab.activeTab,false);
 138     miniTab.activeTab = pos;
 139     miniTab.setActive (miniTab.activeTab,true);
 140     miniTab.initAnim();
 141   },
 142
 143  setActive: function (pos,active) {
 144     var input=getElementsByClassName(miniTab.liArr[pos],"minitabs-submit")[0];
 145     var cn=input.className;
 146     cn=cn.replace(" active","");
 147     if (active) cn += " active";
 148     input.className=cn;
 149   },
 150
 151  initAnim: function() {
 152     /* search for the input with type != hidden */
 153     var input=getElementsByClassName(miniTab.liArr[miniTab.activeTab],"minitabs-submit")[0];
 154     miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft);
 155     miniTab.destW = parseInt(input.offsetWidth);
 156     miniTab.t = 0;
 157     miniTab.b = miniTab.slideObj.offsetLeft;
 158     miniTab.c = miniTab.destX - miniTab.b;
 159
 160     miniTab.bW = miniTab.slideObj.offsetWidth;
 161     miniTab.cW = miniTab.destW - miniTab.bW;
 162
 163     miniTab.slideObj.style.top = (miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) + "px";
 164   },
 165
 166  slideIt:function() {
 167
 168     // Has the browser text size changed?
 169     if(miniTab.aHeight != miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop) {
 170       miniTab.initAnim();
 171       miniTab.aHeight = miniTab.ul.offsetTop + miniTab.liArr[miniTab.activeTab].offsetTop + miniTab.inputArr[miniTab.activeTab].offsetTop
 172     };
 173
 174     if(miniTab.t++ < miniTab.d) {
 175       var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);
 176       var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);
 177
 178       miniTab.slideObj.style.left = parseInt(x) + "px";
 179       miniTab.slideObj.style.width = parseInt(w) + "px";
 180     } else {
 181       miniTab.slideObj.style.left = miniTab.destX + "px";
 182       miniTab.slideObj.style.width = miniTab.destW +"px";
 183     }
 184   },
 185
 186  animate: function(t,b,c,d) {
 187     if ((t/=d/2) < 1) return c/2*t*t + b;
 188     return -c/2 * ((--t)*(t-2) - 1) + b;
 189   },
 190
 191  submit: function (message) {
 192     /* save activeTab before confirmation; some browsers - firefox - send mouseout during confirm .. */
 193     var submitTab = this.activeTab;
 194     /* ask for confirmation if message is not empty */
 195     if (message && ! confirm (message) ) return;
 196     this.inputArr[submitTab].parentNode.parentNode.submit();
 197   }
 198 }
 199
 200 window.onload = miniTab.init;
 201 window.onunload = miniTab.cleanUp;
 202